diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 21701f459..20af31351 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -63,8 +63,8 @@ export default function CollectionCardComponent({
 
   useEffect(() => {
     if (currentFlowId && playground) {
-      setNodes(currentFlow?.data?.nodes ?? []);
-      setEdges(currentFlow?.data?.edges ?? []);
+      setNodes(currentFlow?.data?.nodes ?? [],true);
+      setEdges(currentFlow?.data?.edges ?? [],true);
     }
   }, [currentFlowId]);
 
@@ -364,6 +364,7 @@ export default function CollectionCardComponent({
             {button && button}
             {playground &&
               <Button
+                key={data.id}
                 tabIndex={-1}
                 variant="outline"
                 size="sm"
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index c81aecc35..857f1ed25 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -83,11 +83,11 @@ export default function IOModal({
     return updateVerticesOrder(currentFlow!.id, null);
   }
 
-  useEffect(() => {
-    if (open) {
-      updateVertices();
-    }
-  }, [open, currentFlow]);
+  // useEffect(() => {
+  //   if (open) {
+  //     updateVertices();
+  //   }
+  // }, [open, currentFlow]);
 
   async function sendMessage(count = 1): Promise<void> {
     if (isBuilding) return;
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index bcc8f6309..17e32f090 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -149,7 +149,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       edges: applyEdgeChanges(changes, get().edges),
     });
   },
-  setNodes: (change) => {
+  setNodes: (change,skipSave=false) => {
     let newChange = typeof change === "function" ? change(get().nodes) : change;
     let newEdges = cleanEdges(newChange, get().edges);
     const { inputs, outputs } = getInputsAndOutputs(newChange);
@@ -164,7 +164,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
 
     const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding) {
+    if (!get().isBuilding && !skipSave) {
       flowsManager.autoSaveCurrentFlow(
         newChange,
         newEdges,
@@ -172,7 +172,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       );
     }
   },
-  setEdges: (change) => {
+  setEdges: (change,skipSave=false) => {
     let newChange = typeof change === "function" ? change(get().edges) : change;
     set({
       edges: newChange,
@@ -180,7 +180,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
 
     const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding) {
+    if (!get().isBuilding && !skipSave) {
       flowsManager.autoSaveCurrentFlow(
         get().nodes,
         newChange,
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index d88504909..dac3cec52 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -74,8 +74,8 @@ export type FlowStoreType = {
   edges: Edge[];
   onNodesChange: OnNodesChange;
   onEdgesChange: OnEdgesChange;
-  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
+  setNodes: (update: Node[] | ((oldState: Node[]) => Node[]),skipSave?:boolean) => void;
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[]),skipSave?:boolean) => void;
   setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
   getNode: (id: string) => Node | undefined;
   deleteNode: (nodeId: string | Array<string>) => void;