diff --git a/apps/web/src/pages/bots/components/model-select.vue b/apps/web/src/pages/bots/components/model-select.vue
index 6a9e5bdae9..46169ecc93 100644
--- a/apps/web/src/pages/bots/components/model-select.vue
+++ b/apps/web/src/pages/bots/components/model-select.vue
@@ -5,6 +5,7 @@
         data-slot="select-trigger"
         data-size="default"
         :data-placeholder="displayLabel ? undefined : ''"
+        :data-hover-lighten="hoverLighten || undefined"
         type="button"
         :aria-expanded="open"
         :aria-invalid="invalid || undefined"
@@ -56,6 +57,10 @@ const props = defineProps<{
   providers: ProvidersGetResponse[]
   modelType: ModelsModelType
   invalid?: boolean
+  // Opts into the ui package's data-hover-lighten escape hatch (white hover
+  // overlay in dark). For instances sitting directly on the near-black app
+  // canvas (onboarding), where the default pure-black hover fill is invisible.
+  hoverLighten?: boolean
   placeholder?: string
   noneLabel?: string
   showReasoning?: boolean
diff --git a/apps/web/src/pages/onboarding/steps/Step2Appearance.vue b/apps/web/src/pages/onboarding/steps/Step2Appearance.vue
index 8b870bfe53..5c7f5b02f1 100644
--- a/apps/web/src/pages/onboarding/steps/Step2Appearance.vue
+++ b/apps/web/src/pages/onboarding/steps/Step2Appearance.vue
@@ -39,7 +39,10 @@ const { visible, exiting, leave } = useStepTransition()
                 :model-value="language"
                 @update:model-value="(value) => value && setLanguage(value as Locale)"
               >
-                <SelectTrigger class="w-full">
+                <SelectTrigger
+                  class="w-full"
+                  data-hover-lighten
+                >
                   <SelectValue :placeholder="t('settings.languagePlaceholder')" />
                 </SelectTrigger>
                 <SelectContent>
diff --git a/apps/web/src/pages/onboarding/steps/Step3Provider.vue b/apps/web/src/pages/onboarding/steps/Step3Provider.vue
index 4c92eaa183..33a16e95a6 100644
--- a/apps/web/src/pages/onboarding/steps/Step3Provider.vue
+++ b/apps/web/src/pages/onboarding/steps/Step3Provider.vue
@@ -259,7 +259,10 @@ onMounted(() => {
                 </Label>
               </template>
               <Select v-model="formValues.client_type">
-                <SelectTrigger class="w-full">
+                <SelectTrigger
+                  class="w-full"
+                  data-hover-lighten
+                >
                   <SelectValue :placeholder="t('onboarding.provider.form.clientTypePlaceholder')" />
                 </SelectTrigger>
                 <SelectContent>
diff --git a/apps/web/src/pages/onboarding/steps/Step4Bot.vue b/apps/web/src/pages/onboarding/steps/Step4Bot.vue
index f214df808c..a9dba3af13 100644
--- a/apps/web/src/pages/onboarding/steps/Step4Bot.vue
+++ b/apps/web/src/pages/onboarding/steps/Step4Bot.vue
@@ -377,6 +377,7 @@ async function handleSubmit() {
                   :providers="providers"
                   model-type="chat"
                   :placeholder="$t('onboarding.bot.model.selectPlaceholder')"
+                  hover-lighten
                 />
               </template>
             </div>