diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index b7fe986..d64f81f 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -2,7 +2,15 @@
 import { CreateValidators, Validator } from "./config";
 import { GitHubService, GitHubServiceImpl } from "./github";
 import type { Edge, Node, OnConnect, OnEdgesChange, OnNodesChange } from "@xyflow/react";
-import { addEdge, applyEdgeChanges, applyNodeChanges, Connection, EdgeChange, useNodes } from "@xyflow/react";
+import {
+	addEdge,
+	applyEdgeChanges,
+	applyNodeChanges,
+	Connection,
+	EdgeChange,
+	useNodes,
+	XYPosition,
+} from "@xyflow/react";
 import type { DeepPartial } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
@@ -355,6 +363,14 @@
 type NodeUpdate<T extends NodeType> = DeepPartial<Extract<AppNode, { type: T }>>;
 type NodeDataUpdate<T extends NodeType> = DeepPartial<Extract<AppNode, { type: T }>["data"]>;
 
+type Viewport = {
+	transformX: number;
+	transformY: number;
+	transformZoom: number;
+	width: number;
+	height: number;
+};
+
 export type AppState = {
 	projectId: string | undefined;
 	mode: "edit" | "deploy";
@@ -364,11 +380,14 @@
 	categories: Category[];
 	messages: Message[];
 	env: Env;
+	viewport: Viewport;
+	setViewport: (viewport: Viewport) => void;
 	githubService: GitHubService | null;
 	setHighlightCategory: (name: string, active: boolean) => void;
 	onNodesChange: OnNodesChange<AppNode>;
 	onEdgesChange: OnEdgesChange;
 	onConnect: OnConnect;
+	addNode: (node: Omit<AppNode, "position">) => void;
 	setNodes: (nodes: AppNode[]) => void;
 	setEdges: (edges: Edge[]) => void;
 	setProject: (projectId: string | undefined) => Promise<void>;
@@ -384,6 +403,11 @@
 const messagesSelector = (state: AppState) => state.messages;
 const githubServiceSelector = (state: AppState) => state.githubService;
 const envSelector = (state: AppState) => state.env;
+const dimensionsSelector = (state: AppState) => state.dimensions;
+
+export function useDimensions(): Dimensions {
+	return useStateStore(dimensionsSelector);
+}
 
 export function useProjectId(): string | undefined {
 	return useStateStore(projectIdSelector);
@@ -419,6 +443,18 @@
 
 const v: Validator = CreateValidators();
 
+function getRandomPosition({ width, height, transformX, transformY, transformZoom }: Viewport): XYPosition {
+	const zoomMultiplier = 1 / transformZoom;
+	const realWidth = width * zoomMultiplier;
+	const realHeight = height * zoomMultiplier;
+	const paddingMultiplier = 0.8;
+	const ret = {
+		x: -transformX * zoomMultiplier + Math.random() * realWidth * paddingMultiplier,
+		y: -transformY * zoomMultiplier + Math.random() * realHeight * paddingMultiplier,
+	};
+	return ret;
+}
+
 export const useStateStore = create<AppState>((set, get): AppState => {
 	const setN = (nodes: AppNode[]) => {
 		if (nodes.length == 0) {
@@ -626,7 +662,26 @@
 		categories: defaultCategories,
 		messages: v([]),
 		env: defaultEnv,
+		viewport: {
+			transformX: 0,
+			transformY: 0,
+			transformZoom: 1,
+			width: 800,
+			height: 600,
+		},
 		githubService: null,
+		setViewport: (viewport) => {
+			const { viewport: vp } = get();
+			if (
+				viewport.transformX !== vp.transformX ||
+				viewport.transformY !== vp.transformY ||
+				viewport.transformZoom !== vp.transformZoom ||
+				viewport.width !== vp.width ||
+				viewport.height !== vp.height
+			) {
+				set({ viewport });
+			}
+		},
 		setHighlightCategory: (name, active) => {
 			set({
 				categories: get().categories.map((c) => {
@@ -650,6 +705,15 @@
 				edges: applyEdgeChanges(changes, get().edges),
 			});
 		},
+		addNode: (node) => {
+			const { viewport, nodes } = get();
+			setN(
+				nodes.concat({
+					...node,
+					position: getRandomPosition(viewport),
+				}),
+			);
+		},
 		setNodes: (nodes) => {
 			setN(nodes);
 		},
@@ -705,7 +769,25 @@
 				console.error("Failed to fetch integrations:", error);
 			} finally {
 				if (JSON.stringify(get().env) !== JSON.stringify(env)) {
+					console.log(env);
 					set({ env });
+					const newNetworks = env.networks.filter(
+						(x) => !get().nodes.some((n) => n.type === "network" && n.data.domain === x.domain),
+					);
+					newNetworks.forEach((n) => {
+						get().addNode({
+							id: n.domain,
+							type: "network",
+							connectable: true,
+							data: {
+								domain: n.domain,
+								label: n.domain,
+								envVars: [],
+								ports: [],
+								state: "success", // TODO(gio): monitor network health
+							},
+						});
+					});
 
 					if (env.integrations.github) {
 						set({ githubService: new GitHubServiceImpl(projectId!) });