diff --git a/www/app/layout.tsx b/www/app/layout.tsx
index e60f87e0..1abe76d5 100644
--- a/www/app/layout.tsx
+++ b/www/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Outfit, Space_Grotesk } from "next/font/google";
 import "./globals.css";
 import { QueryClientProvider } from "@/providers/CustomQueryClientProvider";
+import { ThemeProvider } from "@/providers/ThemeProvider";
 import Script from "next/script";
 import { Banner } from "@/components/banner";
 
@@ -30,7 +31,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <script type="text/javascript"></script>
         <script
@@ -71,10 +72,12 @@ export default function RootLayout({
       <body
         className={`${outfit.variable} ${spaceGrotesk.variable} font-outfit`}
       >
-        <QueryClientProvider>
-          <Banner />
-          {children}
-        </QueryClientProvider>
+        <ThemeProvider>
+          <QueryClientProvider>
+            <Banner />
+            {children}
+          </QueryClientProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/www/components/ThemeToggle.tsx b/www/components/ThemeToggle.tsx
new file mode 100644
index 00000000..86483863
--- /dev/null
+++ b/www/components/ThemeToggle.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+
+export function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  // Avoid hydration mismatch
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button
+        className="inline-flex items-center justify-center rounded-md p-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label="Toggle theme"
+      >
+        <Sun className="h-5 w-5" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      className="inline-flex items-center justify-center rounded-md p-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      aria-label="Toggle theme"
+    >
+      {resolvedTheme === "dark" ? (
+        <Sun className="h-5 w-5 text-yellow-500" />
+      ) : (
+        <Moon className="h-5 w-5 text-slate-700" />
+      )}
+    </button>
+  );
+}
diff --git a/www/components/animated-nav/client.tsx b/www/components/animated-nav/client.tsx
index 3dc6be7f..de1afa7b 100644
--- a/www/components/animated-nav/client.tsx
+++ b/www/components/animated-nav/client.tsx
@@ -6,6 +6,7 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { Book, GitFork, Menu, X } from "lucide-react";
 import { useBannerStore } from "@/hooks/banner-store";
+import { ThemeToggle } from "@/components/ThemeToggle";
 
 export default function AnimatedNavClient() {
   const { data } = useBannerStore();
@@ -25,7 +26,7 @@ export default function AnimatedNavClient() {
   return (
     <motion.nav
       className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 backdrop-blur-md ${
-        isScrolled ? "bg-white/75 shadow-sm" : "bg-transparent"
+        isScrolled ? "bg-white/75 dark:bg-gray-900/75 shadow-sm" : "bg-transparent"
       }
         ${isBannerVisible ? "top-10" : "top-0"}
         `}
@@ -51,7 +52,7 @@ export default function AnimatedNavClient() {
           <div className="hidden md:flex items-center gap-4">
             <Link
               href="https://docs.devb.io"
-              className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:text-black transition-colors rounded-lg hover:bg-black/5"
+              className="flex items-center gap-2 px-4 py-2 text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-colors rounded-lg hover:bg-black/5 dark:hover:bg-white/10"
             >
               <Book size={18} />
               <span>Docs</span>
@@ -71,20 +72,24 @@ export default function AnimatedNavClient() {
               href="https://github.com/sunithvs/devb.io/fork"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors"
+              className="flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors"
             >
               <GitFork size={18} />
               <span>Contribute</span>
             </a>
+            <ThemeToggle />
           </div>
 
           {/* Mobile Menu Button */}
-          <button
-            className="md:hidden text-gray-600 hover:text-black transition-colors"
-            onClick={() => setIsMenuOpen(!isMenuOpen)}
-          >
-            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button>
+          <div className="md:hidden flex items-center gap-2">
+            <ThemeToggle />
+            <button
+              className="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors"
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+            >
+              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+            </button>
+          </div>
         </div>
 
         {/* Mobile Menu */}
@@ -100,7 +105,7 @@ export default function AnimatedNavClient() {
           <div className="py-4 space-y-2">
             <Link
               href="/docs"
-              className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:text-black transition-colors rounded-lg hover:bg-black/5"
+              className="flex items-center gap-2 px-4 py-2 text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-colors rounded-lg hover:bg-black/5 dark:hover:bg-white/10"
             >
               <Book size={18} />
               <span>Documentation</span>
@@ -119,7 +124,7 @@ export default function AnimatedNavClient() {
               href="https://github.com/sunithvs/devb.io/fork"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors w-fit"
+              className="flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors w-fit"
             >
               <GitFork size={18} />
               <span>Contribute</span>
diff --git a/www/providers/ThemeProvider.tsx b/www/providers/ThemeProvider.tsx
new file mode 100644
index 00000000..fd7b276e
--- /dev/null
+++ b/www/providers/ThemeProvider.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      {...props}
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
diff --git a/www/tailwind.config.ts b/www/tailwind.config.ts
index fc6d0ea4..4cb1720f 100644
--- a/www/tailwind.config.ts
+++ b/www/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
+  darkMode: "class",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
