diff --git a/src/pages/index.astro b/src/pages/index.astro
index 561196b..3f0d86d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,26 @@
 ---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../layouts/BaseLayout.astro';
 
+const docs = await getCollection('docs');
 ---
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
-</html>
+<BaseLayout title="文档中心 | Home">
+  <div class="max-w-5xl mx-auto">
+    <div class="mb-12">
+      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white mb-4">🚀 知识库主页</h1>
+      <p class="text-lg text-gray-600 dark:text-gray-400">请从左侧导航栏或下方卡片中选择文档开始阅读。</p>
+    </div>
+    
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {docs.map(doc => (
+        <a href={`/docs/${doc.id}`} class="group block p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 hover:border-blue-500 dark:hover:border-blue-500 hover:shadow-xl transition-all relative overflow-hidden">
+          <div class="absolute inset-0 bg-gradient-to-r from-blue-500/0 to-blue-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 transition-all"></div>
+          <h2 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 mb-2 transition-colors relative z-10">{doc.data.title || doc.id}</h2>
+          <p class="text-gray-500 dark:text-gray-400 text-sm relative z-10 line-clamp-2">
+            {doc.data.description || '点击查看详情文档内容...'}
+          </p>
+        </a>
+      ))}
+    </div>
+  </div>
+</BaseLayout>
