Index: frontend/src/components/Navbar.js
===================================================================
--- frontend/src/components/Navbar.js	(revision 84249b19ce0ac1cc4b9f406f63132d99f6759053)
+++ frontend/src/components/Navbar.js	(revision e1f74f6c04f9d460135de378f659fedfd9c74b44)
@@ -9,8 +9,17 @@
 
   useEffect(() => {
-    const userStr = localStorage.getItem('user');
-    if (userStr) {
-      setUser(JSON.parse(userStr));
-    }
+    const loadUser = () => {
+      const userStr = localStorage.getItem('user');
+      if (userStr) {
+        setUser(JSON.parse(userStr));
+      } else {
+        setUser(null);
+      }
+    };
+
+    loadUser();
+
+    window.addEventListener('storage', loadUser);
+    return () => window.removeEventListener('storage', loadUser);
   }, []);
 
@@ -19,4 +28,10 @@
     localStorage.removeItem('user');
     setUser(null);
+
+
+    window.dispatchEvent(new CustomEvent('userStorageChange', {
+      detail: { userData: null }
+    }));
+
     navigate('/login');
   };
@@ -30,142 +45,142 @@
 
   return (
-    <nav className="navbar">
-      <div className="navbar-brand">
-        <img src="/logo.png" alt="Medora Logo" style={{ height: '40px', width: 'auto' }} />
-      </div>
+      <nav className="navbar">
+        <div className="navbar-brand">
+          <img src="/logo.png" alt="Medora Logo" style={{ height: '40px', width: 'auto' }} />
+        </div>
 
-      <div className="navbar-links">
-        <Link to="/" className={`navbar-link ${isActive('/') ? 'active' : ''}`}>
-          Overview
-        </Link>
-        {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
-          <Link to="/patients" className={`navbar-link ${isActive('/patients') ? 'active' : ''}`}>
-            Patients
+        <div className="navbar-links">
+          <Link to="/" className={`navbar-link ${isActive('/') ? 'active' : ''}`}>
+            Overview
           </Link>
-        )}
-        <Link to="/doctors" className={`navbar-link ${isActive('/doctors') ? 'active' : ''}`}>
-          Doctors
-        </Link>
-        <Link to="/departments" className={`navbar-link ${isActive('/departments') ? 'active' : ''}`}>
-          Departments
-        </Link>
-        {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
-          <>
-            <Link to="/appointments" className={`navbar-link ${isActive('/appointments') ? 'active' : ''}`}>
-              Appointments
-            </Link>
-            {user?.role === 'PATIENT' && (
+          {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
+              <Link to="/patients" className={`navbar-link ${isActive('/patients') ? 'active' : ''}`}>
+                Patients
+              </Link>
+          )}
+          <Link to="/doctors" className={`navbar-link ${isActive('/doctors') ? 'active' : ''}`}>
+            Doctors
+          </Link>
+          <Link to="/departments" className={`navbar-link ${isActive('/departments') ? 'active' : ''}`}>
+            Departments
+          </Link>
+          {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
               <>
-                <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
-                  Medical Records
+                <Link to="/appointments" className={`navbar-link ${isActive('/appointments') ? 'active' : ''}`}>
+                  Appointments
                 </Link>
-                <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
-                  Billing
-                </Link>
+                {user?.role === 'PATIENT' && (
+                    <>
+                      <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
+                        Medical Records
+                      </Link>
+                      <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
+                        Billing
+                      </Link>
+                    </>
+                )}
               </>
-            )}
-          </>
-        )}
-        {(user?.role === 'ADMIN' || user?.role === 'LAB_TECHNICIAN' || user?.role === 'DOCTOR') && (
-          <Link to="/lab-tests" className={`navbar-link ${isActive('/lab-tests') ? 'active' : ''}`}>
-            Lab Tests
-          </Link>
-        )}
-        {!user?.role || user?.role === 'ADMIN' || user?.role === 'DOCTOR' ? (
-          <>
-            {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
-              <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
-                Medical Records
+          )}
+          {(user?.role === 'ADMIN' || user?.role === 'LAB_TECHNICIAN' || user?.role === 'DOCTOR') && (
+              <Link to="/lab-tests" className={`navbar-link ${isActive('/lab-tests') ? 'active' : ''}`}>
+                Lab Tests
               </Link>
-            )}
-            {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
+          )}
+          {!user?.role || user?.role === 'ADMIN' || user?.role === 'DOCTOR' ? (
               <>
-                <Link to="/medical-reports" className={`navbar-link ${isActive('/medical-reports') ? 'active' : ''}`}>
-                  Medical Reports
-                </Link>
-                <Link to="/procedures" className={`navbar-link ${isActive('/procedures') ? 'active' : ''}`}>
-                  Procedures
-                </Link>
-                <Link to="/referrals" className={`navbar-link ${isActive('/referrals') ? 'active' : ''}`}>
-                  Referrals
-                </Link>
+                {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
+                    <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
+                      Medical Records
+                    </Link>
+                )}
+                {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
+                    <>
+                      <Link to="/medical-reports" className={`navbar-link ${isActive('/medical-reports') ? 'active' : ''}`}>
+                        Medical Reports
+                      </Link>
+                      <Link to="/procedures" className={`navbar-link ${isActive('/procedures') ? 'active' : ''}`}>
+                        Procedures
+                      </Link>
+                      <Link to="/referrals" className={`navbar-link ${isActive('/referrals') ? 'active' : ''}`}>
+                        Referrals
+                      </Link>
+                    </>
+                )}
               </>
