From 0db4fa3f7cbfc25f3ff740a40ad4bf8a4e90e404 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Mon, 21 Jul 2025 01:52:48 +0800
Subject: [PATCH] feat(stage-*): dramatically improved mobile

---
 .../src/components/ChatSimulator.vue          |   1 +
 .../components/Layouts/InteractiveArea.vue    |  58 +---
 .../InteractiveArea/Actions/ViewControls.vue  |  73 +++++
 .../src/components/Layouts/MobileHeader.vue   |  11 +
 .../Layouts/MobileInteractiveArea.vue         | 108 +++++--
 .../Layouts/ViewControls/Inputs.vue           | 203 +++++++++++++
 .../src/components/Widgets/ChatHistory.vue    |  15 +-
 .../components/Widgets/MobileChatHistory.vue  |  21 +-
 apps/stage-web/src/layouts/settings.vue       |   2 +-
 apps/stage-web/src/pages/index.vue            |   8 +-
 .../src/pages/settings/models/index.vue       |  11 +-
 apps/stage-web/src/pages/stage/index.vue      |  31 +-
 apps/stage-web/src/styles/main.css            |   1 +
 apps/stage-web/src/styles/vue-transitions.css |  48 +++
 .../Form/Range/RoundRange.story.vue           |  28 ++
 .../src/components/Layouts/Callout.vue        |   8 +-
 .../stage-ui/src/components/Misc/Button.vue   |  45 ++-
 .../Settings/ModelSettings/Live2DScene.vue    |  42 ---
 .../Scenarios/Settings/ModelSettings/VRM.vue  | 209 +++++++------
 .../Settings/ModelSettings/VRMScene.vue       |  53 ----
 .../Scenarios/Settings/ModelSettings/index.ts |   4 -
 .../Settings/ModelSettings/index.vue          |  35 ++-
 .../stage-ui/src/components/Scenes/Live2D.vue |  92 +-----
 .../stage-ui/src/components/Scenes/Stage.vue  |   3 +-
 .../stage-ui/src/components/Scenes/VRM.vue    | 180 ++----------
 .../src/components/Scenes/VRM/Model.vue       |  22 +-
 packages/stage-ui/src/stores/settings.ts      |   2 +
 packages/stage-ui/src/stores/vrm.ts           |  14 +-
 .../ui/src/components/Form/Range/Range.vue    |   3 +
 .../src/components/Form/Range/RoundRange.vue  | 277 ++++++++++++++++++
 .../ui/src/components/Form/Range/index.ts     |   1 +
 31 files changed, 1016 insertions(+), 593 deletions(-)
 create mode 100644 apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
 create mode 100644 apps/stage-web/src/components/Layouts/MobileHeader.vue
 create mode 100644 apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue
 create mode 100644 apps/stage-web/src/styles/vue-transitions.css
 create mode 100644 packages/stage-ui/src/components/Form/Range/RoundRange.story.vue
 delete mode 100644 packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2DScene.vue
 delete mode 100644 packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRMScene.vue
 create mode 100644 packages/ui/src/components/Form/Range/RoundRange.vue

