diff --git a/README.md b/README.md
index d18554088..003c99b4e 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="./docs/public/readme-image-pc-preview.png" width="50%">
+</p>
+
 <h1 align="center">アイリ VTuber</h1>
 
 <p align="center">
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 3c3871469..32b26aeca 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="./docs/public/readme-image-pc-preview.png" width="50%">
+</p>
+
 <h1 align="center">アイリ VTuber</h1>
 
 <p align="center">
@@ -16,7 +20,19 @@ pnpm i
 pnpm dev
 ```
 
-## Acknowledgements
+## 使用的模型
+
+- [onnx-community/whisper-large-v3-turbo · Hugging Face](https://huggingface.co/onnx-community/whisper-large-v3-turbo)
+
+## 类似项目
+
+- [InsanityLabs/AIVTuber](https://github.com/InsanityLabs/AIVTuber?tab=readme-ov-file)
+- [IRedDragonICY/vixevia](https://github.com/IRedDragonICY/vixevia)
+- [t41372/Open-LLM-VTuber](https://github.com/t41372/Open-LLM-VTuber)
+
+## 鸣谢
 
 - [pixiv/ChatVRM](https://github.com/pixiv/ChatVRM)
 - [josephrocca/ChatVRM-js: A JS conversion/adaptation of parts of the ChatVRM (TypeScript) code for standalone use in OpenCharacters and elsewhere](https://github.com/josephrocca/ChatVRM-js)
+- UI 和样式的设计受 [Cookard](https://store.steampowered.com/app/2919650/Cookard/)，[UNBEATABLE](https://store.steampowered.com/app/2240620/UNBEATABLE/)，以及 [Sensei! I like you so much!](https://store.steampowered.com/app/2957700/_/)，还有 [Ayame by Mercedes Bazan](https://dribbble.com/shots/22157656-Ayame) 和 [Wish by Mercedes Bazan](https://dribbble.com/shots/24501019-Wish) 的作品启发
+- [mallorbc/whisper_mic](https://github.com/mallorbc/whisper_mic)
diff --git a/docs/public/readme-image-pc-preview.png b/docs/public/readme-image-pc-preview.png
new file mode 100644
index 000000000..7d3e4549d
Binary files /dev/null and b/docs/public/readme-image-pc-preview.png differ
diff --git a/packages/stage/src/components/Layouts/InteractiveArea.vue b/packages/stage/src/components/Layouts/InteractiveArea.vue
index dd68679b5..551141fea 100644
--- a/packages/stage/src/components/Layouts/InteractiveArea.vue
+++ b/packages/stage/src/components/Layouts/InteractiveArea.vue
@@ -188,9 +188,9 @@ onAfterSend(async () => {
     </div>
     <div flex="~ row" gap-2>
       <button
-        bg="teal-100 hover:teal-200 dark:teal-800 dark:hover:teal-700"
+        bg="cyan-100 hover:cyan-200 dark:cyan-800 dark:hover:cyan-700"
         transition="all duration-250 ease-in-out"
-        text="teal-400"
+        text="cyan-400"
         mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
         @click="handleLoadWhisper"
       >
@@ -212,10 +212,10 @@ onAfterSend(async () => {
         <TransitionVertical>
           <fieldset
             v-if="showMicrophoneSelect"
-            transform="translate-y--100%" right="-50%" bottom="-10" text="teal-400 dark:white" bg="white dark:teal-900" border="solid 4 teal-200 dark:teal-800"
+            transform="translate-y--100%" right="-50%" bottom="-10" text="cyan-400 dark:white" bg="white dark:cyan-900" border="solid 4 cyan-200 dark:cyan-800"
             absolute z-30 rounded-2xl px-2 py-2 text-right text-nowrap text-base font-sans
           >
-            <label v-for="(input, index) in audioInputs" :key="index" class="[&_div_span]:dark:hover:bg-teal-300 [&_div_span]:dark:hover:bg-teal-900">
+            <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 gap-2 grid="cols-2">
                 <div min-w="6">
@@ -223,7 +223,7 @@ onAfterSend(async () => {
                 </div>
                 <span
                   inline-block
-                  :class="[input.deviceId === selectedAudioDeviceId ? 'teal-400 dark:text-white' : 'teal-400/50 dark:text-white/50']"
+                  :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 }}
@@ -233,9 +233,9 @@ onAfterSend(async () => {
           </fieldset>
         </TransitionVertical>
         <label
-          bg="teal-100 hover:teal-200 dark:teal-800 dark:hover:teal-700"
+          bg="cyan-100 hover:cyan-200 dark:cyan-800 dark:hover:cyan-700"
           transition="all duration-250 ease-in-out"
-          text="teal-400"
+          text="cyan-400"
           mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
         >
           <input v-model="showMicrophoneSelect" type="checkbox" hidden>
diff --git a/packages/stage/src/components/Widgets/ChatHistory.vue b/packages/stage/src/components/Widgets/ChatHistory.vue
index 65362ea17..7552b87d7 100644
--- a/packages/stage/src/components/Widgets/ChatHistory.vue
+++ b/packages/stage/src/components/Widgets/ChatHistory.vue
@@ -59,14 +59,14 @@ onTokenLiteral(async () => {
         <div v-else-if="message.role === 'user'" flex="~ row-reverse" ml="12">
           <div
             flex="~ col"
-            border="4 solid teal-200/50 dark:teal-500/50"
-            shadow="md teal-200/50 dark:none"
+            border="4 solid cyan-200/50 dark:cyan-500/50"
+            shadow="md cyan-200/50 dark:none"
             px="2"
             h="unset <sm:fit" min-w-20 rounded-lg px-2 py-1
-            bg="<md:teal-500/25"
+            bg="<md:cyan-500/25"
           >
             <div>
-              <span text-xs text="teal-400/90 dark:teal-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">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/src/components/Widgets/MobileChatHistory.vue b/packages/stage/src/components/Widgets/MobileChatHistory.vue
index cf97e46b5..d86662a99 100644
--- a/packages/stage/src/components/Widgets/MobileChatHistory.vue
+++ b/packages/stage/src/components/Widgets/MobileChatHistory.vue
@@ -57,14 +57,14 @@ onTokenLiteral(async () => {
         <div v-else-if="message.role === 'user'" flex="~">
           <div
             flex="~ col"
-            border="4 solid teal-200/50 dark:teal-500/50"
-            shadow="md teal-200/50 dark:none"
+            border="4 solid cyan-200/50 dark:cyan-500/50"
+            shadow="md cyan-200/50 dark:none"
             px="2"
             h="unset <sm:fit" min-w-20 rounded-lg px-2 py-1
-            bg="<md:teal-500/25"
+            bg="<md:cyan-500/25"
           >
             <div>
-              <span text-xs text="teal-400/90 dark:teal-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">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 />