diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index f1e5dd3d5..98be2f1af 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -80,7 +80,7 @@ const TabsContextInitialValue: TabsContextType = {
     selection: { nodes: any; edges: any },
     position: { x: number; y: number; paneX?: number; paneY?: number }
   ) => {},
-  saveComponent: (component: NodeDataType) => {},
+  saveComponent: async (component: NodeDataType) => "",
   deleteComponent: (id: string, key: string) => {},
 };
 
@@ -700,7 +700,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           ` (${increment})`;
       }
     }
-    addFlow(true, createFlowComponent(component));
+    return addFlow(true, createFlowComponent(component));
   }
 
   function deleteComponent(id: string, key: string) {
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 3df37d8ef..b4fe2c794 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -70,20 +70,21 @@ export default function NodeToolbarComponent({
 
   function handleShareComponent() {
     const componentFlow = cloneDeep(data);
-    saveFlowStore(createFlowComponent(componentFlow)).then(
-      () => {
-        saveComponent(componentFlow);
-        setSuccessData({
-          title: "Component shared successfully",
-        });
-      },
-      (err) => {
-        setErrorData({
-          title: "Error sharing component",
-          list: [err["response"]["data"]["detail"]],
-        });
-      }
-    );
+    saveComponent(componentFlow).then(() => {
+      saveFlowStore(createFlowComponent(componentFlow)).then(
+        (_) => {
+          setSuccessData({
+            title: "Component shared successfully",
+          });
+        },
+        (err) => {
+          setErrorData({
+            title: "Error sharing component",
+            list: [err["response"]["data"]["detail"]],
+          });
+        }
+      );
+    });
   }
   const handleSelectChange = (event) => {
     switch (event) {
@@ -98,7 +99,6 @@ export default function NodeToolbarComponent({
         downloadNode(createFlowComponent(cloneDeep(data)));
         break;
       case "Share":
-        console.log("Share");
         setShowconfirmShare(true);
         break;
       case "SaveAll":
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index c3ecc2681..b8b4a24e9 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -36,7 +36,7 @@ export type TabsContextType = {
   setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
   setTweak: (tweak: tweakType) => tweakType | void;
   getTweak: tweakType;
-  saveComponent: (component: NodeDataType) => void;
+  saveComponent: (component: NodeDataType) => Promise<String | undefined>;
   deleteComponent: (id: string, key: string) => void;
 };
 
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index eecb0ccbb..4f9c7ba0b 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1097,3 +1097,8 @@ export function downloadNode(NodeFLow: FlowType) {
   element.download = `${NodeFLow.name}.json`;
   element.click();
 }
+
+export function updateComponentNameAndType(
+  data: any,
+  component: NodeDataType
+) {}