diff --git a/app/auth/layout.tsx b/app/auth/layout.tsx
new file mode 100644
index 0000000..0120eac
--- /dev/null
+++ b/app/auth/layout.tsx
@@ -0,0 +1,14 @@
+import { AuthBottomNav } from "@/components/layout/auth-bottom-nav";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      {children}
+      <AuthBottomNav />
+    </>
+  );
+}
diff --git a/components/layout/auth-bottom-nav.tsx b/components/layout/auth-bottom-nav.tsx
new file mode 100644
index 0000000..637f7ed
--- /dev/null
+++ b/components/layout/auth-bottom-nav.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Home, LogIn, UserPlus } from "lucide-react";
+
+import { routes } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+const authNavItems = [
+  { href: routes.home, label: "Home", icon: Home },
+  { href: routes.login, label: "Sign in", icon: LogIn },
+  { href: routes.signUp, label: "Sign up", icon: UserPlus },
+] as const;
+
+export function AuthBottomNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+      <div className="mx-auto grid max-w-lg grid-cols-3 gap-1 px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2">
+        {authNavItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = pathname === item.href;
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "flex flex-col items-center gap-1 rounded-lg px-1 py-2 text-[9px] font-medium leading-tight transition-colors",
+                isActive
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+            >
+              <Icon className="h-4 w-4" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
diff --git a/components/logout-button.tsx b/components/logout-button.tsx
index 4b8b90b..f8a0dc0 100644
--- a/components/logout-button.tsx
+++ b/components/logout-button.tsx
@@ -1,16 +1,19 @@
 "use client";
 
-import { createClient } from "@/lib/supabase/client";
-import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 
+import { Button } from "@/components/ui/button";
+import { createClient } from "@/lib/supabase/client";
+import { routes } from "@/lib/routes";
+
 export function LogoutButton() {
   const router = useRouter();
 
   const logout = async () => {
     const supabase = createClient();
     await supabase.auth.signOut();
-    router.push("/auth/login");
+    router.push(routes.home);
+    router.refresh();
   };
 
   return <Button onClick={logout}>Logout</Button>;