diff --git a/app/page.tsx b/app/page.tsx
index 2548a71..08492d1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,6 +7,7 @@ import BlogCard from "@/components/blog-card"
 import Pagination from "@/components/pagination"
 import Link from "next/link"
 import Footer from "@/components/footer"
+import { ModeToggle } from "@/components/mode-toggle"
 
 interface BlogPost {
   slug: string
@@ -98,25 +99,66 @@ export default function HomePage() {
   const { posts, totalPages, hasNextPage, hasPrevPage } = paginatedData
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10">
-      {/* Header */}
-      <header className="border-b border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-white/90 backdrop-blur-sm sticky top-0 z-50 shadow-sm">
-        <div className="max-w-6xl mx-auto px-4 py-6 flex justify-between items-center">
-          <div>
-            <h1 className="text-5xl font-bold font-playfair bg-gradient-to-r from-[#228B22] via-[#5A981A] via-[#91A511] via-[#ADAC0D] via-[#E4B905] to-[#FFBF00] bg-clip-text text-transparent drop-shadow-sm leading-tight pb-2">
-              Stable Viewpoints
-            </h1>
-            <p className="text-gray-600 mt-2 text-lg">Independent Articles about Stability</p>
-          </div>
-          <Link
-            href="/submit"
-            className="inline-flex items-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-6 py-3 font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
-          >
-            Submit an Article
-          </Link>
-        </div>
-      </header>
+<div className="min-h-screen bg-gradient-to-br 
+  from-green-50 via-yellow-50 to-[#FFC517]/10
+  dark:from-zinc-900 dark:via-zinc-900 dark:to-black
+">
+  {/* Header */}
+  <header
+    className="
+      sticky top-0 z-50
+      border-b
+      border-zinc-200 dark:border-zinc-800
+      bg-white/90 dark:bg-zinc-900/90
+      backdrop-blur-sm
+      shadow-sm
+    "
+  >
+    <div className="max-w-6xl mx-auto px-4 py-6 flex justify-between items-center">
+      {/* Left: Title */}
+      <div>
+        <h1
+          className="
+            text-5xl font-bold font-playfair leading-tight pb-2
+            bg-gradient-to-r
+            from-[#228B22] via-[#E4B905] to-[#FFBF00]
+            bg-clip-text text-transparent
+            drop-shadow-sm
+          "
+        >
+          Stable Viewpoints
+        </h1>
+
+        <p className="mt-2 text-lg text-zinc-600 dark:text-zinc-400">
+          Independent Articles about Stability
+        </p>
+      </div>
 
+      {/* Right: Actions */}
+      <div className="flex items-center gap-4">
+        {/* Theme Toggle */}
+        {/* <ModeToggle /> */}
+
+        {/* Submit Button */}
+        <Link
+          href="/submit"
+          className="
+            inline-flex items-center gap-2
+            bg-gradient-to-r from-[#228B22] to-[#91A511]
+            hover:from-[#3E921E] hover:to-[#ADAC0D]
+            text-white
+            px-6 py-3 font-semibold
+            transition-all duration-300
+            shadow-lg hover:shadow-xl
+            transform hover:-translate-y-0.5
+            rounded-md
+          "
+        >
+          Submit an Article
+        </Link>
+      </div>
+    </div>
+  </header>
       {/* Main Content */}
       <main className="max-w-6xl mx-auto px-4 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
diff --git a/components/footer.tsx b/components/footer.tsx
index 5401ecb..15febe1 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -24,7 +24,7 @@ const LinkedInIcon = () => (
 
 export default function Footer() {
   return (
-    <footer className="border-t border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-gradient-to-r from-[#228B22]/5 via-[#91A511]/5 to-[#FFBF00]/5 backdrop-blur-sm mt-20">
+    <footer className="border-t border-gray-200 bg-gradient-to-r from-[#228B22]/5 via-[#91A511]/5 to-[#FFBF00]/5 backdrop-blur-sm mt-20">
       <div className="max-w-6xl mx-auto px-4 py-12">
         <div className="flex flex-col md:flex-row justify-between items-center gap-6">
           <div className="text-center md:text-left">
diff --git a/components/mode-toggle.tsx b/components/mode-toggle.tsx
new file mode 100644
index 0000000..539f9c5
--- /dev/null
+++ b/components/mode-toggle.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      aria-label="Toggle theme"
+    >
+      {theme === "dark" ? (
+        <Sun className="h-5 w-5" />
+      ) : (
+        <Moon className="h-5 w-5" />
+      )}
+    </Button>
+  );
+}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
index 55c2f6e..1aaa910 100644
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -1,11 +1,15 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import {
-  ThemeProvider as NextThemesProvider,
-  type ThemeProviderProps,
-} from 'next-themes'
+import { ThemeProvider as NextThemesProvider } from "next-themes";
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+    >
+      {children}
+    </NextThemesProvider>
+  );
 }
diff --git a/package-lock.json b/package-lock.json
index 4cf6033..2e6b296 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,14 @@
       "name": "stable-viewpoints-blog",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-slot": "^1.2.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "gray-matter": "^4.0.3",
         "lucide-react": "^0.454.0",
         "next": "15.2.4",
         "next-mdx-remote": "^5.0.0",
+        "next-themes": "^0.4.6",
         "react": "^19",
         "react-dom": "^19",
         "serve": "^14.2.4",
@@ -905,6 +907,39 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -6120,6 +6155,16 @@
         "react": ">=16"
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 3044b1a..e0695b7 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,14 @@
     "start": "next start"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.454.0",
     "next": "15.2.4",
     "next-mdx-remote": "^5.0.0",
+    "next-themes": "^0.4.6",
     "react": "^19",
     "react-dom": "^19",
     "serve": "^14.2.4",