diff --git a/app/apple-icon.tsx b/app/apple-icon.tsx
new file mode 100644
index 0000000..f1926a0
--- /dev/null
+++ b/app/apple-icon.tsx
@@ -0,0 +1,54 @@
+import { ImageResponse } from 'next/og'
+
+export const size = {
+  width: 180,
+  height: 180,
+}
+export const contentType = 'image/png'
+
+export default function AppleIcon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: '#0a0a0a',
+        }}
+      >
+        <div
+          style={{
+            width: 158,
+            height: 158,
+            borderRadius: 34,
+            background: '#5eead4',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <svg
+            width="112"
+            height="112"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#0a0a0a"
+            strokeWidth="2.75"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="m5 16-4-4 4-4" />
+            <path d="m19 8 4 4-4 4" />
+            <path d="m14 4-4 16" />
+          </svg>
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    },
+  )
+}
diff --git a/app/globals.css b/app/globals.css
index d9f33b7..6232fcb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,45 +3,45 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* Codeplans.ai - Dark theme inspired by Vercel dashboard */
+/* Codeplans.ai - Light theme (mirrors the dark palette below) */
 :root {
-  --background: oklch(0.07 0 0);
-  --foreground: oklch(0.95 0 0);
-  --card: oklch(0.11 0 0);
-  --card-foreground: oklch(0.95 0 0);
-  --popover: oklch(0.11 0 0);
-  --popover-foreground: oklch(0.95 0 0);
-  --primary: oklch(0.95 0 0);
-  --primary-foreground: oklch(0.07 0 0);
-  --secondary: oklch(0.18 0 0);
-  --secondary-foreground: oklch(0.95 0 0);
-  --muted: oklch(0.15 0 0);
-  --muted-foreground: oklch(0.6 0 0);
-  --accent: oklch(0.7 0.15 145);
-  --accent-foreground: oklch(0.07 0 0);
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.6 0.15 145);
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.55 0.22 25);
-  --destructive-foreground: oklch(0.95 0 0);
-  --border: oklch(0.22 0 0);
-  --input: oklch(0.15 0 0);
-  --ring: oklch(0.7 0.15 145);
-  --chart-1: oklch(0.7 0.15 145);
-  --chart-2: oklch(0.65 0.2 250);
-  --chart-3: oklch(0.75 0.15 55);
-  --chart-4: oklch(0.6 0.2 300);
-  --chart-5: oklch(0.65 0.18 25);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.9 0 0);
+  --input: oklch(0.9 0 0);
+  --ring: oklch(0.6 0.15 145);
+  --chart-1: oklch(0.55 0.15 145);
+  --chart-2: oklch(0.5 0.2 250);
+  --chart-3: oklch(0.6 0.15 55);
+  --chart-4: oklch(0.5 0.2 300);
+  --chart-5: oklch(0.5 0.18 25);
   --radius: 0.5rem;
