diff --git a/i18n/default_de.json b/i18n/default_de.json
index 339a2b6..bc6c2fd 100644
--- a/i18n/default_de.json
+++ b/i18n/default_de.json
@@ -1435,5 +1435,7 @@
   "Remove selected file": "Ausgewaehlte Datei entfernen",
   "Replace": "Ersetzen",
   "Delete this image?": "Dieses Bild löschen?",
-  "Current image": "Aktuelles Bild"
+  "Current image": "Aktuelles Bild",
+  "Open navigation": "Navigation öffnen",
+  "Close navigation": "Navigation schließen"
 }
diff --git a/i18n/default_en.json b/i18n/default_en.json
index 7dc456a..6187170 100644
--- a/i18n/default_en.json
+++ b/i18n/default_en.json
@@ -1435,5 +1435,7 @@
   "Remove selected file": "Remove selected file",
   "Replace": "Replace",
   "Delete this image?": "Delete this image?",
-  "Current image": "Current image"
+  "Current image": "Current image",
+  "Open navigation": "Open navigation",
+  "Close navigation": "Close navigation"
 }
diff --git a/templates/default.phtml b/templates/default.phtml
index b38d631..6652a0e 100644
--- a/templates/default.phtml
+++ b/templates/default.phtml
@@ -320,12 +320,12 @@ $componentPageConfig['moduleRuntimeComponents'] = $moduleRuntimeComponents;
 
 <body>
   <a class="app-skip-link" href="#app-main-content"><?php e(t('Skip to main content')); ?></a>
+  <?php require __DIR__ . '/partials/app-topbar.phtml'; ?>
   <div class="app-container">
     <?php require __DIR__ . '/partials/app-main-aside-icon-bar.phtml'; ?>
     <?php require __DIR__ . '/partials/app-main-aside.phtml'; ?>
     <div class="app-main">
       <main>
-        <?php require __DIR__ . '/partials/app-topbar.phtml'; ?>
         <div id="app-main-content" class="app-main-content" tabindex="-1">
           <?php Buffer::get('html'); ?>
         </div>
@@ -333,6 +333,7 @@ $componentPageConfig['moduleRuntimeComponents'] = $moduleRuntimeComponents;
       <?php require __DIR__ . '/partials/app-footer.phtml'; ?>
     </div>
   </div>
+  <div class="app-drawer-backdrop" aria-hidden="true"></div>
 
   <script src="<?php e(assetVersion('vendor/fslightbox/fslightbox.js')); ?>"></script>
   <?php require __DIR__ . '/partials/app-confirm-dialog.phtml'; ?>
diff --git a/templates/partials/app-main-aside.phtml b/templates/partials/app-main-aside.phtml
index 5d7ceaa..cadc273 100644
--- a/templates/partials/app-main-aside.phtml
+++ b/templates/partials/app-main-aside.phtml
@@ -25,9 +25,8 @@ $docsDefaultPath = 'admin/docs/' . $docsDefaultSlug;
 $hasOrganization = $canViewTenants || $canViewDepartments || $canViewUsers;
 $hasUsersSection = $canViewRoles || $canViewPermissions;
 $hasAutomationSection = $canViewImports || $canViewJobs;
-$hasMonitoringSection = $canViewStats;
 $hasLogsSection = $canViewMailLog;
-$hasSystemSection = $canViewSettings;
+$hasSystemSection = $canViewSettings || $canViewStats;
 $hasAdminPanel = layoutHasAdminPanel($layoutAuth);
 
 // Declarative nav config for admin panel groups
@@ -105,21 +104,6 @@ $adminNavGroups = [
             ],
         ],
     ],
-    [
-        'key' => 'admin-monitoring',
-        'label' => t('Monitoring'),
-        'icon' => 'bi-graph-up',
-        'visible' => $hasMonitoringSection,
-        'items' => [
-            [
-                'label' => t('Statistics'),
-                'path' => 'admin/stats',
-                'active' => navActive('admin/stats', true),
-                'visible' => $canViewStats,
-                'withTenant' => false,
-            ],
-        ],
-    ],
     [
         'key' => 'admin-logs',
         'label' => t('Logs'),
@@ -148,6 +132,13 @@ $adminNavGroups = [
                 'visible' => $canViewSettings,
                 'withTenant' => false,
             ],
+            [
+                'label' => t('Statistics'),
+                'path' => 'admin/stats',
+                'active' => navActive('admin/stats', true),
+                'visible' => $canViewStats,
+                'withTenant' => false,
+            ],
         ],
     ],
 ];
