diff --git a/app/(admin)/admin/booking/[id]/page.tsx b/app/(admin)/admin/booking/[id]/page.tsx
index 3ec4ccb..c101ee4 100644
--- a/app/(admin)/admin/booking/[id]/page.tsx
+++ b/app/(admin)/admin/booking/[id]/page.tsx
@@ -20,7 +20,7 @@ import {
   MapPin,
 } from "lucide-react";
 import { useAppTheme } from "@/components/ThemeProvider";
-import { getAppointmentDetail, scheduleAppointment, rejectAppointment } from "@/lib/actions/appointments";
+import { getAppointmentDetail, scheduleAppointment, rejectAppointment, listAppointments } from "@/lib/actions/appointments";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -58,8 +58,23 @@ export default function AppointmentDetailPage() {
       
       setLoading(true);
       try {
-        const data = await getAppointmentDetail(appointmentId);
-        setAppointment(data);
+        // Fetch both detail and list to get selected_slots from list endpoint
+        const [detailData, listData] = await Promise.all([
+          getAppointmentDetail(appointmentId),
+          listAppointments().catch(() => []) // Fallback to empty array if list fails
+        ]);
+        
+        // Find matching appointment in list to get selected_slots
+        const listAppointment = Array.isArray(listData) 
+          ? listData.find((apt: Appointment) => apt.id === appointmentId)
+          : null;
+        
+        // Merge selected_slots from list into detail data
+        if (listAppointment && listAppointment.selected_slots && Array.isArray(listAppointment.selected_slots) && listAppointment.selected_slots.length > 0) {
+          detailData.selected_slots = listAppointment.selected_slots;
+        }
+        
+        setAppointment(detailData);
       } catch (error) {
         toast.error("Failed to load appointment details");
         router.push("/admin/booking");
@@ -367,7 +382,7 @@ export default function AppointmentDetailPage() {
               </div>
             )}
 
-            {/* Selected Slots (replacing Matching Slots) */}
+            {/* Selected Slots */}
             {appointment.selected_slots && Array.isArray(appointment.selected_slots) && appointment.selected_slots.length > 0 && (
               <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
                 <div className={`px-6 py-4 border-b ${isDark ? "border-gray-700 bg-gray-800/50" : "border-gray-200 bg-gray-50/50"}`}>
@@ -382,46 +397,65 @@ export default function AppointmentDetailPage() {
                   </h2>
                 </div>
                 <div className="p-6">
-                  <div className="flex flex-wrap gap-3">
-                    {appointment.selected_slots.map((slot: any, idx: number) => {
-                      const dayNames: Record<number, string> = {
-                        0: "Monday",
-                        1: "Tuesday",
-                        2: "Wednesday",
-                        3: "Thursday",
-                        4: "Friday",
-                        5: "Saturday",
-                        6: "Sunday",
-                      };
-                      const timeSlotLabels: Record<string, string> = {
-                        morning: "Morning",
-                        afternoon: "Lunchtime",
-                        evening: "Evening",
-                      };
-                      const dayName = dayNames[slot.day] || `Day ${slot.day}`;
-                      const timeSlot = String(slot.time_slot).toLowerCase().trim();
-                      const timeLabel = timeSlotLabels[timeSlot] || slot.time_slot;
-                      
-                      return (
-                        <div
-                          key={idx}
-                          className={`px-4 py-3 rounded-xl border ${isDark ? "bg-green-500/10 border-green-500/30" : "bg-green-50 border-green-200"}`}
-                        >
-                          <p className={`text-sm font-semibold ${isDark ? "text-green-300" : "text-green-700"}`}>
-                            {dayName}
-                          </p>
-                          <p className={`text-xs mt-1 ${isDark ? "text-green-400" : "text-green-600"}`}>
-                            {timeLabel}
-                          </p>
-                          {slot.date && (
-                            <p className={`text-xs mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
-                              {formatShortDate(slot.date)}
-                            </p>
-                          )}
-                        </div>
-                      );
-                    })}
-                  </div>
+                  {(() => {
+                    const dayNames: Record<number, string> = {
+                      0: "Monday",
+                      1: "Tuesday",
+                      2: "Wednesday",
+                      3: "Thursday",
+                      4: "Friday",
+                      5: "Saturday",
+                      6: "Sunday",
+                    };
+                    const timeSlotLabels: Record<string, string> = {
+                      morning: "Morning",
+                      afternoon: "Lunchtime",
+                      evening: "Evening",
+                    };
+
+                    // Group slots by date
+                    const slotsByDate: Record<string, typeof appointment.selected_slots> = {};
+                    appointment.selected_slots.forEach((slot: any) => {
+                      const date = slot.date || "";
+                      if (!slotsByDate[date]) {
+                        slotsByDate[date] = [];
+                      }
+                      slotsByDate[date].push(slot);
+                    });
+
+                    return (
+                      <div className="space-y-4">
+                        {Object.entries(slotsByDate).map(([date, slots]) => (
+                          <div key={date} className={`p-4 rounded-xl border ${isDark ? "bg-gray-700/50 border-gray-600" : "bg-gray-50 border-gray-200"}`}>
+                            <div className="mb-3">
+                              <p className={`text-base font-semibold ${isDark ? "text-white" : "text-gray-900"}`}>
+                                {formatShortDate(date)}
+                              </p>
+                              {slots.length > 0 && slots[0]?.day !== undefined && (
+                                <p className={`text-sm mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                                  {dayNames[slots[0].day] || `Day ${slots[0].day}`}
+                                </p>
+                              )}
+                            </div>
+                            <div className="flex flex-wrap gap-2">
+                              {slots.map((slot: any, idx: number) => {
+                                const timeSlot = String(slot.time_slot).toLowerCase().trim();
+                                const timeLabel = timeSlotLabels[timeSlot] || slot.time_slot;
+                                return (
+                                  <span
+                                    key={idx}
+                                    className={`px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? "bg-green-500/20 text-green-300 border border-green-500/30" : "bg-green-50 text-green-700 border border-green-200"}`}
+                                  >
+                                    {timeLabel}
+                                  </span>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    );
+                  })()}
                 </div>
               </div>
             )}
diff --git a/app/(admin)/admin/booking/page.tsx b/app/(admin)/admin/booking/page.tsx
index 532ba43..49abfc8 100644
--- a/app/(admin)/admin/booking/page.tsx
+++ b/app/(admin)/admin/booking/page.tsx
@@ -680,27 +680,52 @@ export default function Booking() {
                         </td>
                         <td className={`px-3 sm:px-4 md:px-6 py-4 text-xs sm:text-sm hidden lg:table-cell ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                           {(() => {
-                            // Handle preferred_dates
+                            const dayNames: Record<number, string> = {
+                              0: "Monday",
+                              1: "Tuesday",
+                              2: "Wednesday",
+                              3: "Thursday",
+                              4: "Friday",
+                              5: "Saturday",
+                              6: "Sunday",
+                            };
+                            const timeSlotLabels: Record<string, string> = {
+                              morning: "Morning",
+                              afternoon: "Lunchtime",
+                              evening: "Evening",
+                            };
+                            
+                            // Show selected_slots if available
+                            if (appointment.selected_slots && Array.isArray(appointment.selected_slots) && appointment.selected_slots.length > 0) {
+                              return (
+                                <div className="flex flex-col gap-1">
+                                  {appointment.selected_slots.slice(0, 2).map((slot, idx) => (
+                                    <span key={idx} className="text-xs sm:text-sm">
+                                      {dayNames[slot.day] || `Day ${slot.day}`} - {timeSlotLabels[slot.time_slot] || slot.time_slot}
+                                    </span>
+                                  ))}
+                                  {appointment.selected_slots.length > 2 && (
+                                    <span className="text-xs opacity-75">
+                                      +{appointment.selected_slots.length - 2} more
+                                    </span>
+                                  )}
+                                </div>
+                              );
+                            }
+                            
+                            // Fallback to preferred_dates and preferred_time_slots if selected_slots not available
                             const dates = Array.isArray(appointment.preferred_dates) 
                               ? appointment.preferred_dates 
                               : appointment.preferred_dates 
                                 ? [appointment.preferred_dates] 
                                 : [];
                             
-                            // Handle preferred_time_slots
                             const timeSlots = Array.isArray(appointment.preferred_time_slots)
                               ? appointment.preferred_time_slots
                               : appointment.preferred_time_slots
                                 ? [appointment.preferred_time_slots]
                                 : [];
                             
-                            // Time slot labels
-                            const timeSlotLabels: Record<string, string> = {
-                              morning: "Morning",
-                              afternoon: "Lunchtime",
-                              evening: "Evening",
-                            };
-                            
                             if (dates.length === 0 && timeSlots.length === 0) {
                               return <span>-</span>;
                             }
diff --git a/app/(user)/user/appointments/[id]/page.tsx b/app/(user)/user/appointments/[id]/page.tsx
index 1330fdd..a15cf6c 100644
--- a/app/(user)/user/appointments/[id]/page.tsx
+++ b/app/(user)/user/appointments/[id]/page.tsx
@@ -18,7 +18,7 @@ import {
   Copy,
 } from "lucide-react";
 import { useAppTheme } from "@/components/ThemeProvider";
-import { getAppointmentDetail } from "@/lib/actions/appointments";
+import { getAppointmentDetail, listAppointments } from "@/lib/actions/appointments";
 import { Button } from "@/components/ui/button";
 import { Navbar } from "@/components/Navbar";
 import { toast } from "sonner";
@@ -40,8 +40,23 @@ export default function UserAppointmentDetailPage() {
       
       setLoading(true);
       try {
-        const data = await getAppointmentDetail(appointmentId);
-        setAppointment(data);
+        // Fetch both detail and list to get selected_slots from list endpoint
+        const [detailData, listData] = await Promise.all([
+          getAppointmentDetail(appointmentId),
+          listAppointments().catch(() => []) // Fallback to empty array if list fails
+        ]);
+        
+        // Find matching appointment in list to get selected_slots
+        const listAppointment = Array.isArray(listData) 
+          ? listData.find((apt: Appointment) => apt.id === appointmentId)
+          : null;
+        
+        // Merge selected_slots from list into detail data
+        if (listAppointment && listAppointment.selected_slots && Array.isArray(listAppointment.selected_slots) && listAppointment.selected_slots.length > 0) {
+          detailData.selected_slots = listAppointment.selected_slots;
+        }
+        
+        setAppointment(detailData);
       } catch (error) {
         toast.error("Failed to load appointment details");
         router.push("/user/dashboard");
@@ -306,7 +321,7 @@ export default function UserAppointmentDetailPage() {
               </div>
             )}
 
-            {/* Selected Slots (replacing Matching Slots) */}
+            {/* Selected Slots */}
             {appointment.selected_slots && Array.isArray(appointment.selected_slots) && appointment.selected_slots.length > 0 && (
               <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
                 <div className={`px-6 py-4 border-b ${isDark ? "border-gray-700 bg-gray-800/50" : "border-gray-200 bg-gray-50/50"}`}>
@@ -321,46 +336,65 @@ export default function UserAppointmentDetailPage() {
                   </h2>
                 </div>
                 <div className="p-6">
-                  <div className="flex flex-wrap gap-3">
-                    {appointment.selected_slots.map((slot: any, idx: number) => {
-                      const dayNames: Record<number, string> = {
-                        0: "Monday",
-                        1: "Tuesday",
-                        2: "Wednesday",
-                        3: "Thursday",
-                        4: "Friday",
-                        5: "Saturday",
-                        6: "Sunday",
-                      };
-                      const timeSlotLabels: Record<string, string> = {
-                        morning: "Morning",
-                        afternoon: "Lunchtime",
-                        evening: "Evening",
-                      };
-                      const dayName = dayNames[slot.day] || `Day ${slot.day}`;
-                      const timeSlot = String(slot.time_slot).toLowerCase().trim();
-                      const timeLabel = timeSlotLabels[timeSlot] || slot.time_slot;
-                      
-                      return (
-                        <div
-                          key={idx}
-                          className={`px-4 py-3 rounded-xl border ${isDark ? "bg-green-500/10 border-green-500/30" : "bg-green-50 border-green-200"}`}
-                        >
-                          <p className={`text-sm font-semibold ${isDark ? "text-green-300" : "text-green-700"}`}>
-                            {dayName}
-                          </p>
-                          <p className={`text-xs mt-1 ${isDark ? "text-green-400" : "text-green-600"}`}>
-                            {timeLabel}
-                          </p>
-                          {slot.date && (
-                            <p className={`text-xs mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
-                              {formatShortDate(slot.date)}
-                            </p>
-                          )}
-                        </div>
-                      );
-                    })}
-                  </div>
+                  {(() => {
+                    const dayNames: Record<number, string> = {
+                      0: "Monday",
+                      1: "Tuesday",
+                      2: "Wednesday",
+                      3: "Thursday",
+                      4: "Friday",
+                      5: "Saturday",
+                      6: "Sunday",
+                    };
+                    const timeSlotLabels: Record<string, string> = {
+                      morning: "Morning",
+                      afternoon: "Lunchtime",
+                      evening: "Evening",
+                    };
+
+                    // Group slots by date
+                    const slotsByDate: Record<string, typeof appointment.selected_slots> = {};
+                    appointment.selected_slots.forEach((slot: any) => {
+                      const date = slot.date || "";
+                      if (!slotsByDate[date]) {
+                        slotsByDate[date] = [];
+                      }
+                      slotsByDate[date].push(slot);
+                    });
+
+                    return (
+                      <div className="space-y-4">
+                        {Object.entries(slotsByDate).map(([date, slots]) => (
+                          <div key={date} className={`p-4 rounded-xl border ${isDark ? "bg-gray-700/50 border-gray-600" : "bg-gray-50 border-gray-200"}`}>
+                            <div className="mb-3">
+                              <p className={`text-base font-semibold ${isDark ? "text-white" : "text-gray-900"}`}>
+                                {formatShortDate(date)}
+                              </p>
+                              {slots.length > 0 && slots[0]?.day !== undefined && (
+                                <p className={`text-sm mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                                  {dayNames[slots[0].day] || `Day ${slots[0].day}`}
+                                </p>
+                              )}
+                            </div>
+                            <div className="flex flex-wrap gap-2">
+                              {slots.map((slot: any, idx: number) => {
+                                const timeSlot = String(slot.time_slot).toLowerCase().trim();
+                                const timeLabel = timeSlotLabels[timeSlot] || slot.time_slot;
+                                return (
+                                  <span
+                                    key={idx}
+                                    className={`px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? "bg-green-500/20 text-green-300 border border-green-500/30" : "bg-green-50 text-green-700 border border-green-200"}`}
+                                  >
+                                    {timeLabel}
+                                  </span>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    );
+                  })()}
                 </div>
               </div>
             )}