diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
index ab0b55c7a..e62f58344 100644
--- a/src/frontend/src/contexts/typesContext.tsx
+++ b/src/frontend/src/contexts/typesContext.tsx
@@ -12,6 +12,7 @@ import { APIClassType, APIKindType } from "../types/api";
 import { localStorageUserType } from "../types/entities";
 import { NodeDataType } from "../types/flow";
 import { typesContextType } from "../types/typesContext";
+import { createFlowComponent } from "../utils/reactflowUtils";
 import {
   checkLocalStorageKey,
   getSetFromObject,
@@ -79,7 +80,9 @@ export function TypesProvider({ children }: { children: ReactNode }) {
             savedComponents!
           );
           Object.keys(components).forEach((key) => {
-            data["custom_components"][key] = components[key].node!;
+            data["custom_components"][key] = (
+              components[key].data?.nodes[0].data! as NodeDataType
+            ).node!;
           });
         }
         setData(data);
@@ -181,7 +184,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
       }
     }
     component.node!.official = false;
-    components[key] = component;
+    components[key] = createFlowComponent(component);
     savedComponentsJSON.components = components;
     localStorage.setItem(id, JSON.stringify(savedComponentsJSON));
     setData((prev) => {
diff --git a/src/frontend/src/types/entities/index.ts b/src/frontend/src/types/entities/index.ts
index 5900f428a..179debc06 100644
--- a/src/frontend/src/types/entities/index.ts
+++ b/src/frontend/src/types/entities/index.ts
@@ -1,4 +1,4 @@
-import { NodeDataType } from "../flow";
+import { FlowType } from "../flow";
 
 export type sidebarNavigationItemType = {
   name: string;
@@ -8,5 +8,5 @@ export type sidebarNavigationItemType = {
 };
 
 export type localStorageUserType = {
-  components: { [key: string]: NodeDataType };
+  components: { [key: string]: FlowType };
 };
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index bca331c2f..1291b83ce 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -7,7 +7,7 @@ export type FlowType = {
   data: ReactFlowJsonObject | null;
   description: string;
   style?: FlowStyleType;
-  isNode?: boolean;
+  isComponent?: boolean;
 };
 export type NodeType = {
   id: string;
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 1bb6905fc..16ea322ba 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1079,9 +1079,9 @@ export function createFlowComponent(nodeData: NodeDataType): FlowType {
       viewport: { x: 1, y: 1, zoom: 1 },
     },
     description: nodeData.node?.description || "",
-    name: nodeData.node?.display_name || "",
+    name: nodeData.node?.display_name || nodeData.type || "",
     id: nodeData.id || "",
-    isNode: true,
+    isComponent: true,
   };
   return flowNode;
 }