diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..09e7f6a
Binary files /dev/null and b/.DS_Store differ
diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index 90bbc10..ac4ff1f 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -1,4 +1,10 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from 'vitepress';
+
+export const customIcons = {
+	share: {
+		svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>'
+	}
+}
 
 export default defineConfig({
 	title: "OpenMCP",
@@ -9,29 +15,53 @@ export default defineConfig({
 	themeConfig: {
 		// https://vitepress.dev/reference/default-theme-config
 		nav: [
-			{ text: 'Home', link: '/' },
-			{ text: 'Examples', link: '/markdown-examples' }
-		],
-
-		sidebar: [
+			{ text: '首页', link: '/' },
+			{ text: '教程', link: '/plugin-tutorial' },
+			{ text: 'SDK', link: '/sdk-tutorial' },
 			{
-				text: 'Examples',
-				items: [
-					{ text: 'Markdown Examples', link: '/markdown-examples' },
-					{ text: 'Runtime API Examples', link: '/api-examples' }
+				text: 'Prewiew 0.1.0', items: [
+					{
+						component: 'KNavItem',
+						props: {
+							title: '更新日志',
+							description: '查看项目的更新历史记录',
+							icon: '/images/icons/monitor.svg',
+							link: '/preview/changelog'
+						}
+					},
+					{
+						component: 'KNavItem',
+						props: {
+							title: '参与 OpenMCP',
+							description: '了解如何参与 OpenMCP 项目的开发和维护',
+							icon: '/images/icons/group.svg',
+							link: '/preview/join'
+						}
+					},
+					{
+						component: 'KNavItem',
+						props: {
+							title: '资源频道',
+							description: '获取项目相关的资源和信息',
+							icon: '/images/icons/ai.svg',
+							link: '/preview/channel'
+						}
+					}
 				]
-			}
+			},
 		],
 
 		socialLinks: [
-			{ icon: 'github', link: 'https://github.com/LSTM-Kirigaya/openmcp-client' }
+			{ icon: 'github', link: 'https://github.com/LSTM-Kirigaya/openmcp-client' },
+			{ icon: customIcons.share, link: 'https://kirigaya.cn/home' },
 		],
+
 		footer: {
 			message: '缩短LLM到Agent的最后一公里',
 			copyright: 'OpenMCP All rights reserved'
 		},
 
-		// 添加右侧图片配置
-		logo: '/images/openmcp.png',  // 确保图片放在public目录下
+		// 左上角的 logo
+		logo: '/images/openmcp.png',
 	}
 })
diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
new file mode 100644
index 0000000..f778585
--- /dev/null
+++ b/.vitepress/theme/Layout.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { nextTick, provide } from 'vue'
+
+const data = useData()
+const enableTransitions = () =>
+    'startViewTransition' in document &&
+    window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
+const isDark = data.isDark;
+
+// 移除原有的 transition 相关逻辑
+provide('toggle-appearance', async () => {
+    if (!enableTransitions()) {
+        data.isDark.value = !data.isDark.value
+        return
+    }
+    await document.startViewTransition(async () => {
+        isDark.value = !isDark.value
+        await nextTick()
+    }).ready;
+
+    document.documentElement.animate(
+        {
+            duration: 300,
+            easing: 'ease-in',
+            pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
+        }
+    )
+})
+</script>
+
+<template>
+    <DefaultTheme.Layout />
+</template>
+
+<style>
+/* 添加全局过渡效果 */
+:root {
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+</style>
\ No newline at end of file
diff --git a/.vitepress/theme/components/KTab/index.vue b/.vitepress/theme/components/KTab/index.vue
index 2b55959..8a6067b 100644
--- a/.vitepress/theme/components/KTab/index.vue
+++ b/.vitepress/theme/components/KTab/index.vue
@@ -151,7 +151,7 @@ onMounted(() => {
     position: relative;
 }
 
-.k-tabs-tag-item {
+.k-tabs-tag-item { 
     background-color: var(--vp-button-alt-bg);
     color: white;
     border-radius: .5em;
@@ -166,11 +166,18 @@ onMounted(() => {
     transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
-.k-tabs-tag-item:hover {
+@media (min-width: 768px) {
+    .k-tabs-tag-item { 
+        padding: 6px 16px;
+        font-size: 1rem;
+    }
+}
+
+.k-tabs-tag-item:hover { 
     background-color: var(--vp-c-brand-2);
 }
 
-.k-tabs-tag-item.active-tab {
+.k-tabs-tag-item.active-tab { 
     background-color: var(--vp-c-brand-3);
 }
 
diff --git a/.vitepress/theme/components/bilibli-player/index.vue b/.vitepress/theme/components/bilibli-player/index.vue
index 0b8fba0..08c0560 100644
--- a/.vitepress/theme/components/bilibli-player/index.vue
+++ b/.vitepress/theme/components/bilibli-player/index.vue
@@ -47,8 +47,10 @@ function playVideo() {
 
 .bilibili-player-container {
     position: relative;
-    width: 72.36vw;
-    height: 38.26vw;
+    min-width: 377px;
+    min-height: 225px;
+    width: 52.36vw;
+    height: 28.26vw;
     aspect-ratio: 16/9;
     border-radius: .5em;
     overflow: hidden;
diff --git a/.vitepress/theme/components/home/HeroImage.vue b/.vitepress/theme/components/home/HeroImage.vue
index b8d3c94..379ee13 100644
--- a/.vitepress/theme/components/home/HeroImage.vue
+++ b/.vitepress/theme/components/home/HeroImage.vue
@@ -29,8 +29,8 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    max-width: 380px;
-    max-height: 380px;
+    max-width: 350px;
+    max-height: 350px;
 	height: 99%;
     object-fit: contain;
     transform: translate(-50%, -50%);
diff --git a/.vitepress/theme/components/nav-item/index.vue b/.vitepress/theme/components/nav-item/index.vue
new file mode 100644
index 0000000..01b10d7
--- /dev/null
+++ b/.vitepress/theme/components/nav-item/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <a class="nav-item" @mouseenter="isHovered = true" @mouseleave="isHovered = false"
+        :href="link"
+    >
+        <div class="nav-item-content">
+            <div class="nav-item-icon" v-if="icon">
+                <component :is="typeof icon === 'string' ? 'img' : 'div'" :src="typeof icon === 'string' ? icon : null"
+                    v-html="typeof icon === 'object' && icon.svg ? icon.svg : ''">
+                </component>
+            </div>
+            <div class="nav-item-text">
+                <h3 class="nav-item-title">{{ title }}</h3>
+                <p class="nav-item-description">{{ description }}</p>
+            </div>
+        </div>
+    </a>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+    title: { type: String, required: true },
+    description: { type: String, required: true },
+    icon: { type: [String, Object], required: true },
+    link: { type: String, required: true },
+});
+
+const isHovered = ref(false);
+</script>
+
+<style scoped>
+.nav-item {
+    display: flex;
+    min-width: 300px;
+    padding: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    border-radius: .5em;
+    overflow: hidden;
+    color: var(--vp-c-text-1);
+}
+
+.nav-item-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.nav-item-icon {
+    flex-shrink: 0;
+    max-width: 20px;
+    max-height: 20px;
+}
+
+.nav-item-title {
+    font-size: 14px;
+    margin: 0;
+}
+
+.nav-item-description {
+    font-size: 12px;
+    opacity: .7;
+    margin: 0;
+    word-wrap: break-word; /* 确保长单词也能换行 */
+    white-space: normal; /* 允许文本换行 */
+}
+
+.nav-item:hover {
+    background-color: var(--vp-c-default-soft);
+    color: var(--vp-c-brand-1);
+}
+
+</style>
\ No newline at end of file
diff --git a/.vitepress/theme/index.mts b/.vitepress/theme/index.mts
index 2da69bf..bf401d4 100644
--- a/.vitepress/theme/index.mts
+++ b/.vitepress/theme/index.mts
@@ -2,17 +2,21 @@
 import { h } from 'vue';
 import type { Theme } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
+
+import CustomLayout from './Layout.vue';
+
 import HeroImage from './components/home/HeroImage.vue';
 import TwoSideLayout from './components/home/TwoSideLayout.vue';
 import KTab from './components/KTab/index.vue';
 import BiliPlayer from './components/bilibli-player/index.vue';
+import KNavItem from './components/nav-item/index.vue';
 
 import './style.css';
 
 export default {
 	extends: DefaultTheme,
 	Layout: () => {
-		return h(DefaultTheme.Layout, null, {
+		return h(CustomLayout, null, {
 			'home-hero-image': () => h(HeroImage)
 		})
 	},
@@ -20,5 +24,6 @@ export default {
 		app.component('TwoSideLayout', TwoSideLayout);
 		app.component('KTab', KTab);
 		app.component('BiliPlayer', BiliPlayer);
+		app.component('KNavItem', KNavItem);
 	}
 } satisfies Theme
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 5d8fb2c..d0acdf1 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -129,6 +129,11 @@
   --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
 }
 
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
+}
+
 /**
  * Component: Algolia
  * -------------------------------------------------------------------------- */
@@ -143,6 +148,8 @@
 
 .VPHero .image-container img {
   box-shadow: unset !important;
+  max-width: 290px !important;
+  max-height: 290px !important;
 }
 
 iframe {
diff --git a/images/icons/ai.svg b/images/icons/ai.svg
new file mode 100644
index 0000000..5386a79
--- /dev/null
+++ b/images/icons/ai.svg
@@ -0,0 +1,9 @@
+<svg t="1748332079467" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="1357" width="200" height="200">
+    <path
+        d="M490.08 116.288L868.736 928.32a32 32 0 1 0 58.016-27.072L548.064 89.28a32 32 0 1 0-57.984 27.04z"
+        fill="var(--vp-c-brand-1)" p-id="1358"></path>
+    <path
+        d="M550.176 116.288L171.488 928.32a32 32 0 1 1-57.984-27.072L492.16 89.28a32 32 0 0 1 58.016 27.04z"
+        fill="var(--vp-c-text-1)" p-id="1359"></path>
+</svg>
\ No newline at end of file
diff --git a/images/icons/group.svg b/images/icons/group.svg
new file mode 100644
index 0000000..ab4c8b4
--- /dev/null
+++ b/images/icons/group.svg
@@ -0,0 +1,9 @@
+<svg t="1748332003112" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="1198" width="200" height="200">
+    <path
+        d="M82.784 773.76l409.152 175.36c23.36 10.016 49.824 10.016 73.184 0l409.152-175.36a30.976 30.976 0 0 0-24.384-56.96l-409.152 175.36a30.976 30.976 0 0 1-24.416 0L107.2 716.8a30.976 30.976 0 1 0-24.384 56.96z"
+        fill="var(--vp-c-brand-1)" p-id="1199"></path>
+    <path
+        d="M949.888 469.088a30.976 30.976 0 1 1 24.384 56.928l-409.152 175.36a92.896 92.896 0 0 1-73.184 0l-409.152-175.36a30.976 30.976 0 0 1 24.384-56.96l409.152 175.36a30.976 30.976 0 0 0 24.416 0zM539.008 65.504l4.032 1.408L969.824 245.76a38.016 38.016 0 0 1 0 70.048L543.04 494.624c-9.28 3.904-19.744 3.904-29.024 0L87.232 315.84a38.016 38.016 0 0 1 0-70.08l426.784-178.816c7.968-3.328 16.768-3.808 24.96-1.408zM528.48 128L163.904 280.768l364.608 152.8 364.64-152.8L528.512 128z"
+        fill="var(--vp-c-text-1)" p-id="1200"></path>
+</svg>
\ No newline at end of file
diff --git a/images/icons/monitor.svg b/images/icons/monitor.svg
new file mode 100644
index 0000000..f605195
--- /dev/null
+++ b/images/icons/monitor.svg
@@ -0,0 +1,9 @@
+<svg t="1748331856103" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="986" width="200" height="200">
+    <path
+        d="M786.56 887.744a28.896 28.896 0 0 1 0 57.792H208.544a28.896 28.896 0 0 1 0-57.792zM844.416 64a86.72 86.72 0 0 1 86.72 86.72V699.84a86.72 86.72 0 0 1-86.72 86.72H150.72A86.72 86.72 0 0 1 64 699.84V150.72A86.72 86.72 0 0 1 150.72 64h693.664z m0 57.792H150.72a28.896 28.896 0 0 0-28.928 28.928V699.84c0 15.968 12.96 28.896 28.928 28.896h693.664a28.896 28.896 0 0 0 28.896-28.896V150.72a28.896 28.896 0 0 0-28.896-28.928z"
+        fill="var(--vp-c-text-1)" p-id="987"></path>
+    <path
+        d="M228.352 548.224l166.592-157.376 172.064 160.48 244.768-235.264a28.896 28.896 0 0 0-40.064-41.664L566.4 471.744l-171.712-160.16-206.016 194.592a28.896 28.896 0 1 0 39.68 42.048z"
+        fill="var(--vp-c-brand-1)" p-id="988"></path>
+</svg>
\ No newline at end of file
diff --git a/images/icons/openmcp-sdk.svg b/images/icons/openmcp-sdk.svg
new file mode 100644
index 0000000..60f824f
--- /dev/null
+++ b/images/icons/openmcp-sdk.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="600" height="674" viewBox="0 0 600 674" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="gradient_1" gradientUnits="userSpaceOnUse" x1="300" y1="0" x2="300" y2="600">
+      <stop offset="0" stop-color="#A1A7F6" />
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.2" />
+    </linearGradient>
+    <linearGradient id="gradient_2" gradientUnits="userSpaceOnUse" x1="110.5" y1="0" x2="110.5" y2="221">
+      <stop offset="0.441" stop-color="#A8A3FF" />
+      <stop offset="1" stop-color="#FFFFFF" />
+    </linearGradient>
+    <linearGradient id="gradient_3" gradientUnits="userSpaceOnUse" x1="55.5" y1="0" x2="55.5" y2="111">
+      <stop offset="0" stop-color="#FFFFFF" />
+      <stop offset="1" stop-color="#A489FB" />
+    </linearGradient>
+    <linearGradient id="gradient_5" gradientUnits="userSpaceOnUse" x1="126" y1="0" x2="126" y2="647">
+      <stop offset="0" stop-color="#FFF2B0" />
+      <stop offset="0.461" stop-color="#F2B63A" />
+    </linearGradient>
+  </defs>
+  <g>
+    <g>
+      <g transform="translate(0 74)">
+        <path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="#5A00FF" fill-rule="evenodd" />
+        <path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="url(#gradient_1)" fill-rule="evenodd" />
+      </g>
+      <path d="M0 110.5C0 49.4725 49.4725 0 110.5 0C171.527 0 221 49.4725 221 110.5C221 171.527 171.527 221 110.5 221C49.4725 221 0 171.527 0 110.5Z" fill="url(#gradient_2)" fill-rule="evenodd" transform="translate(284 417)" />
+      <path d="M0 55.5C0 24.8482 24.8482 0 55.5 0C86.1518 0 111 24.8482 111 55.5C111 86.1518 86.1518 111 55.5 111C24.8482 111 0 86.1518 0 55.5Z" fill="url(#gradient_3)" fill-rule="evenodd" transform="translate(49 374)" />
+      <path d="M0 182.5C0 81.708 81.708 0 182.5 0C283.292 0 365 81.708 365 182.5C365 283.292 283.292 365 182.5 365C81.708 365 0 283.292 0 182.5Z" fill="url(#gradient_4)" fill-rule="evenodd" transform="translate(179 108)" />
+      <path d="M215.354 294.309L24.8044 647C24.8044 647 80.3091 362.484 80.3091 362.484C80.9377 359.199 79.5325 355.85 77.4987 355.85C77.4987 355.85 23.6951 355.85 23.6951 355.85C6.50011 355.85 -4.96321 325.459 2.13664 298.669C2.13664 298.669 75.28 23.6938 75.28 23.6938C79.1258 9.28799 87.5569 0 96.8384 0C96.8384 0 252 0 252 0C252 0 178.82 218.868 178.82 218.868C177.71 222.217 179.115 226.45 181.371 226.45C181.371 226.45 197.938 226.45 197.938 226.45C218.571 226.45 229.332 268.404 215.354 294.309C215.354 294.309 215.354 294.309 215.354 294.309Z" fill="url(#gradient_5)" transform="translate(193 0)" />
+    </g>
+    <rect width="432" height="432" transform="translate(84 107)" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/icons/openmcp.svg b/images/icons/openmcp.svg
new file mode 100644
index 0000000..8a81d2f
--- /dev/null
+++ b/images/icons/openmcp.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="100%" height="100%" viewBox="0 0 824 834" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="gradient_1" gradientUnits="userSpaceOnUse" x1="300" y1="0" x2="300" y2="600">
+      <stop offset="0" stop-color="#A1A7F6" />
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.2" />
+    </linearGradient>
+  </defs>
+  <g>
+    <g transform="translate(145 58)">
+      <g>
+        <path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="#5A00FF" fill-rule="evenodd" />
+        <path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="url(#gradient_1)" fill-rule="evenodd" />
+      </g>
+      <path d="M0 110.5C0 49.4725 49.4725 0 110.5 0C171.527 0 221 49.4725 221 110.5C221 171.527 171.527 221 110.5 221C49.4725 221 0 171.527 0 110.5Z" fill="#FFFFFF" fill-rule="evenodd" transform="translate(294 341)" />
+      <path d="M0 55.5C0 24.8482 24.8482 0 55.5 0C86.1518 0 111 24.8482 111 55.5C111 86.1518 86.1518 111 55.5 111C24.8482 111 0 86.1518 0 55.5Z" fill="#FFFFFF" fill-rule="evenodd" transform="translate(48 269)" />
+      <path d="M0 182.5C0 81.708 81.708 0 182.5 0C283.292 0 365 81.708 365 182.5C365 283.292 283.292 365 182.5 365C81.708 365 0 283.292 0 182.5Z" fill="#FFFFFF" fill-rule="evenodd" transform="translate(188 39)" />
+      <path d="M0 57C0 25.5198 25.5198 0 57 0C88.4802 0 114 25.5198 114 57C114 88.4802 88.4802 114 57 114C25.5198 114 0 88.4802 0 57Z" fill="#FFFFFF" fill-rule="evenodd" transform="translate(376 130)" />
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/icons/vscode.svg b/images/icons/vscode.svg
new file mode 100644
index 0000000..c453e63
--- /dev/null
+++ b/images/icons/vscode.svg
@@ -0,0 +1,41 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z" fill="#0065A9"/>
+<g filter="url(#filter0_d)">
+<path d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z" fill="#007ACC"/>
+</g>
+<g filter="url(#filter1_d)">
+<path d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z" fill="#1F9CF0"/>
+</g>
+<g style="mix-blend-mode:overlay" opacity="0.25">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z" fill="url(#paint0_linear)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="-8.39411" y="15.8291" width="116.727" height="92.2456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.16667"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="60.4167" y="-8.07558" width="47.9167" height="116.151" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.16667"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="49.9392" y1="0.257812" x2="49.9392" y2="99.7423" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/images/openmcp.png b/images/openmcp.png
index a6e7815..a0647be 100644
Binary files a/images/openmcp.png and b/images/openmcp.png differ
diff --git a/index.md b/index.md
index 675cf89..6fc8849 100644
--- a/index.md
+++ b/index.md
@@ -6,33 +6,51 @@ hero:
   name: "OpenMCP"
   text: "面向开发者的优雅 MCP 调试器和 SDK"
   tagline: 缩短从大语言模型到智能体的最后一公里
+  image:
+    src: /images/openmcp.png
+    alt: VitePress
 
   actions:
     - theme: brand
-      text: OpenMCP 客户端
+      text: OpenMCP 插件
       link: /markdown-examples
     - theme: alt
       text: openmcp-sdk
-      link: /api-examples
+      link: /sdk-tutorial
     - theme: alt
       text: GitHub
       link: https://github.com/LSTM-Kirigaya/openmcp-client
+features:
+  - icon:
+      src: /images/icons/vscode.svg
+      height: 48px
+      alt: 集成调试环境
+    title: 集成调试环境
+    details: 将检查器与 MCP 客户端功能相结合，实现无缝开发和测试
+  - icon:
+      src: /images/openmcp.png
+      height: 48px
+      alt: 提供完整的项目级控制面板
+    title: 全面的项目管理
+    details: 提供完整的项目级控制面板，实现高效的 MCP 项目监督
+  - icon:
+      src: /images/icons/openmcp-sdk.svg
+      height: 48px
+      alt: 提供完整的项目级控制面板
+    title: 完整的部署方案
+    details: 将测试完成的 agent 通过 openmcp-sdk 部署到您的应用或者服务器上
 ---
 
+<br><br>
 
 <BiliPlayer
   url="//player.bilibili.com/player.html?isOutside=true&aid=114445745397200&bvid=BV1zYGozgEHcautoplay=false"
   cover="https://picx.zhimg.com/80/v2-8c1f5d99066ed272554146ed8caf7cc3_1440w.png"
 />
 
-<br>
-<br>
-<br>
-<hr>
-<br>
 <br>
 
-# OpenMCP 为谁准备？
+## OpenMCP 为谁准备？
 
 <br>
 
@@ -48,7 +66,6 @@ hero:
   ]"
   image="/images/openmcp.chatbot.png"
 />
-
 <TwoSideLayout
   label="开源社区爱好者"
   :texts="[
@@ -60,7 +77,6 @@ hero:
   ]"
   image="/images/opensource.png"
 />
-
 <TwoSideLayout
   label="AI研发科学家"
   :texts="[
@@ -71,5 +87,5 @@ hero:
   ]"
   image="/images/openmcp.chatbot.png"
 />
-
 </KTab>
+
diff --git a/api-examples.md b/plugin-tutorial/index.md
similarity index 100%
rename from api-examples.md
rename to plugin-tutorial/index.md
diff --git a/preview/changelog.md b/preview/changelog.md
new file mode 100644
index 0000000..ff97b7c
--- /dev/null
+++ b/preview/changelog.md
@@ -0,0 +1,3 @@
+---
+layout: page
+---
\ No newline at end of file
diff --git a/preview/channel.md b/preview/channel.md
new file mode 100644
index 0000000..ff97b7c
--- /dev/null
+++ b/preview/channel.md
@@ -0,0 +1,3 @@
+---
+layout: page
+---
\ No newline at end of file
diff --git a/preview/join.md b/preview/join.md
new file mode 100644
index 0000000..f225708
--- /dev/null
+++ b/preview/join.md
@@ -0,0 +1,62 @@
+---
+layout: page
+---
+
+<script setup>
+import {
+  VPTeamPage,
+  VPTeamPageTitle,
+  VPTeamMembers
+} from 'vitepress/theme'
+
+const members = [
+  {
+    avatar: 'https://pic1.zhimg.com/v2-b4251de7d2499e942c7ebf447a90d2eb_xll.jpg?source=32738c0c',
+    name: 'LSTM-Kirigaya (锦恢)',
+    title: 'Creator & Developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/LSTM-Kirigaya' },
+      { icon: 'zhihu', link: 'https://www.zhihu.com/people/can-meng-zhong-de-che-xian' }
+    ]
+  },
+    {
+    avatar: 'https://avatars.githubusercontent.com/u/115577936?v=4',
+    name: 'AmeSoraQwQ (AmeZora)',
+    title: 'Creator & Operation',
+    links: [
+      { icon: 'github', link: 'https://github.com/AmeSoraQwQ' },
+      { icon: 'zhihu', link: 'https://www.zhihu.com/people/can-meng-zhong-de-che-xian' }
+    ]
+  },
+  {
+    avatar: 'https://avatars.githubusercontent.com/u/55867654?v=4',
+    name: 'li1553770945 (Li Yaning)',
+    title: 'Creator & Developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/li1553770945' },
+      { icon: 'zhihu', link: 'https://www.zhihu.com/people/can-meng-zhong-de-che-xian' }
+    ]
+  },
+    {
+    avatar: 'https://avatars.githubusercontent.com/u/8943691?v=4',
+    name: 'appli456',
+    title: 'Developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/appli456' },
+      { icon: 'zhihu', link: 'https://www.zhihu.com/people/can-meng-zhong-de-che-xian' }
+    ]
+  },
+]
+</script>
+
+<VPTeamPage>
+  <VPTeamPageTitle>
+    <template #title>
+      OpenMCP 贡献者列表
+    </template>
+    <template #lead>
+      OpenMCP 是一个非盈利的开源项目，它由对编程和AI技术热爱的开发者共同开发。我们欢迎任何有兴趣参与的开发者加入我们的项目中，一起努力提高AI技术的应用水平。
+    </template>
+  </VPTeamPageTitle>
+  <VPTeamMembers :members />
+</VPTeamPage>
\ No newline at end of file
diff --git a/sdk-tutorial/index.md b/sdk-tutorial/index.md
new file mode 100644
index 0000000..6bd8bb5
--- /dev/null
+++ b/sdk-tutorial/index.md
@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).