diff --git a/apps/stage-tamagotchi/src/pages/settings/index.vue b/apps/stage-tamagotchi/src/pages/settings/index.vue
index eba4ee56f..0d7f967f7 100644
--- a/apps/stage-tamagotchi/src/pages/settings/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/index.vue
@@ -108,7 +108,7 @@ const settings = computed(() => [
 <template>
   <div flex="~ col gap-4" font-normal>
     <div />
-    <div flex="~ col gap-4">
+    <div flex="~ col gap-4" pb-12>
       <IconItem
         v-for="(setting, index) in settings"
         :key="setting.to"
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/index.vue b/apps/stage-tamagotchi/src/pages/settings/providers/index.vue
index f2f2127ed..4b4214a4f 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/index.vue
@@ -22,7 +22,7 @@ const {
 </script>
 
 <template>
-  <div flex flex-col gap-5>
+  <div mb-6 flex flex-col gap-5>
     <div bg="primary-500/10 dark:primary-800/25" rounded-lg p-4>
       <div mb-2 text-xl font-normal text="primary-800 dark:primary-100">
         First time here?
diff --git a/apps/stage-web/src/pages/settings/index.vue b/apps/stage-web/src/pages/settings/index.vue
index eba4ee56f..0d7f967f7 100644
--- a/apps/stage-web/src/pages/settings/index.vue
+++ b/apps/stage-web/src/pages/settings/index.vue
@@ -108,7 +108,7 @@ const settings = computed(() => [
 <template>
   <div flex="~ col gap-4" font-normal>
     <div />
-    <div flex="~ col gap-4">
+    <div flex="~ col gap-4" pb-12>
       <IconItem
         v-for="(setting, index) in settings"
         :key="setting.to"
diff --git a/apps/stage-web/src/pages/settings/providers/index.vue b/apps/stage-web/src/pages/settings/providers/index.vue
index a70ed8c7b..4b410f8ee 100644
--- a/apps/stage-web/src/pages/settings/providers/index.vue
+++ b/apps/stage-web/src/pages/settings/providers/index.vue
@@ -25,7 +25,7 @@ const {
 </script>
 
 <template>
-  <div flex flex-col gap-5>
+  <div flex flex-col gap-5 pb-12>
     <div class="rounded-lg bg-primary-500/10 p-4 dark:bg-primary-800/25">
       <div class="mb-2 text-xl text-primary-800 font-semibold dark:text-primary-100">
         {{ $t('settings.pages.providers.helpinfo.title') }}
diff --git a/packages/stage-ui/src/components/Scenarios/Providers/SpeechProviderSettings.vue b/packages/stage-ui/src/components/Scenarios/Providers/SpeechProviderSettings.vue
index b34115f2d..6a9c2a0b1 100644
--- a/packages/stage-ui/src/components/Scenarios/Providers/SpeechProviderSettings.vue
+++ b/packages/stage-ui/src/components/Scenarios/Providers/SpeechProviderSettings.vue
@@ -25,6 +25,7 @@ const props = defineProps<{
   defaultModel?: string
   // Additional provider-specific settings
   additionalSettings?: Record<string, any>
+  placeholder?: string
 }>()
 
 // Expose slots and emit events to allow customization
@@ -258,7 +259,7 @@ const slotData = computed(() => ({
           :description="t('settings.pages.providers.common.section.basic.description')"
           :on-reset="handleResetVoiceSettings"
         >
-          <ProviderApiKeyInput v-model="apiKey" :provider-name="providerMetadata?.localizedName" placeholder="sk-" />
+          <ProviderApiKeyInput v-model="apiKey" :provider-name="providerMetadata?.localizedName" :placeholder="props.placeholder || 'API Key'" />
           <!-- Slot for provider-specific basic settings -->
           <slot name="basic-settings" />
         </ProviderBasicSettings>
diff --git a/packages/ui/src/components/Form/Select/Option.vue b/packages/ui/src/components/Form/Select/Option.vue
index e97c427d9..7d508d2b2 100644
--- a/packages/ui/src/components/Form/Select/Option.vue
+++ b/packages/ui/src/components/Form/Select/Option.vue
@@ -15,7 +15,7 @@ const hide = inject('hide') as () => void
   <div
     v-bind="{ ...$attrs, class: null, style: null }"
     class="cursor-pointer rounded px-2 py-1 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
-    line-clamp-1 overflow-hidden text-ellipsis whitespace-pre-wrap text-xs transition-colors duration-150 ease-in-out will-change-background-color will-change-color
+    line-clamp-1 overflow-hidden text-ellipsis whitespace-pre-wrap text="xs sm:sm" transition-colors duration-150 ease-in-out will-change-background-color will-change-color
     :class="{ 'bg-neutral-100 dark:bg-neutral-800': props.active }"
     @click="() => {
       selectOption(props.value)
diff --git a/packages/ui/src/components/Form/Select/Select.vue b/packages/ui/src/components/Form/Select/Select.vue
index 66db87ed7..35aa2ad8a 100644
--- a/packages/ui/src/components/Form/Select/Select.vue
+++ b/packages/ui/src/components/Form/Select/Select.vue
@@ -36,11 +36,11 @@ provide('hide', handleHide)
     <div
       min-w="[160px]" p="2.5" w-full
       class="focus:ring-2 focus:ring-black/10"
-      border="~ 2 solid dark:neutral-800"
-      text="xs dark:neutral-200 disabled:neutral-400 dark:disabled:neutral-600 neutral-700"
-      bg="white dark:neutral-900 disabled:neutral-100 hover:neutral-50 dark:disabled:neutral-800 dark:hover:neutral-800 "
+      border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+      text="xs sm:sm dark:neutral-200 disabled:neutral-400 dark:disabled:neutral-600 neutral-700"
+      bg="white dark:neutral-900 disabled:neutral-100 hover:neutral-50 dark:disabled:neutral-900 dark:hover:neutral-800 "
       cursor="disabled:not-allowed pointer"
-      flex items-center gap-2 rounded-lg shadow-sm outline-none transition-colors duration-150 ease-in-out
+      flex items-center gap-2 rounded-lg shadow-sm outline-none transition-colors duration-200 ease-in-out
       :class="[
         props.disabled ? 'pointer-events-none' : '',
       ]"