diff --git a/llm-gateway/internal/dashboard/templates/layout.html b/llm-gateway/internal/dashboard/templates/layout.html
index 66cc8ae..ba10c08 100644
--- a/llm-gateway/internal/dashboard/templates/layout.html
+++ b/llm-gateway/internal/dashboard/templates/layout.html
@@ -191,6 +191,40 @@
   .health-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
   .health-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-secondary); border-radius: 8px; }
   .health-item .provider-name { font-weight: 600; font-size: 0.85rem; }
+
+  /* Mobile menu button */
+  .mobile-menu-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 300; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); width: 40px; height: 40px; border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; }
+  .mobile-menu-btn svg { width: 20px; height: 20px; }
+
+  /* Sidebar overlay */
+  .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--modal-overlay); z-index: 150; }
+  .sidebar-overlay.show { display: block; }
+
+  /* Responsive: tablet & mobile */
+  @media (max-width: 768px) {
+    .mobile-menu-btn { display: flex; }
+    .sidebar { left: -220px; z-index: 200; transition: left 0.25s ease; }
+    .sidebar.open { left: 0; }
+    .main { margin-left: 0; max-width: 100vw; padding: 60px 12px 12px; }
+    .cards { grid-template-columns: repeat(2, 1fr); }
+    .card .value { font-size: 1.2rem; }
+    table { min-width: 500px; font-size: 0.8rem; }
+    .modal { max-width: calc(100vw - 32px); padding: 20px; }
+    .filter-bar select { flex: 1; min-width: 120px; }
+    .page-header h1 { font-size: 1.1rem; }
+  }
+
+  /* Responsive: small phone */
+  @media (max-width: 480px) {
+    .cards { grid-template-columns: 1fr; }
+    .card .value { font-size: 1rem; }
+    .main { padding: 56px 8px 8px; }
+    .section { padding: 12px; }
+    .modal { padding: 16px; }
+    .page-header h1 { font-size: 1rem; }
+    table { font-size: 0.75rem; }
+    th, td { padding: 6px; }
+  }
 </style>
 </head>
 <body>
@@ -221,6 +255,10 @@ window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', fu
   if (getThemePref() === 'auto') applyTheme('auto');
 });
 </script>
+<button class="mobile-menu-btn" onclick="toggleMobileSidebar()" aria-label="Menu">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+</button>
+<div class="sidebar-overlay" onclick="toggleMobileSidebar()"></div>
 <div class="sidebar">
   <div class="sidebar-brand">LLM Gateway</div>
   <nav class="sidebar-nav">
@@ -256,6 +294,18 @@ document.body.addEventListener('htmx:pushedIntoHistory', function(e) {
   var btn = document.getElementById('theme-btn');
   if (btn) btn.textContent = 'Theme: ' + themeLabel(getThemePref());
 })();
+// Mobile sidebar toggle
+function toggleMobileSidebar() {
+  document.querySelector('.sidebar').classList.toggle('open');
+  document.querySelector('.sidebar-overlay').classList.toggle('show');
+}
+// Close sidebar on nav link click (mobile)
+document.querySelectorAll('.sidebar-nav a').forEach(function(a) {
+  a.addEventListener('click', function() {
+    document.querySelector('.sidebar').classList.remove('open');
+    document.querySelector('.sidebar-overlay').classList.remove('show');
+  });
+});
 </script>
 </body>
 </html>
