diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 227593c1d..283345ead 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, id: string) => {},
+  saveComponent: (component: NodeDataType) => {},
   deleteComponent: (id: string, key: string) => {},
 };
 
@@ -667,7 +667,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     }
   }
 
-  function saveComponent(component: NodeDataType, id: string) {
+  function saveComponent(component: NodeDataType) {
     component.node!.official = false;
     let key = component.type;
     if (data["custom_components"][key] !== undefined) {
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index b28eedbe5..37131f301 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -9,8 +9,9 @@ import {
   SelectItem,
   SelectTrigger,
 } from "../../../../components/ui/select-custom";
-import { AuthContext } from "../../../../contexts/authContext";
+import { alertContext } from "../../../../contexts/alertContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
+import { saveFlowStore } from "../../../../controllers/API";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import {
@@ -46,8 +47,8 @@ export default function NodeToolbarComponent({
     ).length
   );
   const updateNodeInternals = useUpdateNodeInternals();
-  const { isAuthenticated, autoLogin, userData } = useContext(AuthContext);
   const { getNodeId } = useContext(TabsContext);
+  const { setErrorData, setSuccessData } = useContext(alertContext);
 
   function canMinimize() {
     let countHandles: number = 0;
@@ -78,12 +79,24 @@ export default function NodeToolbarComponent({
         downloadNode(createFlowComponent(cloneDeep(data)));
         break;
       case "Share":
-        //TODO add logic to save node on backend and update toolbar
+        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"]],
+            });
+          }
+        );
         break;
       case "SaveAll":
-        if (isAuthenticated) {
-          saveComponent(cloneDeep(data), autoLogin ? "auto" : userData?.id!);
-        }
+        saveComponent(cloneDeep(data));
         break;
       case "disabled":
         break;
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 151f04a11..c3ecc2681 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, id: string) => void;
+  saveComponent: (component: NodeDataType) => void;
   deleteComponent: (id: string, key: string) => void;
 };