diff --git a/app/javascript/v3/views/auth/start/components/ModalStep.vue b/app/javascript/v3/views/auth/start/components/ModalStep.vue
index c258697aa..7fe4bc673 100644
--- a/app/javascript/v3/views/auth/start/components/ModalStep.vue
+++ b/app/javascript/v3/views/auth/start/components/ModalStep.vue
@@ -1,9 +1,10 @@
 <template>
   <div
     v-if="!hidden"
-    class="flex items-center gap-2 p-2 text-sm"
+    class="flex items-center gap-2 p-2 text-sm rounded"
     :class="{
-      'text-slate-100 bg-slate-800 rounded': isActive,
+      'text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-800':
+        isActive,
       'opacity-50': !isActive && !isComplete,
       hidden: hidden,
     }"
@@ -11,7 +12,7 @@
     <div
       class="grid w-4 h-4 font-bold rounded-full text-xxs place-content-center"
       :class="{
-        'bg-slate-600': !isComplete,
+        'bg-slate-200 dark:bg-slate-600': !isComplete,
         'bg-green-500': isComplete,
       }"
     >