Index: frontend/src/App.js
===================================================================
--- frontend/src/App.js	(revision f05de0502f3c7c6a4149420915249e784c827f57)
+++ frontend/src/App.js	(revision e1f74f6c04f9d460135de378f659fedfd9c74b44)
@@ -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>