Index: frontend/src/pages/appointments/AppointmentForm.js
===================================================================
--- frontend/src/pages/appointments/AppointmentForm.js	(revision a64c772a36870a2e14746a963e20b1e6ec1e1538)
+++ frontend/src/pages/appointments/AppointmentForm.js	(revision cdcff72e9765342b84a5e4b5d98ca5cb050a5500)
@@ -26,21 +26,20 @@
 
   useEffect(() => {
+    const fetchData = async () => {
+      try {
+        if (!isPatient) {
+          const patientsRes = await patientService.getAllPatients();
+          setPatients(patientsRes.data);
+        }
+
+        const doctorsRes = await doctorService.getAllDoctors();
+        setDoctors(doctorsRes.data);
+      } catch (err) {
+        setError('Failed to fetch doctors');
+      }
+    };
+
     fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      // For patients, we don't need to fetch all patients
-      if (!isPatient) {
-        const patientsRes = await patientService.getAllPatients();
-        setPatients(patientsRes.data);
-      }
-
-      const doctorsRes = await doctorService.getAllDoctors();
-      setDoctors(doctorsRes.data);
-    } catch (err) {
-      setError('Failed to fetch doctors');
-    }
-  };
+  }, [isPatient]);
 
   const handleChange = (e) => {
Index: frontend/src/pages/appointments/AppointmentList.js
===================================================================
--- frontend/src/pages/appointments/AppointmentList.js	(revision a64c772a36870a2e14746a963e20b1e6ec1e1538)
+++ frontend/src/pages/appointments/AppointmentList.js	(revision cdcff72e9765342b84a5e4b5d98ca5cb050a5500)
@@ -15,30 +15,26 @@
 
   useEffect(() => {
-    fetchAppointments();
+    const fetchAppointmentsData = async () => {
+      try {
+        setLoading(true);
+        let response;
+        if (patientId) {
+          response = await appointmentService.getAppointmentsForPatient(patientId);
+        } else if (doctorId) {
+          response = await appointmentService.getAppointmentsForDoctor(doctorId);
+        } else {
+          response = await appointmentService.getAllAppointments();
+        }
+        setAppointments(response.data || []);
+      } catch (err) {
+        setError('Failed to fetch appointments');
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAppointmentsData();
   }, [doctorId, patientId]);
-
-  const fetchAppointments = async () => {
-    try {
-      setLoading(true);
-      let response;
-      if (patientId) {
-        response = await appointmentService.getAppointmentsForPatient(patientId);
-      } else if (doctorId) {
-        response = await appointmentService.getAppointmentsForDoctor(doctorId);
-      } else if (user.role === 'PATIENT') {
-        response = await appointmentService.getAppointmentsForPatient(user.patientId);
-      } else if (user.role === 'DOCTOR') {
-        response = await appointmentService.getAppointmentsForDoctor(user.doctorId);
-      } else {
-        response = await appointmentService.getAllAppointments();
-      }
-      setAppointments(response.data);
-    } catch (err) {
-      setError('Failed to fetch appointments');
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
 
   const handleCancelAppointment = async (id) => {
@@ -47,5 +43,5 @@
         await appointmentService.cancelAppointment(id);
         setAppointments(appointments.map(apt =>
-            apt.appointmentId === id ? { ...apt, status: 'CANCELLED' } : apt
+          apt.appointmentId === id ? { ...apt, status: 'CANCELLED' } : apt
         ));
       } catch (err) {
@@ -58,28 +54,28 @@
 
   return (
-      <div>
-        <div className="flex justify-between items-center mb-6">
-          <h1 className="text-3xl font-bold" style={{ color: '#7c3aed' }}>
-            {patientId ? 'Patient Appointments' : doctorId ? 'My Appointments' : 'All Appointments'}
-          </h1>
-          <Link to="/appointments/new" style={{
-            display: 'inline-block',
-            background: '#bfdbfe',
-            color: '#1e1035',
-            padding: '8px 16px',
-            borderRadius: '6px',
-            textDecoration: 'none',
-            fontSize: '14px',
-            fontWeight: '400'
-          }} onMouseEnter={(e) => e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}>
-            New Appointment
-          </Link>
-        </div>
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold" style={{ color: '#7c3aed' }}>
+          {patientId ? 'Patient Appointments' : doctorId ? 'My Appointments' : 'All Appointments'}
+        </h1>
+        <Link to="/appointments/new" style={{
+          display: 'inline-block',
+          background: '#bfdbfe',
+          color: '#1e1035',
+          padding: '8px 16px',
+          borderRadius: '6px',
+          textDecoration: 'none',
+          fontSize: '14px',
+          fontWeight: '400'
+        }} onMouseEnter={(e) => e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}>
+          New Appointment
+        </Link>
+      </div>
 
-        {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
 
-        <div className="bg-white rounded-lg shadow overflow-hidden">
-          <table className="w-full">
-            <thead className="bg-gray-100">
+      <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">Patient</th>
@@ -90,39 +86,39 @@
               <th className="px-6 py-3 text-left text-sm font-semibold">Actions</th>
             </tr>
-            </thead>
-            <tbody>
+          </thead>
+          <tbody>
             {appointments.map(appointment => (
-                <tr key={appointment.appointmentId} className="border-t hover:bg-gray-50">
-                  <td className="px-6 py-3">{appointment.patient?.firstName} {appointment.patient?.lastName}</td>
-                  <td className="px-6 py-3">Dr. {appointment.doctor?.firstName} {appointment.doctor?.lastName}</td>
-                  <td className="px-6 py-3">{appointment.appointmentDate}</td>
-                  <td className="px-6 py-3">{appointment.appointmentTime}</td>
-                  <td className="px-6 py-3">
+              <tr key={appointment.appointmentId} className="border-t hover:bg-gray-50">
+                <td className="px-6 py-3">{appointment.patient?.firstName} {appointment.patient?.lastName}</td>
+                <td className="px-6 py-3">Dr. {appointment.doctor?.firstName} {appointment.doctor?.lastName}</td>
+                <td className="px-6 py-3">{appointment.appointmentDate}</td>
+                <td className="px-6 py-3">{appointment.appointmentTime}</td>
+                <td className="px-6 py-3">
                   <span className={`px-3 py-1 rounded text-sm font-semibold ${
-                      appointment.status === 'SCHEDULED' ? 'bg-purple-100 text-purple-800' :
-                          appointment.status === 'COMPLETED' ? 'bg-green-100 text-green-800' :
-                              'bg-red-100 text-red-800'
+                    appointment.status === 'SCHEDULED' ? 'bg-purple-100 text-purple-800' :
+                    appointment.status === 'COMPLETED' ? 'bg-green-100 text-green-800' :
+                    'bg-red-100 text-red-800'
                   }`}>
                     {appointment.status}
                   </span>
-                  </td>
-                  <td className="px-6 py-3">
-                    {appointment.status === 'SCHEDULED' && (
-                        (user.role === 'DOCTOR' && appointment.doctor?.doctorId !== user.doctorId) ? null : (
-                            <button
-                                onClick={() => handleCancelAppointment(appointment.appointmentId)}
-                                className="text-red-600 hover:underline px-3 py-2 text-sm font-medium"
-                            >
-                              Cancel
-                            </button>
-                        )
-                    )}
-                  </td>
-                </tr>
+                </td>
+                <td className="px-6 py-3">
+                  {appointment.status === 'SCHEDULED' && (
+                    (user.role === 'DOCTOR' && appointment.doctor?.doctorId !== user.doctorId) ? null : (
+                      <button
+                        onClick={() => handleCancelAppointment(appointment.appointmentId)}
+                        className="text-red-600 hover:underline px-3 py-2 text-sm font-medium"
+                      >
+                        Cancel
+                      </button>
+                    )
+                  )}
+                </td>
+              </tr>
             ))}
-            </tbody>
-          </table>
-        </div>
+          </tbody>
+        </table>
       </div>
+    </div>
   );
 }