diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 15b77392e..d2d561ae3 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -46,17 +46,15 @@ export default function ParameterComponent({
 	const { reactFlowInstance } = useContext(typesContext);
 	let disabled =
 		reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
-	let disabledSource =
-		reactFlowInstance?.getEdges().some((e) => e.sourceHandle !== id && e.source === data.id) ?? false;
 	const { save } = useContext(TabsContext);
 
 	return (
 		<div
 			ref={ref}
-			className={"w-full flex flex-wrap justify-between items-center  dark:text-white mt-1 px-5 py-2 " + (!left ? (disabledSource ? "bg-gray-100 dark:bg-gray-700 text-gray-500": "bg-gray-50 dark:bg-gray-800") : "bg-gray-50 dark:bg-gray-800")}
+			className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
 		>
 			<>
-				<div className="text-sm truncate">
+				<div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
 					{title}
 					<span className="text-red-600">{required ? " *" : ""}</span>
 				</div>
@@ -78,8 +76,8 @@ export default function ParameterComponent({
 								isValidConnection(connection, reactFlowInstance)
 							}
 							className={classNames(
-								left ? "-ml-0.5 " : ("-mr-0.5 " + (disabledSource ? "pointer-events-none border-gray-400 " : "")),
-								"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",
+								left ? "-ml-0.5 " : "-mr-0.5 ",
+								"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
 							)}
 							style={{
 								borderColor: color,
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 8e81923f0..1ed9f5f12 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -1,9 +1,9 @@
 import { TrashIcon } from "@heroicons/react/24/outline";
 import {
-  classNames,
-  nodeColors,
-  nodeIcons,
-  snakeToNormalCase,
+	classNames,
+	nodeColors,
+	nodeIcons,
+	snakeToNormalCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
@@ -12,116 +12,108 @@ import { NodeDataType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
 
 export default function GenericNode({
-  data,
-  selected,
+	data,
+	selected,
 }: {
-  data: NodeDataType;
-  selected: boolean;
+	data: NodeDataType;
+	selected: boolean;
 }) {
-  const { setErrorData } = useContext(alertContext);
-  const showError = useRef(true);
-  const { types, deleteNode } = useContext(typesContext);
-  const Icon = nodeIcons[types[data.type]];
-  if (!Icon) {
-    if (showError.current) {
-      setErrorData({
-        title: data.type
-          ? `The ${data.type} node could not be rendered, please review your json file`
-          : "There was a node that can't be rendered, please review your json file",
-      });
-      showError.current = false;
-    }
-    return;
-  }
-  return (
-    <div
-      className={classNames(
-        selected ? "border border-blue-500" : "border dark:border-gray-700",
-        "prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
-      )}
-    >
-      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
-        <div className="w-full flex items-center truncate gap-4 text-lg">
-          <Icon
-            className="w-10 h-10 p-1 rounded"
-            style={{
-              color: nodeColors[types[data.type]] ?? nodeColors.unknown,
-            }}
-          />
-          <div className="truncate">{data.type}</div>
-        </div>
-        <button
-          onClick={() => {
-            deleteNode(data.id);
-          }}
-        >
-          <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
-        </button>
-      </div>
+	const { setErrorData } = useContext(alertContext);
+	const showError = useRef(true);
+	const { types, deleteNode } = useContext(typesContext);
+	const Icon = nodeIcons[types[data.type]];
+	if (!Icon) {
+		if (showError.current) {
+			setErrorData({
+				title: data.type
+					? `The ${data.type} node could not be rendered, please review your json file`
+					: "There was a node that can't be rendered, please review your json file",
+			});
+			showError.current = false;
+		}
+		return;
+	}
+	return (
+		<div
+			className={classNames(
+				selected ? "border border-blue-500" : "border dark:border-gray-700",
+				"prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
+			)}
+		>
+			<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
+				<div className="w-full flex items-center truncate gap-4 text-lg">
+					<Icon
+						className="w-10 h-10 p-1 rounded"
+						style={{
+							color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+						}}
+					/>
+					<div className="truncate">{data.type}</div>
+				</div>
+				<button
+					onClick={() => {
+						deleteNode(data.id);
+					}}
+				>
+					<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
+				</button>
+			</div>
 
-      <div className="w-full h-full py-5">
-        <div className="w-full text-gray-500 px-5 text-sm">
-          {data.node.description}
-        </div>
+			<div className="w-full h-full py-5">
+				<div className="w-full text-gray-500 px-5 text-sm">
+					{data.node.description}
+				</div>
 
-        <>
-          {Object.keys(data.node.template)
-            .filter((t) => t.charAt(0) !== "_")
-            .map((t: string, idx) => (
-              <div key={idx}>
-                {idx === 0 ? (
-                  <div className="px-5 py-2 mt-2 dark:text-white text-center">
-                    Inputs:
-                  </div>
-                ) : (
-                  <></>
-                )}
-                {data.node.template[t].show ? (
-                  <ParameterComponent
-                    data={data}
-                    color={
-                      nodeColors[types[data.node.template[t].type]] ??
-                      nodeColors.unknown
-                    }
-                    title={snakeToNormalCase(t)}
-                    name={t}
-                    tooltipTitle={
-                      "Type: " +
-                      data.node.template[t].type +
-                      (data.node.template[t].list ? " list" : "")
-                    }
-                    required={data.node.template[t].required}
-                    id={data.node.template[t].type + "|" + t + "|" + data.id}
-                    left={true}
-                    type={data.node.template[t].type}
-                  />
-                ) : (
-                  <></>
-                )}
-              </div>
-            ))}
-          {data.node.base_classes.map((c, idx) => (
-            <div key={idx}>
-              {idx === 0 ? (
-                <div className="px-5 py-2 mt-2 dark:text-white text-center">
-                  Outputs:
-                </div>
-              ) : (
-                <></>
-              )}
-              <ParameterComponent
-                data={data}
-                color={nodeColors[types[c]] ?? nodeColors.unknown}
-                title={c}
-                tooltipTitle={`Type: ${c}`}
-                id={[data.type, data.id, c].join("|")}
-                type={c}
-                left={false}
-              />
-            </div>
-          ))}
-        </>
-      </div>
-    </div>
-  );
+				<>
+					{Object.keys(data.node.template)
+						.filter((t) => t.charAt(0) !== "_")
+						.map((t: string, idx) => (
+							<div key={idx}>
+								{idx === 0 ? (
+									<div className="px-5 py-2 mt-2 dark:text-white text-center">
+										Inputs
+									</div>
+								) : (
+									<></>
+								)}
+								{data.node.template[t].show ? (
+									<ParameterComponent
+										data={data}
+										color={
+											nodeColors[types[data.node.template[t].type]] ??
+											nodeColors.unknown
+										}
+										title={snakeToNormalCase(t)}
+										name={t}
+										tooltipTitle={
+											"Type: " +
+											data.node.template[t].type +
+											(data.node.template[t].list ? " list" : "")
+										}
+										required={data.node.template[t].required}
+										id={data.node.template[t].type + "|" + t + "|" + data.id}
+										left={true}
+										type={data.node.template[t].type}
+									/>
+								) : (
+									<></>
+								)}
+							</div>
+						))}
+					<div className="px-5 py-2 mt-2 dark:text-white text-center">
+						Output
+					</div>
+					<ParameterComponent
+						data={data}
+						color={nodeColors[types[data.type]] ?? nodeColors.unknown}
+						title={data.node.base_classes.join(" | ")}
+						tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
+						id={[data.type, data.id, ...data.node.base_classes].join("|")}
+						type={data.node.base_classes.join("|")}
+						left={false}
+					/>
+				</>
+			</div>
+		</div>
+	);
 }