diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 877958f54..9407bc1cd 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -3,7 +3,7 @@ import {
   classNames,
   nodeColors,
   nodeIcons,
-  snakeToNormalCase,
+  toNormalCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
@@ -192,8 +192,8 @@ export default function GenericNode({
                       data.node.template[t].display_name
                         ? data.node.template[t].display_name
                         : data.node.template[t].name
-                        ? snakeToNormalCase(data.node.template[t].name)
-                        : snakeToNormalCase(t)
+                        ? toNormalCase(data.node.template[t].name)
+                        : toNormalCase(t)
                     }
                     name={t}
                     tooltipTitle={
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 31786553b..aad549a83 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -3,7 +3,7 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { NodeDataType } from "../../types/flow";
-import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
+import { nodeColors, nodeIcons, toNormalCase } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ModalField from "./components/ModalField";
 
@@ -99,10 +99,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
 																			data.node.template[t].display_name
 																				? data.node.template[t].display_name
 																				: data.node.template[t].name
-																				? snakeToNormalCase(
+																				? toNormalCase(
 																						data.node.template[t].name
 																				  )
-																				: snakeToNormalCase(t)
+																				: toNormalCase(t)
 																		}
 																		required={data.node.template[t].required}
 																		id={
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 8fd1140ab..dd82ae313 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -9,7 +9,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { FlowType, NodeType } from "../../types/flow";
 import { TabsContext } from "../../contexts/tabsContext";
 import { alertContext } from "../../contexts/alertContext";
-import { classNames, snakeToNormalCase } from "../../utils";
+import { toNormalCase } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
 import { FaEraser } from "react-icons/fa";
@@ -230,7 +230,7 @@ export default function ChatModal({
                 `${type} is missing ${
                   template.display_name
                     ? template.display_name
-                    : snakeToNormalCase(template[t].name)
+                    : toNormalCase(template[t].name)
                 }.`,
               ]
             : []
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 38b06ae5a..0ad655bf1 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -16,7 +16,7 @@ import { error } from "console";
 import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
 import { FlowType } from "../../types/flow";
-import { classNames } from "../../utils";
+import { classNames, toNormalCase } from "../../utils";
 
 export default function ImportModal() {
   const [open, setOpen] = useState(true);
@@ -215,7 +215,7 @@ export default function ImportModal() {
                                 setModalOpen(false);
                               }}
                               textColor="text-emerald-400"
-                              title={example.name}
+                              title={toNormalCase(example.name)}
                             ></ButtonBox>
                           </div>
                         );
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 9e5bceab6..9b08756c0 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -315,8 +315,8 @@ export function toFirstUpperCase(str: string) {
     .join("");
 }
 
-export function snakeToNormalCase(str: string) {
-  return str
+export function toNormalCase(str: string) {
+  let result =  str
     .split("_")
     .map((word, index) => {
       if (index === 0) {
@@ -325,6 +325,15 @@ export function snakeToNormalCase(str: string) {
       return word.toLowerCase();
     })
     .join(" ");
+
+  return result.split("-")
+  .map((word, index) => {
+    if (index === 0) {
+      return word[0].toUpperCase() + word.slice(1).toLowerCase();
+    }
+    return word.toLowerCase();
+  })
+  .join(" ");
 }
 
 export function normalCaseToSnakeCase(str: string) {