diff --git a/apps/web/app/components/chat.tsx b/apps/web/app/components/chat.tsx
new file mode 100644
index 00000000..2de326ee
--- /dev/null
+++ b/apps/web/app/components/chat.tsx
@@ -0,0 +1,7 @@
+export function Chat() {
+  return (
+    <div>
+      <h1>Chat</h1>
+    </div>
+  )
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 5dddd2ec..723829f3 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,52 +1,8 @@
 "use client"
 
-import { Markdown } from "@multica/ui/components/markdown"
-import { ChatInput } from "@multica/ui/components/chat-input"
 import { AppSidebar } from "@multica/ui/components/app-sidebar"
 import { SidebarInset, SidebarTrigger } from "@multica/ui/components/ui/sidebar"
-
-const MOCK_MD = `# Markdown 渲染器示例
-
-这是一个 **Markdown** 渲染组件的演示页面，支持多种常见语法。
-
-## 代码高亮
-
-\`\`\`typescript
-interface User {
-  id: string
-  name: string
-  email: string
-}
-
-async function fetchUser(id: string): Promise<User> {
-  const res = await fetch(\`/api/users/\${id}\`)
-  return res.json()
-}
-\`\`\`
-
-## 列表
-
-- React 组件化架构
-- Shiki 语法高亮
-- GFM 表格和任务列表支持
-
-## 表格
-
-| 功能 | 状态 | 说明 |
-|------|------|------|
-| 代码高亮 | ✅ | 基于 Shiki |
-| GFM 表格 | ✅ | remark-gfm |
-| 流式渲染 | ✅ | StreamingMarkdown |
-
-## 引用
-
-> 好的设计是尽可能少的设计。
-> — Dieter Rams
-
-行内代码示例：使用 \`cn()\` 工具函数合并 class。
-
-这是一个 [链接示例](https://github.com)。
-`
+import { Chat } from "./components/chat"
 
 const NAV_ITEMS = [
   { title: "Home", url: "#" },
@@ -62,14 +18,7 @@ export default function Page() {
         <header className="flex h-12 items-center border-b px-4">
           <SidebarTrigger />
         </header>
-        <div className="flex-1 p-8">
-          <div className="max-w-2xl mx-auto">
-            <Markdown mode="full">{MOCK_MD}</Markdown>
-            <div className="mt-8">
-              <ChatInput />
-            </div>
-          </div>
-        </div>
+        <Chat />
       </SidebarInset>
     </>
   )