diff --git a/packages/devui-vue/docs/.vitepress/config/enNav.ts b/packages/devui-vue/docs/.vitepress/config/enNav.ts
index 4522ec9bd14315692f7e5bdfc21b4c25c737a0f7..3ef33ffec0cd3b702c4cf8109a8cfca87310ecba 100644
--- a/packages/devui-vue/docs/.vitepress/config/enNav.ts
+++ b/packages/devui-vue/docs/.vitepress/config/enNav.ts
@@ -1,8 +1,7 @@
 const enNav = [
-    { text: 'Design disciplines', link: '/en-US/design' },
-    { text: 'Component', link: '/en-US/' },
-    { text: 'Version history', link: '/en-US/version' },
-    { text: 'Theme', link: '/en-US/theme' },
-  ]
+  { text: 'Component', link: '/en-US/' },
+  { text: 'Version history', link: 'https://gitee.com/devui/vue-devui/releases' },
+  { text: 'Design disciplines', link: 'https://devui.design/design-cn/start' },
+]
   
   export default enNav
\ No newline at end of file
diff --git a/packages/devui-vue/docs/.vitepress/config/nav.ts b/packages/devui-vue/docs/.vitepress/config/nav.ts
index 25c08b19632cfbb61c573155ca4cb26f1fda2a02..8f723b036adfcb073cb968e58634e156302b8c3f 100644
--- a/packages/devui-vue/docs/.vitepress/config/nav.ts
+++ b/packages/devui-vue/docs/.vitepress/config/nav.ts
@@ -1,8 +1,7 @@
 const nav = [
-  { text: '设计规范', link: '/design' },
   { text: '组件', link: '/' },
-  { text: '版本历程', link: '/version' },
-  { text: '主题', link: '/theme' },
+  { text: '版本历程', link: 'https://gitee.com/devui/vue-devui/releases' },
+  { text: '设计规范', link: 'https://devui.design/design-cn/start' },
 ]
 
 export default nav
\ No newline at end of file
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue
index 77ad149f2adc20316f84c9ea9237fe04a1e44373..79b2a4c1d689c7afbba2dbdbb920a7c4358c44bc 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue
@@ -1,29 +1,32 @@
 <template>
   <transition name="fade">
-    <svg
+    <div
       v-if="show"
       class="go-to-top"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 49.484 28.284"
       @click="scrollToTop"
     >
-      <g transform="translate(-229 -126.358)">
-        <rect
-          fill="currentColor"
-          width="35"
-          height="5"
-          rx="2"
-          transform="translate(229 151.107) rotate(-45)"
-        />
-        <rect
-          fill="currentColor"
-          width="35"
-          height="5"
-          rx="2"
-          transform="translate(274.949 154.642) rotate(-135)"
-        />
-      </g>
-    </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 49.484 28.284"
+      >
+        <g transform="translate(-229 -126.358)">
+          <rect
+            fill="currentColor"
+            width="35"
+            height="5"
+            rx="2"
+            transform="translate(229 151.107) rotate(-45)"
+          />
+          <rect
+            fill="currentColor"
+            width="35"
+            height="5"
+            rx="2"
+            transform="translate(274.949 154.642) rotate(-135)"
+          />
+        </g>
+      </svg>
+    </div>
   </transition>
 </template>
 
