diff --git a/components/wizard/calendar.tsx b/components/wizard/calendar.tsx
index 901250f..040043c 100644
--- a/components/wizard/calendar.tsx
+++ b/components/wizard/calendar.tsx
@@ -49,7 +49,10 @@ export default function MyCalendar() {
               'Calendar-grid-item',
               day.isSame(moment(), 'day') && 'Calendar-grid-item--current',
               day.isBefore(moment(), 'day') && 'Calendar-grid-item--past',
-              dayBooked(day.toDate()) && 'Calendar-grid-item--booked',
+              !!daysBooked &&
+                (dayBooked(day.toDate())
+                  ? 'Calendar-grid-item--booked'
+                  : 'Calendar-grid-item--free'),
               classNames
             )}
             onClick={(e) => onPickDate(day)}
diff --git a/styles/index.css b/styles/index.css
index 4a054d1..059eb1d 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -124,7 +124,7 @@
 }
 
 .Calendar-grid-item {
-  @apply text-center p-1 bg-green-200 border-r border-b border-solid border-gray-500;
+  @apply text-center p-1 border-r border-b border-solid border-gray-500;
   flex: 0 calc(100% / 7);
 }
 
@@ -136,6 +136,9 @@
   @apply font-bold;
 }
 
+.Calendar-grid-item--free:not(.Calendar-grid-item--past) {
+  @apply bg-green-200;
+}
 .Calendar-grid-item--booked {
   @apply bg-red-200 cursor-not-allowed;
 }