diff --git a/app/layout.tsx b/app/layout.tsx
index 893dfaf..2ad43b4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -14,6 +14,30 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const storageKey = 'units-ui-theme';
+                  const stored = localStorage.getItem(storageKey);
+                  const theme = stored || 'system';
+
+                  if (theme === 'system') {
+                    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+                      ? 'dark'
+                      : 'light';
+                    document.documentElement.classList.add(systemTheme);
+                  } else {
+                    document.documentElement.classList.add(theme);
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
       <body className="antialiased">
         <ThemeProvider defaultTheme="system" storageKey="units-ui-theme">
           {children}
