diff --git a/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue b/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue
new file mode 100644
index 000000000..1e4f89e4c
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  placeholder?: string
+  required?: boolean
+  label?: string
+  description?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: val => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <div max-w-full>
+    <label flex="~ col gap-4">
+      <div>
+        <div class="flex items-center gap-1 text-sm font-medium">
+          {{ label || 'Account ID' }}
+          <span v-if="required !== false" class="text-red-500">*</span>
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+          {{ description || 'Account ID' }}
+        </div>
+      </div>
+      <input
+        v-model="value"
+        type="text"
+        border="neutral-200 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+        transition="all duration-250 ease-in-out"
+        w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
+        bg="neutral-100 dark:neutral-800 focus:white dark:focus:neutral-700"
+        :placeholder="placeholder"
+      >
+    </label>
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.vue b/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.vue
new file mode 100644
index 000000000..19bc598db
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import Collapsable from '../../../components/Collapsable.vue'
+
+const props = defineProps<{
+  title?: string
+  initialVisible?: boolean
+}>()
+
+const visible = ref(props.initialVisible || false)
+
+function toggleVisible() {
+  visible.value = !visible.value
+}
+</script>
+
+<template>
+  <Collapsable w-full>
+    <template #trigger="slotProps">
+      <button
+        transition="all ease-in-out duration-250"
+        w-full flex items-center gap-1.5 outline-none
+        class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
+        @click="() => slotProps.setVisible(!slotProps.visible) && toggleVisible()"
+      >
+        <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
+          <span>{{ title || 'Advanced' }}</span>
+        </h2>
+        <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
+          <div i-solar:alt-arrow-down-bold-duotone />
+        </div>
+      </button>
+    </template>
+    <div mt-4>
+      <slot />
+    </div>
+  </Collapsable>
+</template>
diff --git a/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue b/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue
new file mode 100644
index 000000000..b30fe6020
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  providerName: string
+  placeholder?: string
+  required?: boolean
+  label?: string
+  description?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: val => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <div max-w-full>
+    <label flex="~ col gap-4">
+      <div>
+        <div class="flex items-center gap-1 text-sm font-medium">
+          {{ label || 'API Key' }}
+          <span v-if="required !== false" class="text-red-500">*</span>
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+          {{ description || `API Key for ${providerName}` }}
+        </div>
+      </div>
+      <input
+        v-model="value"
+        type="password"
+        border="neutral-200 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+        transition="all duration-250 ease-in-out"
+        w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
+        bg="neutral-100 dark:neutral-800 focus:white dark:focus:neutral-700"
+        :placeholder="placeholder"
+      >
+    </label>
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue b/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue
new file mode 100644
index 000000000..aa8b3638e
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  placeholder?: string
+  required?: boolean
+  label?: string
+  description?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: val => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <label flex="~ col gap-4">
+    <div>
+      <div class="flex items-center gap-1 text-sm font-medium">
+        {{ label || 'Base URL' }}
+        <span v-if="required" class="text-red-500">*</span>
+      </div>
+      <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+        {{ description || 'Custom base URL (optional)' }}
+      </div>
+    </div>
+    <input
+      v-model="value"
+      type="text"
+      border="neutral-200 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+      transition="all duration-250 ease-in-out"
+      w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
+      bg="neutral-100 dark:neutral-800 focus:white dark:focus:neutral-700"
+      :placeholder="placeholder"
+    >
+  </label>
+</template>
diff --git a/packages/stage-ui/src/components/Providers/ProviderBasicSettings.vue b/packages/stage-ui/src/components/Providers/ProviderBasicSettings.vue
new file mode 100644
index 000000000..400d6cd6f
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/ProviderBasicSettings.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  description?: string
+  onReset?: () => void
+}>()
+</script>
+
+<template>
+  <div flex="~ col gap-6">
+    <div flex="~ row" items-center justify-between>
+      <div>
+        <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
+          {{ title || 'Basic' }}
+        </h2>
+        <div text="neutral-400 dark:neutral-500">
+          <span>{{ description || 'Essential settings' }}</span>
+        </div>
+      </div>
+      <button
+        v-if="onReset"
+        title="Reset settings"
+        flex items-center justify-center rounded-full p-2
+        transition="all duration-250 ease-in-out"
+        text="neutral-500 dark:neutral-400"
+        bg="transparent dark:transparent hover:neutral-200 dark:hover:neutral-800 active:neutral-300 dark:active:neutral-700"
+        @click="onReset"
+      >
+        <div i-solar:refresh-bold-duotone text-xl />
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/Providers/ProviderCheckboxInput.vue b/packages/stage-ui/src/components/Providers/ProviderCheckboxInput.vue
new file mode 100644
index 000000000..bca9dc663
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/ProviderCheckboxInput.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+  label?: string
+  description?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: val => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <label flex="~ col gap-4">
+    <div flex="~ row" items-center gap-2>
+      <div flex="1">
+        <div class="flex items-center gap-1 text-sm font-medium">
+          {{ label }}
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
+          {{ description }}
+        </div>
+      </div>
+      <span font-mono>{{ value ? 'On' : 'Off' }}</span>
+    </div>
+    <div flex="~ row" items-center gap-2>
+      <input v-model="value" type="checkbox">
+    </div>
+  </label>
+</template>
diff --git a/packages/stage-ui/src/components/Providers/ProviderSettingsContainer.vue b/packages/stage-ui/src/components/Providers/ProviderSettingsContainer.vue
new file mode 100644
index 000000000..9e3b77a6b
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/ProviderSettingsContainer.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// No props needed for this container component
+</script>
+
+<template>
+  <div bg="neutral-50 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4 flex="~ col gap-6">
+    <slot />
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.vue b/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.vue
new file mode 100644
index 000000000..a75be2b89
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{
+  providerName: string
+  providerIcon?: string
+  providerIconColor?: string
+  onBack?: () => void
+}>()
+</script>
+
+<template>
+  <div
+    v-motion
+    flex="~ row" items-center gap-2
+    :initial="{ opacity: 0, x: 10 }"
+    :enter="{ opacity: 1, x: 0 }"
+    :leave="{ opacity: 0, x: -10 }"
+    :duration="250"
+  >
+    <button @click="onBack">
+      <div i-solar:alt-arrow-left-line-duotone text-2xl />
+    </button>
+    <h1 relative>
+      <div absolute left-0 top-0 translate-y="[-80%]">
+        <span text="neutral-300 dark:neutral-500">Provider</span>
+      </div>
+      <div text-3xl font-semibold>
+        {{ providerName }}
+      </div>
+    </h1>
+  </div>
+  <slot />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" :class="providerIcon || providerIconColor" />
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/Providers/ProviderSliderInput.vue b/packages/stage-ui/src/components/Providers/ProviderSliderInput.vue
new file mode 100644
index 000000000..d0c6a7a17
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/ProviderSliderInput.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import Range from '../../../components/Range.vue'
+
+const props = defineProps<{
+  modelValue: number
+  min?: number
+  max?: number
+  step?: number
+  label?: string
+  description?: string
+  formatValue?: (value: number) => string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: val => emit('update:modelValue', val),
+})
+
+const formattedValue = computed(() => {
+  if (props.formatValue) {
+    return props.formatValue(value.value)
+  }
+  return value.value.toFixed(2)
+})
+</script>
+
+<template>
+  <label flex="~ col gap-4">
+    <div flex="~ row" items-center gap-2>
+      <div flex="1">
+        <div class="flex items-center gap-1 text-sm font-medium">
+          {{ label }}
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
+          {{ description }}
+        </div>
+      </div>
+      <span font-mono>{{ formattedValue }}</span>
+    </div>
+    <div flex="~ row" items-center gap-2>
+      <Range
+        v-model="value"
+        :min="min || 0"
+        :max="max || 1"
+        :step="step || 0.01"
+        w-full
+      />
+    </div>
+  </label>
+</template>
diff --git a/packages/stage-ui/src/components/Providers/index.ts b/packages/stage-ui/src/components/Providers/index.ts
new file mode 100644
index 000000000..acdeb03a0
--- /dev/null
+++ b/packages/stage-ui/src/components/Providers/index.ts
@@ -0,0 +1,9 @@
+export { default as ProviderAccountIdInput } from './ProviderAccountIdInput.vue'
+export { default as ProviderAdvancedSettings } from './ProviderAdvancedSettings.vue'
+export { default as ProviderApiKeyInput } from './ProviderApiKeyInput.vue'
+export { default as ProviderBaseUrlInput } from './ProviderBaseUrlInput.vue'
+export { default as ProviderBasicSettings } from './ProviderBasicSettings.vue'
+export { default as ProviderCheckboxInput } from './ProviderCheckboxInput.vue'
+export { default as ProviderSettingsContainer } from './ProviderSettingsContainer.vue'
+export { default as ProviderSettingsLayout } from './ProviderSettingsLayout.vue'
+export { default as ProviderSliderInput } from './ProviderSliderInput.vue'
diff --git a/packages/stage-ui/src/components/index.ts b/packages/stage-ui/src/components/index.ts
index ab6ad748d..f053fbf95 100644
--- a/packages/stage-ui/src/components/index.ts
+++ b/packages/stage-ui/src/components/index.ts
@@ -4,7 +4,7 @@ export * from './Form'
 export { default as Live2DCanvas } from './Live2D/Canvas.vue'
 export { default as Live2DModel } from './Live2D/Model.vue'
 export * from './Menu'
-export * from './providers'
+export * from './Providers'
 export { default as SceneLive2D } from './Scenes/Live2D.vue'
 export { default as SceneVRM } from './Scenes/VRM.vue'
 export { default as TransitionVertical } from './TransitionVertical.vue'