diff --git a/apps/canvas/front/src/Build.tsx b/apps/canvas/front/src/Build.tsx
new file mode 100644
index 0000000..a3960ba
--- /dev/null
+++ b/apps/canvas/front/src/Build.tsx
@@ -0,0 +1,66 @@
+import { Canvas } from "./Canvas";
+import { Details } from "./Details";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable";
+import { Tools } from "./Tools";
+import { Agent } from "./Agent";
+import { useBuildMode, useLeadAgent } from "./lib/state";
+import { Overview } from "./Overview";
+import { useMemo } from "react";
+
+export function Build() {
+	const leadAgent = useLeadAgent();
+	const buildMode = useBuildMode();
+	const mainWidth = useMemo(() => {
+		let ret = 100;
+		if (leadAgent) {
+			ret -= 25;
+		}
+		if (buildMode === "canvas") {
+			ret -= 20;
+		}
+		return ret;
+	}, [leadAgent, buildMode]);
+	return (
+		<ResizablePanelGroup direction="horizontal" className="w-full h-full">
+			{leadAgent && (
+				<>
+					<ResizablePanel defaultSize={25}>
+						<Agent agent={leadAgent} />
+					</ResizablePanel>
+					<ResizableHandle withHandle />
+				</>
+			)}
+			<ResizablePanel defaultSize={mainWidth}>
+				<ResizablePanelGroup direction="vertical">
+					<ResizablePanel defaultSize={80}>
+						<OverviewOrCanvas />
+					</ResizablePanel>
+					<ResizableHandle withHandle />
+					<ResizablePanel defaultSize={20}>
+						<Tools />
+					</ResizablePanel>
+				</ResizablePanelGroup>
+			</ResizablePanel>
+			{buildMode === "canvas" && (
+				<>
+					<ResizableHandle withHandle />
+					<ResizablePanel defaultSize={20} className="!overflow-y-auto !overflow-x-hidden">
+						<Details />
+					</ResizablePanel>
+				</>
+			)}
+		</ResizablePanelGroup>
+	);
+}
+
+function OverviewOrCanvas() {
+	const buildMode = useBuildMode();
+	switch (buildMode) {
+		case "overview":
+			return <Overview />;
+		case "canvas":
+			return <Canvas />;
+		default:
+			throw new Error(`Unknown build mode: ${buildMode}`);
+	}
+}