diff --git a/src/api.js b/src/api.js
index 0dc6500..9900b45 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1 +1 @@
-export const API_BASE_URL = import.meta.env.VITE_API_URL;
+export const API_BASE_URL = "http://localhost:8080/api";
\ No newline at end of file
diff --git a/src/api/api.js b/src/api/api.js
index fdea9c1..d4ba3c0 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -1,10 +1,9 @@
 import axios from "axios";
 
 const API = axios.create({
-  baseURL: `${import.meta.env.VITE_API_URL}/api`,
+  baseURL: "http://localhost:8080/api",
 });
 
-
 /* =========================
    Attach JWT token (if exists)
 ========================= */
@@ -48,6 +47,14 @@ export const getAvailableSlots = async (doctorId, date) => {
   return res.data;
 };
 
+export const getAllSlots = async (doctorId, date) => {
+  const res = await API.get(`/availability/doctor/${doctorId}/all`, {
+    params: { date },
+  });
+  return res.data;
+};
+
+
 export const saveAvailability = async ({ doctorId, date, times }) => {
   const res = await API.post("/availability", {
     doctorId,
@@ -71,49 +78,65 @@ export const deleteAvailabilitySlot = async (id) => {
    APPOINTMENTS
 ========================= */
 export const bookAppointment = async (data) => {
-  // POST /api/appointments/book
   const res = await API.post("/appointments/book", data);
   return res.data;
 };
 
 export const getAppointmentTypes = async () => {
-  // GET /api/appointment-types
   const res = await API.get("/appointment-types");
   return res.data;
 };
 
-// This matches your current backend controller:
-// GET /api/appointments/user/success
+// GET appointments for logged-in patient
 export const getUserAppointments = async () => {
   try {
-    const res = await API.get("/appointments/user/success");
-    return res.data;
+    const response = await API.get("/appointments/user/success");
+    return response.data;
   } catch (err) {
-    console.error("Error fetching appointments:", err);
-    return [];
+    console.error("Failed to fetch user appointments:", err);
+    throw err;
   }
 };
 
+export const rescheduleAppointment = async ({ appointmentId, newDate, newTime }) => {
+  const res = await API.put(`/appointments/reschedule/${appointmentId}`, {
+    bookingDate: newDate,
+    bookingTime: newTime,
+  });
+  return res.data;
+};
+
 /* =========================
    ADMIN – APPOINTMENTS
 ========================= */
-
-// This matches AdminAppointmentController:
-// GET /api/admin/appointments
 export const getAllAppointments = async () => {
   const res = await API.get("/admin/appointments");
   return res.data;
 };
 
-// This matches AdminAppointmentController:
-// POST /api/admin/appointments/confirm/{id}?physicalLocation=... OR ?zoomLink=...
-export const confirmAppointment = async (appointmentId, params) => {
+export const updateAppointmentDate = async (appointmentId, bookingDate, bookingTime) => {
+  if (!appointmentId) throw new Error("Appointment ID is required");
+
+  const res = await API.put(
+    `/admin/appointments/update-date/${appointmentId}`,
+    {
+      bookingDate,
+      bookingTime
+    }
+  );
+
+  return res.data;
+};
+
+export const confirmAppointment = async (appointmentId, data) => {
+  if (!appointmentId) throw new Error("Appointment ID is required");
+
+  // Send data in JSON body
   const res = await API.post(
     `/admin/appointments/confirm/${appointmentId}`,
-    null,
-    { params } // axios will convert this to query string
+    data
   );
   return res.data;
 };
-
 export default API;
+
diff --git a/src/components/PatientPortal/bookings/AdminConfirmAppointments.jsx b/src/components/PatientPortal/bookings/AdminConfirmAppointments.jsx
index 721209a..46c3595 100644
--- a/src/components/PatientPortal/bookings/AdminConfirmAppointments.jsx
+++ b/src/components/PatientPortal/bookings/AdminConfirmAppointments.jsx
@@ -1,68 +1,219 @@
 import React, { useEffect, useState } from "react";
-import { getAllAppointments, confirmAppointment } from "../../../api/api";
+import {
+  getAllAppointments,
+  confirmAppointment,
+  updateAppointmentDate,
+} from "../../../api/api";
 
 export default function AdminConfirmAppointments() {
   const [appointments, setAppointments] = useState([]);
-  const [input, setInput] = useState({});
+  const [dates, setDates] = useState({});
+  const [times, setTimes] = useState({});
+  const [locations, setLocations] = useState({});
 
   useEffect(() => {
-    load();
+    loadAppointments();
   }, []);
 
-  const load = async () => {
-    const data = await getAllAppointments();
-    setAppointments(Array.isArray(data) ? data : []);
+  const loadAppointments = async () => {
+    try {
+      const data = await getAllAppointments();
+      console.log("Appointments from backend:", data);
+      setAppointments(Array.isArray(data) ? data : []);
+    } catch (err) {
+      console.error("Failed to load appointments:", err);
+    }
   };
 
-  const confirm = async (a) => {
+  const confirm = async (appointment) => {
+    const appointmentId = appointment.id || appointment.appointmentId;
+    if (!appointmentId) {
+      alert("Appointment ID is missing");
+      return;
+    }
+
+    const value = locations[appointmentId];
+    if (!value) {
+      alert(
+        appointment.appointmentType === "Physical"
+          ? "Please enter a location"
+          : "Please enter a meeting link",
+      );
+      return;
+    }
+
     const params =
-      a.appointmentType === "Physical"
-        ? { physicalLocation: input[a.id] }
-        : { zoomLink: input[a.id] };
+      appointment.appointmentType === "Physical"
+        ? { physicalLocation: value }
+        : { zoomLink: value };
+
+    try {
+      await confirmAppointment(appointmentId, params);
+      loadAppointments();
+      setLocations((prev) => ({ ...prev, [appointmentId]: "" }));
+    } catch (err) {
+      console.error(err);
+      alert("Failed to confirm appointment. Check console for details.");
+    }
+  };
+
+  const updateDate = async (appointment) => {
+    const appointmentId = appointment.id || appointment.appointmentId;
+
+    if (!appointmentId) {
+      alert("Appointment ID is missing");
+      return;
+    }
 
-    await confirmAppointment(a.id, params);
-    load();
+    const dateValue = dates[appointmentId];
+    const timeValue = times[appointmentId];
+
+    if (!dateValue && !timeValue) {
+      alert("Please change date or time");
+      return;
+    }
+
+    try {
+      await updateAppointmentDate(appointmentId, dateValue, timeValue);
+      loadAppointments();
+
+      setDates((prev) => ({ ...prev, [appointmentId]: "" }));
+      setTimes((prev) => ({ ...prev, [appointmentId]: "" }));
+    } catch (err) {
+      console.error(err);
+      alert("Failed to update appointment. Check console for details.");
+    }
   };
 
   return (
-    <div className="p-6">
-      <h1 className="text-2xl font-bold mb-4">Admin Confirm Appointments</h1>
-
-      {appointments.map((a) => (
-        <div key={a.id} className="border p-4 mb-4 rounded shadow">
-          <p><b>Doctor:</b> {a.doctorName}</p>
-          <p><b>Specialty:</b> {a.specialty}</p>
-          <p><b>Type:</b> {a.appointmentType}</p>
-          <p><b>Date:</b> {a.bookingDate}</p>
-          <p><b>Time:</b> {a.bookingTime}</p>
-          <p><b>Status:</b> {a.appointmentStatus}</p>
-          <p><b>Payment:</b> {a.paymentStatus}</p>
-          <p><b>Location / Link:</b> {a.locationOrLink}</p>
-
-          {a.appointmentStatus === "PENDING" &&
-            a.paymentStatus === "SUCCESS" && (
-              <>
-                <input
-                  className="border p-2 w-full my-2"
-                  placeholder={
-                    a.appointmentType === "Physical"
-                      ? "Enter location"
-                      : "Enter meeting link"
-                  }
-                  onChange={(e) =>
-                    setInput({ ...input, [a.id]: e.target.value })
-                  }
-                />
-                <button
-                  className="bg-green-600 text-white px-4 py-2 rounded"
-                  onClick={() => confirm(a)}
-                >
-                  Confirm
-                </button>
-              </>
-            )}
-        </div>
-      ))}
+    <div className="p-4 md:p-8 bg-gray-50 min-h-screen">
+      <h1 className="text-2xl md:text-3xl font-bold mb-6 text-gray-800">
+        Admin Appointment Management
+      </h1>
+
+      <div className="grid gap-6">
+        {appointments.map((a) => {
+          const appointmentId = a.id || a.appointmentId;
+
+          return (
+            <div
+              key={appointmentId}
+              className="bg-white rounded-xl shadow-md border p-6 hover:shadow-lg transition"
+            >
+              {/* Doctor Info */}
+              <div className="grid md:grid-cols-2 gap-4 text-gray-700">
+                <p>
+                  <span className="font-semibold">Doctor:</span> {a.doctorName}
+                </p>
+
+                <p>
+                  <span className="font-semibold">Specialty:</span>{" "}
+                  {a.specialty}
+                </p>
+
+                <p>
+                  <span className="font-semibold">Type:</span>{" "}
+                  {a.appointmentType}
+                </p>
+
+                <p>
+                  <span className="font-semibold">Status:</span>{" "}
+                  {a.appointmentStatus}
+                </p>
+
+                <p>
+                  <span className="font-semibold">Payment:</span>{" "}
+                  {a.paymentStatus}
+                </p>
+
+                <p>
+                  <span className="font-semibold">Location / Link:</span>{" "}
+                  {a.locationOrLink}
+                </p>
+              </div>
+
+              {/* Date + Time */}
+              <div className="grid md:grid-cols-3 gap-4 mt-5 items-center">
+                <div>
+                  <label className="text-sm font-medium text-gray-600">
+                    Date
+                  </label>
+
+                  <input
+                    type="date"
+                    className="border w-full px-3 py-2 rounded-md mt-1"
+                    value={dates[appointmentId] || a.bookingDate}
+                    onChange={(e) =>
+                      setDates((prev) => ({
+                        ...prev,
+                        [appointmentId]: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
+
+                <div>
+                  <label className="text-sm font-medium text-gray-600">
+                    Time
+                  </label>
+
+                  <input
+                    type="time"
+                    className="border w-full px-3 py-2 rounded-md mt-1"
+                    value={times[appointmentId] || a.bookingTime}
+                    onChange={(e) =>
+                      setTimes((prev) => ({
+                        ...prev,
+                        [appointmentId]: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
+
+                {(dates[appointmentId] || times[appointmentId]) && (
+                  <div className="mt-5 md:mt-6">
+                    <button
+                      className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
+                      onClick={() => updateDate(a)}
+                    >
+                      Save Changes
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              {/* Confirm Section */}
+              {a.appointmentStatus === "PENDING" &&
+                a.paymentStatus === "SUCCESS" && (
+                  <div className="mt-6 border-t pt-4">
+                    <input
+                      className="border w-full px-3 py-2 rounded-md mb-3"
+                      placeholder={
+                        a.appointmentType === "Physical"
+                          ? "Enter location"
+                          : "Enter meeting link"
+                      }
+                      value={locations[appointmentId] || ""}
+                      onChange={(e) =>
+                        setLocations((prev) => ({
+                          ...prev,
+                          [appointmentId]: e.target.value,
+                        }))
+                      }
+                    />
+
+                    <button
+                      className="bg-green-600 text-white px-5 py-2 rounded-md hover:bg-green-700"
+                      onClick={() => confirm(a)}
+                    >
+                      Confirm Appointment
+                    </button>
+                  </div>
+                )}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }
diff --git a/src/components/PatientPortal/bookings/BookingDoctorSelect.jsx b/src/components/PatientPortal/bookings/BookingDoctorSelect.jsx
index 571f7a3..d8152aa 100644
--- a/src/components/PatientPortal/bookings/BookingDoctorSelect.jsx
+++ b/src/components/PatientPortal/bookings/BookingDoctorSelect.jsx
@@ -3,41 +3,78 @@ import { getDoctors } from "../../../api/api";
 
 export default function DoctorSelect({ selectedDoctor, setSelectedDoctor }) {
   const [doctors, setDoctors] = useState([]);
+  const [specialties, setSpecialties] = useState([]);
+  const [selectedSpecialty, setSelectedSpecialty] = useState("");
 
   useEffect(() => {
     getDoctors()
-      .then((data) => setDoctors(data))
-      .catch(console.error);
+      .then((data) => {
+        setDoctors(data || []);
+
+        // Extract unique specialties
+        const uniqueSpecialties = [
+          ...new Set((data || []).map((d) => d.specialty)),
+        ];
+        setSpecialties(uniqueSpecialties);
+      })
+      .catch((err) => console.error("Failed to load doctors:", err));
   }, []);
 
-  const handleChange = (e) => {
+  // Filter doctors based on selected specialty
+  const filteredDoctors = doctors.filter(
+    (d) => d.specialty === selectedSpecialty,
+  );
+
+  const handleSpecialtyChange = (e) => {
+    setSelectedSpecialty(e.target.value);
+    setSelectedDoctor(null); // reset doctor when specialty changes
+  };
+
+  const handleDoctorChange = (e) => {
     const doctor = doctors.find((d) => d.id === Number(e.target.value));
     setSelectedDoctor(doctor || null);
   };
 
   return (
     <div>
+      {/* SPECIALTY DROPDOWN */}
       <label className="block text-sm font-semibold text-gray-700 mb-1">
+        Select Specialty
+      </label>
+      <select
+        value={selectedSpecialty}
+        onChange={handleSpecialtyChange}
+        className="w-full border px-3 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"
+      >
+        <option value="">-- Choose Specialty --</option>
+        {specialties.map((spec, index) => (
+          <option key={index} value={spec}>
+            {spec}
+          </option>
+        ))}
+      </select>
+
+      {/* DOCTOR DROPDOWN */}
+      <label className="block text-sm font-semibold text-gray-700 mt-3 mb-1">
         Select Doctor
       </label>
       <select
         value={selectedDoctor?.id || ""}
-        onChange={handleChange}
-        className="w-full border px-3 py-2 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        onChange={handleDoctorChange}
+        disabled={!selectedSpecialty}
+        className="w-full border px-3 py-2 rounded-lg focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
       >
-        <option value="">-- Choose a doctor --</option>
-        {doctors.map((d) => (
-          <option key={d.id} value={d.id}>
-            {d.name}
+        <option value="">-- Choose Doctor --</option>
+        {filteredDoctors.map((doctor) => (
+          <option key={doctor.id} value={doctor.id}>
+            {doctor.name}
           </option>
         ))}
       </select>
 
+      {/* SHOW CONSULTATION FEE */}
       {selectedDoctor && (
-        <div className="mt-2 text-m text-gray-600">
-          <p>
-            <strong>Specialty:</strong> {selectedDoctor.specialty}
-          </p>
+        <div className="mt-3 text-gray-600">
           <p>
             <strong>Consultation Fee:</strong> Rs.
             {selectedDoctor.consultationFee}
diff --git a/src/components/PatientPortal/bookings/BookingForm.jsx b/src/components/PatientPortal/bookings/BookingForm.jsx
index 7a4270d..5c5c18a 100644
--- a/src/components/PatientPortal/bookings/BookingForm.jsx
+++ b/src/components/PatientPortal/bookings/BookingForm.jsx
@@ -17,9 +17,8 @@ export default function BookingModal({ setShowModal, onBookingSuccess }) {
     const fetchTypes = async () => {
       try {
         const types = await getAppointmentTypes();
-setAppointmentTypes(types || []);
-if (types?.length) setSelectedTypeId(types[0].id);
-
+        setAppointmentTypes(types || []);
+        if (types?.length) setSelectedTypeId(types[0].id);
       } catch (err) {
         console.error("Failed to fetch appointment types:", err);
       }
@@ -28,10 +27,15 @@ if (types?.length) setSelectedTypeId(types[0].id);
   }, []);
 
   const handleBooking = async () => {
-    if (!selectedDoctor || !date || !selectedTime || !reason || !selectedTypeId) {
-  return alert("Please fill all fields (including appointment type)");
-}
-
+    if (
+      !selectedDoctor ||
+      !date ||
+      !selectedTime ||
+      !reason ||
+      !selectedTypeId
+    ) {
+      return alert("Please fill all fields (including appointment type)");
+    }
 
     const appointmentData = {
       doctorId: selectedDoctor.id,
@@ -64,89 +68,131 @@ if (types?.length) setSelectedTypeId(types[0].id);
 
       alert("Appointment booked successfully! Click 'Pay Now' to pay.");
     } catch (err) {
-  console.log("BOOKING ERROR FULL:", err);
-  console.log("BOOKING ERROR DATA:", err.response?.data);
-  alert(err.response?.data?.error || err.response?.data?.message || "Error booking appointment");
-}
-
+      console.log("BOOKING ERROR FULL:", err);
+      console.log("BOOKING ERROR DATA:", err.response?.data);
+      alert(
+        err.response?.data?.error ||
+          err.response?.data?.message ||
+          "Error booking appointment",
+      );
+    }
   };
 
   const handlePayNow = () => {
-  if (!appointmentId) return alert("Please book first!");
-
-  const fee = Number(selectedDoctor.consultationFee || 0).toFixed(2);
-
-  window.location.href =
-    `${API_BASE}/api/payments/pay/${appointmentId}?amount=${fee}`;
-};
+    if (!appointmentId) return alert("Please book first!");
+    const fee = Number(selectedDoctor.consultationFee || 0).toFixed(2);
+    window.location.href = `http://localhost:8080/api/payments/pay/${appointmentId}?amount=${fee}`;
+  };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
-      <div className="bg-white rounded-xl w-full max-w-xl p-6">
-        <h2 className="text-xl font-bold mb-4">Book Appointment</h2>
-
-        <DoctorSelect
-          selectedDoctor={selectedDoctor}
-          setSelectedDoctor={setSelectedDoctor}
-        />
-
-        <input
-          type="date"
-          className="w-full border p-2 mt-3"
-          value={date}
-          min={new Date().toISOString().split("T")[0]}
-          onChange={(e) => setDate(e.target.value)}
-        />
-
-        <TimeSlotPicker
-          doctorId={selectedDoctor?.id}
-          date={date}
-          selectedTime={selectedTime}
-          setSelectedTime={setSelectedTime}
-        />
-
-        <select
-  className="w-full border p-2 mt-3"
-  value={selectedTypeId ?? ""}
-  onChange={(e) => setSelectedTypeId(Number(e.target.value))}
->
-  <option value="" disabled>
-    -- Choose appointment type --
-  </option>
-
-  {appointmentTypes.map((type) => (
-    <option key={type.id} value={type.id}>
-      {type.typeName}
-    </option>
-  ))}
-</select>
-
-
-        <textarea
-          className="w-full border p-2 mt-3"
-          rows="3"
-          placeholder="Reason for visit"
-          value={reason}
-          onChange={(e) => setReason(e.target.value)}
-        />
-
-        {appointmentId && (
-          <p className="mt-2 font-medium">
-            Payment Status:{" "}
-            <span
-              className={
-                paymentStatus === "SUCCESS" ? "text-green-600" : "text-red-600"
-              }
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50 p-4">
+      {/* Modal */}
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6 border border-gray-200">
+        <h2 className="text-xl md:text-2xl font-semibold mb-5 text-gray-800">
+          Book Appointment
+        </h2>
+
+        <div className="space-y-4">
+          {/* Doctor Selection */}
+          <div>
+            <label className="block text-gray-700 font-medium mb-1">
+              Select Doctor
+            </label>
+            <DoctorSelect
+              selectedDoctor={selectedDoctor}
+              setSelectedDoctor={setSelectedDoctor}
+            />
+          </div>
+
+          {/* Date Picker */}
+          <div>
+            <label className="block text-gray-700 font-medium mb-1">
+              Choose Date
+            </label>
+
+            <input
+              type="date"
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400"
+              value={date}
+              min={new Date().toISOString().split("T")[0]}
+              onChange={(e) => setDate(e.target.value)}
+            />
+          </div>
+
+          {/* Time Picker */}
+          <div>
+            <label className="block text-gray-700 font-medium mb-1">
+              Choose Time
+            </label>
+
+            <TimeSlotPicker
+              doctorId={selectedDoctor?.id}
+              date={date}
+              selectedTime={selectedTime}
+              setSelectedTime={setSelectedTime}
+            />
+          </div>
+
+          {/* Appointment Type */}
+          <div>
+            <label className="block text-gray-700 font-medium mb-1">
+              Appointment Type
+            </label>
+
+            <select
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400"
+              value={selectedTypeId ?? ""}
+              onChange={(e) => setSelectedTypeId(Number(e.target.value))}
             >
-              {paymentStatus}
-            </span>
-          </p>
-        )}
+              <option value="" disabled>
+                -- Choose appointment type --
+              </option>
+
+              {appointmentTypes.map((type) => (
+                <option key={type.id} value={type.id}>
+                  {type.typeName}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Reason */}
+          <div>
+            <label className="block text-gray-700 font-medium mb-1">
+              Reason for Visit
+            </label>
+
+            <textarea
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400"
+              rows="3"
+              placeholder="Describe your reason for visit"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+            />
+          </div>
+
+          {/* Payment Status */}
+          {appointmentId && (
+            <p className="mt-2 font-medium text-gray-700">
+              Payment Status:{" "}
+              <span
+                className={
+                  paymentStatus === "SUCCESS"
+                    ? "text-green-600"
+                    : "text-red-600"
+                }
+              >
+                {paymentStatus}
+              </span>
+            </p>
+          )}
+        </div>
 
-        <div className="flex justify-end gap-2 mt-4">
+        {/* Buttons */}
+        <div className="flex flex-col sm:flex-row justify-end gap-3 mt-6">
           <button
             onClick={() => setShowModal(false)}
-            className="px-4 py-2 border rounded"
+            className="w-full sm:w-auto px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition"
           >
             Cancel
           </button>
@@ -154,14 +200,14 @@ if (types?.length) setSelectedTypeId(types[0].id);
           {!appointmentId ? (
             <button
               onClick={handleBooking}
-              className="bg-green-600 text-white px-4 py-2 rounded"
+              className="w-full sm:w-auto bg-green-600 text-white px-5 py-2 rounded-lg hover:bg-green-700 transition"
             >
               Book
             </button>
           ) : (
             <button
               onClick={handlePayNow}
-              className="bg-blue-600 text-white px-4 py-2 rounded"
+              className="w-full sm:w-auto bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700 transition"
             >
               Pay Now
             </button>
diff --git a/src/components/PatientPortal/bookings/BookingPage.jsx b/src/components/PatientPortal/bookings/BookingPage.jsx
index f8795ae..84d91b2 100644
--- a/src/components/PatientPortal/bookings/BookingPage.jsx
+++ b/src/components/PatientPortal/bookings/BookingPage.jsx
@@ -10,7 +10,7 @@ export default function BookingsTab() {
   const fetchAppointments = async () => {
     try {
       const data = await getUserAppointments();
-      setAppointments(data); // set state
+      setAppointments(data); // only logged-in patient’s appointments
     } catch (err) {
       console.error("Error fetching appointments:", err);
     }
@@ -21,7 +21,7 @@ export default function BookingsTab() {
   }, []);
 
   const handleBookingSuccess = (appointment) => {
-    // Add new appointment to list
+    // Add new appointment to list (optional: you could re-fetch from backend)
     setAppointments((prev) => [...prev, appointment]);
   };
 
diff --git a/src/components/PatientPortal/bookings/DoctorAvailabilityModal.jsx b/src/components/PatientPortal/bookings/DoctorAvailabilityModal.jsx
index fab34c0..cbcd8f5 100644
--- a/src/components/PatientPortal/bookings/DoctorAvailabilityModal.jsx
+++ b/src/components/PatientPortal/bookings/DoctorAvailabilityModal.jsx
@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from "react";
 import {
   saveAvailability,
-  getAvailableSlots,
+  getAllSlots,
   deleteAvailabilitySlot,
 } from "../../../api/api";
 
 // Generate 30-min slots between 8:00 AM to 11:00 PM
 const generateSlots = () => {
   const slots = [];
-  let start = 8 * 60; // 8:00 AM in minutes
-  const end = 23 * 60; // 11:00 PM in minutes
+  let start = 8 * 60; // 8:00 AM
+  const end = 23 * 60; // 11:00 PM
 
   while (start <= end) {
     const h = String(Math.floor(start / 60)).padStart(2, "0");
@@ -21,7 +21,7 @@ const generateSlots = () => {
   return slots;
 };
 
-// Helper to normalize backend time (remove seconds if present)
+// Normalize backend time (remove seconds)
 const normalizeTime = (time) => time.slice(0, 5);
 
 export default function DoctorAvailabilityModal({ doctor, onClose }) {
@@ -30,19 +30,19 @@ export default function DoctorAvailabilityModal({ doctor, onClose }) {
   const [selectedSlots, setSelectedSlots] = useState([]);
   const [savedSlots, setSavedSlots] = useState([]);
 
-  // Toggle slot selection
+  // Toggle selection (only for unsaved slots)
   const toggleSlot = (time) => {
     setSelectedSlots((prev) =>
       prev.includes(time) ? prev.filter((t) => t !== time) : [...prev, time],
     );
   };
 
-  // Load saved slots from backend
+  // Load all slots (booked + available)
   const loadSavedSlots = async () => {
     if (!doctor?.id || !date) return;
 
     try {
-      const res = await getAvailableSlots(doctor.id, date);
+      const res = await getAllSlots(doctor.id, date);
       const normalized = res.map((s) => ({
         ...s,
         availableTime: normalizeTime(s.availableTime),
@@ -76,7 +76,7 @@ export default function DoctorAvailabilityModal({ doctor, onClose }) {
     }
   };
 
-  // Delete a slot
+  // Delete slot (only allowed if not booked)
   const handleDelete = async (slotId) => {
     if (!window.confirm("Are you sure you want to delete this slot?")) return;
 
@@ -90,15 +90,31 @@ export default function DoctorAvailabilityModal({ doctor, onClose }) {
     }
   };
 
-  // Load slots whenever date or doctor changes
   useEffect(() => {
+    setSelectedSlots([]); // Clear temporary selection when date changes
     loadSavedSlots();
   }, [doctor, date]);
 
+  // Merge selected slots into table preview
+  const mergedSlots = [
+    ...savedSlots,
+    ...selectedSlots
+      .filter((time) => !savedSlots.some((s) => s.availableTime === time))
+      .map((time) => ({
+        id: "temp-" + time,
+        availableDate: date,
+        availableTime: time,
+        isBooked: false,
+        isTemp: true, // optional flag for temporary
+      })),
+  ];
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50">
       <div className="bg-white p-6 rounded w-[900px] max-h-[90vh] overflow-y-auto">
-        <h2 className="text-xl font-bold mb-4">Availability – {doctor.name}</h2>
+        <h2 className="text-xl font-bold mb-4">
+          Availability – {doctor?.name}
+        </h2>
 
         {/* DATE PICKER */}
         <input
@@ -108,22 +124,27 @@ export default function DoctorAvailabilityModal({ doctor, onClose }) {
           onChange={(e) => setDate(e.target.value)}
         />
 
-        {/* TIME SLOTS */}
+        {/* TIME SLOTS GRID */}
         <div className="grid grid-cols-6 gap-2 mb-6">
           {slots.map((time) => {
+            const slotObj = mergedSlots.find((s) => s.availableTime === time);
+            const isSaved = !!slotObj && !slotObj.isTemp;
+            const isBooked = slotObj?.isBooked;
             const isSelected = selectedSlots.includes(time);
-            const isSaved = savedSlots.some((s) => s.availableTime === time);
 
             return (
               <button
                 key={time}
-                onClick={() => toggleSlot(time)}
-                disabled={isSaved}
-                className={`border rounded p-2 text-sm 
-                  ${isSaved ? "bg-gray-300 cursor-not-allowed" : ""}
-                  ${
-                    isSelected ? "bg-blue-600 text-white" : "hover:bg-gray-100"
-                  }`}
+                onClick={() => {
+                  if (!isSaved && !isBooked) toggleSlot(time);
+                }}
+                disabled={isBooked || isSaved}
+                className={`border rounded p-2 text-sm transition-all duration-200
+                  ${isBooked ? "bg-red-500 text-white cursor-not-allowed" : ""}
+                  ${!isBooked && isSaved ? "bg-green-500 text-white cursor-not-allowed" : ""}
+                  ${isSelected ? "bg-blue-600 text-white" : ""}
+                  ${!isSaved && !isBooked ? "hover:bg-gray-100" : ""}
+                `}
               >
                 {time}
               </button>
@@ -131,35 +152,51 @@ export default function DoctorAvailabilityModal({ doctor, onClose }) {
           })}
         </div>
 
-        {/* SAVED SLOTS TABLE */}
+        {/* SAVED + SELECTED SLOTS TABLE */}
         <h3 className="font-semibold mb-2">Saved Slots</h3>
         <table className="w-full border">
           <thead>
             <tr className="bg-gray-100">
               <th className="border p-2">Date</th>
               <th className="border p-2">Time</th>
+              <th className="border p-2">Status</th>
               <th className="border p-2">Actions</th>
             </tr>
           </thead>
           <tbody>
-            {savedSlots.length > 0 ? (
-              savedSlots.map((s) => (
+            {mergedSlots.length > 0 ? (
+              mergedSlots.map((s) => (
                 <tr key={s.id}>
                   <td className="border p-2">{s.availableDate}</td>
                   <td className="border p-2">{s.availableTime}</td>
                   <td className="border p-2">
-                    <button
-                      className="px-2 py-1 bg-red-500 rounded text-white text-sm"
-                      onClick={() => handleDelete(s.id)}
-                    >
-                      Delete
-                    </button>
+                    {s.isBooked ? (
+                      <span className="text-red-600 font-semibold">Booked</span>
+                    ) : s.isTemp ? (
+                      <span className="text-blue-600 font-semibold">
+                        Selected
+                      </span>
+                    ) : (
+                      <span className="text-green-600 font-semibold">
+                        Available
+                      </span>
+                    )}
+                  </td>
+                  <td className="border p-2">
+                    {!s.isBooked && !s.isTemp && (
+                      <button
+                        className="px-2 py-1 bg-red-500 rounded text-white text-sm"
+                        onClick={() => handleDelete(s.id)}
+                      >
+                        Delete
+                      </button>
+                    )}
                   </td>
                 </tr>
               ))
             ) : (
               <tr>
-                <td colSpan="3" className="text-center p-3 text-gray-500">
+                <td colSpan="4" className="text-center p-3 text-gray-500">
                   No availability saved
                 </td>
               </tr>
@@ -172,6 +209,7 @@ export default function DoctorAvailabilityModal({ doctor, onClose }) {
           <button className="px-4 py-1 bg-gray-400 rounded" onClick={onClose}>
             Close
           </button>
+
           <button
             className="px-4 py-1 bg-blue-600 text-white rounded"
             onClick={handleSave}
diff --git a/src/components/PatientPortal/bookings/PatientAppointmentCard.jsx b/src/components/PatientPortal/bookings/PatientAppointmentCard.jsx
index 67aa9fd..28e1ad6 100644
--- a/src/components/PatientPortal/bookings/PatientAppointmentCard.jsx
+++ b/src/components/PatientPortal/bookings/PatientAppointmentCard.jsx
@@ -1,23 +1,34 @@
 import { useState } from "react";
+import RescheduleCart from "./RescheduleCart";
+import { rescheduleAppointment } from "../../../api/api";
 
-export default function AppointmentCard({ appointment, onRemove }) {
+export default function AppointmentCard({
+  appointment,
+  availableSlots,
+  onRemove,
+  onReschedule,
+}) {
   const [error, setError] = useState("");
+  const [cancelConfirm, setCancelConfirm] = useState(false);
+  const [rescheduleMode, setRescheduleMode] = useState(false);
 
   const handleZoomClick = () => {
-    if (
-      appointment.locationOrLink &&
-      appointment.locationOrLink.startsWith("https://")
-    ) {
-      // Open the link in a new tab
+    if (appointment.locationOrLink?.startsWith("https://")) {
       window.open(appointment.locationOrLink, "_blank");
-      setError(""); // Clear any previous error
+      setError("");
     } else {
-      setError("Zoom link is invalid or not available.Please contact us ");
+      setError("Zoom link is invalid or not available. Please contact us.");
     }
   };
 
+  const handleCancelClick = () => setCancelConfirm(true);
+  const confirmCancel = () => {
+    if (onRemove) onRemove(appointment.appointmentId);
+    setCancelConfirm(false);
+  };
+
   return (
-    <div className="border rounded p-4 shadow-md bg-white flex flex-col gap-1">
+    <div className="border rounded p-4 shadow-md bg-white flex flex-col gap-2">
       <h3 className="text-lg font-bold">{appointment.doctorName}</h3>
       <p>
         <strong>Specialty:</strong> {appointment.specialty}
@@ -44,7 +55,6 @@ export default function AppointmentCard({ appointment, onRemove }) {
         <strong>Appointment Status:</strong> {appointment.appointmentStatus}
       </p>
 
-      {/* Zoom Link / Location */}
       {appointment.locationOrLink ? (
         <button
           onClick={handleZoomClick}
@@ -60,13 +70,64 @@ export default function AppointmentCard({ appointment, onRemove }) {
 
       {error && <p className="text-red-500 mt-1">{error}</p>}
 
-      {onRemove && (
+      <div className="flex gap-2 mt-2">
+        <button
+          className="bg-yellow-500 text-white px-2 py-1 rounded"
+          onClick={handleCancelClick}
+        >
+          Cancel Appointment
+        </button>
         <button
-          className="mt-2 bg-red-500 text-white px-2 py-1 rounded w-fit"
-          onClick={() => onRemove(appointment.appointmentId)}
+          className="bg-green-500 text-white px-2 py-1 rounded"
+          onClick={() => setRescheduleMode(true)}
         >
-          Remove
+          Reschedule Appointment
         </button>
+      </div>
+
+      {cancelConfirm && (
+        <div className="mt-2 p-2 border rounded bg-red-50">
+          <p className="text-red-600 font-semibold">
+            We understand plans can change. You can reschedule your appointment
+            at no additional cost. Cancelling the appointment will not refund
+            your payment.
+          </p>
+          <div className="flex gap-2 mt-2">
+            <button
+              className="bg-red-600 text-white px-3 py-1 rounded"
+              onClick={confirmCancel}
+            >
+              Yes, Cancel
+            </button>
+            <button
+              className="bg-gray-400 text-white px-3 py-1 rounded"
+              onClick={() => {
+                setCancelConfirm(false);
+                setRescheduleMode(true);
+              }}
+            >
+              Reschedule Appointment
+            </button>
+          </div>
+        </div>
+      )}
+
+      {rescheduleMode && (
+        <RescheduleCart
+          appointment={appointment}
+          onSubmit={async (appointmentId, newSlotId) => {
+            try {
+              await rescheduleAppointment(appointmentId, newSlotId);
+              alert("Appointment rescheduled successfully!");
+              onReschedule && onReschedule(appointmentId, newSlotId);
+              setRescheduleMode(false);
+            } catch (err) {
+              console.error(err);
+              alert("Failed to reschedule appointment");
+            }
+          }}
+          onCancel={() => setRescheduleMode(false)}
+        />
       )}
     </div>
   );
diff --git a/src/components/PatientPortal/bookings/RescheduleCart.jsx b/src/components/PatientPortal/bookings/RescheduleCart.jsx
new file mode 100644
index 0000000..0737531
--- /dev/null
+++ b/src/components/PatientPortal/bookings/RescheduleCart.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+export default function RescheduleCart({ appointment, onCancel }) {
+  return (
+    <div className="border p-4 rounded bg-gray-50 mt-2">
+      <h3 className="text-lg font-semibold mb-3">Reschedule Appointment</h3>
+
+      <div className="bg-yellow-100 border border-yellow-400 text-yellow-800 p-3 rounded">
+        <p className="font-medium">
+          To reschedule your appointment, please contact the hospital.
+        </p>
+
+        <p className="mt-2">
+          📞 Phone: <span className="font-semibold">011-2345678</span>
+        </p>
+
+        <p className="mt-1 text-sm">
+          Our staff will help you select a new available time slot.
+        </p>
+      </div>
+
+      <div className="mt-4">
+        <button
+          onClick={onCancel}
+          className="px-3 py-1 bg-gray-400 text-white rounded"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+}