diff --git a/apps/canvas/front/src/components/canvas.tsx b/apps/canvas/front/src/components/canvas.tsx
index 252c1b9..861437f 100644
--- a/apps/canvas/front/src/components/canvas.tsx
+++ b/apps/canvas/front/src/components/canvas.tsx
@@ -10,7 +10,7 @@
 	Panel,
 	useStoreApi,
 } from "@xyflow/react";
-import { useStateStore, AppState, AppNode } from "@/lib/state";
+import { useStateStore, AppState, AppNode, useZoom } from "@/lib/state";
 import { useShallow } from "zustand/react/shallow";
 import { useCallback, useEffect, useMemo } from "react";
 import { NodeGatewayHttps } from "@/components/node-gateway-https";
@@ -36,6 +36,7 @@
 	const store = useStateStore();
 	const instance = useReactFlow();
 	const flow = useStoreApi();
+	const viewport = useZoom();
 	useEffect(() => {
 		store.setViewport({
 			width: flow.getState().width,
@@ -45,6 +46,9 @@
 			transformZoom: flow.getState().transform[2],
 		});
 	}, [store, flow]);
+	useEffect(() => {
+		instance.setViewport(viewport);
+	}, [viewport, instance]);
 	const nodeTypes = useMemo(
 		() => ({
 			network: NodeNetwork,