diff --git a/web/src/assets/svg/logout.svg b/web/src/assets/svg/logout.svg
new file mode 100644
index 0000000000000000000000000000000000000000..21dda4084751868bef11a5a771cce61ec1f1f8f5
--- /dev/null
+++ b/web/src/assets/svg/logout.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M16 17L21 12M21 12L16 7M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9"
+        stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/web/src/assets/svg/model-providers.svg b/web/src/assets/svg/model-providers.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7a885515be3752de609cf42d85be83ce1362de63
--- /dev/null
+++ b/web/src/assets/svg/model-providers.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M9.75 20.7496L11.223 21.5679C11.5066 21.7255 11.6484 21.8043 11.7986 21.8351C11.9315 21.8625 12.0685 21.8625 12.2015 21.8351C12.3516 21.8043 12.4934 21.7255 12.777 21.5679L14.25 20.7496M5.25 18.2496L3.82297 17.4568C3.52346 17.2904 3.37368 17.2072 3.26463 17.0889C3.16816 16.9842 3.09515 16.8601 3.05048 16.7249C3 16.5721 3 16.4008 3 16.0582V14.4996M3 9.4996V7.94104C3 7.5984 3 7.42708 3.05048 7.27428C3.09515 7.1391 3.16816 7.01502 3.26463 6.91033C3.37368 6.792 3.52345 6.70879 3.82297 6.54239L5.25 5.7496M9.75 3.2496L11.223 2.43128C11.5066 2.27372 11.6484 2.19494 11.7986 2.16406C11.9315 2.13672 12.0685 2.13672 12.2015 2.16406C12.3516 2.19494 12.4934 2.27372 12.777 2.43128L14.25 3.2496M18.75 5.7496L20.177 6.54239C20.4766 6.70879 20.6263 6.79199 20.7354 6.91033C20.8318 7.01502 20.9049 7.1391 20.9495 7.27428C21 7.42708 21 7.5984 21 7.94104V9.4996M21 14.4996V16.0582C21 16.4008 21 16.5721 20.9495 16.7249C20.9049 16.8601 20.8318 16.9842 20.7354 17.0889C20.6263 17.2072 20.4766 17.2904 20.177 17.4568L18.75 18.2496M9.75 10.7496L12 11.9996M12 11.9996L14.25 10.7496M12 11.9996V14.4996M3 6.9996L5.25 8.2496M18.75 8.2496L21 6.9996M12 19.4996V21.9996"
+        stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/web/src/assets/svg/password.svg b/web/src/assets/svg/password.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dacbb242d46d90f6926a9d058978652b1e62ad4c
--- /dev/null
+++ b/web/src/assets/svg/password.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M17 10V8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8V10M12 14.5V16.5M8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C17.7202 10 16.8802 10 15.2 10H8.8C7.11984 10 6.27976 10 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21Z"
+        stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/web/src/assets/svg/profile.svg b/web/src/assets/svg/profile.svg
new file mode 100644
index 0000000000000000000000000000000000000000..65069a050aef4de1e49e967ad42a1573597ffd82
--- /dev/null
+++ b/web/src/assets/svg/profile.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
+        stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/web/src/assets/svg/team.svg b/web/src/assets/svg/team.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36cc1d7441baf11bf0c96e283987fb2a46f45de0
--- /dev/null
+++ b/web/src/assets/svg/team.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z"
+        stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/web/src/hooks/llmHooks.ts b/web/src/hooks/llmHooks.ts
index 74363b21a57d113171d54ee9922b6583f744d097..c48974c1a2596e712fab3b88751251e14b4d4736 100644
--- a/web/src/hooks/llmHooks.ts
+++ b/web/src/hooks/llmHooks.ts
@@ -7,7 +7,10 @@ import {
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'umi';
 
-export const useFetchLlmList = (modelType?: LlmModelType) => {
+export const useFetchLlmList = (
+  isOnMountFetching: boolean = true,
+  modelType?: LlmModelType,
+) => {
   const dispatch = useDispatch();
 
   const fetchLlmList = useCallback(() => {
@@ -18,15 +21,25 @@ export const useFetchLlmList = (modelType?: LlmModelType) => {
   }, [dispatch, modelType]);
 
   useEffect(() => {
-    fetchLlmList();
-  }, [fetchLlmList]);
+    if (isOnMountFetching) {
+      fetchLlmList();
+    }
+  }, [fetchLlmList, isOnMountFetching]);
+
+  return fetchLlmList;
 };
 
-export const useSelectLlmOptions = () => {
+export const useSelectLlmInfo = () => {
   const llmInfo: IThirdOAIModelCollection = useSelector(
     (state: any) => state.settingModel.llmInfo,
   );
 
+  return llmInfo;
+};
+
+export const useSelectLlmOptions = () => {
+  const llmInfo: IThirdOAIModelCollection = useSelectLlmInfo();
+
   const embeddingModelOptions = useMemo(() => {
     return Object.entries(llmInfo).map(([key, value]) => {
       return {
@@ -43,6 +56,38 @@ export const useSelectLlmOptions = () => {
   return embeddingModelOptions;
 };
 
+export const useSelectLlmOptionsByModelType = () => {
+  const llmInfo: IThirdOAIModelCollection = useSelectLlmInfo();
+
+  const groupOptionsByModelType = (modelType: LlmModelType) => {
+    return Object.entries(llmInfo)
+      .filter(([, value]) =>
+        modelType ? value.some((x) => x.model_type === modelType) : true,
+      )
+      .map(([key, value]) => {
+        return {
+          label: key,
+          options: value
+            .filter((x) => (modelType ? x.model_type === modelType : true))
+            .map((x) => ({
+              label: x.llm_name,
+              value: x.llm_name,
+              disabled: !x.available,
+            })),
+        };
+      });
+  };
+
+  return {
+    [LlmModelType.Chat]: groupOptionsByModelType(LlmModelType.Chat),
+    [LlmModelType.Embedding]: groupOptionsByModelType(LlmModelType.Embedding),
+    [LlmModelType.Image2text]: groupOptionsByModelType(LlmModelType.Image2text),
+    [LlmModelType.Speech2text]: groupOptionsByModelType(
+      LlmModelType.Speech2text,
+    ),
+  };
+};
+
 export const useSelectLlmFactoryList = () => {
   const factoryList: IFactory[] = useSelector(
     (state: any) => state.settingModel.factoryList,
diff --git a/web/src/hooks/userSettingHook.ts b/web/src/hooks/userSettingHook.ts
index 7425dfd8b153f80078d4d2a429f04e184b00c010..c6d5065a7592b3c37bf7b0a23be8b65fa2890346 100644
--- a/web/src/hooks/userSettingHook.ts
+++ b/web/src/hooks/userSettingHook.ts
@@ -1,7 +1,8 @@
 import { ITenantInfo } from '@/interfaces/database/knowledge';
 import { IUserInfo } from '@/interfaces/database/userSetting';
+import authorizationUtil from '@/utils/authorizationUtil';
 import { useCallback, useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'umi';
+import { history, useDispatch, useSelector } from 'umi';
 
 export const useFetchUserInfo = () => {
   const dispatch = useDispatch();
@@ -68,8 +69,12 @@ export const useSelectParserList = (): Array<{
 export const useLogout = () => {
   const dispatch = useDispatch(); // TODO: clear redux state
 
-  const logout = useCallback((): number => {
-    return dispatch<any>({ type: 'loginModel/logout' });
+  const logout = useCallback(async () => {
+    const retcode = await dispatch<any>({ type: 'loginModel/logout' });
+    if (retcode === 0) {
+      authorizationUtil.removeAll();
+      history.push('/login');
+    }
   }, [dispatch]);
 
   return logout;
diff --git a/web/src/icons/moonshot.svg b/web/src/icons/moonshot.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f8e458bfb9baa8bbcd048e20dde90b4dfa4d8ac3
--- /dev/null
+++ b/web/src/icons/moonshot.svg
@@ -0,0 +1,31 @@
+<svg t="1710744709437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1280"
+    width="200" height="200">
+    <path d="M0.143417 0h1011.952942v1011.952941h-1011.952942v-1011.952941z" fill="#1A1D22" p-id="1281"></path>
+    <path
+        d="M554.308123 289.129412a1898.375529 1898.375529 0 0 0-289.129412-96.376471c175.911153-130.710588 352.617412-126.686871 530.070589 12.047059 46.116141 34.044988 78.2336 78.2336 96.37647 132.517647l-60.235294 24.094118a1077.320282 1077.320282 0 0 0-277.082353-72.282353z"
+        fill="#EDEDEE" p-id="1282"></path>
+    <path
+        d="M265.178711 216.847059c86.690635 52.814306 183.067106 76.908424 289.129412 72.282353 14.215529 15.709365 30.286306 31.756047 48.188236 48.188235-27.467294 22.287059-27.467294 42.381553 0 60.235294l337.317647 84.329412v96.376471a2918.207247 2918.207247 0 0 0-409.6-96.376471c-122.398118-52.043294-250.916141-92.184094-385.505883-120.470588-18.432-86.738824 21.7088-134.927059 120.470588-144.564706z"
+        fill="#EFEFF0" p-id="1283"></path>
+    <path
+        d="M265.178711 192.752941a1898.375529 1898.375529 0 0 1 289.129412 96.376471c-106.062306 4.626071-202.438776-19.468047-289.129412-72.282353v-24.094118z"
+        fill="#626568" p-id="1284"></path>
+    <path
+        d="M144.708123 385.505882a2590.021271 2590.021271 0 0 0 313.22353 96.376471c29.226165 5.951247 45.296941 22.022024 48.188235 48.188235 2.891294 26.166212 18.962071 42.236988 48.188235 48.188236a6047.623529 6047.623529 0 0 1 361.411765 108.423529c-17.492329 33.659482-45.586071 53.729882-84.329412 60.235294a2021.7856 2021.7856 0 0 1-301.17647-72.282353 3182.302871 3182.302871 0 0 0-457.788236-120.470588v-72.282353c-9.926776-59.584753 14.167341-91.702212 72.282353-96.376471z"
+        fill="#EEEEEF" p-id="1285"></path>
+    <path
+        d="M144.708123 361.411765c134.589741 28.286494 263.107765 68.427294 385.505883 120.470588 4.144188 23.901365-3.903247 39.948047-24.094118 48.188235-2.891294-26.166212-18.962071-42.236988-48.188235-48.188235a2590.021271 2590.021271 0 0 1-313.22353-96.376471v-24.094117z"
+        fill="#5C5E62" p-id="1286"></path>
+    <path
+        d="M72.42577 481.882353v72.282353a3182.302871 3182.302871 0 0 1 457.788236 120.470588c-16.070776 0-24.094118 8.023341-24.094118 24.094118a6126.772706 6126.772706 0 0 1-397.552941-120.470588 118.832188 118.832188 0 0 0-12.047059 72.282352c-49.007435-51.922824-57.030776-108.1344-24.094118-168.658823z"
+        fill="#4F5155" p-id="1287"></path>
+    <path
+        d="M506.119888 698.729412v72.282353c94.930824 9.637647 183.283953 37.755482 265.035294 84.329411-44.092235 66.499765-100.303812 78.546824-168.658823 36.141177a4261.285647 4261.285647 0 0 0-433.694118-120.470588c-42.164706-27.949176-66.258824-68.089976-72.282353-120.470589a118.832188 118.832188 0 0 1 12.047059-72.282352 6126.772706 6126.772706 0 0 0 397.552941 120.470588z"
+        fill="#F2F2F3" p-id="1288"></path>
+    <path
+        d="M168.802241 771.011765a4261.285647 4261.285647 0 0 1 433.694118 120.470588v24.094118a2109.391812 2109.391812 0 0 1-397.552942-120.470589c-9.613553 5.493459-13.613176 13.540894-12.047058 24.094118-20.190871-8.240188-28.238306-24.286871-24.094118-48.188235z"
+        fill="#5D5F62" p-id="1289"></path>
+    <path
+        d="M602.496359 915.576471c10.553224-1.566118 18.600659 2.433506 24.094117 12.047058-169.285271 59.994353-313.825882 23.853176-433.694117-108.423529-1.566118-10.553224 2.433506-18.600659 12.047058-24.094118a2109.391812 2109.391812 0 0 0 397.552942 120.470589z"
+        fill="#E7E7E8" p-id="1290"></path>
+</svg>
\ No newline at end of file
diff --git a/web/src/icons/openai.svg b/web/src/icons/openai.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6114c7c7ed622591f75c811cf7a7f671ecfa8651
--- /dev/null
+++ b/web/src/icons/openai.svg
@@ -0,0 +1,6 @@
+<svg t="1710744531966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1220"
+    id="mx_n_1710744531966" width="200" height="200">
+    <path
+        d="M950.676002 419.057175a255.346807 255.346807 0 0 0-22.014863-209.48251 257.949339 257.949339 0 0 0-277.74565-123.72694A258.759964 258.759964 0 0 0 212.538139 178.386943a255.346807 255.346807 0 0 0-170.572521 123.726941 257.949339 257.949339 0 0 0 31.699696 302.789689 255.133485 255.133485 0 0 0 21.758876 209.525175 258.162662 258.162662 0 0 0 277.958972 123.726941A255.346807 255.346807 0 0 0 565.757223 1023.996587a258.375984 258.375984 0 0 0 246.259276-179.446729 255.560129 255.560129 0 0 0 170.529856-123.726941 258.375984 258.375984 0 0 0-31.870353-301.765742zM565.757223 957.013381a190.966133 190.966133 0 0 1-122.702994-44.371041l6.015689-3.455821 203.893466-117.668587a33.918248 33.918248 0 0 0 16.724469-29.054499v-287.430483l86.182214 49.832092a3.029177 3.029177 0 0 1 1.621249 2.218552v238.195693a192.160738 192.160738 0 0 1-191.734093 191.734094zM153.618516 780.979809a190.710147 190.710147 0 0 1-22.825487-128.590689l6.058354 3.626479 204.064123 117.711252a32.8943 32.8943 0 0 0 33.278281 0l249.288453-143.736574v99.493526a3.413157 3.413157 0 0 1-1.407927 2.645197L415.578315 851.205514a191.990081 191.990081 0 0 1-261.959799-70.225705zM99.861294 336.928085a191.350114 191.350114 0 0 1 100.944118-84.176984V494.957254a32.680978 32.680978 0 0 0 16.553811 28.841176l248.093849 143.139272-86.182214 49.832092a3.242499 3.242499 0 0 1-3.029177 0l-206.069353-118.863193A192.160738 192.160738 0 0 1 99.861294 335.904138z m708.102081 164.471503l-248.861809-144.504534L645.070458 307.23362a3.242499 3.242499 0 0 1 3.029177 0l206.069353 119.076514a191.734094 191.734094 0 0 1-28.841177 345.795467v-242.248817a33.704925 33.704925 0 0 0-17.364436-28.457196z m85.75557-128.97467l-6.01569-3.626479-203.680143-118.692534a33.107623 33.107623 0 0 0-33.491603 0L401.456378 393.842478V294.306288a2.815855 2.815855 0 0 1 1.194605-2.602533l206.069353-118.905856a191.990081 191.990081 0 0 1 284.998609 198.816394z m-539.278804 176.417552l-86.182214-49.661434a3.413157 3.413157 0 0 1-1.62125-2.431875V259.236099a191.990081 191.990081 0 0 1 314.65041-147.320388l-6.058354 3.413157-203.850801 117.668587a33.918248 33.918248 0 0 0-16.767134 29.054499z m46.802915-100.901454l111.012931-63.996693 111.226253 63.996693v127.950723l-110.799609 63.996693-111.226253-63.996693z"
+        p-id="1221"></path>
+</svg>
\ No newline at end of file
diff --git a/web/src/icons/tongyi.svg b/web/src/icons/tongyi.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d7104d6d3703a114f86b47fb05b89ad77e642f2b
--- /dev/null
+++ b/web/src/icons/tongyi.svg
@@ -0,0 +1,7 @@
+<svg t="1710744759487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1559"
+    width="200" height="200">
+    <path
+        d="M918.60992 591.872l-104.67328-183.1936 44.8512-85.99552a23.92064 23.92064 0 0 0 5.24288-29.9008L806.44096 188.8256a24.6784 24.6784 0 0 0-20.1728-11.22304H572.416l-47.86176-83.74272a22.44608 22.44608 0 0 0-17.2032-11.96032h-112.88576a23.92064 23.92064 0 0 0-20.19328 11.96032v4.5056l-106.9056 183.17312H164.88448a23.94112 23.94112 0 0 0-20.93056 11.22304l-59.06432 104.6528a26.9312 26.9312 0 0 0 0 23.9616l106.16832 184.66816-47.84128 83.7632a26.9312 26.9312 0 0 0 0 23.90016l54.5792 95.72352a24.6784 24.6784 0 0 0 20.93056 11.96032h213.85216l51.58912 89.7024a24.6784 24.6784 0 0 0 18.69824 11.9808h121.11872a23.92064 23.92064 0 0 0 20.19328-11.96032l105.43104-184.68864h94.208a26.19392 26.19392 0 0 0 20.19328-12.6976l54.5792-96.4608a23.18336 23.18336 0 0 0 0-25.43616z m-132.34176 11.96032l-54.5792-100.9664-224.31744 395.55072-61.31712-100.92544H221.73696l53.84192-97.95584h114.40128L165.66272 305.50016h117.39136l111.4112-198.90176 56.07424 97.95584-57.56928 100.92544h448.6144L784.7936 405.7088l112.90624 198.12352h-111.4112z"
+        fill="#605BEC" p-id="1560"></path>
+    <path d="M502.12864 641.9456l139.83744-224.29696H361.55392l140.57472 224.29696z" fill="#605BEC" p-id="1561"></path>
+</svg>
\ No newline at end of file
diff --git a/web/src/icons/wenxin.svg b/web/src/icons/wenxin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2c673b6a8dedf3168e10e91ca007d01a541bdd47
--- /dev/null
+++ b/web/src/icons/wenxin.svg
@@ -0,0 +1,11 @@
+<svg t="1710744739564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1423"
+    width="200" height="200">
+    <path
+        d="M96.20121136 636.3124965c-0.1472897-113.41305959-0.29457937-226.8261192-0.29457937-340.23917879 0-14.87625845 7.65906378-26.51214381 20.4732666-34.02391789 45.51251353-26.65943349 91.02502705-53.31886698 136.83211997-79.53643141 71.1409192-40.94653321 142.42912809-81.59848704 213.71733698-122.39773055 7.36448439-4.12411126 14.58167909-8.3955122 21.50429441-13.2560719 19.44223878-13.40336159 39.03176725-16.05457598 60.09419263-3.53495252 27.39588193 16.34915535 54.93905355 32.25644163 82.48222516 48.16372793 88.0792333 50.96223197 176.30575629 101.77717426 264.38498958 152.59211653 9.86840908 5.74429781 19.88410785 11.19401627 29.60522725 17.0856038 14.13981003 8.54280189 21.50429441 21.06242535 21.50429443 37.70616007 0 147.73155685 0.29457937 295.46311371-0.1472897 443.19467057 0 15.46541722-7.2171947 28.57419943-21.7988738 36.96971163-34.7603663 20.17868721-70.55176044 38.88447758-104.57567833 59.94690293-48.90017634 30.19438599-100.00969801 56.11737105-148.76258466 86.60633642-29.01606849 18.11663161-59.50503387 34.02391789-89.11026112 50.96223197-13.10878221 7.51177407-26.07027474 15.17083783-39.03176726 22.9771913-13.84523065 8.3955122-27.83775099 8.83738127-41.97756102 0.73644843-56.41195043-32.55102101-112.82390085-65.10204201-169.38314098-97.653063-61.86166887-35.64410444-123.72333775-71.1409192-185.4377169-106.78502365-11.19401627-6.48074626-22.24074286-12.81420285-32.99289009-19.88410785-11.48859565-7.65906378-17.08560379-19.14765941-17.08560378-32.69831069-0.1472897-34.7603663 0.1472897-69.52073264 0.29457938-104.28109895 1.62018657-0.58915875 1.62018657-1.62018657-0.29457938-2.65121438z m356.58833414-225.500512c2.20934532-1.76747625 4.41869063-3.68224221 6.77532565-5.15513907 68.93157389-39.62092601 137.86314777-79.24185204 206.94201135-118.86277807 2.79850407-1.62018657 6.48074626-1.62018657 6.62803594-6.18616688 0.1472897-4.8605597-4.12411126-4.71327001-6.77532564-6.18616688-40.65195383-23.56635005-81.59848704-46.83812071-122.10315117-70.84633984-16.79102442-10.01569877-32.84560039-8.54280189-48.45830728 0.58915876-45.9543826 26.51214381-91.46689612 53.61344636-137.27398903 80.42016953-31.96186226 18.70579035-64.21830387 37.11700133-96.32745581 55.67550198-18.41121097 10.60485751-27.54317163 25.33382629-27.24859225 47.72185885 0.88373813 89.55213018 0.58915875 179.10426036 0.14728969 268.65639053-0.1472897 20.17868721 9.27925033 33.58204881 25.33382629 43.15587853 31.3727035 18.70579035 63.18727606 37.11700133 95.14913832 54.93905355 10.89943689 6.03887719 21.06242535 13.99252034 35.79139414 18.41121096V505.51925374c6.48074626 19.58952848 18.55850066 34.02391789 36.67513226 44.6287754 27.83775099 16.20186565 63.18727606 12.51962347 86.31175705-10.45756784 26.95401286-26.65943349 28.72148912-62.89269668 12.81420282-90.14128893-16.34915535-28.42690974-43.59774757-37.55887038-74.38129233-38.73718787z m82.48222517 429.64401928c14.28709972-3.82953187 25.92298506-13.99252034 38.88447758-21.35700473 40.94653321-23.27177067 81.30390766-47.72185885 122.54502023-70.55176046 26.95401286-15.02354815 52.87699792-31.66728287 80.71474891-45.21793415 16.79102442-8.10093283 29.60522723-22.53532223 29.60522726-43.4504579 0.1472897-92.939793 0.29457937-185.73229631 0.14728969-278.6720893 0-11.19401627-5.15513907-13.99252034-13.84523067-7.06990501-26.51214381 20.76784598-57.29568854 34.46578693-86.16446735 51.25681135-54.49718448 31.81457257-109.14165865 63.33456576-163.78613282 95.00184862-8.54280189 4.8605597-11.78317502 10.45756784-11.63588535 20.47326662 0.29457937 96.18016613 0.1472897 192.50762194 0.1472897 288.68778806-0.29457937 3.5349525-1.47289687 7.65906378 3.38766282 10.8994369z"
+        fill="#066AF3" p-id="1424"></path>
+    <path d="M96.20121136 636.3124965c1.91476594 1.03102783 1.91476594 2.06205563 0 3.09308345v-3.09308345z"
+        fill="#4372E0" p-id="1425"></path>
+    <path
+        d="M391.3697457 505.37196405c-5.44971845-44.33419602 13.84523065-74.08671296 61.4197998-94.55997955 30.93083443 1.17831749 58.03213699 10.31027814 74.38129233 38.5898982 15.75999659 27.39588193 14.13981003 63.48185543-12.81420282 90.14128893-23.27177067 22.97719129-58.47400606 26.65943349-86.31175705 10.45756783-18.11663161-10.60485751-30.34167568-25.03924691-36.67513226-44.62877541z"
+        fill="#002A9A" p-id="1426"></path>
+</svg>
\ No newline at end of file
diff --git a/web/src/icons/zhipu.svg b/web/src/icons/zhipu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5561830e6190b9ac00c9317b0a1b9a42073f7e8e
--- /dev/null
+++ b/web/src/icons/zhipu.svg
@@ -0,0 +1,12 @@
+<svg t="1710744775085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1694"
+    width="48" height="48">
+    <path
+        d="M609.62816 392.4992a68.28032 68.28032 0 1 0 0-136.58112 68.28032 68.28032 0 0 0 0 136.58112zM774.71744 392.92928a39.3216 39.3216 0 1 0 0-78.6432 39.3216 39.3216 0 0 0 0 78.6432zM774.71744 707.56352a39.3216 39.3216 0 1 0 0-78.66368 39.3216 39.3216 0 0 0 0 78.6432zM503.31648 239.94368a39.3216 39.3216 0 1 0 0-78.66368 39.3216 39.3216 0 0 0 0 78.6432zM232.7552 392.92928a39.3216 39.3216 0 1 0 0-78.6432 39.3216 39.3216 0 0 0 0 78.6432zM232.7552 711.02464a39.3216 39.3216 0 1 0 0-78.6432 39.3216 39.3216 0 0 0 0 78.6432zM897.90464 542.47424a28.52864 28.52864 0 1 0 0-57.05728 28.52864 28.52864 0 0 0 0 57.05728zM702.976 202.3424a28.52864 28.52864 0 1 0 0-57.05728 28.52864 28.52864 0 0 0 0 57.0368zM881.4592 306.4832a12.53376 12.53376 0 1 0 0-25.06752 12.53376 12.53376 0 0 0 0 25.06752zM881.4592 744.73472a12.53376 12.53376 0 1 0 0-25.06752 12.53376 12.53376 0 0 0 0 25.06752zM509.78816 962.9696a12.53376 12.53376 0 1 0 0-25.04704 12.53376 12.53376 0 0 0 0 25.06752zM123.41248 744.73472a12.53376 12.53376 0 1 0 0-25.06752 12.53376 12.53376 0 0 0 0 25.06752zM123.41248 304.3328a12.53376 12.53376 0 1 0 0-25.06752 12.53376 12.53376 0 0 0 0 25.06752zM498.9952 86.50752a12.53376 12.53376 0 1 0 0-25.06752 12.53376 12.53376 0 0 0 0 25.06752zM303.2064 202.3424a28.52864 28.52864 0 1 0 0-57.05728 28.52864 28.52864 0 0 0 0 57.0368zM110.44864 542.47424a28.52864 28.52864 0 1 0 0-57.05728 28.52864 28.52864 0 0 0 0 57.05728zM309.248 880.4352a28.52864 28.52864 0 1 0 0-57.0368 28.52864 28.52864 0 0 0 0 57.05728zM702.976 884.3264a28.52864 28.52864 0 1 0 0-57.0368 28.52864 28.52864 0 0 0 0 57.0368zM503.31648 866.6112a39.3216 39.3216 0 1 0 0-78.6432 39.3216 39.3216 0 0 0 0 78.6432zM719.40096 575.32416a64.83968 64.83968 0 1 0 0-129.65888 64.83968 64.83968 0 0 0 0 129.6384zM503.31648 606.43328a92.48768 92.48768 0 1 0 0-184.97536 92.48768 92.48768 0 0 0 0 184.97536zM287.6416 575.32416a64.83968 64.83968 0 1 0 0-129.65888 64.83968 64.83968 0 0 0 0 129.6384zM394.40384 389.03808a64.83968 64.83968 0 1 0 0-129.65888 64.83968 64.83968 0 0 0 0 129.65888zM394.40384 765.48096a64.8192 64.8192 0 1 0 0-129.65888 64.8192 64.8192 0 0 0 0 129.6384zM609.62816 768.94208a64.83968 64.83968 0 1 0 0-129.65888 64.83968 64.83968 0 0 0 0 129.6384z"
+        fill="#1679FF" p-id="1695"></path>
+    <path
+        d="M393.95328 389.05856s43.2128-12.53376 33.28 71.74144c-9.9328 84.2752 91.19744 25.06752 91.19744 25.06752l-14.68416-63.52896s-59.65824 10.36288-58.368-57.91744c23.77728-92.91776-51.4048 24.63744-51.4048 24.63744zM429.83424 565.37088s9.9328 55.76704-35.88096 73.05216c-89.88672 37.1712 7.7824 102.85056 7.7824 102.85056l43.2128-76.92288a64.83968 64.83968 0 0 1 43.2128-60.49792c104.18176-32.84992-58.32704-38.48192-58.32704-38.48192z"
+        fill="#1679FF" p-id="1696"></path>
+    <path
+        d="M545.66912 705.41312c0.08192 7.04512 1.24928 14.04928 3.44064 20.74624a53.57568 53.57568 0 0 0-34.57024-23.7568h-26.78784a58.7776 58.7776 0 0 0-35.88096 25.47712c4.38272-8.54016 6.59456-18.04288 6.49216-27.648a58.32704 58.32704 0 0 0-4.32128-22.91712 56.2176 56.2176 0 0 0 38.03136 22.03648h25.92768a61.78816 61.78816 0 0 0 33.28-21.17632 61.37856 61.37856 0 0 0-5.61152 27.2384z"
+        fill="#1679FF" p-id="1697"></path>
+</svg>
\ No newline at end of file
diff --git a/web/src/layouts/components/user/index.tsx b/web/src/layouts/components/user/index.tsx
index 20ae8b339a02884fd724bcea52b248db1bc62b7a..e226c0000bda6a4cd2a29b27b759d80b7f84129f 100644
--- a/web/src/layouts/components/user/index.tsx
+++ b/web/src/layouts/components/user/index.tsx
@@ -1,59 +1,29 @@
-import {
-  useFetchUserInfo,
-  useLogout,
-  useSelectUserInfo,
-} from '@/hooks/userSettingHook';
-import authorizationUtil from '@/utils/authorizationUtil';
-import type { MenuProps } from 'antd';
-import { Avatar, Button, Dropdown } from 'antd';
-import React, { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useFetchUserInfo, useSelectUserInfo } from '@/hooks/userSettingHook';
+import { Avatar } from 'antd';
+import React from 'react';
 import { history } from 'umi';
 
+import styles from '../../index.less';
+
 const App: React.FC = () => {
-  const { t } = useTranslation();
   const userInfo = useSelectUserInfo();
-  const logout = useLogout();
-
-  const handleLogout = useCallback(async () => {
-    const retcode = await logout();
-    if (retcode === 0) {
-      authorizationUtil.removeAll();
-      history.push('/login');
-    }
-  }, [logout]);
 
   const toSetting = () => {
     history.push('/user-setting');
   };
 
-  const items: MenuProps['items'] = useMemo(() => {
-    return [
-      {
-        key: '1',
-        onClick: handleLogout,
-        label: <Button type="text">{t('header.logout')}</Button>,
-      },
-      {
-        key: '2',
-        onClick: toSetting,
-        label: <Button type="text">{t('header.setting')}</Button>,
-      },
-    ];
-  }, [t, handleLogout]);
-
   useFetchUserInfo();
 
   return (
-    <Dropdown menu={{ items }} placement="bottomLeft" arrow>
-      <Avatar
-        size={32}
-        src={
-          userInfo.avatar ??
-          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
-        }
-      />
-    </Dropdown>
+    <Avatar
+      size={32}
+      onClick={toSetting}
+      className={styles.clickAvailable}
+      src={
+        userInfo.avatar ??
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+      }
+    />
   );
 };
 
diff --git a/web/src/layouts/index.less b/web/src/layouts/index.less
index d52ab516a86bb31593b7be10270a51c9cb08f583..60d35219bb279c26816423c077d75d78f5856f43 100644
--- a/web/src/layouts/index.less
+++ b/web/src/layouts/index.less
@@ -21,3 +21,7 @@ body {
 .divider {
   margin: 0;
 }
+
+.clickAvailable {
+  cursor: pointer;
+}
diff --git a/web/src/pages/setting/model.ts b/web/src/pages/setting/model.ts
index 3157f896b3a44950763e8a4aa6b06e5930ec5ce5..7599f5df39c300373ab643d1eb174057feda47e0 100644
--- a/web/src/pages/setting/model.ts
+++ b/web/src/pages/setting/model.ts
@@ -11,9 +11,6 @@ import { Nullable } from 'typings';
 import { DvaModel } from 'umi';
 
 export interface SettingModelState {
-  isShowPSwModal: boolean;
-  isShowTntModal: boolean;
-  isShowSSModal: boolean;
   llm_factory: string;
   tenantIfo: Nullable<ITenantInfo>;
   llmInfo: IThirdAiModelCollection;
@@ -25,9 +22,6 @@ export interface SettingModelState {
 const model: DvaModel<SettingModelState> = {
   namespace: 'settingModel',
   state: {
-    isShowPSwModal: false,
-    isShowTntModal: false,
-    isShowSSModal: false,
     llm_factory: '',
     tenantIfo: null,
     llmInfo: {},
@@ -55,12 +49,6 @@ const model: DvaModel<SettingModelState> = {
       const { retcode } = data;
       if (retcode === 0) {
         message.success('Modified!');
-        yield put({
-          type: 'updateState',
-          payload: {
-            isShowPSwModal: false,
-          },
-        });
         yield put({
           type: 'getUserInfo',
         });
@@ -101,15 +89,8 @@ const model: DvaModel<SettingModelState> = {
     *set_tenant_info({ payload = {} }, { call, put }) {
       const { data } = yield call(userService.set_tenant_info, payload);
       const { retcode } = data;
-      // llm_id 对应chat_id
-      // asr_id 对应speech2txt
       if (retcode === 0) {
-        yield put({
-          type: 'updateState',
-          payload: {
-            isShowSSModal: false,
-          },
-        });
+        message.success('Modified!');
         yield put({
           type: 'getTenantInfo',
         });
diff --git a/web/src/pages/user-setting/constants.tsx b/web/src/pages/user-setting/constants.tsx
index 5c9790afa4f06f72d0f79a4033470c813af3c4f3..73df9c7c5615b9567309652680bb0339819ef63a 100644
--- a/web/src/pages/user-setting/constants.tsx
+++ b/web/src/pages/user-setting/constants.tsx
@@ -1,16 +1,16 @@
+import { ReactComponent as LogoutIcon } from '@/assets/svg/logout.svg';
+import { ReactComponent as ModelIcon } from '@/assets/svg/model-providers.svg';
+import { ReactComponent as PasswordIcon } from '@/assets/svg/password.svg';
+import { ReactComponent as ProfileIcon } from '@/assets/svg/profile.svg';
+import { ReactComponent as TeamIcon } from '@/assets/svg/team.svg';
 import { UserSettingRouteKey } from '@/constants/setting';
-import {
-  ContainerOutlined,
-  DesktopOutlined,
-  PieChartOutlined,
-} from '@ant-design/icons';
 
 export const UserSettingIconMap = {
-  [UserSettingRouteKey.Profile]: <PieChartOutlined />,
-  [UserSettingRouteKey.Password]: <DesktopOutlined />,
-  [UserSettingRouteKey.Model]: <ContainerOutlined />,
-  [UserSettingRouteKey.Team]: <ContainerOutlined />,
-  [UserSettingRouteKey.Logout]: <ContainerOutlined />,
+  [UserSettingRouteKey.Profile]: <ProfileIcon />,
+  [UserSettingRouteKey.Password]: <PasswordIcon />,
+  [UserSettingRouteKey.Model]: <ModelIcon />,
+  [UserSettingRouteKey.Team]: <TeamIcon />,
+  [UserSettingRouteKey.Logout]: <LogoutIcon />,
 };
 
 export * from '@/constants/setting';
diff --git a/web/src/pages/user-setting/setting-model/hooks.ts b/web/src/pages/user-setting/setting-model/hooks.ts
index b0e70f2907acb55072b088125854d185648ddd3e..0049cc6ec6e089d12fba72872795af118f1424ef 100644
--- a/web/src/pages/user-setting/setting-model/hooks.ts
+++ b/web/src/pages/user-setting/setting-model/hooks.ts
@@ -5,13 +5,14 @@ import {
   useFetchLlmList,
   useSaveApiKey,
   useSaveTenantInfo,
+  useSelectLlmOptionsByModelType,
 } from '@/hooks/llmHooks';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import {
   useFetchTenantInfo,
   useSelectTenantInfo,
 } from '@/hooks/userSettingHook';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 type SavingParamsState = Omit<IApiKeySavingParams, 'api_key'>;
 
@@ -97,10 +98,18 @@ export const useSubmitSystemModelSetting = () => {
   };
 };
 
-export const useFetchSystemModelSettingOnMount = () => {
+export const useFetchSystemModelSettingOnMount = (visible: boolean) => {
   const systemSetting = useSelectTenantInfo();
-  useFetchLlmList();
-  useFetchTenantInfo();
+  const allOptions = useSelectLlmOptionsByModelType();
+  const fetchLlmList = useFetchLlmList();
+  const fetchTenantInfo = useFetchTenantInfo();
 
-  return systemSetting;
+  useEffect(() => {
+    if (visible) {
+      fetchLlmList();
+      fetchTenantInfo();
+    }
+  }, [fetchLlmList, fetchTenantInfo, visible]);
+
+  return { systemSetting, allOptions };
 };
diff --git a/web/src/pages/user-setting/setting-model/index.tsx b/web/src/pages/user-setting/setting-model/index.tsx
index 8ce57d9eda4881a5c6cc11e01771b829bb89b5e6..57cf93e81cee043238bb80685ef8fa0eecd51787 100644
--- a/web/src/pages/user-setting/setting-model/index.tsx
+++ b/web/src/pages/user-setting/setting-model/index.tsx
@@ -5,12 +5,19 @@ import {
   useFetchLlmFactoryListOnMount,
   useFetchMyLlmListOnMount,
 } from '@/hooks/llmHooks';
-import { SettingOutlined } from '@ant-design/icons';
+import { ReactComponent as MoonshotIcon } from '@/icons/moonshot.svg';
+import { ReactComponent as OpenAiIcon } from '@/icons/openai.svg';
+import { ReactComponent as TongYiIcon } from '@/icons/tongyi.svg';
+import { ReactComponent as WenXinIcon } from '@/icons/wenxin.svg';
+import { ReactComponent as ZhiPuIcon } from '@/icons/zhipu.svg';
+import { SettingOutlined, UserOutlined } from '@ant-design/icons';
 import {
   Avatar,
   Button,
   Card,
   Col,
+  Collapse,
+  CollapseProps,
   Divider,
   Flex,
   List,
@@ -26,6 +33,23 @@ import SystemModelSettingModal from './system-model-setting-modal';
 
 import styles from './index.less';
 
+const IconMap = {
+  通义千问: TongYiIcon,
+  Moonshot: MoonshotIcon,
+  OpenAI: OpenAiIcon,
+  智谱AI: ZhiPuIcon,
+  文心一言: WenXinIcon,
+};
+
+const LlmIcon = ({ name }: { name: string }) => {
+  const Icon = IconMap[name as keyof typeof IconMap];
+  return Icon ? (
+    <Icon width={48} height={48}></Icon>
+  ) : (
+    <Avatar shape="square" size="large" icon={<UserOutlined />} />
+  );
+};
+
 const { Text } = Typography;
 interface IModelCardProps {
   item: LlmItem;
@@ -49,7 +73,7 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
         <Row align={'middle'}>
           <Col span={12}>
             <Flex gap={'middle'} align="center">
-              <Avatar shape="square" size="large" src={item.logo} />
+              <LlmIcon name={item.name} />
               <Flex vertical gap={'small'}>
                 <b>{item.name}</b>
                 <Text>{item.tags}</Text>
@@ -114,16 +138,11 @@ const UserSettingModel = () => {
     handleApiKeyClick(llmFactory);
   };
 
-  return (
-    <>
-      <section className={styles.modelWrapper}>
-        <SettingTitle
-          title="Model Setting"
-          description="Manage your account settings and preferences here."
-          showRightButton
-          clickButton={showSystemSettingModal}
-        ></SettingTitle>
-        <Divider></Divider>
+  const items: CollapseProps['items'] = [
+    {
+      key: '1',
+      label: 'Added models',
+      children: (
         <List
           grid={{ gutter: 16, column: 1 }}
           dataSource={llmList}
@@ -131,10 +150,15 @@ const UserSettingModel = () => {
             <ModelCard item={item} clickApiKey={handleApiKeyClick}></ModelCard>
           )}
         />
-        <p>Models to be added</p>
+      ),
+    },
+    {
+      key: '2',
+      label: 'Models to be added',
+      children: (
         <List
           grid={{
-            gutter: 16,
+            gutter: 24,
             xs: 1,
             sm: 2,
             md: 3,
@@ -147,7 +171,7 @@ const UserSettingModel = () => {
             <List.Item>
               <Card className={styles.toBeAddedCard}>
                 <Flex vertical gap={'large'}>
-                  <Avatar shape="square" size="large" src={item.logo} />
+                  <LlmIcon name={item.name} />
                   <Flex vertical gap={'middle'}>
                     <b>{item.name}</b>
                     <Text>{item.tags}</Text>
@@ -161,6 +185,21 @@ const UserSettingModel = () => {
             </List.Item>
           )}
         />
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <section className={styles.modelWrapper}>
+        <SettingTitle
+          title="Model Setting"
+          description="Manage your account settings and preferences here."
+          showRightButton
+          clickButton={showSystemSettingModal}
+        ></SettingTitle>
+        <Divider></Divider>
+        <Collapse defaultActiveKey={['1']} ghost items={items} />
       </section>
       <ApiKeyModal
         visible={apiKeyVisible}
diff --git a/web/src/pages/user-setting/setting-model/system-model-setting-modal/index.tsx b/web/src/pages/user-setting/setting-model/system-model-setting-modal/index.tsx
index 1edd60479da9da84bb5023c4396e4f2b1f9fa338..8bfa216553706860f1d6a1bcabe7cb5df138fab1 100644
--- a/web/src/pages/user-setting/setting-model/system-model-setting-modal/index.tsx
+++ b/web/src/pages/user-setting/setting-model/system-model-setting-modal/index.tsx
@@ -1,4 +1,5 @@
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import { LlmModelType } from '@/constants/knowledge';
 import { ISystemModelSettingSavingParams } from '@/hooks/llmHooks';
 import { Form, Modal, Select } from 'antd';
 import { useEffect } from 'react';
@@ -18,7 +19,8 @@ const SystemModelSettingModal = ({
   loading,
 }: IProps) => {
   const [form] = Form.useForm();
-  const initialValues = useFetchSystemModelSettingOnMount();
+  const { systemSetting: initialValues, allOptions } =
+    useFetchSystemModelSettingOnMount(visible);
 
   const handleOk = async () => {
     const values = await form.validateFields();
@@ -33,7 +35,7 @@ const SystemModelSettingModal = ({
 
   return (
     <Modal
-      title="Basic Modal"
+      title="System Model Settings"
       open={visible}
       onOk={handleOk}
       onCancel={hideModal}
@@ -41,17 +43,17 @@ const SystemModelSettingModal = ({
       confirmLoading={loading}
     >
       <Form form={form} onValuesChange={onFormLayoutChange} layout={'vertical'}>
-        <Form.Item label="sequence2txt model" name="asr_id">
-          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        <Form.Item label="Sequence2txt model" name="asr_id">
+          <Select options={allOptions[LlmModelType.Speech2text]} />
         </Form.Item>
         <Form.Item label="Embedding model" name="embd_id">
-          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+          <Select options={allOptions[LlmModelType.Embedding]} />
         </Form.Item>
-        <Form.Item label="img2txt_id model" name="img2txt_id">
-          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        <Form.Item label="Img2txt model" name="img2txt_id">
+          <Select options={allOptions[LlmModelType.Image2text]} />
         </Form.Item>
         <Form.Item label="Chat model" name="llm_id">
-          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+          <Select options={allOptions[LlmModelType.Chat]} />
         </Form.Item>
       </Form>
     </Modal>
diff --git a/web/src/pages/user-setting/setting-team/index.less b/web/src/pages/user-setting/setting-team/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..bca9dc2e4b2365704011cdcb947bbdfe7877aa5a
--- /dev/null
+++ b/web/src/pages/user-setting/setting-team/index.less
@@ -0,0 +1,6 @@
+.teamWrapper {
+  width: 100%;
+  .teamCard {
+    // width: 100%;
+  }
+}
diff --git a/web/src/pages/user-setting/setting-team/index.tsx b/web/src/pages/user-setting/setting-team/index.tsx
index b4f16f9c7f280c7d1efd90e6c56f05df8f8f9023..48dab39e991eccb179fb785469b646dbb2b18161 100644
--- a/web/src/pages/user-setting/setting-team/index.tsx
+++ b/web/src/pages/user-setting/setting-team/index.tsx
@@ -1,5 +1,21 @@
+import { Button, Card, Flex } from 'antd';
+
+import { useSelectUserInfo } from '@/hooks/userSettingHook';
+import styles from './index.less';
+
 const UserSettingTeam = () => {
-  return <div>UserSettingTeam</div>;
+  const userInfo = useSelectUserInfo();
+
+  return (
+    <div className={styles.teamWrapper}>
+      <Card className={styles.teamCard}>
+        <Flex align="center" justify={'space-between'}>
+          <span>{userInfo.nickname} Workspace</span>
+          <Button type="primary">Upgrade</Button>
+        </Flex>
+      </Card>
+    </div>
+  );
 };
 
 export default UserSettingTeam;
diff --git a/web/src/pages/user-setting/sidebar/index.tsx b/web/src/pages/user-setting/sidebar/index.tsx
index 2abd82a52af8ecb24e0a2a09a1736aab848bd10d..097ab5f6465b590de52165074deeb0be69e8a68e 100644
--- a/web/src/pages/user-setting/sidebar/index.tsx
+++ b/web/src/pages/user-setting/sidebar/index.tsx
@@ -10,6 +10,7 @@ import {
   UserSettingRouteMap,
 } from '../constants';
 
+import { useLogout } from '@/hooks/userSettingHook';
 import styles from './index.less';
 
 type MenuItem = Required<MenuProps>['items'][number];
@@ -37,9 +38,14 @@ const items: MenuItem[] = Object.values(UserSettingRouteKey).map((value) =>
 const SideBar = () => {
   const navigate = useNavigate();
   const pathName = useSecondPathName();
+  const logout = useLogout();
 
   const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
-    navigate(`/${UserSettingBaseKey}/${key}`);
+    if (key === UserSettingRouteKey.Logout) {
+      logout();
+    } else {
+      navigate(`/${UserSettingBaseKey}/${key}`);
+    }
   };
 
   const selectedKeys = useMemo(() => {