diff --git a/docs/.vitepress/components/DropdownMenu.vue b/docs/.vitepress/components/DropdownMenu.vue
index 1cff16dfa..e4e19869d 100644
--- a/docs/.vitepress/components/DropdownMenu.vue
+++ b/docs/.vitepress/components/DropdownMenu.vue
@@ -13,6 +13,7 @@ defineProps<{
 </script>
 
 <template>
+  <!-- eslint-disable vue/prefer-separate-static-class -->
   <DropdownMenuRoot>
     <DropdownMenuTrigger class="text-muted-foreground hover:text-foreground data-[state=open]:text-foreground mx-0 h-full inline-flex items-center justify-between px-2 py-2 text-nowrap text-sm font-semibold md:mx-3 md:px-0">
       <slot name="trigger">
@@ -36,7 +37,11 @@ defineProps<{
             :initial="{ opacity: 0, y: -10 }"
             :animate="{ opacity: 1, y: 0 }"
             :exit="{ opacity: 0, y: -10 }"
-            class="border-muted z-10 border rounded-lg bg-white/60 p-2 shadow-sm backdrop-blur-md transition-shadow duration-200 ease-in-out dark:bg-neutral-800/30 focus:shadow-lg hover:shadow-lg"
+            class="z-20 border rounded-xl p-2 shadow-md backdrop-blur-md"
+            :class="[
+              'bg-white/20 dark:border-white/5 dark:bg-black/20',
+              'transition-colors duration-200 ease-in-out',
+            ]"
           >
             <DropdownMenuItem
               v-for="item in items"
diff --git a/docs/.vitepress/components/Home.vue b/docs/.vitepress/components/Home.vue
index 4c16710d8..be95ecbe7 100644
--- a/docs/.vitepress/components/Home.vue
+++ b/docs/.vitepress/components/Home.vue
@@ -22,13 +22,34 @@ const { t } = useI18n()
         <div class="relative z-10 w-full flex justify-center gap-4">
           <a
             href="https://github.com/moeru-ai/airi/releases/latest"
-            class="rounded-lg bg-primary/60 px-4 py-2 text-slate-100 font-extrabold outline-none backdrop-blur-md dark:bg-primary/30 dark:text-cyan-200 focus:outline-none"
+            :class="[
+              'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
+              'text-slate-700 dark:text-cyan-200',
+            ]"
+            bg="primary/20 dark:primary/30 dark:hover:primary/40"
+            transition="colors,transform duration-200 ease-in-out"
+          >
+            {{ t('docs.theme.home.try-live.title') }}
+          </a>
+          <a
+            href="https://github.com/moeru-ai/airi/releases/latest"
+            :class="[
+              'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
+              'text-slate-700 dark:text-slate-100',
+            ]"
+            bg="black/4 dark:white/20 dark:hover:white/30"
+            transition="colors,transform duration-200 ease-in-out"
           >
             {{ t('docs.theme.home.download.title') }}
           </a>
           <a
-            href="./overview/"
-            class="rounded-lg bg-white/60 px-4 py-2 text-slate-900 font-extrabold outline-none backdrop-blur-md dark:bg-white/20 dark:text-slate-100 focus:outline-none"
+            href="./docs/overview/"
+            :class="[
+              'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
+              'text-slate-700 dark:text-slate-100',
+            ]"
+            bg="black/4 dark:white/20 dark:hover:white/30"
+            transition="colors,transform duration-200 ease-in-out"
           >
             {{ t('docs.theme.home.get-started.title') }}
           </a>
diff --git a/docs/.vitepress/components/Navbar.vue b/docs/.vitepress/components/Navbar.vue
index d3dec51d1..32c1d7773 100644
--- a/docs/.vitepress/components/Navbar.vue
+++ b/docs/.vitepress/components/Navbar.vue
@@ -31,6 +31,7 @@ function isNavLinkActive(link: string, path: string) {
 </script>
 
 <template>
+  <!-- eslint-disable vue/prefer-separate-static-class -->
   <nav class="items-center hidden lg:flex">
     <template
       v-for="nav in theme.nav"
@@ -92,7 +93,11 @@ function isNavLinkActive(link: string, path: string) {
           side="bottom"
           :side-offset="5"
           align="end"
-          class="bg-card will-change-[transform,opacity] border-muted data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-sm focus:shadow-lg"
+          class="will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-md backdrop-blur-md"
+          :class="[
+            'bg-white/20 dark:border-white/5 dark:bg-black/20',
+          ]"
+          transition="colors duration-200 ease-in-out"
         >
           <nav class="flex flex-col">
             <template
@@ -110,19 +115,32 @@ function isNavLinkActive(link: string, path: string) {
               </DropdownMenuItem>
 
               <DropdownMenuSub v-else-if="nav.items">
-                <DropdownMenuSubTrigger class="text-muted-foreground h-full w-full inline-flex items-center justify-between rounded p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary">
+                <DropdownMenuSubTrigger
+                  class="text-muted-foreground h-full w-full inline-flex cursor-pointer items-center justify-between rounded-lg p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary"
+                  :class="[
+                    'transition-all duration-200 ease-in-out',
+                  ]"
+                >
                   <span>{{ nav.text }}</span>
                   <Icon icon="lucide:chevron-down" class="ml-1 text-lg" />
                 </DropdownMenuSubTrigger>
 
                 <DropdownMenuPortal>
                   <DropdownMenuSubContent
-                    class="border-muted will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl bg-white/60 p-2 shadow-sm backdrop-blur-md transition-shadow duration-200 ease-in-out dark:bg-neutral-800/30 focus:shadow-lg"
+                    class="will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-md backdrop-blur-md"
+                    :class="[
+                      'bg-white/20 dark:border-white/5 dark:bg-black/70',
+                      'transition-all duration-200 ease-in-out',
+                    ]"
                   >
                     <DropdownMenuItem
                       v-for="item in nav.items"
                       :key="item.text"
