diff --git a/src/pages/Appointments/components/AppointmentSlotPicker.tsx b/src/pages/Appointments/components/AppointmentSlotPicker.tsx
index b2c4c5bfbaf..439c3f2e8c4 100644
--- a/src/pages/Appointments/components/AppointmentSlotPicker.tsx
+++ b/src/pages/Appointments/components/AppointmentSlotPicker.tsx
@@ -219,6 +219,7 @@ export function AppointmentSlotPicker({
                                     : percentage >= 0.6
                                       ? "text-yellow-600"
                                       : "text-green-600",
+                                selectedSlotId === slot.id && "text-white",
                               )}
                             >
                               {availability.tokens_per_slot - slot.allocated}{" "}
diff --git a/src/pages/PublicAppointments/Schedule.tsx b/src/pages/PublicAppointments/Schedule.tsx
index f021baa0c3c..76bc3433e55 100644
--- a/src/pages/PublicAppointments/Schedule.tsx
+++ b/src/pages/PublicAppointments/Schedule.tsx
@@ -338,6 +338,8 @@ export function ScheduleAppointment(props: AppointmentsProps) {
                                         : percentage >= 0.6
                                           ? "text-yellow-600"
                                           : "text-green-600",
+                                    selectedSlot?.id === slot.id &&
+                                      "text-white",
                                   )}
                                 >
                                   {availability.tokens_per_slot -