Index: ontend/src/App.css
===================================================================
--- frontend/src/App.css	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
+++ 	(revision )
@@ -1,38 +1,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
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>
Index: frontend/src/pages/medical-records/MedicalRecordDetail.js
===================================================================
--- frontend/src/pages/medical-records/MedicalRecordDetail.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
+++ frontend/src/pages/medical-records/MedicalRecordDetail.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
@@ -0,0 +1,1044 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { medicalRecordService } from '../../services/medicalRecordService';
+import { doctorService } from '../../services/doctorService';
+import { labService } from '../../services/labService';
+import { procedureService } from '../../services/procedureService';
+import ErrorAlert from '../../components/ErrorAlert';
+import SuccessAlert from '../../components/SuccessAlert';
+import Loading from '../../components/Loading';
+import apiClient from '../../services/api';
+
+function MedicalRecordDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const user = JSON.parse(localStorage.getItem('user') || '{}');
+  const isDoctor = user.role === 'DOCTOR';
+
+  const [record, setRecord] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  const [activeTab, setActiveTab] = useState('view');
+  const [doctors, setDoctors] = useState([]);
+  const [selectedDoctorId, setSelectedDoctorId] = useState(isDoctor ? user.doctorId : '');
+
+  // Diagnosis form
+  const [diagnosisForm, setDiagnosisForm] = useState({
+    diagnosisId: '',
+    doctorId: '',
+  });
+
+  // Symptoms form
+  const [symptomsForm, setSymptomsForm] = useState({
+    symptomId: '',
+  });
+
+  // Allergies form
+  const [allergyForm, setAllergyForm] = useState({
+    allergyId: '',
+    severity: 'MEDIUM',
+    reaction: '',
+  });
+
+  // Prescription form
+  const [prescriptionForm, setPrescriptionForm] = useState({
+    prescriptionId: '',
+    dosage: '',
+    frequency: '',
+    duration: '',
+    reason: '',
+  });
+
+  // Dropdown options
+  const [diagnoses, setDiagnoses] = useState([]);
+  const [symptoms, setSymptoms] = useState([]);
+  const [allergies, setAllergies] = useState([]);
+  const [prescriptions, setPrescriptions] = useState([]);
+  const [labTests, setLabTests] = useState([]);
+  const [procedures, setProcedures] = useState([]);
+
+  // Lab test form
+  const [labTestForm, setLabTestForm] = useState({
+    testId: '',
+    testDate: new Date().toISOString().split('T')[0],
+    notes: '',
+  });
+
+  // Procedure form
+  const [procedureForm, setProcedureForm] = useState({
+    procedureId: '',
+    procedureDate: new Date().toISOString().split('T')[0],
+    notes: '',
+    diagnosisId: '',
+  });
+
+  const [labResults, setLabResults] = useState([]);
+  const [procedureResults, setProcedureResults] = useState([]);
+
+  useEffect(() => {
+    fetchRecord();
+    fetchDoctors();
+    fetchDropdownOptions();
+  }, [id]);
+
+  const fetchDropdownOptions = async () => {
+    try {
+      console.log('Fetching dropdown options...');
+      const diagnosesRes = await apiClient.get('/medical-records/dropdown/diagnoses');
+      console.log('Diagnoses:', diagnosesRes.data);
+
+      const symptomsRes = await apiClient.get('/medical-records/dropdown/symptoms');
+      console.log('Symptoms:', symptomsRes.data);
+
+      const allergiesRes = await apiClient.get('/medical-records/dropdown/allergies');
+      console.log('Allergies:', allergiesRes.data);
+
+      const prescriptionsRes = await apiClient.get('/medical-records/dropdown/prescriptions');
+      console.log('Prescriptions:', prescriptionsRes.data);
+
+      const testsRes = await labService.getAllLabTests();
+      console.log('Lab Tests:', testsRes.data);
+
+      const proceduresRes = await procedureService.getAllProcedures();
+      console.log('Procedures:', proceduresRes.data);
+
+      setDiagnoses(diagnosesRes.data || []);
+      setSymptoms(symptomsRes.data || []);
+      setAllergies(allergiesRes.data || []);
+      setPrescriptions(prescriptionsRes.data || []);
+      setLabTests(testsRes.data || []);
+      setProcedures(proceduresRes.data || []);
+      console.log('Dropdown options set successfully');
+    } catch (err) {
+      console.error('Error fetching dropdown options:', err);
+      setError('Failed to load dropdown options: ' + (err.response?.data?.error || err.message));
+    }
+  };
+
+  const fetchRecord = async () => {
+    try {
+      setLoading(true);
+      const response = await medicalRecordService.getMedicalRecordByPatientId(id);
+      setRecord(response.data);
+
+      // Fetch lab results
+      try {
+        const resultsResponse = await labService.getLabResultsForMedicalRecord(response.data.recordId);
+        setLabResults(resultsResponse.data || []);
+      } catch (err) {
+        console.error('Failed to fetch lab results:', err);
+        setLabResults([]);
+      }
+
+      // Fetch procedure results
+      try {
+        const procedureResultsResponse = await procedureService.getProcedureResultsForMedicalRecord(response.data.recordId);
+        setProcedureResults(procedureResultsResponse.data || []);
+      } catch (err) {
+        console.error('Failed to fetch procedure results:', err);
+        setProcedureResults([]);
+      }
+    } catch (err) {
+      setError('Failed to fetch medical record');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchDoctors = async () => {
+    try {
+      if (!isDoctor) {
+        const response = await doctorService.getAllDoctors();
+        setDoctors(response.data);
+        if (response.data.length > 0 && !selectedDoctorId) {
+          setSelectedDoctorId(response.data[0].doctorId);
+        }
+      }
+    } catch (err) {
+      console.error('Failed to fetch doctors', err);
+    }
+  };
+
+  const handleAddDiagnosis = async (e) => {
+    e.preventDefault();
+    try {
+      if (!diagnosisForm.diagnosisId) {
+        setError('Please select a diagnosis');
+        return;
+      }
+      if (!selectedDoctorId) {
+        setError('Please select a doctor');
+        return;
+      }
+      const selectedDiagnosis = diagnoses.find(d => d.id === parseInt(diagnosisForm.diagnosisId));
+      await apiClient.post('/diagnoses', {
+        patientId: parseInt(record.patientId),
+        doctorId: parseInt(selectedDoctorId),
+        name: selectedDiagnosis.name,
+        description: '',
+      });
+      setSuccess('Diagnosis recorded successfully');
+      setDiagnosisForm({ diagnosisId: '', doctorId: '' });
+      setTimeout(() => fetchRecord(), 1000);
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to record diagnosis');
+    }
+  };
+
+  const handleAddSymptom = async (e) => {
+    e.preventDefault();
+    try {
+      if (!symptomsForm.symptomId) {
+        setError('Please select a symptom');
+        return;
+      }
+      await apiClient.post(`/medical-records/${record.recordId}/symptoms`, {
+        symptomId: parseInt(symptomsForm.symptomId),
+        severity: 'MEDIUM',
+      });
+      setSuccess('Symptom recorded successfully');
+      setSymptomsForm({ symptomId: '' });
+      setTimeout(() => fetchRecord(), 1000);
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to record symptom');
+    }
+  };
+
+  const handleAddAllergy = async (e) => {
+    e.preventDefault();
+    try {
+      if (!allergyForm.allergyId) {
+        setError('Please select an allergy');
+        return;
+      }
+      await apiClient.post(`/medical-records/${record.recordId}/allergies`, {
+        allergyId: parseInt(allergyForm.allergyId),
+        severity: allergyForm.severity,
+        reaction: allergyForm.reaction,
+      });
+      setSuccess('Allergy recorded successfully');
+      setAllergyForm({ allergyId: '', severity: 'MEDIUM', reaction: '' });
+      setTimeout(() => fetchRecord(), 1000);
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to record allergy');
+    }
+  };
+
+  const handleAddPrescription = async (e) => {
+    e.preventDefault();
+    try {
+      if (!prescriptionForm.prescriptionId) {
+        setError('Please select a prescription medication');
+        return;
+      }
+      if (!prescriptionForm.dosage.trim()) {
+        setError('Dosage is required');
+        return;
+      }
+      if (!prescriptionForm.frequency.trim()) {
+        setError('Frequency is required');
+        return;
+      }
+      if (!prescriptionForm.duration.trim()) {
+        setError('Duration is required');
+        return;
+      }
+      const selectedPrescription = prescriptions.find(p => p.id === parseInt(prescriptionForm.prescriptionId));
+      await apiClient.post('/prescriptions', {
+        medicalRecordId: record.recordId,
+        medicationName: selectedPrescription.name,
+        dosage: prescriptionForm.dosage,
+        frequency: prescriptionForm.frequency,
+        duration: prescriptionForm.duration,
+        notes: prescriptionForm.reason,
+      });
+      setSuccess('Prescription recorded successfully');
+      setPrescriptionForm({
+        prescriptionId: '',
+        dosage: '',
+        frequency: '',
+        duration: '',
+        reason: '',
+      });
+      setTimeout(() => fetchRecord(), 1000);
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to record prescription');
+    }
+  };
+
+  if (loading) return <Loading />;
+
+  if (!record) {
+    return (
+      <div>
+        <ErrorAlert message="Medical record not found" onClose={() => navigate('/medical-records')} />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 style={{ fontSize: '36px', fontWeight: 'normal' }}>Medical Record</h1>
+        <button
+          onClick={() => navigate('/medical-records')}
+          className="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400"
+        >
+          Back
+        </button>
+      </div>
+
+      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+      {success && <SuccessAlert message={success} onClose={() => setSuccess(null)} />}
+
+      {/* Patient Info */}
+      <div className="bg-white rounded-lg shadow p-6 mb-6">
+        <h2 style={{ fontSize: '20px', fontWeight: 'normal', marginBottom: '16px' }}>Patient Information</h2>
+        <div className="grid grid-cols-4 gap-4">
+          <div>
+            <p className="font-normal text-sm text-gray-600">Patient Name</p>
+            <p className="font-normal">{record.patientName}</p>
+          </div>
+          <div>
+            <p className="font-normal text-sm text-gray-600">EMBG</p>
+            <p className="font-normal">{record.embg}</p>
+          </div>
+          <div>
+            <p className="font-normal text-sm text-gray-600">Record ID</p>
+            <p className="font-normal">{record.recordId}</p>
+          </div>
+          <div>
+            <p className="font-normal text-sm text-gray-600">Patient ID</p>
+            <p className="font-normal">{record.patientId}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-2 mb-6 border-b">
+        <button
+          onClick={() => setActiveTab('view')}
+          style={{ fontWeight: 'normal' }}
+          className={`px-6 py-3 ${
+            activeTab === 'view'
+              ? 'border-b-2 border-purple-600 text-purple-600'
+              : 'text-purple-600 hover:text-purple-700'
+          }`}
+        >
+          View Medical Data
+        </button>
+        <span className="text-gray-600 px-3" style={{ fontWeight: 'normal' }}>|</span>
+        <button
+          onClick={() => setActiveTab('diagnosis')}
+          style={{ fontWeight: 'normal' }}
+          className={`px-6 py-3 ${
+            activeTab === 'diagnosis'
+              ? 'border-b-2 border-purple-600 text-purple-600'
+              : 'text-purple-600 hover:text-purple-700'
+          }`}
+        >
+          Record Diagnosis
+        </button>
+        <span className="text-gray-600 px-3" style={{ fontWeight: 'normal' }}>|</span>
+        <button
+          onClick={() => setActiveTab('symptoms')}
+          style={{ fontWeight: 'normal' }}
+          className={`px-6 py-3 ${
+            activeTab === 'symptoms'
+              ? 'border-b-2 border-purple-600 text-purple-600'
+              : 'text-purple-600 hover:text-purple-700'
+          }`}
+        >
+          Record Symptoms
+        </button>
+        <span className="text-gray-600 px-3" style={{ fontWeight: 'normal' }}>|</span>
+        <button
+          onClick={() => setActiveTab('allergies')}
+          style={{ fontWeight: 'normal' }}
+          className={`px-6 py-3 ${
+            activeTab === 'allergies'
+              ? 'border-b-2 border-purple-600 text-purple-600'
+              : 'text-purple-600 hover:text-purple-700'
+          }`}
+        >
+          Record Allergies
+        </button>
+        <span className="text-gray-600 px-3" style={{ fontWeight: 'normal' }}>|</span>
+        <button
+          onClick={() => setActiveTab('prescription')}
+          style={{ fontWeight: 'normal' }}
+          className={`px-6 py-3 ${
+            activeTab === 'prescription'
+              ? 'border-b-2 border-purple-600 text-purple-600'
+              : 'text-purple-600 hover:text-purple-700'
+          }`}
+        >
+          Record Prescription
+        </button>
+        <span className="text-gray-600 px-3" style={{ fontWeight: 'normal' }}>|</span>
+        <button
+          onClick={() => setActiveTab('lab-tests')}
+          style={{ fontWeight: 'normal' }}
+          className={`px-6 py-3 ${
+            activeTab === 'lab-tests'
+              ? 'border-b-2 border-purple-600 text-purple-600'
+              : 'text-purple-600 hover:text-purple-700'
+          }`}
+        >
+          Request Lab Test
+        </button>
+        <span className="text-gray-600 px-3" style={{ fontWeight: 'normal' }}>|</span>
+        <button
+          onClick={() => setActiveTab('procedures')}
+          style={{ fontWeight: 'normal' }}
+          className={`px-6 py-3 ${
+            activeTab === 'procedures'
+              ? 'border-b-2 border-purple-600 text-purple-600'
+              : 'text-purple-600 hover:text-purple-700'
+          }`}
+        >
+          Request Procedure
+        </button>
+      </div>
+
+      {/* View Medical Data Tab */}
+      {activeTab === 'view' && (
+        <div className="space-y-6">
+          {/* Diagnoses */}
+          {record.diagnoses && record.diagnoses.length > 0 && (
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="font-normal" style={{ fontSize: '20px', marginBottom: '16px' }}>Diagnoses</h3>
+              <div className="space-y-3">
+                {record.diagnoses.map((diagnosis) => (
+                  <div key={diagnosis.diagnosisId} className="border-l-4 border-purple-500 pl-4 py-2">
+                    <p className="font-normal" style={{ fontSize: '18px' }}>{diagnosis.name}</p>
+                    {diagnosis.description && (
+                      <p className="font-normal text-gray-600 text-sm">{diagnosis.description}</p>
+                    )}
+                    <p className="font-normal text-xs text-gray-500">By: {diagnosis.doctorName}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Symptoms */}
+          {record.symptoms && record.symptoms.length > 0 && (
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="font-normal" style={{ fontSize: '20px', marginBottom: '16px' }}>Symptoms</h3>
+              <div className="flex flex-wrap gap-2">
+                {record.symptoms.map((symptom) => (
+                  <span
+                    key={symptom.symptomId}
+                    className="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-normal"
+                  >
+                    {symptom.symptomName}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Allergies */}
+          {record.allergies && record.allergies.length > 0 && (
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="font-normal" style={{ fontSize: '20px', marginBottom: '16px' }}>Allergies</h3>
+              <div className="space-y-3">
+                {record.allergies.map((allergy) => (
+                  <div key={allergy.allergyId} className="border-l-4 border-red-500 pl-4 py-2">
+                    <p className="font-normal">{allergy.allergyName}</p>
+                    <p className="font-normal" style={{ fontSize: '14px' }}>
+                      <span
+                        className="font-normal"
+                        style={{
+                          padding: '4px 8px',
+                          borderRadius: '4px',
+                          color: 'white',
+                          fontSize: '12px',
+                          background: allergy.severity === 'CRITICAL' ? '#dc2626' : allergy.severity === 'HIGH' ? '#ef4444' : allergy.severity === 'MEDIUM' ? '#eab308' : '#22c55e'
+                        }}
+                      >
+                        {allergy.severity} Severity
+                      </span>
+                    </p>
+                    {allergy.reaction && (
+                      <p className="font-normal text-gray-600 text-sm">Reaction: {allergy.reaction}</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Prescriptions */}
+          {record.prescriptions && record.prescriptions.length > 0 && (
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="font-normal" style={{ fontSize: '20px', marginBottom: '16px' }}>Prescriptions</h3>
+              <div className="space-y-3">
+                {record.prescriptions.map((prescription) => (
+                  <div key={prescription.prescriptionId} className="border-l-4 border-purple-500 pl-4 py-2">
+                    <p className="font-normal">{prescription.medicationName}</p>
+                    <p className="font-normal text-sm text-gray-600">Dosage: {prescription.dosage}</p>
+                    <p className="font-normal text-sm text-gray-600">Frequency: {prescription.frequency}</p>
+                    <p className="font-normal text-sm text-gray-600">Duration: {prescription.duration}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Reports */}
+          {record.reports && record.reports.length > 0 && (
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="font-normal" style={{ fontSize: '20px', marginBottom: '16px' }}>Medical Reports</h3>
+              <div className="space-y-3">
+                {record.reports.map((report) => (
+                  <div key={report.reportId} className="border-l-4 border-green-500 pl-4 py-2">
+                    <p style={{ fontWeight: 'normal' }}>Report from {report.doctorName}</p>
+                    <p className="font-normal text-gray-600 text-sm">{report.description}</p>
+                    <p className="font-normal text-xs text-gray-500">Date: {report.reportDate}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Lab Results */}
+          {labResults && labResults.length > 0 && (
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="font-normal" style={{ fontSize: '20px', marginBottom: '16px' }}>Lab Test Results</h3>
+              <div className="space-y-3">
+                {labResults.map((result) => (
+                  <div key={result.resultId} className="border-l-4 border-cyan-500 pl-4 py-3 bg-cyan-50 rounded">
+                    <p className="font-normal" style={{ fontSize: '18px', color: '#0891b2' }}>{result.testName}</p>
+                    <p className="font-normal text-sm text-gray-700 mt-2">Results: {result.results}</p>
+                    <p className="font-normal text-sm text-gray-600">Result Date: {result.resultDate}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Procedure Results */}
+          {procedureResults && procedureResults.length > 0 && (
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="font-normal" style={{ fontSize: '20px', marginBottom: '16px' }}>Procedure Results</h3>
+              <div className="space-y-3">
+                {procedureResults.map((result) => (
+                  <div key={result.resultId} className="border-l-4 border-orange-500 pl-4 py-3 bg-orange-50 rounded">
+                    <p className="font-normal" style={{ fontSize: '18px', color: '#b45309' }}>{result.procedure?.procedureType || 'Procedure'}</p>
+                    <p className="font-normal text-sm text-gray-700 mt-2">Outcome: {result.resultDescription}</p>
+                    <p className="font-normal text-sm text-gray-600">Result Date: {result.resultDate}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {(!record.diagnoses || record.diagnoses.length === 0) &&
+            (!record.symptoms || record.symptoms.length === 0) &&
+            (!record.allergies || record.allergies.length === 0) &&
+            (!record.reports || record.reports.length === 0) &&
+            (!labResults || labResults.length === 0) &&
+            (!procedureResults || procedureResults.length === 0) && (
+              <div className="bg-blue-50 rounded-lg p-6 text-center">
+                <p className="text-gray-600">No medical data recorded yet</p>
+              </div>
+            )}
+        </div>
+      )}
+
+      {/* Record Diagnosis Tab */}
+      {activeTab === 'diagnosis' && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 style={{ fontSize: '20px', fontWeight: 'normal', marginBottom: '16px' }}>Record New Diagnosis</h3>
+          <form onSubmit={handleAddDiagnosis} className="space-y-4 max-w-2xl">
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Doctor *</label>
+              {isDoctor ? (
+                <p className="px-4 py-2 bg-gray-100 rounded-lg text-gray-700">
+                  Dr. {user.firstName} {user.lastName}
+                </p>
+              ) : (
+                <select
+                  value={selectedDoctorId}
+                  onChange={(e) => setSelectedDoctorId(e.target.value)}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                >
+                  <option value="">Select doctor</option>
+                  {doctors.map((doc) => (
+                    <option key={doc.doctorId} value={doc.doctorId}>
+                      Dr. {doc.firstName} {doc.lastName}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Diagnosis *</label>
+              <select
+                value={diagnosisForm.diagnosisId}
+                onChange={(e) => setDiagnosisForm({ ...diagnosisForm, diagnosisId: e.target.value })}
+                className="w-full px-4 py-2 border rounded-lg"
+                required
+              >
+                <option value="">{diagnoses.length === 0 ? 'Loading diagnoses...' : 'Select diagnosis'}</option>
+                {diagnoses && diagnoses.length > 0 && diagnoses.map((diagnosis) => (
+                  <option key={diagnosis.id} value={diagnosis.id}>
+                    {diagnosis.name}
+                  </option>
+                ))}
+              </select>
+              {diagnoses.length === 0 && (
+                <p className="text-sm text-gray-500 mt-1">No diagnoses available. Please wait...</p>
+              )}
+            </div>
+            <button
+              type="submit"
+              style={{background: '#9333ea', color: 'white', padding: '6px 14px', borderRadius: '6px', border: 'none', cursor: 'pointer', fontSize: '14px', fontWeight: '600'}} onMouseEnter={(e) => e.currentTarget.style.background = '#7e22ce'} onMouseLeave={(e) => e.currentTarget.style.background = '#9333ea'}
+            >
+              Record Diagnosis
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Record Symptoms Tab */}
+      {activeTab === 'symptoms' && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 style={{ fontSize: '20px', fontWeight: 'normal', marginBottom: '16px' }}>Record Patient Symptoms</h3>
+          <form onSubmit={handleAddSymptom} className="space-y-4 max-w-2xl">
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Doctor *</label>
+              {isDoctor ? (
+                <p className="px-4 py-2 bg-gray-100 rounded-lg text-gray-700">
+                  Dr. {user.firstName} {user.lastName}
+                </p>
+              ) : (
+                <select
+                  value={selectedDoctorId}
+                  onChange={(e) => setSelectedDoctorId(e.target.value)}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                >
+                  <option value="">Select doctor</option>
+                  {doctors.map((doc) => (
+                    <option key={doc.doctorId} value={doc.doctorId}>
+                      Dr. {doc.firstName} {doc.lastName}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Symptom *</label>
+              <select
+                value={symptomsForm.symptomId}
+                onChange={(e) => setSymptomsForm({ ...symptomsForm, symptomId: e.target.value })}
+                className="w-full px-4 py-2 border rounded-lg"
+                required
+              >
+                <option value="">Select symptom</option>
+                {symptoms.filter(s => !record.symptoms?.some(rs => rs.symptomId === s.id)).map((symptom) => (
+                  <option key={symptom.id} value={symptom.id}>
+                    {symptom.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <button
+              type="submit"
+              style={{background: '#9333ea', color: 'white', padding: '6px 14px', borderRadius: '6px', border: 'none', cursor: 'pointer', fontSize: '14px', fontWeight: '600'}} onMouseEnter={(e) => e.currentTarget.style.background = '#7e22ce'} onMouseLeave={(e) => e.currentTarget.style.background = '#9333ea'}
+            >
+              Record Symptom
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Record Allergies Tab */}
+      {activeTab === 'allergies' && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 style={{ fontSize: '20px', fontWeight: 'normal', marginBottom: '16px' }}>Record Patient Allergies</h3>
+          <form onSubmit={handleAddAllergy} className="space-y-4 max-w-2xl">
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Doctor *</label>
+              {isDoctor ? (
+                <p className="px-4 py-2 bg-gray-100 rounded-lg text-gray-700">
+                  Dr. {user.firstName} {user.lastName}
+                </p>
+              ) : (
+                <select
+                  value={selectedDoctorId}
+                  onChange={(e) => setSelectedDoctorId(e.target.value)}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                >
+                  <option value="">Select doctor</option>
+                  {doctors.map((doc) => (
+                    <option key={doc.doctorId} value={doc.doctorId}>
+                      Dr. {doc.firstName} {doc.lastName}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Allergy *</label>
+              <select
+                value={allergyForm.allergyId}
+                onChange={(e) => setAllergyForm({ ...allergyForm, allergyId: e.target.value })}
+                className="w-full px-4 py-2 border rounded-lg"
+                required
+              >
+                <option value="">Select allergy</option>
+                {allergies.filter(a => !record.allergies?.some(ra => ra.allergyId === a.id)).map((allergy) => (
+                  <option key={allergy.id} value={allergy.id}>
+                    {allergy.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Severity *</label>
+              <select
+                value={allergyForm.severity}
+                onChange={(e) => setAllergyForm({ ...allergyForm, severity: e.target.value })}
+                className="w-full px-4 py-2 border rounded-lg"
+              >
+                <option value="LOW">Low</option>
+                <option value="MEDIUM">Medium</option>
+                <option value="HIGH">High</option>
+                <option value="CRITICAL">Critical</option>
+              </select>
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Reaction</label>
+              <textarea
+                value={allergyForm.reaction}
+                onChange={(e) => setAllergyForm({ ...allergyForm, reaction: e.target.value })}
+                placeholder="Describe the allergic reaction"
+                className="w-full px-4 py-2 border rounded-lg"
+                rows="3"
+              />
+            </div>
+            <button
+              type="submit"
+              style={{background: '#9333ea', color: 'white', padding: '6px 14px', borderRadius: '6px', border: 'none', cursor: 'pointer', fontSize: '14px', fontWeight: '600'}} onMouseEnter={(e) => e.currentTarget.style.background = '#7e22ce'} onMouseLeave={(e) => e.currentTarget.style.background = '#9333ea'}
+            >
+              Record Allergy
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Record Prescription Tab */}
+      {activeTab === 'prescription' && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 style={{ fontSize: '20px', fontWeight: 'normal', marginBottom: '16px' }}>Record Prescription</h3>
+          <form onSubmit={handleAddPrescription} className="space-y-4 max-w-2xl">
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Doctor *</label>
+              {isDoctor ? (
+                <p className="px-4 py-2 bg-gray-100 rounded-lg text-gray-700">
+                  Dr. {user.firstName} {user.lastName}
+                </p>
+              ) : (
+                <select
+                  value={selectedDoctorId}
+                  onChange={(e) => setSelectedDoctorId(e.target.value)}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                >
+                  <option value="">Select doctor</option>
+                  {doctors.map((doc) => (
+                    <option key={doc.doctorId} value={doc.doctorId}>
+                      Dr. {doc.firstName} {doc.lastName}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Medication *</label>
+              <select
+                value={prescriptionForm.prescriptionId}
+                onChange={(e) =>
+                  setPrescriptionForm({ ...prescriptionForm, prescriptionId: e.target.value })
+                }
+                className="w-full px-4 py-2 border rounded-lg"
+                required
+              >
+                <option value="">Select medication</option>
+                {prescriptions.map((prescription) => (
+                  <option key={prescription.id} value={prescription.id}>
+                    {prescription.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Dosage *</label>
+                <input
+                  type="text"
+                  value={prescriptionForm.dosage}
+                  onChange={(e) =>
+                    setPrescriptionForm({ ...prescriptionForm, dosage: e.target.value })
+                  }
+                  placeholder="e.g., 500mg"
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                />
+              </div>
+              <div>
+                <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Frequency *</label>
+                <input
+                  type="text"
+                  value={prescriptionForm.frequency}
+                  onChange={(e) =>
+                    setPrescriptionForm({ ...prescriptionForm, frequency: e.target.value })
+                  }
+                  placeholder="e.g., Twice daily"
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                />
+              </div>
+              <div>
+                <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Duration *</label>
+                <input
+                  type="text"
+                  value={prescriptionForm.duration}
+                  onChange={(e) =>
+                    setPrescriptionForm({ ...prescriptionForm, duration: e.target.value })
+                  }
+                  placeholder="e.g., 7 days"
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                />
+              </div>
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Reason for Prescription</label>
+              <textarea
+                value={prescriptionForm.reason}
+                onChange={(e) => setPrescriptionForm({ ...prescriptionForm, reason: e.target.value })}
+                placeholder="Describe why this medication is prescribed"
+                className="w-full px-4 py-2 border rounded-lg"
+                rows="3"
+              />
+            </div>
+            <button
+              type="submit"
+              style={{background: '#9333ea', color: 'white', padding: '6px 14px', borderRadius: '6px', border: 'none', cursor: 'pointer', fontSize: '14px', fontWeight: '600'}} onMouseEnter={(e) => e.currentTarget.style.background = '#7e22ce'} onMouseLeave={(e) => e.currentTarget.style.background = '#9333ea'}
+            >
+              Record Prescription
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Procedure Request Tab */}
+      {activeTab === 'procedures' && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 style={{ fontSize: '20px', fontWeight: 'normal', marginBottom: '16px' }}>Request Procedure</h3>
+          <form onSubmit={async (e) => {
+            e.preventDefault();
+            setError(null);
+
+            if (!procedureForm.procedureId) {
+              setError('Please select a procedure');
+              return;
+            }
+
+            try {
+              setLoading(true);
+              const doctorId = localStorage.getItem('doctorId') || 1;
+
+              const request = {
+                patientId: record.patientId,
+                doctorId: parseInt(doctorId),
+                procedureId: parseInt(procedureForm.procedureId),
+                procedureDate: procedureForm.procedureDate,
+                notes: procedureForm.notes,
+                diagnosisId: procedureForm.diagnosisId ? parseInt(procedureForm.diagnosisId) : null,
+              };
+
+              await procedureService.requestProcedure(request);
+
+              setSuccess('Procedure requested successfully');
+              setProcedureForm({
+                procedureId: '',
+                procedureDate: new Date().toISOString().split('T')[0],
+                notes: '',
+                diagnosisId: '',
+              });
+
+              setTimeout(() => setSuccess(null), 3000);
+            } catch (err) {
+              setError('Failed to request procedure: ' + (err.response?.data?.error || err.message));
+            } finally {
+              setLoading(false);
+            }
+          }} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Procedure *</label>
+                <select
+                  value={procedureForm.procedureId}
+                  onChange={(e) => setProcedureForm({ ...procedureForm, procedureId: e.target.value })}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                >
+                  <option value="">Select a procedure</option>
+                  {procedures.map((proc) => (
+                    <option key={proc.procedureId} value={proc.procedureId}>
+                      {proc.procedureType} (${proc.cost})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Procedure Date *</label>
+                <input
+                  type="date"
+                  value={procedureForm.procedureDate}
+                  onChange={(e) => setProcedureForm({ ...procedureForm, procedureDate: e.target.value })}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                />
+              </div>
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Related Diagnosis (Optional)</label>
+              <select
+                value={procedureForm.diagnosisId}
+                onChange={(e) => setProcedureForm({ ...procedureForm, diagnosisId: e.target.value })}
+                className="w-full px-4 py-2 border rounded-lg"
+              >
+                <option value="">Select diagnosis (optional)</option>
+                {diagnoses.map((diagnosis) => (
+                  <option key={diagnosis.id} value={diagnosis.id}>
+                    {diagnosis.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Notes</label>
+              <textarea
+                value={procedureForm.notes}
+                onChange={(e) => setProcedureForm({ ...procedureForm, notes: e.target.value })}
+                placeholder="Pre-procedure instructions or special notes"
+                className="w-full px-4 py-2 border rounded-lg"
+                rows="3"
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={loading}
+              style={{background: loading ? '#9ca3af' : '#9333ea', color: 'white', padding: '6px 14px', borderRadius: '6px', border: 'none', cursor: 'pointer', fontSize: '14px', fontWeight: '600'}} onMouseEnter={(e) => !loading && (e.currentTarget.style.background = '#7e22ce')} onMouseLeave={(e) => !loading && (e.currentTarget.style.background = '#9333ea')}
+            >
+              {loading ? 'Requesting...' : 'Request Procedure'}
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Lab Test Tab */}
+      {activeTab === 'lab-tests' && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 style={{ fontSize: '20px', fontWeight: 'normal', marginBottom: '16px' }}>Request Lab Test</h3>
+          <form onSubmit={async (e) => {
+            e.preventDefault();
+            setError(null);
+
+            if (!labTestForm.testId) {
+              setError('Please select a test');
+              return;
+            }
+
+            try {
+              setLoading(true);
+              const doctorId = localStorage.getItem('doctorId') || 1;
+
+              const request = {
+                patientId: record.patientId,
+                medicalRecordId: record.recordId,
+                doctorId: parseInt(doctorId),
+                testId: parseInt(labTestForm.testId),
+                testDate: labTestForm.testDate,
+                notes: labTestForm.notes,
+              };
+
+              await labService.requestLabTest(request);
+
+              setSuccess('Lab test requested successfully');
+              setLabTestForm({
+                testId: '',
+                testDate: new Date().toISOString().split('T')[0],
+                notes: '',
+              });
+
+              setTimeout(() => setSuccess(null), 3000);
+            } catch (err) {
+              setError('Failed to request lab test: ' + (err.response?.data?.error || err.message));
+            } finally {
+              setLoading(false);
+            }
+          }} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Test</label>
+                <select
+                  value={labTestForm.testId}
+                  onChange={(e) => setLabTestForm({ ...labTestForm, testId: e.target.value })}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                >
+                  <option value="">Select a test</option>
+                  {labTests.map((test) => (
+                    <option key={test.testId} value={test.testId}>
+                      {test.testName} (${test.cost})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Test Date</label>
+                <input
+                  type="date"
+                  value={labTestForm.testDate}
+                  onChange={(e) => setLabTestForm({ ...labTestForm, testDate: e.target.value })}
+                  className="w-full px-4 py-2 border rounded-lg"
+                />
+              </div>
+            </div>
+            <div>
+              <label style={{ fontWeight: 'normal' }} className="block text-sm mb-2">Notes</label>
+              <textarea
+                value={labTestForm.notes}
+                onChange={(e) => setLabTestForm({ ...labTestForm, notes: e.target.value })}
+                placeholder="Additional notes for the lab technician"
+                className="w-full px-4 py-2 border rounded-lg"
+                rows="3"
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={loading}
+              style={{background: loading ? '#9ca3af' : '#9333ea', color: 'white', padding: '6px 14px', borderRadius: '6px', border: 'none', cursor: 'pointer', fontSize: '14px', fontWeight: '600'}} onMouseEnter={(e) => !loading && (e.currentTarget.style.background = '#7e22ce')} onMouseLeave={(e) => !loading && (e.currentTarget.style.background = '#9333ea')}
+            >
+              {loading ? 'Requesting...' : 'Request Test'}
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MedicalRecordDetail;
Index: frontend/src/pages/medical-records/MedicalRecordList.js
===================================================================
--- frontend/src/pages/medical-records/MedicalRecordList.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
+++ frontend/src/pages/medical-records/MedicalRecordList.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
@@ -0,0 +1,358 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { patientService } from '../../services/patientService';
+import { medicalRecordService } from '../../services/medicalRecordService';
+import { labService } from '../../services/labService';
+import { procedureService } from '../../services/procedureService';
+import ErrorAlert from '../../components/ErrorAlert';
+
+function MedicalRecordList() {
+  const navigate = useNavigate();
+  const user = JSON.parse(localStorage.getItem('user') || '{}');
+  const isPatient = user.role === 'PATIENT';
+
+  const [patient, setPatient] = useState(null);
+  const [medicalData, setMedicalData] = useState(null);
+  const [labResults, setLabResults] = useState([]);
+  const [procedureResults, setProcedureResults] = useState([]);
+  const [error, setError] = useState(null);
+  const [embg, setEmbg] = useState(isPatient ? user.username : '');
+  const [searched, setSearched] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // Auto-load patient's own records if logged in as patient
+  React.useEffect(() => {
+    if (isPatient && user.username) {
+      handleAutoSearch();
+    }
+  }, []);
+
+  const handleAutoSearch = async () => {
+    const searchEmbg = user.username;
+    setError(null);
+    setLoading(true);
+
+    try {
+      // Search patient by EMBG
+      const patientResponse = await patientService.getPatientByEmbg(searchEmbg);
+      setPatient(patientResponse.data);
+
+      // Get medical records for this patient
+      const recordsResponse = await medicalRecordService.getMedicalRecordByPatientId(patientResponse.data.patientId);
+      setMedicalData(recordsResponse.data);
+
+      // Get lab results
+      try {
+        const labRes = await labService.getLabResultsForMedicalRecord(recordsResponse.data.recordId);
+        setLabResults(labRes.data || []);
+      } catch (err) {
+        setLabResults([]);
+      }
+
+      // Get procedure results
+      try {
+        const procRes = await procedureService.getProcedureResultsForMedicalRecord(recordsResponse.data.recordId);
+        setProcedureResults(procRes.data || []);
+      } catch (err) {
+        setProcedureResults([]);
+      }
+
+      setSearched(true);
+    } catch (err) {
+      setError(`Patient with EMBG ${searchEmbg} not found`);
+      setSearched(true);
+      setPatient(null);
+      setMedicalData(null);
+      setLabResults([]);
+      setProcedureResults([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      if (!embg.trim()) {
+        setError('Please enter an EMBG');
+        setLoading(false);
+        return;
+      }
+
+      // Search patient by EMBG
+      const patientResponse = await patientService.getPatientByEmbg(embg);
+      setPatient(patientResponse.data);
+
+      // Get medical records for this patient
+      const recordsResponse = await medicalRecordService.getMedicalRecordByPatientId(patientResponse.data.patientId);
+      setMedicalData(recordsResponse.data);
+
+      // Get lab results
+      try {
+        const labRes = await labService.getLabResultsForMedicalRecord(recordsResponse.data.recordId);
+        setLabResults(labRes.data || []);
+      } catch (err) {
+        setLabResults([]);
+      }
+
+      // Get procedure results
+      try {
+        const procRes = await procedureService.getProcedureResultsForMedicalRecord(recordsResponse.data.recordId);
+        setProcedureResults(procRes.data || []);
+      } catch (err) {
+        setProcedureResults([]);
+      }
+
+      setSearched(true);
+    } catch (err) {
+      setError(`Patient with EMBG ${embg} not found`);
+      setSearched(true);
+      setPatient(null);
+      setMedicalData(null);
+      setLabResults([]);
+      setProcedureResults([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-6" style={{ color: '#7c3aed' }}>Medical Records</h1>
+
+      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+
+      {/* Search Form - Only show for non-patients */}
+      {!isPatient && (
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
+          <h2 className="text-xl font-bold mb-4">Search Medical Records</h2>
+          <form onSubmit={handleSearch} className="space-y-4">
+            <div className="flex gap-4">
+              <div className="flex-1">
+                <label className="block text-sm font-semibold mb-2">Patient EMBG</label>
+                <input
+                  type="text"
+                  value={embg}
+                  onChange={(e) => setEmbg(e.target.value)}
+                  placeholder="e.g., 1402994123456"
+                  className="w-full px-4 py-2 border rounded-lg"
+                />
+              </div>
+              <div className="flex items-end">
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="bg-purple-600 text-white px-8 py-2 rounded-full hover:bg-purple-700 disabled:bg-gray-400"
+                >
+                  {loading ? 'Searching...' : 'Search'}
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+      )}
+
+      {/* Patient Info Message for Patients */}
+      {isPatient && searched && (
+        <div className="bg-blue-50 rounded-lg shadow p-6 mb-6">
+          <p className="text-sm text-gray-700">
+            <strong>Viewing your medical records</strong>
+          </p>
+        </div>
+      )}
+
+      {/* Patient Medical Records */}
+      {searched && patient && (
+        <div className="space-y-6">
+          {/* Patient Info */}
+          <div className="bg-white rounded-lg shadow p-6">
+            <div className="flex justify-between items-start mb-4">
+              <h2 className="text-2xl font-bold">{patient.firstName} {patient.lastName}</h2>
+              {!isPatient && (
+                <button
+                  onClick={() => navigate(`/medical-records/${patient.patientId}`)}
+                  className="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700"
+                >
+                  Add Medical Data
+                </button>
+              )}
+            </div>
+            <div className="grid grid-cols-4 gap-4">
+              <div>
+                <p className="text-sm text-gray-600">EMBG</p>
+                <p className="font-semibold">{patient.embg}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Email</p>
+                <p className="font-semibold">{patient.emailAddress}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Blood Type</p>
+                <p className="font-semibold">{patient.bloodType || 'N/A'}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Date of Birth</p>
+                <p className="font-semibold">{patient.dateOfBirth}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Medical Data Sections */}
+          {medicalData && (
+            <>
+              {/* Diagnoses */}
+              {medicalData.diagnoses && medicalData.diagnoses.length > 0 && (
+                <div className="bg-white rounded-lg shadow p-6">
+                  <h3 className="text-xl font-bold mb-4">Diagnoses</h3>
+                  <div className="space-y-3">
+                    {medicalData.diagnoses.map((diagnosis) => (
+                      <div key={diagnosis.diagnosisId} className="border-l-4 border-purple-500 pl-4 py-2">
+                        <p className="font-semibold text-lg">{diagnosis.name}</p>
+                        {diagnosis.description && (
+                          <p className="text-gray-600 text-sm">{diagnosis.description}</p>
+                        )}
+                        <p className="text-xs text-gray-500">By: {diagnosis.doctorName}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Symptoms */}
+              {medicalData.symptoms && medicalData.symptoms.length > 0 && (
+                <div className="bg-white rounded-lg shadow p-6">
+                  <h3 className="text-xl font-bold mb-4">Symptoms</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {medicalData.symptoms.map((symptom) => (
+                      <span key={symptom.symptomId} className="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">
+                        {symptom.symptomName}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Allergies */}
+              {medicalData.allergies && medicalData.allergies.length > 0 && (
+                <div className="bg-white rounded-lg shadow p-6">
+                  <h3 className="text-xl font-bold mb-4">Allergies</h3>
+                  <div className="space-y-3">
+                    {medicalData.allergies.map((allergy) => (
+                      <div key={allergy.allergyId} className="border-l-4 border-red-500 pl-4 py-2">
+                        <p className="font-semibold">{allergy.allergyName}</p>
+                        <p className="text-sm">
+                          <span className={`px-2 py-1 rounded text-white text-xs ${
+                            allergy.severity === 'CRITICAL' ? 'bg-red-600' :
+                            allergy.severity === 'HIGH' ? 'bg-red-500' :
+                            allergy.severity === 'MEDIUM' ? 'bg-yellow-500' :
+                            'bg-green-500'
+                          }`}>
+                            {allergy.severity} Severity
+                          </span>
+                        </p>
+                        {allergy.reaction && (
+                          <p className="text-gray-600 text-sm">Reaction: {allergy.reaction}</p>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Medical Reports */}
+              {medicalData.reports && medicalData.reports.length > 0 && (
+                <div className="bg-white rounded-lg shadow p-6">
+                  <h3 className="text-xl font-bold mb-4">Medical Reports</h3>
+                  <div className="space-y-3">
+                    {medicalData.reports.map((report) => (
+                      <div key={report.reportId} className="border-l-4 border-green-500 pl-4 py-2">
+                        <p className="font-semibold">Report from {report.doctorName}</p>
+                        <p className="text-gray-600 text-sm">{report.description}</p>
+                        <p className="text-xs text-gray-500">Date: {report.reportDate}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Lab Test Results */}
+              {labResults && labResults.length > 0 && (
+                <div className="bg-white rounded-lg shadow p-6">
+                  <h3 className="text-xl font-bold mb-4">Lab Test Results</h3>
+                  <div className="space-y-3">
+                    {labResults.map((result) => (
+                      <div key={result.labResultId} className="border-l-4 border-purple-500 pl-4 py-2">
+                        <p className="font-semibold">{result.testName}</p>
+                        <p className="text-gray-600 text-sm">{result.result}</p>
+                        {result.notes && (
+                          <p className="text-gray-600 text-sm">Notes: {result.notes}</p>
+                        )}
+                        <p className="text-xs text-gray-500">Date: {result.resultDate}</p>
+                        {result.technicianName && (
+                          <p className="text-xs text-gray-500">Technician: {result.technicianName}</p>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Procedure Results */}
+              {procedureResults && procedureResults.length > 0 && (
+                <div className="bg-white rounded-lg shadow p-6">
+                  <h3 className="text-xl font-bold mb-4">Procedure Results</h3>
+                  <div className="space-y-3">
+                    {procedureResults.map((result) => (
+                      <div key={result.procedureResultId} className="border-l-4 border-orange-500 pl-4 py-2">
+                        <p className="font-semibold">{result.procedureName}</p>
+                        <p className="text-gray-600 text-sm">{result.result}</p>
+                        {result.notes && (
+                          <p className="text-gray-600 text-sm">Notes: {result.notes}</p>
+                        )}
+                        <p className="text-xs text-gray-500">Date: {result.resultDate}</p>
+                        {result.doctorName && (
+                          <p className="text-xs text-gray-500">Doctor: {result.doctorName}</p>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* No data message */}
+              {(!medicalData.diagnoses || medicalData.diagnoses.length === 0) &&
+                (!medicalData.symptoms || medicalData.symptoms.length === 0) &&
+                (!medicalData.allergies || medicalData.allergies.length === 0) &&
+                (!medicalData.reports || medicalData.reports.length === 0) &&
+                (!labResults || labResults.length === 0) &&
+                (!procedureResults || procedureResults.length === 0) && (
+                <div className="bg-blue-50 rounded-lg p-6 text-center">
+                  <p className="text-gray-600">No medical records found for this patient</p>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* No search performed */}
+      {!searched && !isPatient && (
+        <div className="bg-gray-50 rounded-lg p-12 text-center">
+          <p className="text-gray-600 text-lg">Enter a patient EMBG to view their medical records</p>
+        </div>
+      )}
+
+      {/* Loading message for patients */}
+      {isPatient && loading && (
+        <div className="bg-gray-50 rounded-lg p-12 text-center">
+          <p className="text-gray-600 text-lg">Loading your medical records...</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MedicalRecordList;
Index: frontend/src/pages/medical-reports/MedicalReportList.js
===================================================================
--- frontend/src/pages/medical-reports/MedicalReportList.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
+++ frontend/src/pages/medical-reports/MedicalReportList.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
@@ -0,0 +1,451 @@
+import React, { useState, useEffect } from 'react';
+import { medicalReportService } from '../../services/medicalReportService';
+import { patientService } from '../../services/patientService';
+import { doctorService } from '../../services/doctorService';
+import { medicalRecordService } from '../../services/medicalRecordService';
+import { medicalItemsService } from '../../services/medicalItemsService';
+import ErrorAlert from '../../components/ErrorAlert';
+import SuccessAlert from '../../components/SuccessAlert';
+
+function MedicalReportList() {
+  const [reports, setReports] = useState([]);
+  const [doctors, setDoctors] = useState([]);
+  const [selectedReport, setSelectedReport] = useState(null);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  const [searchEmbg, setSearchEmbg] = useState('');
+  const [searchedPatient, setSearchedPatient] = useState(null);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const [availableDiagnoses, setAvailableDiagnoses] = useState([]);
+  const [availablePrescriptions, setAvailablePrescriptions] = useState([]);
+  const [availableAllergies, setAvailableAllergies] = useState([]);
+  const [availableSymptoms, setAvailableSymptoms] = useState([]);
+
+  const [selectedDiagnosisIds, setSelectedDiagnosisIds] = useState(new Set());
+  const [selectedPrescriptionIds, setSelectedPrescriptionIds] = useState(new Set());
+  const [selectedAllergyIds, setSelectedAllergyIds] = useState(new Set());
+  const [selectedSymptomIds, setSelectedSymptomIds] = useState(new Set());
+
+  const user = JSON.parse(localStorage.getItem('user') || '{}');
+  const isDoctor = user.role === 'DOCTOR';
+
+  const [formData, setFormData] = useState({
+    doctorId: isDoctor ? user.doctorId : '',
+    description: '',
+    reportDate: new Date().toISOString().split('T')[0],
+  });
+
+  useEffect(() => {
+    if (!isDoctor) {
+      loadDoctors();
+    }
+  }, [isDoctor]);
+
+  const loadDoctors = async () => {
+    try {
+      const res = await doctorService.getAllDoctors();
+      setDoctors(res.data);
+    } catch (err) {
+      console.error('Error loading doctors:', err);
+    }
+  };
+
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      if (!searchEmbg.trim()) {
+        setError('Please enter a patient EMBG');
+        setLoading(false);
+        return;
+      }
+
+      const patientRes = await patientService.getPatientByEmbg(searchEmbg);
+      setSearchedPatient(patientRes.data);
+
+      const medicalRecordRes = await medicalRecordService.getMedicalRecordByPatientId(patientRes.data.patientId);
+      const medicalRecordId = medicalRecordRes.data.recordId;
+      const patientId = patientRes.data.patientId;
+
+      const reportsRes = await medicalReportService.getReportsForMedicalRecord(medicalRecordId);
+      setReports(Array.isArray(reportsRes.data) ? reportsRes.data : [reportsRes.data]);
+
+      // Fetch available medical items
+      try {
+        const diagnosesRes = await medicalItemsService.getDiagnosesForPatient(patientId);
+        setAvailableDiagnoses(diagnosesRes.data || []);
+      } catch (err) {
+        console.error('Error loading diagnoses:', err);
+        setAvailableDiagnoses([]);
+      }
+
+      try {
+        const prescriptionsRes = await medicalItemsService.getPrescriptionsForMedicalRecord(medicalRecordId);
+        setAvailablePrescriptions(prescriptionsRes.data || []);
+      } catch (err) {
+        console.error('Error loading prescriptions:', err);
+        setAvailablePrescriptions([]);
+      }
+
+      try {
+        const allergiesRes = await medicalItemsService.getAllergiesForMedicalRecord(medicalRecordId);
+        setAvailableAllergies(allergiesRes.data || []);
+      } catch (err) {
+        console.error('Error loading allergies:', err);
+        setAvailableAllergies([]);
+      }
+
+      try {
+        const symptomsRes = await medicalItemsService.getSymptomsForMedicalRecord(medicalRecordId);
+        setAvailableSymptoms(symptomsRes.data || []);
+      } catch (err) {
+        console.error('Error loading symptoms:', err);
+        setAvailableSymptoms([]);
+      }
+
+      setSelectedReport(null);
+      setSelectedDiagnosisIds(new Set());
+      setSelectedPrescriptionIds(new Set());
+      setSelectedAllergyIds(new Set());
+      setSelectedSymptomIds(new Set());
+    } catch (err) {
+      setError('Patient not found or no reports available');
+      setReports([]);
+      setSearchedPatient(null);
+      setAvailableDiagnoses([]);
+      setAvailablePrescriptions([]);
+      setAvailableAllergies([]);
+      setAvailableSymptoms([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateReport = async (e) => {
+    e.preventDefault();
+    setError(null);
+
+    try {
+      if (!formData.doctorId || !formData.description || !formData.reportDate) {
+        setError('Please fill in all required fields');
+        return;
+      }
+
+      if (!searchedPatient) {
+        setError('Please search for a patient first');
+        return;
+      }
+
+      const medicalRecordRes = await medicalRecordService.getMedicalRecordByPatientId(searchedPatient.patientId);
+
+      const reportData = {
+        doctorId: parseInt(formData.doctorId),
+        medicalRecordId: medicalRecordRes.data.recordId,
+        description: formData.description,
+        reportDate: formData.reportDate,
+        selectedDiagnosisIds: Array.from(selectedDiagnosisIds),
+        selectedPrescriptionIds: Array.from(selectedPrescriptionIds),
+        selectedAllergyIds: Array.from(selectedAllergyIds),
+        selectedSymptomIds: Array.from(selectedSymptomIds),
+      };
+
+      const newReport = await medicalReportService.createReport(reportData);
+      setSuccess('Medical report created successfully!');
+      setReports([...reports, newReport.data]);
+      setFormData({
+        doctorId: '',
+        description: '',
+        reportDate: new Date().toISOString().split('T')[0],
+      });
+      setShowCreateForm(false);
+      setSelectedReport(newReport.data);
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to create medical report');
+    }
+  };
+
+  const handleFormChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const toggleDiagnosisSelection = (diagnosisId) => {
+    setSelectedDiagnosisIds(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(diagnosisId)) {
+        newSet.delete(diagnosisId);
+      } else {
+        newSet.add(diagnosisId);
+      }
+      return newSet;
+    });
+  };
+
+  const togglePrescriptionSelection = (prescriptionId) => {
+    setSelectedPrescriptionIds(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(prescriptionId)) {
+        newSet.delete(prescriptionId);
+      } else {
+        newSet.add(prescriptionId);
+      }
+      return newSet;
+    });
+  };
+
+  const toggleAllergySelection = (allergyId) => {
+    setSelectedAllergyIds(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(allergyId)) {
+        newSet.delete(allergyId);
+      } else {
+        newSet.add(allergyId);
+      }
+      return newSet;
+    });
+  };
+
+  const toggleSymptomSelection = (symptomId) => {
+    setSelectedSymptomIds(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(symptomId)) {
+        newSet.delete(symptomId);
+      } else {
+        newSet.add(symptomId);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-6" style={{ color: '#7c3aed' }}>Medical Reports</h1>
+
+      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+      {success && <SuccessAlert message={success} onClose={() => setSuccess(null)} />}
+
+      {/* Search Patient Form */}
+      <div className="bg-white rounded-lg shadow p-6 mb-6">
+        <h2 className="text-xl font-bold mb-4">Search Patient by EMBG</h2>
+        <form onSubmit={handleSearch} className="flex gap-4">
+          <input
+            type="text"
+            value={searchEmbg}
+            onChange={(e) => setSearchEmbg(e.target.value)}
+            placeholder="Enter patient EMBG"
+            className="flex-1 px-4 py-2 border rounded-lg"
+          />
+          <button
+            type="submit"
+            disabled={loading}
+            className="bg-purple-600 text-white px-8 py-2 rounded-full hover:bg-purple-700 disabled:bg-gray-400"
+          >
+            {loading ? 'Searching...' : 'Search'}
+          </button>
+        </form>
+      </div>
+
+      {/* Create Report Button */}
+      {searchedPatient && (
+        <div className="mb-6">
+          <button
+            onClick={() => setShowCreateForm(!showCreateForm)}
+            className="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700"
+          >
+            {showCreateForm ? 'Cancel' : 'Create New Report'}
+          </button>
+        </div>
+      )}
+
+      {/* Create Report Form */}
+      {showCreateForm && searchedPatient && (
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
+          <h2 className="text-xl font-bold mb-4">Create Medical Report</h2>
+          <p className="mb-4 text-gray-600">
+            Patient: {searchedPatient.firstName} {searchedPatient.lastName} ({searchedPatient.embg})
+          </p>
+          <form onSubmit={handleCreateReport} className="space-y-4">
+            {isDoctor ? (
+              <div>
+                <label className="block text-sm font-semibold mb-2">Doctor</label>
+                <p className="px-4 py-2 bg-gray-100 rounded-lg text-gray-700">
+                  Dr. {user.firstName} {user.lastName}
+                </p>
+              </div>
+            ) : (
+              <div>
+                <label className="block text-sm font-semibold mb-2">Doctor *</label>
+                <select
+                  name="doctorId"
+                  value={formData.doctorId}
+                  onChange={handleFormChange}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                >
+                  <option value="">Select doctor</option>
+                  {doctors.map(doctor => (
+                    <option key={doctor.doctorId} value={doctor.doctorId}>
+                      Dr. {doctor.firstName} {doctor.lastName}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            <div>
+              <label className="block text-sm font-semibold mb-2">Report Date *</label>
+              <input
+                type="date"
+                name="reportDate"
+                value={formData.reportDate}
+                onChange={handleFormChange}
+                className="w-full px-4 py-2 border rounded-lg"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold mb-2">Report Description *</label>
+              <textarea
+                name="description"
+                value={formData.description}
+                onChange={handleFormChange}
+                placeholder="Describe the patient's visit, findings, and recommendations..."
+                className="w-full px-4 py-2 border rounded-lg"
+                rows="6"
+                required
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="bg-purple-600 text-white px-6 py-2 rounded hover:bg-purple-700"
+            >
+              Create Report
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Reports List */}
+      {reports.length > 0 && (
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Reports for {searchedPatient?.firstName} {searchedPatient?.lastName}</h2>
+          {reports.map(report => (
+            <div
+              key={report.reportId}
+              className="bg-white rounded-lg shadow p-6 cursor-pointer hover:shadow-lg transition"
+              onClick={() => setSelectedReport(selectedReport?.reportId === report.reportId ? null : report)}
+            >
+              <div className="flex justify-between items-start">
+                <div>
+                  <p className="text-sm text-gray-600">Date: {report.reportDate}</p>
+                  <p className="text-sm text-gray-600">Doctor: {report.doctorName}</p>
+                  <p className="mt-2 line-clamp-2">{report.reportDescription}</p>
+                </div>
+                <button
+                  className="text-purple-600 hover:text-purple-800 text-sm font-normal"
+                >
+                  {selectedReport?.reportId === report.reportId ? 'Hide' : 'View'} Details
+                </button>
+              </div>
+
+              {selectedReport?.reportId === report.reportId && (
+                <div className="mt-6 pt-6 border-t space-y-6">
+                  {/* Report Description */}
+                  <div>
+                    <h4 className="font-bold mb-2">Report Description</h4>
+                    <p className="text-gray-700 whitespace-pre-wrap">{report.reportDescription}</p>
+                  </div>
+
+                  {/* Diagnoses */}
+                  {report.diagnoses && report.diagnoses.length > 0 && (
+                    <div>
+                      <h4 className="font-bold mb-2">Diagnoses</h4>
+                      <ul className="space-y-2">
+                        {report.diagnoses.map((diagnosis, idx) => (
+                          <li key={idx} className="bg-blue-50 p-3 rounded">
+                            <p className="font-semibold">{diagnosis.name}</p>
+                            <p className="text-sm text-gray-600">{diagnosis.description}</p>
+                            <p className="text-xs text-gray-500">By: {diagnosis.doctorName}</p>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+
+                  {/* Prescriptions */}
+                  {report.prescriptions && report.prescriptions.length > 0 && (
+                    <div>
+                      <h4 className="font-bold mb-2">Prescriptions</h4>
+                      <ul className="space-y-2">
+                        {report.prescriptions.map((prescription, idx) => (
+                          <li key={idx} className="bg-green-50 p-3 rounded">
+                            <p className="font-semibold">{prescription.medicationName}</p>
+                            <p className="text-sm text-gray-600">
+                              {prescription.dosage} - {prescription.frequency} for {prescription.duration}
+                            </p>
+                            {prescription.notes && (
+                              <p className="text-sm text-gray-600">Notes: {prescription.notes}</p>
+                            )}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+
+                  {/* Allergies */}
+                  {report.allergies && report.allergies.length > 0 && (
+                    <div>
+                      <h4 className="font-bold mb-2">Allergies</h4>
+                      <ul className="space-y-2">
+                        {report.allergies.map((allergy, idx) => (
+                          <li key={idx} className="bg-red-50 p-3 rounded">
+                            <p className="font-semibold">{allergy.allergyName}</p>
+                            <p className="text-sm text-gray-600">Reaction: {allergy.reaction}</p>
+                            <p className="text-xs text-red-600">Severity: {allergy.severity}</p>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+
+                  {/* Symptoms */}
+                  {report.symptoms && report.symptoms.length > 0 && (
+                    <div>
+                      <h4 className="font-bold mb-2">Symptoms</h4>
+                      <ul className="space-y-2">
+                        {report.symptoms.map((symptom, idx) => (
+                          <li key={idx} className="bg-yellow-50 p-3 rounded">
+                            <p className="font-semibold">{symptom.symptomName}</p>
+                            <p className="text-sm text-gray-600">{symptom.description}</p>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* No Reports Message */}
+      {searchedPatient && reports.length === 0 && (
+        <div className="bg-blue-50 rounded-lg p-6 text-center">
+          <p className="text-gray-600">No medical reports found for this patient</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MedicalReportList;
Index: frontend/src/pages/referrals/ReferralList.js
===================================================================
--- frontend/src/pages/referrals/ReferralList.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
+++ frontend/src/pages/referrals/ReferralList.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
@@ -0,0 +1,389 @@
+import React, { useState, useEffect } from 'react';
+import { referralService } from '../../services/referralService';
+import { patientService } from '../../services/patientService';
+import { doctorService } from '../../services/doctorService';
+import { medicalRecordService } from '../../services/medicalRecordService';
+import ErrorAlert from '../../components/ErrorAlert';
+import SuccessAlert from '../../components/SuccessAlert';
+
+function ReferralList() {
+  const user = JSON.parse(localStorage.getItem('user') || '{}');
+  const isDoctor = user.role === 'DOCTOR';
+
+  const [referrals, setReferrals] = useState([]);
+  const [doctors, setDoctors] = useState([]);
+  const [patients, setPatients] = useState([]);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  const [searchType, setSearchType] = useState('patient'); // 'patient', 'fromDoctor', 'toDoctor'
+  const [searchValue, setSearchValue] = useState('');
+  const [searched, setSearched] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // For creating referral
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const getDefaultAppointmentDate = () => {
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    return tomorrow.toISOString().split('T')[0];
+  };
+  const [formData, setFormData] = useState({
+    fromDoctorId: isDoctor ? (user.doctorId || '') : '',
+    toDoctorId: '',
+    patientId: '',
+    recordId: '',
+    reason: '',
+    referralDate: new Date().toISOString().split('T')[0],
+    appointmentDate: getDefaultAppointmentDate(),
+    appointmentTime: '14:00',
+  });
+
+  useEffect(() => {
+    loadDoctorsAndPatients();
+  }, []);
+
+  const loadDoctorsAndPatients = async () => {
+    try {
+      const [doctorsRes, patientsRes] = await Promise.all([
+        doctorService.getAllDoctors(),
+        patientService.getAllPatients(),
+      ]);
+      setDoctors(doctorsRes.data);
+      setPatients(patientsRes.data);
+    } catch (err) {
+      console.error('Error loading data:', err);
+    }
+  };
+
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      if (!searchValue.trim()) {
+        setError('Please enter a search value');
+        setLoading(false);
+        return;
+      }
+
+      let response;
+      if (searchType === 'patient') {
+        response = await referralService.getReferralsByPatient(searchValue);
+      } else if (searchType === 'fromDoctor') {
+        response = await referralService.getReferralsByFromDoctor(searchValue);
+      } else {
+        response = await referralService.getReferralsByToDoctor(searchValue);
+      }
+
+      setReferrals(Array.isArray(response.data) ? response.data : [response.data]);
+      setSearched(true);
+    } catch (err) {
+      setError('No referrals found');
+      setReferrals([]);
+      setSearched(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateReferral = async (e) => {
+    e.preventDefault();
+    setError(null);
+
+    try {
+      if (!formData.fromDoctorId || !formData.toDoctorId || !formData.patientId || !formData.reason || !formData.appointmentDate || !formData.appointmentTime) {
+        setError('Please fill in all required fields');
+        return;
+      }
+
+      // Get patient's medical record ID
+      const patientId = parseInt(formData.patientId);
+      const medicalRecordRes = await medicalRecordService.getMedicalRecordByPatientId(patientId);
+      const recordId = medicalRecordRes.data.recordId;
+
+      const referralData = {
+        medicalRecordId: recordId,
+        fromDoctorId: parseInt(formData.fromDoctorId),
+        toDoctorId: parseInt(formData.toDoctorId),
+        reason: formData.reason,
+        referralDate: formData.referralDate,
+        appointmentDate: formData.appointmentDate,
+        appointmentTime: formData.appointmentTime + ':00',
+      };
+
+      await referralService.createReferral(referralData);
+      setSuccess('Referral created successfully!');
+      setFormData({
+        fromDoctorId: '',
+        toDoctorId: '',
+        patientId: '',
+        recordId: '',
+        reason: '',
+        referralDate: new Date().toISOString().split('T')[0],
+        appointmentDate: getDefaultAppointmentDate(),
+        appointmentTime: '14:00',
+      });
+      setShowCreateForm(false);
+
+      // Refresh referrals list
+      setTimeout(() => {
+        setSearched(false);
+        setSearchValue('');
+      }, 1500);
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to create referral');
+    }
+  };
+
+  const handleFormChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-6" style={{ color: '#7c3aed' }}>Doctor Referrals</h1>
+
+      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+      {success && <SuccessAlert message={success} onClose={() => setSuccess(null)} />}
+
+      {/* Create Referral Button */}
+      <div className="mb-6">
+        <button
+          onClick={() => setShowCreateForm(!showCreateForm)}
+          style={{
+            background: '#bfdbfe',
+            color: '#1e1035',
+            padding: '8px 24px',
+            borderRadius: '6px',
+            border: 'none',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '400'
+          }}
+          onMouseEnter={(e) => e.currentTarget.style.background = '#93c5fd'}
+          onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}
+        >
+          {showCreateForm ? 'Cancel' : 'Create New Referral'}
+        </button>
+      </div>
+
+      {/* Create Referral Form */}
+      {showCreateForm && (
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
+          <h2 className="text-xl font-bold mb-4">Create New Referral</h2>
+          <form onSubmit={handleCreateReferral} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-semibold mb-2">From Doctor *</label>
+                {isDoctor ? (
+                  <p className="px-4 py-2 bg-gray-100 rounded-lg text-gray-700">
+                    Dr. {user.firstName} {user.lastName}
+                  </p>
+                ) : (
+                  <select
+                    name="fromDoctorId"
+                    value={formData.fromDoctorId}
+                    onChange={handleFormChange}
+                    className="w-full px-4 py-2 border rounded-lg"
+                    required
+                  >
+                    <option value="">Select referring doctor</option>
+                    {doctors.map(doctor => (
+                      <option key={doctor.doctorId} value={doctor.doctorId}>
+                        Dr. {doctor.firstName} {doctor.lastName} ({doctor.specialization.specializationName})
+                      </option>
+                    ))}
+                  </select>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2">To Doctor *</label>
+                <select
+                  name="toDoctorId"
+                  value={formData.toDoctorId}
+                  onChange={handleFormChange}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                >
+                  <option value="">Select receiving doctor</option>
+                  {doctors.map(doctor => (
+                    <option key={doctor.doctorId} value={doctor.doctorId}>
+                      Dr. {doctor.firstName} {doctor.lastName} ({doctor.specialization.specializationName})
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2">Patient *</label>
+                <select
+                  name="patientId"
+                  value={formData.patientId}
+                  onChange={handleFormChange}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                >
+                  <option value="">Select patient</option>
+                  {patients.map(patient => (
+                    <option key={patient.patientId} value={patient.patientId}>
+                      {patient.firstName} {patient.lastName} ({patient.embg})
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2">Referral Date *</label>
+                <input
+                  type="date"
+                  name="referralDate"
+                  value={formData.referralDate}
+                  onChange={handleFormChange}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2">Appointment Date *</label>
+                <input
+                  type="date"
+                  name="appointmentDate"
+                  value={formData.appointmentDate}
+                  onChange={handleFormChange}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2">Appointment Time *</label>
+                <input
+                  type="time"
+                  name="appointmentTime"
+                  value={formData.appointmentTime}
+                  onChange={handleFormChange}
+                  className="w-full px-4 py-2 border rounded-lg"
+                  required
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold mb-2">Reason for Referral *</label>
+              <textarea
+                name="reason"
+                value={formData.reason}
+                onChange={handleFormChange}
+                placeholder="e.g., Requires specialist evaluation for suspected cardiac condition"
+                className="w-full px-4 py-2 border rounded-lg"
+                rows="3"
+                required
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="bg-purple-600 text-white px-6 py-2 rounded hover:bg-purple-700"
+            >
+              Create Referral
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Search Form */}
+      <div className="bg-white rounded-lg shadow p-6 mb-6">
+        <h2 className="text-xl font-bold mb-4">Search Referrals</h2>
+        <form onSubmit={handleSearch} className="space-y-4">
+          <div className="flex gap-4">
+            <div className="flex-1">
+              <label className="block text-sm font-semibold mb-2">Search By</label>
+              <select
+                value={searchType}
+                onChange={(e) => {
+                  setSearchType(e.target.value);
+                  setSearchValue('');
+                  setSearched(false);
+                }}
+                className="w-full px-4 py-2 border rounded-lg"
+              >
+                <option value="patient">Patient ID</option>
+                <option value="fromDoctor">Referring Doctor ID</option>
+                <option value="toDoctor">Receiving Doctor ID</option>
+              </select>
+            </div>
+
+            <div className="flex-1">
+              <label className="block text-sm font-semibold mb-2">Enter ID</label>
+              <input
+                type="number"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                placeholder="Enter ID"
+                className="w-full px-4 py-2 border rounded-lg"
+              />
+            </div>
+
+            <div className="flex items-end">
+              <button
+                type="submit"
+                disabled={loading}
+                className="bg-purple-600 text-white px-8 py-2 rounded-full hover:bg-purple-700 disabled:bg-gray-400"
+              >
+                {loading ? 'Searching...' : 'Search'}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      {/* Referrals List */}
+      {searched && referrals.length > 0 && (
+        <div className="bg-white rounded-lg shadow overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-gray-100">
+              <tr>
+                <th className="px-6 py-3 text-left text-sm font-semibold">From Doctor</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">To Doctor</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Patient</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Reason</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Referral Date</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Appointment Date</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Appointment Time</th>
+              </tr>
+            </thead>
+            <tbody>
+              {referrals.map(referral => (
+                <tr key={referral.referralId} className="border-t hover:bg-gray-50">
+                  <td className="px-6 py-3">{referral.fromDoctorName}</td>
+                  <td className="px-6 py-3">{referral.toDoctorName}</td>
+                  <td className="px-6 py-3">{referral.patientName}</td>
+                  <td className="px-6 py-3">{referral.reason}</td>
+                  <td className="px-6 py-3">{referral.referralDate}</td>
+                  <td className="px-6 py-3">{referral.appointmentDate}</td>
+                  <td className="px-6 py-3">{referral.appointmentTime}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* No results message */}
+      {searched && referrals.length === 0 && (
+        <div className="bg-blue-50 rounded-lg p-6 text-center">
+          <p className="text-gray-600">No referrals found</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ReferralList;
Index: frontend/src/services/api.js
===================================================================
--- frontend/src/services/api.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
+++ frontend/src/services/api.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
@@ -0,0 +1,33 @@
+import axios from 'axios';
+
+const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:8080/api';
+
+const apiClient = axios.create({
+  baseURL: API_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor to add JWT token
+apiClient.interceptors.request.use(
+  config => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  error => Promise.reject(error)
+);
+
+// Error handling interceptor
+apiClient.interceptors.response.use(
+  response => response,
+  error => {
+    console.error('API Error:', error.response?.data || error.message);
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;
Index: frontend/src/services/medicalRecordService.js
===================================================================
--- frontend/src/services/medicalRecordService.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
+++ frontend/src/services/medicalRecordService.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
@@ -0,0 +1,15 @@
+import apiClient from './api';
+
+const ENDPOINT = '/medical-records';
+
+export const medicalRecordService = {
+  getMedicalRecordById: (id) => apiClient.get(`${ENDPOINT}/${id}`),
+
+  getMedicalRecordByPatientId: (patientId) => apiClient.get(`${ENDPOINT}/patient/${patientId}`),
+
+  searchMedicalRecords: (params) => apiClient.get(`${ENDPOINT}/search`, { params }),
+
+  getAllergiesForMedicalRecord: (medicalRecordId) => apiClient.get(`${ENDPOINT}/${medicalRecordId}/allergies`),
+
+  getSymptomsForMedicalRecord: (medicalRecordId) => apiClient.get(`${ENDPOINT}/${medicalRecordId}/symptoms`),
+};
Index: frontend/src/services/medicalReportService.js
===================================================================
--- frontend/src/services/medicalReportService.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
+++ frontend/src/services/medicalReportService.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
@@ -0,0 +1,11 @@
+import apiClient from './api';
+
+const ENDPOINT = '/medical-reports';
+
+export const medicalReportService = {
+  createReport: (reportData) => apiClient.post(ENDPOINT, reportData),
+  getReportById: (reportId) => apiClient.get(`${ENDPOINT}/${reportId}`),
+  getReportsForMedicalRecord: (medicalRecordId) => apiClient.get(`${ENDPOINT}/record/${medicalRecordId}`),
+  updateReport: (reportId, description) => apiClient.put(`${ENDPOINT}/${reportId}`, { description }),
+  deleteReport: (reportId) => apiClient.delete(`${ENDPOINT}/${reportId}`),
+};
Index: frontend/src/services/referralService.js
===================================================================
--- frontend/src/services/referralService.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
+++ frontend/src/services/referralService.js	(revision d30d82041a2812a401511ea2aadede496a8eeb01)
@@ -0,0 +1,25 @@
+import apiClient from './api';
+
+const ENDPOINT = '/referrals';
+
+export const referralService = {
+  createReferral: (referralData) => {
+    return apiClient.post(ENDPOINT, {
+      medicalRecordId: referralData.medicalRecordId,
+      fromDoctorId: referralData.fromDoctorId,
+      toDoctorId: referralData.toDoctorId,
+      reason: referralData.reason,
+      referralDate: referralData.referralDate,
+      appointmentDate: referralData.appointmentDate,
+      appointmentTime: referralData.appointmentTime,
+    });
+  },
+
+  getReferralById: (id) => apiClient.get(`${ENDPOINT}/${id}`),
+
+  getReferralsByFromDoctor: (doctorId) => apiClient.get(`${ENDPOINT}/from-doctor/${doctorId}`),
+
+  getReferralsByToDoctor: (doctorId) => apiClient.get(`${ENDPOINT}/to-doctor/${doctorId}`),
+
+  getReferralsByPatient: (patientId) => apiClient.get(`${ENDPOINT}/patient/${patientId}`),
+};