diff --git a/components/mobile/BottomNav.tsx b/components/mobile/BottomNav.tsx
new file mode 100644
index 0000000..f0bfc44
--- /dev/null
+++ b/components/mobile/BottomNav.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+/* BottomNav — phase 02 (SHELL-06, NAV-01..03, DRAWER-01).
+ *
+ * Fixed bottom bar with five cells:
+ *   - Dashboard (LayoutDashboard) -> /mobile/dashboard
+ *   - Tickets   (Ticket)          -> /mobile/tickets
+ *   - Finance   (DollarSign)      -> /mobile/finance
+ *   - Analyzer  (Sparkles)        -> /mobile/analyzer
+ *   - More      (Menu)            -> opens the MoreDrawer (parent state)
+ *
+ * Active tab detected via pathname.startsWith(href). Active = text-primary,
+ * inactive = text-muted-foreground. */
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  LayoutDashboard,
+  Ticket,
+  DollarSign,
+  Sparkles,
+  Menu,
+} from 'lucide-react';
+
+const TABS = [
+  { href: '/mobile/dashboard', label: 'Dashboard', icon: LayoutDashboard },
+  { href: '/mobile/tickets',   label: 'Tickets',   icon: Ticket },
+  { href: '/mobile/finance',   label: 'Finance',   icon: DollarSign },
+  { href: '/mobile/analyzer',  label: 'Analyzer',  icon: Sparkles },
+] as const;
+
+interface BottomNavProps {
+  onMoreClick: () => void;
+}
+
+export function BottomNav({ onMoreClick }: BottomNavProps) {
+  const pathname = usePathname();
+
+  return (
+    <nav
+      aria-label="Primary"
+      className="fixed bottom-0 left-0 right-0 z-30 border-t bg-background pb-safe"
+    >
+      <div className="max-w-lg mx-auto flex h-16">
+        {TABS.map(({ href, label, icon: Icon }) => {
+          const active = pathname?.startsWith(href) ?? false;
+          return (
+            <Link
+              key={href}
+              href={href}
+              aria-current={active ? 'page' : undefined}
+              className={`flex-1 flex flex-col items-center justify-center gap-0.5 text-[11px] transition-colors ${
+                active
+                  ? 'text-primary'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <Icon className="w-5 h-5" aria-hidden="true" />
+              <span>{label}</span>
+            </Link>
+          );
+        })}
+        <button
+          type="button"
+          onClick={onMoreClick}
+          aria-label="Open menu"
+          className="flex-1 flex flex-col items-center justify-center gap-0.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Menu className="w-5 h-5" aria-hidden="true" />
+          <span>More</span>
+        </button>
+      </div>
+    </nav>
+  );
+}