@@ -77,9 +80,11 @@ export default defineComponent({
 .go-to-top {
   cursor: pointer;
   position: fixed;
+  display: flex;
   bottom: 2rem;
   right: 2.5rem;
   width: 2rem;
+  height: 28px;
   color: var(--devui-brand);
   z-index: 1;
 }
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
index a1fc72290c4fe3620b4305260ccacf2df4a1cb9f..7bf7af5888231d0c5e673666dc7074df1cc48b08 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import Theme from '@devui/theme/theme'
-import { Switch as DSwitch } from '@devui/switch'
 import NavBarTitle from './NavBarTitle.vue'
 import NavLinks from './NavLinks.vue'
 import ToggleSideBarButton from './ToggleSideBarButton.vue'
+import DarkMode from './icons/DarkMode.vue'
+import LightMode from './icons/LightMode.vue'
+import ZhLang from './icons/ZhLang.vue'
+import EnLang from './icons/EnLang.vue'
 
-const theme = new Theme("light");
+const theme = new Theme('light')
 
-const darkMode = ref(false);
-const switchText = ref("浅色");
+const darkMode = ref(false)
 
 const defaultLanguage = ref(localStorage.getItem('preferred_lang'))
 function useTranslation (target){
@@ -26,11 +28,9 @@ watch(
   () => darkMode.value,
   (darkMode, prevDarkMode) => {
     theme.applyTheme(darkMode ? 'dark' : 'light')
-    switchText.value = darkMode ? '深色' : '浅色'
   }
 )
 
-
 defineEmits(['toggle'])
 </script>
 
@@ -47,12 +47,18 @@ defineEmits(['toggle'])
         <NavLinks />
       </div>
 
-      <div class="flex items-center ml-xs mt-xxs">
-        <d-switch v-model:checked="darkMode" size="sm"></d-switch>
-        <span style="font-size:0.9rem;" class="mb-xxs">{{ switchText }}</span>
-      </div>
-      <div style="margin-left: 10px" @click="() => useTranslation( defaultLanguage === 'zh-CN' ? 'en-US' : 'zh-CN' )">
-        {{defaultLanguage === 'zh-CN' ? '中文' : 'English'}}
+      <div class="custom-nav flex items-center ml-l">
+        <div class="custom-nav-item ml-m" style="font-size: 0;" @click="() => useTranslation( defaultLanguage === 'zh-CN' ? 'en-US' : 'zh-CN' )">
+          <ZhLang v-if="defaultLanguage === 'zh-CN'"></ZhLang>
+          <EnLang v-else></EnLang>
+        </div>
+        <div class="custom-nav-item flex items-center ml-m">
+          <DarkMode v-if="darkMode" @click="darkMode = !darkMode"></DarkMode>
+          <LightMode v-else @click="darkMode = !darkMode"></LightMode>
+        </div>
+        <a class="ml-m" style="font-size: 0;" href="https://gitee.com/devui/vue-devui/stargazers">
+          <img :src="`https://gitee.com/devui/vue-devui/badge/star.svg?theme=${darkMode ? 'dark' : 'white'}`" alt="star" />
+        </a>
       </div>
     </div>
 
@@ -96,4 +102,14 @@ defineEmits(['toggle'])
     display: block;
   }
 }
+
+.custom-nav svg {
+  fill: $devui-text;
+}
+
+.custom-nav-item:hover {
+  svg, path {
+    fill: $devui-brand;
+  }
+}
 </style>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavLink.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavLink.vue
index 734fa3309d3f268424476499c58cef61332cd052..2cfcac57901f5c6f533c12b4821b6aeedda225c8 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavLink.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavLink.vue
@@ -28,7 +28,7 @@ const { props: linkProps, isExternal } = useNavLink(propsRefs.item)
   display: block;
   padding: 0 1.5rem;
   line-height: 36px;
-  font-size: 1rem;
+  font-size: 1rem !important;
   font-weight: 600;
   color: $devui-text;
   white-space: nowrap;
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue
index e826aca45fad7b8730abb224dba41935cf74bd7f..13d585222f4ce9036d8ad149d2b2b4bd158046b6 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue
@@ -61,6 +61,7 @@ const { hasLinks, prev, next } = useNextAndPrevLinks()
   max-width: 100%;
   font-size: 1rem;
   font-weight: 500;
+  text-decoration: none;
 }
 
 .text {
@@ -77,12 +78,13 @@ const { hasLinks, prev, next } = useNextAndPrevLinks()
   height: 16px;
   fill: var(--c-text);
   transform: translateY(1px);
+  margin-top: -2px;
 }
 
 .icon-prev {
-  margin-right: 8px;
+  margin-right: 6px;
 }
 .icon-next {
-  margin-left: 8px;
+  margin-left: 6px;
 }
 </style>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue
index ecd6c29a7224997545cc58de04ca5650fd35e086..11236979eeb6a3d2f25d028c242d6f47b20939ba 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue
@@ -30,13 +30,13 @@ useActiveSidebarLinks(container, marker)
 
 <style scoped lang="scss">
 @import '@devui/styles-var/devui-var';
