diff --git a/frontend/css/main.css b/frontend/css/main.css
index bfaf324..df19ee6 100644
--- a/frontend/css/main.css
+++ b/frontend/css/main.css
@@ -885,8 +885,8 @@ body {
   top: 12px;
   left: 12px;
   z-index: 200;
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
   background: var(--bg-secondary);
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -915,7 +915,8 @@ body {
     z-index: 140;
   }
   .sidebar-backdrop.open { display: block; }
-  .content { margin-left: 0; padding: 16px; padding-top: 60px; }
+  .nav-link { min-height: 44px; padding: 10px 14px; }
+  .content { margin-left: 0; padding: 16px; padding-top: 68px; }
   .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
   .device-grid { grid-template-columns: 1fr; }
   .content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
diff --git a/frontend/index.html b/frontend/index.html
index 6374403..94a6eac 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -17,11 +17,11 @@
   <!-- OAuth providers loaded on-demand by login.js when needed -->
 </head>
 <body>
-  <button class="mobile-menu-btn" id="mobileMenuBtn" onclick="document.querySelector('.sidebar').classList.toggle('open');document.getElementById('sidebarBackdrop').classList.toggle('open')">
+  <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="sidebar">
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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-backdrop" id="sidebarBackdrop" onclick="document.querySelector('.sidebar').classList.remove('open');this.classList.remove('open')"></div>
-  <nav class="sidebar">
+  <div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+  <nav class="sidebar" id="sidebar">
     <div class="sidebar-header">
       <div class="logo">
         <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
diff --git a/frontend/js/app.js b/frontend/js/app.js
index f9552e6..e43b456 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -206,10 +206,25 @@ if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/sw-admin.js').catch(() => {});
 }
 
-// Close mobile menu on navigation
-window.addEventListener('hashchange', () => {
-  document.querySelector('.sidebar')?.classList.remove('open');
-  document.getElementById('sidebarBackdrop')?.classList.remove('open');
+// Mobile sidebar: open/close via hamburger, backdrop, nav tap, Escape
+const sidebarEl = document.querySelector('.sidebar');
+const backdropEl = document.getElementById('sidebarBackdrop');
+const menuBtn = document.getElementById('mobileMenuBtn');
+
+function setMobileNav(open) {
+  if (!sidebarEl || !backdropEl) return;
+  sidebarEl.classList.toggle('open', open);
+  backdropEl.classList.toggle('open', open);
+  menuBtn?.setAttribute('aria-expanded', open ? 'true' : 'false');
+}
+
+menuBtn?.addEventListener('click', () => {
+  setMobileNav(!sidebarEl.classList.contains('open'));
+});
+backdropEl?.addEventListener('click', () => setMobileNav(false));
+window.addEventListener('hashchange', () => setMobileNav(false));
+window.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && sidebarEl?.classList.contains('open')) setMobileNav(false);
 });
 
 // Auto-reload on frontend update (no more hard refresh needed)
