Index: frontend/src/App.js
===================================================================
--- frontend/src/App.js	(revision b63d7b5e4b1c98d1e978322be8e809ceee661337)
+++ frontend/src/App.js	(revision 20d16ca871b551a66a35600154523092bd0e1f10)
@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Navbar from './components/Navbar';
+import ProtectedRoute from './components/ProtectedRoute';
+import Login from './pages/Login';
 import Dashboard from './pages/Dashboard';
 import PatientList from './pages/patients/PatientList';
@@ -27,11 +29,38 @@
 function App() {
   const [user, setUser] = useState(null);
+  const [refresh, setRefresh] = useState(0);
 
   useEffect(() => {
-    const userStr = localStorage.getItem('user');
-    if (userStr) {
-      setUser(JSON.parse(userStr));
-    }
-  }, []);
+    const loadUser = () => {
+      const userStr = localStorage.getItem('user');
+      if (userStr) {
+        try {
+          setUser(JSON.parse(userStr));
+        } catch (err) {
+          console.error('Failed to parse user:', err);
+          setUser(null);
+        }
+      } else {
+        setUser(null);
+      }
+    };
+
+    loadUser();
+
+    // Listen for storage changes (other tabs/windows)
+    window.addEventListener('storage', loadUser);
+
+    // Create a custom event listener for same-tab changes
+    const handleStorageChange = (e) => {
+      console.log('Storage change detected:', e.detail);
+      loadUser();
+    };
+    window.addEventListener('userStorageChange', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', loadUser);
+      window.removeEventListener('userStorageChange', handleStorageChange);
+    };
+  }, [refresh]);
 
   return (
@@ -77,7 +106,4 @@
               <Route path="/medical-reports" element={<ProtectedRoute><MedicalReportList /></ProtectedRoute>} />
 
-              {/* Referral Routes */}
-              <Route path="/referrals" element={<ProtectedRoute><ReferralList /></ProtectedRoute>} />
-
               {/* Lab Test Routes */}
               <Route path="/lab-tests" element={<ProtectedRoute><LabTestList /></ProtectedRoute>} />
@@ -92,5 +118,6 @@
               <Route path="/billing/:id" element={<ProtectedRoute><BillingDetail /></ProtectedRoute>} />
 
-
+              {/* Referral Routes */}
+              <Route path="/referrals" element={<ProtectedRoute><ReferralList /></ProtectedRoute>} />
             </Routes>
           </main>
Index: frontend/src/components/Navbar.js
===================================================================
--- frontend/src/components/Navbar.js	(revision b63d7b5e4b1c98d1e978322be8e809ceee661337)
+++ frontend/src/components/Navbar.js	(revision 20d16ca871b551a66a35600154523092bd0e1f10)
@@ -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>
   );
 }
Index: frontend/src/pages/Login.js
===================================================================
--- frontend/src/pages/Login.js	(revision b63d7b5e4b1c98d1e978322be8e809ceee661337)
+++ frontend/src/pages/Login.js	(revision 20d16ca871b551a66a35600154523092bd0e1f10)
@@ -47,5 +47,5 @@
 
       localStorage.setItem('token', data.token);
-      localStorage.setItem('user', JSON.stringify({
+      const userData = {
         userId: data.userId,
         patientId: data.patientId,
@@ -55,4 +55,10 @@
         firstName: data.firstName,
         lastName: data.lastName,
+      };
+      localStorage.setItem('user', JSON.stringify(userData));
+
+      // Dispatch custom event to notify components on the same tab
+      window.dispatchEvent(new CustomEvent('userStorageChange', {
+        detail: { userData }
       }));
 
@@ -60,5 +66,5 @@
       setTimeout(() => {
         navigate('/');
-      }, 1000);
+      }, 500);
     } catch (err) {
       setError(err.message || 'Login failed');
@@ -69,66 +75,66 @@
 
   return (
-    <div className="min-h-screen bg-blue-200 flex items-center justify-center p-4">
-      <div className="bg-white rounded-lg shadow-2xl p-8 w-full max-w-md">
-        <div className="text-center mb-8">
-          <h1 className="text-5xl font-bold text-purple-600 mb-2">Medora</h1>
-          <p className="text-gray-600">Hospital Management System</p>
-        </div>
-
-        {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
-        {success && <SuccessAlert message={success} onClose={() => setSuccess(null)} />}
-
-        <form onSubmit={handleLogin} className="space-y-6">
-          <div>
-            <label className="block text-sm font-normal text-gray-700 mb-2">
-              Username (EMBG for Patients)
-            </label>
-            <input
-              type="text"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              placeholder="Enter your username or EMBG"
-              className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition"
-              disabled={loading}
-            />
+      <div className="min-h-screen bg-blue-200 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg shadow-2xl p-8 w-full max-w-md">
+          <div className="text-center mb-8">
+            <h1 className="text-5xl font-bold text-purple-600 mb-2">Medora</h1>
+            <p className="text-gray-600">Hospital Management System</p>
           </div>
 
-          <div>
-            <label className="block text-sm font-normal text-gray-700 mb-2">
-              Password
-            </label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Enter your password"
-              className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition"
-              disabled={loading}
-            />
+          {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+          {success && <SuccessAlert message={success} onClose={() => setSuccess(null)} />}
+
+          <form onSubmit={handleLogin} className="space-y-6">
+            <div>
+              <label className="block text-sm font-normal text-gray-700 mb-2">
+                Username (EMBG for Patients)
+              </label>
+              <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="Enter your username or EMBG"
+                  className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition"
+                  disabled={loading}
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-normal text-gray-700 mb-2">
+                Password
+              </label>
+              <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter your password"
+                  className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition"
+                  disabled={loading}
+              />
+            </div>
+
+            <button
+                type="submit"
+                disabled={loading}
+                className="w-full bg-purple-600 text-white font-bold py-3 rounded-lg hover:bg-purple-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? 'Logging in...' : 'Login'}
+            </button>
+          </form>
+
+          <div className="mt-8 p-4 bg-purple-50 rounded-lg border border-purple-200">
+            <p className="text-sm text-gray-700 font-normal mb-2">Demo Credentials:</p>
+            <p className="text-sm text-gray-600 mb-2">
+              <strong>Admin:</strong> username: admin | password: admin123
+            </p>
+            <p className="text-sm text-gray-600 mb-2">
+              <strong>Doctor:</strong> username: ivan.stojanov@medora.com | password: doctor123
+            </p>
+            <p className="text-sm text-gray-600">
+              <strong>Patient:</strong> username: [EMBG] | password: password123
+            </p>
           </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full bg-purple-600 text-white font-bold py-3 rounded-lg hover:bg-purple-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {loading ? 'Logging in...' : 'Login'}
-          </button>
-        </form>
-
-        <div className="mt-8 p-4 bg-purple-50 rounded-lg border border-purple-200">
-          <p className="text-sm text-gray-700 font-normal mb-2">Demo Credentials:</p>
-          <p className="text-sm text-gray-600 mb-2">
-            <strong>Admin:</strong> username: admin | password: admin123
-          </p>
-          <p className="text-sm text-gray-600 mb-2">
-            <strong>Doctor:</strong> username: ivan.stojanov@medora.com | password: doctor123
-          </p>
-          <p className="text-sm text-gray-600">
-            <strong>Patient:</strong> username: [EMBG] | password: password123
-          </p>
         </div>
       </div>
-    </div>
   );
 }