diff --git a/packages/website/src/pages/docs/Layout.tsx b/packages/website/src/pages/docs/Layout.tsx
index 555fda5..5322d49 100644
--- a/packages/website/src/pages/docs/Layout.tsx
+++ b/packages/website/src/pages/docs/Layout.tsx
@@ -55,7 +55,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
 
 	return (
 		<div className="max-w-7xl mx-auto px-6 py-8 overflow-x-auto">
-			<div className="flex gap-8 min-w-[900px]">
+			<div className="flex gap-8 min-w-225">
 				{/* Sidebar */}
 				<aside className="w-64 shrink-0" role="complementary" aria-label="文档导航">
 					<div className="sticky">
diff --git a/packages/website/src/pages/docs/index.tsx b/packages/website/src/pages/docs/index.tsx
new file mode 100644
index 0000000..8ac145c
--- /dev/null
+++ b/packages/website/src/pages/docs/index.tsx
@@ -0,0 +1,110 @@
+import { Suspense } from 'react'
+import { Route, Switch } from 'wouter'
+
+import Header from '../../components/Header'
+import DocsLayout from './Layout'
+import Instructions from './features/custom-instructions/page'
+// Features
+import CustomTools from './features/custom-tools/page'
+import DataMasking from './features/data-masking/page'
+import Models from './features/models/page'
+import BestPractices from './integration/best-practices/page'
+// Integration
+import CdnSetup from './integration/cdn-setup/page'
+import Configuration from './integration/configuration/page'
+import SecurityPermissions from './integration/security-permissions/page'
+import ThirdPartyAgent from './integration/third-party-agent/page'
+import Limitations from './introduction/limitations/page'
+// Introduction
+import Overview from './introduction/overview/page'
+import QuickStart from './introduction/quick-start/page'
+
+function DocsPage({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="min-h-screen bg-white dark:bg-gray-900">
+			<Header />
+			<DocsLayout>
+				<Suspense>{children}</Suspense>
+			</DocsLayout>
+		</div>
+	)
+}
+
+export default function DocsRouter() {
+	return (
+		<Switch>
+			{/* Introduction */}
+			<Route path="/docs/introduction/overview">
+				<DocsPage>
+					<Overview />
+				</DocsPage>
+			</Route>
+			<Route path="/docs/introduction/quick-start">
+				<DocsPage>
+					<QuickStart />
+				</DocsPage>
+			</Route>
+			<Route path="/docs/introduction/limitations">
+				<DocsPage>
+					<Limitations />
+				</DocsPage>
+			</Route>
+
+			{/* Features */}
+			<Route path="/docs/features/custom-tools">
+				<DocsPage>
+					<CustomTools />
+				</DocsPage>
+			</Route>
+			<Route path="/docs/features/data-masking">
+				<DocsPage>
+					<DataMasking />
+				</DocsPage>
+			</Route>
+			<Route path="/docs/features/custom-instructions">
+				<DocsPage>
+					<Instructions />
+				</DocsPage>
+			</Route>
+			<Route path="/docs/features/models">
+				<DocsPage>
+					<Models />
+				</DocsPage>
+			</Route>
+
+			{/* Integration */}
+			<Route path="/docs/integration/cdn-setup">
+				<DocsPage>
+					<CdnSetup />
+				</DocsPage>
+			</Route>
+			<Route path="/docs/integration/security-permissions">
+				<DocsPage>
+					<SecurityPermissions />
+				</DocsPage>
+			</Route>
+			<Route path="/docs/integration/configuration">
+				<DocsPage>
+					<Configuration />
+				</DocsPage>
+			</Route>
+			<Route path="/docs/integration/best-practices">
+				<DocsPage>
+					<BestPractices />
+				</DocsPage>
+			</Route>
+			<Route path="/docs/integration/third-party-agent">
+				<DocsPage>
+					<ThirdPartyAgent />
+				</DocsPage>
+			</Route>
+
+			{/* Default redirect or 404 */}
+			<Route path="/docs">
+				<DocsPage>
+					<Overview />
+				</DocsPage>
+			</Route>
+		</Switch>
+	)
+}
diff --git a/packages/website/src/router.tsx b/packages/website/src/router.tsx
index 17c990c..543e4ab 100644
--- a/packages/website/src/router.tsx
+++ b/packages/website/src/router.tsx
@@ -1,37 +1,9 @@
 import { Suspense, lazy } from 'react'
 import { Route, Switch } from 'wouter'
 
-import Header from './components/Header'
-import DocsLayout from './pages/docs/Layout'
-
 // Lazy load pages
 const HomePage = lazy(() => import('./pages/Home'))
-// Introduction
-const Overview = lazy(() => import('./pages/docs/introduction/overview/page'))
-const QuickStart = lazy(() => import('./pages/docs/introduction/quick-start/page'))
-const Limitations = lazy(() => import('./pages/docs/introduction/limitations/page'))
-// Features
-const CustomTools = lazy(() => import('./pages/docs/features/custom-tools/page'))
-const DataMasking = lazy(() => import('./pages/docs/features/data-masking/page'))
-const Instructions = lazy(() => import('./pages/docs/features/custom-instructions/page'))
-const Models = lazy(() => import('./pages/docs/features/models/page'))
-// Integration
-const CdnSetup = lazy(() => import('./pages/docs/integration/cdn-setup/page'))
-const SecurityPermissions = lazy(() => import('./pages/docs/integration/security-permissions/page'))
-const Configuration = lazy(() => import('./pages/docs/integration/configuration/page'))
-const BestPractices = lazy(() => import('./pages/docs/integration/best-practices/page'))
-const ThirdPartyAgent = lazy(() => import('./pages/docs/integration/third-party-agent/page'))
-
-function DocsPage({ children }: { children: React.ReactNode }) {
-	return (
-		<div className="min-h-screen bg-white dark:bg-gray-900">
-			<Header />
-			<DocsLayout>
-				<Suspense>{children}</Suspense>
-			</DocsLayout>
-		</div>
-	)
-}
+const DocsPages = lazy(() => import('./pages/docs/index'))
 
 export default function Router() {
 	return (
@@ -42,70 +14,9 @@ export default function Router() {
 					<HomePage />
 				</Route>
 
-				{/* Introduction */}
-				<Route path="/docs/introduction/overview">
-					<DocsPage>
-						<Overview />
-					</DocsPage>
-				</Route>
-				<Route path="/docs/introduction/quick-start">
-					<DocsPage>
-						<QuickStart />
-					</DocsPage>
-				</Route>
-				<Route path="/docs/introduction/limitations">
-					<DocsPage>
-						<Limitations />
-					</DocsPage>
-				</Route>
-
-				{/* Features */}
-				<Route path="/docs/features/custom-tools">
-					<DocsPage>
-						<CustomTools />
-					</DocsPage>
-				</Route>
-				<Route path="/docs/features/data-masking">
-					<DocsPage>
-						<DataMasking />
-					</DocsPage>
-				</Route>
-				<Route path="/docs/features/custom-instructions">
-					<DocsPage>
-						<Instructions />
-					</DocsPage>
-				</Route>
-				<Route path="/docs/features/models">
-					<DocsPage>
-						<Models />
-					</DocsPage>
-				</Route>
-
-				{/* Integration */}
-				<Route path="/docs/integration/cdn-setup">
-					<DocsPage>
-						<CdnSetup />
-					</DocsPage>
-				</Route>
-				<Route path="/docs/integration/security-permissions">
-					<DocsPage>
-						<SecurityPermissions />
-					</DocsPage>
-				</Route>
-				<Route path="/docs/integration/configuration">
-					<DocsPage>
-						<Configuration />
-					</DocsPage>
-				</Route>
-				<Route path="/docs/integration/best-practices">
-					<DocsPage>
-						<BestPractices />
-					</DocsPage>
-				</Route>
-				<Route path="/docs/integration/third-party-agent">
-					<DocsPage>
-						<ThirdPartyAgent />
-					</DocsPage>
+				{/* All docs pages */}
+				<Route path="/docs/:rest*">
+					<DocsPages />
 				</Route>
 
 				{/* 404 */}