diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index d751187..251846a 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 import { NavLink } from 'react-router-dom'
-import { TrendingUp, Calendar, Globe, BarChart2, Settings, Building2 } from 'lucide-react'
+import { TrendingUp, Calendar, Globe, BarChart2, Settings, Building2, LogOut } from 'lucide-react'
 import { useQuery } from '@tanstack/react-query'
 import { useAuth } from './AuthGate'
 import { can } from '../types'
@@ -20,6 +20,11 @@ export default function Layout({ children }: { children: ReactNode }) {
   const { user } = useAuth()
   const items = NAV.filter(n => can(user, n.cap))
 
+  async function logout() {
+    await fetch('/rates/api/auth/logout', { method: 'POST', credentials: 'include' })
+    window.location.reload()
+  }
+
   const { data: alertCount } = useQuery<number>({
     queryKey: ['parity-alert-count'],
     queryFn: () => api.get('/competitors/parity/alerts?status=active').then(r => r.data.length),
@@ -49,7 +54,18 @@ export default function Layout({ children }: { children: ReactNode }) {
             </NavLink>
           ))}
         </nav>
-        <div className="sidebar-user">{user.name ?? user.email}</div>
+        <div className="sidebar-user" style={{ whiteSpace: 'normal' }}>
+          <div style={{ fontWeight: 600, color: 'var(--text)', fontSize: '12px', marginBottom: '2px' }}>{user.name}</div>
+          <div style={{ fontSize: '11px', marginBottom: '8px' }}>{user.email}</div>
+          <button onClick={logout} style={{
+            display: 'flex', alignItems: 'center', gap: '6px',
+            background: 'none', border: 'none', color: 'inherit',
+            fontSize: '12px', padding: 0, cursor: 'pointer',
+          }}>
+            <LogOut size={13} strokeWidth={1.75} />
+            Sign out
+          </button>
+        </div>
       </aside>
 
       <header className="top-bar">