@@ -281,24 +272,6 @@ $moduleSlots = is_array($layoutNav['moduleSlots'] ?? null) ? $layoutNav['moduleS
 $modulePanelSlots = is_array($moduleSlots['aside.tab_panel'] ?? null) ? $moduleSlots['aside.tab_panel'] : [];
 ?>
 <aside class="app-sidebar" id="app-sidebar" data-app-component="sidebar-toggle">
-    <?php if ($currentTenant): ?>
-        <div class="app-sidebar-tenant-logo">
-            <a href="<?php e(lurl('')); ?>">
-                <?php if ($hasTenantAvatar): ?>
-                    <img src="auth/tenant-avatar-file?uuid=<?php e($tenantUuid); ?>&size=256" alt="<?php e($tenantName); ?>"
-                        title="<?php e($tenantName); ?>">
-                <?php else: ?>
-                    <div class="app-sidebar-tenant-name">
-                        <?php e($tenantName); ?>
-                    </div>
-                <?php endif; ?>
-            </a>
-            <button type="button" class="app-sidebar-tenant-toggle" data-sidebar-toggle
-                aria-label="<?php e(t('Toggle Sidebar')); ?>">
-                <i class="bi bi-list"></i>
-            </button>
-        </div>
-    <?php endif; ?>
     <div id="app-sidebar-panels" class="app-sidebar-panels">
         <nav id="aside-panel-explorer" class="app-sidebar-panel" data-aside-panel="explorer"
             data-aside-title="<?php e(t('Explorer')); ?>" role="tabpanel" aria-labelledby="aside-tab-explorer"
diff --git a/templates/partials/app-topbar.phtml b/templates/partials/app-topbar.phtml
index b5b9e63..ce2fa3d 100644
--- a/templates/partials/app-topbar.phtml
+++ b/templates/partials/app-topbar.phtml
@@ -11,6 +11,13 @@ $theme = currentTheme();
 $csrfKey = Session::$csrfSessionKey;
 $csrfToken = $_SESSION[$csrfKey] ?? '';
 
+// Tenant branding data (from $layoutNav, same source as app-main-aside.phtml)
+$layoutNav = is_array($layoutNav ?? null) ? $layoutNav : [];
+$tenantAvatar = is_array($layoutNav['tenantAvatar'] ?? null) ? $layoutNav['tenantAvatar'] : [];
+$brandTenantUuid = trim((string) ($tenantAvatar['uuid'] ?? ''));
+$brandTenantName = trim((string) ($tenantAvatar['name'] ?? ''));
+$brandHasTenantAvatar = !empty($tenantAvatar['hasAvatar']);
+
 // Tenant switcher data
 $currentTenant = $_SESSION['current_tenant'] ?? null;
 $currentTenantId = (int) ($currentTenant['id'] ?? 0);
@@ -30,6 +37,22 @@ $moduleTopbarSlots = is_array($moduleSlots['topbar.right_item'] ?? null) ? $modu
 <header class="app-header">
   <nav class="app-topbar">
     <div class="app-topbar-left">
+      <button type="button" class="app-topbar-hamburger" data-sidebar-toggle
+        aria-expanded="false"
+        aria-label="<?php e(t('Open navigation')); ?>"
+        data-open-label="<?php e(t('Open navigation')); ?>"
+        data-close-label="<?php e(t('Close navigation')); ?>">
+        <i class="bi bi-list" aria-hidden="true"></i>
+      </button>
+      <a href="<?php e(lurl('')); ?>" class="app-topbar-brand">
+        <?php if ($brandHasTenantAvatar): ?>
+          <img src="auth/tenant-avatar-file?uuid=<?php e($brandTenantUuid); ?>&amp;size=256" alt="<?php e($brandTenantName); ?>">
+        <?php elseif ($brandTenantName !== ''): ?>
+          <span class="app-topbar-brand-name"><?php e($brandTenantName); ?></span>
+        <?php else: ?>
+          <span class="app-topbar-brand-name"><?php e(appTitle()); ?></span>
+        <?php endif; ?>
+      </a>
       <?php
       if (is_array($breadcrumbs ?? null) && $breadcrumbs !== []) {
         require __DIR__ . '/app-breadcrumb.phtml';
@@ -45,11 +68,27 @@ $moduleTopbarSlots = is_array($moduleSlots['topbar.right_item'] ?? null) ? $modu
       </button>
     </div>
     <ul class="app-topbar-right">
+      <?php foreach ($moduleTopbarSlots as $slot): ?>
+        <?php
+        if (!is_array($slot)) {
+          continue;
+        }
+        $slotPermission = trim((string) ($slot['permission'] ?? ''));
+        if ($slotPermission !== '' && empty($layoutAuth[$slotPermission])) {
+          continue;
+        }
+        $slotTemplate = trim((string) ($slot['template'] ?? ''));
+        if ($slotTemplate === '' || !is_file($slotTemplate)) {
+          continue;
+        }
+        include $slotTemplate;
+        ?>
+      <?php endforeach; ?>
       <?php if ($canSwitchTenant): ?>
-        <li class="app-topbar-tenant-slot" data-app-component="tenant-switcher" data-tenant-switcher data-tooltip="<?php e(t('Tenant')); ?>" data-tooltip-pos="bottom">
-          <details class="dropdown app-topbar-tenant-menu">
-            <summary class="app-topbar-tenant-chip" aria-label="<?php e(t('Switch tenant')); ?>" title="<?php e($tenantLabel); ?>">
-              <span class="app-topbar-tenant-name"><?php e($tenantLabel); ?></span>
+        <li data-app-component="tenant-switcher" data-tenant-switcher data-tooltip="<?php e(t('Tenant')); ?>" data-tooltip-pos="bottom">
+          <details class="dropdown app-topbar-tenant-menu" data-summary-chevron="none">
+            <summary aria-label="<?php e(t('Switch tenant')); ?>" title="<?php e($tenantLabel); ?>">
+              <i class="bi bi-building" aria-hidden="true"></i>
             </summary>
             <ul class="app-topbar-menu-list app-topbar-menu-list--right">
               <?php foreach ($availableTenants as $tenant): ?>
@@ -84,24 +123,8 @@ $moduleTopbarSlots = is_array($moduleSlots['topbar.right_item'] ?? null) ? $modu
           </details>
         </li>
       <?php endif; ?>
-      <?php foreach ($moduleTopbarSlots as $slot): ?>
-        <?php
-        if (!is_array($slot)) {
-          continue;
-        }
-        $slotPermission = trim((string) ($slot['permission'] ?? ''));
-        if ($slotPermission !== '' && empty($layoutAuth[$slotPermission])) {
-          continue;
-        }
-        $slotTemplate = trim((string) ($slot['template'] ?? ''));
-        if ($slotTemplate === '' || !is_file($slotTemplate)) {
-          continue;
-        }
-        include $slotTemplate;
-        ?>
-      <?php endforeach; ?>
       <li>
-        <details class="dropdown app-topbar-user-menu" data-app-component="theme-controls"
+        <details class="dropdown app-topbar-user-menu" data-summary-chevron="none" data-app-component="theme-controls"
           <?php if ($allowUserTheme): ?>
             data-theme-menu
             data-theme-url="admin/users/theme"
@@ -109,7 +132,7 @@ $moduleTopbarSlots = is_array($moduleSlots['topbar.right_item'] ?? null) ? $modu
             data-csrf-token="<?php e($csrfToken); ?>"
           <?php endif; ?>>
           <summary aria-label="<?php e(t('Account')); ?>">
-            <i class="bi bi-person-fill"></i>
+            <i class="bi bi-person"></i>
           </summary>
           <ul class="app-topbar-menu-list app-topbar-menu-list--right">
             <li class="app-topbar-menu-heading" role="presentation"><small><?php e(t('Navigation')); ?></small></li>
diff --git a/web/css/base/variables.base.css b/web/css/base/variables.base.css
index 88310ee..3da32dd 100644
--- a/web/css/base/variables.base.css
+++ b/web/css/base/variables.base.css
@@ -75,6 +75,12 @@
   --app-empty-text: var(--app-color);
   --app-empty-hint: var(--app-muted-color);
 
+  /* Layout: topbar height and z-index layers */
+  --app-topbar-height: calc(3rem + 1px); /* 3rem content + 1px border-bottom */
+  --z-topbar: 100;
+  --z-drawer: 95;
+  --z-drawer-backdrop: 90;
+
   /* Typography tokens defined in typography.tokens.css */
 }
 
diff --git a/web/css/components/app-details.css b/web/css/components/app-details.css
index b220ea3..f8a4a17 100644
--- a/web/css/components/app-details.css
+++ b/web/css/components/app-details.css
@@ -121,7 +121,7 @@
 
   .app-details-container .app-details-titlebar {
     position: sticky;
-    top: 37px;
+    top: var(--app-topbar-height);
     z-index: 10;
     padding-block-start: calc(var(--app-spacing) * 2);
     background: var(--app-background-color);
diff --git a/web/css/layout/app-aside-icon-bar.css b/web/css/layout/app-aside-icon-bar.css
index a90cfef..affcfb2 100644
--- a/web/css/layout/app-aside-icon-bar.css
+++ b/web/css/layout/app-aside-icon-bar.css
@@ -1,140 +1,158 @@
 @layer layout {
-aside.aside-icon-bar {
-  --app-icon-bar-item-padding: 0.6875rem;
-  --app-icon-bar-item-size: 22px;
-  --app-icon-bar-border-width: 3px;
-  --app-icon-bar-hover-bg: var(--app-accordion-border-color);
-  --app-icon-bar-border: 1px solid var(--app-border);
-  --app-icon-bar-mobile-safe-space: calc(3.5rem + env(safe-area-inset-bottom));
-  display: none;
-}
-
-aside.aside-icon-bar nav {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100vh;
-}
-
-aside.aside-icon-bar .aside-icon-footer {
-  display: grid;
-}
-
-aside.aside-icon-bar ul,
-aside.aside-icon-bar li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-aside.aside-icon-bar ul {
-  display: grid;
-  gap: 0;
-}
-
-aside.aside-icon-bar li a,
-aside.aside-icon-bar li button {
-  margin: 0;
-  padding: var(--app-icon-bar-item-padding);
-  font-size: var(--app-icon-bar-item-size);
-  text-align: center;
-  color: var(--app-muted-color);
-  border-radius: 0;
-  background: transparent;
-  border: 0;
-  border-left: var(--app-icon-bar-border-width) solid transparent;
-  display: block;
-  width: 100%;
-  cursor: pointer;
-}
-
-aside.aside-icon-bar li a:hover,
-aside.aside-icon-bar li a.active,
-aside.aside-icon-bar li button:hover,
-aside.aside-icon-bar li button.active {
-  border-left: var(--app-icon-bar-border-width) solid var(--app-primary);
-  color: var(--app-contrast);
-  background: var(--app-icon-bar-hover-bg);
-}
-
-aside.aside-icon-bar li a:focus-visible,
-aside.aside-icon-bar li button:focus-visible {
-  outline: 2px solid var(--app-primary-focus);
-  outline-offset: -2px;
-  border-left-color: transparent;
-  color: var(--app-contrast);
-}
-
-@media (min-width: 768px) {
   aside.aside-icon-bar {
-    border-right: var(--app-icon-bar-border);
-    display: block;
-    position: sticky;
-    top: 0;
-    z-index: 11;
-  }
-
-  .is-sidebar-collapsed aside.aside-icon-bar {
-    border-right: 0;
-  }
-}
-
-@media (max-width: 767px) {
-  aside.aside-icon-bar {
-    display: block;
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 20;
-    border-top: var(--app-icon-bar-border);
-    background: var(--app-background-color);
+    --app-icon-bar-item-padding: 0.6875rem 0.5rem;
+    --app-icon-bar-item-size: 18px;
+    --app-icon-bar-border-width: 3px;
+    --app-icon-bar-hover-bg: var(--app-accordion-border-color);
+    --app-icon-bar-border: 1px solid var(--app-border);
+    --app-icon-bar-mobile-safe-space: calc(
+      3.5rem + env(safe-area-inset-bottom)
+    );
+    display: none;
   }
 
   aside.aside-icon-bar nav {
-    flex-direction: row;
-    height: auto;
-    justify-content: center;
-    gap: var(--app-spacing);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100vh;
   }
 
   aside.aside-icon-bar .aside-icon-footer {
-    display: flex;
-    gap: var(--app-spacing);
+    display: grid;
+  }
+
+  aside.aside-icon-bar ul,
+  aside.aside-icon-bar li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
 
   aside.aside-icon-bar ul {
-    display: flex;
-    justify-content: space-around;
-    gap: var(--app-spacing);
+    display: grid;
+    gap: 0;
   }
 
   aside.aside-icon-bar li a,
   aside.aside-icon-bar li button {
-    border-left: 0;
-    border-top: var(--app-icon-bar-border-width) solid transparent;
+    margin: 0;
+    padding: var(--app-icon-bar-item-padding);
+    font-size: var(--app-icon-bar-item-size);
+    text-align: center;
+    color: var(--app-muted-color);
+    border-radius: 0;
+    background: transparent;
+    border: 0;
+    border-left: var(--app-icon-bar-border-width) solid transparent;
+    display: block;
+    width: 100%;
+    cursor: pointer;
   }
 
   aside.aside-icon-bar li a:hover,
   aside.aside-icon-bar li a.active,
   aside.aside-icon-bar li button:hover,
   aside.aside-icon-bar li button.active {
-    border-left: 0;
-    border-top: var(--app-icon-bar-border-width) solid var(--app-primary);
+    border-left: var(--app-icon-bar-border-width) solid var(--app-primary);
+    color: var(--app-primary);
+    background: var(--app-icon-bar-hover-bg);
   }
 
   aside.aside-icon-bar li a:focus-visible,
   aside.aside-icon-bar li button:focus-visible {
+    outline: 2px solid var(--app-primary-focus);
+    outline-offset: -2px;
     border-left-color: transparent;
-    border-top-color: transparent;
+    color: var(--app-contrast);
   }
 
-  .app-main-content,
-  footer.site-footer {
-    padding-bottom: max(
-      var(--app-spacing),
-      var(--app-icon-bar-mobile-safe-space)
-    );
+  /* ── Outline/fill icon swap ── */
+  [data-icon-swap] [data-icon="fill"] {
+    display: none;
+  }
+
+  [data-icon-swap]:hover [data-icon="outline"],
+  [data-icon-swap].active [data-icon="outline"] {
+    display: none;
+  }
+
+  [data-icon-swap]:hover [data-icon="fill"],
+  [data-icon-swap].active [data-icon="fill"] {
+    display: inline;
+  }
+
+  @media (min-width: 768px) {
+    aside.aside-icon-bar {
+      border-right: var(--app-icon-bar-border);
+      display: block;
+      position: sticky;
+      top: var(--app-topbar-height);
+      align-self: start;
+      height: calc(100dvh - var(--app-topbar-height));
+      z-index: 11;
+    }
+
+    aside.aside-icon-bar nav {
+      height: 100%;
+    }
+
+    .is-sidebar-collapsed aside.aside-icon-bar {
+      border-right: 0;
+    }
+  }
+
+  @media (max-width: 767px) {
+    aside.aside-icon-bar {
+      display: none;
+      position: fixed;
+      top: var(--app-topbar-height);
+      left: 0;
+      width: min(280px, 85vw);
+      z-index: var(--z-drawer);
+      border-bottom: 1px solid var(--app-border);
+      background: var(--app-sidebar-background-color);
+    }
+
+    .drawer-open aside.aside-icon-bar {
+      display: block;
+    }
+
+    aside.aside-icon-bar nav {
+      flex-direction: row;
+      height: auto;
+      justify-content: flex-start;
+      gap: 0;
+    }
+
+    aside.aside-icon-bar .aside-icon-footer {
+      display: flex;
+      gap: 0;
+    }
+
+    aside.aside-icon-bar ul {
+      display: flex;
+      gap: 0;
+    }
+
+    aside.aside-icon-bar li a,
+    aside.aside-icon-bar li button {
+      border-left: 0;
+      border-top: var(--app-icon-bar-border-width) solid transparent;
+    }
+
+    aside.aside-icon-bar li a:hover,
+    aside.aside-icon-bar li a.active,
+    aside.aside-icon-bar li button:hover,
+    aside.aside-icon-bar li button.active {
+      border-left: 0;
+      border-top: var(--app-icon-bar-border-width) solid var(--app-primary);
+    }
+
+    aside.aside-icon-bar li a:focus-visible,
+    aside.aside-icon-bar li button:focus-visible {
+      border-left-color: transparent;
+      border-top-color: transparent;
+    }
   }
 }
-}
diff --git a/web/css/layout/app-shell.css b/web/css/layout/app-shell.css
index 3300796..dc5eb67 100644
--- a/web/css/layout/app-shell.css
+++ b/web/css/layout/app-shell.css
@@ -19,12 +19,14 @@
     display: none;
   }
 
-  .app-container.is-sidebar-hidden .app-sidebar {
-    display: none;
-  }
+  @media (min-width: 768px) {
+    .app-container.is-sidebar-hidden .app-sidebar {
+      display: none;
+    }
 
-  .sidebar-hidden .app-sidebar {
-    display: none;
+    .sidebar-hidden .app-sidebar {
+      display: none;
+    }
   }
 
   h1,
@@ -381,42 +383,43 @@
     }
     .app-container.is-sidebar-hidden:has(.aside-icon-bar):has(.app-sidebar) {
       display: grid;
-      min-height: 100dvh;
-      align-items: flex-start;
-      grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
+      min-height: calc(100dvh - var(--app-topbar-height));
+      align-items: stretch;
+      grid-template-columns: minmax(0, 52px) minmax(0, 1fr);
     }
     .sidebar-hidden .app-container:has(.aside-icon-bar):has(.app-sidebar) {
-      grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
+      grid-template-columns: minmax(0, 52px) minmax(0, 1fr);
     }
     .app-container:has(.aside-icon-bar):has(.app-sidebar) {
       display: grid;
-      min-height: 100dvh;
-      align-items: flex-start;
-      grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
+      min-height: calc(100dvh - var(--app-topbar-height));
+      align-items: stretch;
+      grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
     }
     .app-container.is-sidebar-collapsed:has(.aside-icon-bar):has(.app-sidebar) {
       display: grid;
-      min-height: 100dvh;
-      align-items: flex-start;
-      grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
+      min-height: calc(100dvh - var(--app-topbar-height));
+      align-items: stretch;
+      grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
     }
 
     .app-container.is-sidebar-collapsed {
-      grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
+      grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
     }
 
     .sidebar-collapsed .app-container {
-      grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
+      grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
     }
 
     .app-main {
       border-left: 1px solid var(--app-border);
-      min-height: 100dvh;
+      min-height: calc(100dvh - var(--app-topbar-height));
       background: var(--app-background-color);
     }
 
     .app-main-content {
       padding-inline: calc(var(--app-spacing) * 2);
+      padding-block-start: var(--app-spacing);
       margin-bottom: calc(var(--app-spacing) * 2);
     }
     .app-main-content:has(.app-details-container) {
@@ -3016,4 +3019,18 @@
   body.is-loading textarea {
     pointer-events: none;
   }
+
+  /* ── Print: hide all navigation chrome ── */
+  @media print {
+    .app-header,
+    aside.aside-icon-bar,
+    aside.app-sidebar,
+    .app-drawer-backdrop {
+      display: none !important;
+    }
+
+    .app-container {
+      display: block !important;
+    }
+  }
 }
diff --git a/web/css/layout/app-sidebar.css b/web/css/layout/app-sidebar.css
index b3babd1..7210a03 100644
--- a/web/css/layout/app-sidebar.css
+++ b/web/css/layout/app-sidebar.css
@@ -83,63 +83,13 @@
     display: none !important;
   }
 
-  .app-sidebar.is-collapsed .app-sidebar-panels,
-  .app-sidebar.is-collapsed .app-sidebar-titlebar,
-  .sidebar-collapsed .app-sidebar .app-sidebar-titlebar,
-  .sidebar-collapsed .app-sidebar .app-sidebar-panels {
-    display: none;
-  }
-
-  .app-sidebar-tenant-logo {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--app-sidebar-gap);
-    padding: var(--app-spacing);
-    margin-bottom: var(--app-spacing);
-  }
-
-  .app-sidebar .app-sidebar-tenant-logo a:hover {
-    background: transparent;
-    border: 0;
-  }
-
-  .app-sidebar .app-sidebar-tenant-logo > a {
-    padding: 0;
-    flex: 1;
-    border: 0;
-    text-decoration: none;
-  }
-
-  .app-sidebar .app-sidebar-tenant-logo img {
-    display: block;
-    max-width: 100%;
-    max-height: 48px;
-    width: auto;
-    height: auto;
-    object-fit: contain;
-  }
-
-  .app-sidebar-tenant-toggle {
-    display: none;
-    border: 1px solid var(--app-border);
-    background: transparent;
-    margin: 0;
-  }
-
-  .app-sidebar-tenant-toggle:hover {
-    color: var(--app-contrast);
-    border-color: var(--app-contrast);
-  }
-
-  .app-sidebar-tenant-name {
-    font-weight: var(--font-semibold);
-    font-size: var(--text-base);
-    color: var(--app-contrast);
-    text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  @media (min-width: 768px) {
+    .app-sidebar.is-collapsed .app-sidebar-panels,
+    .app-sidebar.is-collapsed .app-sidebar-titlebar,
+    .sidebar-collapsed .app-sidebar .app-sidebar-titlebar,
+    .sidebar-collapsed .app-sidebar .app-sidebar-panels {
+      display: none;
+    }
   }
 
   .app-sidebar-title {
@@ -180,33 +130,64 @@
 
     .app-sidebar {
       position: sticky;
-      top: 0;
+      top: var(--app-topbar-height);
+      align-self: start;
       z-index: 1;
-      height: 100vh;
+      height: calc(100dvh - var(--app-topbar-height));
       overflow-y: auto;
     }
+
+    .app-sidebar-panels {
+      padding-block-start: var(--app-spacing);
+    }
   }
 
   @media (max-width: 767px) {
-    .app-sidebar-tenant-toggle {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .app-sidebar-tenant-logo img {
-      max-width: 120px;
-      max-height: 40px;
-      flex-shrink: 0;
-    }
     .app-sidebar {
-      border-bottom: 1px solid var(--app-border);
+      position: fixed;
+      top: var(--app-topbar-height);
+      left: 0;
+      bottom: 0;
+      width: min(280px, 85vw);
+      z-index: var(--z-drawer);
+      transform: translateX(-100%);
+      transition: transform 300ms ease;
+      background: var(--app-sidebar-background-color);
+      overflow-y: auto;
+    }
+
+    .drawer-open .app-sidebar {
+      transform: translateX(0);
     }
 
     .app-sidebar-panels {
-      padding-block-end: var(--app-spacing);
+      padding-block-start: calc(
+        var(--app-icon-bar-item-padding, 0.6875rem) * 2
+        + var(--app-icon-bar-item-size, 22px)
+        + var(--app-icon-bar-border-width, 3px)
+      );
+      padding-block-end: calc(var(--app-spacing) + env(safe-area-inset-bottom));
     }
   }
 
+  /* ── Drawer backdrop ── */
+  .app-drawer-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    top: var(--app-topbar-height);
+    z-index: var(--z-drawer-backdrop);
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .drawer-open .app-drawer-backdrop {
+    display: block;
+  }
+
+  html.drawer-open {
+    overflow: hidden;
+  }
+
   .app-sidebar a {
     color: inherit;
     display: block;
@@ -215,7 +196,6 @@
     margin: 0;
     border-left: var(--app-sidebar-border-width) solid transparent;
     width: 100%;
-    font-size: var(--text-base);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -226,7 +206,8 @@
   .app-sidebar .active > a {
     color: var(--app-nav-icon-color, var(--app-primary));
     background: var(--app-sidebar-hover-bg);
-    border-left: var(--app-sidebar-border-width) solid var(--app-nav-icon-color, var(--app-primary));
+    border-left: var(--app-sidebar-border-width) solid
+      var(--app-nav-icon-color, var(--app-primary));
   }
 
   aside.app-sidebar ul,
@@ -321,7 +302,7 @@
     details
     > ul
     li:last-child {
-    margin-bottom: 0.35rem;
+    margin-bottom: 1rem;
   }
 
   .app-sidebar .app-sidebar-group details > ul li:first-child {
diff --git a/web/css/layout/app-topbar.css b/web/css/layout/app-topbar.css
index a1500e2..62e1c1d 100644
--- a/web/css/layout/app-topbar.css
+++ b/web/css/layout/app-topbar.css
@@ -23,23 +23,17 @@
     --app-topbar-item-padding: 8px;
     --app-topbar-list-gap: 8px;
     --app-topbar-divider: 1px solid var(--app-border);
-    --app-topbar-margin-bottom: calc(var(--app-spacing) * 2);
     --app-topbar-muted: var(--app-form-element-placeholder-color);
     --app-topbar-bg: var(--app-background-color);
     padding-block: 0.375rem;
     padding-inline: var(--app-spacing);
-    margin-bottom: var(--app-topbar-margin-bottom);
     color: var(--app-contrast);
     border-bottom: var(--app-topbar-divider);
   }
 
-  main:has(.app-details-container) .app-header {
-    margin-bottom: 0;
-  }
-
   .app-header nav.app-topbar {
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto 1fr;
     gap: var(--app-spacing);
     align-items: center;
   }
@@ -70,7 +64,8 @@
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
-    max-width: min(20rem, 50vw);
+    min-width: min(22rem, 35vw);
+    max-width: min(30rem, 50vw);
     width: 100%;
     padding: 0.3rem 0.65rem;
     border: var(--app-border-width) solid var(--app-border);
@@ -142,7 +137,7 @@
     display: none;
   }
 
-  main:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
+  body:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
     display: list-item;
   }
 
@@ -165,7 +160,7 @@
   }
 
   .app-topbar-right > li > a,
