diff --git a/docs/.vitepress/config/en-US.js b/docs/.vitepress/config/en-US.js
index c8272640..37212064 100644
--- a/docs/.vitepress/config/en-US.js
+++ b/docs/.vitepress/config/en-US.js
@@ -39,8 +39,11 @@ export default defineConfig({
         ]
       },
       {
-        text: `V${pkg.version}`,
-        items: [{ text: 'V8 Docs', link: 'https://v8.klinecharts.com' }]
+        text: 'Next',
+        items: [
+          { text: 'V9 Docs', link: 'https://v9.klinecharts.com/en-US' },
+          { text: 'V8 Docs', link: 'https://v8.klinecharts.com' }
+        ]
       },
     ],
     sidebar: {
diff --git a/docs/.vitepress/config/zh-CN.js b/docs/.vitepress/config/zh-CN.js
index baedd855..8b02dd02 100644
--- a/docs/.vitepress/config/zh-CN.js
+++ b/docs/.vitepress/config/zh-CN.js
@@ -43,8 +43,11 @@ export default defineConfig({
         ]
       },
       {
-        text: `V${pkg.version}`,
-        items: [{ text: 'V8 文档', link: 'https://v8.klinecharts.com/zh-CN' }]
+        text: 'Next',
+        items: [
+          { text: 'V9 文档', link: 'https://v9.klinecharts.com' },
+          { text: 'V8 文档', link: 'https://v8.klinecharts.com/zh-CN' }
+        ]
       },
     ],
     sidebar: {
diff --git a/docs/@components/Chart.vue b/docs/@components/Chart.vue
index 48b4ed3a..a712adbd 100644
--- a/docs/@components/Chart.vue
+++ b/docs/@components/Chart.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watch, defineProps } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useData } from 'vitepress';
 
 import { transform } from '@babel/standalone'
diff --git a/docs/@components/CodeHighlight.vue b/docs/@components/CodeHighlight.vue
index a8d96fdf..b47e36b1 100644
--- a/docs/@components/CodeHighlight.vue
+++ b/docs/@components/CodeHighlight.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, defineProps } from 'vue'
+import { onMounted, ref } from 'vue'
 import { codeToHtml } from 'shiki'
 
 const props = defineProps(['code', 'width'])
