Index: src/app/layout.tsx
===================================================================
--- src/app/layout.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/layout.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -6,4 +6,6 @@
 import { I18nextProvider } from 'react-i18next';
 import i18n from '../i18n';
+import { ThemeProvider } from '../components/theme-provider';
+import { ThemeToggle } from '../components/theme-toggle';
 
 config.autoAddCss = false;
@@ -25,9 +27,14 @@
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <I18nextProvider i18n={i18n}>
-          <div className="mx-auto max-w-6xl px-4">{children}</div>
-        </I18nextProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <I18nextProvider i18n={i18n}>
+            <div className="fixed top-4 right-4 z-50">
+              <ThemeToggle />
+            </div>
+            <div className="mx-auto max-w-6xl px-4">{children}</div>
+          </I18nextProvider>
+        </ThemeProvider>
       </body>
     </html>
