Index: frontend/src/pages/appointments/AppointmentList.js
===================================================================
--- frontend/src/pages/appointments/AppointmentList.js	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
+++ frontend/src/pages/appointments/AppointmentList.js	(revision 6c00695efaeff79d43ec7934ae4e04fac7bd67a0)
@@ -47,5 +47,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 +58,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,37 +90,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' && (
-                    <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>
+            </tbody>
+          </table>
+        </div>
       </div>
-    </div>
   );
 }