diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index ab18ad1c0..1699ad3fd 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -17,9 +17,15 @@ import { Switch } from "../../components/ui/switch";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
 import { TabsContext } from "../../contexts/tabsContext";
-import { getStoreComponents, searchComponent } from "../../controllers/API";
+import {
+  getComponent,
+  getStoreComponents,
+  saveFlowStore,
+  searchComponent,
+} from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import { FlowComponent } from "../../types/store";
+import cloneFLowWithParent from "../../utils/storeUtils";
 import { cn } from "../../utils/utils";
 import { MarketCardComponent } from "./components/market-card";
 export default function StorePage(): JSX.Element {
@@ -39,6 +45,7 @@ export default function StorePage(): JSX.Element {
   const [searchData, setSearchData] = useState(data);
   const [errorApiKey, setErrorApiKey] = useState(false);
   const { setErrorData } = useContext(alertContext);
+  const { addFlow } = useContext(TabsContext);
 
   useEffect(() => {
     handleGetComponents();
@@ -51,6 +58,7 @@ export default function StorePage(): JSX.Element {
         console.log(res);
         setLoading(false);
         setErrorApiKey(false);
+        setData(res);
       })
       .catch((err) => {
         setLoading(false);
@@ -76,6 +84,27 @@ export default function StorePage(): JSX.Element {
   const errorMessage = errorApiKey && !loading;
   const renderComponents = !loading && !errorApiKey && apiKey;
 
+  function handleFork(flowId: string) {
+    getComponent(flowId).then(
+      (res) => {
+        console.log(res);
+        const newFLow = cloneFLowWithParent(res);
+        saveFlowStore(newFLow).then(
+          (res) => {
+            console.log(res);
+            addFlow(true, newFLow);
+          },
+          (error) => {
+            console.error(error);
+          }
+        );
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
   return (
     <>
       <Header />
@@ -196,6 +225,14 @@ export default function StorePage(): JSX.Element {
                 .map((item, idx) => (
                   <MarketCardComponent key={idx} data={item} onAdd={() => {}} />
                 ))}
+              <button
+                onClick={() => {
+                  console.log(data);
+                  handleFork(data[0].id);
+                }}
+              >
+                test
+              </button>
             </div>
           </div>
         )}
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index b61fd1ba2..785e78bd5 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -8,6 +8,7 @@ export type FlowType = {
   description: string;
   style?: FlowStyleType;
   is_component?: boolean;
+  parent?: string;
 };
 export type NodeType = {
   id: string;
diff --git a/src/frontend/src/utils/storeUtils.ts b/src/frontend/src/utils/storeUtils.ts
new file mode 100644
index 000000000..eef2e15c3
--- /dev/null
+++ b/src/frontend/src/utils/storeUtils.ts
@@ -0,0 +1,10 @@
+import { cloneDeep } from "lodash";
+import { FlowType } from "../types/flow";
+
+export default function cloneFLowWithParent(flow: FlowType) {
+  const parent = flow.id;
+  let childFLow = cloneDeep(flow);
+  childFLow.parent = parent;
+  childFLow.id = "";
+  return childFLow;
+}