fix: minor fixes in web

ShieldX-Web/src/App.jsx

@@ -7,7 +7,11 @@ import Chat from './pages/Chat'
 import Location from './pages/Location'
 import Alerts from './pages/Alerts'
 import Evidence from './pages/Evidence'
+import Profile from './pages/Profile'
 import BottomTabs from './components/BottomTabs'
+import AlertPreferences from './pages/AlertPreferences'
+import PrivacySettings from './pages/PrivacySettings'
+import Settings from './pages/Settings'
 
 export default function App() {
   const isAuth = () => !!localStorage.getItem('authUser')
@@ -28,6 +32,10 @@ export default function App() {
           <Route path="/location" element={<ProtectedRoute><Location /></ProtectedRoute>} />
           <Route path="/alerts" element={<ProtectedRoute><Alerts /></ProtectedRoute>} />
           <Route path="/evidence" element={<ProtectedRoute><Evidence /></ProtectedRoute>} />
+          <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
+          <Route path="/profile/alerts" element={<ProtectedRoute><AlertPreferences /></ProtectedRoute>} />
+          <Route path="/profile/privacy" element={<ProtectedRoute><PrivacySettings /></ProtectedRoute>} />
+          <Route path="/profile/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
         </Routes>
       </main>
       {isAuth() && <BottomTabs />}

ShieldX-Web/src/components/BottomTabs.jsx

@@ -13,7 +13,7 @@ export default function BottomTabs(){
       <Link to="/chat" className={`tab ${active('/chat')? 'active':''}`}><MdChat size={20}/> <div className="tab-label">Chat</div></Link>
       <Link to="/location" className={`tab ${active('/location')? 'active':''}`}><IoMdLocate size={20}/> <div className="tab-label">Location</div></Link>
       <Link to="/alerts" className={`tab ${active('/alerts')? 'active':''}`}><MdNotifications size={20}/> <div className="tab-label">Alerts</div></Link>
-      <button className="tab" style={{ background:'none', border:0, cursor:'pointer' }} onClick={() => { localStorage.removeItem('authUser'); navigate('/login') }}>Logout</button>
+      {/* Logout moved to Profile page */}
     </nav>
   )
 }

ShieldX-Web/src/pages/AlertPreferences.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+
+export default function AlertPreferences(){
+  const navigate = useNavigate()
+  return (
+    <div className="profile-page">
+      <header className="header-row">
+        <button className="back-btn" onClick={() => navigate(-1)}>←</button>
+        <div className="header-title">Alert Preferences</div>
+        <div style={{ width: 40 }} />
+      </header>
+
+      <div className="profile-card">
+        <h3>Alert Preferences</h3>
+        <div style={{ marginTop: 8 }}>
+          <label style={{ display: 'block', marginBottom: 8 }}>
+            <input type="checkbox" defaultChecked /> Push Notifications
+          </label>
+          <label style={{ display: 'block', marginBottom: 8 }}>
+            <input type="checkbox" defaultChecked /> Send SMS when offline
+          </label>
+          <label style={{ display: 'block', marginBottom: 8 }}>
+            <input type="checkbox" /> Silent Alerts Only
+          </label>
+        </div>
+      </div>
+    </div>
+  )
+}

ShieldX-Web/src/pages/Home.jsx

@@ -24,6 +24,21 @@ export default function Home() {
     timerRef.current = setTimeout(() => { setStatus('Help Arrived'); setPanicActive(false) }, 6000)
   }
 
+  // load user from localStorage to show avatar
+  const [user, setUser] = useState(null)
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem('authUser')
+      if (raw) {
+        const parsed = JSON.parse(raw)
+        setUser(parsed)
+      }
+    } catch (e) { /* ignore */ }
+  }, [])
+
+  const initials = (user?.name || user?.username || 'U').split(' ').map(s => s[0]).slice(0,2).join('').toUpperCase()
+  const avatar = user?.avatar || null
+
   return (
     <div className="safe-area">
       <header className="header-row">
@@ -32,7 +47,12 @@ export default function Home() {
           <FiShield size={28} color="#E53935" style={{ marginRight: 8 }} />
           <div className="header-title">AI Police Alert</div>
         </div>
-  <button className="header-icon"><MdSettings size={18} color="#222" /></button>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <button className="header-icon" onClick={() => navigate('/profile')} title="Settings"><MdSettings size={18} color="#222" /></button>
+          <button className="avatar-circle" onClick={() => navigate('/profile')} title="Profile" style={{ width: 36, height: 36, borderRadius: 18, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            {avatar ? <img src={avatar} alt="me" style={{ width: 36, height: 36, borderRadius: 18, objectFit: 'cover' }} /> : initials}
+          </button>
+        </div>
       </header>
 
       <div className={`status-bar ${panicActive ? 'panic' : ''}`}>