diff --git a/app/home/(user)/_components/booking/booking-calendar.tsx b/app/home/(user)/_components/booking/booking-calendar.tsx
index 300add5..f8afb0b 100644
--- a/app/home/(user)/_components/booking/booking-calendar.tsx
+++ b/app/home/(user)/_components/booking/booking-calendar.tsx
@@ -5,6 +5,7 @@ import { uniq } from 'lodash';
 
 import { Calendar } from '@kit/ui/shadcn/calendar';
 import { Card } from '@kit/ui/shadcn/card';
+import { cn } from '@kit/ui/utils';
 
 import { useBooking } from './booking.provider';
 
@@ -29,9 +30,9 @@ export default function BookingCalendar() {
             )
           );
         }}
-        className="rounded-md border"
-        {...(isLoadingTimeSlots && {
-          className: 'rounded-md border opacity-50 pointer-events-none',
+        className={cn('rounded-md border', {
+          'pointer-events-none rounded-md border opacity-50':
+            isLoadingTimeSlots,
         })}
       />
     </Card>