diff --git a/apps/canvas/front/src/Overview.tsx b/apps/canvas/front/src/Overview.tsx
index 8ed2c0c..1c86aae 100644
--- a/apps/canvas/front/src/Overview.tsx
+++ b/apps/canvas/front/src/Overview.tsx
@@ -1,9 +1,11 @@
 import React, { useMemo } from "react";
-import { useStateStore, AppNode, NodeType } from "@/lib/state";
+import { useStateStore, useLeadAgent } from "@/lib/state";
 import { NodeDetails } from "./components/node-details";
 import { Actions } from "./components/actions";
 import { Canvas } from "./components/canvas";
 import { Separator } from "./components/ui/separator";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable";
+import { AppNode, NodeType } from "config";
 
 const sections: { title: string; nodes: NodeType[] }[] = [
 	{
@@ -21,6 +23,30 @@
 ];
 
 export function Overview(): React.ReactNode {
+	const leadAgent = useLeadAgent();
+	if (leadAgent) {
+		return (
+			<ResizablePanelGroup direction="horizontal" className="w-full h-full">
+				<ResizablePanel defaultSize={25}>
+					<iframe
+						key={leadAgent.name}
+						src={`${leadAgent.address}?m`}
+						title={leadAgent.agentName}
+						className="w-full h-full"
+					/>
+				</ResizablePanel>
+				<ResizableHandle withHandle />
+				<ResizablePanel defaultSize={75} className="!overflow-y-auto !overflow-x-hidden">
+					<OverviewImpl />
+				</ResizablePanel>
+			</ResizablePanelGroup>
+		);
+	} else {
+		return <OverviewImpl />;
+	}
+}
+
+function OverviewImpl(): React.ReactNode {
 	const store = useStateStore();
 	const nodes = useMemo(() => {
 		return store.nodes.filter((n) => n.type !== "network" && n.type !== "github" && n.type !== undefined);