diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index bf3b9b5..81c51fe 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -1,33 +1,37 @@
 import { defineConfig } from 'vitepress'
 
 export default defineConfig({
-  title: "OpenMCP",
-  description: "为开发者和科研人员准备的MCP开发环境和SDK",
-  themeConfig: {
-    // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' }
-    ],
+	title: "OpenMCP",
+	description: "为开发者和科研人员准备的MCP开发环境和SDK",
+	head: [
+		['link', { rel: 'icon', href: '/images/favicon.png' }]
+	],
+	themeConfig: {
+		// https://vitepress.dev/reference/default-theme-config
+		nav: [
+			{ text: 'Home', link: '/' },
+			{ text: 'Examples', link: '/markdown-examples' }
+		],
 
-    sidebar: [
-      {
-        text: 'Examples',
-        items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
-      }
-    ],
+		sidebar: [
+			{
+				text: 'Examples',
+				items: [
+					{ text: 'Markdown Examples', link: '/markdown-examples' },
+					{ text: 'Runtime API Examples', link: '/api-examples' }
+				]
+			}
+		],
 
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
-    ],
-    footer: {
-      message: '缩短LLM到Agent的最后一公里'
-    },
-    
-    // 添加右侧图片配置
-    logo: '/openmcp.png',  // 确保图片放在public目录下
-  }
+		socialLinks: [
+			{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+		],
+		footer: {
+			message: '缩短LLM到Agent的最后一公里',
+			copyright: 'OpenMCP All rights reserved'
+		},
+
+		// 添加右侧图片配置
+		logo: '/images/openmcp.png',  // 确保图片放在public目录下
+	}
 })
diff --git a/.vitepress/theme/openmcp-hero-image.vue b/.vitepress/theme/components/home/HeroImage.vue
similarity index 75%
rename from .vitepress/theme/openmcp-hero-image.vue
rename to .vitepress/theme/components/home/HeroImage.vue
index f1b38db..837ca9a 100644
--- a/.vitepress/theme/openmcp-hero-image.vue
+++ b/.vitepress/theme/components/home/HeroImage.vue
@@ -1,5 +1,7 @@
 <template>
-	<img class="VPImage image-src" src="/openmcp.png" alt="">
+	<div style="height: 420px;">
+		<img class="VPImage image-src" src="/images/openmcp.png" alt="">
+	</div>
 </template>
 
 <style scoped>
@@ -27,10 +29,9 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    max-width: 352px;
-    max-height: 352px;
-    width: 100%;
-    height: 100%;
+    max-width: 500px;
+    max-height: 500px;
+	height: 99%;
     object-fit: contain;
     transform: translate(-50%, -50%);
 }
