diff --git a/apps/canvas/front/src/App.tsx b/apps/canvas/front/src/App.tsx
index 5100576..5f80c95 100644
--- a/apps/canvas/front/src/App.tsx
+++ b/apps/canvas/front/src/App.tsx
@@ -11,6 +11,7 @@
 import { useAgents } from "./lib/state";
 import { Bot } from "lucide-react";
 import { Preview } from "./components/preview";
+import { AgentIframe } from "./Agent";
 
 export default function App() {
 	return (
@@ -67,7 +68,7 @@
 			</TabsContent>
 			{agents.map((a) => (
 				<TabsContent value={`agent-${a.agentName}`} className="!mt-0 flex-1 min-h-0">
-					<iframe key={a.name} src={a.address} title={a.agentName} className="w-full h-full" />
+					<AgentIframe agent={a} />
 				</TabsContent>
 			))}
 		</Tabs>