diff --git a/apps/canvas/front/src/components/resources.tsx b/apps/canvas/front/src/components/resources.tsx
index 715f878..fbb1be7 100644
--- a/apps/canvas/front/src/components/resources.tsx
+++ b/apps/canvas/front/src/components/resources.tsx
@@ -1,15 +1,14 @@
 import { Button } from "@/components/ui/button";
-import { ReactFlowInstance, useReactFlow } from "@xyflow/react";
 import { v4 as uuidv4 } from "uuid";
 import { useCallback, useState } from "react";
 import { Accordion, AccordionTrigger } from "./ui/accordion";
 import { AccordionContent, AccordionItem } from "@radix-ui/react-accordion";
-import { NodeType, useCategories } from "@/lib/state";
+import { AppNode, AppState, NodeType, useCategories, useStateStore } from "@/lib/state";
 import { CategoryItem } from "@/lib/categories";
 import { Icon } from "./icon";
 
-function addResource(i: CategoryItem<NodeType>, flow: ReactFlowInstance) {
-	flow.addNodes({
+function addResource(i: CategoryItem<NodeType>, store: AppState) {
+	const node = {
 		id: uuidv4(),
 		position: {
 			x: 0,
@@ -18,17 +17,24 @@
 		type: i.type,
 		connectable: true,
 		data: i.init,
-	});
+		selected: true,
+	};
+	const nodes = store.nodes.map((n) => ({
+		...n,
+		selected: false,
+	}));
+	nodes.push(node as AppNode);
+	store.setNodes(nodes);
 }
 
 export function Resources() {
-	const flow = useReactFlow();
+	const store = useStateStore();
 	const categories = useCategories();
 	const onResourceAdd = useCallback(
 		(item: CategoryItem<NodeType>) => {
-			return () => addResource(item, flow);
+			return () => addResource(item, store);
 		},
-		[flow],
+		[store],
 	);
 	const [open, setOpen] = useState<string[]>(categories.map((c) => c.title));
 	return (
@@ -39,7 +45,7 @@
 						<AccordionTrigger>{c.title}</AccordionTrigger>
 						<AccordionContent>
 							<div className="flex flex-col space-y-1">
-								{c.items.map((item) => (
+								{c.items.map((item: CategoryItem<NodeType>) => (
 									<Button
 										key={item.title}
 										onClick={onResourceAdd(item)}