Index: frontend/src/App.js
===================================================================
--- frontend/src/App.js	(revision cb0881dad57196f6efea7903788b461cf6bd7078)
+++ frontend/src/App.js	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
@@ -2,4 +2,18 @@
 import './App.css';
 import React, { useEffect, useState } from 'react';
+import Navbar from './components/Navbar';
+import ProtectedRoute from './components/ProtectedRoute';
+import Login from './pages/Login';
+import PatientList from './pages/patients/PatientList';
+import PatientDetail from './pages/patients/PatientDetail';
+import PatientForm from './pages/patients/PatientForm';
+import DoctorList from './pages/doctors/DoctorList';
+import DoctorDetail from './pages/doctors/DoctorDetail';
+import DoctorForm from './pages/doctors/DoctorForm';v
+import AppointmentList from './pages/appointments/AppointmentList';
+import AppointmentForm from './pages/appointments/AppointmentForm';
+import DepartmentList from './pages/departments/DepartmentList';
+import DepartmentDetail from './pages/departments/DepartmentDetail';
+import DoctorsByDepartment from './pages/departments/DoctorsByDepartment';
 
 
@@ -13,4 +27,47 @@
     }
   }, []);
-}
+
+  return (
+      <Router>
+        <div className="min-h-screen bg-gray-50">
+          {user && <Navbar />}
+          <main className={user ? "container mx-auto px-4 py-8" : ""}>
+            <Routes>
+              <Route path="/login" element={<Login />} />
+
+              <Route path="/" element={
+                <ProtectedRoute>
+                  <Dashboard />
+                </ProtectedRoute>
+              } />
+
+              {/* Patient Routes */}
+              <Route path="/patients" element={<ProtectedRoute><PatientList /></ProtectedRoute>} />
+              <Route path="/patients/new" element={<ProtectedRoute><PatientForm /></ProtectedRoute>} />
+              <Route path="/patients/:id" element={<ProtectedRoute><PatientDetail /></ProtectedRoute>} />
+              <Route path="/patients/:id/edit" element={<ProtectedRoute><PatientForm /></ProtectedRoute>} />
+
+              {/* Doctor Routes */}
+              <Route path="/doctors" element={<ProtectedRoute><DoctorList /></ProtectedRoute>} />
+              <Route path="/doctors/new" element={<ProtectedRoute><DoctorForm /></ProtectedRoute>} />
+              <Route path="/doctors/:id" element={<ProtectedRoute><DoctorDetail /></ProtectedRoute>} />
+              <Route path="/doctors/:id/edit" element={<ProtectedRoute><DoctorForm /></ProtectedRoute>} />
+
+              {/* Department Routes */}
+              <Route path="/departments" element={<ProtectedRoute><DepartmentList /></ProtectedRoute>} />
+              <Route path="/departments/:departmentId" element={<ProtectedRoute><DepartmentDetail /></ProtectedRoute>} />
+              <Route path="/departments/:departmentId/doctors" element={<ProtectedRoute><DoctorsByDepartment /></ProtectedRoute>} />
+
+              {/* Appointment Routes */}
+              <Route path="/appointments" element={<ProtectedRoute><AppointmentList /></ProtectedRoute>} />
+              <Route path="/appointments/new" element={<ProtectedRoute><AppointmentForm /></ProtectedRoute>} />
+            </Routes>
+          </main>
+        </div>
+      </Router>
+  );
+
+
+
+              }
 export default App;