-                      class="text-muted-foreground h-full w-full inline-flex items-center rounded p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary"
+                      class="text-muted-foreground h-full w-full inline-flex items-center rounded-lg p-2 text-sm font-semibold hover:text-primary"
+                      :class="[
+                        'hover:bg-primary/10',
+                        'transition-all duration-200 ease-in-out',
+                      ]"
                     >
                       <a
                         v-if="item.link"
diff --git a/docs/.vitepress/components/NavbarLanguageSubMenu.vue b/docs/.vitepress/components/NavbarLanguageSubMenu.vue
index f8c18890b..21e72be72 100644
--- a/docs/.vitepress/components/NavbarLanguageSubMenu.vue
+++ b/docs/.vitepress/components/NavbarLanguageSubMenu.vue
@@ -22,18 +22,34 @@ const languages = computed(() => {
 </script>
 
 <template>
+  <!-- eslint-disable vue/prefer-separate-static-class -->
   <DropdownMenuSub>
-    <DropdownMenuSubTrigger class="text-muted-foreground h-full w-full inline-flex items-center justify-between rounded p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary">
+    <DropdownMenuSubTrigger
+      class="text-muted-foreground h-full w-full inline-flex cursor-pointer items-center justify-between rounded-lg p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary"
+      :class="[
+        'transition-all duration-200 ease-in-out',
+      ]"
+    >
       <span>{{ t('docs.theme.navbar.language.title') }}</span>
       <Icon icon="lucide:chevron-down" class="ml-1 text-lg" />
     </DropdownMenuSubTrigger>
 
     <DropdownMenuPortal>
-      <DropdownMenuSubContent class="border-muted bg-card will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_green7]">
+      <DropdownMenuSubContent
+        class="will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-md backdrop-blur-md"
+        :class="[
+          'bg-white/20 dark:border-white/5 dark:bg-black/70',
+          'transition-all duration-200 ease-in-out',
+        ]"
+      >
         <DropdownMenuItem
           v-for="item in languages"
           :key="item.text"
-          class="text-muted-foreground h-full w-full inline-flex items-center rounded p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary"
+          class="text-muted-foreground h-full w-full inline-flex items-center rounded-lg p-2 text-sm font-semibold hover:text-primary"
+          :class="[
+            'hover:bg-primary/10',
+            'transition-all duration-200 ease-in-out',
+          ]"
         >
           <a
             v-if="item.link"
diff --git a/docs/.vitepress/custom/Layout.vue b/docs/.vitepress/custom/Layout.vue
index 941389fb0..78bdde6a1 100644
--- a/docs/.vitepress/custom/Layout.vue
+++ b/docs/.vitepress/custom/Layout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useScroll } from '@vueuse/core'
 import { TooltipProvider } from 'reka-ui'
-import { useData } from 'vitepress'
+import { useData, withBase } from 'vitepress'
 import { computed, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -36,7 +36,7 @@ watch(lang, () => locale.value = lang.value, { immediate: true })
         <div class="mx-auto max-w-[1440px] flex items-center justify-between px-6">
           <div class="w-full flex items-center justify-between gap-8 md:justify-normal">
             <a
-              href="/"
+              :href="withBase(`/${lang}/`)"
               class="flex items-center gap-2"
             >
               <img
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index f23fb3928..475cc368f 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -30,6 +30,10 @@
   --radius: 0.5rem;
 }
 
+[data-reka-popper-content-wrapper=""] {
+  z-index: 9999 !important;
+}
+
 .dark {
   --background: 207 15% 5%;
   --foreground: 0 0% 95%;
diff --git a/packages/i18n/src/locales/en/docs/theme.yaml b/packages/i18n/src/locales/en/docs/theme.yaml
index d4a3a9103..8a86afcee 100644
--- a/packages/i18n/src/locales/en/docs/theme.yaml
+++ b/packages/i18n/src/locales/en/docs/theme.yaml
@@ -23,6 +23,8 @@ home:
     title: Download
   get-started:
     title: Get Started
+  try-live:
+    title: Try Live
 search:
   title: Search
   placeholder: Search documentation...
diff --git a/packages/i18n/src/locales/zh-Hans/docs/theme.yaml b/packages/i18n/src/locales/zh-Hans/docs/theme.yaml
index 5ecf7326d..df364f2ab 100644
--- a/packages/i18n/src/locales/zh-Hans/docs/theme.yaml
+++ b/packages/i18n/src/locales/zh-Hans/docs/theme.yaml
@@ -4,6 +4,8 @@ home:
     title: 下载
   get-started:
     title: 教程
+  try-live:
+    title: 网页版
 doc:
   outline:
     title: 本页大纲