diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
index 7caf5eccc..da7eca216 100644
--- a/src/frontend/src/contexts/typesContext.tsx
+++ b/src/frontend/src/contexts/typesContext.tsx
@@ -8,7 +8,10 @@ import {
 import { Node, ReactFlowInstance } from "reactflow";
 import { getAll, getHealth } from "../controllers/API";
 import { APIKindType } from "../types/api";
+import { localStorageUserType } from "../types/entities";
+import { NodeDataType } from "../types/flow";
 import { typesContextType } from "../types/typesContext";
+import { checkLocalStorageKey } from "../utils/utils";
 import { alertContext } from "./alertContext";
 import { AuthContext } from "./authContext";
 
@@ -28,6 +31,7 @@ const initialValue: typesContextType = {
   fetchError: false,
   setFilterEdge: (filter) => {},
   getFilterEdge: [],
+  saveComponent: (component: NodeDataType, key: string) => {},
 };
 
 export const typesContext = createContext<typesContextType>(initialValue);
@@ -102,9 +106,23 @@ export function TypesProvider({ children }: { children: ReactNode }) {
         .filter((edge) => edge.source !== idx && edge.target !== idx)
     );
   }
+
+  function saveComponent(component: NodeDataType, id: string) {
+    if (checkLocalStorageKey(id)) {
+      let savedComponents = localStorage.getItem(id)!;
+      let savedComponentsJSON: localStorageUserType =
+        JSON.parse(savedComponents);
+      let components = savedComponentsJSON.components;
+      components[component.type];
+      savedComponentsJSON.components = components;
+      localStorage.setItem(id, JSON.stringify(savedComponentsJSON));
+    }
+  }
+
   return (
     <typesContext.Provider
       value={{
+        saveComponent,
         types,
         setTypes,
         reactFlowInstance,
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index d1252e83c..2132a134e 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -8,6 +8,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from "../../../../components/ui/select-custom";
+import { AuthContext } from "../../../../contexts/authContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import { nodeToolbarPropsType } from "../../../../types/components";
@@ -41,6 +42,7 @@ export default function NodeToolbarComponent({
     ).length
   );
   const updateNodeInternals = useUpdateNodeInternals();
+  const { isAuthenticated, autoLogin, userData } = useContext(AuthContext);
 
   function canMinimize() {
     let countHandles: number = 0;
@@ -65,10 +67,21 @@ export default function NodeToolbarComponent({
         setShowNode((prev) => !prev);
         updateNodeInternals(data.id);
         break;
-      case "SaveAll":
+      case "Download":
         //TODO add logic to save node on backend and update toolbar
         downloadNode(createFlowComponent(data));
         break;
+      case "SaveAll":
+        if (isAuthenticated) {
+          if (autoLogin) {
+            console.log("save all");
+          } else {
+          }
+        }
+        console.log(isAuthenticated);
+        console.log(userData);
+        console.log(autoLogin);
+        break;
     }
   };
 
@@ -178,6 +191,15 @@ export default function NodeToolbarComponent({
                   Save{" "}
                 </div>{" "}
               </SelectItem>
+              <SelectItem value={"Download"}>
+                <div className="flex">
+                  <IconComponent
+                    name="Download"
+                    className="relative top-0.5 mr-2 h-4 w-4"
+                  />{" "}
+                  Download{" "}
+                </div>{" "}
+              </SelectItem>
               {isMinimal && (
                 <SelectItem value={"show"}>
                   <div className="flex">
diff --git a/src/frontend/src/types/entities/index.ts b/src/frontend/src/types/entities/index.ts
index 3730492ce..5900f428a 100644
--- a/src/frontend/src/types/entities/index.ts
+++ b/src/frontend/src/types/entities/index.ts
@@ -1,6 +1,12 @@
+import { NodeDataType } from "../flow";
+
 export type sidebarNavigationItemType = {
   name: string;
   href: string;
   icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
   current: boolean;
 };
+
+export type localStorageUserType = {
+  components: { [key: string]: NodeDataType };
+};
diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts
index ff877b9d4..e572ed8d6 100644
--- a/src/frontend/src/types/typesContext/index.ts
+++ b/src/frontend/src/types/typesContext/index.ts
@@ -1,6 +1,7 @@
 import { Edge, Node, ReactFlowInstance } from "reactflow";
 import { AlertItemType } from "../alerts";
 import { APIClassType, APIDataType } from "../api";
+import { NodeDataType } from "../flow";
 
 const types: { [char: string]: string } = {};
 const template: { [char: string]: APIClassType } = {};
@@ -20,6 +21,7 @@ export type typesContextType = {
   setFetchError: (newState: boolean) => void;
   setFilterEdge: (newState) => void;
   getFilterEdge: any[];
+  saveComponent: (component: NodeDataType, key: string) => void;
 };
 
 export type alertContextType = {
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 111b1ce51..19f70aaf5 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -525,3 +525,7 @@ export function tabsArray(codes: string[], method: number) {
     },
   ];
 }
+
+export function checkLocalStorageKey(key: string): boolean {
+  return localStorage.getItem(key) !== null;
+}