-  .app-topbar-right button {
+  .app-topbar-right > li > button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -175,74 +170,57 @@
     margin: 0;
     border: none;
     border-radius: var(--app-border-radius);
-    background: transparent;
+    background-color: transparent;
+    box-shadow: none;
     color: var(--app-topbar-muted);
+    font-size: inherit;
+    font-weight: normal;
+    line-height: 1;
     cursor: pointer;
     transition:
-      background var(--app-transition),
+      background-color var(--app-transition),
       color var(--app-transition);
+    appearance: none;
+    -webkit-appearance: none;
+    /* Reset global button custom properties from app-shell.css */
+    --app-background-color: transparent;
+    --app-border-color: transparent;
+    --app-color: var(--app-topbar-muted);
+    --app-box-shadow: none;
   }
 
   .app-topbar-right > li > a:hover,
-  .app-topbar-right button:hover,
+  .app-topbar-right > li > button:hover,
   .app-header details.dropdown > summary:not([role]):hover {
-    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+    background-color: color-mix(in srgb, var(--app-contrast) 8%, transparent);
     color: var(--app-color);
+    --app-background-color: color-mix(
+      in srgb,
+      var(--app-contrast) 8%,
+      transparent
+    );
+    --app-color: var(--app-color);
   }
 
   .app-topbar-right > li > a:active,