-  --sidebar: oklch(0.09 0 0);
-  --sidebar-foreground: oklch(0.95 0 0);
-  --sidebar-primary: oklch(0.7 0.15 145);
-  --sidebar-primary-foreground: oklch(0.07 0 0);
-  --sidebar-accent: oklch(0.15 0 0);
-  --sidebar-accent-foreground: oklch(0.95 0 0);
-  --sidebar-border: oklch(0.22 0 0);
-  --sidebar-ring: oklch(0.7 0.15 145);
-  --success: oklch(0.7 0.15 145);
-  --success-foreground: oklch(0.07 0 0);
-  --warning: oklch(0.75 0.15 55);
-  --warning-foreground: oklch(0.07 0 0);
+  --sidebar: oklch(0.97 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.6 0.15 145);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.94 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.9 0 0);
+  --sidebar-ring: oklch(0.6 0.15 145);
+  --success: oklch(0.55 0.15 145);
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.6 0.15 55);
+  --warning-foreground: oklch(0.985 0 0);
 }
 
 .dark {
diff --git a/app/layout.tsx b/app/layout.tsx
index 40d8daf..2ccc599 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'
 import { Analytics } from '@vercel/analytics/next'
+import { ThemeProvider } from '@/components/theme-provider'
 import './globals.css'
 
 const _geist = Geist({ subsets: ["latin"] });
@@ -9,23 +10,6 @@ const _geistMono = Geist_Mono({ subsets: ["latin"] });
 export const metadata: Metadata = {
   title: 'CodePlans — Engineering Planning',
   description: 'Coordinate and track changes across your software architecture. Products, assets, code plans, and tasks in one place.',
-  icons: {
-    icon: [
-      {
-        url: '/icon-light-32x32.png',
-        media: '(prefers-color-scheme: light)',
-      },
-      {
-        url: '/icon-dark-32x32.png',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/icon.svg',
-        type: 'image/svg+xml',
-      },
-    ],
-    apple: '/apple-icon.png',
-  },
 }
 
 export default function RootLayout({
@@ -34,9 +18,11 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" suppressHydrationWarning>
       <body className="font-sans antialiased">
-        {children}
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+          {children}
+        </ThemeProvider>
         <Analytics />
       </body>
     </html>
diff --git a/components/app-shell.tsx b/components/app-shell.tsx
index 7aae5f5..6d8906a 100644
--- a/components/app-shell.tsx
+++ b/components/app-shell.tsx
@@ -15,6 +15,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
+import { ThemeToggle } from '@/components/theme-toggle'
 import {
   LayoutDashboard,
   UserCircle2,
@@ -265,6 +266,8 @@ export function AppShell({ children, user, orgName, products, selectedProductId,
           </div>
 
           <div className="ml-auto flex items-center gap-2">
+            <ThemeToggle />
+
             <Button variant="ghost" size="icon" className="relative">
               <Bell className="h-5 w-5" />
             </Button>
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
new file mode 100644
index 0000000..8f9062f
--- /dev/null
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Sun, Moon, Monitor } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const OPTIONS = [
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'system', label: 'System', icon: Monitor },
+] as const
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  // Avoid rendering an icon that doesn't match the persisted theme before hydration
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+
+  const current = OPTIONS.find((o) => o.value === theme) ?? OPTIONS[2]
+  const CurrentIcon = current.icon
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" title="Toggle theme">
+          {mounted ? <CurrentIcon className="h-5 w-5" /> : <Monitor className="h-5 w-5" />}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-36">
+        {OPTIONS.map((option) => {
+          const Icon = option.icon
+          return (
+            <DropdownMenuItem
+              key={option.value}
+              onClick={() => setTheme(option.value)}
+              className={cn('gap-2', theme === option.value && 'font-medium')}
+            >
+              <Icon className="h-4 w-4" />
+              {option.label}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 3c4cfa3..70d5118 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -13,7 +13,7 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input border-border focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
diff --git a/package.json b/package.json
index bc69c7f..94c7e32 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codeplans",
-  "version": "0.3.19",
+  "version": "0.3.20",
   "description": "Manage and track coordinated changes across your software architecture.",
   "author": "Sai Prakash <sylonzero@gmail.com>",
   "homepage": "https://codeplans.ai",
diff --git a/public/apple-icon.png b/public/apple-icon.png
deleted file mode 100644
index f9418b4..0000000
Binary files a/public/apple-icon.png and /dev/null differ
diff --git a/public/icon-dark-32x32.png b/public/icon-dark-32x32.png
deleted file mode 100644
index 12c825a..0000000
Binary files a/public/icon-dark-32x32.png and /dev/null differ
diff --git a/public/icon-light-32x32.png b/public/icon-light-32x32.png
deleted file mode 100644
index a3462cc..0000000
Binary files a/public/icon-light-32x32.png and /dev/null differ
diff --git a/public/icon.svg b/public/icon.svg
deleted file mode 100644
index 5c11e6c..0000000
--- a/public/icon.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    @media (prefers-color-scheme: light) {
-      .background { fill: black; }
-      .foreground { fill: white; }
-    }
-    @media (prefers-color-scheme: dark) {
-      .background { fill: white; }
-      .foreground { fill: black; }
-    }
-  </style>
-  <g clip-path="url(#clip0_7960_43945)">
-    <rect class="background" width="180" height="180" rx="37" />
-    <g style="transform: scale(95%); transform-origin: center">
-      <path class="foreground"
-        d="M101.141 53H136.632C151.023 53 162.689 64.6662 162.689 79.0573V112.904H148.112V79.0573C148.112 78.7105 148.098 78.3662 148.072 78.0251L112.581 112.898C112.701 112.902 112.821 112.904 112.941 112.904H148.112V126.672H112.941C98.5504 126.672 86.5638 114.891 86.5638 100.5V66.7434H101.141V100.5C101.141 101.15 101.191 101.792 101.289 102.422L137.56 66.7816C137.255 66.7563 136.945 66.7434 136.632 66.7434H101.141V53Z" />
-      <path class="foreground"
-        d="M65.2926 124.136L14 66.7372H34.6355L64.7495 100.436V66.7372H80.1365V118.47C80.1365 126.278 70.4953 129.958 65.2926 124.136Z" />
-    </g>
-  </g>
-  <defs>
-    <clipPath id="clip0_7960_43945">
-      <rect width="180" height="180" fill="white" />
-    </clipPath>
-  </defs>
-</svg>
\ No newline at end of file