diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b69c166..756a6c0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { DollarSign, CalendarDays, TrendingUp, BarChart3, Wallet, Settings, Menu } from 'lucide-react'
+import { DollarSign, CalendarDays, TrendingUp, BarChart3, Wallet, Settings, Menu, LogOut } from 'lucide-react'
 import AuthGate, { useAuth } from './components/AuthGate'
 import { UpdateBanner } from './components/UpdateBanner'
 import { useVersionCheck } from './hooks/useVersionCheck'
@@ -27,8 +27,6 @@ function Shell() {
   const [page, setPage] = useState<Page>('weekly')
   const [menuOpen, setMenuOpen] = useState(false)
 
-  const hotelName = import.meta.env.VITE_HOTEL_NAME || 'Hotel'
-
   const visibleNav = NAV.filter(n => !n.cap || can(user, n.cap))
 
   function selectPage(id: Page) {
@@ -36,6 +34,11 @@ function Shell() {
     setMenuOpen(false)
   }
 
+  async function logout() {
+    await fetch('/wages/api/auth/logout', { method: 'POST', credentials: 'include' })
+    window.location.reload()
+  }
+
   return (
     <div className={`app-shell${menuOpen ? ' menu-open' : ''}`}>
       <nav className="sidebar">
@@ -55,8 +58,14 @@ function Shell() {
             </div>
           ))}
         </div>
-        <div style={{ padding: '12px 16px', fontSize: '11px', color: 'rgba(255,255,255,0.3)' }}>
-          {hotelName}
+        <div className="sidebar-footer">
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div className="sidebar-user-name">{user.name}</div>
+            <div className="sidebar-user">{user.email}</div>
+          </div>
+          <button onClick={logout} className="sidebar-logout" title="Sign out">
+            <LogOut size={14} strokeWidth={1.75} />
+          </button>
         </div>
       </nav>