diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 0f66daaf3..adb7f5023 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -31,7 +31,7 @@ export default function GenericNode({
 			});
 			showError.current = false;
 		}
-		deleteNode(data.id)
+		deleteNode(data.id);
 		return;
 	}
 	return (
@@ -74,7 +74,12 @@ export default function GenericNode({
 									<div
 										className={classNames(
 											"px-5 py-2 mt-2 dark:text-white text-center",
-											Object.keys(data.node.template).filter(key => !key.startsWith('_') && data.node.template[key].show).length === 0?"hidden":""
+											Object.keys(data.node.template).filter(
+												(key) =>
+													!key.startsWith("_") && data.node.template[key].show
+											).length === 0
+												? "hidden"
+												: ""
 										)}
 									>
 										Inputs
@@ -89,7 +94,13 @@ export default function GenericNode({
 											nodeColors[types[data.node.template[t].type]] ??
 											nodeColors.unknown
 										}
-										title={snakeToNormalCase(t)}
+										title={
+											data.node.template[t].display_name
+												? snakeToNormalCase(data.node.template[t].display_name)
+												: data.node.template[t].name
+												? snakeToNormalCase(data.node.template[t].name)
+												: snakeToNormalCase(t)
+										}
 										name={t}
 										tooltipTitle={
 											"Type: " +
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 2e9d2f23d..0eb3876f1 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,86 +1,93 @@
 import { Bars2Icon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
-import {
-  nodeColors,
-  nodeIcons,
-  nodeNames,
-} from "../../../../utils";
+import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
 import { useContext, useEffect, useState } from "react";
 import { getAll } from "../../../../controllers/API";
 import { typesContext } from "../../../../contexts/typesContext";
-import { APIClassType, APIKindType, APIObjectType } from "../../../../types/api";
+import {
+	APIClassType,
+	APIKindType,
+	APIObjectType,
+} from "../../../../types/api";
 
 export default function ExtraSidebar() {
-  const [data, setData] = useState({});
-  const { setTypes} = useContext(typesContext);
+	const [data, setData] = useState({});
+	const { setTypes } = useContext(typesContext);
 
-  useEffect(() => {
-    async function getTypes():Promise<void>{
-  
-      // Make an asynchronous API call to retrieve all data.
-      let result = await getAll();
-  
-      // Update the state of the component with the retrieved data.
-      setData(result.data);
-  
-      // Set the types by reducing over the keys of the result data and updating the accumulator.
-      setTypes(
-        Object.keys(result.data).reduce(
-          (acc, curr) => {
-            Object.keys(result.data[curr]).forEach((c:keyof APIKindType) => {
-              acc[c] = curr;
-              // Add the base classes to the accumulator as well.
-              result.data[curr][c].base_classes?.forEach((b) => {
-                acc[b] = curr;
-              });
-            });
-            return acc;
-          },{}
-        )
-      );
-    }
-    // Call the getTypes function.
-    getTypes();
-  }, [setTypes]);
+	useEffect(() => {
+		async function getTypes(): Promise<void> {
+			// Make an asynchronous API call to retrieve all data.
+			let result = await getAll();
 
+			// Update the state of the component with the retrieved data.
+			setData(result.data);
 
-  function onDragStart(event: React.DragEvent<any>, data:{type:string,node?:APIClassType}) {
-    //start drag event
-    event.dataTransfer.effectAllowed = "move";
-    event.dataTransfer.setData("json", JSON.stringify(data));
-  }
+			// Set the types by reducing over the keys of the result data and updating the accumulator.
+			setTypes(
+				Object.keys(result.data).reduce((acc, curr) => {
+					Object.keys(result.data[curr]).forEach((c: keyof APIKindType) => {
+						acc[c] = curr;
+						// Add the base classes to the accumulator as well.
+						result.data[curr][c].base_classes?.forEach((b) => {
+							acc[b] = curr;
+						});
+					});
+					return acc;
+				}, {})
+			);
+		}
+		// Call the getTypes function.
+		getTypes();
+	}, [setTypes]);
 
-  return (
-    <div className="mt-1 w-full">
-      {Object.keys(data).map((d:keyof APIObjectType, i) => (
-        <DisclosureComponent
-          key={i}
-          button={{ title: nodeNames[d]??nodeNames.unknown, Icon: nodeIcons[d]??nodeIcons.unknown }}
-        >
-          <div className="p-2 flex flex-col gap-2">
-            {Object.keys(data[d]).map((t: string, k) => (
-              <div key={k}>
-                <div
-                  draggable
-                  className={" cursor-grab border-l-8 rounded-l-md"}
-                  style={{ borderLeftColor: nodeColors[d]??nodeColors.unknown }}
-                  onDragStart={(event) =>
-                    onDragStart(event, {
-                      type: t,
-                      node: data[d][t],
-                    })
-                  }
-                >
-                  <div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
-                    <span className="text-black dark:text-white w-36 truncate text-xs">{t}</span>
-                    <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </DisclosureComponent>
-      ))}
-    </div>
-  );
+	function onDragStart(
+		event: React.DragEvent<any>,
+		data: { type: string; node?: APIClassType }
+	) {
+		//start drag event
+		event.dataTransfer.effectAllowed = "move";
+		event.dataTransfer.setData("json", JSON.stringify(data));
+	}
+
+	return (
+		<div className="mt-1 w-full">
+			{Object.keys(data).map((d: keyof APIObjectType, i) => (
+				<DisclosureComponent
+					key={i}
+					button={{
+						title: nodeNames[d] ?? nodeNames.unknown,
+						Icon: nodeIcons[d] ?? nodeIcons.unknown,
+					}}
+				>
+					<div className="p-2 flex flex-col gap-2">
+						{Object.keys(data[d]).map((t: string, k) => (
+							<div key={k}>
+								<div
+									draggable
+									className={" cursor-grab border-l-8 rounded-l-md"}
+									style={{
+										borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
+									}}
+									onDragStart={(event) =>
+										onDragStart(event, {
+											type: t,
+											node: data[d][t],
+										})
+									}
+								>
+									<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+										<span className="text-black dark:text-white w-36 truncate text-xs">
+											{t}
+										</span>
+										<Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+									</div>
+								</div>
+							</div>
+						))}
+						{Object.keys(data[d]).length===0 && <div className="text-gray-400 text-center">Coming soon</div>}
+					</div>
+				</DisclosureComponent>
+			))}
+		</div>
+	);
 }