diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index dda444d05..439cf1fe9 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -84,8 +84,9 @@ export default function ParameterComponent({
 
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
-
-    refHtml.current = groupedObj.map((item, i) => (
+      
+  refHtml.current = groupedObj.map((item, i) => {
+    return (
       <span
         key={getRandomKeyByssmm() + item.family + i}
         className={classNames(
@@ -102,7 +103,7 @@ export default function ParameterComponent({
         </div>
         <span className="ps-2 text-gray-950">
           {nodeNames[item.family] ?? ""}{" "}
-          <span className={classNames(left ? "hidden" : "")}>
+          <span>
             {" "}
             -&nbsp;
             {item.type.split(", ").length > 2
@@ -113,14 +114,15 @@ export default function ParameterComponent({
                         ? el
                         : (el += `, `)}
                     </span>
-                    {i % 2 === 0 && i > 0 && <br />}
                   </React.Fragment>
                 ))
               : item.type}
           </span>
         </span>
       </span>
-    ));
+    );
+  });
+  
   }, [tooltipTitle]);
 
   return (
@@ -145,6 +147,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
+            class="max-w-[40vw] max-h-[10vh] overflow-auto custom-scroll"
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/ShadTooltipComponent/index.tsx
index 44ffac075..0aedc5e30 100644
--- a/src/frontend/src/components/ShadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx
@@ -15,6 +15,7 @@ const ShadTooltip = (props) => {
           side={props.side}
           avoidCollisions={false}
           sticky="always"
+          className={props.class}
         >
           {props.content}
         </TooltipContent>
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index f2d5eca43..939461f13 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -841,26 +841,37 @@ export function updateIds(newFlow, getNodeId) {
 export function groupByFamily(data, baseClasses, left, type) {
   let parentOutput: string;
   let arrOfParent: string[] = [];
-  let arrOfType: { family: string; type: string }[] = [];
+  let arrOfType: { family: string; type: string; component: string }[] = [];
+  let arrOfLength: { length: number; type: string; }[] = [];
+  let lastType = "";
   Object.keys(data).map((d) => {
-    Object.keys(data[d]).map((n) => {
-      try {
-        if (
-          data[d][n].base_classes.some((r) =>
-            baseClasses.split("\n").includes(r)
-          )
-        ) {
-          arrOfParent.push(d);
-        }
-        if (n === type) {
-          parentOutput = d;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-    });
+      Object.keys(data[d]).map((n) => {
+          try {
+              if (
+                  data[d][n].base_classes.some((r) =>
+                      baseClasses.split("\n").includes(r)
+                  )
+              ) {
+                  arrOfParent.push(d);
+              }
+              if (n === type) {
+                  parentOutput = d;
+              }
+  
+              if (d !== lastType) {
+                  arrOfLength.push({
+                      length: Object.keys(data[d]).length,
+                      type: d
+                  });
+  
+                  lastType = d;
+              }
+          } catch (e) {
+              console.log(e);
+          }
+      });
   });
-
+  
   Object.keys(data).map((d) => {
     Object.keys(data[d]).map((n) => {
       try {
@@ -870,6 +881,7 @@ export function groupByFamily(data, baseClasses, left, type) {
               arrOfType.push({
                 family: d,
                 type: data,
+                component: n
               });
             }
           });
@@ -880,29 +892,62 @@ export function groupByFamily(data, baseClasses, left, type) {
     });
   });
 
-  let groupedBy = arrOfType.filter((object, index, self) => {
-    const foundIndex = self.findIndex(
-      (o) => o.family === object.family && o.type === object.type
-    );
-    return foundIndex === index;
-  });
+  if(left == false){
+    let groupedBy = arrOfType.filter((object, index, self) => {
+      const foundIndex = self.findIndex(
+        (o) => o.family === object.family && o.type === object.type
+      );
+      return foundIndex === index;
+    });
+  
+    return groupedBy.reduce((result, item) => {
+      const existingGroup = result.find((group) => group.family === item.family);
+  
+      if (existingGroup) {
+        existingGroup.type += `, ${item.type}`;
+      } else {
+        result.push({ family: item.family, type: item.type, component: item.component });
+      }
+  
+      if (left == false) {
+        let resFil = result.filter((group) => group.family === parentOutput);
+        result = resFil;
+      }
+  
+      return result;
+    }, []);
+  }
 
-  return groupedBy.reduce((result, item) => {
-    const existingGroup = result.find((group) => group.family === item.family);
-
-    if (existingGroup) {
-      existingGroup.type += `, ${item.type}`;
-    } else {
-      result.push({ family: item.family, type: item.type });
+  else{
+    const groupedArray = [];
+    const groupedData = {};
+    
+    arrOfType.forEach((item) => {
+        const { family, type, component } = item;
+        const key = `${family}-${type}`;
+    
+        if (!groupedData[key]) {
+            groupedData[key] = { family, type, component: [component] };
+        } else {
+            groupedData[key].component.push(component);
+        }
+    });
+    
+    for (const key in groupedData) {
+        groupedArray.push(groupedData[key]);
     }
 
-    if (left == false) {
-      let resFil = result.filter((group) => group.family === parentOutput);
-      result = resFil;
-    }
-
-    return result;
-  }, []);
+    groupedArray.forEach((object, index, self) => {
+      const findObj = arrOfLength.find(x => x.type == object.family);
+      if(object.component.length == findObj.length){
+        self[index]['type'] = object.type;
+      }
+      else{
+        self[index]['type'] = object.component.join(', ');
+      }
+    })
+    return groupedArray
+  }
 }
 
 export function buildTweaks(flow) {