diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
index 663b67092..7d3346d02 100644
--- a/frontend/src/components/ScheduleCreation.vue
+++ b/frontend/src/components/ScheduleCreation.vue
@@ -20,14 +20,14 @@
             v-model="scheduleInput.name"
             :placeholder="t('placeholder.mySchedule')"
             :disabled="!scheduleInput.active"
-            class="place-holder w-full rounded-none border-0 border-b bg-transparent px-0"
+            class="place-holder w-full rounded-none border-0 border-b bg-transparent px-0 dark:bg-transparent"
             required
           />
         </label>
       </div>
       <!-- step 1 -->
       <div
-        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:bg-gray-600 dark:text-gray-100"
+        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
         :class="{'bg-neutral-50': activeStep1}"
         id="schedule-availability"
       >
@@ -99,7 +99,7 @@
       </div>
       <!-- step 2 -->
       <div
-        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:bg-gray-600 dark:text-gray-100"
+        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
         :class="{'bg-neutral-50':activeStep2}"
         id="schedule-settings"
       >
@@ -207,7 +207,7 @@
       <!-- step 3 -->
       <div
         @click="state = scheduleCreationState.details"
-        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:bg-gray-600 dark:text-gray-100"
+        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
         :class="{'bg-neutral-50': activeStep3}"
         id="schedule-details"
       >
diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue
index 29c129d62..13993f32f 100644
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -9,7 +9,7 @@
     :class="{ 'lg:mt-10': tabActive === calendarViews.month }"
   >
     <!-- schedule creation dialog -->
-    <div class="mx-auto mb-10 w-3/4 min-w-[20rem] rounded-2xl bg-zinc-100 sm:w-1/4 md:mb-0 xl:w-1/6">
+    <div class="mx-auto mb-10 w-3/4 min-w-[20rem] rounded-2xl bg-zinc-100 dark:bg-gray-600 sm:w-1/4 md:mb-0 xl:w-1/6">
       <schedule-creation
         v-if="schedulesReady"
         :calendars="connectedCalendars"