diff --git a/apps/playground-prompt-engineering/src/components/ChatSimulator.vue b/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
index 55184359..5175a362 100644
--- a/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
+++ b/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
@@ -331,6 +331,7 @@ watch(() => messages.value.length, () => {
 
 .line-clamp-2 {
   display: -webkit-box;
+  line-clamp: 2;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
index ac805b47..ed4764fb 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -6,7 +6,7 @@ import WhisperWorker from '@proj-airi/stage-ui/libs/workers/worker?worker&url'
 import { toWAVBase64 } from '@proj-airi/audio'
 import { useMicVAD, useWhisper } from '@proj-airi/stage-ui/composables'
 import { useAudioContext, useChatStore, useConsciousnessStore, useProvidersStore, useSettings } from '@proj-airi/stage-ui/stores'
-import { BasicTextarea, TransitionVertical } from '@proj-airi/ui'
+import { BasicTextarea } from '@proj-airi/ui'
 import { useDevicesList } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
@@ -24,8 +24,8 @@ const providersStore = useProvidersStore()
 const { activeProvider, activeModel } = storeToRefs(useConsciousnessStore())
 const { themeColorsHueDynamic } = storeToRefs(useSettings())
 
-const { audioInputs, ensurePermissions } = useDevicesList({ constraints: { audio: true } })
-const { selectedAudioDevice, isAudioInputOn, selectedAudioDeviceId } = storeToRefs(useSettings())
+const { ensurePermissions } = useDevicesList({ constraints: { audio: true } })
+const { isAudioInputOn, selectedAudioDeviceId } = storeToRefs(useSettings())
 const { send, onAfterSend, discoverToolsCompatibility } = useChatStore()
 const { messages } = storeToRefs(useChatStore())
 const { audioContext } = useAudioContext()
@@ -104,17 +104,6 @@ async function handleTranscription(buffer: ArrayBufferLike) {
   generate({ type: 'generate', data: { audio: audioBase64, language: 'en' } })
 }
 
-async function handleAudioInputChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const found = audioInputs.value.find(d => d.deviceId === target.value)
-  if (!found) {
-    selectedAudioDevice.value = undefined
-    return
-  }
-
-  selectedAudioDevice.value = found
-}
-
 watch(isAudioInputOn, async (value) => {
   if (value === 'false') {
     destroy()
@@ -195,46 +184,5 @@ onAfterSend(async () => {
         </div>
       </div>
     </div>
-    <div flex="~ row" gap-2 hidden>
-      <div flex="~ row" relative text-white font-normal>
-        <TransitionVertical>
-          <fieldset
-            v-if="showMicrophoneSelect"
-            right="0" bottom="[calc(100%+8px)]" text="cyan-400 dark:white" bg="white dark:cyan-900"
-            absolute z-30 h-fit rounded-2xl py-3 pl-3 pr-4 text-right text-nowrap text-sm font-sans
-          >
-            <label v-for="(input, index) in audioInputs" :key="index" class="[&_div_span]:dark:hover:bg-cyan-300 [&_div_span]:dark:hover:bg-cyan-900">
-              <input type="radio" name="audioInput" :value="input.deviceId" hidden @change="handleAudioInputChange">
-              <div flex="~ row" cursor-pointer items-center grid="cols-2">
-                <div min-w="6">
-                  <div v-if="input.deviceId === selectedAudioDeviceId" i-solar:check-circle-line-duotone />
-                </div>
-                <span
-                  inline-block
-                  :class="[input.deviceId === selectedAudioDeviceId ? 'cyan-400 dark:text-white' : 'cyan-400/50 dark:text-white/50']"
-                  transition="all duration-250 ease-in-out"
-                >
-                  {{ input.label }}
-                </span>
-              </div>
-            </label>
-          </fieldset>
-        </TransitionVertical>
-        <label
-          bg="complementary-100 hover:complementary-200 dark:complementary-800 dark:hover:complementary-700"
-          transition="all duration-250 ease-in-out"
-          :class="{ 'transition-colors-none': themeColorsHueDynamic }"
-          text="complementary-400"
-          h-fit flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
-        >
-          <input v-model="showMicrophoneSelect" type="checkbox" hidden>
-          <div i-solar:microphone-2-bold-duotone />
-          <div>
-            <span v-if="!listening">{{ t('settings.microphone') }}</span>
-            <span v-else>Listening...</span>
-          </div>
-        </label>
-      </div>
-    </div>
   </div>
 </template>
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue b/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
new file mode 100644
index 00000000..a03e2b9b
--- /dev/null
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { Button } from '@proj-airi/stage-ui/components'
+import { useSettings } from '@proj-airi/stage-ui/stores'
+import { storeToRefs } from 'pinia'
+
+const emits = defineEmits<{
+  (e: 'reset'): void
+}>()
+
+const { stageView, stageViewControlsEnabled } = storeToRefs(useSettings())
+
+const mode = defineModel<'x' | 'y' | 'z' | 'scale'>({ required: true })
+
+function handleViewControlsToggle(targetMode: 'x' | 'y' | 'z' | 'scale') {
+  if (mode.value === targetMode) {
+    emits('reset')
+    return
+  }
+
+  mode.value = targetMode
+}
+</script>
+
+<template>
+  <div w-full flex flex-1 items-center self-end justify-end gap-2>
+    <Transition name="fade">
+      <div v-if="stageViewControlsEnabled" w-full flex justify-between gap-2>
+        <Button variant="secondary-muted" :toggled="mode === 'x'" w-full @click="handleViewControlsToggle('x')">
+          X
+        </Button>
+        <Button variant="secondary-muted" :toggled="mode === 'y'" w-full @click="handleViewControlsToggle('y')">
+          Y
+        </Button>
+        <Button v-if="stageView === '3d'" variant="secondary-muted" :toggled="mode === 'z'" w-full @click="handleViewControlsToggle('z')">
+          Z
+        </Button>
+        <Button variant="secondary-muted" :toggled="mode === 'scale'" w-full @click="handleViewControlsToggle('scale')">
+          Scale
+        </Button>
+      </div>
+    </Transition>
+    <button
+      w-fit flex items-center self-end justify-center justify-self-end rounded-xl p-2 backdrop-blur-md
+      border="2 solid neutral-100/60 dark:neutral-800/30"
+      bg="neutral-50/70 dark:neutral-800/70"
+      title="View"
+      text="neutral-500 dark:neutral-400"
+      @click="stageViewControlsEnabled = !stageViewControlsEnabled"
+    >
+      <Transition name="fade" mode="out-in">
+        <div v-if="!stageViewControlsEnabled" i-solar:tuning-outline size-5 />
+        <div v-else i-solar:alt-arrow-right-outline size-5 />
+      </Transition>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+</style>
diff --git a/apps/stage-web/src/components/Layouts/MobileHeader.vue b/apps/stage-web/src/components/Layouts/MobileHeader.vue
new file mode 100644
index 00000000..1664c0d7
--- /dev/null
+++ b/apps/stage-web/src/components/Layouts/MobileHeader.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import HeaderLink from './HeaderLink.vue'
+</script>
+
+<template>
+  <header mb-1 w-full gap-2>
+    <div w-full flex translate-x--2 justify-center>
+      <HeaderLink />
+    </div>
+  </header>
+</template>
diff --git a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
index b359c11c..f92311cf 100644
--- a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
@@ -4,11 +4,20 @@ import type { ChatProvider } from '@xsai-ext/shared-providers'
 import { useMicVAD } from '@proj-airi/stage-ui/composables'
 import { useChatStore, useConsciousnessStore, useProvidersStore, useSettings } from '@proj-airi/stage-ui/stores'
 import { BasicTextarea } from '@proj-airi/ui'
+import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { RouterLink } from 'vue-router'
 
 import MobileChatHistory from '../Widgets/MobileChatHistory.vue'
+import ActionViewControls from './InteractiveArea/Actions/ViewControls.vue'
+import ViewControlInputs from './ViewControls/Inputs.vue'
+
+const isDark = useDark({ disableTransition: false })
+
+const viewControlsActiveMode = ref<'x' | 'y' | 'z' | 'scale'>('scale')
+const viewControlsInputsRef = useTemplateRef<InstanceType<typeof ViewControlInputs>>('viewControlsInputs')
 
 const messageInput = ref('')
 const listening = ref(false)
@@ -19,7 +28,7 @@ const { activeProvider, activeModel } = storeToRefs(useConsciousnessStore())
 
 // const { audioInputs } = useDevicesList({ constraints: { audio: true }, requestPermissions: true })
 // const { selectedAudioDevice, isAudioInputOn, selectedAudioDeviceId } = storeToRefs(useSettings())
-const { isAudioInputOn, selectedAudioDeviceId, themeColorsHueDynamic } = storeToRefs(useSettings())
+const { isAudioInputOn, selectedAudioDeviceId, themeColorsHueDynamic, stageView, stageViewControlsEnabled } = storeToRefs(useSettings())
 const { send, onAfterSend, discoverToolsCompatibility } = useChatStore()
 const { messages } = storeToRefs(useChatStore())
 const { t } = useI18n()
@@ -100,34 +109,75 @@ onMounted(() => {
 </script>
 
 <template>
-  <div fixed bottom-0 w-full flex gap-1 max-w="[calc(100dvw-1rem)]">
-    <MobileChatHistory absolute left-0 top-0 transform="translate-y-[-100%]" h="80dvh" w-full />
-    <div flex flex-1 gap-1>
-      <BasicTextarea
-        v-model="messageInput"
-        :placeholder="t('stage.message')"
-        border="solid 2 primary-50 dark:primary-950/10"
-        text="primary-500 hover:primary-600 dark:primary-100 dark:hover:primary-200 placeholder:primary-400 placeholder:hover:primary-500 placeholder:dark:primary-300 placeholder:dark:hover:primary-400"
-        bg="primary-50/80 dark:primary-950/80"
-        max-h="[10lh]" min-h="[calc(1lh+4px+4px)]"
-        w-full resize-none overflow-y-scroll rounded="[1lh]" px-4 py-0.5 outline-none backdrop-blur-md scrollbar-none
-        transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
-        :class="[themeColorsHueDynamic ? 'transition-colors-none placeholder:transition-colors-none' : '']"
-        default-height="1lh"
-        @submit="handleSend"
-        @compositionstart="isComposing = true"
-        @compositionend="isComposing = false"
-      />
-      <button
+  <div fixed bottom-0 w-full flex flex-col>
+    <KeepAlive>
+      <Transition name="fade">
+        <MobileChatHistory v-if="!stageViewControlsEnabled" max-w="[calc(100%-3.5rem)]" w-full self-start pl-2 />
+      </Transition>
+    </KeepAlive>
+    <div relative w-full self-end>
+      <div fixed top="50%" translate-y="[-50%]" px-2>
+        <ViewControlInputs ref="viewControlsInputs" :mode="viewControlsActiveMode" />
+      </div>
+      <div translate-y="[-100%]" absolute right-0 w-full px-2 pb-2 font-sans>
+        <div flex="~ col" w-full gap-1>
+          <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="About">
+            <div i-solar:info-circle-outline size-5 text="neutral-500 dark:neutral-400" />
+          </button>
+          <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="Theme" @click="isDark = !isDark">
+            <Transition name="fade" mode="out-in">
+              <div v-if="isDark" i-solar:moon-outline size-5 text="neutral-500 dark:neutral-400" />
+              <div v-else i-solar:sun-2-outline size-5 text="neutral-500 dark:neutral-400" />
+            </Transition>
+          </button>
+          <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="Language">
+            <div i-solar:earth-outline size-5 text="neutral-500 dark:neutral-400" />
+          </button>
+          <RouterLink to="/settings" border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="Settings">
+            <div i-solar:settings-outline size-5 text="neutral-500 dark:neutral-400" />
+          </RouterLink>
+          <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="Model">
+            <div i-solar:face-scan-circle-outline size-5 text="neutral-500 dark:neutral-400" />
+          </button>
+          <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="Stage View" @click="stageView = stageView === '2d' ? '3d' : '2d'">
+            <div v-if="stageView === '2d'" size-5 text="neutral-500 dark:neutral-400" inline-flex items-center justify-center>
+              <span>2D</span>
+            </div>
+            <div v-if="stageView === '3d'" size-5 text="neutral-500 dark:neutral-400" inline-flex items-center justify-center>
+              <span>3D</span>
+            </div>
+          </button>
+          <ActionViewControls v-model="viewControlsActiveMode" @reset="() => viewControlsInputsRef?.resetOnMode()" />
+        </div>
+      </div>
+      <div bg="white dark:neutral-800" w-full flex gap-1 px-2 py-2>
+        <BasicTextarea
+          v-model="messageInput"
+          :placeholder="t('stage.message')"
+          border="solid 2 primary-50 dark:primary-950/10"
+          text="neutral-500 hover:neutral-600 dark:neutral-100 dark:hover:neutral-200 placeholder:neutral-400 placeholder:hover:neutral-500 placeholder:dark:neutral-300 placeholder:dark:hover:neutral-400"
+          bg="neutral-100/80 dark:neutral-950/80"
+          max-h="[10lh]" min-h="[calc(1lh+4px+4px)]"
+          w-full resize-none overflow-y-scroll rounded="[1lh]" px-4 py-0.5 outline-none backdrop-blur-md scrollbar-none
+          transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
+          :class="[themeColorsHueDynamic ? 'transition-colors-none placeholder:transition-colors-none' : '']"
+          default-height="1lh"
+          @submit="handleSend"
+          @compositionstart="isComposing = true"
+          @compositionend="isComposing = false"
+        />
+        <button
 
-        v-if="messageInput.trim() || isComposing"
-        w="[calc(1lh+4px+4px)]" h="[calc(1lh+4px+4px)]" aspect-square flex items-center self-end justify-center rounded-full outline-none backdrop-blur-md
-        text="primary-500 hover:primary-600 dark:primary-100 dark:hover:primary-200 placeholder:primary-400 placeholder:hover:primary-500 placeholder:dark:primary-300 placeholder:dark:hover:primary-400"
-        bg="primary-50/80 dark:primary-950/80"
-        @click="handleSend"
-      >
-        <div i-solar:arrow-up-outline />
-      </button>
+          v-if="messageInput.trim() || isComposing"
+          w="[calc(1lh+4px+4px)]" h="[calc(1lh+4px+4px)]" aspect-square flex items-center self-end justify-center rounded-full outline-none backdrop-blur-md
+          text="neutral-500 hover:neutral-600 dark:neutral-900 dark:hover:neutral-800"
+          bg="primary-50/80 dark:neutral-100/80 hover:neutral-50"
+          transition="all duration-250 ease-in-out"
+          @click="handleSend"
+        >
+          <div i-solar:arrow-up-outline />
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue b/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue
new file mode 100644
index 00000000..89d9fb5a
--- /dev/null
+++ b/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { useLive2d, useSettings, useVRM } from '@proj-airi/stage-ui/stores'
+import { RoundRange } from '@proj-airi/ui'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  mode: 'x' | 'y' | 'z' | 'scale'
+}>()
+
+const { stageView, stageViewControlsEnabled } = storeToRefs(useSettings())
+const { scale: vrmScale, position: vrmPosition, modelSize: vrmModelSize } = storeToRefs(useVRM())
+const { scale: live2dScale, position: live2dPosition } = storeToRefs(useLive2d())
+
+const viewControlsValueX = computed({
+  get: () => {
+    switch (stageView.value) {
+      case '2d':
+        return live2dPosition.value.x
+      case '3d':
+        return vrmPosition.value.x
+      default:
+        return 0
+    }
+  },
+  set: (value) => {
+    switch (stageView.value) {
+      case '2d':
+        live2dPosition.value.x = value
+        break
+      case '3d':
+        vrmPosition.value.x = value
+        break
+      default:
+        break
+    }
+  },
+})
+
+const viewControlsValueXMin = computed(() => {
+  return stageView.value === '2d' ? -500 : -vrmModelSize.value.x - 10
+})
+
+const viewControlsValueXMax = computed(() => {
+  return stageView.value === '2d' ? 500 : vrmModelSize.value.x + 10
+})
+
+const viewControlsValueY = computed({
+  get: () => {
+    switch (stageView.value) {
+      case '2d':
+        return live2dPosition.value.y
+      case '3d':
+        return vrmPosition.value.y
+      default:
+        return 0
+    }
+  },
+  set: (value) => {
+    switch (stageView.value) {
+      case '2d':
+        live2dPosition.value.y = value
+        break
+      case '3d':
+        vrmPosition.value.y = value
+        break
+      default:
+        break
+    }
+  },
+})
+
+const viewControlsValueYMin = computed(() => {
+  return stageView.value === '2d' ? -500 : -vrmModelSize.value.y - 10
+})
+
+const viewControlsValueYMax = computed(() => {
+  return stageView.value === '2d' ? 500 : vrmModelSize.value.y + 10
+})
+
+const viewControlsValueZ = computed({
+  get: () => {
+    switch (stageView.value) {
+      case '2d':
+        return 0
+      case '3d':
+        return vrmPosition.value.z
+      default:
+        return 0
+    }
+  },
+  set: (value) => {
+    switch (stageView.value) {
+      case '2d':
+        break
+      case '3d':
+        vrmPosition.value.z = value
+        break
+      default:
+        break
+    }
+  },
+})
+
+const viewControlsValueZMin = computed(() => {
+  return stageView.value === '2d' ? -500 : -vrmModelSize.value.z - 10
+})
+
+const viewControlsValueZMax = computed(() => {
+  return stageView.value === '2d' ? 500 : vrmModelSize.value.z + 10
+})
+
+const viewControlsValueScale = computed({
+  get: () => {
+    if (stageView.value === '2d') {
+      return live2dScale.value
+    }
+
+    return vrmScale.value
+  },
+  set: (value) => {
+    if (stageView.value === '2d') {
+      live2dScale.value = value
+    }
+    else {
+      vrmScale.value = value
+    }
+  },
+})
+
+function resetOnMode() {
+  switch (props.mode) {
+    case 'x':
+      viewControlsValueX.value = 0
+      break
+    case 'y':
+      viewControlsValueY.value = 0
+      break
+    case 'z':
+      viewControlsValueZ.value = 0
+      break
+    case 'scale':
+      viewControlsValueScale.value = 1
+      break
+  }
+}
+
+defineExpose({
+  resetOnMode,
+})
+</script>
+
+<template>
+  <Transition name="fade-side-pops-in">
+    <div v-if="stageViewControlsEnabled">
+      <Transition name="fade-side-pops-in" mode="out-in">
+        <div v-if="props.mode === 'x'" relative class="[&_.round-range-tooltip]:hover:opacity-100">
+          <RoundRange v-model="viewControlsValueX" :min="viewControlsValueXMin" :max="viewControlsValueXMax" :step="0.01" data-direction="vertical" h="50%" write-vertical-left />
+          <div class="round-range-tooltip" top="50%" translate-y="[-50%]" absolute left-10 font-mono op-0 transition="all duration-200 ease-in-out">
+            {{ viewControlsValueX.toFixed(2) }}
+          </div>
+        </div>
+        <div v-else-if="props.mode === 'y'" relative class="[&_.round-range-tooltip]:hover:opacity-100">
+          <RoundRange v-model="viewControlsValueY" :min="viewControlsValueYMin" :max="viewControlsValueYMax" :step="0.01" write-vertical-left h="50%" data-direction="vertical" />
+          <div class="round-range-tooltip" top="50%" translate-y="[-50%]" absolute left-10 font-mono op-0 transition="all duration-200 ease-in-out">
+            {{ viewControlsValueY.toFixed(2) }}
+          </div>
+        </div>
+        <div v-else-if="stageView === '3d' && props.mode === 'z'" relative class="[&_.round-range-tooltip]:hover:opacity-100">
+          <RoundRange v-model="viewControlsValueZ" :min="viewControlsValueZMin" :max="viewControlsValueZMax" :step="0.01" write-vertical-left h="50%" data-direction="vertical" />
+          <div class="round-range-tooltip" top="50%" translate-y="[-50%]" absolute left-10 font-mono op-0 transition="all duration-200 ease-in-out">
+            {{ viewControlsValueZ.toFixed(2) }}
+          </div>
+        </div>
+        <div v-else-if="props.mode === 'scale'" relative class="[&_.round-range-tooltip]:hover:opacity-100">
+          <RoundRange v-model="viewControlsValueScale" :min="0" :max="3" :step="0.0001" write-vertical-left h="50%" data-direction="vertical" />
+          <div class="round-range-tooltip" top="50%" translate-y="[-50%]" absolute left-10 font-mono op-0 transition="all duration-200 ease-in-out">
+            {{ viewControlsValueScale.toFixed(2) }}
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-side-pops-in-enter-active,
+.fade-side-pops-in-leave-active {
+  transition: all 0.2s ease-in-out;
+}
+
+.fade-side-pops-in-enter-from,
+.fade-side-pops-in-leave-to {
+  opacity: 0;
+  transform: translateX(-100%) scale(0.8);
+}
+
+.fade-side-pops-in-enter-to,
+.fade-side-pops-in-leave-from {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+</style>
diff --git a/apps/stage-web/src/components/Widgets/ChatHistory.vue b/apps/stage-web/src/components/Widgets/ChatHistory.vue
index 3c64e5c7..cd370b49 100644
--- a/apps/stage-web/src/components/Widgets/ChatHistory.vue
+++ b/apps/stage-web/src/components/Widgets/ChatHistory.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useMarkdown } from '@proj-airi/stage-ui/composables'
 import { useChatStore } from '@proj-airi/stage-ui/stores'
-import { useElementBounding, useScroll } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -10,8 +9,6 @@ const chatHistoryRef = ref<HTMLDivElement>()
 
 const { t } = useI18n()
 const { messages, sending } = storeToRefs(useChatStore())
-const bounding = useElementBounding(chatHistoryRef, { immediate: true, windowScroll: true, windowResize: true })
-const { y: chatHistoryContainerY } = useScroll(chatHistoryRef)
 
 const { process } = useMarkdown()
 const { onBeforeMessageComposed, onTokenLiteral } = useChatStore()
@@ -19,16 +16,20 @@ const { onBeforeMessageComposed, onTokenLiteral } = useChatStore()
 onBeforeMessageComposed(async () => {
   // Scroll down to the new sent message
   nextTick().then(() => {
-    bounding.update()
-    chatHistoryContainerY.value = bounding.height.value
+    if (!chatHistoryRef.value)
+      return
+
+    chatHistoryRef.value.scrollTop = chatHistoryRef.value.scrollHeight
   })
 })
 
 onTokenLiteral(async () => {
   // Scroll down to the new responding message
   nextTick().then(() => {
-    bounding.update()
-    chatHistoryContainerY.value = bounding.height.value
+    if (!chatHistoryRef.value)
+      return
+
+    chatHistoryRef.value.scrollTop = chatHistoryRef.value.scrollHeight
   })
 })
 </script>
diff --git a/apps/stage-web/src/components/Widgets/MobileChatHistory.vue b/apps/stage-web/src/components/Widgets/MobileChatHistory.vue
index 96440d85..5e5515c1 100644
--- a/apps/stage-web/src/components/Widgets/MobileChatHistory.vue
+++ b/apps/stage-web/src/components/Widgets/MobileChatHistory.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useMarkdown } from '@proj-airi/stage-ui/composables'
 import { useChatStore } from '@proj-airi/stage-ui/stores'
-import { useElementBounding, useScroll } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -10,8 +9,6 @@ const chatHistoryRef = ref<HTMLDivElement>()
 
 const { t } = useI18n()
 const { messages } = storeToRefs(useChatStore())
-const bounding = useElementBounding(chatHistoryRef, { immediate: true, windowScroll: true, windowResize: true })
-const { y: chatHistoryContainerY } = useScroll(chatHistoryRef)
 
 const { process } = useMarkdown()
 const { onBeforeMessageComposed, onTokenLiteral } = useChatStore()
@@ -19,25 +16,27 @@ const { onBeforeMessageComposed, onTokenLiteral } = useChatStore()
 onBeforeMessageComposed(async () => {
   // Scroll down to the new sent message
   nextTick().then(() => {
-    bounding.update()
-    chatHistoryContainerY.value = bounding.height.value
+    if (!chatHistoryRef.value)
+      return
+
+    chatHistoryRef.value.scrollTop = chatHistoryRef.value.scrollHeight
   })
 })
 
 onTokenLiteral(async () => {
   // Scroll down to the new responding message
   nextTick().then(() => {
-    bounding.update()
-    chatHistoryContainerY.value = bounding.height.value
+    if (!chatHistoryRef.value)
+      return
+
+    chatHistoryRef.value.scrollTop = chatHistoryRef.value.scrollHeight
   })
 })
 </script>
 
 <template>
-  <div py="1" flex="~ col" rounded="lg" overflow-hidden>
-    <div flex-1 /> <!-- spacer -->
-    <div ref="chatHistoryRef" v-auto-animate h-full w-full max-h="40%" flex="~ col" overflow-scroll class="chat-history">
-      <div flex-1 /> <!-- spacer -->
+  <div flex="~ col" rounded="lg" overflow-hidden>
+    <div ref="chatHistoryRef" v-auto-animate max-h="35dvh" z-5 flex="~ col" h-full w-full overflow-scroll class="chat-history">
       <div v-for="(message, index) in messages" :key="index" mb-2>
         <div v-if="message.role === 'error'" flex mr="12">
           <div
diff --git a/apps/stage-web/src/layouts/settings.vue b/apps/stage-web/src/layouts/settings.vue
index 19ea7713..9eab03de 100644
--- a/apps/stage-web/src/layouts/settings.vue
+++ b/apps/stage-web/src/layouts/settings.vue
@@ -138,7 +138,7 @@ onMounted(() => updateThemeColor())
       <HeaderLink />
     </div>
     <!-- Content -->
-    <div class="h-full px-3 py-0 sm:h-[calc(100%-4rem)] md:py-0 xl:px-0" flex="~ col" mx-auto max-w-screen-xl>
+    <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>
       <PageHeader
         :title="routeHeaderMetadata?.title"
         :subtitle="routeHeaderMetadata?.subtitle"
diff --git a/apps/stage-web/src/pages/index.vue b/apps/stage-web/src/pages/index.vue
index ae41e78d..b2c15340 100644
--- a/apps/stage-web/src/pages/index.vue
+++ b/apps/stage-web/src/pages/index.vue
@@ -8,6 +8,7 @@ import { onMounted, ref, watch } from 'vue'
 import Cross from '../components/Backgrounds/Cross.vue'
 import Header from '../components/Layouts/Header.vue'
 import InteractiveArea from '../components/Layouts/InteractiveArea.vue'
+import MobileHeader from '../components/Layouts/MobileHeader.vue'
 import MobileInteractiveArea from '../components/Layouts/MobileInteractiveArea.vue'
 import AnimatedWave from '../components/Widgets/AnimatedWave.vue'
 
@@ -41,7 +42,8 @@ onMounted(() => updateThemeColor())
       <div relative flex="~ col" z-2 h-100dvh w-100vw of-hidden>
         <!-- header -->
         <div class="px-0 py-1 md:px-3 md:py-3" w-full gap-2>
-          <Header class="flex" />
+          <Header class="hidden md:flex" />
+          <MobileHeader class="flex md:hidden" />
         </div>
         <!-- page -->
         <div relative flex="~ 1 row gap-y-0 gap-x-2 <md:col">
@@ -56,8 +58,8 @@ onMounted(() => updateThemeColor())
             :y-offset="positionInPercentageString.y"
             :scale="scale"
           />
-          <InteractiveArea class="flex <md:hidden" absolute h="85dvh" right-4 flex-1 max-w="500px" min-w="30%" />
-          <MobileInteractiveArea class="hidden <md:block" mx2 mb2 @settings-open="handleSettingsOpen" />
+          <InteractiveArea v-if="!isMobile" h="85dvh" absolute right-4 flex flex-1 flex-col max-w="500px" min-w="30%" />
+          <MobileInteractiveArea v-if="isMobile" @settings-open="handleSettingsOpen" />
         </div>
       </div>
     </AnimatedWave>
diff --git a/apps/stage-web/src/pages/settings/models/index.vue b/apps/stage-web/src/pages/settings/models/index.vue
index fc6e806a..b0bfb6df 100644
--- a/apps/stage-web/src/pages/settings/models/index.vue
+++ b/apps/stage-web/src/pages/settings/models/index.vue
@@ -43,8 +43,14 @@ const {
 </script>
 
 <template>
-  <div flex class="relative h-[calc(100dvh-8rem)] flex-col-reverse md:flex-row">
-    <ModelSettings live-2d-settings-class="w-100% md:w-40% lg:w-30% xl:w-30% 2xl:w-30% h-fit overflow-y-scroll absolute bottom-0 right-0 top-0" :palette="palette" @extract-colors-from-model="extractColorsFromModel" />
+  <div flex class="relative h-full flex-col-reverse md:flex-row">
+    <ModelSettings
+      live-2d-scene-class="absolute max-h-[calc(100dvh-100px-56px)] w-full h-full"
+      live-2d-settings-class="w-100% md:w-40% lg:w-30% xl:w-30% 2xl:w-30% h-fit sm:max-h-80dvh overflow-y-scroll relative"
+      vrm-scene-class="absolute max-h-[calc(100dvh-100px-56px)] w-full h-full"
+      vrm-settings-class="w-100% md:w-40% lg:w-30% xl:w-30% 2xl:w-30% h-fit sm:max-h-80dvh overflow-y-scroll relative"
+      :palette="palette" @extract-colors-from-model="extractColorsFromModel"
+    />
   </div>
 
   <IconAnimation
@@ -58,6 +64,7 @@ const {
     position="calc(100dvw - 9.5rem), calc(100dvh - 9.5rem)"
     text-color="text-neutral-200/50 dark:text-neutral-600/20"
   />
+
   <div
     v-else
     v-motion
diff --git a/apps/stage-web/src/pages/stage/index.vue b/apps/stage-web/src/pages/stage/index.vue
index 6c600fdf..f6342c10 100644
--- a/apps/stage-web/src/pages/stage/index.vue
+++ b/apps/stage-web/src/pages/stage/index.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import { WidgetStage } from '@proj-airi/stage-ui/components/scenes'
-import { useDark, useMouse } from '@vueuse/core'
-import { ref } from 'vue'
+import { useLive2d } from '@proj-airi/stage-ui/stores'
+import { breakpointsTailwind, useBreakpoints, useDark, useMouse } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref, watch } from 'vue'
 
 import Cross from '../../components/Backgrounds/Cross.vue'
 import Header from '../../components/Layouts/Header.vue'
 import InteractiveArea from '../../components/Layouts/InteractiveArea.vue'
+import MobileHeader from '../../components/Layouts/MobileHeader.vue'
 import MobileInteractiveArea from '../../components/Layouts/MobileInteractiveArea.vue'
 import AnimatedWave from '../../components/Widgets/AnimatedWave.vue'
 
+import { themeColorFromPropertyOf, useThemeColor } from '../../composables/theme-color'
+
 const dark = useDark()
 const paused = ref(false)
 
@@ -17,19 +22,28 @@ function handleSettingsOpen(open: boolean) {
 }
 
 const positionCursor = useMouse()
+const { scale, position, positionInPercentageString } = storeToRefs(useLive2d())
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMobile = breakpoints.smaller('md')
+
+const { updateThemeColor } = useThemeColor(themeColorFromPropertyOf('.widgets.top-widgets .colored-area', 'background-color'))
+watch(dark, () => updateThemeColor(), { immediate: true })
+onMounted(() => updateThemeColor())
 </script>
 
 <template>
   <Cross>
     <AnimatedWave
+      class="widgets top-widgets"
       :fill-color="dark
         ? 'oklch(35% calc(var(--chromatic-chroma) * 0.6) var(--chromatic-hue))'
         : 'color-mix(in srgb, oklch(95% calc(var(--chromatic-chroma-50) * 0.5) var(--chromatic-hue)) 80%, oklch(100% 0 360))'"
     >
       <div relative flex="~ col" z-2 h-100dvh w-100vw of-hidden>
         <!-- header -->
-        <div>
-          <Header class="flex" p2 />
+        <div class="px-0 py-1 md:px-3 md:py-3" w-full gap-2>
+          <Header class="hidden md:flex" />
+          <MobileHeader class="flex md:hidden" />
         </div>
         <!-- page -->
         <div relative flex="~ 1 row gap-y-0 gap-x-2 <md:col">
@@ -40,9 +54,12 @@ const positionCursor = useMouse()
               x: positionCursor.x.value,
               y: positionCursor.y.value,
             }"
+            :x-offset="`${isMobile ? position.x : position.x - 10}%`"
+            :y-offset="positionInPercentageString.y"
+            :scale="scale"
           />
-          <InteractiveArea class="flex <md:hidden" flex-1 max-w="500px" min-w="30%" />
-          <MobileInteractiveArea class="hidden <md:block" mx2 mb2 @settings-open="handleSettingsOpen" />
+          <InteractiveArea v-if="!isMobile" h="85dvh" absolute right-4 flex flex-1 flex-col max-w="500px" min-w="30%" />
+          <MobileInteractiveArea v-if="isMobile" @settings-open="handleSettingsOpen" />
         </div>
       </div>
     </AnimatedWave>
@@ -50,7 +67,7 @@ const positionCursor = useMouse()
 </template>
 
 <route lang="yaml">
-name: StageScenePage
+name: IndexScenePage
 meta:
   layout: stage
   stageTransition:
diff --git a/apps/stage-web/src/styles/main.css b/apps/stage-web/src/styles/main.css
index d638b316..843282d0 100755
--- a/apps/stage-web/src/styles/main.css
+++ b/apps/stage-web/src/styles/main.css
@@ -1,4 +1,5 @@
 @import './transitions.css';
+@import './vue-transitions.css';
 
 :root {
   --bg-color-light: rgb(255 255 255);
diff --git a/apps/stage-web/src/styles/vue-transitions.css b/apps/stage-web/src/styles/vue-transitions.css
new file mode 100644
index 00000000..2beab3d5
--- /dev/null
+++ b/apps/stage-web/src/styles/vue-transitions.css
@@ -0,0 +1,48 @@
+.fade-slide-out-r-to-l-enter-active,
+.fade-slide-out-r-to-l-leave-active {
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.fade-slide-out-r-to-l-enter-from,
+.fade-slide-out-r-to-l-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+.fade-slide-out-r-to-l-enter-to,
+.fade-slide-out-r-to-l-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.fade-slide-out-l-to-r-enter-active,
+.fade-slide-out-l-to-r-leave-active {
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.fade-slide-out-l-to-r-enter-from,
+.fade-slide-out-l-to-r-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.fade-slide-out-l-to-r-enter-to,
+.fade-slide-out-l-to-r-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
diff --git a/packages/stage-ui/src/components/Form/Range/RoundRange.story.vue b/packages/stage-ui/src/components/Form/Range/RoundRange.story.vue
new file mode 100644
index 00000000..047ae689
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Range/RoundRange.story.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { RoundRange } from '@proj-airi/ui'
+import { ref } from 'vue'
+
+const minValue = ref(0)
+const midValue = ref(50)
+const maxValue = ref(100)
+</script>
+
+<template>
+  <Story title="Round Range" group="form" :layout="{ type: 'grid', width: '100%' }">
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant id="default-min" title="Default (min)">
+      <RoundRange v-model="minValue" w-full />
+    </Variant>
+
+    <Variant id="default-mid" title="Default (mid)">
+      <RoundRange v-model="midValue" w-full />
+    </Variant>
+
+    <Variant id="default-max" title="Default (max)">
+      <RoundRange v-model="maxValue" w-full />
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Layouts/Callout.vue b/packages/stage-ui/src/components/Layouts/Callout.vue
index f0aed0cb..917c67c9 100644
--- a/packages/stage-ui/src/components/Layouts/Callout.vue
+++ b/packages/stage-ui/src/components/Layouts/Callout.vue
@@ -14,7 +14,7 @@ const themeClasses: Record<ThemeVariant, {
 }> = {
   primary: {
     container: [
-      'bg-primary-400/10 dark:bg-primary-50/10 text-neutral-900/80 backdrop-blur-md',
+      'bg-primary-100/60 dark:bg-primary-50/10 text-neutral-900/80 backdrop-blur-md',
       `before:bg-primary-400 dark:bg-primary-900/10 dark:text-neutral-100/80 before:content-[''] before:dark:bg-primary-900`,
     ],
     label: [
@@ -23,7 +23,7 @@ const themeClasses: Record<ThemeVariant, {
   },
   lime: {
     container: [
-      'bg-lime-400/10 dark:bg-lime-50/10 text-neutral-900/80 backdrop-blur-md',
+      'bg-lime-100/60 dark:bg-lime-50/10 text-neutral-900/80 backdrop-blur-md',
       `before:bg-lime-400 dark:bg-lime-900/10 dark:text-neutral-100/80 before:content-[''] before:dark:bg-lime-900`,
     ],
     label: [
@@ -32,7 +32,7 @@ const themeClasses: Record<ThemeVariant, {
   },
   violet: {
     container: [
-      'bg-violet-400/10 dark:bg-violet-50/10 text-neutral-900/80 backdrop-blur-md',
+      'bg-violet-100/60 dark:bg-violet-50/10 text-neutral-900/80 backdrop-blur-md',
       `before:bg-violet-400 dark:bg-violet-900/10 dark:text-neutral-100/80 before:content-[''] before:dark:bg-violet-900`,
     ],
     label: [
@@ -41,7 +41,7 @@ const themeClasses: Record<ThemeVariant, {
   },
   orange: {
     container: [
-      'bg-orange-400/10 dark:bg-orange-50/10 text-neutral-900/80 backdrop-blur-md',
+      'bg-orange-100/60 dark:bg-orange-50/10 text-neutral-900/80 backdrop-blur-md',
       `before:bg-orange-400 dark:bg-orange-900/10 dark:text-neutral-100/80 before:content-[''] before:dark:bg-orange-900`,
     ],
     label: [
diff --git a/packages/stage-ui/src/components/Misc/Button.vue b/packages/stage-ui/src/components/Misc/Button.vue
index 5880f757..decb9424 100644
--- a/packages/stage-ui/src/components/Misc/Button.vue
+++ b/packages/stage-ui/src/components/Misc/Button.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import { BidirectionalTransition } from '../Misc'
 
 // Define button variants for better type safety and maintainability
-type ButtonVariant = 'primary' | 'secondary' | 'danger'
+type ButtonVariant = 'primary' | 'secondary' | 'secondary-muted' | 'danger'
 
 type ButtonTheme
   = | 'default'
@@ -15,6 +15,7 @@ type ButtonTheme
 type ButtonSize = 'sm' | 'md' | 'lg'
 
 interface ButtonProps {
+  toggled?: boolean // Optional toggled state for toggle buttons
   icon?: string // Icon class name
   label?: string // Button text label
   disabled?: boolean // Disabled state
@@ -26,6 +27,7 @@ interface ButtonProps {
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
+  toggled: false,
   variant: 'primary',
   disabled: false,
   loading: false,
@@ -38,18 +40,33 @@ const isDisabled = computed(() => props.disabled || props.loading)
 
 // Extract variant styles for better organization
 const variantClasses: Record<ButtonVariant, {
-  default: string
-  // dimmed: string
-  // lightened: string
+  default: {
+    default: string
+    nonToggled?: string
+    toggled?: string
+  }
 }> = {
-  primary: {
-    default: 'bg-primary-500/15 hover:bg-primary-500/20 active:bg-primary-500/30 dark:bg-primary-700/30 dark:hover:bg-primary-700/40 dark:active:bg-primary-700/30 focus:ring-primary-300/60 dark:focus:ring-primary-600/30 border-2 border-solid border-primary-500/5 dark:border-primary-900/40 text-primary-950 dark:text-primary-100',
+  'primary': {
+    default: {
+      default: 'bg-primary-500/15 hover:bg-primary-500/20 active:bg-primary-500/30 dark:bg-primary-700/30 dark:hover:bg-primary-700/40 dark:active:bg-primary-700/30 focus:ring-primary-300/60 dark:focus:ring-primary-600/30 border-2 border-solid border-primary-500/5 dark:border-primary-900/40 text-primary-950 dark:text-primary-100',
+    },
   },
-  secondary: {
-    default: 'bg-neutral-400/15 hover:bg-neutral-400/20 active:bg-neutral-400/30 dark:bg-neutral-700/60 dark:hover:bg-neutral-700/80 dark:active:bg-neutral-700/60 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30 border-2 border-solid border-neutral-300/30 dark:border-neutral-700/30 text-neutral-950 dark:text-neutral-100',
+  'secondary': {
+    default: {
+      default: 'bg-neutral-100/55 hover:bg-neutral-400/20 active:bg-neutral-400/30 dark:bg-neutral-700/60 dark:hover:bg-neutral-700/80 dark:active:bg-neutral-700/60 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30 border-2 border-solid border-neutral-300/30 dark:border-neutral-700/30 text-neutral-950 dark:text-neutral-100',
+    },
   },
-  danger: {
-    default: 'bg-red-500/15 hover:bg-red-500/20 active:bg-red-500/30 dark:bg-red-700/30 dark:hover:bg-red-700/40 dark:active:bg-red-700/30 focus:ring-red-300/30 dark:focus:ring-red-600/60 dark:focus:ring-red-600/30 border-2 border-solid border-red-200/30 dark:border-red-900/30 text-red-950 dark:text-red-100',
+  'secondary-muted': {
+    default: {
+      default: 'hover:bg-neutral-50/50 active:bg-neutral-50/90 hover:dark:bg-neutral-800/50 active:dark:bg-neutral-800/90 border-2 border-solid border-neutral-100/60 dark:border-neutral-800/30 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30',
+      nonToggled: 'bg-neutral-50/70 dark:bg-neutral-800/70 text-neutral-500 dark:text-neutral-400',
+      toggled: 'bg-white/90 dark:bg-neutral-500/70 ring-neutral-300/30 dark:ring-neutral-600/60 ring-2 dark:ring-neutral-600/30 text-primary-500 dark:text-primary-100',
+    },
+  },
+  'danger': {
+    default: {
+      default: 'bg-red-500/15 hover:bg-red-500/20 active:bg-red-500/30 dark:bg-red-700/30 dark:hover:bg-red-700/40 dark:active:bg-red-700/30 focus:ring-red-300/30 dark:focus:ring-red-600/60 dark:focus:ring-red-600/30 border-2 border-solid border-red-200/30 dark:border-red-900/30 text-red-950 dark:text-red-100',
+    },
   },
 }
 
@@ -62,14 +79,16 @@ const sizeClasses: Record<ButtonSize, string> = {
 
 // Base classes that are always applied
 const baseClasses = computed(() => [
-  'rounded-lg font-medium outline-none',
+  'rounded-xl font-medium outline-none',
   'transition-all duration-200 ease-in-out',
   'disabled:cursor-not-allowed disabled:opacity-50',
+  'backdrop-blur-md',
   props.block ? 'w-full' : '',
   sizeClasses[props.size],
-  variantClasses[props.variant][props.theme],
+  variantClasses[props.variant][props.theme].default,
+  props.toggled ? variantClasses[props.variant][props.theme].toggled || '' : variantClasses[props.variant][props.theme].nonToggled || '',
   { 'opacity-50 cursor-not-allowed': isDisabled.value },
-  'focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
+  'focus:ring-2',
 ])
 </script>
 
diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2DScene.vue b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2DScene.vue
deleted file mode 100644
index 125e5218..00000000
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/Live2DScene.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { useMouse } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-
-import { useLive2d } from '../../../../stores'
-import { Screen } from '../../../Misc'
-import { Live2DCanvas, Live2DModel } from '../../../Scenes'
-
-const live2dCanvasRef = ref<InstanceType<typeof Live2DCanvas>>()
-const { positionInPercentageString, scale } = storeToRefs(useLive2d())
-
-const positionCursor = useMouse()
-</script>
-
-<template>
-  <Screen v-slot="{ width, height }" relative min-h-70dvh>
-    <Live2DCanvas
-      ref="live2dCanvasRef"
-      v-slot="{ app }"
-      :width="width"
-      :height="height"
-      :resolution="3"
-      rounded-full
-    >
-      <Live2DModel
-        :app="app"
-        :mouth-open-size="0"
-        :width="width"
-        :height="height"
-        :paused="false"
-        :focus-at="{
-          x: positionCursor.x.value,
-          y: positionCursor.y.value,
-        }"
-        :x-offset="positionInPercentageString.x"
-        :y-offset="positionInPercentageString.y"
-        :scale="scale"
-      />
-    </Live2DCanvas>
-  </Screen>
-</template>
diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
index e95e7f48..bd0174e2 100644
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
+++ b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
@@ -31,6 +31,7 @@ const {
   loadSource,
   loadingModel,
   modelUrl,
+  scale,
   modelSize,
   modelOffset,
 } = storeToRefs(vrm)
@@ -59,6 +60,122 @@ modelFileDialog.onChange((files) => {
       {{ t('settings.vrm.switch-to-vrm.change-to-vrm') }}
     </Button>
   </Section>
+  <Section
+    :title="t('settings.vrm.scale-and-position.title')"
+    icon="i-solar:scale-bold-duotone"
+    :class="[
+      'rounded-xl',
+      'bg-white/80  dark:bg-black/75',
+      'backdrop-blur-lg',
+    ]"
+  >
+    <Callout
+      :label="t('settings.vrm.scale-and-position.model-info-title')"
+      w-full
+    >
+      <div>
+        <div class="text-sm text-neutral-600 space-y-1">
+          <div class="flex justify-between">
+            <span>{{ t('settings.vrm.scale-and-position.model-info-x') }}</span>
+            <span>{{ modelSize.x.toFixed(4) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span>{{ t('settings.vrm.scale-and-position.model-info-y') }}</span>
+            <span>{{ modelSize.y.toFixed(4) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span>{{ t('settings.vrm.scale-and-position.model-info-z') }}</span>
+            <span>{{ modelSize.z.toFixed(4) }}</span>
+          </div>
+        </div>
+      </div>
+    </Callout>
+    <Callout
+      theme="lime"
+      label="Tips!"
+      w-full
+    >
+      <div class="text-sm text-neutral-600 space-y-1">
+        {{ t('settings.vrm.scale-and-position.tips') }}
+      </div>
+    </Callout>
+    <FieldRange
+      v-model="scale"
+      as="div"
+      :min="0"
+      :max="5"
+      :step="scale / 100"
+      :label="t('settings.vrm.scale-and-position.x')"
+      :format-value="val => val.toFixed(4)"
+    >
+      <template #label>
+        <div flex items-center>
+          <div>
+            {{ t('settings.vrm.scale-and-position.scale') }}
+          </div>
+          <button px-2 text-xs outline-none title="Reset value to default" @click="() => scale = 1">
+            <div i-solar:forward-linear transform-scale-x--100 text="neutral-500 dark:neutral-400" />
+          </button>
+        </div>
+      </template>
+    </FieldRange>
+    <FieldRange
+      v-model="modelOffset.x"
+      as="div"
+      :min="-modelSize.x - 10"
+      :max="modelSize.x + 10"
+      :step="modelSize.x / 100"
+      :label="t('settings.vrm.scale-and-position.x')"
+      :format-value="val => val.toFixed(4)"
+    >
+      <template #label>
+        <div flex items-center>
+          <div>
+            {{ t('settings.vrm.scale-and-position.x') }}
+          </div>
+          <button px-2 text-xs outline-none title="Reset value to default" @click="() => modelOffset.x = 0">
+            <div i-solar:forward-linear transform-scale-x--100 text="neutral-500 dark:neutral-400" />
+          </button>
+        </div>
+      </template>
+    </FieldRange>
+    <FieldRange
+      v-model="modelOffset.y"
+      as="div"
+      :min="-modelSize.y - 10"
+      :max="modelSize.y + 10"
+      :step="modelSize.y / 100"
+      :label="t('settings.vrm.scale-and-position.y')"
+      :format-value="val => val.toFixed(4)"
+    >
+      <template #label>
+        <div flex items-center>
+          <div>{{ t('settings.vrm.scale-and-position.y') }}</div>
+          <button px-2 text-xs outline-none title="Reset value to default" @click="() => modelOffset.y = 0">
+            <div i-solar:forward-linear transform-scale-x--100 text="neutral-500 dark:neutral-400" />
+          </button>
+        </div>
+      </template>
+    </FieldRange>
+    <FieldRange
+      v-model="modelOffset.z"
+      as="div"
+      :min="-modelSize.z - 10"
+      :max="modelSize.z + 10"
+      :step="modelSize.z / 100"
+      :label="t('settings.vrm.scale-and-position.z')"
+      :format-value="val => val.toFixed(4)"
+    >
+      <template #label>
+        <div flex items-center>
+          <div>{{ t('settings.vrm.scale-and-position.z') }}</div>
+          <button px-2 text-xs outline-none title="Reset value to default" @click="() => modelOffset.z = 0">
+            <div i-solar:forward-linear transform-scale-x--100 text="neutral-500 dark:neutral-400" />
+          </button>
+        </div>
+      </template>
+    </FieldRange>
+  </Section>
   <Section
     :title="t('settings.vrm.change-model.title')"
     icon="i-solar:magic-stick-3-bold-duotone"
@@ -99,96 +216,4 @@ modelFileDialog.onChange((files) => {
       {{ t('settings.vrm.theme-color-from-model.button-extract.title') }}
     </Button>
   </Section>
-  <Section
-    :title="t('settings.vrm.scale-and-position.title')"
-    icon="i-solar:scale-bold-duotone"
-    :class="[
-      'rounded-xl',
-      'bg-white/80  dark:bg-black/75',
-      'backdrop-blur-lg',
-    ]"
-  >
-    <Callout :label="t('settings.vrm.scale-and-position.model-info-title')">
-      <div>
-        <div class="text-sm text-neutral-600 space-y-1">
-          <div class="flex justify-between">
-            <span>{{ t('settings.vrm.scale-and-position.model-info-x') }}</span>
-            <span>{{ modelSize.x.toFixed(4) }}</span>
-          </div>
-          <div class="flex justify-between">
-            <span>{{ t('settings.vrm.scale-and-position.model-info-y') }}</span>
-            <span>{{ modelSize.y.toFixed(4) }}</span>
-          </div>
-          <div class="flex justify-between">
-            <span>{{ t('settings.vrm.scale-and-position.model-info-z') }}</span>
-            <span>{{ modelSize.z.toFixed(4) }}</span>
-          </div>
-        </div>
-      </div>
-    </Callout>
-    <Callout
-      theme="lime"
-      label="Tips!"
-    >
-      <div class="text-sm text-neutral-600 space-y-1">
-        {{ t('settings.vrm.scale-and-position.tips') }}
-      </div>
-    </Callout>
-    <FieldRange
-      :model-value="Number(modelOffset.x.toFixed(4))"
-      as="div"
-      :min="-modelSize.x"
-      :max="modelSize.x"
-      :step="modelSize.x / 100"
-      :label="t('settings.vrm.scale-and-position.x')"
-      @update:model-value="val => modelOffset.x = val"
-    >
-      <template #label>
-        <div flex items-center>
-          <div>
-            {{ t('settings.vrm.scale-and-position.x') }}
-          </div>
-          <button px-2 text-xs outline-none title="Reset value to default" @click="() => modelOffset.x = 0">
-            <div i-solar:forward-linear transform-scale-x--100 text="neutral-500 dark:neutral-400" />
-          </button>
-        </div>
-      </template>
-    </FieldRange>
-    <FieldRange
-      :model-value="Number(modelOffset.y.toFixed(4))"
-      as="div"
-      :min="-modelSize.y"
-      :max="modelSize.y"
-      :step="modelSize.y / 100"
-      :label="t('settings.vrm.scale-and-position.y')"
-      @update:model-value="val => modelOffset.y = val"
-    >
-      <template #label>
-        <div flex items-center>
-          <div>{{ t('settings.vrm.scale-and-position.y') }}</div>
-          <button px-2 text-xs outline-none title="Reset value to default" @click="() => modelOffset.y = 0">
-            <div i-solar:forward-linear transform-scale-x--100 text="neutral-500 dark:neutral-400" />
-          </button>
-        </div>
-      </template>
-    </FieldRange>
-    <FieldRange
-      :model-value="Number(modelOffset.z.toFixed(4))"
-      as="div"
-      :min="-modelSize.z"
-      :max="modelSize.z"
-      :step="modelSize.z / 100"
-      :label="t('settings.vrm.scale-and-position.z')"
-      @update:model-value="val => modelOffset.z = val"
-    >
-      <template #label>
-        <div flex items-center>
-          <div>{{ t('settings.vrm.scale-and-position.z') }}</div>
-          <button px-2 text-xs outline-none title="Reset value to default" @click="() => modelOffset.z = 0">
-            <div i-solar:forward-linear transform-scale-x--100 text="neutral-500 dark:neutral-400" />
-          </button>
-        </div>
-      </template>
-    </FieldRange>
-  </Section>
 </template>
diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRMScene.vue b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRMScene.vue
deleted file mode 100644
index 7c8570e1..00000000
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRMScene.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core'
-import { useElementBounding } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-
-import { useVRM } from '../../../../stores'
-import { VRMModel } from '../../../Scenes'
-
-const emit = defineEmits<{
-  (e: 'loadModelProgress', value: number): void
-  (e: 'error', value: unknown): void
-}>()
-const VRMContainerRef = ref<HTMLDivElement>()
-const { width, height } = useElementBounding(VRMContainerRef)
-const { selectedModel } = storeToRefs(useVRM())
-
-const cameraPositionX = ref(0.17)
-const cameraPositionY = ref(0.5)
-const cameraPositionZ = ref(-1)
-
-const modelRef = ref<{
-  setExpression: (expression: string) => void
-}>()
-
-defineExpose({
-  setExpression: (expression: string) => {
-    modelRef.value?.setExpression(expression)
-  },
-})
-</script>
-
-<template>
-  <div ref="VRMContainerRef" w="100%" h="100%">
-    <TresCanvas :alpha="true" :antialias="true" :width="width" :height="height">
-      <OrbitControls />
-      <TresAxesHelper :size="1" />
-      <TresPerspectiveCamera :position="[cameraPositionX, cameraPositionY, cameraPositionZ]" />
-      <TresDirectionalLight :color="0xFFFFFF" :intensity="1.2" :position="[1, 1, 1]" />
-      <TresAmbientLight :color="0xFFFFFF" :intensity="1.5" />
-      <VRMModel
-        ref="modelRef"
-        :key="selectedModel"
-        :model="selectedModel"
-        idle-animation="/assets/vrm/animations/idle_loop.vrma"
-        :paused="false"
-        @load-model-progress="(val) => emit('loadModelProgress', val)"
-        @error="(val) => emit('error', val)"
-      />
-    </TresCanvas>
-  </div>
-</template>
diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.ts b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.ts
index 50bbd7ce..5adacada 100644
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.ts
+++ b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.ts
@@ -1,5 +1 @@
 export { default as ModelSettings } from './index.vue'
-export { default as ModelSettingsLive2D } from './Live2D.vue'
-export { default as ModelSettingsLive2DScene } from './Live2DScene.vue'
-export { default as ModelSettingsVRM } from './VRM.vue'
-export { default as ModelSettingsVRMScene } from './VRMScene.vue'
diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.vue b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.vue
index 37c8cf7b..244accc6 100644
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.vue
+++ b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
+import Live2DScene from '../../../Scenes/Live2D.vue'
+import VRMScene from '../../../Scenes/VRM.vue'
 import Live2D from './Live2D.vue'
-import Live2DScene from './Live2DScene.vue'
 import VRM from './VRM.vue'
-import VRMScene from './VRMScene.vue'
 
 import { useSettings } from '../../../../stores/settings'
 
@@ -12,6 +12,8 @@ const props = defineProps<{
   palette: string[]
   live2dSceneClass?: string | string[]
   live2dSettingsClass?: string | string[]
+  vrmSceneClass?: string | string[]
+  vrmSettingsClass?: string | string[]
 }>()
 
 defineEmits<{
@@ -24,13 +26,15 @@ const { stageView } = storeToRefs(useSettings())
 <template>
   <!-- Live2D component for 2D stage view -->
   <template v-if="stageView === '2d'">
-    <Live2DScene
+    <div
       :class="[
         ...(props.live2dSceneClass
           ? (typeof props.live2dSceneClass === 'string' ? [props.live2dSceneClass] : props.live2dSceneClass)
           : []),
       ]"
-    />
+    >
+      <Live2DScene />
+    </div>
     <div
       flex="~ col gap-2" :class="[
         ...(props.live2dSettingsClass
@@ -43,9 +47,26 @@ const { stageView } = storeToRefs(useSettings())
   </template>
   <!-- VRM component for 3D stage view -->
   <template v-if="stageView === '3d'">
-    <VRMScene />
-    <div flex="~ col gap-2">
-      <VRM :palette="palette" @extract-colors-from-model="$emit('extractColorsFromModel')" @switch-to-live-2-d="stageView = '2d'" />
+    <div
+      :class="[
+        ...(props.vrmSceneClass
+          ? (typeof props.vrmSceneClass === 'string' ? [props.vrmSceneClass] : props.vrmSceneClass)
+          : []),
+      ]"
+    >
+      <VRMScene />
+    </div>
+    <div h-full w-full p-2>
+      <div
+        flex="~ col gap-2"
+        :class="[
+          ...(props.vrmSettingsClass
+            ? (typeof props.vrmSettingsClass === 'string' ? [props.vrmSettingsClass] : props.vrmSettingsClass)
+            : []),
+        ]"
+      >
+        <VRM :palette="palette" @extract-colors-from-model="$emit('extractColorsFromModel')" @switch-to-live-2-d="stageView = '2d'" />
+      </div>
     </div>
   </template>
 </template>
diff --git a/packages/stage-ui/src/components/Scenes/Live2D.vue b/packages/stage-ui/src/components/Scenes/Live2D.vue
index abd0bf3d..b5a13e9c 100644
--- a/packages/stage-ui/src/components/Scenes/Live2D.vue
+++ b/packages/stage-ui/src/components/Scenes/Live2D.vue
@@ -1,32 +1,23 @@
 <script setup lang="ts">
-import { TransitionVertical } from '@proj-airi/ui'
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
 import Screen from '../Misc/Screen.vue'
 import Live2DCanvas from './Live2D/Canvas.vue'
 import Live2DModel from './Live2D/Model.vue'
 
-import { useLive2d } from '../../stores'
-
 import '../../utils/live2d-zip-loader'
 
 withDefaults(defineProps<{
-  paused: boolean
+  paused?: boolean
   mouthOpenSize?: number
-  focusAt: { x: number, y: number }
+  focusAt?: { x: number, y: number }
   xOffset?: number | string
   yOffset?: number | string
   scale?: number
 }>(), {
+  paused: false,
+  focusAt: () => ({ x: 0, y: 0 }),
   mouthOpenSize: 0,
   scale: 1,
 })
-
-const { t } = useI18n()
-const show = ref(false)
-const { currentMotion } = storeToRefs(useLive2d())
 </script>
 
 <template>
@@ -50,80 +41,5 @@ const { currentMotion } = storeToRefs(useLive2d())
         :scale="scale"
       />
     </Live2DCanvas>
-    <div absolute bottom="3" right="3">
-      <div flex="~ row" cursor-pointer>
-        <label
-          :class="[show ? 'bg-neutral-300 dark:bg-neutral-200' : 'bg-neutral-100 dark:bg-neutral-700']"
-          transition="all ease-in-out duration-500"
-          text="lg neutral-500 dark:neutral-400"
-          m-1 h-fit w-fit cursor-pointer appearance-none gap-1 rounded-lg rounded-md border-none p-2 outline-none
-        >
-          <input
-            v-model="show"
-            :checked="show"
-            :aria-checked="show"
-            name="showLive2DViewerInspector"
-            type="checkbox"
-            appearance-none outline-none hidden
-          >
-          <div select-none>
-            <div i-solar:bug-bold-duotone />
-          </div>
-        </label>
-      </div>
-      <TransitionVertical>
-        <div v-if="show" min-w="50vw" z="<md:20" class="bottom-11 right-0" absolute m-1 w-full>
-          <div bg="neutral-200/20 dark:black/20" rounded-lg p-2 backdrop-blur-sm>
-            <div font-mono>
-              <span>{{ t('stage.viewers.debug-menu.emotions') }}</span>
-            </div>
-            <div flex="~ row" flex-wrap gap-2>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="currentMotion = { group: 'Surprise', index: 0 }"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.surprised') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="currentMotion = { group: 'Sad', index: 0 }"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.sad') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="currentMotion = { group: 'Angry', index: 0 }"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.angry') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="currentMotion = { group: 'Happy', index: 0 }"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.happy') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="currentMotion = { group: 'Awkward', index: 0 }"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.awkward') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="currentMotion = { group: 'Question', index: 0 }"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.question') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="currentMotion = { group: 'Think', index: 0 }"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.think') }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </TransitionVertical>
-    </div>
   </Screen>
 </template>
diff --git a/packages/stage-ui/src/components/Scenes/Stage.vue b/packages/stage-ui/src/components/Scenes/Stage.vue
index 6a91224c..aecf2035 100644
--- a/packages/stage-ui/src/components/Scenes/Stage.vue
+++ b/packages/stage-ui/src/components/Scenes/Stage.vue
@@ -41,7 +41,7 @@ const db = ref<DuckDBWasmDrizzleDatabase>()
 
 const vrmViewerRef = ref<{ setExpression: (expression: string) => void }>()
 
-const { stageView } = storeToRefs(useSettings())
+const { stageView, stageViewControlsEnabled } = storeToRefs(useSettings())
 const { mouthOpenSize } = storeToRefs(useSpeakingStore())
 const { audioContext, calculateVolume } = useAudioContext()
 const { onBeforeMessageComposed, onBeforeSend, onTokenLiteral, onTokenSpecial, onStreamEnd, onAssistantResponseEnd } = useChatStore()
@@ -245,6 +245,7 @@ onMounted(async () => {
         idle-animation="/assets/vrm/animations/idle_loop.vrma"
         min-w="50% <lg:full" min-h="100 sm:100" h-full w-full flex-1
         :paused="paused"
+        :show-axes="stageViewControlsEnabled"
         @error="console.error"
       />
     </div>
diff --git a/packages/stage-ui/src/components/Scenes/VRM.vue b/packages/stage-ui/src/components/Scenes/VRM.vue
index 49c72451..9dffa057 100644
--- a/packages/stage-ui/src/components/Scenes/VRM.vue
+++ b/packages/stage-ui/src/components/Scenes/VRM.vue
@@ -1,44 +1,35 @@
 <script setup lang="ts">
-import { TransitionVertical } from '@proj-airi/ui'
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import DataGuiRange from '../DataGui/Range.vue'
-import Collapsable from '../Misc/Collapsable.vue'
-import Screen from '../Misc/Screen.vue'
-import VRMModel from './VRM/Model.vue'
 
 import { useVRM } from '../../stores'
+import { Screen } from '../Misc'
+import { VRMModel } from '../Scenes'
 
-const props = defineProps<{
-  paused: boolean
-}>()
+const props = withDefaults(defineProps<{
+  paused?: boolean
+  showAxes?: boolean
+}>(), {
+  paused: false,
+  showAxes: false,
+})
 
 const emit = defineEmits<{
   (e: 'loadModelProgress', value: number): void
   (e: 'error', value: unknown): void
 }>()
+const { selectedModel, scale } = storeToRefs(useVRM())
 
-const show = ref(false)
-
-const { selectedModel } = storeToRefs(useVRM())
-
-const cameraPositionX = ref(-0.17)
-const cameraPositionY = ref(0)
+const cameraPositionX = ref(0.17)
+const cameraPositionY = ref(0.5)
 const cameraPositionZ = ref(-1)
-const vrmModelPositionX = ref(-0.18)
-const vrmModelPositionY = ref(-1.32)
-const vrmModelPositionZ = ref(-0.24)
 
 const modelRef = ref<{
   setExpression: (expression: string) => void
 }>()
 
-const { t } = useI18n()
-
 defineExpose({
   setExpression: (expression: string) => {
     modelRef.value?.setExpression(expression)
@@ -47,14 +38,16 @@ defineExpose({
 </script>
 
 <template>
-  <Screen v-slot="{ height, width }" relative>
+  <Screen v-slot="{ width, height }" relative>
     <TresCanvas :alpha="true" :antialias="true" :width="width" :height="height">
-      <OrbitControls />
-      <TresPerspectiveCamera :position="[cameraPositionX, cameraPositionY, cameraPositionZ]" />
+      <OrbitControls :enable-zoom="false" />
+      <TresAxesHelper v-if="props.showAxes" :size="1" />
+      <TresPerspectiveCamera :position="[cameraPositionX, cameraPositionY, cameraPositionZ]" :zoom="scale" />
       <TresDirectionalLight :color="0xFFFFFF" :intensity="1.2" :position="[1, 1, 1]" />
       <TresAmbientLight :color="0xFFFFFF" :intensity="1.5" />
       <VRMModel
         ref="modelRef"
+        :key="selectedModel"
         :model="selectedModel"
         idle-animation="/assets/vrm/animations/idle_loop.vrma"
         :paused="props.paused"
@@ -62,144 +55,5 @@ defineExpose({
         @error="(val) => emit('error', val)"
       />
     </TresCanvas>
-    <div absolute bottom="3" right="3">
-      <div flex="~ row" cursor-pointer>
-        <label
-          :class="[show ? 'bg-neutral-300 dark:bg-neutral-200' : 'bg-neutral-100 dark:bg-neutral-700']"
-          transition="all ease-in-out duration-500"
-          text="lg neutral-500 dark:neutral-400"
-          m-1 h-fit w-fit cursor-pointer appearance-none gap-1 rounded-lg rounded-md border-none p-2 outline-none
-        >
-          <input
-            v-model="show"
-            :checked="show"
-            :aria-checked="show"
-            name="showLive2DViewerInspector"
-            type="checkbox"
-            appearance-none outline-none hidden
-          >
-          <div select-none>
-            <div i-solar:bug-bold-duotone />
-          </div>
-        </label>
-      </div>
-      <TransitionVertical>
-        <div v-if="show" min-w="50vw" z="<md:20" class="bottom-11 right-0" absolute m-1 w-full>
-          <div bg="neutral-200/20 dark:black/20" flex="~ col" gap-2 rounded-lg p-2 backdrop-blur-sm>
-            <div font-mono>
-              <span>{{ t('stage.viewers.debug-menu.vrm.model.title') }}</span>
-            </div>
-            <Collapsable h-fit w-full flex="~ col" border="~ gray/25 rounded-lg" divide="y dashed gray/25" of-clip shadow-sm>
-              <template #label>
-                <span font-mono>{{ t('stage.viewers.debug-menu.vrm.camera') }}</span>
-              </template>
-              <div grid="~ cols-[20px_1fr_60px]" w-full gap-1 p-2 text-sm font-mono>
-                <div text="neutral-400 dark:neutral-500">
-                  <span>X</span>
-                </div>
-                <label w-full flex items-center gap-2>
-                  <DataGuiRange v-model="cameraPositionX" :min="-10" :max="10" :step="0.01" />
-                </label>
-                <div text-right>
-                  <span>{{ cameraPositionX }}</span>
-                </div>
-
-                <div text="neutral-400 dark:neutral-500">
-                  <span>Y</span>
-                </div>
-                <label w-full flex items-center gap-2>
-                  <DataGuiRange v-model="cameraPositionY" :min="-10" :max="10" :step="0.01" />
-                </label>
-                <div text-right>
-                  <span>{{ cameraPositionY }}</span>
-                </div>
-
-                <div text="neutral-400 dark:neutral-500">
-                  <span>Z</span>
-                </div>
-                <label w-full flex items-center gap-2>
-                  <DataGuiRange v-model="cameraPositionZ" :min="-10" :max="10" :step="0.01" />
-                </label>
-                <div text-right>
-                  <span>{{ cameraPositionZ }}</span>
-                </div>
-              </div>
-            </Collapsable>
-            <Collapsable h-fit w-full flex="~ col" border="~ gray/25 rounded-lg" divide="y dashed gray/25" of-clip shadow-sm>
-              <template #label>
-                <span font-mono>{{ t('stage.viewers.debug-menu.vrm.model.title') }}</span>
-              </template>
-              <div grid="~ cols-[20px_1fr_60px]" w-full gap-1 p-2 text-sm font-mono>
-                <div text="neutral-400 dark:neutral-500">
-                  <span>X</span>
-                </div>
-
-                <label w-full flex items-center gap-2>
-                  <DataGuiRange v-model="vrmModelPositionX" :min="-10" :max="10" :step="0.01" />
-                </label>
-                <div text-right>
-                  <span>{{ vrmModelPositionX }}</span>
-                </div>
-
-                <div text="neutral-400 dark:neutral-500">
-                  <span>Y</span>
-                </div>
-                <label w-full flex items-center gap-2>
-                  <DataGuiRange v-model="vrmModelPositionY" :min="-10" :max="10" :step="0.01" />
-                </label>
-                <div text-right>
-                  <span>{{ vrmModelPositionY }}</span>
-                </div>
-
-                <div text="neutral-400 dark:neutral-500">
-                  <span>Z</span>
-                </div>
-                <label w-full flex items-center gap-2>
-                  <DataGuiRange v-model="vrmModelPositionZ" :min="-10" :max="10" :step="0.01" />
-                </label>
-                <div text-right>
-                  <span>{{ vrmModelPositionZ }}</span>
-                </div>
-              </div>
-            </Collapsable>
-            <div font-mono>
-              <span>{{ t('stage.viewers.debug-menu.emotions') }}</span>
-            </div>
-            <div flex="~ row" w-full flex-wrap gap-2>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="modelRef?.setExpression('neutral')"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.neutral') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="modelRef?.setExpression('surprised')"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.surprised') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="modelRef?.setExpression('sad')"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.sad') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="modelRef?.setExpression('angry')"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.angry') }}
-              </button>
-              <button
-                rounded-lg bg="neutral-100/70 dark:neutral-800/50" px-2 py-1 backdrop-blur-sm
-                @click="modelRef?.setExpression('happy')"
-              >
-                {{ t('stage.viewers.debug-menu.emotions-btn.happy') }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </TransitionVertical>
-    </div>
   </Screen>
 </template>
diff --git a/packages/stage-ui/src/components/Scenes/VRM/Model.vue b/packages/stage-ui/src/components/Scenes/VRM/Model.vue
index a1efe76f..25536e6e 100644
--- a/packages/stage-ui/src/components/Scenes/VRM/Model.vue
+++ b/packages/stage-ui/src/components/Scenes/VRM/Model.vue
@@ -40,15 +40,16 @@ const {
   modelOffset,
   modelOrigin,
   modelSize,
-  modelPosition,
+  position,
+  scale,
 } = storeToRefs(vrmStore)
 
 watch(modelOffset, () => {
   if (vrm.value) {
     vrm.value.scene.position.set(
-      modelPosition.value.x,
-      modelPosition.value.y,
-      modelPosition.value.z,
+      position.value.x,
+      position.value.y,
+      position.value.z,
     )
   }
 }, { deep: true })
@@ -69,9 +70,10 @@ onMounted(async () => {
       console.warn('No VRM model loaded')
       return
     }
+
     const { _vrm, modelCenter: vrmModelCenter, modelSize: vrmModelSize } = _vrmInfo
 
-    // Set initial postions for model
+    // Set initial positions for model
     modelOrigin.value = {
       x: vrmModelCenter.x,
       y: vrmModelCenter.y,
@@ -83,7 +85,7 @@ onMounted(async () => {
       z: vrmModelSize.z,
     }
 
-    // Set initial positons for animation
+    // Set initial positions for animation
     function removeRootPositionTrack(clip: AnimationClip) {
       clip.tracks = clip.tracks.filter((track) => {
         return !track.name.endsWith('.position')
@@ -96,6 +98,7 @@ onMounted(async () => {
       console.warn('No VRM animation loaded')
       return
     }
+
     removeRootPositionTrack(clip)
 
     // play animation
@@ -105,6 +108,7 @@ onMounted(async () => {
     vrmEmote.value = useVRMEmote(_vrm)
 
     vrm.value = _vrm
+    vrm.value.scene.scale.set(scale.value, scale.value, scale.value)
 
     disposeBeforeRenderLoop = onBeforeRender(({ delta }) => {
       vrmAnimationMixer.value?.update(delta)
@@ -138,6 +142,12 @@ const { pause, resume } = useLoop()
 watch(() => props.paused, (value) => {
   value ? pause() : resume()
 })
+
+watch(scale, () => {
+  if (vrm.value) {
+    vrm.value.scene.scale.set(scale.value, scale.value, scale.value)
+  }
+}, { immediate: true })
 </script>
 
 <template>
diff --git a/packages/stage-ui/src/stores/settings.ts b/packages/stage-ui/src/stores/settings.ts
index 880faa69..4c87fdf7 100644
--- a/packages/stage-ui/src/stores/settings.ts
+++ b/packages/stage-ui/src/stores/settings.ts
@@ -13,6 +13,7 @@ export const useSettings = defineStore('settings', () => {
 
   const language = useLocalStorage('settings/language', 'en')
   const stageView = useLocalStorage('settings/stage/view/model-renderer', '2d')
+  const stageViewControlsEnabled = ref(false)
 
   const isAudioInputOn = useLocalStorage('settings/audio/input', 'false')
   const selectedAudioDeviceId = computed(() => selectedAudioDevice.value?.deviceId)
@@ -77,6 +78,7 @@ export const useSettings = defineStore('settings', () => {
     usePageSpecificTransitions,
     language,
     stageView,
+    stageViewControlsEnabled,
     themeColorsHue,
     themeColorsHueDynamic,
     isAudioInputOn,
diff --git a/packages/stage-ui/src/stores/vrm.ts b/packages/stage-ui/src/stores/vrm.ts
index 70c4310e..7a079cbd 100644
--- a/packages/stage-ui/src/stores/vrm.ts
+++ b/packages/stage-ui/src/stores/vrm.ts
@@ -7,18 +7,21 @@ export const useVRM = defineStore('vrm', () => {
   const modelUrl = ref<string>('/assets/vrm/models/AvatarSample-B/AvatarSample_B.vrm')
   const loadSource = ref<'file' | 'url'>('url')
   const loadingModel = ref(false)
+
+  const scale = useLocalStorage('settings/live2d/cameraScale', 1)
   const modelSize = useLocalStorage('settings/vrm/modelSize', { x: 0, y: 0, z: 0 })
   const modelOrigin = useLocalStorage('settings/vrm/modelOrigin', { x: 0, y: 0, z: 0 })
   const modelOffset = useLocalStorage('settings/vrm/modelOffset', { x: 0, y: 0, z: 0 })
-  const modelPosition = computed(() => ({
+
+  const position = computed(() => ({
     x: modelOrigin.value.x + modelOffset.value.x,
     y: modelOrigin.value.y + modelOffset.value.y,
     z: modelOrigin.value.z + modelOffset.value.z,
   }))
   const positionInPercentageString = computed(() => ({
-    x: `${modelPosition.value.x}%`,
-    y: `${modelPosition.value.y}%`,
-    z: `${modelPosition.value.z}%`,
+    x: `${position.value.x}%`,
+    y: `${position.value.y}%`,
+    z: `${position.value.z}%`,
   }))
 
   const modelObjectUrl = ref<string>()
@@ -52,9 +55,10 @@ export const useVRM = defineStore('vrm', () => {
     loadSource,
     loadingModel,
     modelSize,
+    scale,
     modelOrigin,
     modelOffset,
-    modelPosition,
+    position,
     positionInPercentageString,
     selectedModel, // Expose the new computed property
   }
diff --git a/packages/ui/src/components/Form/Range/Range.vue b/packages/ui/src/components/Form/Range/Range.vue
index 3a1a3bcd..c2347a1e 100644
--- a/packages/ui/src/components/Form/Range/Range.vue
+++ b/packages/ui/src/components/Form/Range/Range.vue
@@ -153,6 +153,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   border: var(--track-border);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
+  backdrop-filter: blur(8px);
   box-shadow: var(--track-box-shadow);
   position: relative;
   cursor: col-resize;
@@ -225,6 +226,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   border: var(--track-border);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
+  backdrop-filter: blur(8px);
   box-shadow: var(--track-box-shadow);
   cursor: col-resize;
   /* Trim left and right paddings of track */
@@ -307,6 +309,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   height: var(--track-height);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
+  backdrop-filter: blur(8px);
   border: var(--track-border);
   box-shadow: var(--track-box-shadow);
   box-sizing: border-box;
diff --git a/packages/ui/src/components/Form/Range/RoundRange.vue b/packages/ui/src/components/Form/Range/RoundRange.vue
new file mode 100644
index 00000000..90129cfa
--- /dev/null
+++ b/packages/ui/src/components/Form/Range/RoundRange.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+}>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+})
+
+const modelValue = defineModel<number>({ required: true })
+
+const scaledMin = computed(() => props.min * 10000)
+const scaledMax = computed(() => props.max * 10000)
+const scaledStep = computed(() => props.step * 10000)
+
+const sliderRef = ref<HTMLInputElement>()
+const sliderValue = computed({
+  get: () => modelValue.value * 10000,
+  set: (value: number) => {
+    modelValue.value = value / 10000
+    updateTrackColor()
+  },
+})
+
+onMounted(() => updateTrackColor())
+watch(sliderValue, () => updateTrackColor(), { immediate: true })
+watch([scaledMin, scaledMax, scaledStep], () => updateTrackColor(), { immediate: true })
+
+function updateTrackColor() {
+  if (!sliderRef.value) {
+    return
+  }
+
+  sliderRef.value.style.setProperty('--value', sliderValue.value.toString())
+  sliderRef.value.style.setProperty('--min', !sliderRef.value.min ? props.min.toString() : sliderRef.value.min)
+  sliderRef.value.style.setProperty('--max', !sliderRef.value.max ? props.max.toString() : sliderRef.value.max)
+}
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  target.style.setProperty('--value', target.value)
+}
+</script>
+
+<template>
+  <input
+    ref="sliderRef"
+    v-model.number="sliderValue"
+    type="range"
+    :min="scaledMin"
+    :max="scaledMax"
+    :step="scaledStep"
+    class="slider-progress form_input-round-range"
+    @input="handleInput"
+  >
+</template>
+
+<style scoped>
+/*generated with Input range slider CSS style generator (version 20211225)
+https://toughengineer.github.io/demo/slider-styler*/
+.form_input-round-range {
+  --height: 2em;
+
+  min-height: var(--height);
+  appearance: none;
+  background: transparent;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+
+  --thumb-width: var(--height);
+  --thumb-height: 0px;
+  --thumb-box-shadow: none;
+  --thumb-border: none;
+  --thumb-border-radius: 0px;
+  --thumb-background: rgb(255, 255, 255);
+
+  --track-height: calc(var(--height) - var(--track-value-padding) * 2);
+  --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);
+  --track-border: none;
+  --track-border-radius: 10px;
+  --track-background: rgba(0, 0, 0, 0.4);
+
+  --track-value-background: rgb(255, 255, 255);
+  --track-value-padding: 0px;
+}
+
+[data-direction="vertical"].form_input-round-range {
+  transform: rotate(180deg);
+}
+
+.dark .form_input-round-range {
+  --thumb-background: rgb(238, 238, 238);
+
+  --track-border: none;
+  --track-background: rgba(99, 99, 99, 0.7);
+  --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);
+
+  --track-value-background: rgb(238, 238, 238);
+}
+
+/*progress support*/
+.form_input-round-range.slider-progress {
+  --range: calc(var(--max) - var(--min));
+  --ratio: calc((var(--value) - var(--min)) / var(--range));
+  --sx: calc(0.5 * 0em + var(--ratio) * (100% - 0em));
+}
+
+.form_input-round-range:focus {
+  outline: none;
+}
+
+/*webkit*/
+.form_input-round-range::-webkit-slider-thumb {
+  appearance: none;
+  width: var(--thumb-width);
+  height: var(--thumb-height);
+  border-radius: var(--thumb-border-radius);
+  background: var(--thumb-background);
+  border: var(--thumb-border);
+  box-shadow: var(--thumb-box-shadow);
+  margin-top: 0px;
+  margin-left: calc(0 - var(--track-value-padding));
+  cursor: col-resize;
+  transition:
+    background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+[data-direction="vertical"]::-webkit-slider-thumb {
+  cursor: ns-resize;
+}
+
+.form_input-round-range::-webkit-slider-runnable-track {
+  height: var(--track-height);
+  border: var(--track-border);
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  backdrop-filter: blur(4px);
+  box-shadow: var(--track-box-shadow);
+  position: relative;
+  cursor: col-resize;
+  overflow: hidden;
+  transition:
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
+}
+
+[data-direction="vertical"]::-webkit-slider-runnable-track {
+  cursor: ns-resize;
+}
+
+.form_input-round-range.slider-progress::-webkit-slider-runnable-track {
+  background:
+    linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,
+    var(--track-background);
+}
+
+[data-direction="vertical"].form_input-round-range.slider-progress::-webkit-slider-runnable-track {
+  background: linear-gradient(var(--track-value-background) var(--sx), var(--track-background) var(--sx)) no-repeat;
+}
+
+/*mozilla*/
+.form_input-round-range::-moz-range-thumb {
+  width: var(--thumb-width);
+  height: var(--thumb-height);
+  border-radius: var(--thumb-border-radius);
+  background: var(--thumb-background);
+  border: none;
+  box-shadow: var(--thumb-box-shadow);
+  cursor: col-resize;
+  margin-left: calc(0 - var(--track-value-padding));
+  transition:
+    background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+[data-direction="vertical"]::-moz-range-thumb {
+  cursor: ns-resize;
+}
+
+.form_input-round-range::-moz-range-track {
+  height: var(--track-height);
+  border: var(--track-border);
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  backdrop-filter: blur(4px);
+  box-shadow: var(--track-box-shadow);
+  cursor: col-resize;
+  overflow: hidden;
+  /* Trim left and right paddings of track */
+  width: calc(100% - var(--track-value-padding) * 2);
+}
+
+[data-direction="vertical"]::-moz-range-track {
+  cursor: ns-resize;
+}
+
+.form_input-round-range.slider-progress::-moz-range-track {
+  background:
+    linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,
+    var(--track-background);
+}
+
+[data-direction="vertical"].form_input-round-range.slider-progress::-moz-range-track {
+  background: linear-gradient(var(--track-value-background) var(--sx), var(--track-background) var(--sx)) no-repeat;
+}
+
+/*ms*/
+.form_input-round-range::-ms-fill-upper {
+  background: transparent;
+  border-color: transparent;
+}
+
+.form_input-round-range::-ms-fill-lower {
+  background: transparent;
+  border-color: transparent;
+}
+
+.form_input-round-range::-ms-thumb {
+  width: var(--thumb-width);
+  height: var(--thumb-height);
+  border-radius: var(--thumb-border-radius);
+  background: var(--thumb-background);
+  border: var(--thumb-border);
+  box-shadow: var(--thumb-box-shadow);
+  box-sizing: border-box;
+  cursor: col-resize;
+
+  transition:
+    background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+[data-direction="vertical"]::-ms-thumb {
+  cursor: ns-resize;
+}
+
+.form_input-round-range::-ms-track {
+  height: var(--track-height);
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  backdrop-filter: blur(4px);
+  border: var(--track-border);
+  box-shadow: var(--track-box-shadow);
+  box-sizing: border-box;
+  cursor: col-resize;
+  overflow: hidden;
+}
+
+[data-direction="vertical"]::-ms-track {
+  cursor: ns-resize;
+}
+
+.form_input-round-range.slider-progress::-ms-fill-lower {
+  height: var(--track-height);
+  border-radius: var(--track-border-radius) 0 0 var(--track-border-radius);
+  margin: 0;
+  background: var(--track-value-background);
+  border: none;
+  border-right-width: 0;
+}
+</style>
diff --git a/packages/ui/src/components/Form/Range/index.ts b/packages/ui/src/components/Form/Range/index.ts
index 713d4e53..dd6a78c5 100644
--- a/packages/ui/src/components/Form/Range/index.ts
+++ b/packages/ui/src/components/Form/Range/index.ts
@@ -1,2 +1,3 @@
 export { default as ColorHueRange } from './ColorHueRange.vue'
 export { default as Range } from './Range.vue'
+export { default as RoundRange } from './RoundRange.vue'