diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 9e5db5433..04f009d22 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -52,6 +52,8 @@ export default function CollectionCardComponent({
     data?.downloads_count ?? 0
   );
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+  const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
@@ -61,21 +63,16 @@ export default function CollectionCardComponent({
 
   const name = data.is_component ? "Component" : "Flow";
 
+  async function getFlowData(){
+    const res = await getComponent(data.id)
+    const newFlow = cloneFLowWithParent(res, res.id, data.is_component,true);
+    return newFlow;
+  }
+
   useEffect(() => {
     if (currentFlowId && playground) {
-      console.log(currentFlowId)
-      if(currentFlow){
         setNodes(currentFlow?.data?.nodes ?? [],true);
         setEdges(currentFlow?.data?.edges ?? [],true);
-      }
-      else{
-        getComponent(data.id)
-        .then((res) => {
-          const newFlow = cloneFLowWithParent(res, res.id, data.is_component);
-          setNodes(newFlow?.data?.nodes??[]);
-          setEdges(newFlow?.data?.edges??[]);
-        });  
-      }
       cleanFlowPool();
     }
   }, [currentFlowId]);
@@ -385,8 +382,17 @@ export default function CollectionCardComponent({
                   "playground-flow-button-" + data.id
                 }
                 onClick={() => {
-                  setCurrentFlowId(data.id);
-                  setOpenPlayground(true);
+                  if(getFlowById(data.id)){
+                    setCurrentFlowId(data.id);
+                    setOpenPlayground(true);
+                  }
+                  else{
+                    getFlowData().then((res) => {
+                      setCurrentFlow(res);
+                      setOpenPlayground(true);
+                    });
+                  
+                  }
                 }}
               >
                 <IconComponent
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 9fca16c3a..bfe11b7ac 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -56,7 +56,7 @@ export default function ComponentsComponent({
     const start = (pageIndex - 1) * pageSize;
     const end = start + pageSize;
     setData(all.slice(start, end));
-  }, [isLoading, pageIndex, pageSize]);
+  }, [flows,isLoading, pageIndex, pageSize]);
 
   const [data, setData] = useState<FlowType[]>([]);
 
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 9471889c3..62e88f99c 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -46,6 +46,16 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     set({ examples });
   },
   currentFlowId: "",
+  setCurrentFlow: (flow: FlowType) => {
+    set((state) => ({
+      currentFlow: flow,
+      currentFlowId: flow.id,
+    }));
+  
+  },
+  getFlowById: (id: string) => {
+    return get().flows.find((flow) => flow.id === id);
+  },
   setCurrentFlowId: (currentFlowId: string) => {
     set((state) => ({
       currentFlowId,
diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts
index 817ddd3d1..16985105a 100644
--- a/src/frontend/src/types/zustand/flowsManager/index.ts
+++ b/src/frontend/src/types/zustand/flowsManager/index.ts
@@ -2,6 +2,7 @@ import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { FlowType } from "../../flow";
 
 export type FlowsManagerStoreType = {
+  getFlowById: (id: string) => FlowType | undefined;
   flows: Array<FlowType>;
   setFlows: (flows: FlowType[]) => void;
   currentFlow: FlowType | undefined;
@@ -50,6 +51,7 @@ export type FlowsManagerStoreType = {
   takeSnapshot: () => void;
   examples: Array<FlowType>;
   setExamples: (examples: FlowType[]) => void;
+  setCurrentFlow: (flow: FlowType) => void;
 };
 
 export type UseUndoRedoOptions = {
diff --git a/src/frontend/src/utils/storeUtils.ts b/src/frontend/src/utils/storeUtils.ts
index e51cf8933..78b7ee7ff 100644
--- a/src/frontend/src/utils/storeUtils.ts
+++ b/src/frontend/src/utils/storeUtils.ts
@@ -6,11 +6,14 @@ import { isInputNode, isOutputNode } from "./reactflowUtils";
 export default function cloneFLowWithParent(
   flow: FlowType,
   parent: string,
-  is_component: boolean
+  is_component: boolean,
+  keepId=false
 ) {
   let childFLow = cloneDeep(flow);
   childFLow.parent = parent;
-  childFLow.id = "";
+  if(!keepId){
+    childFLow.id = "";
+  }
   childFLow.is_component = is_component;
   return childFLow;
 }