diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5cea293..9a293bb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,8 @@
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": [
-    "packages/stage/locales"
+    "packages/stage-web/locales",
+    "packages/stage-tamagotchi/locales"
   ],
   "i18n-ally.sortKeys": true,
 
diff --git a/packages/stage-tamagotchi/src/renderer/src/components/Settings.vue b/packages/stage-tamagotchi/src/renderer/src/components/Settings.vue
index bc1cd09..731d4bb 100644
--- a/packages/stage-tamagotchi/src/renderer/src/components/Settings.vue
+++ b/packages/stage-tamagotchi/src/renderer/src/components/Settings.vue
@@ -111,7 +111,7 @@ onMounted(async () => {
           >
         </div>
         <div text="xs pink-500">
-          <span>{{ t('settings.language') }}</span>
+          <span>{{ t('settings.language.title') }}</span>
         </div>
         <div flex="~ row" w-full text="xs">
           <select
diff --git a/packages/stage-ui/src/components/Scenes/Live2D.vue b/packages/stage-ui/src/components/Scenes/Live2D.vue
index 49cba78..1c8dd3f 100644
--- a/packages/stage-ui/src/components/Scenes/Live2D.vue
+++ b/packages/stage-ui/src/components/Scenes/Live2D.vue
@@ -65,50 +65,50 @@ defineExpose({
         <div v-if="show" absolute w-full min-w="50vw" z="<md:20" class="bottom-10 right-0">
           <div bg="zinc-200/20 dark:black/20" rounded-lg p-2 backdrop-blur-sm>
             <div font-mono>
-              <span>Emotions</span>
+              <span>{{ $t('stage.viewers.debug-menu.emotions') }}</span>
             </div>
             <div flex="~ row" flex-wrap gap-2>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setMotion(EmotionSurpriseMotionName)"
               >
-                🤯 Surprised
+                {{ $t('stage.viewers.debug-menu.emotions-btn.surprised') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setMotion(EmotionSadMotionName)"
               >
-                😫 Sad
+                {{ $t('stage.viewers.debug-menu.emotions-btn.sad') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setMotion(EmotionAngryMotionName)"
               >
-                😠 Angry
+                {{ $t('stage.viewers.debug-menu.emotions-btn.angry') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setMotion(EmotionHappyMotionName)"
               >
-                😄 Happy
+                {{ $t('stage.viewers.debug-menu.emotions-btn.happy') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setMotion(EmotionAwkwardMotionName)"
               >
-                😳 Awkward
+                {{ $t('stage.viewers.debug-menu.emotions-btn.awkward') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setMotion(EmotionQuestionMotionName)"
               >
-                🤔 Question
+                {{ $t('stage.viewers.debug-menu.emotions-btn.question') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setMotion(EmotionThinkMotionName)"
               >
-                🤨 Think
+                {{ $t('stage.viewers.debug-menu.emotions-btn.think') }}
               </button>
             </div>
           </div>
diff --git a/packages/stage-ui/src/components/Scenes/VRM.vue b/packages/stage-ui/src/components/Scenes/VRM.vue
index b9d22f7..31bdc89 100644
--- a/packages/stage-ui/src/components/Scenes/VRM.vue
+++ b/packages/stage-ui/src/components/Scenes/VRM.vue
@@ -84,11 +84,11 @@ defineExpose({
         <div v-if="show" absolute w-full min-w="50vw" z="<md:20" class="bottom-10 right-0">
           <div bg="zinc-200/20 dark:black/20" flex="~ col" gap-2 rounded-lg p-2 backdrop-blur-sm>
             <div font-mono>
-              <span>Model</span>
+              <span>{{ $t('stage.viewers.debug-menu.vrm.model.title') }}</span>
             </div>
             <Collapsable h-fit w-full>
               <template #label>
-                <span font-mono>Camera</span>
+                <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="zinc-400 dark:zinc-500">
@@ -124,7 +124,7 @@ defineExpose({
             </Collapsable>
             <Collapsable h-fit w-full>
               <template #label>
-                <span font-mono>Model</span>
+                <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="zinc-400 dark:zinc-500">
@@ -160,38 +160,38 @@ defineExpose({
               </div>
             </Collapsable>
             <div font-mono>
-              <span>Emotions</span>
+              <span>{{ $t('stage.viewers.debug-menu.emotions') }}</span>
             </div>
             <div flex="~ row" w-full flex-wrap gap-2>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setExpression('neutral')"
               >
-                🙂 Neutral
+                {{ $t('stage.viewers.debug-menu.emotions-btn.neutral') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setExpression('surprised')"
               >
-                🤯 Surprised
+                {{ $t('stage.viewers.debug-menu.emotions-btn.surprised') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setExpression('sad')"
               >
-                😫 Sad
+                {{ $t('stage.viewers.debug-menu.emotions-btn.sad') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setExpression('angry')"
               >
-                😠 Angry
+                {{ $t('stage.viewers.debug-menu.emotions-btn.angry') }}
               </button>
               <button
                 rounded-lg bg="zinc-100/70 dark:zinc-800/50" px-2 py-1 backdrop-blur-sm
                 @click="modelRef?.setExpression('happy')"
               >
-                😄 Happy
+                {{ $t('stage.viewers.debug-menu.emotions-btn.happy') }}
               </button>
             </div>
           </div>
diff --git a/packages/stage-web/locales/en.yml b/packages/stage-web/locales/en.yml
index 7c3a8b2..5c9406c 100644
--- a/packages/stage-web/locales/en.yml
+++ b/packages/stage-web/locales/en.yml
@@ -47,7 +47,11 @@ settings:
     label: ElevenLabs API Key
     placeholder: Input your ElevenLabs API key
     placeholder_mobile: Elevenlabs API Key
-  language: Language
+  language:
+    chinese: 简体中文
+    english: English
+    title: Language
+  microphone: Microphone
   models: Model
   openai-api-key:
     label: OpenAI API Key
@@ -57,10 +61,41 @@ settings:
     label: OpenAI API BaseURL
     placeholder: Input your API base URL
     placeholder_mobile: OpenAI API BaseURL
+  title: Settings
   voices: Voice
 stage:
+  chat:
+    message:
+      character-name:
+        airi: Airi
+        you: You
+    tabs:
+      chat: Chat
+      clothes: Clothes
+      custom: Custom
   message: Message
+  operations:
+    load-models: Load Models
+    load-models-status:
+      loading: Loading
+      ready: Ready
   select-a-audio-input: Select a Audio Input
   select-a-model: Select a model
   select-a-voice: Choose a voice
+  viewers:
+    debug-menu:
+      emotions: Emotions
+      emotions-btn:
+        angry: 😠 Angry
+        awkward: 😳 Awkward
+        happy: 😄 Happy
+        neutral: 🙂 Neutral
+        question: 🤔 Question
+        sad: 😫 Sad
+        surprised: 🤯 Surprised
+        think: 🤨 Think
+      vrm:
+        camera: Camera
+        model:
+          title: Model
   waiting: Waiting
diff --git a/packages/stage-web/locales/zh-CN.yml b/packages/stage-web/locales/zh-CN.yml
index af4d545..e1e4285 100644
--- a/packages/stage-web/locales/zh-CN.yml
+++ b/packages/stage-web/locales/zh-CN.yml
@@ -35,7 +35,10 @@ settings:
     label: ElevenLabs API 密钥
     placeholder: 输入您的 ElevenLabs API 密钥
     placeholder_mobile: ElevenLabs API Key
-  language: 语言
+  language:
+    chinese: 简体中文
+    english: English
+    title: 语言
   models: 模型
   openai-api-key:
     label: OpenAI API 密钥
@@ -45,6 +48,7 @@ settings:
     label: OpenAI API BaseURL
     placeholder: 输入您的 API BaseURL
     placeholder_mobile: OpenAI BaseURL
+  title: 设置
   voices: 声线
 stage:
   message: 消息
diff --git a/packages/stage-web/src/components/Layouts/InteractiveArea.vue b/packages/stage-web/src/components/Layouts/InteractiveArea.vue
index 33e24ee..ddbbbdb 100644
--- a/packages/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/packages/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -117,7 +117,7 @@ onAfterSend(async () => {
         <input v-model="tab" type="radio" name="tab" value="chat" hidden>
         <div i-solar:dialog-2-bold-duotone text="2xl" transform="translate-y--2" />
         <div flex="~ row" items-center>
-          <span min-w="3em">Chat</span>
+          <span min-w="3em">{{ $t('stage.chat.tabs.chat') }}</span>
         </div>
       </label>
       <label
@@ -137,7 +137,7 @@ onAfterSend(async () => {
         <input v-model="tab" type="radio" name="tab" value="custom" hidden>
         <div i-solar:star-fall-2-bold-duotone text="2xl" transform="translate-y--2" />
         <div flex="~ row" items-center>
-          <span>Custom</span>
+          <span>{{ $t('stage.chat.tabs.custom') }}</span>
         </div>
       </label>
       <label
@@ -157,7 +157,7 @@ onAfterSend(async () => {
         <input v-model="tab" type="radio" name="tab" value="clothes" hidden>
         <div i-solar:magic-stick-3-bold-duotone text="2xl" transform="translate-y--2" />
         <div flex="~ row" items-center>
-          <span>Clothes</span>
+          <span>{{ $t('stage.chat.tabs.clothes') }}</span>
         </div>
       </label>
     </fieldset>
@@ -193,15 +193,15 @@ onAfterSend(async () => {
       >
         <Transition mode="out-in">
           <div v-if="whisperStatus === null" flex="~ row" items-center justify-center space-x-1>
-            Load Models
+            {{ $t('stage.operations.load-models') }}
           </div>
           <div v-else-if="whisperStatus === 'loading'" flex="~ row" items-center justify-center space-x-1>
             <div i-svg-spinners:bouncing-ball class="text-cyan" />
-            <span>Loading</span>
+            <span>{{ $t('stage.operations.load-models-status.loading') }}</span>
           </div>
           <div v-else-if="whisperStatus === 'ready'" flex="~ row" items-center justify-center space-x-1>
             <div i-lucide:check class="text-cyan" />
-            <span>Ready</span>
+            <span>{{ $t('stage.operations.load-models-status.ready') }}</span>
           </div>
         </Transition>
       </button>
@@ -238,7 +238,7 @@ onAfterSend(async () => {
           <input v-model="showMicrophoneSelect" type="checkbox" hidden>
           <div i-solar:microphone-2-bold-duotone />
           <div>
-            <span v-if="!listening">Microphone</span>
+            <span v-if="!listening">{{ $t('settings.microphone') }}</span>
             <span v-else>Listening...</span>
           </div>
         </label>
diff --git a/packages/stage-web/src/components/Settings.vue b/packages/stage-web/src/components/Settings.vue
index d4440b3..78f7f38 100644
--- a/packages/stage-web/src/components/Settings.vue
+++ b/packages/stage-web/src/components/Settings.vue
@@ -178,7 +178,7 @@ onMounted(async () => {
             >
           </div>
           <div text-sm>
-            <span>{{ t('settings.language') }}</span>
+            <span>{{ t('settings.language.title') }}</span>
           </div>
           <div flex="~ row" w-full text="sm">
             <select
@@ -186,10 +186,10 @@ onMounted(async () => {
               outline-none
             >
               <option value="en-US">
-                English
+                {{ $t('settings.language.english') }}
               </option>
               <option value="zh-CN">
-                简体中文
+                {{ $t('settings.language.chinese') }}
               </option>
             </select>
           </div>
diff --git a/packages/stage-web/src/components/Widgets/ChatHistory.vue b/packages/stage-web/src/components/Widgets/ChatHistory.vue
index 145902e..5ebaaee 100644
--- a/packages/stage-web/src/components/Widgets/ChatHistory.vue
+++ b/packages/stage-web/src/components/Widgets/ChatHistory.vue
@@ -50,7 +50,7 @@ onTokenLiteral(async () => {
             bg="<md:pink-500/25"
           >
             <div>
-              <span text-xs text="pink-400/90 dark:pink-600/90" font-semibold class="inline <sm:hidden">Airi</span>
+              <span text-xs text="pink-400/90 dark:pink-600/90" font-semibold class="inline <sm:hidden">{{ $t('stage.chat.message.character-name.airi') }}</span>
             </div>
             <div v-if="message.content" class="markdown-content" text="base <sm:xs" v-html="process(message.content as string)" />
             <div v-else i-eos-icons:three-dots-loading />
@@ -66,7 +66,7 @@ onTokenLiteral(async () => {
             bg="<md:cyan-500/25"
           >
             <div>
-              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">You</span>
+              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">{{ $t('stage.chat.message.character-name.you') }}</span>
             </div>
             <div v-if="message.content" class="markdown-content" text="base <sm:xs" v-html="process(message.content as string)" />
             <div v-else />
diff --git a/packages/stage-web/src/components/Widgets/MobileChatHistory.vue b/packages/stage-web/src/components/Widgets/MobileChatHistory.vue
index c64a0d2..9559707 100644
--- a/packages/stage-web/src/components/Widgets/MobileChatHistory.vue
+++ b/packages/stage-web/src/components/Widgets/MobileChatHistory.vue
@@ -48,7 +48,7 @@ onTokenLiteral(async () => {
             bg="<md:pink-500/25"
           >
             <div>
-              <span text-xs text="pink-400/90 dark:pink-600/90" font-semibold class="inline <sm:hidden">Airi</span>
+              <span text-xs text="pink-400/90 dark:pink-600/90" font-semibold class="inline <sm:hidden">{{ $t('stage.chat.message.character-name.airi') }}</span>
             </div>
             <div v-if="message.content" class="markdown-content" text="base <sm:xs" v-html="process(message.content as string)" />
             <div v-else i-eos-icons:three-dots-loading />
@@ -64,7 +64,7 @@ onTokenLiteral(async () => {
             bg="<md:cyan-500/25"
           >
             <div>
-              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">You</span>
+              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">{{ $t('stage.chat.message.character-name.you') }}</span>
             </div>
             <div v-if="message.content" class="markdown-content" text="base <sm:xs" v-html="process(message.content as string)" />
             <div v-else />
diff --git a/packages/stage-web/src/components/Widgets/MobileSettings.vue b/packages/stage-web/src/components/Widgets/MobileSettings.vue
index 89b2eb7..e347667 100644
--- a/packages/stage-web/src/components/Widgets/MobileSettings.vue
+++ b/packages/stage-web/src/components/Widgets/MobileSettings.vue
@@ -72,7 +72,7 @@ onMounted(async () => {
 <template>
   <div>
     <h2 text="slate-800/80 dark:slate-200/80 xl" font-bold>
-      Settings
+      {{ t('settings.title') }}
     </h2>
     <div>
       <div
@@ -113,7 +113,7 @@ onMounted(async () => {
           >
         </div>
         <div text="sm pink-500">
-          <span>{{ t('settings.language') }}</span>
+          <span>{{ t('settings.language.title') }}</span>
         </div>
         <div flex="~ row" w-full text="sm">
           <select
@@ -121,10 +121,10 @@ onMounted(async () => {
             h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
           >
             <option value="en-US">
-              English
+              {{ t('settings.language.english') }}
             </option>
             <option value="zh-CN">
-              简体中文
+              {{ t('settings.language.chinese') }}
             </option>
           </select>
         </div>