diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
new file mode 100644
index 0000000..830fb59
--- /dev/null
+++ b/frontend/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 54ea001..2c03c8b 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,6 +1,17 @@
 @import 'tailwindcss';
 
 :root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f3f4f6;
+  --bg-card: #ffffff;
+  --text-primary: #111827;
+  --text-secondary: #4b5563;
+  --accent: #6366f1;
+  --accent-muted: #4f46e5;
+  --border: #e5e7eb;
+}
+
+[data-theme='dark'] {
   --bg-primary: #0a0a0f;
   --bg-secondary: #12121a;
   --bg-card: #1a1a2e;
@@ -15,4 +26,5 @@ body {
   background: var(--bg-primary);
   color: var(--text-primary);
   font-family: system-ui, -apple-system, sans-serif;
-}
+  transition: background-color 0.3s, color 0.3s;
+}
\ No newline at end of file
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 1acf22c..c26752f 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next'
 import './globals.css'
+import ThemeToggle from '@/components/ThemeToggle'
 
 export const metadata: Metadata = {
   title: 'deep-cuts',
@@ -8,18 +9,31 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                const savedTheme = localStorage.getItem('theme') || 'dark';
+                document.documentElement.setAttribute('data-theme', savedTheme);
+              })();
+            `,
+          }}
+        />
+      </head>
       <body className="min-h-screen antialiased">
         <header className="border-b border-[var(--border)] px-6 py-4">
           <div className="max-w-7xl mx-auto flex items-center justify-between">
             <h1 className="text-xl font-bold tracking-tight">deep-cuts</h1>
-            <nav className="flex gap-6 text-sm text-[var(--text-secondary)]">
+            <nav className="flex items-center gap-6 text-sm text-[var(--text-secondary)]">
               <a href="/" className="hover:text-[var(--text-primary)] transition">
                 Search
               </a>
               <a href="/threads" className="hover:text-[var(--text-primary)] transition">
                 Threads
               </a>
+              <ThemeToggle />
             </nav>
           </div>
         </header>
@@ -27,4 +41,4 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </body>
     </html>
   )
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..6098ef3
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function ThemeToggle() {
+    const [theme, setTheme] = useState('dark');
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        setTheme(savedTheme);
+        document.documentElement.setAttribute('data-theme', savedTheme);
+    }, []);
+
+    const toggleTheme = () => {
+        const newTheme = theme === 'light' ? 'dark' : 'light';
+        setTheme(newTheme);
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+    };
+
+    return (
+        <button
+            onClick={toggleTheme}
+            className="p-2 rounded-full bg-secondary text-primary"
+        >
+            {theme === 'dark' ? '🌙' : '☀️'}
+        </button>
+    );
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..e07907c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,12 @@
+{
+  "name": "deep-cuts",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "deep-cuts",
+      "version": "0.1.0"
+    }
+  }
+}
