diff --git a/api/chat.go b/api/chat.go
index 05b9066..dff0e9f 100644
--- a/api/chat.go
+++ b/api/chat.go
@@ -38,12 +38,12 @@ func ChatAPI(c *gin.Context) {
 		var form map[string]interface{}
 		if err := json.Unmarshal(message, &form); err == nil {
 			message := form["message"].(string)
-			StreamRequest("gpt-3.5-turbo-16k", []ChatGPTMessage{
+			StreamRequest("gpt-4", []ChatGPTMessage{
 				{
 					Role:    "user",
 					Content: message,
 				},
-			}, 250, func(resp string) {
+			}, 500, func(resp string) {
 				data, _ := json.Marshal(map[string]interface{}{
 					"message": resp,
 					"end":     false,
diff --git a/api/stream.go b/api/stream.go
index db5deb7..0cac44b 100644
--- a/api/stream.go
+++ b/api/stream.go
@@ -42,7 +42,7 @@ func StreamRequest(model string, messages []ChatGPTMessage, token int, callback
 	http.DefaultTransport.(*http.Transport).TLSClientConfig = &tls.Config{InsecureSkipVerify: true}
 
 	client := &http.Client{}
-	req, err := http.NewRequest("POST", viper.GetString("openai.anonymous_endpoint")+"/chat/completions", utils.ConvertBody(ChatGPTRequest{
+	req, err := http.NewRequest("POST", viper.GetString("openai.user_endpoint")+"/chat/completions", utils.ConvertBody(ChatGPTRequest{
 		Model:    model,
 		Messages: messages,
 		MaxToken: token,
@@ -53,7 +53,7 @@ func StreamRequest(model string, messages []ChatGPTMessage, token int, callback
 	}
 
 	req.Header.Set("Content-Type", "application/json")
-	req.Header.Set("Authorization", "Bearer "+viper.GetString("openai.anonymous"))
+	req.Header.Set("Authorization", "Bearer "+viper.GetString("openai.user"))
 
 	res, err := client.Do(req)
 	if err != nil {
@@ -62,7 +62,7 @@ func StreamRequest(model string, messages []ChatGPTMessage, token int, callback
 	defer res.Body.Close()
 
 	if res.ProtoMajor != 2 {
-		callback("OpenAI 异常: http/2 not supported")
+		callback("OpenAI 异常: http/2 stream not supported")
 		return
 	}
 
diff --git a/app/src/App.vue b/app/src/App.vue
index 7045cd1..1eb30a2 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,10 +1,26 @@
 <script setup lang="ts">
 import Login from "./components/icons/login.vue";
 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";
+
+const gpt4 = ref(false);
 
 function goto() {
   window.location.href = "https://deeptrain.net/login?app=chatnio";
 }
+
+function toggle(n: boolean) {
+  if (mobile.value) {
+    gpt4.value = !gpt4.value;
+  } else {
+    gpt4.value = n;
+  }
+
+  if (gpt4.value && !auth.value) return goto();
+}
 </script>
 
 <template>
@@ -14,6 +30,16 @@ function goto() {
         <img src="/favicon.ico" alt="">
         <span>Chat Nio</span>
       </div>
+      <div class="model-container">
+        <div class="model gpt3" :class="{'active': !gpt4}" @click="toggle(false)">
+          <light />
+          <span>GPT-3.5</span>
+        </div>
+        <div class="model gpt4" :class="{'active': gpt4}" @click="toggle(true)">
+          <star />
+          <span>GPT-4</span>
+        </div>
+      </div>
       <div class="grow" />
       <div class="user" v-if="auth">
         <img class="avatar" src="https://zmh-program.site/avatar/zmh-program.webp" alt="">
@@ -79,10 +105,11 @@ aside {
 
 .username {
   user-select: none;
-  font-size: 18px;
-  padding: 4px;
+  font-size: 16px;
+  padding: 5px 4px;
   margin: 0 4px;
   color: var(--card-text);
+  font-family: var(--fonts-code);
 }
 
 .grow {
@@ -110,6 +137,45 @@ aside {
   white-space: nowrap;
 }
 
+.model-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 4px auto;
+  padding: 6px 8px;
+  border-radius: 8px;
+  gap: 8px;
+  background: rgb(32, 33, 35);
+  width: max-content;
+}
+
+.model {
+  display: flex;
+  align-items: center;
+  width: 82px;
+  height: max-content;
+  padding: 6px 16px;
+  border-radius: 8px;
+  user-select: none;
+  cursor: pointer;
+  gap: 4px;
+  transition: .25s;
+}
+
+.model.active {
+  background: var(--card-button);
+}
+
+.model.gpt3 {
+  padding-left: 18px;
+  padding-right: 14px;
+}
+
+.model.gpt4 {
+  padding-left: 24px;
+  padding-right: 8px;
+}
+
 .login {
   display: flex;
   flex-direction: column;
@@ -156,14 +222,10 @@ aside {
   }
 }
 
-@media screen and (max-width: 340px) {
+@media screen and (max-width: 320px) {
   .username {
     display: none;
   }
-
-  .avatar {
-    margin-right: 16px;
-  }
 }
 
 @media screen and (max-width: 600px) {
@@ -173,6 +235,28 @@ aside {
     max-height: calc(100% - 24px);
   }
 
+  .model-container {
+    flex-direction: column;
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .model-container {
+    margin: auto 0;
+    height: max-content;
+  }
+
+  .model {
+    display: none;
+  }
+
+  .model.active {
+    display: flex;
+    background: none;
+  }
+
   .username {
     margin-right: 10px;
   }
@@ -190,10 +274,11 @@ aside {
   }
 
   aside {
-    width: 100%;
+    width: calc(100% - 32px);
+    padding: 16px 0;
     height: max-content;
     border-radius: 0;
-    flex-direction: row;
+    flex-direction: row-reverse;
   }
 
   .logo {
diff --git a/app/src/assets/script/shared.ts b/app/src/assets/script/shared.ts
new file mode 100644
index 0000000..f6ba9f7
--- /dev/null
+++ b/app/src/assets/script/shared.ts
@@ -0,0 +1,7 @@
+import {ref} from "vue";
+
+export const mobile = ref<boolean>((document.body.clientWidth < document.body.clientHeight) && (document.body.clientWidth < 600));
+
+window.addEventListener("resize", () => {
+  mobile.value = (document.body.clientWidth < document.body.clientHeight) && (document.body.clientWidth < 600);
+})
diff --git a/app/src/components/icons/light.vue b/app/src/components/icons/light.vue
new file mode 100644
index 0000000..ec9592d
--- /dev/null
+++ b/app/src/components/icons/light.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" stroke-width="2" fill="#19c37d">
+    <path d="M9.586 1.526A.6.6 0 0 0 8.553 1l-6.8 7.6a.6.6 0 0 0 .447 1h5.258l-1.044 4.874A.6.6 0 0 0 7.447 15l6.8-7.6a.6.6 0 0 0-.447-1H8.542l1.044-4.874Z"></path>
+  </svg>
+</template>
diff --git a/app/src/components/icons/star.vue b/app/src/components/icons/star.vue
new file mode 100644
index 0000000..afc3e7d
--- /dev/null
+++ b/app/src/components/icons/star.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#715fde" width="16" height="16" stroke-width="2">
+    <path d="M12.784 1.442a.8.8 0 0 0-1.569 0l-.191.953a.8.8 0 0 1-.628.628l-.953.19a.8.8 0 0 0 0 1.57l.953.19a.8.8 0 0 1 .628.629l.19.953a.8.8 0 0 0 1.57 0l.19-.953a.8.8 0 0 1 .629-.628l.953-.19a.8.8 0 0 0 0-1.57l-.953-.19a.8.8 0 0 1-.628-.629l-.19-.953h-.002ZM5.559 4.546a.8.8 0 0 0-1.519 0l-.546 1.64a.8.8 0 0 1-.507.507l-1.64.546a.8.8 0 0 0 0 1.519l1.64.547a.8.8 0 0 1 .507.505l.546 1.641a.8.8 0 0 0 1.519 0l.546-1.64a.8.8 0 0 1 .506-.507l1.641-.546a.8.8 0 0 0 0-1.519l-1.64-.546a.8.8 0 0 1-.507-.506L5.56 4.546Zm5.6 6.4a.8.8 0 0 0-1.519 0l-.147.44a.8.8 0 0 1-.505.507l-.441.146a.8.8 0 0 0 0 1.519l.44.146a.8.8 0 0 1 .507.506l.146.441a.8.8 0 0 0 1.519 0l.147-.44a.8.8 0 0 1 .506-.507l.44-.146a.8.8 0 0 0 0-1.519l-.44-.147a.8.8 0 0 1-.507-.505l-.146-.441Z"></path>
+  </svg>
+</template>
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index 93825ba..25b0716 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -283,6 +283,10 @@ onMounted(() => {
   transition: .5s;
 }
 
+.avatar.openai svg {
+  fill: #FFD700;
+}
+
 .avatar.openai:hover {
   border: 1px solid var(--card-border-hover);
 }