diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index a434111..d067760 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -32,23 +32,23 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <div className="sidebar-user">{user.name}</div>
       </aside>
 
-      {/* Mobile top bar */}
-      <header className="top-bar">
-        <BedDouble size={18} strokeWidth={1.75} color="var(--gold)" />
-        <span className="top-bar-title">Room Planner</span>
-        <nav className="top-bar-nav">
-          <NavLink to="/planner" className={({ isActive }) => isActive ? 'active' : ''}>
-            Planner
-          </NavLink>
-          {hasCap('settings') && (
-            <NavLink to="/settings" className={({ isActive }) => isActive ? 'active' : ''}>
-              Settings
-            </NavLink>
-          )}
-        </nav>
-      </header>
-
       <main className="page-content">
+        {/* Mobile top bar — lives inside page-content so it stacks above content */}
+        <header className="top-bar">
+          <BedDouble size={18} strokeWidth={1.75} color="var(--gold)" />
+          <span className="top-bar-title">Room Planner</span>
+          <nav className="top-bar-nav">
+            <NavLink to="/planner" className={({ isActive }) => isActive ? 'active' : ''}>
+              Planner
+            </NavLink>
+            {hasCap('settings') && (
+              <NavLink to="/settings" className={({ isActive }) => isActive ? 'active' : ''}>
+                Settings
+              </NavLink>
+            )}
+          </nav>
+        </header>
+
         {children}
       </main>
     </div>