diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 27032a613..0b0f2df5f 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -88,7 +88,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">{data.type}</span>
-            <Badge variant="secondary">{data.id}</Badge>
+            <Badge variant="secondary">ID: {data.id}</Badge>
           </DialogTitle>
           <DialogDescription>
             {EDIT_DIALOG_SUBTITLE}
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 1e85d2eb3..f496f6db1 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -215,7 +215,8 @@ export default function Page({ flow }: { flow: FlowType }) {
       // Generate a unique node ID
       let { type } = data;
       let newId = getNodeId();
-      newId = `${type}_${newId}`;
+      // add lowercase to the type
+      newId = `${type.toLowerCase()}-${newId}`;
       let newNode: NodeType;
 
       if (data.type !== "groupNode") {