diff --git a/apps/stage-tamagotchi/src/renderer/layouts/settings.vue b/apps/stage-tamagotchi/src/renderer/layouts/settings.vue
index fb37aa222..6dbdff5db 100644
--- a/apps/stage-tamagotchi/src/renderer/layouts/settings.vue
+++ b/apps/stage-tamagotchi/src/renderer/layouts/settings.vue
@@ -111,7 +111,7 @@ const routeHeaderMetadataMap = computed(() => {
   }
 
   for (const metadata of allProvidersMetadata.value) {
-    map[`/settings/providers/${metadata.id}`] = {
+    map[`/settings/providers/${metadata.category}/${metadata.id}`] = {
       subtitle: t('settings.title'),
       title: t(metadata.nameKey),
     }
diff --git a/apps/stage-web/src/layouts/settings.vue b/apps/stage-web/src/layouts/settings.vue
index ca3f2b383..cf95455ef 100644
--- a/apps/stage-web/src/layouts/settings.vue
+++ b/apps/stage-web/src/layouts/settings.vue
@@ -101,7 +101,7 @@ const routeHeaderMetadataMap = computed(() => {
   }
 
   for (const metadata of allProvidersMetadata.value) {
-    map[`/settings/providers/${metadata.id}`] = {
+    map[`/settings/providers/${metadata.category}/${metadata.id}`] = {
       subtitle: t('settings.title'),
       title: t(metadata.nameKey),
     }
@@ -138,7 +138,7 @@ onMounted(() => updateThemeColor())
       <HeaderLink />
     </div>
     <!-- Content -->
-    <div class="h-[calc(100%-40px)] px-3 py-0 2xl:max-w-[2160px] sm:h-[calc(100%-56px)] md:py-0 xl:px-4" flex="~ col" mx-auto>
+    <div class="h-[calc(100%-40px)] px-3 py-0 sm:h-[calc(100%-56px)] 2xl:max-w-screen-2xl md:py-0 xl:px-4" flex="~ col" mx-auto>
       <PageHeader
         :title="routeHeaderMetadata?.title"
         :subtitle="routeHeaderMetadata?.subtitle"
diff --git a/packages/stage-pages/src/pages/settings/providers/anthropic.vue b/packages/stage-pages/src/pages/settings/providers/anthropic.vue
deleted file mode 100644
index 54d14f743..000000000
--- a/packages/stage-pages/src/pages/settings/providers/anthropic.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'anthropic'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-ant-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.anthropic.com/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/302-ai.vue b/packages/stage-pages/src/pages/settings/providers/chat/[providerId].vue
similarity index 93%
rename from packages/stage-pages/src/pages/settings/providers/302-ai.vue
rename to packages/stage-pages/src/pages/settings/providers/chat/[providerId].vue
index 47206f4b8..58e900541 100644
--- a/packages/stage-pages/src/pages/settings/providers/302-ai.vue
+++ b/packages/stage-pages/src/pages/settings/providers/chat/[providerId].vue
@@ -14,8 +14,10 @@ import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provi
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 
-const providerId = '302-ai'
+const route = useRoute()
+const providerId = route.params.providerId as string
 const providersStore = useProvidersStore()
 const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
 
@@ -72,7 +74,7 @@ const {
       <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
         <ProviderBaseUrlInput
           v-model="baseUrl"
-          placeholder="https://api.302.ai/v1/"
+          :placeholder="providerMetadata?.defaultOptions?.().baseUrl as string || 'Base URL of your provider'"
         />
       </ProviderAdvancedSettings>
 
diff --git a/packages/stage-pages/src/pages/settings/providers/azure-ai-foundry.vue b/packages/stage-pages/src/pages/settings/providers/chat/azure-ai-foundry.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/azure-ai-foundry.vue
rename to packages/stage-pages/src/pages/settings/providers/chat/azure-ai-foundry.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/cloudflare-workers-ai.vue b/packages/stage-pages/src/pages/settings/providers/chat/cloudflare-workers-ai.vue
similarity index 98%
rename from packages/stage-pages/src/pages/settings/providers/cloudflare-workers-ai.vue
rename to packages/stage-pages/src/pages/settings/providers/chat/cloudflare-workers-ai.vue
index 3e67b4234..26be5f2c7 100644
--- a/packages/stage-pages/src/pages/settings/providers/cloudflare-workers-ai.vue
+++ b/packages/stage-pages/src/pages/settings/providers/chat/cloudflare-workers-ai.vue
@@ -52,6 +52,7 @@ const {
 <template>
   <ProviderSettingsLayout
     :provider-name="providerMetadata?.localizedName"
+    :provider-icon="providerMetadata?.icon"
     :provider-icon-color="providerMetadata?.iconColor"
     :on-back="() => router.back()"
   >
diff --git a/packages/stage-pages/src/pages/settings/providers/ollama.vue b/packages/stage-pages/src/pages/settings/providers/chat/ollama.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/ollama.vue
rename to packages/stage-pages/src/pages/settings/providers/chat/ollama.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/deepseek.vue b/packages/stage-pages/src/pages/settings/providers/deepseek.vue
deleted file mode 100644
index 477785b83..000000000
--- a/packages/stage-pages/src/pages/settings/providers/deepseek.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'deepseek'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="ds-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.deepseek.com/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/featherless-ai.vue b/packages/stage-pages/src/pages/settings/providers/featherless-ai.vue
deleted file mode 100644
index 577e0417e..000000000
--- a/packages/stage-pages/src/pages/settings/providers/featherless-ai.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'featherless-ai'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.featherless.ai/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/fireworks-ai.vue b/packages/stage-pages/src/pages/settings/providers/fireworks-ai.vue
deleted file mode 100644
index 49c0fc9f4..000000000
--- a/packages/stage-pages/src/pages/settings/providers/fireworks-ai.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'fireworks-ai'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="fw-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.fireworks.ai/inference/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/google-generative-ai.vue b/packages/stage-pages/src/pages/settings/providers/google-generative-ai.vue
deleted file mode 100644
index 1c2e7b7dd..000000000
--- a/packages/stage-pages/src/pages/settings/providers/google-generative-ai.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'google-generative-ai'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || 'https://generativelanguage.googleapis.com/v1beta/openai/',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="AIza..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://generativelanguage.googleapis.com/v1beta/openai/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/index.vue b/packages/stage-pages/src/pages/settings/providers/index.vue
index 1f051afa3..227a35914 100644
--- a/packages/stage-pages/src/pages/settings/providers/index.vue
+++ b/packages/stage-pages/src/pages/settings/providers/index.vue
@@ -51,7 +51,7 @@ const {
         :icon="provider.icon"
         :icon-color="provider.iconColor"
         :icon-image="provider.iconImage"
-        :to="`/settings/providers/${provider.id}`"
+        :to="`/settings/providers/${provider.category}/${provider.id}`"
         :configured="provider.configured"
       />
     </div>
@@ -82,7 +82,7 @@ const {
         :icon="provider.icon"
         :icon-color="provider.iconColor"
         :icon-image="provider.iconImage"
-        :to="`/settings/providers/${provider.id}`"
+        :to="`/settings/providers/${provider.category}/${provider.id}`"
         :configured="provider.configured"
       />
     </div>
@@ -113,7 +113,7 @@ const {
         :icon="provider.icon"
         :icon-color="provider.iconColor"
         :icon-image="provider.iconImage"
-        :to="`/settings/providers/${provider.id}`"
+        :to="`/settings/providers/${provider.category}/${provider.id}`"
         :configured="provider.configured"
       />
     </div>
diff --git a/packages/stage-pages/src/pages/settings/providers/lm-studio.vue b/packages/stage-pages/src/pages/settings/providers/lm-studio.vue
deleted file mode 100644
index f0bfa0f64..000000000
--- a/packages/stage-pages/src/pages/settings/providers/lm-studio.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'lm-studio'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="lm-studio"
-          :is-required="false"
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="http://localhost:1234/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/mistral-ai.vue b/packages/stage-pages/src/pages/settings/providers/mistral-ai.vue
deleted file mode 100644
index 21558baa9..000000000
--- a/packages/stage-pages/src/pages/settings/providers/mistral-ai.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'mistral-ai'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.mistral.ai/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/modelscope.vue b/packages/stage-pages/src/pages/settings/providers/modelscope.vue
deleted file mode 100644
index 6fa2f1ce6..000000000
--- a/packages/stage-pages/src/pages/settings/providers/modelscope.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed, onMounted, watch } from 'vue'
-
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Get provider metadata
-const providerId = 'modelscope'
-
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-
-// Use computed properties for settings
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-onMounted(() => {
-  // Initialize provider if it doesn't exist
-  providersStore.initializeProvider(providerId)
-
-  // Initialize refs with current values
-  apiKey.value = providers.value[providerId]?.apiKey || ''
-  baseUrl.value = providers.value[providerId]?.baseUrl || ''
-})
-
-// Watch settings and update the provider configuration
-watch([apiKey, baseUrl], () => {
-  providers.value[providerId] = {
-    ...providers.value[providerId],
-    apiKey: apiKey.value,
-    baseUrl: baseUrl.value || '',
-  }
-})
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon="providerMetadata?.icon"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="ms-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api-inference.modelscope.cn/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-  meta:
-    layout: settings
-    stageTransition:
-      name: slide
-  </route>
diff --git a/packages/stage-pages/src/pages/settings/providers/moonshot-ai.vue b/packages/stage-pages/src/pages/settings/providers/moonshot-ai.vue
deleted file mode 100644
index 829e426dd..000000000
--- a/packages/stage-pages/src/pages/settings/providers/moonshot-ai.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'moonshot-ai'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.moonshot.cn/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/novita-ai.vue b/packages/stage-pages/src/pages/settings/providers/novita-ai.vue
deleted file mode 100644
index e073cff49..000000000
--- a/packages/stage-pages/src/pages/settings/providers/novita-ai.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'novita-ai'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.novita.ai/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/openai-compatible.vue b/packages/stage-pages/src/pages/settings/providers/openai-compatible.vue
deleted file mode 100644
index 421a3437f..000000000
--- a/packages/stage-pages/src/pages/settings/providers/openai-compatible.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'openai-compatible'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.openai.com/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/openai.vue b/packages/stage-pages/src/pages/settings/providers/openai.vue
deleted file mode 100644
index e96c5bf21..000000000
--- a/packages/stage-pages/src/pages/settings/providers/openai.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'openai'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.openai.com/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/openrouter-ai.vue b/packages/stage-pages/src/pages/settings/providers/openrouter-ai.vue
deleted file mode 100644
index e0ca7870f..000000000
--- a/packages/stage-pages/src/pages/settings/providers/openrouter-ai.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/core'
-
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const providerId = 'openrouter-ai'
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Define computed properties for credentials
-const apiKey = computed({
-  get: () => providers.value[providerId]?.apiKey || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].apiKey = value
-  },
-})
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-    providers.value[providerId].baseUrl = value
-  },
-})
-
-// Use the composable to get validation logic and state
-const {
-  t,
-  router,
-  providerMetadata,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-or-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://openrouter.ai/api/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/player2.vue b/packages/stage-pages/src/pages/settings/providers/player2.vue
deleted file mode 100644
index 190d00120..000000000
--- a/packages/stage-pages/src/pages/settings/providers/player2.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import type { RemovableRef } from '@vueuse/shared'
-
-import {
-  Alert,
-  ProviderBaseUrlInput,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
-
-const { t } = useI18n()
-const router = useRouter()
-const providersStore = useProvidersStore()
-const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
-
-// Get provider metadata
-const providerId = 'player2'
-const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
-
-const baseUrl = computed({
-  get: () => providers.value[providerId]?.baseUrl || '',
-  set: (value) => {
-    if (!providers.value[providerId])
-      providers.value[providerId] = {}
-
-    providers.value[providerId].baseUrl = value
-  },
-})
-const hasPlayer2 = ref(true)
-
-onMounted(async () => {
-  providersStore.initializeProvider(providerId)
-  baseUrl.value = providers.value[providerId]?.baseUrl || ''
-
-  try {
-    const res = await fetch(`${baseUrl.value}health`, {
-      method: 'GET',
-      headers: {
-        'player2-game-key': 'airi',
-      },
-    })
-    hasPlayer2.value = res.status === 200
-  }
-  catch (e) {
-    console.error(e)
-    hasPlayer2.value = false
-  }
-})
-
-// Watch settings and update the provider configuration
-watch([baseUrl], () => {
-  providers.value[providerId] = {
-    ...providers.value[providerId],
-    baseUrl: baseUrl.value || '',
-  }
-})
-
-function handleResetSettings() {
-  providers.value[providerId] = {
-    ...(providerMetadata.value?.defaultOptions as any),
-  }
-}
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon="providerMetadata?.icon"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderBaseUrlInput v-model="baseUrl" placeholder="http://localhost:4315/v1/" />
-      </ProviderBasicSettings>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-  <Alert v-if="!hasPlayer2" type="error">
-    <template #title>
-      {{ t('settings.dialogs.onboarding.validationFailed') }}
-    </template>
-    <template #content>
-      <div class="whitespace-pre-wrap break-all">
-        <div>
-          Please download and run the Player2 App:
-          <a href="https://player2.game" target="_blank" rel="noopener noreferrer">
-            https://player2.game
-          </a>
-
-          <div>
-            After downloading, if you still are having trouble, please reach out to us on Discord:
-            <a href="https://player2.game/discord" target="_blank" rel="noopener noreferrer">
-              https://player2.game/discord
-            </a>.
-          </div>
-        </div>
-      </div>
-    </template>
-  </Alert>
-</template>
-
-<route lang="yaml">
-  meta:
-    layout: settings
-    stageTransition:
-      name: slide
-  </route>
diff --git a/packages/stage-pages/src/pages/settings/providers/alibaba-cloud-model-studio.vue b/packages/stage-pages/src/pages/settings/providers/speech/alibaba-cloud-model-studio.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/alibaba-cloud-model-studio.vue
rename to packages/stage-pages/src/pages/settings/providers/speech/alibaba-cloud-model-studio.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/elevenlabs.vue b/packages/stage-pages/src/pages/settings/providers/speech/elevenlabs.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/elevenlabs.vue
rename to packages/stage-pages/src/pages/settings/providers/speech/elevenlabs.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/index-tts-vllm.vue b/packages/stage-pages/src/pages/settings/providers/speech/index-tts-vllm.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/index-tts-vllm.vue
rename to packages/stage-pages/src/pages/settings/providers/speech/index-tts-vllm.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/microsoft-speech.vue b/packages/stage-pages/src/pages/settings/providers/speech/microsoft-speech.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/microsoft-speech.vue
rename to packages/stage-pages/src/pages/settings/providers/speech/microsoft-speech.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/openai-audio-speech.vue b/packages/stage-pages/src/pages/settings/providers/speech/openai-audio-speech.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/openai-audio-speech.vue
rename to packages/stage-pages/src/pages/settings/providers/speech/openai-audio-speech.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/openai-compatible-audio-speech.vue b/packages/stage-pages/src/pages/settings/providers/speech/openai-compatible-audio-speech.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/openai-compatible-audio-speech.vue
rename to packages/stage-pages/src/pages/settings/providers/speech/openai-compatible-audio-speech.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/player2-speech.vue b/packages/stage-pages/src/pages/settings/providers/speech/player2-speech.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/player2-speech.vue
rename to packages/stage-pages/src/pages/settings/providers/speech/player2-speech.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/volcengine.vue b/packages/stage-pages/src/pages/settings/providers/speech/volcengine.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/volcengine.vue
rename to packages/stage-pages/src/pages/settings/providers/speech/volcengine.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/together-ai.vue b/packages/stage-pages/src/pages/settings/providers/together-ai.vue
deleted file mode 100644
index 4c8285d00..000000000
--- a/packages/stage-pages/src/pages/settings/providers/together-ai.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-
-const providerId = 'together-ai'
-
-const {
-  t,
-  router,
-  providerMetadata,
-  apiKey,
-  baseUrl,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="sk-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.together.xyz/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/openai-audio-transcription.vue b/packages/stage-pages/src/pages/settings/providers/transcription/openai-audio-transcription.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/openai-audio-transcription.vue
rename to packages/stage-pages/src/pages/settings/providers/transcription/openai-audio-transcription.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/openai-compatible-audio-transcription.vue b/packages/stage-pages/src/pages/settings/providers/transcription/openai-compatible-audio-transcription.vue
similarity index 100%
rename from packages/stage-pages/src/pages/settings/providers/openai-compatible-audio-transcription.vue
rename to packages/stage-pages/src/pages/settings/providers/transcription/openai-compatible-audio-transcription.vue
diff --git a/packages/stage-pages/src/pages/settings/providers/vllm.vue b/packages/stage-pages/src/pages/settings/providers/vllm.vue
deleted file mode 100644
index 864d173af..000000000
--- a/packages/stage-pages/src/pages/settings/providers/vllm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-
-const providerId = 'vllm'
-
-const {
-  t,
-  router,
-  providerMetadata,
-  apiKey,
-  baseUrl,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="token-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="http://localhost:8000/v1"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-pages/src/pages/settings/providers/xai.vue b/packages/stage-pages/src/pages/settings/providers/xai.vue
deleted file mode 100644
index ac070cb28..000000000
--- a/packages/stage-pages/src/pages/settings/providers/xai.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import {
-  Alert,
-  ProviderAdvancedSettings,
-  ProviderApiKeyInput,
-  ProviderBaseUrlInput,
-  ProviderBasicSettings,
-  ProviderSettingsContainer,
-  ProviderSettingsLayout,
-} from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
-
-const providerId = 'xai'
-
-const {
-  t,
-  router,
-  providerMetadata,
-  apiKey,
-  baseUrl,
-  isValidating,
-  isValid,
-  validationMessage,
-  handleResetSettings,
-} = useProviderValidation(providerId)
-</script>
-
-<template>
-  <ProviderSettingsLayout
-    :provider-name="providerMetadata?.localizedName"
-    :provider-icon-color="providerMetadata?.iconColor"
-    :on-back="() => router.back()"
-  >
-    <ProviderSettingsContainer>
-      <ProviderBasicSettings
-        :title="t('settings.pages.providers.common.section.basic.title')"
-        :description="t('settings.pages.providers.common.section.basic.description')"
-        :on-reset="handleResetSettings"
-      >
-        <ProviderApiKeyInput
-          v-model="apiKey"
-          :provider-name="providerMetadata?.localizedName"
-          placeholder="xai-..."
-        />
-      </ProviderBasicSettings>
-
-      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <ProviderBaseUrlInput
-          v-model="baseUrl"
-          placeholder="https://api.x.ai/v1/"
-        />
-      </ProviderAdvancedSettings>
-
-      <!-- Validation Status -->
-      <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationFailed') }}
-        </template>
-        <template v-if="validationMessage" #content>
-          <div class="whitespace-pre-wrap break-all">
-            {{ validationMessage }}
-          </div>
-        </template>
-      </Alert>
-      <Alert v-if="isValid && isValidating === 0" type="success">
-        <template #title>
-          {{ t('settings.dialogs.onboarding.validationSuccess') }}
-        </template>
-      </Alert>
-    </ProviderSettingsContainer>
-  </ProviderSettingsLayout>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: settings
-  stageTransition:
-    name: slide
-</route>
diff --git a/packages/stage-ui/src/components/scenarios/providers/ProviderSettingsLayout2.vue b/packages/stage-ui/src/components/scenarios/providers/ProviderSettingsLayout2.vue
deleted file mode 100644
index c674d3b64..000000000
--- a/packages/stage-ui/src/components/scenarios/providers/ProviderSettingsLayout2.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  providerName: string
-  providerIcon?: string
-  providerIconColor?: string
-  onBack?: () => void
-}>()
-</script>
-
-<template>
-  <slot />
-  <div
-    v-motion
-    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[calc(100dvh-15rem)]" bottom-0 right--5 z--1
-    :initial="{ scale: 0.9, opacity: 0, x: 20 }"
-    :enter="{ scale: 1, opacity: 1, x: 0 }"
-    :duration="500"
-    size-60
-  >
-    <div text="60" :class="providerIcon || providerIconColor" />
-  </div>
-</template>
diff --git a/packages/stage-ui/src/components/scenarios/providers/SpeechProviderSettings.vue b/packages/stage-ui/src/components/scenarios/providers/SpeechProviderSettings.vue
index 3741b4780..bd861b5af 100644
--- a/packages/stage-ui/src/components/scenarios/providers/SpeechProviderSettings.vue
+++ b/packages/stage-ui/src/components/scenarios/providers/SpeechProviderSettings.vue
@@ -5,7 +5,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
-import ProviderSettingsLayout2 from './ProviderSettingsLayout2.vue'
+import ProviderSettingsLayout from './ProviderSettingsLayout.vue'
 
 import {
   ProviderAdvancedSettings,
@@ -121,9 +121,10 @@ function handleResetVoiceSettings() {
 </script>
 
 <template>
-  <ProviderSettingsLayout2
+  <ProviderSettingsLayout
     :provider-name="providerMetadata?.localizedName"
     :provider-icon="providerMetadata?.icon"
+    :provider-icon-color="providerMetadata?.iconColor"
     :on-back="() => router.back()"
   >
     <div flex="~ col md:row gap-6">
@@ -169,5 +170,5 @@ function handleResetVoiceSettings() {
         </div>
       </div>
     </div>
-  </ProviderSettingsLayout2>
+  </ProviderSettingsLayout>
 </template>
diff --git a/packages/stage-ui/src/components/scenarios/providers/TranscriptionProviderSettings.vue b/packages/stage-ui/src/components/scenarios/providers/TranscriptionProviderSettings.vue
index 69e4e3daf..f3e280cc7 100644
--- a/packages/stage-ui/src/components/scenarios/providers/TranscriptionProviderSettings.vue
+++ b/packages/stage-ui/src/components/scenarios/providers/TranscriptionProviderSettings.vue
@@ -10,7 +10,7 @@ import {
   ProviderBaseUrlInput,
   ProviderBasicSettings,
   ProviderSettingsContainer,
-  ProviderSettingsLayout2,
+  ProviderSettingsLayout,
 } from '.'
 import { useProvidersStore } from '../../../stores/providers'
 
@@ -67,9 +67,10 @@ function handleResetTranscriptionSettings() {
 </script>
 
 <template>
-  <ProviderSettingsLayout2
+  <ProviderSettingsLayout
     :provider-name="providerMetadata?.localizedName"
     :provider-icon="providerMetadata?.icon"
+    :provider-icon-color="providerMetadata?.iconColor"
     :on-back="() => router.back()"
   >
     <div flex="~ col md:row gap-6">
@@ -104,5 +105,5 @@ function handleResetTranscriptionSettings() {
         </div>
       </div>
     </div>
-  </ProviderSettingsLayout2>
+  </ProviderSettingsLayout>
 </template>
diff --git a/packages/stage-ui/src/components/scenarios/providers/index.ts b/packages/stage-ui/src/components/scenarios/providers/index.ts
index c50f23cbb..80f14c123 100644
--- a/packages/stage-ui/src/components/scenarios/providers/index.ts
+++ b/packages/stage-ui/src/components/scenarios/providers/index.ts
@@ -4,7 +4,6 @@ export { default as ProviderApiKeyInput } from './ProviderApiKeyInput.vue'
 export { default as ProviderBaseUrlInput } from './ProviderBaseUrlInput.vue'
 export { default as ProviderBasicSettings } from './ProviderBasicSettings.vue'
 export { default as ProviderSettingsContainer } from './ProviderSettingsContainer.vue'
-export { default as ProviderSettingsLayout2 } from './ProviderSettingsLayout2.vue'
 export { default as ProviderSettingsLayout } from './ProviderSettingsLayout.vue'
 
 export { default as SpeechPlayground } from './SpeechPlayground.vue'