diff --git a/web/src/App.tsx b/web/src/App.tsx
index 24165bb..73b9c93 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -71,13 +71,13 @@ export function App() {
 
   return (
     <div class="min-h-screen flex flex-col">
-      {/* Top bar: title on mobile, tab bar on desktop */}
-      <div class="navbar bg-base-200 px-4 pt-[env(safe-area-inset-top)]">
-        <span class="text-lg font-bold md:hidden">{cat.label}</span>
-        <div class="hidden md:flex flex-1 justify-center gap-1">
+      {/* Desktop: tab row, left-aligned; mobile: compact title bar */}
+      <div class="bg-base-200 px-4 py-2 hidden md:block">
+        <div class="max-w-4xl mx-auto flex items-center gap-2">
+          <span class="text-lg font-bold mr-4">Homelab</span>
           {CATEGORIES.map((c) => (
             <button
-              class={`btn btn-ghost btn-sm ${c.id === category ? "btn-primary" : ""}`}
+              class={`btn btn-sm ${c.id === category ? "btn-primary" : "btn-ghost"}`}
               onClick={() => {
                 setCategory(c.id);
                 setOpenDoc(null);
@@ -87,7 +87,9 @@ export function App() {
             </button>
           ))}
         </div>
-        <span class="hidden md:block mx-auto text-lg font-bold absolute left-1/2 -translate-x-1/2 pointer-events-none">Homelab</span>
+      </div>
+      <div class="navbar bg-base-200 px-4 py-3 md:hidden">
+        <span class="text-lg font-bold mx-auto">{cat.label}</span>
       </div>
 
       <div class="flex-1 w-full max-w-md mx-auto px-4 pb-20 md:pb-6 pt-[env(safe-area-inset-top)]">
@@ -106,12 +108,12 @@ export function App() {
           ))}
       </div>
 
-      {/* Mobile footer nav */}
-      <div class="btm-nav md:hidden bg-base-200 pb-[env(safe-area-inset-bottom)] z-10">
+      {/* Mobile footer nav: equal quarters, large icons */}
+      <div class="btm-nav md:hidden bg-base-200 pb-[env(safe-area-inset-bottom)] z-10 h-20">
         {CATEGORIES.map((c) => (
-          <button class={c.id === category ? "active text-primary" : ""} onClick={() => { setCategory(c.id); setOpenDoc(null); }}>
-            <c.icon size={20} />
-            <span class="text-[10px]">{c.label}</span>
+          <button class={`flex-1 ${c.id === category ? "active text-primary" : "text-base-content/60"}`} onClick={() => { setCategory(c.id); setOpenDoc(null); }}>
+            <c.icon size={28} />
+            <span class="text-xs font-medium">{c.label}</span>
           </button>
         ))}
       </div>