diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c4e6fa6..2a94dda 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,7 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Ocean Realm",  description: "Explore the extraordinary adaptations and fascinating behaviors of ocean's most unusual inhabitants."};
+  title: "Ocean Realm",  description: "Explore the extraordinary adaptations and fascinating behaviors of ocean's most unusual inhabitants."
+};
 
 export default function RootLayout({
   children,
@@ -13,7 +14,23 @@ 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');
+                  if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                    document.documentElement.classList.add('dark');
+                  }
+                } catch (e) {}
+              })()
+            `,
+          }}
+        />
+      </head>
       <body className={inter.className}>{children}
         <script
           dangerouslySetInnerHTML={{