diff --git a/.vitepress/theme/components/home/TwoSideLayout.vue b/.vitepress/theme/components/home/TwoSideLayout.vue
new file mode 100644
index 0000000..5c1182d
--- /dev/null
+++ b/.vitepress/theme/components/home/TwoSideLayout.vue
@@ -0,0 +1,98 @@
+<template>
+    <div class="two-side-layout">
+        <div :class="['content-container', { 'reverse': imagePlacement === 'left' }]">
+            <div class="text-content">
+                <div v-for="(item, index) in texts" :key="index" class="text-item">
+                    <span class="prefix">{{ index + 1 }}.</span> {{ item }}
+                </div>
+            </div>
+            <div class="image-container">
+                <img :src="image" alt="双栏布局图片" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+    imagePlacement: {
+        type: String,
+        default: 'left',
+        validator: (value) => ['left', 'right'].includes(value)
+    },
+    texts: {
+        type: Array,
+        required: true
+    },
+    image: {
+        type: String,
+        required: true
+    }
+});
+</script>
+
+<style>
+.two-side-layout {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.content-container {
+    display: flex;
+    gap: 2rem;
+    max-width: 1200px;
+    width: 100%;
+}
+
+.content-container.reverse {
+    flex-direction: row-reverse;
+}
+
+.text-content {
+    flex: 1;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.text-item {
+    width: 100%;
+    border-bottom: 1px solid var(--vp-c-default-3);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.prefix {
+    color: var(--vp-c-brand-1);
+    margin-right: 0.5rem;
+}
+
+.image-container {
+    flex: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.image-container img {
+    max-width: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+    .content-container {
+        flex-direction: column;
+    }
+
+    .content-container.reverse {
+        flex-direction: column-reverse;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.mts
similarity index 69%
rename from .vitepress/theme/index.ts
rename to .vitepress/theme/index.mts
index deaf629..4351c65 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.mts
@@ -2,7 +2,8 @@
 import { h } from 'vue';
 import type { Theme } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
-import HeroImage from './openmcp-hero-image.vue';
+import HeroImage from './components/home/HeroImage.vue';
+import TwoSideLayout from './components/home/TwoSideLayout.vue';
 
 import './style.css';
 
@@ -14,6 +15,6 @@ export default {
 		})
 	},
 	enhanceApp({ app, router, siteData }) {
-		// ...
+		app.component('TwoSideLayout', TwoSideLayout);
 	}
 } satisfies Theme
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 1a61cb1..e06bddf 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -137,3 +137,6 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
+.two-side-layout .image-container {
+  display: unset !important;
+}
\ No newline at end of file
diff --git a/.vscode/vue.code-snippets b/.vscode/vue.code-snippets
new file mode 100644
index 0000000..f43c10a
--- /dev/null
+++ b/.vscode/vue.code-snippets
@@ -0,0 +1,20 @@
+{
+	"Vue 3 TypeScript Component": {
+		"prefix": "vue3ts",
+		"body": [
+			"<template>",
+			"\t$1",
+			"</template>",
+			"",
+			"<script setup lang=\"ts\">",
+			"import { defineComponent } from 'vue';",
+			"",
+			"defineComponent({ name: '$TEMPLATE_NAME' });",
+			"</script>",
+			"",
+			"<style>",
+			"</style>"
+		],
+		"description": "Vue 3 TypeScript component template"
+	}
+}
\ No newline at end of file
diff --git a/openmcp.png b/images/favicon.png
similarity index 100%
rename from openmcp.png
rename to images/favicon.png
diff --git a/images/openmcp.chatbot.png b/images/openmcp.chatbot.png
new file mode 100644
index 0000000..6b50065
Binary files /dev/null and b/images/openmcp.chatbot.png differ
diff --git a/images/openmcp.png b/images/openmcp.png
new file mode 100644
index 0000000..a6e7815
Binary files /dev/null and b/images/openmcp.png differ
diff --git a/images/public-deploy.png b/images/public-deploy.png
new file mode 100644
index 0000000..e3b0bd4
Binary files /dev/null and b/images/public-deploy.png differ
diff --git a/index.md b/index.md
index ac7c8de..0849163 100644
--- a/index.md
+++ b/index.md
@@ -4,26 +4,45 @@ layout: home
 
 hero:
   name: "OpenMCP"
-  text: "elegant mcp debuggers and sdk for developers"
-  tagline: Shortening the last mile from LLM to Agent
-  
+  text: "面向开发者的优雅 MCP 调试器和 SDK"
+  tagline: 缩短从大语言模型到智能体的最后一公里
+
   actions:
     - theme: brand
-      text: OpenMCP Client
+      text: OpenMCP 客户端
       link: /markdown-examples
     - theme: alt
       text: openmcp-sdk
       link: /api-examples
     - theme: alt
-      text: Github
-      link: /api-examples
+      text: GitHub
+      link: https://github.com/LSTM-Kirigaya/openmcp-client
 
 features:
-  - title: Integrated Debugging Environment
-    details: Combines Inspector with MCP client functions for seamless development and testing
-  - title: Comprehensive Project Management
-    details: Offers complete project-level control panels for efficient MCP project oversight
-  - title: Multi-Model Support
-    details: Supports various large language models with flexible integration capabilities
+  - title: 集成调试环境
+    details: 将检查器与 MCP 客户端功能相结合，实现无缝开发和测试
+  - title: 全面的项目管理
+    details: 提供完整的项目级控制面板，实现高效的 MCP 项目监督
+  - title: 多模型支持
+    details: 支持多种大语言模型，具备灵活的集成能力
 ---
 
+<br>
+<br>
+<br>
+
+# OpenMCP 为谁准备？
+
+<a href="https://qm.qq.com/cgi-bin/qm/qr?k=C6ZUTZvfqWoI12lWe7L93cWa1hUsuVT0&jump_from=webapi&authKey=McW6B1ogTPjPDrCyGttS890tMZGQ1KB3QLuG4aqVNRaYp4vlTSgf2c6dMcNjMuBD" target="_blank" style="display: inline-block; padding: 2px 8px; font-size: 0.8rem; background-color: var(--vp-c-brand-3); color: white; border-radius: .5em; text-decoration: none; margin-right: 10px;">开源社区爱好者</a><a href="https://qm.qq.com/cgi-bin/qm/qr?k=C6ZUTZvfqWoI12lWe7L93cWa1hUsuVT0&jump_from=webapi&authKey=McW6B1ogTPjPDrCyGttS890tMZGQ1KB3QLuG4aqVNRaYp4vlTSgf2c6dMcNjMuBD" target="_blank" style="display: inline-block; padding: 2px 8px; font-size: 0.8rem; background-color: var(--vp-button-alt-bg); color: white; border-radius: .5em; text-decoration: none; margin-right: 10px;">专业软件工程师</a><a href="https://qm.qq.com/cgi-bin/qm/qr?k=C6ZUTZvfqWoI12lWe7L93cWa1hUsuVT0&jump_from=webapi&authKey=McW6B1ogTPjPDrCyGttS890tMZGQ1KB3QLuG4aqVNRaYp4vlTSgf2c6dMcNjMuBD" target="_blank" style="display: inline-block; padding: 2px 8px; font-size: 0.8rem; background-color: var(--vp-button-alt-bg); color: white; border-radius: .5em; text-decoration: none; margin-right: 10px;">AI研发科学家</a>
+
+<TwoSideLayout
+  :texts="[
+    '在编辑器中写完代码直接测试，无需打开第三方软件。提供极其丰富的功能和特性。',
+    '在左侧面板自由而优雅地管理、调试和测试你的智能体。',
+    '大模型调用工具的每一个细节一览无余，不满意的调用结果直接一键复现。',
+    '每一次对话都会显示各项性能指标，方便进行成本管理。',
+    '系统提示词管理面板，让您轻松用 mcp 服务器和系统提示词构建您的智能体应用。',
+    '每一次测试的细节都会 100% 跟随 git 进行版本控制，方便你分享你的每一次试验结果，也方便你零成本复现别人的 mcp 项目。'
+  ]"
+  image="/images/openmcp.chatbot.png"
+/>