diff --git a/apps/next/next.config.js b/apps/next/next.config.js
index ba388d3..0d2df5b 100644
--- a/apps/next/next.config.js
+++ b/apps/next/next.config.js
@@ -1,11 +1,10 @@
+import { env } from '@/env.js';
 import { withSentryConfig } from '@sentry/nextjs';
 import { withPlausibleProxy } from 'next-plausible';
 
-import { env } from '@/env';
-
 /** @type {import("next").NextConfig} */
 const config = withPlausibleProxy({
-  customDomain: env.NEXT_PUBLIC_PLAUSIBLE_URL,
+  customDomain: process.env.NEXT_PUBLIC_PLAUSIBLE_URL,
 })({
   output: 'standalone',
   images: {
@@ -35,7 +34,7 @@ const sentryConfig = {
   sentryUrl: env.NEXT_PUBLIC_SENTRY_URL,
   authToken: env.SENTRY_AUTH_TOKEN,
   // Only print logs for uploading source maps in CI
-  silent: env.CI,
+  silent: !env.CI,
   // For all available options, see:
   // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
   // Upload a larger set of source maps for prettier stack traces (increases build time)
diff --git a/apps/next/src/app/layout.tsx b/apps/next/src/app/layout.tsx
index d4c1118..f9d734d 100644
--- a/apps/next/src/app/layout.tsx
+++ b/apps/next/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata, Viewport } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
-import { env } from '@/env';
+import { env } from '@/env.js';
 
 import '@/app/styles.css';
 
diff --git a/apps/next/src/env.ts b/apps/next/src/env.js
similarity index 77%
rename from apps/next/src/env.ts
rename to apps/next/src/env.js
index a2735c6..57655ac 100644
--- a/apps/next/src/env.ts
+++ b/apps/next/src/env.js
@@ -2,18 +2,13 @@ import { createEnv } from '@t3-oss/env-nextjs';
 import { z } from 'zod/v4';
 
 export const env = createEnv({
-  shared: {
+  server: {
     NODE_ENV: z
       .enum(['development', 'production', 'test'])
       .default('development'),
-    CI: z.boolean().default(false),
-  },
-  /**
-   * Specify your server-side environment variables schema here.
-   * This way you can ensure the app isn't built with invalid env vars.
-   */
-  server: {
+    SKIP_ENV_VALIDATION: z.boolean().default(false),
     SENTRY_AUTH_TOKEN: z.string(),
+    CI: z.boolean().default(false),
   },
 
   /**
@@ -32,8 +27,10 @@ export const env = createEnv({
   /**
    * Destructure all variables from `process.env` to make sure they aren't tree-shaken away.
    */
-  experimental__runtimeEnv: {
+  runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,
+    SKIP_ENV_VALIDATION: process.env.SKIP_ENV_VALIDATION,
+    SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
     CI: process.env.CI,
     NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
     NEXT_PUBLIC_CONVEX_URL: process.env.NEXT_PUBLIC_CONVEX_URL,
@@ -41,9 +38,8 @@ export const env = createEnv({
     NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
     NEXT_PUBLIC_SENTRY_URL: process.env.NEXT_PUBLIC_SENTRY_URL,
     NEXT_PUBLIC_SENTRY_ORG: process.env.NEXT_PUBLIC_SENTRY_ORG,
-    NEXT_PUBLIC_SENTRY_PROJECT_NAME:
-      process.env.NEXT_PUBLIC_SENTRY_PROJECT_NAME,
+    NEXT_PUBLIC_SENTRY_PROJECT_NAME: process.env.NEXT_PUBLIC_SENTRY_PROJECT_NAME,
   },
-  skipValidation:
-    !!process.env.CI || process.env.npm_lifecycle_event === 'lint',
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  emptyStringAsUndefined: true,
 });
diff --git a/apps/next/src/instrumentation-client.ts b/apps/next/src/instrumentation-client.ts
index 63b3520..65d301f 100644
--- a/apps/next/src/instrumentation-client.ts
+++ b/apps/next/src/instrumentation-client.ts
@@ -1,7 +1,6 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 import * as Sentry from '@sentry/nextjs';
-
-import { env } from '@/env';
+import { env } from '@/env.js';
 
 Sentry.init({
   dsn: env.NEXT_PUBLIC_SENTRY_DSN,
diff --git a/apps/next/src/sentry.server.config.ts b/apps/next/src/sentry.server.config.ts
index 09cf6e0..b4d7780 100644
--- a/apps/next/src/sentry.server.config.ts
+++ b/apps/next/src/sentry.server.config.ts
@@ -1,6 +1,5 @@
 import * as Sentry from '@sentry/nextjs';
-
-import { env } from '@/env';
+import { env } from '@/env.js';
 
 Sentry.init({
   dsn: env.NEXT_PUBLIC_SENTRY_DSN,
diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx
index f1655fa..142bc22 100644
--- a/packages/ui/src/theme.tsx
+++ b/packages/ui/src/theme.tsx
@@ -1,17 +1,9 @@
 'use client';
 
 import type { ComponentProps } from 'react';
-import { Moon, Sun } from 'lucide-react';
 import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
-
-import {
-  Button,
-  cn,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@gib/ui';
+import { Moon, Sun } from 'lucide-react';
+import { Button, cn } from '@gib/ui';
 
 
 const ThemeProvider = ({
@@ -27,41 +19,28 @@ interface ThemeToggleProps {
 }
 
 const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
-  const { setTheme } = useTheme();
-
+  const { setTheme, resolvedTheme } = useTheme();
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="icon"
-          {...buttonProps}
-          className={cn('cursor-pointer', buttonProps?.className)}
-        >
-          <Sun
-            style={{ height: `${size}rem`, width: `${size}rem` }}
-            className='scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90'
-          />
-          <Moon
-            style={{ height: `${size}rem`, width: `${size}rem` }}
-            className='absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0'
-          />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+      {...buttonProps}
+      className={cn('cursor-pointer', buttonProps?.className)}
+    >
+      <Sun
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className='scale-100 rotate-0 transition-all
+          dark:scale-0 dark:-rotate-90'
+      />
+      <Moon
+        style={{ height: `${size}rem`, width: `${size}rem` }}
+        className='absolute scale-0 rotate-90 transition-all
+          dark:scale-100 dark:rotate-0'
+      />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
 };
 
 export { ThemeProvider, ThemeToggle, type ThemeToggleProps };