diff --git a/app/src/App.vue b/app/src/App.vue
index 1eb30a2..49670ea 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import Login from "./components/icons/login.vue";
-import {auth, username} from "./assets/script/auth";
+import { auth, username } from "./assets/script/auth";
 import Light from "./components/icons/light.vue";
 import Star from "./components/icons/star.vue";
-import { ref } from "vue";
-import {mobile} from "./assets/script/shared";
+import { mobile, gpt4 } from "./assets/script/shared";
 
-const gpt4 = ref(false);
 
 function goto() {
   window.location.href = "https://deeptrain.net/login?app=chatnio";
diff --git a/app/src/assets/script/conversation.ts b/app/src/assets/script/conversation.ts
index 1d56465..3fc60b5 100644
--- a/app/src/assets/script/conversation.ts
+++ b/app/src/assets/script/conversation.ts
@@ -1,14 +1,16 @@
 import {nextTick, reactive, ref} from "vue";
 import type { Ref } from "vue";
 import axios from "axios";
-import {auth, token} from "./auth";
-import {ws_api} from "./conf";
+import { auth, token } from "./auth";
+import { ws_api } from "./conf";
+import { gpt4 } from "./shared";
 
 type Message = {
   content: string;
   role: string;
   time: string;
   stamp: number;
+  gpt4?: boolean;
 }
 
 type StreamMessage = {
@@ -132,6 +134,7 @@ export class Conversation {
       role: "user",
       time: new Date().toLocaleTimeString(),
       stamp: new Date().getTime(),
+      gpt4: gpt4.value,
     })
     nextTick(() => {
       this.refresh();
@@ -144,6 +147,7 @@ export class Conversation {
       role: "bot",
       time: new Date().toLocaleTimeString(),
       stamp: new Date().getTime(),
+      gpt4: gpt4.value,
     })
     this.typingEffect(this.len.value - 1, content);
   }
@@ -154,6 +158,7 @@ export class Conversation {
       role: "bot",
       time: new Date().toLocaleTimeString(),
       stamp: new Date().getTime(),
+      gpt4: gpt4.value,
     })
     this.dynamicTypingEffect(this.len.value - 1, content, end);
   }
diff --git a/app/src/assets/script/shared.ts b/app/src/assets/script/shared.ts
index f6ba9f7..c9a5095 100644
--- a/app/src/assets/script/shared.ts
+++ b/app/src/assets/script/shared.ts
@@ -1,6 +1,7 @@
 import {ref} from "vue";
 
 export const mobile = ref<boolean>((document.body.clientWidth < document.body.clientHeight) && (document.body.clientWidth < 600));
+export const gpt4 = ref(false);
 
 window.addEventListener("resize", () => {
   mobile.value = (document.body.clientWidth < document.body.clientHeight) && (document.body.clientWidth < 600);
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index 25b0716..e063618 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -46,7 +46,7 @@ onMounted(() => {
         </div>
         <div class="message" :class="{'user': message.role === 'user'}">
           <div class="grow" v-if="message.role === 'user'"></div>
-          <div class="avatar openai" v-else><openai /></div>
+          <div class="avatar openai" :class="{'gpt4': message.gpt4}" v-else><openai /></div>
           <div class="content">
             <span v-if="message.role === 'user'">{{ message.content }}</span>
             <md-preview v-model="message.content" theme="dark" v-else />
@@ -283,7 +283,7 @@ onMounted(() => {
   transition: .5s;
 }
 
-.avatar.openai svg {
+.avatar.openai.gpt4 svg {
   fill: #FFD700;
 }