diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue b/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
index 9d84d6547..526cf71ea 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
@@ -7,7 +7,7 @@ const emits = defineEmits<{
   (e: 'reset'): void
 }>()
 
-const { stageView, stageViewControlsEnabled } = storeToRefs(useSettings())
+const { stageModelRenderer, stageViewControlsEnabled } = storeToRefs(useSettings())
 
 const mode = defineModel<'x' | 'y' | 'z' | 'scale'>({ required: true })
 
@@ -31,7 +31,7 @@ function handleViewControlsToggle(targetMode: 'x' | 'y' | 'z' | 'scale') {
         <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')">
+        <Button v-if="stageModelRenderer === 'vrm'" 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')">
diff --git a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
index 46002513e..f62c752c1 100644
--- a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
@@ -34,7 +34,7 @@ const { activeProvider, activeModel } = storeToRefs(useConsciousnessStore())
 useResizeObserver(document.documentElement, () => screenSafeArea.update())
 
 // const { askPermission } = useSettingsAudioDevice()
-const { themeColorsHueDynamic, stageView, stageViewControlsEnabled } = storeToRefs(useSettings())
+const { themeColorsHueDynamic, stageViewControlsEnabled } = storeToRefs(useSettings())
 const { enabled, selectedAudioInput } = storeToRefs(useSettingsAudioDevice())
 const { send, onAfterMessageComposed, discoverToolsCompatibility } = useChatStore()
 const { messages } = storeToRefs(useChatStore())
@@ -145,14 +145,6 @@ onMounted(() => {
           <!-- <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>
diff --git a/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue b/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue
index fdca8b63c..4107e575d 100644
--- a/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue
+++ b/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue
@@ -10,27 +10,27 @@ const props = defineProps<{
   mode: 'x' | 'y' | 'z' | 'scale'
 }>()
 
-const { stageView, stageViewControlsEnabled } = storeToRefs(useSettings())
+const { stageModelRenderer, stageViewControlsEnabled } = storeToRefs(useSettings())
 const { scale: vrmScale, modelOffset: vrmPosition, modelSize: vrmModelSize } = storeToRefs(useVRM())
 const { scale: live2dScale, position: live2dPosition } = storeToRefs(useLive2d())
 
 const viewControlsValueX = computed({
   get: () => {
-    switch (stageView.value) {
-      case '2d':
+    switch (stageModelRenderer.value) {
+      case 'live2d':
         return live2dPosition.value.x
-      case '3d':
+      case 'vrm':
         return vrmPosition.value.x
       default:
         return 0
     }
   },
   set: (value) => {
-    switch (stageView.value) {
-      case '2d':
+    switch (stageModelRenderer.value) {
+      case 'live2d':
         live2dPosition.value.x = value
         break
-      case '3d':
+      case 'vrm':
         vrmPosition.value.x = value
         break
       default:
@@ -40,30 +40,30 @@ const viewControlsValueX = computed({
 })
 
 const viewControlsValueXMin = computed(() => {
-  return stageView.value === '2d' ? -500 : -vrmModelSize.value.x - 10
+  return stageModelRenderer.value === 'live2d' ? -500 : -vrmModelSize.value.x - 10
 })
 
 const viewControlsValueXMax = computed(() => {
-  return stageView.value === '2d' ? 500 : vrmModelSize.value.x + 10
+  return stageModelRenderer.value === 'vrm' ? 500 : vrmModelSize.value.x + 10
 })
 
 const viewControlsValueY = computed({
   get: () => {
-    switch (stageView.value) {
-      case '2d':
+    switch (stageModelRenderer.value) {
+      case 'live2d':
         return live2dPosition.value.y
-      case '3d':
+      case 'vrm':
         return vrmPosition.value.y
       default:
         return 0
     }
   },
   set: (value) => {
-    switch (stageView.value) {
-      case '2d':
+    switch (stageModelRenderer.value) {
+      case 'live2d':
         live2dPosition.value.y = value
         break
-      case '3d':
+      case 'vrm':
         vrmPosition.value.y = value
         break
       default:
@@ -73,29 +73,29 @@ const viewControlsValueY = computed({
 })
 
 const viewControlsValueYMin = computed(() => {
-  return stageView.value === '2d' ? -500 : -vrmModelSize.value.y - 10
+  return stageModelRenderer.value === 'live2d' ? -500 : -vrmModelSize.value.y - 10
 })
 
 const viewControlsValueYMax = computed(() => {
-  return stageView.value === '2d' ? 500 : vrmModelSize.value.y + 10
+  return stageModelRenderer.value === 'vrm' ? 500 : vrmModelSize.value.y + 10
 })
 
 const viewControlsValueZ = computed({
   get: () => {
-    switch (stageView.value) {
-      case '2d':
+    switch (stageModelRenderer.value) {
+      case 'live2d':
         return 0
-      case '3d':
+      case 'vrm':
         return vrmPosition.value.z
       default:
         return 0
     }
   },
   set: (value) => {
-    switch (stageView.value) {
-      case '2d':
+    switch (stageModelRenderer.value) {
+      case 'live2d':
         break
-      case '3d':
+      case 'vrm':
         vrmPosition.value.z = value
         break
       default:
@@ -105,23 +105,23 @@ const viewControlsValueZ = computed({
 })
 
 const viewControlsValueZMin = computed(() => {
-  return stageView.value === '2d' ? -500 : -vrmModelSize.value.z - 10
+  return stageModelRenderer.value === 'live2d' ? -500 : -vrmModelSize.value.z - 10
 })
 
 const viewControlsValueZMax = computed(() => {
-  return stageView.value === '2d' ? 500 : vrmModelSize.value.z + 10
+  return stageModelRenderer.value === 'live2d' ? 500 : vrmModelSize.value.z + 10
 })
 
 const viewControlsValueScale = computed({
   get: () => {
-    if (stageView.value === '2d') {
+    if (stageModelRenderer.value === 'live2d') {
       return live2dScale.value
     }
 
     return vrmScale.value
   },
   set: (value) => {
-    if (stageView.value === '2d') {
+    if (stageModelRenderer.value === 'live2d') {
       live2dScale.value = value
     }
     else {
@@ -168,7 +168,7 @@ defineExpose({
             {{ viewControlsValueY.toFixed(2) }}
           </div>
         </div>
-        <div v-else-if="stageView === '3d' && props.mode === 'z'" relative class="[&_.round-range-tooltip]:hover:opacity-100">
+        <div v-else-if="stageModelRenderer === 'vrm' && 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) }}
diff --git a/packages/stage-ui/src/components/Scenarios/Dialogs/model-selector/model-selector.vue b/packages/stage-ui/src/components/Scenarios/Dialogs/model-selector/model-selector.vue
index 672340bbe..156ccb2ad 100644
--- a/packages/stage-ui/src/components/Scenarios/Dialogs/model-selector/model-selector.vue
+++ b/packages/stage-ui/src/components/Scenarios/Dialogs/model-selector/model-selector.vue
@@ -61,6 +61,7 @@ const mapFormatRenderer: Record<DisplayModelFormat, string> = {
   [DisplayModelFormat.Live2dDirectory]: 'Live2D',
   [DisplayModelFormat.VRM]: 'VRM',
   [DisplayModelFormat.PMXDirectory]: 'MMD',
+  [DisplayModelFormat.PMXZip]: 'MMD',
   [DisplayModelFormat.PMD]: 'MMD',
 }
 
diff --git a/packages/stage-ui/src/components/Scenes/Stage.vue b/packages/stage-ui/src/components/Scenes/Stage.vue
index 9d055ba4a..a4c859fe1 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, stageViewControlsEnabled, live2dDisableFocus, stageModelSelectedUrl } = storeToRefs(useSettings())
+const { stageModelRenderer, stageViewControlsEnabled, live2dDisableFocus, stageModelSelectedUrl } = storeToRefs(useSettings())
 const { mouthOpenSize } = storeToRefs(useSpeakingStore())
 const { audioContext, calculateVolume } = useAudioContext()
 const { onBeforeMessageComposed, onBeforeSend, onTokenLiteral, onTokenSpecial, onStreamEnd, onAssistantResponseEnd } = useChatStore()
@@ -137,14 +137,14 @@ const { currentMotion } = storeToRefs(useLive2d())
 const emotionsQueue = useQueue<Emotion>({
   handlers: [
     async (ctx) => {
-      if (stageView.value === 'vrm') {
+      if (stageModelRenderer.value === 'vrm') {
         const value = EMOTION_VRMExpressionName_value[ctx.data]
         if (!value)
           return
 
         await vrmViewerRef.value!.setExpression(value)
       }
-      else if (stageView.value === 'live2d') {
+      else if (stageModelRenderer.value === 'live2d') {
         currentMotion.value = { group: EMOTION_EmotionMotionName_value[ctx.data] }
       }
     },
@@ -229,7 +229,7 @@ onMounted(async () => {
   <div relative>
     <div h-full w-full>
       <Live2DScene
-        v-if="stageView === 'live2d'"
+        v-if="stageModelRenderer === 'live2d'"
         min-w="50% <lg:full" min-h="100 sm:100" h-full w-full flex-1
         :model-src="stageModelSelectedUrl"
         :focus-at="focusAt"
@@ -241,7 +241,7 @@ onMounted(async () => {
         :disable-focus-at="live2dDisableFocus"
       />
       <VRMScene
-        v-else-if="stageView === 'vrm'"
+        v-else-if="stageModelRenderer === 'vrm'"
         ref="vrmViewerRef"
         :model-src="stageModelSelectedUrl"
         idle-animation="/assets/vrm/animations/idle_loop.vrma"