diff --git a/apps/web/src/app/(marketing)/layout.tsx b/apps/web/src/app/(marketing)/layout.tsx
index 520afab..5bc02c6 100644
--- a/apps/web/src/app/(marketing)/layout.tsx
+++ b/apps/web/src/app/(marketing)/layout.tsx
@@ -7,7 +7,7 @@ import { PageTransition } from "@/components/layout/page-transition";
 export default function MarketingLayout({ children }: { children: ReactNode }) {
   return (
     <CommandMenuProvider>
-      <div className="dark bg-background text-foreground min-h-dvh overflow-x-hidden">
+      <div className="bg-background text-foreground min-h-dvh overflow-x-hidden">
         <NavigationBar stars={null} />
         <main>
           <PageTransition>{children}</PageTransition>
diff --git a/apps/web/src/components/layout/navigation-bar.tsx b/apps/web/src/components/layout/navigation-bar.tsx
index 152c0e8..e928f97 100644
--- a/apps/web/src/components/layout/navigation-bar.tsx
+++ b/apps/web/src/components/layout/navigation-bar.tsx
@@ -11,6 +11,8 @@ import { Button } from "@/components/ui/button";
 import { BrandMenu } from "@/components/web/brand-menu";
 import { URLs } from "@/lib/consts";
 
+import { ThemeToggle } from "../theme-toggle";
+
 // ─── Shared nav link ─────────────────────────────────────────────────
 
 interface NavItem {
@@ -111,16 +113,19 @@ export function NavigationBar({ stars: _stars }: { stars: number | null }) {
         >
           <SectionShell className="flex items-center justify-between">
             <BrandMenu linkClassName="gap-1 px-5 py-3" wordmarkClassName="scale-95" />
-            <button
-              type="button"
-              aria-label={mobileMenuOpen ? "Close navigation menu" : "Open navigation menu"}
-              aria-controls="mobile-navigation-menu"
-              aria-expanded={mobileMenuOpen}
-              onClick={() => setMobileMenuOpen((prev) => !prev)}
-              className="text-foreground/65 dark:text-foreground/50 hover:text-foreground/80 px-5 py-3 transition-colors"
-            >
-              {mobileMenuOpen ? <X size={18} /> : <Menu size={18} />}
-            </button>
+            <div className="flex items-center justify-center">
+              <ThemeToggle />
+              <button
+                type="button"
+                aria-label={mobileMenuOpen ? "Close navigation menu" : "Open navigation menu"}
+                aria-controls="mobile-navigation-menu"
+                aria-expanded={mobileMenuOpen}
+                onClick={() => setMobileMenuOpen((prev) => !prev)}
+                className="text-foreground/65 dark:text-foreground/50 hover:text-foreground/80 px-5 py-3 transition-colors"
+              >
+                {mobileMenuOpen ? <X size={18} /> : <Menu size={18} />}
+              </button>
+            </div>
           </SectionShell>
         </motion.div>
 
@@ -146,7 +151,11 @@ export function NavigationBar({ stars: _stars }: { stars: number | null }) {
                         key={item.name}
                         initial={{ opacity: 0, y: -4 }}
                         animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.2, delay: 0.05 + i * 0.03, ease: "easeOut" }}
+                        transition={{
+                          duration: 0.2,
+                          delay: 0.05 + i * 0.03,
+                          ease: "easeOut",
+                        }}
                       >
                         <NavLink
                           item={item}
@@ -223,6 +232,7 @@ export function NavigationBar({ stars: _stars }: { stars: number | null }) {
                   <Github className="size-3.5" />
                   <span>GitHub</span>
                 </Button>
+                <ThemeToggle />
               </div>
             </div>
           </SectionShell>