diff --git a/src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx b/src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx
index f684a902f..0a0b05738 100644
--- a/src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx
@@ -12,6 +12,7 @@ import { outputComponentType } from "../../../../types/components";
 import { NodeDataType } from "../../../../types/flow";
 import { cn } from "../../../../utils/utils";
 import { Button } from "../../../../components/ui/button";
+import ShadTooltip from "../../../../components/shadTooltipComponent";
 
 export default function OutputComponent({
   selected,
@@ -20,6 +21,7 @@ export default function OutputComponent({
   nodeId,
   idx,
   name,
+  proxy,
 }: outputComponentType) {
   const setNode = useFlowStore((state) => state.setNode);
   const updateNodeInternals = useUpdateNodeInternals();
@@ -64,7 +66,13 @@ export default function OutputComponent({
           ))}
         </DropdownMenuContent>
       </DropdownMenu>
-      <span>{name}</span>
+      {proxy ? (
+        <ShadTooltip content={<span>{proxy.id}</span>}>
+          <span>{name}</span>
+        </ShadTooltip>
+      ) : (
+        <span>{name}</span>
+      )}
     </div>
   );
 }
diff --git a/src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx
index 84e4587b1..3c35515f0 100644
--- a/src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx
@@ -61,6 +61,7 @@ export default function ParameterComponent({
   showNode,
   index,
   outputName,
+  outputProxy,
 }: ParameterComponentType): JSX.Element {
   const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
   const nodes = useFlowStore((state) => state.nodes);
@@ -79,8 +80,7 @@ export default function ParameterComponent({
     handleUpdateValues,
     debouncedHandleUpdateValues,
     setNode,
-    isLoading,
-    setIsLoading
+    setIsLoading,
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -88,7 +88,7 @@ export default function ParameterComponent({
     name,
     takeSnapshot,
     setNode,
-    updateNodeInternals
+    updateNodeInternals,
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -97,7 +97,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -108,7 +108,7 @@ export default function ParameterComponent({
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false
+    skipSnapshot: boolean | undefined = false,
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -133,6 +133,7 @@ export default function ParameterComponent({
   function renderTitle() {
     return !left ? (
       <OutputComponent
+        proxy={outputProxy}
         idx={index}
         types={type?.split("|") ?? []}
         selected={
@@ -194,14 +195,14 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : ""
+                !showNode ? "mt-0" : "",
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
               }}
               onClick={() => {
                 setFilterEdge(
-                  groupByFamily(myData, tooltipTitle!, left, nodes!)
+                  groupByFamily(myData, tooltipTitle!, left, nodes!),
                 );
               }}
             ></Handle>
@@ -286,12 +287,12 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background"
+                    "h-3 w-3 rounded-full border-2 bg-background",
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => {
                     setFilterEdge(
-                      groupByFamily(myData, tooltipTitle!, left, nodes!)
+                      groupByFamily(myData, tooltipTitle!, left, nodes!),
                     );
                   }}
                 />
diff --git a/src/frontend/src/CustomNodes/genericNode/index.tsx b/src/frontend/src/CustomNodes/genericNode/index.tsx
index 2e15ae6ec..c1c05f68d 100644
--- a/src/frontend/src/CustomNodes/genericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/genericNode/index.tsx
@@ -837,7 +837,8 @@ export default function GenericNode({
                       nodeColors[types[data.type]] ??
                       nodeColors.unknown
                     }
-                    title={output.name}
+                    outputProxy={output.proxy}
+                    title={output.display_name ?? output.name}
                     tooltipTitle={output.selected ?? output.types[0]}
                     id={{
                       output_types: [output.selected ?? output.types[0]],
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 9c5c02b21..25e6b6643 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -11,7 +11,6 @@ import ReactFlow, {
   SelectionDragHandler,
   updateEdge,
 } from "reactflow";
-import GenericNode from "../../../../CustomNodes/GenericNode";
 import {
   INVALID_SELECTION_ERROR_ALERT,
   UPLOAD_ALERT_LIST,
@@ -38,6 +37,7 @@ import ConnectionLineComponent from "../ConnectionLineComponent";
 import SelectionMenu from "../SelectionMenuComponent";
 import getRandomName from "./utils/get-random-name";
 import isWrappedWithClass from "./utils/is-wrapped-with-class";
+import GenericNode from "../../../../CustomNodes/genericNode";
 
 const nodeTypes = {
   genericNode: GenericNode,
@@ -52,19 +52,19 @@ export default function Page({
 }): JSX.Element {
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const autoSaveCurrentFlow = useFlowsManagerStore(
-    (state) => state.autoSaveCurrentFlow
+    (state) => state.autoSaveCurrentFlow,
   );
   const types = useTypesStore((state) => state.types);
   const templates = useTypesStore((state) => state.templates);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [showCanvas, setSHowCanvas] = useState(
-    Object.keys(templates).length > 0 && Object.keys(types).length > 0
+    Object.keys(templates).length > 0 && Object.keys(types).length > 0,
   );
 
   const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
   const setReactFlowInstance = useFlowStore(
-    (state) => state.setReactFlowInstance
+    (state) => state.setReactFlowInstance,
   );
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -81,10 +81,10 @@ export default function Page({
   const paste = useFlowStore((state) => state.paste);
   const resetFlow = useFlowStore((state) => state.resetFlow);
   const lastCopiedSelection = useFlowStore(
-    (state) => state.lastCopiedSelection
+    (state) => state.lastCopiedSelection,
   );
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection
+    (state) => state.setLastCopiedSelection,
   );
   const onConnect = useFlowStore((state) => state.onConnect);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@@ -107,7 +107,7 @@ export default function Page({
         clonedSelection!,
         clonedNodes,
         clonedEdges,
-        getRandomName()
+        getRandomName(),
       );
       const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
       // const newEdges = reconnectEdges(newGroupNode, removedEdges);
@@ -115,8 +115,8 @@ export default function Page({
         ...clonedNodes.filter(
           (oldNodes) =>
             !clonedSelection?.nodes.some(
-              (selectionNode) => selectionNode.id === oldNodes.id
-            )
+              (selectionNode) => selectionNode.id === oldNodes.id,
+            ),
         ),
         newGroupNode,
       ]);
@@ -180,7 +180,7 @@ export default function Page({
           {
             x: position.current.x,
             y: position.current.y,
-          }
+          },
         );
       }
       if (!isWrappedWithClass(event, "noundo")) {
@@ -276,7 +276,7 @@ export default function Page({
 
   useEffect(() => {
     setSHowCanvas(
-      Object.keys(templates).length > 0 && Object.keys(types).length > 0
+      Object.keys(templates).length > 0 && Object.keys(types).length > 0,
     );
   }, [templates, types]);
 
@@ -285,7 +285,7 @@ export default function Page({
       takeSnapshot();
       onConnect(params);
     },
-    [takeSnapshot, onConnect]
+    [takeSnapshot, onConnect],
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -326,7 +326,7 @@ export default function Page({
 
         // Extract the data from the drag event and parse it as a JSON object
         const data: { type: string; node?: APIClassType } = JSON.parse(
-          event.dataTransfer.getData("nodedata")
+          event.dataTransfer.getData("nodedata"),
         );
 
         const newId = getNodeId(data.type);
@@ -342,7 +342,7 @@ export default function Page({
         };
         paste(
           { nodes: [newNode], edges: [] },
-          { x: event.clientX, y: event.clientY }
+          { x: event.clientX, y: event.clientY },
         );
       } else if (event.dataTransfer.types.some((types) => types === "Files")) {
         takeSnapshot();
@@ -371,7 +371,7 @@ export default function Page({
       }
     },
     // Specify dependencies for useCallback
-    [getNodeId, setNodes, takeSnapshot, paste]
+    [getNodeId, setNodes, takeSnapshot, paste],
   );
 
   const onEdgeUpdateStart = useCallback(() => {
@@ -387,7 +387,7 @@ export default function Page({
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    [setEdges]
+    [setEdges],
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@@ -420,7 +420,7 @@ export default function Page({
     (flow: OnSelectionChangeParams): void => {
       setLastSelection(flow);
     },
-    []
+    [],
   );
 
   const onPaneClick = useCallback((flow) => {
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index bb36564f8..4eea200b9 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -63,12 +63,19 @@ export type InputFieldType = {
   refresh_button_text?: string;
   [key: string]: any;
 };
+
+export type OutputFieldProxyType = {
+  id: string;
+  name: string;
+  nodeDisplayName: string;
+};
+
 export type OutputFieldType = {
   types: Array<string>;
   selected?: string;
   name: string;
-  displayName?: string;
-  proxy?: { id: string; name: string };
+  display_name: string;
+  proxy?: OutputFieldProxyType;
 };
 export type sendAllProps = {
   nodes: Node[];
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index ba6cab7b8..edcda4a25 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -1,7 +1,12 @@
 import { ReactElement, ReactNode, SetStateAction } from "react";
 import { ReactFlowJsonObject } from "reactflow";
 import { InputOutput } from "../../constants/enums";
-import { APIClassType, APITemplateType, InputFieldType } from "../api";
+import {
+  APIClassType,
+  APITemplateType,
+  InputFieldType,
+  OutputFieldProxyType,
+} from "../api";
 import { ChatMessageType } from "../chat";
 import { FlowStyleType, FlowType, NodeDataType, NodeType } from "../flow/index";
 import { sourceHandleType, targetHandleType } from "./../flow/index";
@@ -71,6 +76,7 @@ export type ParameterComponentType = {
   index: number;
   onCloseModal?: (close: boolean) => void;
   outputName?: string;
+  outputProxy?: OutputFieldProxyType;
 };
 export type InputListComponentType = {
   value: string[];
@@ -120,6 +126,7 @@ export type outputComponentType = {
   frozen?: boolean;
   idx: number;
   name: string;
+  proxy?: OutputFieldProxyType;
 };
 
 export type PromptAreaComponentType = {
@@ -528,7 +535,7 @@ export type nodeToolbarPropsType = {
   updateNodeCode?: (
     newNodeClass: APIClassType,
     code: string,
-    name: string
+    name: string,
   ) => void;
   setShowState: (show: boolean | SetStateAction<boolean>) => void;
   isOutdated?: boolean;
@@ -578,7 +585,7 @@ export type chatMessagePropsType = {
   updateChat: (
     chat: ChatMessageType,
     message: string,
-    stream_url?: string
+    stream_url?: string,
   ) => void;
 };
 
@@ -670,12 +677,12 @@ export type codeTabsPropsType = {
       value: string,
       node: NodeType,
       template: InputFieldType,
-      tweak: tweakType
+      tweak: tweakType,
     ) => string;
     buildTweakObject?: (
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: InputFieldType
+      template: InputFieldType,
     ) => Promise<string | void>;
   };
   activeTweaks?: boolean;
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 37c81cd42..12a5f1c2d 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -483,6 +483,7 @@ export function updateNewOutput({ nodes, edges }: updateEdgesHandleIdsType) {
             types,
             selected: selected,
             name: types.join(" | "),
+            display_name: types.join(" | "),
           });
         }
       }
@@ -1048,9 +1049,14 @@ function generateNodeOutputs(flow: FlowType) {
           outputs.push(
             cloneDeep({
               ...output,
-              proxy: { id: node.id, name: output.name },
+              proxy: {
+                id: node.id,
+                name: output.name,
+                nodeDisplayName:
+                  node.data.node!.display_name ?? node.data.node!.name,
+              },
               name: node.id + "_" + output.name,
-              displayName: output.displayName,
+              displayName: output.display_name,
             }),
           );
         }