diff --git a/apps/docs/app/components/navbar.tsx b/apps/docs/app/components/navbar.tsx
new file mode 100644
index 0000000..b8ec688
--- /dev/null
+++ b/apps/docs/app/components/navbar.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import { GitHubLogoIcon, SunIcon, MoonIcon } from "@radix-ui/react-icons";
+
+export function Navbar() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 10);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <header
+      className={`sticky top-0 z-50 w-full transition-colors duration-300 ${
+        scrolled ? "" : "bg-fd-background"
+      }`}
+    >
+      {scrolled && (
+        <div className="pointer-events-none absolute inset-x-0 top-0 h-16 bg-linear-to-b from-fd-background via-fd-background/70 to-transparent backdrop-blur-xl mask-[linear-gradient(to_bottom,black_50%,transparent)] dark:mask-[linear-gradient(to_bottom,black_40%,transparent)]" />
+      )}
+
+      {/* Nav content */}
+      <div className="relative flex h-14 items-center justify-between mx-auto max-w-4xl sm:px-6">
+        <Link
+          href="/"
+          className="text-base font-bold italic text-fd-foreground"
+          style={{ fontFamily: "'Georgia', 'Times New Roman', serif" }}
+        >
+          <span className="shimmer">Chords</span>
+        </Link>
+
+        <div className="flex items-center gap-1 sm:gap-4">
+          <Link
+            href="/docs"
+            className="text-sm text-fd-muted-foreground transition-colors hover:text-fd-foreground"
+          >
+            Docs
+          </Link>
+          <a
+            href="https://github.com/assistant-ui/ux-primitives/tree/main/apps/example"
+            className="hidden text-sm text-fd-muted-foreground transition-colors hover:text-fd-foreground sm:block"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Examples
+          </a>
+          <a
+            href="https://www.assistant-ui.com/"
+            className="text-sm text-fd-muted-foreground transition-colors hover:text-fd-foreground"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            assistant-ui
+          </a>
+          <a
+            href="https://github.com/assistant-ui/ux-primitives"
+            className="p-1 text-fd-muted-foreground transition-colors hover:text-fd-foreground"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub"
+          >
+            <GitHubLogoIcon className="h-4 w-4" />
+          </a>
+          <button
+            onClick={() =>
+              setTheme(resolvedTheme === "dark" ? "light" : "dark")
+            }
+            className="p-1 text-fd-muted-foreground transition-colors hover:text-fd-foreground"
+            aria-label="Toggle theme"
+          >
+            {resolvedTheme === "dark" ? (
+              <SunIcon className="h-4 w-4" />
+            ) : (
+              <MoonIcon className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx
index 39be681..3e36548 100644
--- a/apps/docs/app/docs/layout.tsx
+++ b/apps/docs/app/docs/layout.tsx
@@ -7,7 +7,7 @@ export default function Layout({ children }: { children: ReactNode }) {
     <DocsLayout
       tree={source.pageTree}
       nav={{
-        title: "Chords",
+        enabled: false,
       }}
       sidebar={{
         defaultOpenLevel: 2,
diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css
index bdd09e3..c8a0c86 100644
--- a/apps/docs/app/globals.css
+++ b/apps/docs/app/globals.css
@@ -3,3 +3,17 @@
 @import "fumadocs-ui/css/preset.css";
 @import "../node_modules/tw-shimmer/src/index.css";
 @source "../node_modules/@assistant-ui/ux-primitives/dist";
+
+/* Align Fumadocs background with landing page palette */
+@theme {
+  --color-fd-background: #FAF9F6;
+}
+
+.dark {
+  --color-fd-background: #0A0A0A;
+}
+
+/* Match sidebar bg to page background without affecting card components */
+#nd-sidebar {
+  --color-fd-card: var(--color-fd-background);
+}
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 6ffeb0f..39f77d3 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -2,6 +2,7 @@ import "./globals.css";
 import type { ReactNode } from "react";
 import type { Metadata } from "next";
 import { Provider } from "./provider";
+import { Navbar } from "./components/navbar";
 
 export const metadata: Metadata = {
   title: {
@@ -16,7 +17,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className="flex min-h-screen flex-col antialiased">
-        <Provider>{children}</Provider>
+        <Provider>
+          <Navbar />
+          {children}
+        </Provider>
       </body>
     </html>
   );
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
index f01f075..11eafe7 100644
--- a/apps/docs/app/page.tsx
+++ b/apps/docs/app/page.tsx
@@ -71,7 +71,7 @@ const minorChords = [
 
 export default function HomePage() {
   return (
-    <main className="flex flex-1 flex-col items-center justify-center px-4 py-16">
+    <main className="flex flex-1 flex-col items-center justify-center px-4 pt-8 pb-16 bg-fd-background">
       <div className="mx-auto max-w-3xl text-center">
         <h1
           className="text-4xl font-bold tracking-tight sm:text-5xl"
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 6e8c690..28b6d15 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -16,6 +16,7 @@
     "fumadocs-mdx": "^14.2.6",
     "fumadocs-ui": "^16.5.0",
     "next": "16.1.6",
+    "next-themes": "^0.4.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "tw-shimmer": "^0.4.6"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4bdf099..75a001a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       next:
         specifier: 16.1.6
         version: 16.1.6(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react:
         specifier: 19.2.3
         version: 19.2.3