diff --git a/apps/canvas/front/src/components/canvas.tsx b/apps/canvas/front/src/components/canvas.tsx
index 8ab4aaa..252c1b9 100644
--- a/apps/canvas/front/src/components/canvas.tsx
+++ b/apps/canvas/front/src/components/canvas.tsx
@@ -8,8 +8,9 @@
 	Edge,
 	useReactFlow,
 	Panel,
+	useStoreApi,
 } from "@xyflow/react";
-import { useStateStore, AppState, AppNode, useEnv } from "@/lib/state";
+import { useStateStore, AppState, AppNode } from "@/lib/state";
 import { useShallow } from "zustand/react/shallow";
 import { useCallback, useEffect, useMemo } from "react";
 import { NodeGatewayHttps } from "@/components/node-gateway-https";
@@ -33,7 +34,17 @@
 export function Canvas() {
 	const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useStateStore(useShallow(selector));
 	const store = useStateStore();
-	const flow = useReactFlow();
+	const instance = useReactFlow();
+	const flow = useStoreApi();
+	useEffect(() => {
+		store.setViewport({
+			width: flow.getState().width,
+			height: flow.getState().height,
+			transformX: flow.getState().transform[0],
+			transformY: flow.getState().transform[1],
+			transformZoom: flow.getState().transform[2],
+		});
+	}, [store, flow]);
 	const nodeTypes = useMemo(
 		() => ({
 			network: NodeNetwork,
@@ -52,8 +63,8 @@
 			if (c.source === c.target) {
 				return false;
 			}
-			const sn = flow.getNode(c.source)! as AppNode;
-			const tn = flow.getNode(c.target)! as AppNode;
+			const sn = instance.getNode(c.source)! as AppNode;
+			const tn = instance.getNode(c.target)! as AppNode;
 			if (sn.type === "github") {
 				return c.targetHandle === "repository";
 			}
@@ -83,33 +94,8 @@
 			}
 			return true;
 		},
-		[flow],
+		[instance],
 	);
-	const env = useEnv();
-	useEffect(() => {
-		const networkNodes: AppNode[] = env.networks.map((n) => ({
-			id: n.domain,
-			type: "network",
-			position: {
-				x: 0,
-				y: 0,
-			},
-			isConnectable: true,
-			data: {
-				domain: n.domain,
-				label: n.domain,
-				envVars: [],
-				ports: [],
-				state: "success", // TODO(gio): monitor network health
-			},
-		}));
-		const prevNodes = store.nodes;
-		const newNodes = networkNodes.concat(prevNodes.filter((n) => n.type !== "network"));
-		// TODO(gio): actually compare
-		if (prevNodes.length !== newNodes.length) {
-			store.setNodes(newNodes);
-		}
-	}, [env, store]);
 	return (
 		<div style={{ width: "100%", height: "100%" }}>
 			<ReactFlow
diff --git a/apps/canvas/front/src/components/resources.tsx b/apps/canvas/front/src/components/resources.tsx
index fbb1be7..ddb68ac 100644
--- a/apps/canvas/front/src/components/resources.tsx
+++ b/apps/canvas/front/src/components/resources.tsx
@@ -3,40 +3,38 @@
 import { useCallback, useState } from "react";
 import { Accordion, AccordionTrigger } from "./ui/accordion";
 import { AccordionContent, AccordionItem } from "@radix-ui/react-accordion";
-import { AppNode, AppState, NodeType, useCategories, useStateStore } from "@/lib/state";
+import { AppState, NodeType, useCategories, useStateStore } from "@/lib/state";
 import { CategoryItem } from "@/lib/categories";
 import { Icon } from "./icon";
 
 function addResource(i: CategoryItem<NodeType>, store: AppState) {
-	const node = {
-		id: uuidv4(),
-		position: {
-			x: 0,
-			y: 0,
-		},
-		type: i.type,
-		connectable: true,
-		data: i.init,
-		selected: true,
-	};
-	const nodes = store.nodes.map((n) => ({
+	const deselected = store.nodes.map((n) => ({
 		...n,
 		selected: false,
 	}));
-	nodes.push(node as AppNode);
-	store.setNodes(nodes);
+	store.setNodes(deselected);
+	store.addNode({
+		id: uuidv4(),
+		type: i.type,
+		data: i.init,
+		selected: true,
+		connectable: true,
+	} as any); // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 export function Resources() {
 	const store = useStateStore();
 	const categories = useCategories();
+
 	const onResourceAdd = useCallback(
 		(item: CategoryItem<NodeType>) => {
 			return () => addResource(item, store);
 		},
 		[store],
 	);
+
 	const [open, setOpen] = useState<string[]>(categories.map((c) => c.title));
+
 	return (
 		<>
 			<Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>