diff --git a/src/apis/index.ts b/src/apis/index.ts
index 530a741cfaa0e2f40bd4f0340fb64d15a2512767..32242d5598cd7a2e44d10954b6f04ba8405bc3d9 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -15,6 +15,8 @@ import {
   knowledgeApi,
   appApi,
   apiApi,
+  modelApi,
+  mcpApi,
 } from './paths';
 import { workFlowApi } from './workFlow';
 import { appCenterApi } from './appCenter';
@@ -29,4 +31,6 @@ export const api = {
   ...workFlowApi,
   ...appApi,
   ...apiApi,
+  ...modelApi,
+  ...mcpApi,
 };
diff --git a/src/apis/paths/apikey.ts b/src/apis/paths/apikey.ts
index 6ffdb0c64c85f936f7de85111d709fd2dde562a4..0e7498ccfd113f45c52df839702b308c54ab3516 100644
--- a/src/apis/paths/apikey.ts
+++ b/src/apis/paths/apikey.ts
@@ -19,7 +19,7 @@ export const getApiKey = (): Promise<
     any,
     (
       | FcResponse<{
-          api_key: string;
+          api_key_exists: string;
         }>
       | undefined
     ),
@@ -32,11 +32,10 @@ export const getApiKey = (): Promise<
  * USER登录
  * @returns
  */
