diff --git a/src/app/plan/page.tsx b/src/app/plan/page.tsx
index 53526af..6909373 100644
--- a/src/app/plan/page.tsx
+++ b/src/app/plan/page.tsx
@@ -2,20 +2,15 @@ import { redirect } from "next/navigation";
 
 import { AppShell } from "@/components/shell/app-shell";
 import { TopBar } from "@/components/shell/top-bar";
-import { RoadmapTabs } from "@/components/roadmap/roadmap-tabs";
-import { RoadmapStats } from "@/components/roadmap/roadmap-stats";
+import { GanttPlanView } from "@/components/roadmap/gantt-plan-view";
 import { getSession } from "@/lib/auth/session";
-import { loadRoadmap } from "@/lib/roadmap/load";
+import { loadPlan } from "@/lib/roadmap/load";
 
 export default async function PlanPage() {
   const session = await getSession();
   if (!session) redirect("/login");
 
-  const { cards, inboxCount, doneCount } = await loadRoadmap();
-
-  // Stats use the same banded set as the tabs so the counts agree with what
-  // is rendered. Done and Inbox cards are excluded by definition.
-  const banded = cards.filter((c) => c.band !== null);
+  const sections = await loadPlan();
 
   return (
     <AppShell role={session.role} currentPath="/plan">
@@ -23,19 +18,14 @@ export default async function PlanPage() {
         title="Planning"
         subtitle={
           session.role === "owner"
-            ? "Everything in flight, across every client"
-            : "What is underway and what is queued"
+            ? "Everything scheduled, across every client"
+            : "What is scheduled for your projects"
         }
       />
 
       <div className="flex-1 overflow-y-auto">
         <div className="mx-auto max-w-6xl space-y-6 p-6">
-          <RoadmapStats cards={banded} doneCount={doneCount} />
-          <RoadmapTabs
-            cards={cards}
-            inboxCount={inboxCount}
-            role={session.role}
-          />
+          <GanttPlanView sections={sections} />
         </div>
       </div>
     </AppShell>