diff --git a/app/layout.tsx b/app/layout.tsx
index 2cbc4bf..c05364a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -20,7 +20,26 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const theme = localStorage.getItem('theme');
+                  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  const shouldBeDark = theme === 'dark' || (!theme && prefersDark);
+
+                  if (shouldBeDark) {
+                    document.documentElement.classList.add('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
       <body className="antialiased">
         <ToastProvider>
           {children}
diff --git a/components/layout/ThemeToggle.tsx b/components/layout/ThemeToggle.tsx
index 8dcc5f0..b904d5e 100644
--- a/components/layout/ThemeToggle.tsx
+++ b/components/layout/ThemeToggle.tsx
@@ -15,13 +15,9 @@ export function ThemeToggle() {
   }, [theme]);
 
   React.useEffect(() => {
-    // Check for saved theme preference or default to light
-    const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
-
-    setTheme(initialTheme);
-    document.documentElement.classList.toggle('dark', initialTheme === 'dark');
+    // Read the current theme from the DOM (set by blocking script)
+    const isDark = document.documentElement.classList.contains('dark');
+    setTheme(isDark ? 'dark' : 'light');
   }, []);
 
   // Keyboard shortcut: Ctrl/Cmd + D