-export const changeApiKey = (params: {
-  action: string;
-  query?: string;
-}): Promise<[any, FcResponse<object> | undefined]> => {
-  return post('/api/auth/key', params, params);
+export const changeApiKey = (params: { action: string; query?: string }) => {
+  return post<{
+    api_key: string;
+  }>('/api/auth/key', params, params);
 };
 
 export const apiKeyApi = {
diff --git a/src/apis/paths/model.ts b/src/apis/paths/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35f61f7fba683f62f93d76a1f32c950667e19f29
--- /dev/null
+++ b/src/apis/paths/model.ts
@@ -0,0 +1,92 @@
+import { get, post, del } from '../server';
+
+enum Provider {
+  OLLAMA = 'Ollama',
+  VLLM = 'VLLM',
+  QWEN = 'Tongyi-Qianwen',
+  XUNFEI = 'XunFei Spark',
+  BAICHUAN = 'BaiChuan',
+  BAIDU = 'BaiduYiyan',
+  MODELSCOPE = 'ModelScope',
+}
+
+/**
+ * 获取用户的模型列表
+ * @returns
+ */
+const getUserModelList = () => {
+  return get<{
+    models: {
+      modelId: string;
+      icon: string;
+      description: string;
+      name: string;
+      model: string;
+      url: string;
+      provider: string;
+      maxTokens: number;
+      apiKey: string;
+    }[];
+    totalModels: number;
+  }>('/api/model');
+};
+
+/**
+ * 获取模型提供商列表
+ * @returns
+ */
+const getModelProviderList = () => {
+  return get<{
+    providers: {
+      providerId: string;
+      icon: string;
+      url: string;
+      description: string;
+      name: string;
+    }[];
+    totalProviders: number;
+  }>('/api/model/provider');
+};
+
+const getAllModels = (searchKey: string) => {
+  return get<{
+    models: { modelId: string; modelName: string }[];
+  }>('/api/model/all', {
+    searchKey,
+  });
+};
+
+/**
+ * 添加模型
+ * @param params
+ * @returns
+ */
+const createModel = (params: {
+  modelId?: string;
+  name: string;
+  provider: string;
+  icon?: string;
+  apiKey: string;
+  maxTokens: string;
+  model: string;
+  url: string;
+}) => {
+  return post('/api/model', params);
+};
+
+/**
+ * 删除模型
+ * @param modelId
+ * @returns
+ */
+const deleteModel = (modelId: string) => {
+  return del(`/api/model/${modelId}`);
+};
+
+export const modelApi = {
+  getUserModelList,
+  getModelProviderList,
+  createModel,
+  getAllModels,
+  deleteModel,
+};
diff --git a/src/router/index.ts b/src/router/index.ts
index 5c5fb4a833b4559ccd2456f736660c7f3ad28924..59be4cbdf11f68df9c390cd14d2cde15bf0a1460 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -49,6 +49,11 @@ const staticRoutes: Array<RouteRecordRaw> = [
         component: (): Promise<typeof import('src/views/tools/index.vue')> =>
           import('src/views/tools/index.vue'),
       },
+      {
+        path: '/settings',
+        name: 'settings',
+        component: () => import('src/views/settings/index.vue'),
+      },
     ],
   },
   {
diff --git a/src/views/dialogue/components/DialogueSession.vue b/src/views/dialogue/components/DialogueSession.vue
index 205810db515f6a861c4a0d7b151a878cac045ce5..99acf1dfdeccc0818d6d80cd44ed5bc6724ad10e 100644
--- a/src/views/dialogue/components/DialogueSession.vue
+++ b/src/views/dialogue/components/DialogueSession.vue
@@ -987,7 +987,7 @@ button[disabled]:hover {
     top: 0;
     left: 0;
     opacity: 0.4;
-    background-image: linear-gradient(180deg, #e7f0fd 1%, #accbee 100%);
+    // background-image: linear-gradient(180deg, #e7f0fd 1%, #accbee 100%);
     z-index: -1;
   }
 
diff --git a/src/views/dialogue/dialogueView.vue b/src/views/dialogue/dialogueView.vue
index f7d65ca6411b3d5aa7f3c8f3c0ce4ba2a1344300..86a4137a35406ccb5703a552450c19ffda88b0c4 100644
--- a/src/views/dialogue/dialogueView.vue
+++ b/src/views/dialogue/dialogueView.vue
@@ -13,15 +13,17 @@ import { ElMessage } from 'element-plus';
 import { watch } from 'vue';
 import i18n from 'src/i18n';
 import { reactive } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import CopilotIcon from '@/assets/svgs/routerCopilot.svg';
 import CopilotIconSelected from '@/assets/svgs/routerCopilotSelected.svg';
-import ApiIcon from '@/assets/svgs/routerApi.svg';
-import ApiIconSelected from '@/assets/svgs/routerApiSelected.svg';
+import PluginCenter from '@/assets/svgs/plugin_center.svg';
+import PluginCenterSelected from '@/assets/svgs/plugin_center_active.svg';
 import AppIcon from '@/assets/svgs/routerApp.svg';
 import AppIconSelected from '@/assets/svgs/routerAppSelected.svg';
 import WitChainDIcon from '@/assets/svgs/witChainD.svg';
 import WitChainDIconSelected from '@/assets/svgs/witChainDSelected.svg';
+import Setting from '@/assets/svgs/setting.svg';
+import SettingSelected from '@/assets/svgs/setting_active.svg';
 import tools from '../tools/index.vue';
 import TitleBar from './components/TitleBar.vue';
 
@@ -42,6 +44,7 @@ const revoke = ref(true);
 const isSubmitDisabled = ref(true);
 const ruleFormRef = ref<any>();
 const router = useRouter();
+const route = useRoute();
 const type = import.meta.env.VITE_USER_TYPE;
 let routerList: ComputedRef<
   Array<{
@@ -63,10 +66,10 @@ let routerList: ComputedRef<
       anotherName: 'copilot',
     },
     {
-      name: i18n.global.t('menu.semantic_center'),
+      name: i18n.global.t('menu.plugin_center'),
       path: '/api',
-      src: ApiIcon,
-      selectedSrc: ApiIconSelected,
+      src: PluginCenter,
+      selectedSrc: PluginCenterSelected,
       routerName: 'api',
     },
     {
@@ -166,8 +169,13 @@ const changeLanguagefun = (lang: 'CN' | 'EN') => {
   // 同步语言到iframe
   const iframe = document.querySelector<HTMLIFrameElement>('#my-iframe');
   if (iframe?.contentWindow) {
-    const data = { lang: localStorage.getItem('localeLang') ?? 'CN' ,type: 'changeLanguage'};
-    let target = window.location.origin.includes('localhost')?'http://localhost:3002/witchaind/' : `${window.location.origin}/witchaind/`;
+    const data = {
+      lang: localStorage.getItem('localeLang') ?? 'CN',
+      type: 'changeLanguage',
+    };
+    let target = window.location.origin.includes('localhost')
+      ? 'http://localhost:3002/witchaind/'
+      : `${window.location.origin}/witchaind/`;
     iframe.contentWindow.postMessage(data, target);
   }
 };
@@ -177,10 +185,10 @@ const handleFormValidate = (prop: any, isValid: boolean, message: string) => {
 };
 onMounted(() => {
   if (localStorage.getItem('theme')) {
-    document.body.setAttribute(
-      'theme',
-      localStorage.getItem('theme') || 'light',
-    );
+    // document.body.setAttribute(
+    //   'theme',
+    //   localStorage.getItem('theme') || 'light',
+    // );
   }
   if (localStorage.getItem('kb_id')) {
     ruleForm.kb_id = localStorage.getItem('kb_id');
@@ -256,37 +264,54 @@ watch(
     <TitleBar />
     <div class="dialogue-container">
       <div class="dialogue-menu">
-        <router-link
-          v-for="item in routerList"
-          :key="item.path"
-          :to="item.path"
-          class="menu-item"
-        >
+        <div>
+          <router-link
+            v-for="item in routerList"
+            :key="item.path"
+            :to="item.path"
+            class="menu-item"
+          >
+            <span class="menu-icon">
+              <el-icon
+                class="menu-icon"
+                @click="addNewSession(item.routerName)"
+              >
+                <img
+                  v-if="
+                    router.currentRoute.value.name
+                      ?.toString()
+                      .indexOf(item.routerName) !== -1 ||
+                    router.currentRoute.value.name
+                      ?.toString()
+                      .indexOf(item.anotherName!) !== -1
+                  "
+                  class="create-button__icon"
+                  :src="item.selectedSrc"
+                />
+                <img v-else class="create-button__icon" :src="item.src" />
+              </el-icon>
+            </span>
+            <span class="menu-text">{{ item.name }}</span>
+          </router-link>
+        </div>
+
+        <router-link to="/settings" class="menu-item">
           <span class="menu-icon">
-            <el-icon class="menu-icon" @click="addNewSession(item.routerName)">
+            <el-icon class="menu-icon">
               <img
-                v-if="
-                  router.currentRoute.value.name
-                    ?.toString()
-                    .indexOf(item.routerName) !== -1 ||
-                  router.currentRoute.value.name
-                    ?.toString()
-                    .indexOf(item.anotherName!) !== -1
-                "
                 class="create-button__icon"
-                :src="item.selectedSrc"
+                :src="route.path === '/settings' ? SettingSelected : Setting"
               />
-              <img v-else class="create-button__icon" :src="item.src" />
             </el-icon>
           </span>
-          <span class="menu-text">{{ item.name }}</span>
+          <span class="menu-text">{{ i18n.global.t('menu.settings') }}</span>
         </router-link>
       </div>
       <div class="dialogue-content">
         <KeepAlive v-show="router.currentRoute.value.name === 'witchainD'">
           <tools />
         </KeepAlive>
-          <RouterView v-show="router.currentRoute.value.name !== 'witchainD'"/>
+        <RouterView v-show="router.currentRoute.value.name !== 'witchainD'" />
       </div>
     </div>
     <el-dialog
@@ -394,62 +419,6 @@ watch(
 </template>
 
 <style lang="scss">
-.dialogue-container {
-  display: flex;
-  height: calc(100% - 48px);
-}
-//hover active selected 样式待填充
-.dialogue-menu {
-  position: relative;
-  z-index: 1;
-  width: 64px;
-  height: 100%;
-  padding-top: 8px;
-  background-color: var(--o-bg-color-base);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .menu-item {
-    display: flex;
-    font-style: none;
-    text-decoration: none;
-    width: 64px;
-    height: 64px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 10px;
-    cursor: pointer;
-    .menu-icon {
-      align-items: center;
-      img {
-        //hover颜色待改进
-        width: 40px;
-        &:hover {
-          filter: invert(43%) sepia(94%) saturate(1622%) hue-rotate(190deg)
-            brightness(101%) contrast(101%);
-        }
-        &:active {
-          filter: invert(43%) sepia(94%) saturate(1622%) hue-rotate(190deg)
-            brightness(101%) contrast(101%);
-        }
-      }
-    }
-    .menu-text {
-      font-style: none;
-      display: block;
-      font-size: 12px;
-      color: var(--o-text-color-primary);
-      text-align: center;
-      padding: 0 1px;
-    }
-  }
-}
-.dialogue-content {
-  width: 100%;
-  height: 100%;
-  flex: 1;
-}
 .model-dialog {
   padding: 0 !important;
   .el-dialog__title {
@@ -528,7 +497,6 @@ watch(
 
 .apikey {
   &_view {
-    // height: 400px;
     &_alert {
       margin-bottom: 8px;
     }
@@ -639,5 +607,57 @@ watch(
   overflow: hidden;
   background-image: var(--o-bg-image);
   background-size: cover;
+
+  .dialogue-container {
+    display: flex;
+    height: calc(100% - 48px);
+
+    .dialogue-menu {
+      position: relative;
+      z-index: 1;
+      width: 64px;
+      height: 100%;
+      padding-top: 8px;
+      background-color: var(--o-bg-color-base);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      .menu-item {
+        display: flex;
+        font-style: none;
+        text-decoration: none;
+        width: 64px;
+        height: 64px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 10px;
+        cursor: pointer;
+        .menu-icon {
+          align-items: center;
+          img {
+            width: 40px;
+          }
+        }
+        .menu-text {
+          font-style: none;
+          display: block;
+          font-size: 12px;
+          color: var(--o-text-color-primary);
+          text-align: center;
+          padding: 0 1px;
+        }
+      }
+    }
+
+    .dialogue-content {
+      width: 100%;
+      height: 100%;
+      flex: 1;
+      background-image: var(--o-bg-image);
+      background-size: cover;
+    }
+  }
 }
 </style>
diff --git a/src/views/settings/ApiKey.vue b/src/views/settings/ApiKey.vue
new file mode 100644
index 0000000000000000000000000000000000000000..496d3f194df520d90e2e0080de822034a5877312
--- /dev/null
+++ b/src/views/settings/ApiKey.vue
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import { CSSProperties, onMounted, ref } from 'vue';
+import { ElEmpty, ElMessage } from 'element-plus';
+import { View, Hide, CopyDocument } from '@element-plus/icons-vue';
+import i18n from '@/i18n';
+import DarkNull from '@/assets/svgs/dark_null.svg';
+import { api } from '@/apis';
+import { writeText } from '@/utils';
+
+const { t } = i18n.global;
+
+interface ApiKey {
+  name: string;
+  description?: string;
+  createTime?: string;
+}
+
+const pageLoading = ref(true);
+
+const apiKeys = ref<ApiKey[]>([]);
+async function queryApiKeys() {
+  const [, res] = await api.getApiKey();
+  if (res) {
+    apiKeys.value.push({
+      name: res.result.api_key_exists || '',
+      description: '',
+      createTime: '',
+    });
+    pageLoading.value = false;
+  }
+}
+
+const createdApiKey = ref('');
+async function createApiKey() {
+  const [_, res] = await api.changeApiKey({ action: 'create' });
+  if (res) {
+    createdApiKey.value = res.result.api_key;
+  }
+}
+
+function onConfirmClick(action: 'copy' | 'create') {
+  if (action === 'copy') {
+    writeText(createdApiKey.value);
+    ElMessage.success('复制成功');
+    isCreateKeyDialogVisible.value = false;
+  } else {
+    createApiKey();
+  }
+}
+
+const isCreateKeyDialogVisible = ref(false);
+const apiKeyDescription = ref('');
+function onCreateNewKey() {
+  isCreateKeyDialogVisible.value = true;
+}
+
+onMounted(() => {
+  queryApiKeys();
+});
+</script>
+<template>
+  <div class="api-key" v-loading="pageLoading">
+    <div v-if="apiKeys.length">
+      <el-button type="primary" @click="onCreateNewKey">
+        {{ t('settings.new_api_key') }}
+      </el-button>
+      <el-table
+        style="margin-top: 16px"
+        :header-cell-style="
+          {
+            backgroundColor: 'rgb(244,246,250)',
+            boxShadow: '0 -1 0 0 rgb(223,229,239)',
+            height: '32px',
+            fontSize: '14px',
+          } as CSSProperties
+        "
+        :data="apiKeys"
+      >
+        <el-table-column align="left" prop="name">
+          <template #header>
+            <div class="name-col">
+              <el-icon size="14"><View /></el-icon>
+              <!-- <el-icon><Hide /></el-icon> -->
+              {{ t('settings.secret_key') }}
+            </div>
+          </template>
+          <template #default="scope">
+            <div class="name-col-content">
+              <el-icon size="14"><View /></el-icon>
+              ************************************
+              <el-icon size="14"><CopyDocument /></el-icon>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="description"
+          :label="t('settings.secret_key_desc')"
+        />
+        <el-table-column prop="createTime" :label="t('common.createTime')" />
+        <el-table-column :label="t('common.operate')">
+          <template #default>
+            <el-button text>{{ t('common.edit') }}</el-button>
+            <el-button text>{{ t('common.delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <ElEmpty
+      v-else
+      style="height: 100%"
+      :image="DarkNull"
+      description="暂无可用的API_Key"
+    >
+      <el-button type="primary" @click="onCreateNewKey">
+        {{ t('settings.new_api_key') }}
+      </el-button>
+    </ElEmpty>
+  </div>
+
+  <el-dialog
+    v-model="isCreateKeyDialogVisible"
+    :title="t('settings.new_api_key')"
+    width="544"
+    class="api-key-dialog"
+  >
+    <div v-if="!createdApiKey">
+      <el-form label-position="left" label-width="auto">
+        <el-form-item :label="t('settings.secret_key_desc')" prop="URL">
+          <el-input
+            type="textarea"
+            maxlength="200"
+            show-word-limit
+            :rows="6"
+            placeholder="请输入密钥描述"
+            v-model="apiKeyDescription"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="api-key-value" v-else>
+      <el-alert
+        v-if="createdApiKey"
+        type="info"
+        :show-icon="true"
+        :closable="false"
+      >
+        {{ i18n.global.t('apikey.save_apikey') }}
+      </el-alert>
+
+      <div class="value">{{ createdApiKey }}</div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button
+          type="primary"
+          class="button"
+          @click="onConfirmClick(createdApiKey ? 'copy' : 'create')"
+        >
+          {{ createdApiKey ? '复制' : t('common.confirm') }}
+        </el-button>
+        <el-button class="button" @click="isCreateKeyDialogVisible = false">
+          {{ i18n.global.t('apikey.cancel') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.api-key {
+  height: 100%;
+}
+.dialog-footer {
+  .button {
+    width: 64px;
+    height: 24px;
+    border-radius: 4px;
+  }
+}
+
+.name-col {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.name-col-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+</style>
+
+<style>
+.api-key-dialog > .el-dialog__body {
+  padding: 24px 24px 0px 24px;
+  .el-textarea {
+    --o-textarea-border-radius: 4px;
+  }
+}
+.api-key-value {
+  display: flex;
+  flex-direction: column;
+  font-size: 26px;
+  align-items: center;
+  .value {
+    margin: 40px;
+  }
+}
+</style>
diff --git a/src/views/settings/Model.vue b/src/views/settings/Model.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9e63951d617f47add7726e146a2cf6b1019c6785
--- /dev/null
+++ b/src/views/settings/Model.vue
@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+import ModelCard from './components/ModelCard.vue';
+import lightNull from '@/assets/svgs/light_null.svg';
+import DarkNull from '@/assets/svgs/dark_null.svg';
+import { ElEmpty, ElMessage } from 'element-plus';
+import AddModel, { ModelProvider } from './components/AddModel.vue';
+import i18n from '@/i18n';
+import { api } from '@/apis';
+
+interface Model {
+  modelId: string;
+  icon: string;
+  description: string;
+  name: string;
+}
+
+const { t } = i18n.global;
+
+const models = ref<Model[]>([]);
+
+const modelProviders = ref<ModelProvider[]>([]);
+
+const isAddModelVisible = ref(false);
+
+async function onModelDel(modelId: string) {
+  const [err, _] = await api.deleteModel(modelId);
+  if (err) ElMessage.error(err.message);
+  else ElMessage.success('Success');
+}
+const dialogTitle = ref();
+
+const toBeEditedModel = ref<Model>();
+function onModelEdit(model: Model) {
+  dialogTitle.value = t(`common.edit`, { name: t('settings.model') });
+  toBeEditedModel.value = model;
+  isAddModelVisible.value = true;
+}
+
+function onAddModel(provider: ModelProvider) {
+  dialogTitle.value = t(`common.add`, { name: t('settings.model') });
+  selectedProvider.value = provider;
+  isAddModelVisible.value = true;
+}
+
+async function queryModels() {
+  const [, res] = await api.getUserModelList();
+  if (res) {
+    models.value = res.result.models;
+  }
+}
+
+async function queryModelProviders() {
+  const [, res] = await api.getModelProviderList();
+  if (res) {
+    modelProviders.value = res.result.providers;
+  }
+}
+
+const selectedProvider = ref<ModelProvider>();
+
+watch(
+  () => [isAddModelVisible.value],
+  () => {
+    if (!isAddModelVisible.value) {
+      selectedProvider.value = undefined;
+      toBeEditedModel.value = undefined;
+    }
+  },
+);
+
+onMounted(() => {
+  queryModels();
+  queryModelProviders();
+});
+</script>
+<template>
+  <div class="model">
+    <p class="model-label">{{ t('settings.added_model') }}</p>
+    <div class="added-model" v-if="models.length">
+      <ModelCard
+        v-for="item in models"
+        :name="item.name"
+        :icon="item.icon"
+        size="small"
+      >
+        <template #headerRight>
+          <div class="added-model__operate">
+            <a @click="onModelEdit(item)">{{ t('common.edit') }}</a>
+            <a @click="onModelDel(item.modelId)">{{ t('common.delete') }}</a>
+          </div>
+        </template>
+      </ModelCard>
+    </div>
+    <ElEmpty v-else :image="lightNull" :description="t('common.null')" />
+
+    <p class="model-label">{{ t('settings.model_provider') }}</p>
+    <div class="model-provider" v-if="modelProviders.length">
+      <ModelCard
+        v-for="item in modelProviders"
+        :name="item.name"
+        :icon="item.icon"
+        :description="item.description"
+      >
+        <template #cardFooter>
+          <div class="model-provider-footer">
+            <a @click="onAddModel(item)">{{ t('common.add') }}</a>
+          </div>
+        </template>
+      </ModelCard>
+    </div>
+    <ElEmpty v-else :image="lightNull" :description="t('common.null')" />
+  </div>
+
+  <AddModel
+    v-model:visible="isAddModelVisible"
+    type="add"
+    :title="dialogTitle"
+    :default="toBeEditedModel"
+    :provider="selectedProvider"
+  />
+</template>
+<style lang="scss" scoped>
+.model {
+  &-label {
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+
+  .added-model {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    min-height: 210px;
+
+    &__operate {
+      display: flex;
+      gap: 8px;
+      color: rgb(99, 149, 253);
+      font-size: 12px;
+      line-height: 16px;
+      a {
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+  }
+
+  .model-provider {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+
+    &-footer {
+      display: flex;
+      justify-content: flex-end;
+      color: rgb(99, 149, 253);
+      font-size: 12px;
+      line-height: 16px;
+      a {
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/settings/components/AddModel.vue b/src/views/settings/components/AddModel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..45eb882ba6c249ac20f505f040a659e34dd22015
--- /dev/null
+++ b/src/views/settings/components/AddModel.vue
@@ -0,0 +1,224 @@
+<script lang="ts" setup>
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { computed, nextTick, provide, reactive, ref, watch } from 'vue';
+import i18n from '@/i18n';
+import { api } from '@/apis';
+
+import type {
+  FormInstance,
+  FormItemProps,
+  FormProps,
+  FormRules,
+} from 'element-plus';
+
+const { t } = i18n.global;
+
+interface From {
+  modelId?: string;
+  url: string;
+  model: string;
+  apiKey: string;
+  maxTokens: string;
+}
+
+export interface ModelProvider {
+  providerId: string;
+  icon: string;
+  url: string;
+  description: string;
+  name: string;
+}
+
+const props = defineProps<{
+  visible: boolean;
+  type: 'add' | 'edit';
+  title?: string;
+  provider?: ModelProvider;
+  default?: Partial<From>;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:visible', status: boolean): void;
+}>();
+
+const form = ref<From>({
+  url: '',
+  model: '',
+  apiKey: '',
+  maxTokens: '',
+});
+
+const formRef = ref<FormInstance>();
+const rules = computed<FormRules<typeof form>>(() => ({
+  model: [
+    {
+      required: true,
+      message: t('settings.placeHolder.model_name'),
+      trigger: 'blur',
+    },
+  ],
+  apiKey: [
+    {
+      required: true,
+      message: t('settings.placeHolder.api_key'),
+      trigger: 'blur',
+    },
+  ],
+  maxTokens: [
+    {
+      required: true,
+      message: t('settings.placeHolder.max_token'),
+      trigger: 'blur',
+    },
+  ],
+}));
+
+const modelSelectLoading = ref(false);
+const modelOptions = ref<{ value: string; label: string }[]>([]);
+
+const remoteMethod = (query: string) => {
+  if (query) {
+    modelSelectLoading.value = true;
+    setTimeout(() => {
+      modelSelectLoading.value = false;
+      api.getAllModels(query).then(([, res]) => {
+        if (res) {
+          modelOptions.value = res.result.models.map((item) => ({
+            value: item.modelId,
+            label: item.modelName,
+          }));
+        }
+      });
+    }, 200);
+  } else {
+    modelOptions.value = [];
+  }
+};
+
+async function onConfirm(formEl: FormInstance | undefined) {
+  if (!formEl) return;
+  await formEl.validate(async (valid) => {
+    if (!valid) return;
+    const [err, _] = await api.createModel({
+      ...form.value,
+      provider: props.provider?.name || '',
+      name: '',
+    });
+    if (err) {
+      ElMessage.error(err.message);
+      return;
+    }
+    ElMessage.success('Success');
+    emits('update:visible', false);
+  });
+}
+
+watch(
+  () => [props.default, props.provider],
+  () => {
+    nextTick(() => {
+      formRef.value && formRef.value.resetFields();
+
+      if (props.default) {
+        form.value = { ...form.value, ...props.default };
+        console.log(form.value);
+      }
+      if (props.provider) {
+        form.value.url = props.provider.url;
+      }
+    });
+  },
+);
+</script>
+<template>
+  <div class="add-model-dialog">
+    <el-dialog
+      :model-value="visible"
+      :title="title"
+      @close="emits('update:visible', false)"
+      destroy-on-close
+    >
+      <el-form
+        ref="formRef"
+        label-position="left"
+        label-width="auto"
+        :model="form"
+        :rules="rules"
+      >
+        <el-form-item :label="t('settings.placeHolder.url')" prop="url">
+          <el-input
+            v-model="form.url"
+            :placeholder="t('settings.placeHolder.url')"
+          />
+        </el-form-item>
+        <el-form-item :label="t('settings.select_model')" prop="model">
+          <el-select
+            style="width: 100%"
+            v-model="form.model"
+            filterable
+            remote
+            reserve-keyword
+            :placeholder="t('settings.placeHolder.model_name')"
+            remote-show-suffix
+            :remote-method="remoteMethod"
+            :loading="modelSelectLoading"
+          >
+            <el-option
+              v-for="item in modelOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="API_Key" prop="apiKey">
+          <el-input
+            v-model="form.apiKey"
+            :placeholder="t('settings.placeHolder.api_key')"
+          />
+        </el-form-item>
+        <el-form-item label="Max-token" prop="maxTokens">
+          <el-input
+            v-model="form.maxTokens"
+            :placeholder="t('settings.placeHolder.max_token')"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" class="button" @click="onConfirm(formRef)">
+            {{ t('common.confirm') }}
+          </el-button>
+          <el-button class="button" @click="emits('update:visible', false)">
+            {{ t('common.cancel') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+.dialog-footer {
+  .button {
+    width: 64px;
+    height: 24px;
+    border-radius: 4px;
+  }
+}
+.add-model-dialog {
+  :deep(.el-dialog) {
+    --o-dialog-width: 544px;
+  }
+}
+</style>
+<style>
+.add-model-dialog > .el-dialog__body {
+  padding: 24px 24px 0px 24px;
+  .el-input > .el-input__wrapper {
+    --o-input-border-radius: 4px;
+  }
+  .el-select > .el-select__wrapper {
+    --o-select-border-radius: 4px;
+  }
+}
+</style>
diff --git a/src/views/settings/components/ModelCard.vue b/src/views/settings/components/ModelCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b91a4a994cde27f26f29f91542a96d4132c7d338
--- /dev/null
+++ b/src/views/settings/components/ModelCard.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { computed, CSSProperties } from 'vue';
+
+interface ModelCard {
+  name: string;
+  icon: string;
+  /**
+   * small | medium | large
+   * @default medium
+   * @type string
+   * @description small: 64px, medium: 144px, large: 256px
+   */
+  size?: 'small' | 'medium' | 'large';
+  description?: string;
+}
+
+const props = withDefaults(defineProps<ModelCard>(), {
+  size: 'medium',
+});
+
+const cardStyles = computed<CSSProperties>(() => {
+  return {
+    height:
+      props.size === 'small'
+        ? '64px'
+        : props.size === 'medium'
+          ? '144px'
+          : '256px',
+  };
+});
+</script>
+<template>
+  <div class="model-card" :style="cardStyles">
+    <div class="card-header">
+      <div class="card-header__title">
+        <div class="icon">
+          <img :src="icon" alt="" />
+        </div>
+        <span class="name">{{ name }}</span>
+      </div>
+      <div>
+        <slot name="headerRight"></slot>
+      </div>
+    </div>
+
+    <div class="card-description">
+      {{ description }}
+    </div>
+
+    <div class="card-footer">
+      <slot name="cardFooter"></slot>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.model-card {
+  width: 100%;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: rgb(244, 246, 250);
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &__title {
+      display: flex;
+      align-items: center;
+      .icon {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img {
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-self: center;
+        }
+      }
+      .name {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 700;
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .card-description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    line-height: 22px;
+    font-size: 14px;
+    color: rgb(78, 88, 101);
+    margin-top: 5px;
+  }
+
+  .card-footer {
+    margin-top: 16px;
+  }
+}
+</style>
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b4d51073e8dabf0283cd62df7fe14beef4b0c5ec
--- /dev/null
+++ b/src/views/settings/index.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import Model from './Model.vue';
+import ApiKey from './ApiKey.vue';
+import type { TabsPaneContext } from 'element-plus';
+
+const activeName = ref('model');
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+</script>
+<template>
+  <div class="settings">
+    <div class="settings-container">
+      <p class="settings-label">{{ $t('settings.setting') }}</p>
+      <el-tabs
+        v-model="activeName"
+        class="settings-tabs"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane
+          :label="$t('settings.model_setting')"
+          name="model"
+          :lazy="true"
+        >
+          <Model />
+        </el-tab-pane>
+        <el-tab-pane
+          :label="$t('settings.api_key_management')"
+          name="api_key"
+          :lazy="true"
+        >
+          <ApiKey />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.settings {
+  padding: 24px;
+  height: 100%;
+
+  &-label {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+
+  &-container {
+    height: 100%;
+    background-color: var(--o-bg-color-base);
+    border-radius: 8px;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>
+
+<style>
+.settings-tabs {
+  --o-tabs-font-size: 14px;
+  --o-tabs-item-padding: 5px 16px 0 5px;
+  --o-tabs-line-height: 32px;
+  --o-tabs-color_active: rgb(99, 149, 253);
+  flex: 1;
+
+  .el-tabs__content {
+    padding: 16px 0;
+    height: 100%;
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
+}
+</style>