diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 7c71c110e..9e5db5433 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -63,8 +63,19 @@ export default function CollectionCardComponent({
 
   useEffect(() => {
     if (currentFlowId && playground) {
-      setNodes(currentFlow?.data?.nodes ?? [],true);
-      setEdges(currentFlow?.data?.edges ?? [],true);
+      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]);
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 64df241fb..4bc482f56 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -371,6 +371,7 @@ export default function StorePage(): JSX.Element {
                       data={item}
                       authorized={validApiKey}
                       disabled={loading}
+                      playground={item.last_tested_version?.includes("1.0.0")&& !item.is_component}
                     />
                   </>
                 );