diff --git a/src/app/globals.css b/src/app/globals.css
index 0613ae6..2373478 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -5,16 +5,9 @@
   --foreground: #171717;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
 }
 
 body {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index aa1e268..76c9fe9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,7 +13,30 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const savedTheme = localStorage.getItem('theme');
+                  if (savedTheme === 'dark' || savedTheme === 'light') {
+                    if (savedTheme === 'dark') {
+                      document.documentElement.classList.add('dark');
+                    }
+                    return;
+                  }
+                  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  if (isDark) {
+                    document.documentElement.classList.add('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
       <body className="antialiased">
         <ThemeProvider>
           {children}
diff --git a/src/app/theme-provider.tsx b/src/app/theme-provider.tsx
index ee580ab..71721fe 100644
--- a/src/app/theme-provider.tsx
+++ b/src/app/theme-provider.tsx
@@ -11,29 +11,38 @@ interface ThemeContextType {
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<Theme>(() => {
-    if (typeof window === "undefined") {
-      return "light";
-    }
+function getInitialTheme(): Theme {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+
+  const savedTheme = window.localStorage.getItem("theme");
+  if (savedTheme === "light" || savedTheme === "dark") {
+    return savedTheme;
+  }
 
-    const savedTheme = window.localStorage.getItem("theme");
-    if (savedTheme === "light" || savedTheme === "dark") {
-      return savedTheme;
-    }
+  const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return isDark ? "dark" : "light";
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("light");
+  const [mounted, setMounted] = useState(false);
 
-    const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    return isDark ? "dark" : "light";
-  });
+  useEffect(() => {
+    setMounted(true);
+    const initialTheme = getInitialTheme();
+    setTheme(initialTheme);
+    document.documentElement.classList.toggle("dark", initialTheme === "dark");
+  }, []);
 
   useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (!mounted) return;
     document.documentElement.classList.toggle("dark", theme === "dark");
-  }, [theme]);
+  }, [theme, mounted]);
 
   const toggleTheme = () => {
-    if (typeof window === "undefined") return;
-    
+    if (!mounted) return;
     const newTheme = theme === "light" ? "dark" : "light";
     setTheme(newTheme);
     window.localStorage.setItem("theme", newTheme);
