Index: frontend/src/App.js
===================================================================
--- frontend/src/App.js	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
+++ frontend/src/App.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
@@ -1,4 +1,4 @@
 
-import './App.css';
+
 import React, { useEffect, useState } from 'react';
 import Navbar from './components/Navbar';
@@ -16,4 +16,8 @@
 import DepartmentDetail from './pages/departments/DepartmentDetail';
 import DoctorsByDepartment from './pages/departments/DoctorsByDepartment';
+import MedicalRecordList from './pages/medical-records/MedicalRecordList';
+import MedicalRecordDetail from './pages/medical-records/MedicalRecordDetail';
+import ReferralList from './pages/referrals/ReferralList';
+import MedicalReportList from './pages/medical-reports/MedicalReportList';
 
 
@@ -62,4 +66,15 @@
               <Route path="/appointments" element={<ProtectedRoute><AppointmentList /></ProtectedRoute>} />
               <Route path="/appointments/new" element={<ProtectedRoute><AppointmentForm /></ProtectedRoute>} />
+
+              {/* Medical Record Routes */}
+              <Route path="/medical-records" element={<ProtectedRoute><MedicalRecordList /></ProtectedRoute>} />
+              <Route path="/medical-records/:id" element={<ProtectedRoute><MedicalRecordDetail /></ProtectedRoute>} />
+
+              {/* Medical Report Routes */}
+              <Route path="/medical-reports" element={<ProtectedRoute><MedicalReportList /></ProtectedRoute>} />
+
+
+              {/* Referral Routes */}
+              <Route path="/referrals" element={<ProtectedRoute><ReferralList /></ProtectedRoute>} />
             </Routes>
           </main>