diff --git a/app/home/(user)/_components/booking/booking-calendar.tsx b/app/home/(user)/_components/booking/booking-calendar.tsx
new file mode 100644
index 0000000..300add5
--- /dev/null
+++ b/app/home/(user)/_components/booking/booking-calendar.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { isBefore, isSameDay } from 'date-fns';
+import { uniq } from 'lodash';
+
+import { Calendar } from '@kit/ui/shadcn/calendar';
+import { Card } from '@kit/ui/shadcn/card';
+
+import { useBooking } from './booking.provider';
+
+export default function BookingCalendar() {
+  const { selectedDate, setSelectedDate, isLoadingTimeSlots, timeSlots } =
+    useBooking();
+  const availableDates = uniq(timeSlots?.map((timeSlot) => timeSlot.StartTime));
+
+  return (
+    <Card className="mb-4">
+      <Calendar
+        mode="single"
+        selected={selectedDate}
+        onSelect={setSelectedDate}
+        disabled={(date) => {
+          const today = new Date();
+          today.setHours(0, 0, 0, 0);
+          return (
+            isBefore(date, today) ||
+            !availableDates.some((dateWithBooking) =>
+              isSameDay(date, dateWithBooking),
+            )
+          );
+        }}
+        className="rounded-md border"
+        {...(isLoadingTimeSlots && {
+          className: 'rounded-md border opacity-50 pointer-events-none',
+        })}
+      />
+    </Card>
+  );
+}