diff --git a/src/gateway/ui/index.html b/src/gateway/ui/index.html
index 221e30c..fce902c 100644
--- a/src/gateway/ui/index.html
+++ b/src/gateway/ui/index.html
@@ -3,46 +3,102 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="theme-color" content="#101216">
+  <meta name="theme-color" content="#09090b">
   <title>Flynn</title>
   <link rel="manifest" href="manifest.webmanifest">
   <link rel="icon" type="image/svg+xml" href="flynn-icon.svg">
+
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+            mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
+          },
+        },
+      },
+    };
+  </script>
+
+  <!-- Google Fonts: Inter -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <!-- Existing: app styles, markdown, syntax highlighting -->
   <link rel="stylesheet" href="style.css">
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 </head>
-<body>
-  <div class="app-shell">
-    <nav class="sidebar">
-      <div class="sidebar-header">
-        <h1 class="logo">Flynn</h1>
+<body class="bg-zinc-950 text-zinc-50 font-sans antialiased h-screen w-screen overflow-hidden">
+  <div id="app-shell" class="flex h-screen overflow-hidden">
+
+    <!-- Desktop / Tablet sidebar -->
+    <nav id="sidebar" class="hidden md:flex w-16 lg:w-56 flex-col bg-zinc-900 border-r border-zinc-800 shrink-0">
+      <div class="flex items-center h-14 px-4">
+        <span class="text-blue-500 font-bold text-lg hidden lg:block">Flynn</span>
+        <span class="text-blue-500 font-bold text-lg lg:hidden">F</span>
       </div>
-      <div class="nav-links">
-        <a href="#/" class="nav-link active" data-page="dashboard">
-          <span class="nav-icon">&#9632;</span> Dashboard
+
+      <div class="flex flex-col flex-1 gap-0.5 px-2 py-2">
+        <a href="#/" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="dashboard">
+          <span class="nav-icon text-base">&#9632;</span>
+          <span class="hidden lg:inline">Dashboard</span>
         </a>
-        <a href="#/chat" class="nav-link" data-page="chat">
-          <span class="nav-icon">&#9993;</span> Chat
+        <a href="#/chat" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="chat">
+          <span class="nav-icon text-base">&#9993;</span>
+          <span class="hidden lg:inline">Chat</span>
         </a>
-        <a href="#/sessions" class="nav-link" data-page="sessions">
-          <span class="nav-icon">&#9776;</span> Sessions
+        <a href="#/sessions" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="sessions">
+          <span class="nav-icon text-base">&#9776;</span>
+          <span class="hidden lg:inline">Sessions</span>
         </a>
-        <a href="#/usage" class="nav-link" data-page="usage">
-          <span class="nav-icon">&#9733;</span> Usage
+        <a href="#/usage" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="usage">
+          <span class="nav-icon text-base">&#9733;</span>
+          <span class="hidden lg:inline">Usage</span>
         </a>
-        <a href="#/settings" class="nav-link" data-page="settings">
-          <span class="nav-icon">&#9881;</span> Settings
+        <a href="#/settings" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="settings">
+          <span class="nav-icon text-base">&#9881;</span>
+          <span class="hidden lg:inline">Settings</span>
         </a>
       </div>
-      <div class="sidebar-footer">
-        <span id="conn-status" class="conn-status disconnected">Disconnected</span>
+
+      <div class="px-4 py-3 border-t border-zinc-800">
+        <span id="conn-status" class="conn-status flex items-center gap-2 text-xs text-zinc-500">
+          <span id="conn-dot" class="w-2 h-2 rounded-full bg-zinc-600 shrink-0"></span>
+          <span id="conn-text" class="hidden lg:inline">Disconnected</span>
+        </span>
       </div>
     </nav>
-    <main id="content" class="content">
+
+    <!-- Mobile chrome: top bar + pill row -->
+    <div id="mobile-chrome" class="md:hidden fixed top-0 left-0 right-0 z-50 bg-zinc-900 border-b border-zinc-800">
+      <div class="flex items-center justify-between h-12 px-4">
+        <span class="text-blue-500 font-bold text-lg">Flynn</span>
+        <span id="conn-status-mobile" class="flex items-center">
+          <span id="conn-dot-mobile" class="w-2 h-2 rounded-full bg-zinc-600"></span>
+        </span>
+      </div>
+      <div class="flex gap-1.5 px-3 pb-2 overflow-x-auto">
+        <button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/">Dashboard</button>
+        <button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/chat">Chat</button>
+        <button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/sessions">Sessions</button>
+        <button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/usage">Usage</button>
+        <button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/settings">Settings</button>
+      </div>
+    </div>
+
+    <!-- Main content area -->
+    <main id="content" class="flex-1 overflow-y-auto md:p-6 pt-24 md:pt-6">
       <!-- Pages rendered here by router -->
     </main>
+
   </div>
+
   <script type="module">
     import { registerPage, initRouter, initStatusIndicator } from './app.js';
     import { DashboardPage } from './pages/dashboard.js';
diff --git a/src/gateway/ui/manifest.webmanifest b/src/gateway/ui/manifest.webmanifest
index 18f99f1..d4bf874 100644
--- a/src/gateway/ui/manifest.webmanifest
+++ b/src/gateway/ui/manifest.webmanifest
@@ -3,8 +3,8 @@
   "short_name": "Flynn",
   "start_url": "/#/chat",
   "display": "standalone",
-  "background_color": "#101216",
-  "theme_color": "#101216",
+  "background_color": "#09090b",
+  "theme_color": "#09090b",
   "description": "Flynn WebChat companion UI",
   "icons": [
     {