+
 //内容区导航样式
 .devui-content-nav {
-  width: 240px;
+  width: 200px;
   position: fixed;
   top: 50px;
   right: 0;
-  height: 90%;
   z-index: 1;
 
   .devui-fast-forward {
@@ -82,10 +82,11 @@ useActiveSidebarLinks(container, marker)
       }
     }
   }
-}
 
-.active {
-  color: $devui-link !important;
+  .devui-link:hover, .devui-link.active {
+    color: $devui-brand;
+    text-decoration: none;
+  }
 }
 
 @media (max-width: 1800px) {
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ArrowLeft.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ArrowLeft.vue
index 3f65b866a9e402815809b2f92ce3cd5c97642499..58221ccab48ed7ed24761a79971dc1de6c78f91e 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ArrowLeft.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ArrowLeft.vue
@@ -1,7 +1,18 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <svg
+    t="1637469990202"
+    class="icon"
+    viewBox="0 0 1056 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="5081"
+    width="16"
+    height="16"
+  >
     <path
-      d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"
-    />
+      d="M277.92 512.064c0 8.128 3.072 16.224 9.28 22.4l362.336 362.336a31.808 31.808 0 0 0 45.12-0.128 31.904 31.904 0 0 0 0.128-45.12L355.2 512 694.72 172.448a31.808 31.808 0 0 0-0.128-45.12 31.904 31.904 0 0 0-45.12-0.128L287.232 489.536a31.616 31.616 0 0 0-9.312 22.4l0.032 0.128z"
+      fill="var(--devui-brand, #5e7ce0)"
+      p-id="5082"
+    ></path>
   </svg>
 </template>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ArrowRight.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ArrowRight.vue
index ed89263f76efe5edcbaad14cf28535fec2c5a32d..ac675013239f710b6903b1c882f4167da664de98 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ArrowRight.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ArrowRight.vue
@@ -1,7 +1,18 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <svg
+    t="1637469947735"
+    class="icon"
+    viewBox="0 0 1056 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="4917"
+    width="16"
+    height="16"
+  >
     <path
-      d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"
-    />
+      d="M746.08 512.064a31.584 31.584 0 0 1-9.28 22.4L374.464 896.8a31.808 31.808 0 0 1-45.12-0.128 31.904 31.904 0 0 1-0.128-45.12L668.8 512 329.28 172.448a31.808 31.808 0 0 1 0.128-45.12 31.904 31.904 0 0 1 45.12-0.128l362.304 362.336c6.208 6.176 9.28 14.272 9.312 22.4l-0.032 0.128z"
+      fill="var(--devui-brand, #5e7ce0)"
+      p-id="4918"
+    ></path>
   </svg>
 </template>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/DarkMode.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/DarkMode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6608138feb975fc434d8fe508d7b49a49a6d9cbb
--- /dev/null
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/DarkMode.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    t="1637462121243"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="1089"
+    width="18"
+    height="18"
+  >
+    <path
+      d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.781333 477.781333 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z"
+      p-id="1090"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/EnLang.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/EnLang.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8dd141aaa9d71822a97398d54937c25330a59abe
--- /dev/null
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/EnLang.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    t="1637468121699"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="3708"
+    width="18"
+    height="18"
+  >
+    <path
+      d="M1023.999097 511.999097c0 282.772189-229.226908 512.000903-511.999097 512.000903C229.227811 1024 0.000903 794.771286 0.000903 511.999097S229.227811 0 511.998194 0C794.772189 0 1023.999097 229.226908 1023.999097 511.999097zM511.998194 76.802122c-240.3532 0-435.195168 194.841968-435.195169 435.195169 0 240.355006 194.841968 435.196975 435.195169 435.196974 240.355006 0 435.196975-194.841968 435.196974-435.196974 0-240.351394-194.841968-435.195168-435.196974-435.195169z"
+      p-id="3709"
+    ></path>
+    <path
+      d="M197.680437 727.549335V308.279575h310.873302v70.910245H282.319732v92.980402H492.808952v70.659181H282.319732v114.062557h234.255414v70.657375H197.714755zM827.446642 727.549335h-80.351338v-155.002256c0-32.799081-1.726743-54.027541-5.129654-63.654674a44.564774 44.564774 0 0 0-16.761687-22.435012 47.673272 47.673272 0 0 0-27.891592-8.019601c-13.91509 0-26.35992 3.802085-37.450088 11.45683-11.057656 7.611395-18.670858 17.713563-22.731232 30.306503-4.10553 12.594746-6.153779 35.880486-6.153779 69.78136v137.56685h-80.353143V423.817812h74.641887v44.620767c26.506224-34.334365 59.852589-51.468133 100.080638-51.468133 17.756912 0 33.935191 3.186166 48.610699 9.55669 14.688151 6.404843 25.812637 14.529204 33.321078 24.45075 7.542759 9.91974 12.811492 21.159824 15.73395 33.75457 2.933295 12.594746 4.436067 30.602722 4.436067 54.07089l-0.001806 188.745989z"
+      p-id="3710"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/LightMode.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/LightMode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..502e12bc9188fe3959201da763bb3a43dc5a553b
--- /dev/null
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/LightMode.vue
@@ -0,0 +1,46 @@
+<template>
+  <svg
+    t="1637462162633"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="1225"
+    width="20"
+    height="20"
+  >
+    <path d="M512 512m-256 0a256 256 0 1 0 512 0 256 256 0 1 0-512 0Z" p-id="1226"></path>
+    <path
+      d="M512 128m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"
+      p-id="1227"
+    ></path>
+    <path
+      d="M512 896m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"
+      p-id="1228"
+    ></path>
+    <path
+      d="M896 512m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"
+      p-id="1229"
+    ></path>
+    <path
+      d="M128 512m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"
+      p-id="1230"
+    ></path>
+    <path
+      d="M234.666667 234.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
+      p-id="1231"
+    ></path>
+    <path
+      d="M789.333333 789.333333m-42.666666 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
+      p-id="1232"
+    ></path>
+    <path
+      d="M789.333333 234.666667m-42.666666 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
+      p-id="1233"
+    ></path>
+    <path
+      d="M234.666667 789.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
+      p-id="1234"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ZhLang.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ZhLang.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50ff11a057a98b9947d96e06d6b1005de1754459
--- /dev/null
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/icons/ZhLang.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    t="1637468144898"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="3873"
+    width="18"
+    height="18"
+  >
+    <path
+      d="M1023.999097 512.006322c0 282.763158-229.223295 511.991872-511.997291 511.991872C229.240454 1024 0.000903 794.771286 0.000903 512.006322 0.000903 229.228714 229.240454 0 512 0 794.773995 0 1023.999097 229.228714 1023.999097 512.006322zM512 76.793091c-240.351394 0-435.195168 194.845581-435.195168 435.213231 0 240.3532 194.843775 435.200587 435.195168 435.200587 240.362231 0 435.207812-194.847387 435.207812-435.200587 0-240.36765-194.845581-435.213231-435.207812-435.213231z"
+      p-id="3874"
+    ></path>
+    <path
+      d="M555.22998 330.203429v-107.99909h-68.193695v108.038826H263.435741v273.464757h223.60235v210.97148H555.231787V603.707922h224.223688V330.203429H555.22998z m-68.191889 209.065921h-157.3395v-144.603869h157.3395v144.603869z m226.129247 0h-157.960838v-144.603869h157.960838v144.603869z"
+      p-id="3875"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss b/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss
index 2c5b027aafb22ee82e0756b463c84dc2b87bfea2..172bcdc5627c9c59eabce77780492cfaf88ec11f 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss
@@ -8,7 +8,7 @@
 
 html {
   line-height: 1.4;
-  font-size: 16px;
+  font-size: 14px;
   -webkit-text-size-adjust: 100%;
 }
 
@@ -19,7 +19,7 @@ body {
   min-height: 100vh;
   line-height: 1.4;
   font-family: var(--font-family-base);
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   color: $devui-text;
   background-color: $devui-base-bg;
@@ -77,7 +77,7 @@ h1 {
 
 @media screen and (min-width: 420px) {
   h1 {
-    font-size: 2.2rem;
+    font-size: 1.8rem;
   }
 }
 
@@ -97,7 +97,7 @@ h2 + h3 {
 
 h3 {
   margin-top: 2rem;
-  font-size: 1.35rem;
+  font-size: 1.15rem;
 }
 
 h4 {