diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index d1e65c4..9a916a1 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -33,7 +33,8 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 
         {/* Mobile Layout */}
         <div className="lg:hidden">
-          <main className="min-h-screen pb-24 max-w-lg mx-auto">
+          {/* pb-[83px] = 49px tab bar + 34px safe area */}
+          <main className="min-h-screen pb-[calc(49px+env(safe-area-inset-bottom,34px))] max-w-lg mx-auto">
             {children}
           </main>
           <BottomNav />
diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx
index 1055cda..84b0f8b 100644
--- a/src/components/BottomNav.tsx
+++ b/src/components/BottomNav.tsx
@@ -30,8 +30,12 @@ export default function BottomNav() {
   );
 
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-950/90 backdrop-blur-lg border-t border-zinc-800 pb-[env(safe-area-inset-bottom)]">
-      <div className="flex justify-around items-center h-[49px] max-w-lg mx-auto px-2">
+    <nav
+      className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-950/95 backdrop-blur-xl border-t border-zinc-800/50"
+      style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
+    >
+      {/* 49pt = 49px content height (Apple HIG standard) */}
+      <div className="flex justify-around items-stretch h-[49px] max-w-lg mx-auto">
         {navItems.map(({ href, icon: Icon, label }) => {
           const isActive = pathname === href;
           return (
@@ -39,14 +43,14 @@ export default function BottomNav() {
               key={href}
               href={href}
               prefetch={true}
-              className={`flex flex-col items-center justify-center min-w-[56px] min-h-[56px] px-3 py-2 rounded-xl transition-colors active:scale-95 ${
-                isActive
-                  ? 'text-white bg-zinc-800/50'
-                  : 'text-zinc-500 active:text-zinc-300'
+              className={`flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors active:opacity-70 ${
+                isActive ? 'text-white' : 'text-zinc-500'
               }`}
             >
-              <Icon size={24} />
-              <span className="text-[11px] mt-1 font-medium">{label}</span>
+              {/* 25pt icon size per Apple HIG */}
+              <Icon size={25} strokeWidth={isActive ? 2 : 1.5} />
+              {/* 10pt SF Medium per Apple HIG */}
+              <span className="text-[10px] font-medium leading-none">{label}</span>
             </Link>
           );
         })}