diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 90d9172..6055f66 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -220,18 +220,27 @@ export default function TopBar() {
                 <p className="text-[10px] text-text-secondary">{user?.email || user?.username}</p>
               </div>
               <div className="py-1">
-                <a href="#" className="flex items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors no-underline">
+                <button
+                  onClick={() => { setUserMenuOpen(false); navigate('/settings?tab=profile') }}
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors cursor-pointer border-none bg-transparent text-left"
+                >
                   <User size={14} />
                   <span>Profile</span>
-                </a>
-                <a href="#" className="flex items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors no-underline">
+                </button>
+                <button
+                  onClick={() => { setUserMenuOpen(false); navigate('/settings?tab=appearance') }}
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors cursor-pointer border-none bg-transparent text-left"
+                >
                   <Palette size={14} />
                   <span>Appearance</span>
-                </a>
-                <a href="#" className="flex items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors no-underline">
+                </button>
+                <button
+                  onClick={() => { setUserMenuOpen(false); navigate('/settings?tab=security') }}
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors cursor-pointer border-none bg-transparent text-left"
+                >
                   <Shield size={14} />
                   <span>Security</span>
-                </a>
+                </button>
                 <button
                   onClick={() => { setUserMenuOpen(false); navigate('/help') }}
                   className="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors cursor-pointer border-none bg-transparent text-left"
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 7612984..b0cf418 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import { api, ApiError, type Integration } from '../lib/api'
 import { useAuth } from '../lib/AuthContext'
 import {
@@ -17,11 +18,13 @@ import {
   Camera,
   ChevronDown,
   ChevronRight,
+  Shield,
 } from 'lucide-react'
 
 const navSections = [
   { id: 'profile', label: 'Profile', icon: User },
   { id: 'appearance', label: 'Appearance', icon: Palette },
+  { id: 'security', label: 'Security', icon: Shield },
   { id: 'integrations', label: 'Integrations', icon: Plug },
   { id: 'notifications', label: 'Notifications', icon: Bell },
   { id: 'data', label: 'Data & Backup', icon: Database },
@@ -1254,9 +1257,21 @@ function AboutSection() {
   )
 }
 
+function SecuritySection() {
+  return (
+    <div style={cardBase}>
+      <h3 style={sectionTitle}>Security</h3>
+      <p style={{ fontSize: '13px', color: '#7A7D85' }}>
+        Password changes, active sessions, login activity, and SSO are coming soon.
+      </p>
+    </div>
+  )
+}
+
 const sectionComponents: Record<string, () => React.ReactElement> = {
   profile: ProfileSection,
   appearance: AppearanceSection,
+  security: SecuritySection,
   integrations: IntegrationsSection,
   notifications: NotificationsSection,
   data: DataBackupSection,
@@ -1264,9 +1279,15 @@ const sectionComponents: Record<string, () => React.ReactElement> = {
 }
 
 export default function Settings() {
-  const [active, setActive] = useState('profile')
+  const [searchParams, setSearchParams] = useSearchParams()
+  const requestedTab = searchParams.get('tab')
+  const active = requestedTab && sectionComponents[requestedTab] ? requestedTab : 'profile'
   const ActiveSection = sectionComponents[active]
 
+  function setActive(id: string) {
+    setSearchParams({ tab: id })
+  }
+
   return (
     <div className="flex h-full w-full gap-5">
       {/* Settings nav */}