diff --git a/web/src/app/app.tsx b/web/src/app/app.tsx
deleted file mode 100644
index 36edc31..0000000
--- a/web/src/app/app.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
-// SPDX-License-Identifier: MIT
-
-"use client";
-
-import { GithubOutlined } from "@ant-design/icons";
-import Link from "next/link";
-import { useMemo } from "react";
-
-import { Button } from "~/components/ui/button";
-import { useReplay } from "~/core/replay";
-import { useStore } from "~/core/store";
-import { cn } from "~/lib/utils";
-
-import { Logo } from "./_components/logo";
-import { MessagesBlock } from "./_components/messages-block";
-import { ResearchBlock } from "./_components/research-block";
-import { ThemeToggle } from "./_components/theme-toggle";
-import { Tooltip } from "./_components/tooltip";
-import { SettingsDialog } from "./_settings/dialogs/settings-dialog";
-
-export default function App() {
-  const { isReplay } = useReplay();
-  const openResearchId = useStore((state) => state.openResearchId);
-  const doubleColumnMode = useMemo(
-    () => openResearchId !== null,
-    [openResearchId],
-  );
-  return (
-    <div className="flex h-full w-full justify-center">
-      <header className="fixed top-0 left-0 flex h-12 w-full w-screen items-center justify-between px-4">
-        <Logo />
-        <div className="flex items-center">
-          <Tooltip title="Visit DeerFlow on GitHub">
-            <Button variant="ghost" size="icon" asChild>
-              <Link
-                href="https://github.com/bytedance/deer-flow"
-                target="_blank"
-              >
-                <GithubOutlined />
-              </Link>
-            </Button>
-          </Tooltip>
-          <ThemeToggle />
-          {!isReplay && <SettingsDialog />}
-        </div>
-      </header>
-      <div
-        className={cn(
-          "flex h-full w-full justify-center px-4 pt-12 pb-4",
-          doubleColumnMode && "gap-8",
-        )}
-      >
-        <MessagesBlock
-          className={cn(
-            "shrink-0 transition-all duration-300 ease-out",
-            !doubleColumnMode &&
-              `w-[768px] translate-x-[min(calc((100vw-538px)*0.75/2),960px/2)]`,
-            doubleColumnMode && `w-[538px]`,
-          )}
-        />
-        <ResearchBlock
-          className={cn(
-            "w-[min(calc((100vw-538px)*0.75),960px)] pb-4 transition-all duration-300 ease-out",
-            !doubleColumnMode && "scale-0",
-            doubleColumnMode && "",
-          )}
-          researchId={openResearchId}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/web/src/app/chat/main.tsx b/web/src/app/chat/main.tsx
new file mode 100644
index 0000000..3d41653
--- /dev/null
+++ b/web/src/app/chat/main.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+"use client";
+
+import { GithubOutlined } from "@ant-design/icons";
+import Link from "next/link";
+import { useMemo } from "react";
+
+import { Button } from "~/components/ui/button";
+import { useReplay } from "~/core/replay";
+import { useStore } from "~/core/store";
+import { cn } from "~/lib/utils";
+
+import { Logo } from "../_components/logo";
+import { MessagesBlock } from "../_components/messages-block";
+import { ResearchBlock } from "../_components/research-block";
+import { ThemeToggle } from "../_components/theme-toggle";
+import { Tooltip } from "../_components/tooltip";
+import { SettingsDialog } from "../_settings/dialogs/settings-dialog";
+
+export default function Main() {
+  const { isReplay } = useReplay();
+  const openResearchId = useStore((state) => state.openResearchId);
+  const doubleColumnMode = useMemo(
+    () => openResearchId !== null,
+    [openResearchId],
+  );
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full justify-center px-4 pt-12 pb-4",
+        doubleColumnMode && "gap-8",
+      )}
+    >
+      <MessagesBlock
+        className={cn(
+          "shrink-0 transition-all duration-300 ease-out",
+          !doubleColumnMode &&
+            `w-[768px] translate-x-[min(calc((100vw-538px)*0.75/2),960px/2)]`,
+          doubleColumnMode && `w-[538px]`,
+        )}
+      />
+      <ResearchBlock
+        className={cn(
+          "w-[min(calc((100vw-538px)*0.75),960px)] pb-4 transition-all duration-300 ease-out",
+          !doubleColumnMode && "scale-0",
+          doubleColumnMode && "",
+        )}
+        researchId={openResearchId}
+      />
+    </div>
+  );
+}
diff --git a/web/src/app/chat/page.tsx b/web/src/app/chat/page.tsx
new file mode 100644
index 0000000..26dba29
--- /dev/null
+++ b/web/src/app/chat/page.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+"use client";
+
+import { GithubOutlined } from "@ant-design/icons";
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import { Suspense } from "react";
+
+import { Button } from "~/components/ui/button";
+import { useReplay } from "~/core/replay";
+
+import { Logo } from "../_components/logo";
+import { ThemeToggle } from "../_components/theme-toggle";
+import { Tooltip } from "../_components/tooltip";
+import { SettingsDialog } from "../_settings/dialogs/settings-dialog";
+
+const Main = dynamic(() => import("./main"), { ssr: false });
+
+export default function HomePage() {
+  const { isReplay } = useReplay();
+  return (
+    <div className="flex h-full w-full justify-center">
+      <header className="fixed top-0 left-0 flex h-12 w-full w-screen items-center justify-between px-4">
+        <Logo />
+        <div className="flex items-center">
+          <ThemeToggle />
+          {!isReplay && <SettingsDialog />}
+          <Tooltip title="Visit DeerFlow on GitHub">
+            <Button variant="ghost" size="icon" asChild>
+              <Link
+                href="https://github.com/bytedance/deer-flow"
+                target="_blank"
+              >
+                <GithubOutlined />
+              </Link>
+            </Button>
+          </Tooltip>
+        </div>
+      </header>
+      <Suspense fallback={<div>Loading DeerFlow...</div>}>
+        <Main />
+      </Suspense>
+    </div>
+  );
+}
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index cc4fb26..5e802ff 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -3,15 +3,8 @@
 
 "use client";
 
-import dynamic from "next/dynamic";
-import { Suspense } from "react";
-
-const App = dynamic(() => import("./app"), { ssr: false });
+import { redirect } from "next/navigation";
 
 export default function HomePage() {
-  return (
-    <Suspense fallback={<div>Loading DeerFlow...</div>}>
-      <App />
-    </Suspense>
-  );
+  redirect("/chat");
 }