-  .app-topbar-right button:active,
+  .app-topbar-right > li > button:active,
   .app-header details.dropdown > summary:not([role]):active {
-    background: color-mix(in srgb, var(--app-contrast) 12%, transparent);
+    background-color: color-mix(in srgb, var(--app-contrast) 12%, transparent);
+    --app-background-color: color-mix(
+      in srgb,
+      var(--app-contrast) 12%,
+      transparent
+    );
   }
 
   .app-topbar-right > li > a:focus-visible,
-  .app-topbar-right button:focus-visible,
+  .app-topbar-right > li > button:focus-visible,
   .app-header details.dropdown > summary:not([role]):focus-visible {
     outline: 2px solid var(--app-primary);
     outline-offset: -2px;
   }
 
-  .app-topbar-tenant-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: calc(var(--app-spacing) * 0.4);
-    max-width: min(26rem, 45vw);
-    padding: calc(var(--app-spacing) * 0.35) calc(var(--app-spacing) * 0.75);
-    border: var(--app-border-width) solid var(--app-border);
-    border-radius: 999px;
-    background: transparent;
-    color: var(--app-topbar-muted);
-  }
-
-  .app-topbar-tenant-menu > summary.app-topbar-tenant-chip {
-    cursor: pointer;
-    transition:
-      border-color var(--app-transition),
-      color var(--app-transition);
-  }
-
-  .app-topbar-tenant-menu > summary.app-topbar-tenant-chip:hover {
-    border-color: var(--app-primary);
-    color: var(--app-color);
-  }
-
-  .app-topbar-tenant-menu > summary.app-topbar-tenant-chip:focus-visible {
-    outline: 2px solid var(--app-primary);
-    outline-offset: -2px;
-    border-color: var(--app-primary);
-    color: var(--app-color);
-  }
-
-  .app-topbar-tenant-name {
-    display: inline-block;
-    max-width: min(20rem, 38vw);
-    font-size: var(--text-sm);
-    line-height: var(--leading-tight);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+  /* Tenant-switcher uses the shared dropdown summary styling from .app-header details.dropdown > summary:not([role]) */
 
   .app-topbar-user-menu > summary:hover {
     color: var(--app-color);
@@ -366,26 +344,92 @@
     margin-top: calc(var(--app-spacing) * 0.15);
   }
 
+  header.app-header {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-topbar);
+    background: var(--app-topbar-bg);
+  }
+
+  /* ── Hamburger button (mobile-only) ── */
+  .app-topbar-hamburger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    min-height: 2.25rem;
+    padding: var(--app-topbar-item-padding);
+    margin: 0;
+    border: none;
+    border-radius: var(--app-border-radius);
+    background: transparent;
+    color: var(--app-topbar-muted);
+    font-size: var(--text-2xl);
+    cursor: pointer;
+    transition:
+      background var(--app-transition),
+      color var(--app-transition);
+  }
+
+  .app-topbar-hamburger:hover {
+    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+    color: var(--app-color);
+  }
+
+  .app-topbar-hamburger:focus-visible {
+    outline: 2px solid var(--app-primary);
+    outline-offset: -2px;
+  }
+
   @media (min-width: 768px) {
-    header.app-header {
-      position: sticky;
-      top: 0;
-      background: var(--app-topbar-bg);
-      z-index: 10;
+    .app-topbar-hamburger {
+      display: none;
+    }
+  }
+
+  /* ── Tenant branding in topbar ── */
+  .app-topbar-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: var(--app-contrast);
+  }
+
+  .app-topbar-brand::after {
+    content: "";
+    display: block;
+    width: 1px;
+    height: 1.25rem;
+    background: var(--app-border);
+    flex-shrink: 0;
+    margin-inline: calc(var(--app-spacing) * 0.5);
+  }
+
+  .app-topbar-brand img {
+    display: block;
+    width: 8rem;
+    height: 2.5rem;
+    object-fit: contain;
+    object-position: left;
+  }
+
+  .app-topbar-brand-name {
+    font-weight: var(--font-semibold);
+    font-size: var(--text-sm);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 14rem;
+  }
+
+  @media (max-width: 575px) {
+    .app-topbar-brand-name {
+      display: none;
     }
   }
 
   .app-header details.dropdown[open] > summary::before {
     display: none;
   }
