diff --git a/apps/web/components/bookings/booking-calendar.tsx b/apps/web/components/bookings/booking-calendar.tsx
index 1a2f4a9..3483966 100644
--- a/apps/web/components/bookings/booking-calendar.tsx
+++ b/apps/web/components/bookings/booking-calendar.tsx
@@ -304,8 +304,10 @@ export function BookingCalendar({ siteId, onSlotClick }: BookingCalendarProps) {
                   courts.length === 2 && "grid-cols-2",
                   courts.length === 3 && "grid-cols-3",
                   courts.length === 4 && "grid-cols-4",
-                  courts.length >= 5 && "grid-cols-5"
+                  courts.length === 5 && "grid-cols-5",
+                  courts.length >= 6 && "grid-cols-6"
                 )}
+                style={courts.length >= 5 ? { minWidth: `${courts.length * 150}px` } : undefined}
               >
                 {courts.map((court) => (
                   <div
@@ -333,8 +335,10 @@ export function BookingCalendar({ siteId, onSlotClick }: BookingCalendarProps) {
                       courts.length === 2 && "grid-cols-2",
                       courts.length === 3 && "grid-cols-3",
                       courts.length === 4 && "grid-cols-4",
-                      courts.length >= 5 && "grid-cols-5"
+                      courts.length === 5 && "grid-cols-5",
+                      courts.length >= 6 && "grid-cols-6"
                     )}
+                    style={courts.length >= 5 ? { minWidth: `${courts.length * 150}px` } : undefined}
                   >
                     {courts.map((court) => {
                       const courtAvail = availability.get(court.id);