diff --git a/apps/www/content/docs/cn/components/dark-mode/index.mdx b/apps/www/content/docs/cn/components/dark-mode/index.mdx
index 9867acd498..e789170cf1 100644
--- a/apps/www/content/docs/cn/components/dark-mode/index.mdx
+++ b/apps/www/content/docs/cn/components/dark-mode/index.mdx
@@ -4,7 +4,7 @@ description: 为您的网站添加深色模式。
 ---
 
 <div className="grid sm:grid-cols-2 gap-4 sm:gap-6">
-  <LinkedCard href="/docs/components/dark-mode/next">
+  <LinkedCard href="/cn/docs/components/dark-mode/next">
     <svg
       role="img"
       viewBox="0 0 24 24"
@@ -17,7 +17,7 @@ description: 为您的网站添加深色模式。
     </svg>
     <p className="font-medium mt-2">Next.js</p>
   </LinkedCard>
-  <LinkedCard href="/docs/components/dark-mode/vite">
+  <LinkedCard href="/cn/docs/components/dark-mode/vite">
     <svg
       role="img"
       viewBox="0 0 24 24"
diff --git a/apps/www/content/docs/cn/components/dark-mode/next.mdx b/apps/www/content/docs/cn/components/dark-mode/next.mdx
index f5c028b913..4cf529c8c5 100644
--- a/apps/www/content/docs/cn/components/dark-mode/next.mdx
+++ b/apps/www/content/docs/cn/components/dark-mode/next.mdx
@@ -9,13 +9,13 @@ description: 为您的 Next.js 应用添加深色模式。
 
 ### Install next-themes
 
-Start by installing `next-themes`:
+首先安装 `next-themes`：
 
 ```bash
 npm install next-themes
 ```
 
-### Create a theme provider
+### 创建一个主题 provider
 
 ```tsx title="components/theme-provider.tsx"
 'use client';
@@ -31,7 +31,7 @@ export function ThemeProvider({
 }
 ```
 
-### Wrap your root layout
+### 包裹你的root layout 文件
 
 将 `ThemeProvider` 添加到您的 root layout 中。
 
@@ -59,7 +59,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
 }
 ```
 
-### Add a mode toggle
+### 添加一个模式切换按钮
 
 在您的网站上放置一个模式切换按钮，用于在浅色和深色模式之间切换。
 
diff --git a/apps/www/content/docs/cn/components/installation.mdx b/apps/www/content/docs/cn/components/installation.mdx
index 550f6b0fd8..266be3bee6 100644
--- a/apps/www/content/docs/cn/components/installation.mdx
+++ b/apps/www/content/docs/cn/components/installation.mdx
@@ -6,7 +6,7 @@ description: 如何安装依赖并构建你的应用程序。
 ## 框架
 
 <div className="grid grid-cols-2 gap-4 mt-8 sm:gap-6">
-  <LinkedCard href="/docs/components/installation/next">
+  <LinkedCard href="/cn/docs/components/installation/next?locale=cn" >
     <svg
       role="img"
       viewBox="0 0 24 24"
@@ -17,9 +17,9 @@ description: 如何安装依赖并构建你的应用程序。
       <title>Next.js</title>
       <path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
     </svg>
-    <p className="font-medium mt-2">Next.js</p>
+    <p className="font-medium mt-2">Next.js1</p>
   </LinkedCard>
-  <LinkedCard href="/docs/components/installation/vite">
+  <LinkedCard href="/cn/docs/components/installation/vite?locale=cn">
     <svg
       role="img"
       viewBox="0 0 24 24"
@@ -32,7 +32,7 @@ description: 如何安装依赖并构建你的应用程序。
     </svg>
     <p className="font-medium mt-2">Vite</p>
   </LinkedCard>
-  <LinkedCard href="/docs/components/installation/remix">
+  <LinkedCard href="/cn/docs/components/installation/remix?locale=cn">
     <svg
       role="img"
       viewBox="0 0 24 24"
@@ -45,7 +45,7 @@ description: 如何安装依赖并构建你的应用程序。
     </svg>
     <p className="font-medium mt-2">Remix</p>
   </LinkedCard>
-  <LinkedCard href="/docs/components/installation/astro">
+  <LinkedCard href="/cn/docs/components/installation/astro?locale=cn">
     <svg
       role="img"
       viewBox="0 0 24 24"
@@ -61,7 +61,7 @@ description: 如何安装依赖并构建你的应用程序。
     </svg>
     <p className="font-medium mt-2">Astro</p>
   </LinkedCard>
-  <LinkedCard href="/docs/components/installation/laravel">
+  <LinkedCard href="/cn/docs/components/installation/laravel?locale=cn">
     <svg
       role="img"
       viewBox="0 0 62 65"
@@ -73,7 +73,7 @@ description: 如何安装依赖并构建你的应用程序。
     </svg>
     <p className="font-medium mt-2">Laravel</p>
   </LinkedCard>
-  <LinkedCard href="/docs/components/installation/gatsby">
+  <LinkedCard href="/cn/docs/components/installation/gatsby?locale=cn">
     <svg
       role="img"
       viewBox="0 0 24 24"
@@ -86,7 +86,7 @@ description: 如何安装依赖并构建你的应用程序。
     </svg>
     <p className="font-medium mt-2">Gatsby</p>
   </LinkedCard>
-  <LinkedCard href="/docs/components/installation/manual">
+  <LinkedCard href="/cn/docs/components/installation/manual?locale=cn">
     <svg
       role="img"
       viewBox="0 0 24 24"
diff --git a/apps/www/src/components/main-nav.tsx b/apps/www/src/components/main-nav.tsx
index 26066f97ab..7d29c3078e 100644
--- a/apps/www/src/components/main-nav.tsx
+++ b/apps/www/src/components/main-nav.tsx
@@ -48,7 +48,7 @@ export function MainNav() {
         <Link
           className={cn(
             'transition-colors hover:text-foreground/80',
-            pathname === '/docs'
+            pathname === '/docs' || pathname === '/cn/docs'
               ? 'font-medium text-foreground'
               : 'text-foreground/80'
           )}
@@ -59,7 +59,7 @@ export function MainNav() {
         <Link
           className={cn(
             'transition-colors hover:text-foreground/80',
-            pathname?.startsWith('/docs/components')
+            pathname?.includes('/docs/components')
               ? 'font-medium text-foreground'
               : 'text-foreground/80'
           )}
@@ -70,7 +70,7 @@ export function MainNav() {
         <Link
           className={cn(
             'transition-colors hover:text-foreground/80',
-            pathname?.startsWith('/editors')
+            pathname?.includes('/editors')
               ? 'font-medium text-foreground'
               : 'text-foreground/80'
           )}