-
-  @media (max-width: 767px) {
-    .app-topbar-tenant-chip {
-      max-width: min(14rem, 55vw);
-    }
-
-    .app-topbar-tenant-name {
-      max-width: min(11rem, 45vw);
-    }
-  }
 }
diff --git a/web/js/app-boot.js b/web/js/app-boot.js
index 40149a8..37d546e 100644
--- a/web/js/app-boot.js
+++ b/web/js/app-boot.js
@@ -35,11 +35,13 @@
     var sidebarHiddenKey = buildStorageKey('sidebar', 'sidebar-hidden');
     var contrastKey = buildStorageKey('contrast', 'contrast-mode');
 
-    if (sidebarCollapsedKey && window.localStorage.getItem(sidebarCollapsedKey) === '1') {
-      root.classList.add('sidebar-collapsed');
-    }
-    if (sidebarHiddenKey && window.localStorage.getItem(sidebarHiddenKey) === '1') {
-      root.classList.add('sidebar-hidden');
+    if (window.innerWidth >= 768) {
+      if (sidebarCollapsedKey && window.localStorage.getItem(sidebarCollapsedKey) === '1') {
+        root.classList.add('sidebar-collapsed');
+      }
+      if (sidebarHiddenKey && window.localStorage.getItem(sidebarHiddenKey) === '1') {
+        root.classList.add('sidebar-hidden');
+      }
     }
     var contrastValue = contrastKey ? window.localStorage.getItem(contrastKey) : null;
     if (contrastValue === 'high') {
diff --git a/web/js/components/app-toggle-sidebar.js b/web/js/components/app-toggle-sidebar.js
index e427d7c..ea56610 100644
--- a/web/js/components/app-toggle-sidebar.js
+++ b/web/js/components/app-toggle-sidebar.js
@@ -133,10 +133,123 @@ export function initSidebarToggle(root = document, options = {}) {
     applyHidden(hiddenStored === '1', { persist: false });
   }
 
+  // ── Mobile drawer helpers ──
+  const mobileQuery = window.matchMedia('(max-width: 767px)');
+  const isMobileViewport = () => mobileQuery.matches;
+
+  const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  const isDrawerOpen = () => rootEl.classList.contains('drawer-open');
+
+  const openDrawer = () => {
+    rootEl.classList.add('drawer-open');
+    const hamburger = document.querySelector('.app-topbar-hamburger');
+    if (hamburger) {
+      hamburger.setAttribute('aria-label', hamburger.dataset.closeLabel || 'Close navigation');
+      hamburger.setAttribute('aria-expanded', 'true');
+    }
+  };
+
+  const closeDrawer = () => {
+    rootEl.classList.remove('drawer-open');
+    const hamburger = document.querySelector('.app-topbar-hamburger');
+    if (hamburger) {
+      hamburger.setAttribute('aria-label', hamburger.dataset.openLabel || 'Open navigation');
+      hamburger.setAttribute('aria-expanded', 'false');
+      hamburger.focus();
+    }
+  };
+
+  const toggleDrawer = () => {
+    if (isDrawerOpen()) {
+      closeDrawer();
+    } else {
+      openDrawer();
+    }
+  };
+
   const cleanupFns = [];
+
+  // ── Focus trap (active only when drawer open) ──
+  const onFocusTrap = (event) => {
+    if (!isDrawerOpen() || event.key !== 'Tab') {
+      return;
+    }
+    const drawerElements = [
+      ...document.querySelectorAll('.app-topbar-hamburger'),
+      ...aside.querySelectorAll(FOCUSABLE),
+      ...document.querySelectorAll('.aside-icon-bar ' + FOCUSABLE),
+    ];
+    const focusable = drawerElements.filter((el) => el.offsetParent !== null);
+    if (!focusable.length) {
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  document.addEventListener('keydown', onFocusTrap);
+  cleanupFns.push(() => document.removeEventListener('keydown', onFocusTrap));
+
+  // ── ESC to close drawer ──
+  const onEscDrawer = (event) => {
+    if (event.key === 'Escape' && isDrawerOpen()) {
+      event.preventDefault();
+      closeDrawer();
+    }
+  };
+  document.addEventListener('keydown', onEscDrawer);
+  cleanupFns.push(() => document.removeEventListener('keydown', onEscDrawer));
+
+  // ── Backdrop click to close drawer ──
+  const onBackdropClick = (event) => {
+    if (isDrawerOpen() && event.target.classList.contains('app-drawer-backdrop')) {
+      closeDrawer();
+    }
+  };
+  document.addEventListener('click', onBackdropClick);
+  cleanupFns.push(() => document.removeEventListener('click', onBackdropClick));
+
+  // ── matchMedia listener: sync state on viewport change ──
+  const onViewportChange = (mql) => {
+    if (!mql.matches) {
+      // Crossed to desktop — close drawer, restore desktop sidebar state
+      if (isDrawerOpen()) {
+        closeDrawer();
+      }
+      const storedCollapsed = readStored();
+      if (storedCollapsed === '1' || storedCollapsed === '0') {
+        applyState(storedCollapsed === '1', { persist: false });
+      }
+      const storedHidden = readHiddenStored();
+      if (storedHidden === '1' || storedHidden === '0') {
+        applyHidden(storedHidden === '1', { persist: false });
+      }
+    } else {
+      // Crossed to mobile — remove desktop sidebar classes that would interfere
+      rootEl.classList.remove('sidebar-collapsed', 'sidebar-hidden');
+      aside.classList.remove('is-collapsed', 'is-hidden');
+      if (container instanceof HTMLElement) {
+        container.classList.remove('is-sidebar-collapsed', 'is-sidebar-hidden');
+      }
+    }
+  };
+  mobileQuery.addEventListener('change', onViewportChange);
+  cleanupFns.push(() => mobileQuery.removeEventListener('change', onViewportChange));
+
   buttons.forEach((button) => {
     const onClick = (event) => {
       event.preventDefault();
+      if (isMobileViewport()) {
+        toggleDrawer();
+        return;
+      }
       const action = (button.dataset.sidebarAction || '').toLowerCase();
       if (action === 'visibility') {
         controller.toggleVisibility({ persist: true });
@@ -152,6 +265,21 @@ export function initSidebarToggle(root = document, options = {}) {
     const detail = event.detail || {};
     const action = detail.action;
     const persist = detail.persist ?? false;
+    if (isMobileViewport()) {
+      if (action === 'show' || action === 'open') {
+        openDrawer();
+        return;
+      }
+      if (action === 'hide' || action === 'close') {
+        closeDrawer();
+        return;
+      }
+      if (action === 'toggle' || action === 'toggle-visibility') {
+        toggleDrawer();
+        return;
+      }
+      return;
+    }
     if (action === 'open') { controller.open({ persist }); }
     if (action === 'close') { controller.close({ persist }); }
     if (action === 'toggle') { controller.toggle({ persist }); }
@@ -163,6 +291,9 @@ export function initSidebarToggle(root = document, options = {}) {
   cleanupFns.push(() => document.removeEventListener('app:sidebar', onSidebarEvent));
 
   const onShortcut = (event) => {
+    if (isMobileViewport()) {
+      return;
+    }
     if (!(event.metaKey || event.ctrlKey)) {
       return;
     }
@@ -183,6 +314,9 @@ export function initSidebarToggle(root = document, options = {}) {
 
   const destroy = () => {
     cleanupFns.forEach((cleanup) => cleanup());
+    if (isDrawerOpen()) {
+      rootEl.classList.remove('drawer-open');
+    }
     delete aside.dataset.sidebarToggleBound;
     delete aside._sidebarToggleApi;
   };
