diff --git a/app/layout.tsx b/app/layout.tsx
index 625de0f..1061c61 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -16,6 +16,21 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className="bg-white dark:bg-gray-950 text-gray-900 dark:text-white">
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var stored = localStorage.getItem('theme');
+                  var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  if (stored === 'dark' || (!stored && prefersDark)) {
+                    document.documentElement.classList.add('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
         <LanguageProvider>
           <TerminalProvider>
             <Header />
diff --git a/components/Header.tsx b/components/Header.tsx
index e6310e9..bc19339 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -28,13 +28,28 @@ export default function Header() {
   }
 
   useEffect(() => {
-    const isDark = document.documentElement.classList.contains('dark')
+    const stored = localStorage.getItem('theme')
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    const isDark = stored === 'dark' || (!stored && prefersDark)
+    
+    if (isDark) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
     setDark(isDark)
   }, [])
 
   const toggleDark = () => {
-    document.documentElement.classList.toggle('dark')
-    setDark(!dark)
+    const newDark = !dark
+    if (newDark) {
+      document.documentElement.classList.add('dark')
+      localStorage.setItem('theme', 'dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+      localStorage.setItem('theme', 'light')
+    }
+    setDark(newDark)
   }
 
   return (
