diff --git a/.vscodeignore b/.vscodeignore
index d255964..d16722c 100644
--- a/.vscodeignore
+++ b/.vscodeignore
@@ -12,3 +12,6 @@ vsc-extension-quickstart.md
 **/*.map
 **/*.ts
 **/.vscode-test.*
+app/**
+backend/**
+test/**
\ No newline at end of file
diff --git a/README.md b/README.md
index 22f87d0..c783dd4 100644
--- a/README.md
+++ b/README.md
@@ -1,71 +1,14 @@
-# openmcp README
+## OpenMCP
 
-This is the README for your extension "openmcp". After writing up a brief description, we recommend including the following sections.
+一款用于 MCP 服务端调试的一体化 vscode 插件。
 
-## Features
+- 包含原版 Inpsector 的所有功能
+- 包含一个简易的用于进行测试的大模型对话 & 执行窗口
+- 支持多种大模型
 
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
 
-For example if there is an image subfolder under your extension project workspace:
+## Dev
 
-\!\[feature X\]\(images/feature-x.png\)
-
-> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
-
-## Requirements
-
-If you have any requirements or dependencies, add a section describing those and how to install and configure them.
-
-## Extension Settings
-
-Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
-
-For example:
-
-This extension contributes the following settings:
-
-* `myExtension.enable`: Enable/disable this extension.
-* `myExtension.thing`: Set to `blah` to do something.
-
-## Known Issues
-
-Calling out known issues can help limit users opening duplicate issues against your extension.
-
-## Release Notes
-
-Users appreciate release notes as you update your extension.
-
-### 1.0.0
-
-Initial release of ...
-
-### 1.0.1
-
-Fixed issue #.
-
-### 1.1.0
-
-Added features X, Y, and Z.
-
----
-
-## Following extension guidelines
-
-Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
-
-* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
-
-## Working with Markdown
-
-You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
-
-* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
-* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
-* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
-
-## For more information
-
-* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
-* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
-
-**Enjoy!**
+- `app`: 前端 UI 的定义
+- `test`: 测试 `app` 的部分，包含一个简易的转发层
+- `src`: vscode 插件端定义
\ No newline at end of file
diff --git a/app/package-lock.json b/app/package-lock.json
index 923306a..61524d8 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -11,7 +11,7 @@
         "core-js": "^3.8.3",
         "element-plus": "^2.9.7",
         "vue": "^3.2.13",
-        "vue-i18n": "^11.1.2",
+        "vue-i18n": "^11.1.0",
         "vue-router": "^4.0.3"
       },
       "devDependencies": {
diff --git a/app/package.json b/app/package.json
index d064b27..e9702dc 100644
--- a/app/package.json
+++ b/app/package.json
@@ -11,7 +11,7 @@
     "core-js": "^3.8.3",
     "element-plus": "^2.9.7",
     "vue": "^3.2.13",
-    "vue-i18n": "^11.1.2",
+    "vue-i18n": "^11.1.0",
     "vue-router": "^4.0.3"
   },
   "devDependencies": {
diff --git a/app/src/hook/css.ts b/app/src/hook/css.ts
index 9f7b9ae..de7b75e 100644
--- a/app/src/hook/css.ts
+++ b/app/src/hook/css.ts
@@ -20,6 +20,8 @@ export function setDefaultCss() {
     document.body.style.setProperty('--el-color-info-light-8', 'var(--main-color)');
     document.body.style.setProperty('--el-fill-color-light', 'var(--sidebar-item-selected)');
     document.body.style.setProperty('--el-color-primary-dark-2', 'var(--main-light-color)');
+    document.body.style.setProperty('--el-fill-color-dark', 'var(--main-light-color)');
+    document.body.style.setProperty('--el-fill-color-darker', 'var(--main-light-color)');
     // document.body.style.setProperty('--el-color-white', 'var(--background)');
     
     // 设置全局宏
diff --git a/app/src/views/setting/appearance.vue b/app/src/views/setting/appearance.vue
index c05daba..42ae8dd 100644
--- a/app/src/views/setting/appearance.vue
+++ b/app/src/views/setting/appearance.vue
@@ -1,42 +1,29 @@
 <template>
 	<div class="setting-section">
-		<h2>{{ t('general-setting') }}</h2>
+		<h2>{{ t('appearance-setting') }}</h2>
 		<div class="setting-option">
-			<span>
-				<span class="iconfont icon-i18n"></span>
-				<span class="option-title">{{ t('language-setting') }}</span>
+			<span class="option-title">
+				<span class="iconfont icon-bg-colors"></span>
+
+				{{ t('setting.general-color-setting') }}
 			</span>
-			<div style="width: 100px;">
-				<el-select name="language-setting" class="language-setting" v-model="locale" @change="onlanguagechange">
-					<el-option v-for="option in languageSetting.options" :value="option.value" :label="option.text"
-						:key="option.value">
-					</el-option>
-				</el-select>
+			<div class="option-group">
+				<div style="height: 20px; width: 20px;"></div>
+				<el-color-picker v-model="colorManager.mainColor" @change="onGeneralColorChange"
+					:predefine="predefinedColors" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { defineComponent, ref } from 'vue';
-import { languageSetting } from './language';
+import { defineComponent } from 'vue';
+import { colorManager, onGeneralColorChange, predefinedColors } from './color';
 import { useI18n } from 'vue-i18n';
-import { globalSetting } from '@/hook/global';
 
-defineComponent({ name: 'appearance' });
+defineComponent({ name: 'general' });
+const { t } = useI18n();
 
-const { t, locale } = useI18n();
-locale.value = globalSetting.language;
-
-const currentLanguage = ref('简体中文');
-
-function onlanguagechange(code: string) {
-	const option = languageSetting.options.find(item => item.value === code);
-	if (option) {
-		currentLanguage.value = option.text;
-	}
-	// languageDialogShow.value = true;
-}
 </script>
 
 <style></style>
\ No newline at end of file
diff --git a/app/src/views/setting/general.vue b/app/src/views/setting/general.vue
index 42ae8dd..c05daba 100644
--- a/app/src/views/setting/general.vue
+++ b/app/src/views/setting/general.vue
@@ -1,29 +1,42 @@
 <template>
 	<div class="setting-section">
-		<h2>{{ t('appearance-setting') }}</h2>
+		<h2>{{ t('general-setting') }}</h2>
 		<div class="setting-option">
-			<span class="option-title">
-				<span class="iconfont icon-bg-colors"></span>
-
-				{{ t('setting.general-color-setting') }}
+			<span>
+				<span class="iconfont icon-i18n"></span>
+				<span class="option-title">{{ t('language-setting') }}</span>
 			</span>
-			<div class="option-group">
-				<div style="height: 20px; width: 20px;"></div>
-				<el-color-picker v-model="colorManager.mainColor" @change="onGeneralColorChange"
-					:predefine="predefinedColors" />
+			<div style="width: 100px;">
+				<el-select name="language-setting" class="language-setting" v-model="locale" @change="onlanguagechange">
+					<el-option v-for="option in languageSetting.options" :value="option.value" :label="option.text"
+						:key="option.value">
+					</el-option>
+				</el-select>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from 'vue';
-import { colorManager, onGeneralColorChange, predefinedColors } from './color';
+import { defineComponent, ref } from 'vue';
+import { languageSetting } from './language';
 import { useI18n } from 'vue-i18n';
+import { globalSetting } from '@/hook/global';
 
-defineComponent({ name: 'general' });
-const { t } = useI18n();
+defineComponent({ name: 'appearance' });
 
+const { t, locale } = useI18n();
+locale.value = globalSetting.language;
+
+const currentLanguage = ref('简体中文');
+
+function onlanguagechange(code: string) {
+	const option = languageSetting.options.find(item => item.value === code);
+	if (option) {
+		currentLanguage.value = option.text;
+	}
+	// languageDialogShow.value = true;
+}
 </script>
 
 <style></style>
\ No newline at end of file
diff --git a/app/src/views/setting/index.vue b/app/src/views/setting/index.vue
index ecfeaca..8c82bdb 100644
--- a/app/src/views/setting/index.vue
+++ b/app/src/views/setting/index.vue
@@ -1,8 +1,26 @@
 <template>
 	<div class="setting-container">
-		<General></General>
-		<Api></Api>
-		<Appearance></Appearance>
+		<div>
+			<el-segmented
+				v-model="settingSections.current"
+				:options="settingSections.data"
+				size="large"
+				style="margin: 10px; font-size: 16px; background-color: var(--background);"
+			>
+			<template #default="scope">
+				<div class="setting-section-option">
+					{{ scope.item.label }}
+				</div>
+			</template>
+			</el-segmented>
+			<div>
+
+				<General v-show="settingSections.current === 'general'"></General>
+				<Api v-show="settingSections.current === 'api'"></Api>
+				<Appearance v-show="settingSections.current === 'appearance'"></Appearance>
+
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -14,6 +32,7 @@ import { colorManager } from './color';
 import General from './general.vue';
 import Api from './api.vue';
 import Appearance from './appearance.vue';
+import { settingSections } from './setting-section';
 
 defineComponent({ name: 'setting' });
 
@@ -21,6 +40,8 @@ onMounted(() => {
 	colorManager.initColor();
 });
 
+
+
 </script>
 
 <style>
@@ -43,6 +64,11 @@ onMounted(() => {
 	border-radius: .5em .5em 0 0;
 }
 
+.setting-section-option {
+	padding: 10px;
+
+}
+
 .setting-container .el-scrollbar {
 	width: 400px;
 	user-select: none;
diff --git a/app/src/views/setting/setting-section.ts b/app/src/views/setting/setting-section.ts
new file mode 100644
index 0000000..f806fe9
--- /dev/null
+++ b/app/src/views/setting/setting-section.ts
@@ -0,0 +1,23 @@
+import { reactive } from 'vue';
+
+import I18n from '@/i18n/index';
+
+const { t } = I18n.global;
+
+export const settingSections = reactive({
+	current: 'api',
+	data: [
+		{
+			value: 'api',
+			label: 'API'
+		},
+		{
+			value: 'general',
+			label: t('general-setting')
+		},
+		{
+			value: 'appearance',
+			label: t('appearance-setting')
+		}
+	]
+});