diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 7b582e6..a443909 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -118,6 +118,10 @@
     overflow: hidden;
   }
 
+  #main-content {
+    scroll-margin-top: 6rem;
+  }
+
   .skip-link {
     position: fixed;
     top: 0.75rem;
@@ -138,6 +142,18 @@
     transform: translateY(0);
   }
 
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   ::selection {
     background: var(--color-primary-muted);
   }
@@ -159,11 +175,11 @@
     color: var(--color-primary-hover);
   }
 
-  :where(a, button, input, textarea, select):focus {
+  :where(a, button, input, textarea, select, summary):focus {
     outline: none;
   }
 
-  :where(a, button, input, textarea, select):focus-visible {
+  :where(a, button, input, textarea, select, summary):focus-visible {
     box-shadow: var(--focus-ring);
     border-radius: var(--radius-sm);
   }
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 97e62a3..408427c 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -128,6 +128,12 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
         navToggle.setAttribute('aria-expanded', 'true');
         if (window.matchMedia('(max-width: 640px)').matches) {
           document.body.classList.add('is-scroll-locked');
+          const firstFocusable = nav.querySelector(
+            '#nav-menu a, #nav-menu button, #nav-menu input, #nav-menu select, #nav-menu textarea, #nav-menu summary'
+          );
+          if (firstFocusable instanceof HTMLElement) {
+            firstFocusable.focus();
+          }
         }
       }
 
@@ -136,6 +142,7 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
         nav.classList.remove('is-open');
         navToggle.setAttribute('aria-expanded', 'false');
         document.body.classList.remove('is-scroll-locked');
+        navToggle.focus();
       }
 
       if (nav && navToggle) {
@@ -187,8 +194,9 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
         const userData = JSON.parse(user);
         navAuth.innerHTML = `
           <a href="/dashboard">Dashboard</a>
-          <a href="/notifications" class="nav-notifications" id="nav-notifications">
+          <a href="/notifications" class="nav-notifications" id="nav-notifications" aria-label="Notifications">
             <span class="notif-icon">🔔</span>
+            <span class="sr-only">Notifications</span>
             <span class="notif-badge" id="notif-badge" style="display:none;">0</span>
           </a>
           <a href="/settings">Settings</a>
diff --git a/frontend/src/layouts/PublicLayout.astro b/frontend/src/layouts/PublicLayout.astro
index 4a0c126..358ecf7 100644
--- a/frontend/src/layouts/PublicLayout.astro
+++ b/frontend/src/layouts/PublicLayout.astro
@@ -165,6 +165,12 @@ const defaultTheme = DEFAULT_THEME;
         toggle.setAttribute('aria-expanded', 'true');
         if (window.matchMedia('(max-width: 768px)').matches) {
           document.body.classList.add('is-scroll-locked');
+          const firstFocusable = nav.querySelector(
+            '#public-nav-menu a, #public-nav-menu button, #public-nav-menu input, #public-nav-menu select, #public-nav-menu textarea, #public-nav-menu summary'
+          );
+          if (firstFocusable instanceof HTMLElement) {
+            firstFocusable.focus();
+          }
         }
       }
 
@@ -173,6 +179,7 @@ const defaultTheme = DEFAULT_THEME;
         nav.classList.remove('is-open');
         toggle.setAttribute('aria-expanded', 'false');
         document.body.classList.remove('is-scroll-locked');
+        toggle.focus();
       }
 
       function setActiveNav() {