diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index a5e3aead6..4081b7b33 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -43,7 +43,7 @@ const TabsContextInitialValue: TabsContextType = {
   lastCopiedSelection: null,
   setLastCopiedSelection: (selection: any) => {},
 
-  getNodeId: () => "",
+  getNodeId: (nodeType:string) => "",
   paste: (
     selection: { nodes: any; edges: any },
     position: { x: number; y: number; paneX?: number; paneY?: number }
@@ -280,8 +280,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
 
-  function getNodeId() {
-    return incrementNodeId();
+  function getNodeId(nodeType:string) {
+    return nodeType+"-"+incrementNodeId();
   }
 
   /**
@@ -374,9 +374,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       ? { x: position.paneX + position.x, y: position.paneY + position.y }
       : reactFlowInstance.project({ x: position.x, y: position.y });
 
-    selectionInstance.nodes.forEach((n) => {
+    selectionInstance.nodes.forEach((n:NodeType) => {
       // Generate a unique node ID
-      let newId = getNodeId();
+      let newId = getNodeId(n.data.type);
       idsMap[n.id] = newId;
 
       // Create a new node object
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index f496f6db1..18aca8fe3 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -214,9 +214,7 @@ export default function Page({ flow }: { flow: FlowType }) {
 
       // Generate a unique node ID
       let { type } = data;
-      let newId = getNodeId();
-      // add lowercase to the type
-      newId = `${type.toLowerCase()}-${newId}`;
+      let newId = getNodeId(type);
       let newNode: NodeType;
 
       if (data.type !== "groupNode") {
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 3d48f64ca..4b5b6b1f7 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -17,7 +17,7 @@ export type TabsContextType = {
   //disable CopyPaste
   disableCopyPaste: boolean;
   setDisableCopyPaste: (value: boolean) => void;
-  getNodeId: () => string;
+  getNodeId: (nodeType:string) => string;
   paste: (
     selection: { nodes: any; edges: any },
     position: { x: number; y: number; paneX?: number; paneY?: number }
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index d53812519..4298a3003 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -17,7 +17,7 @@ import {
   Bars3CenterLeftIcon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
-import { FlowType } from "./types/flow";
+import { FlowType, NodeDataType, NodeType } from "./types/flow";
 import { APITemplateType } from "./types/api";
 import _ from "lodash";
 import { ChromaIcon } from "./icons/ChromaIcon";
@@ -625,9 +625,9 @@ export function checkUpperWords(str: string) {
 export function updateIds(newFlow, getNodeId) {
   let idsMap = {};
 
-  newFlow.nodes.forEach((n) => {
+  newFlow.nodes.forEach((n:NodeType) => {
     // Generate a unique node ID
-    let newId = getNodeId();
+    let newId = getNodeId(n.data.type);
     idsMap[n.id] = newId;
     n.id = newId;
     n.data.id = newId;