-            )}
-          </>
-        ) : null}
-        {(user?.role === 'ADMIN' || user?.role === 'BILLING_ADMIN') && (
-          <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
-            Billing
-          </Link>
-        )}
-      </div>
+          ) : null}
+          {(user?.role === 'ADMIN' || user?.role === 'BILLING_ADMIN') && (
+              <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
+                Billing
+              </Link>
+          )}
+        </div>
 
-      <div className="navbar-right">
-        {user && (
-          <div className="navbar-avatar" style={{ position: 'relative' }}>
-            <div className="navbar-avatar-circle">{getInitials()}</div>
-            <div className="navbar-avatar-name">{user.firstName}</div>
-            <button
-              onClick={() => setShowMenu(!showMenu)}
-              style={{
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                marginLeft: '4px',
-                color: 'var(--color-neutral-600)',
-                fontSize: '12px'
-              }}
-            >
-              ▼
-            </button>
-            {showMenu && (
-              <div style={{
-                position: 'absolute',
-                top: '100%',
-                right: 0,
-                background: 'white',
-                border: '1px solid var(--color-neutral-400)',
-                borderRadius: '6px',
-                minWidth: '150px',
-                marginTop: '4px',
-                boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
-                zIndex: 1000
-              }}>
-                <div style={{
-                  padding: '8px 0',
-                  fontSize: '11px',
-                  color: 'var(--color-neutral-600)',
-                  borderBottom: '1px solid var(--color-neutral-400)',
-                  paddingLeft: '12px',
-                  paddingRight: '12px',
-                  paddingTop: '8px',
-                  paddingBottom: '8px'
-                }}>
-                  {user.role}
-                </div>
+        <div className="navbar-right">
+          {user && (
+              <div className="navbar-avatar" style={{ position: 'relative' }}>
+                <div className="navbar-avatar-circle">{getInitials()}</div>
+                <div className="navbar-avatar-name">{user.firstName}</div>
                 <button
-                  onClick={handleLogout}
-                  style={{
-                    width: '100%',
-                    padding: '8px 12px',
-                    background: 'none',
-                    border: 'none',
-                    textAlign: 'left',
-                    cursor: 'pointer',
-                    fontSize: '12px',
-                    color: 'var(--color-status-red)',
-                    transition: 'background 0.2s'
-                  }}
-                  onMouseEnter={(e) => e.target.style.background = 'var(--color-neutral-200)'}
-                  onMouseLeave={(e) => e.target.style.background = 'none'}
+                    onClick={() => setShowMenu(!showMenu)}
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      cursor: 'pointer',
+                      marginLeft: '4px',
+                      color: 'var(--color-neutral-600)',
+                      fontSize: '12px'
+                    }}
                 >
-                  Logout
+                  ▼
                 </button>
+                {showMenu && (
+                    <div style={{
+                      position: 'absolute',
+                      top: '100%',
+                      right: 0,
+                      background: 'white',
+                      border: '1px solid var(--color-neutral-400)',
+                      borderRadius: '6px',
+                      minWidth: '150px',
+                      marginTop: '4px',
+                      boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+                      zIndex: 1000
+                    }}>
+                      <div style={{
+                        padding: '8px 0',
+                        fontSize: '11px',
+                        color: 'var(--color-neutral-600)',
+                        borderBottom: '1px solid var(--color-neutral-400)',
+                        paddingLeft: '12px',
+                        paddingRight: '12px',
+                        paddingTop: '8px',
+                        paddingBottom: '8px'
+                      }}>
+                        {user.role}
+                      </div>
+                      <button
+                          onClick={handleLogout}
+                          style={{
+                            width: '100%',
+                            padding: '8px 12px',
+                            background: 'none',
+                            border: 'none',
+                            textAlign: 'left',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                            color: 'var(--color-status-red)',
+                            transition: 'background 0.2s'
+                          }}
+                          onMouseEnter={(e) => e.target.style.background = 'var(--color-neutral-200)'}
+                          onMouseLeave={(e) => e.target.style.background = 'none'}
+                      >
+                        Logout
+                      </button>
+                    </div>
+                )}
               </div>
-            )}
-          </div>
-        )}
-      </div>
-    </nav>
+          )}
+        </div>
+      </nav>
   );
 }