diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3875166..8a20ccd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,6 +6,7 @@ import Image from "next/image";
 import { PawPrint, HeartPulse, MessageCircle, Images, Heart, Sparkles, CheckCircle2 } from "lucide-react";
 import { LanguageSwitcher } from "@/components/i18n/LanguageSwitcher";
 import { ScrollReveal } from "@/components/landing/ScrollReveal";
+import { ThemeToggleButton } from "@/components/landing/ThemeToggleButton";
 
 /**
  * Root route (/) — public landing page for logged-out visitors, redirects
@@ -72,6 +73,7 @@ export default async function RootPage() {
           </nav>
 
           <div className="flex items-center gap-3">
+            <ThemeToggleButton />
             <LanguageSwitcher />
             <Link
               href="/log-in"
diff --git a/src/components/landing/ThemeToggleButton.tsx b/src/components/landing/ThemeToggleButton.tsx
new file mode 100644
index 0000000..57f2115
--- /dev/null
+++ b/src/components/landing/ThemeToggleButton.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useTranslations } from "next-intl";
+
+// Guest-facing variant for the public landing page — no Owner account exists
+// yet, so this only flips next-themes' own localStorage-backed state (same
+// mechanism the authenticated Sidebar toggle uses for same-browser persistence,
+// just without the account-bound write that useThemeToggle performs).
+export function ThemeToggleButton() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const t = useTranslations("Theme");
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <button
+      type="button"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      aria-label={t("toggleLabel")}
+      title={t("toggleLabel")}
+      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+    >
+      {isDark ? (
+        <Sun className="h-4 w-4" aria-hidden="true" />
+      ) : (
+        <Moon className="h-4 w-4" aria-hidden="true" />
+      )}
+    </button>
+  );
+}