@@ -31,7 +31,7 @@ onMounted(async () => {
 .code-highlight {
   display: flex;
   flex-direction: column;
-  border-radius: 12px;
+  border-radius: 8px;
   border: solid 1px var(--vp-c-gutter);
   background-color: var(--vp-code-block-bg)!important;
 }
diff --git a/docs/@components/Tooltip.vue b/docs/@components/Tooltip.vue
index 333a635a..def76c8c 100644
--- a/docs/@components/Tooltip.vue
+++ b/docs/@components/Tooltip.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { defineProps } from 'vue'
-
 const props = defineProps(['tip'])
 </script>
 
diff --git a/docs/@views/Banner.vue b/docs/@views/Banner.vue
index db60c937..bd84f9be 100644
--- a/docs/@views/Banner.vue
+++ b/docs/@views/Banner.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="banner" role="banner" v-if="isVisible">
-    <span v-if="lang === 'zh-CN'">🎉&nbsp;🎉&nbsp;🎉&nbsp;&nbsp;新版本即将发布，旧版文档请访问 <strong><a target="_blank" href="https://v9.klinecharts.com">这里</a></strong>。</span>
-    <span v-else>🎉&nbsp;🎉&nbsp;🎉&nbsp;&nbsp;The new version is about to be released, please visit <strong><a target="_blank" href="https://v9.klinecharts.com">here</a></strong> for the old version document.</span>
+  <div class="banner" :class="{ 'top': y === 0 }" role="banner" v-if="isVisible">
+    <span v-if="lang === 'zh-CN'">🎉&nbsp;🎉&nbsp;🎉&nbsp;&nbsp;新版本即将发布。9.x 版本请访问 <strong><a target="_blank" href="https://v9.klinecharts.com">文档</a></strong>。</span>
+    <span v-else>🎉&nbsp;🎉&nbsp;🎉&nbsp;&nbsp;The new version is about to be released. Version 9.x please visit <strong><a target="_blank" href="https://v9.klinecharts.com">document</a></strong>.</span>
     <button class="banner-close" @click.prevent="closeBanner">
       <span class="close">&times;</span>
     </button>
@@ -10,8 +10,11 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { useWindowScroll } from '@vueuse/core'
 import { useData } from 'vitepress'
 
+const { y } = useWindowScroll()
+
 const isVisible = ref(true)
 
 const { lang } = useData()
@@ -42,13 +45,18 @@ onMounted(() => {
   z-index: 61;
   width: 100%;
   height: 100%;
-  height: 50px;
-  background: var(--vp-c-bg);
+  height: var(--vp-layout-top-height);
+  background-color: var(--vp-c-bg);
   overflow: hidden;
   margin: 0;
   color: var(--vp-c-indigo-1);
   font-size: 14px;
   border-bottom: solid 1px var(--vp-c-gutter);
+  transition: background-color 0.15s;
+}
+
+.banner.top {
+   background-color: transparent;
 }
 
 .banner-close {
@@ -76,19 +84,6 @@ onMounted(() => {
 
 <style>
 html.banner-fixed {
-  --vp-layout-top-height: 50px;
-}
-html.banner-fixed .VPNav,
-html.banner-fixed .VPSidebar {
-  top: 50px;
-}
-html.banner-fixed {
-  margin-top: 52px;
-}
-@media (max-width: 960px) {
-  html.banner-fixed .VPNav,
-  html.banner-fixed .VPSidebar {
-    top: 0;
-  }
+  --vp-layout-top-height: 50px
 }
 </style>
diff --git a/docs/@views/Layout.vue b/docs/@views/Layout.vue
index 2440f255..7dfe6025 100644
--- a/docs/@views/Layout.vue
+++ b/docs/@views/Layout.vue
@@ -48,9 +48,9 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }) => {
 
 <template>
   <DefaultTheme.Layout>
-    <!-- <template #layout-top>
+    <template #layout-top>
       <Banner/>
-    </template> -->
+    </template>
     <template #home-hero-before>
       <HomeHero/>
     </template>
diff --git a/docs/@views/customize/FeatureList.vue b/docs/@views/customize/FeatureList.vue
index fcf95233..de70f068 100644
--- a/docs/@views/customize/FeatureList.vue
+++ b/docs/@views/customize/FeatureList.vue
@@ -11,8 +11,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
-
 const props = defineProps(['features'])
 
 </script>
diff --git a/docs/@views/home/CreateChart.vue b/docs/@views/home/CreateChart.vue
index 46eebdeb..b1abb314 100644
--- a/docs/@views/home/CreateChart.vue
+++ b/docs/@views/home/CreateChart.vue
@@ -37,7 +37,7 @@ fetch('/data/kline.json').then(res => {
         </CodeHighlight>
       </div>
       <div class="chart-container">
-        <span class="title" style="height: 58px;">
+        <span class="title">
           <span class="address">
             <svg
               width="14"
@@ -48,7 +48,7 @@ fetch('/data/kline.json').then(res => {
             &nbsp;https://klinecharts.com/sample/basic
           </span>
         </span>
-        <Chart :js="code" height="360px"/>
+        <Chart :js="code" height="324px"/>
       </div>
     </div>
   </Section>
@@ -71,10 +71,10 @@ fetch('/data/kline.json').then(res => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
   padding: 0 20px;
-  height: 46px;
+  height: 52px;
   color: var(--vp-c-text-2);
   background-color: var(--vp-c-bg-soft);
   border-bottom: solid 1px var(--vp-c-gutter);
@@ -86,10 +86,9 @@ fetch('/data/kline.json').then(res => {
 
 .chart-container {
   width: 100%;
-  border-radius: 12px;
+  border-radius: 8px;
   border: solid 1px var(--vp-c-gutter);
   background-color: var(--vp-code-block-bg);
-  padding-bottom: 6px;
 }
 
 .address {
diff --git a/docs/@views/home/FAQ.vue b/docs/@views/home/FAQ.vue
index a2e8cfd5..b7edb9d1 100644
--- a/docs/@views/home/FAQ.vue
+++ b/docs/@views/home/FAQ.vue
@@ -136,6 +136,7 @@ watch(lang, (newLang) => {
   width: 100%;
   background-color: var(--vp-c-bg-soft);
   padding: 16px 26px;
+  border-radius: 8px;
   color: var(--vp-c-text-1);
 }
 
diff --git a/docs/@views/home/Section.vue b/docs/@views/home/Section.vue
index 34071e3e..7fa02ed4 100644
--- a/docs/@views/home/Section.vue
+++ b/docs/@views/home/Section.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps } from 'vue'
 const props = defineProps(['title', 'subTitle'])
 
 </script>
diff --git a/docs/@views/home/Sponsor.vue b/docs/@views/home/Sponsor.vue
index 44e317c6..44467511 100644
--- a/docs/@views/home/Sponsor.vue
+++ b/docs/@views/home/Sponsor.vue
@@ -48,11 +48,11 @@
     :subTitle="lang === 'zh-CN' ? '维护这样一个图表和开发新功能需要巨大精力，只有在我们的赞助者慷慨的财务支持下才得以持续。' : 'Maintaining such a chart and developing new features requires tremendous effort, which can only be sustained with the generous financial support of our sponsors.'">
     <div class="sponsor">
       <div class="sponsor-grid sponsor-top-grid">
-        <a class="sponsor-grid-item item-no1" :href="sponsors[0].website" target="_blank" rel="noreferrer">
+        <a class="sponsor-grid-item item-no2-no3" :href="sponsors[0].website" target="_blank" rel="noreferrer">
           <img class="image" :src="sponsors[0].logo"/>
           <span class="text" v-if="!!sponsors[0].text">{{ sponsors[0].text }}</span>
         </a>
-        <a class="sponsor-grid-item item-no1" :href="sponsors[1].website" target="_blank" rel="noreferrer">
+        <a class="sponsor-grid-item item-no2-no3" :href="sponsors[1].website" target="_blank" rel="noreferrer">
           <img class="image" :src="sponsors[1].logo"/>
           <span class="text" v-if="!!sponsors[1].text">{{ sponsors[1].text }}</span>
         </a>
@@ -106,7 +106,7 @@
   .sponsor-grid {
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
+    gap: 12px;
   }
 
   .sponsor-grid-item {
@@ -116,7 +116,7 @@
     width: 100%;
     color: var(--vp-c-text-2)!important;
     background-color: var(--vp-c-bg-soft);
-    border-radius: 4px;
+    border-radius: 8px;
     transition: background-color .2s;
     cursor: pointer;
     color: inherit;
@@ -129,7 +129,7 @@
   }
 
   .sponsor-top-grid .item-no1 {
-    height: 160px;
+    height: 200px;
     font-size: 16px;
   }
 
@@ -190,6 +190,9 @@
   }
 
   @media (min-width: 640px) {
+    .sponsor-grid {
+      gap: 20px;
+    }
     .sponsor-platinum-grid .item {
       width: calc((100% - 12px) / 3);
     }
@@ -201,7 +204,12 @@
 
   @media (min-width: 960px) {
     .sponsor-top-grid .item-no2-no3 {
-      width: calc((100% - 6px) / 2);
+      width: calc((100% - 20px) / 2);
+      height: 200px;
+    }
+
+    .sponsor-top-grid .item-no2-no3 .image {
+      height: 72px;
     }
 
     .sponsor-platinum-grid .item {
diff --git a/docs/@views/sample/Chart.vue b/docs/@views/sample/Chart.vue
index d0172f9c..57bebfb1 100644
--- a/docs/@views/sample/Chart.vue
+++ b/docs/@views/sample/Chart.vue
@@ -1,93 +1,21 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watch, defineProps } from 'vue'
+import { ref } from 'vue'
 import { useData } from 'vitepress';
 
 import stackBlitz from '@stackblitz/sdk'
 import { getParameters } from 'codesandbox/lib/api/define'
 
-import { transform } from '@babel/standalone'
+import Chart from '../../@components/Chart.vue';
 
-import ResizeObserver from 'resize-observer-polyfill'
-
-const { isDark, lang } = useData()
+const { lang } = useData()
 
 import Tooltip from '../../@components/Tooltip.vue'
-import Loading from '../../@components/Loading.vue'
 
 const href = ref()
 
 const props = defineProps(['js', 'css', 'html', 'title', 'description'])
 
 const version = ref('9.5.0')
-const loading = ref(true)
-
-let observer
-
-onMounted(() => {
-  href.value = location.href
-  loading.value = true
-  const container = document.getElementById('container')
-  const coreScript = document.createElement('script')
-  coreScript.defer = true
-  coreScript.src = 'https://unpkg.com/klinecharts/dist/umd/klinecharts.min.js'
-  coreScript.onload = () => {
-    const klinecharts = window.klinecharts
-    if (klinecharts) {
-      version.value = klinecharts.version()
-      
-      if (props.css) {
-        const style = document.createElement('style')
-        style.setAttribute('type', 'text/css')
-        style.innerHTML = props.css
-        container.appendChild(style)
-      }
-      if (props.js) {
-        const transformJs = props.js + '\n' + 'window.chart = chart'
-        const { code } = transform(transformJs,  {
-          presets: [
-          'es2015',
-            ['stage-3', { decoratorsBeforeExport: true }],
-          ],
-          plugins: ['transform-modules-umd'],
-        })
-
-        const chartDom = document.createElement('div')
-        chartDom.style.height = '430px'
-        chartDom.id = 'k-line-chart'
-        container.appendChild(chartDom)
-        const script = document.createElement('script')
-        script.innerHTML = code
-        container.appendChild(script)
-        window.chart.setStyles(isDark.value ? 'dark' : 'light')
-
-        observer = new ResizeObserver(entries => {
-          window.chart.resize()
-        })
-        observer.observe(container)
-      }
-      loading.value = false
-    }
-  }
-  container.appendChild(coreScript)
-})
-
-watch(isDark, (newValue) => {
-  if (newValue) {
-    window.chart.setStyles('dark')
-  } else {
-    window.chart.setStyles('light')
-  }
-})
-
-onUnmounted(() => {
-  const container = document.getElementById('container')
-  if (observer && container) {
-    observer.unobserve(container)
-  }
-  if (window.klinecharts) {
-    window.klinecharts.dispose('k-line-chart')
-  }
-})
 
 function openStackBlitz () {
   const files = {
@@ -153,9 +81,7 @@ function getCodeSandboxParameters () {
 
 <template>
   <div class="chart sample-chart">
-    <div id="container" class="chart-container">
-      <Loading v-if="loading"/>
-    </div>
+    <Chart :js="props.js" :css="props.css"/>
     <div class="code-action-container">
       <form
         action="https://codesandbox.io/api/v1/sandboxes/define"
diff --git a/package.json b/package.json
index 51b7b19c..c9657543 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@rollup/pluginutils": "^5.1.0",
     "@stackblitz/sdk": "^1.9.0",
     "@types/node": "^20.12.7",
-    "shiki": "^1.22.1",
+    "@vueuse/core": "^11.1.0",
     "chalk": "^5.3.0",
     "codesandbox": "^2.2.3",
     "cross-env": "^7.0.3",
@@ -81,8 +81,9 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^4.21.3",
     "rollup-plugin-filesize": "^10.0.0",
+    "shiki": "^1.22.1",
     "tslib": "^2.6.2",
     "typescript": "^5.5.4",
-    "vitepress": "^1.3.4"
+    "vitepress": "^1.4.1"
   }
 }