diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index c9844a47d..1f5a168f8 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -138,9 +138,8 @@ export default function GenericNode({
     const iconColor = nodeColors[types[data.type]];
     const iconName =
       iconElement || (data.node?.flow ? "group_components" : name);
-    const iconClassName = `generic-node-icon ${
-      !showNode ? " absolute inset-x-6 h-12 w-12 " : ""
-    }`;
+    const iconClassName = `generic-node-icon ${!showNode ? " absolute inset-x-6 h-12 w-12 " : ""
+      }`;
     if (iconElement && isEmoji) {
       return nodeIconFragment(iconElement);
     } else {
@@ -268,7 +267,7 @@ export default function GenericNode({
           numberOfHandles={handles}
           showNode={showNode}
           openAdvancedModal={false}
-          onCloseAdvancedModal={() => {}}
+          onCloseAdvancedModal={() => { }}
           selected={selected}
         ></NodeToolbarComponent>
       </NodeToolbar>
@@ -390,13 +389,28 @@ export default function GenericNode({
                             })}
                             data={data}
                             color={
-                              nodeColors[
-                                types[data.node?.template[templateField].type!]
-                              ] ??
-                              nodeColors[
+                              data.node?.template[templateField].input_types &&
+                                data.node?.template[templateField].input_types!
+                                  .length > 0
+                                ? nodeColors[
+                                data.node?.template[templateField]
+                                  .input_types![data.node?.template[templateField]
+                                  .input_types!.length - 1]
+                                ] ??
+                                nodeColors[
+                                types[
+                                data.node?.template[templateField]
+                                  .input_types![data.node?.template[templateField]
+                                  .input_types!.length - 1]
+                                ]
+                                ]
+                                : nodeColors[
                                 data.node?.template[templateField].type!
-                              ] ??
-                              nodeColors.unknown
+                                ] ??
+                                nodeColors[
+                                types[data.node?.template[templateField].type!]
+                                ] ??
+                                nodeColors.unknown
                             }
                             title={getFieldTitle(
                               data.node?.template!,
@@ -440,7 +454,7 @@ export default function GenericNode({
                     color={nodeColors[types[data.type]] ?? nodeColors.unknown}
                     title={
                       data.node?.output_types &&
-                      data.node.output_types.length > 0
+                        data.node.output_types.length > 0
                         ? data.node.output_types.join(" | ")
                         : data.type
                     }
@@ -479,10 +493,10 @@ export default function GenericNode({
                         <div className="max-h-96 overflow-auto">
                           {typeof validationStatus.params === "string"
                             ? `${durationString}\n${validationStatus.params}`
-                                .split("\n")
-                                .map((line, index) => (
-                                  <div key={index}>{line}</div>
-                                ))
+                              .split("\n")
+                              .map((line, index) => (
+                                <div key={index}>{line}</div>
+                              ))
                             : durationString}
                         </div>
                       )
@@ -569,7 +583,7 @@ export default function GenericNode({
                   }}
                 >
                   {(data.node?.description === "" || !data.node?.description) &&
-                  nameEditable
+                    nameEditable
                     ? "Double Click to Edit Description"
                     : data.node?.description}
                 </div>
@@ -590,7 +604,7 @@ export default function GenericNode({
                 .map((templateField: string, idx) => (
                   <div key={idx}>
                     {data.node!.template[templateField].show &&
-                    !data.node!.template[templateField].advanced ? (
+                      !data.node!.template[templateField].advanced ? (
                       <ParameterComponent
                         index={idx.toString()}
                         key={scapedJSONStringfy({
@@ -604,25 +618,27 @@ export default function GenericNode({
                         data={data}
                         color={
                           data.node?.template[templateField].input_types &&
-                          data.node?.template[templateField].input_types!
-                            .length > 0
+                            data.node?.template[templateField].input_types!
+                              .length > 0
                             ? nodeColors[
-                                data.node?.template[templateField]
-                                  .input_types![0]
-                              ] ??
-                              nodeColors[
-                                types[
-                                  data.node?.template[templateField]
-                                    .input_types![0]
-                                ]
-                              ]
+                            data.node?.template[templateField]
+                              .input_types![data.node?.template[templateField]
+                                .input_types!.length - 1]
+                            ] ??
+                            nodeColors[
+                            types[
+                            data.node?.template[templateField]
+                              .input_types![data.node?.template[templateField]
+                              .input_types!.length - 1]
+                            ]
+                            ]
                             : nodeColors[
-                                data.node?.template[templateField].type!
-                              ] ??
-                              nodeColors[
-                                types[data.node?.template[templateField].type!]
-                              ] ??
-                              nodeColors.unknown
+                            data.node?.template[templateField].type!
+                            ] ??
+                            nodeColors[
+                            types[data.node?.template[templateField].type!]
+                            ] ??
+                            nodeColors.unknown
                         }
                         title={getFieldTitle(
                           data.node?.template!,
@@ -674,9 +690,9 @@ export default function GenericNode({
                   data={data}
                   color={
                     (data.node?.output_types &&
-                    data.node.output_types.length > 0
+                      data.node.output_types.length > 0
                       ? nodeColors[data.node.output_types[0]] ??
-                        nodeColors[types[data.node.output_types[0]]]
+                      nodeColors[types[data.node.output_types[0]]]
                       : nodeColors[types[data.type]]) ?? nodeColors.unknown
                   }
                   title={