diff --git a/ui/src/app/applications/components/application-details/application-resource-list.tsx b/ui/src/app/applications/components/application-details/application-resource-list.tsx
index dba61c5135492..61c05df4a02f6 100644
--- a/ui/src/app/applications/components/application-details/application-resource-list.tsx
+++ b/ui/src/app/applications/components/application-details/application-resource-list.tsx
@@ -15,7 +15,7 @@ export const ApplicationResourceList = ({
     resources,
     onNodeClick,
     nodeMenu,
-    tree
+    tree,
 }: {
     resources: models.ResourceStatus[];
     onNodeClick?: (fullName: string) => any;
@@ -30,36 +30,43 @@ export const ApplicationResourceList = ({
         }
         return null;
     }
-    const parentNode = ((resources || []).length > 0 && (getResNode(tree.nodes, nodeKey(resources[0])) as ResourceNode)?.parentRefs?.[0]) || ({} as ResourceRef);
+    const parentNode = resources?.length > 0 && (getResNode(tree.nodes, nodeKey(resources[0]))?.parentRefs?.[0] || ({} as ResourceRef));
 
+    const ParenRefDetails = () => {
+        return (
+            <div className='resource-parent-node-info-title'>
+                <div>Parent Node Info</div>
+                <div className='resource-parent-node-info-title__label'>
+                    <div>Name:</div>
+                    <div>{parentNode?.name}</div>
+                </div>
+                <div className='resource-parent-node-info-title__label'>
+                    <div>Kind:</div>
+                    <div>{parentNode?.kind}</div>
+                </div>
+            </div>
+        );
+    };
     return (
         <div>
-            <div className='resource-details__header' style={{paddingTop: '20px'}}>
-                {Object.keys(parentNode).length > 0 && (
-                    <div className='resource-parent-node-info-title'>
-                        <div> Parent Node Info</div>
-                        <div className='resource-parent-node-info-title__label'>
-                            <div>Name:</div>
-                            <div>{parentNode?.name}</div>
-                        </div>
-                        <div className='resource-parent-node-info-title__label'>
-                            <div>Kind:</div>
-                            <div> {parentNode?.kind}</div>
-                        </div>
-                    </div>
-                )}
-            </div>
+            {/*Display only when the resource list is of the same type*/}
+            {resources.every(res => res.kind === resources[0].kind) && (
+                <div className='resource-details__header' style={{paddingTop: '20px'}}>
+                    <ParenRefDetails />
+                </div>
+            )}
+
             <div className='argo-table-list argo-table-list--clickable'>
                 <div className='argo-table-list__head'>
                     <div className='row'>
-                        <div className='columns small-1 xxxlarge-1' />
-                        <div className='columns small-2 xxxlarge-2'>NAME</div>
-                        <div className='columns small-1 xxxlarge-1'>GROUP/KIND</div>
-                        <div className='columns small-1 xxxlarge-1'>SYNC ORDER</div>
-                        <div className='columns small-2 xxxlarge-2'>NAMESPACE</div>
-                        {(parentNode.kind === 'Rollout' || parentNode.kind === 'Deployment') && <div className='columns small-1 xxxlarge-1'>REVISION</div>}
-                        <div className='columns small-2 xxxlarge-2'>CREATED AT</div>
-                        <div className='columns small-2 xxxlarge-2'>STATUS</div>
+                        <div className='columns small-2 xxxlarge-1' />
+                        <div className='columns small-2 xxxlarge-1'>NAME</div>
+                        <div className='columns small-2 xxxlarge-1'>GROUP/KIND</div>
+                        <div className='columns small-2 xxxlarge-1'>SYNC ORDER</div>
+                        <div className='columns small-2 xxxlarge-1'>NAMESPACE</div>
+                        {(parentNode.kind === 'Rollout' || parentNode.kind === 'Deployment') && <div className='columns small-2 xxxlarge-1'>REVISION</div>}
+                        <div className='columns small-2 xxxlarge-1'>CREATED AT</div>
+                        <div className='columns small-2 xxxlarge-1'>STATUS</div>
                     </div>
                 </div>
                 {resources
@@ -68,18 +75,18 @@ export const ApplicationResourceList = ({
                         <div
                             key={nodeKey(res)}
                             className={classNames('argo-table-list__row', {
-                                'application-resource-tree__node--orphaned': res.orphaned
+                                'application-resource-tree__node--orphaned': res.orphaned,
                             })}
                             onClick={() => onNodeClick(nodeKey(res))}>
                             <div className='row'>
-                                <div className='columns small-1 xxxlarge-1'>
+                                <div className='columns small-2 xxxlarge-1'>
                                     <div className='application-details__resource-icon'>
                                         <ResourceIcon kind={res.kind} />
                                         <br />
                                         <div>{ResourceLabel({kind: res.kind})}</div>
                                     </div>
                                 </div>
-                                <div className='columns small-2 xxxlarge-2'>
+                                <div className='columns small-2 xxxlarge-1'>
                                     {res.name}
                                     {res.kind === 'Application' && (
                                         <Consumer>
@@ -93,22 +100,22 @@ export const ApplicationResourceList = ({
                                         </Consumer>
                                     )}
                                 </div>
-                                <div className='columns small-1 xxxlarge-1'>{[res.group, res.kind].filter(item => !!item).join('/')}</div>
-                                <div className='columns small-1 xxxlarge-1'>{res.syncWave || '-'}</div>
-                                <div className='columns small-2 xxxlarge-2'>{res.namespace}</div>
+                                <div className='columns small-2 xxxlarge-1'>{[res.group, res.kind].filter(item => !!item).join('/')}</div>
+                                <div className='columns small-2 xxxlarge-1'>{res.syncWave || '-'}</div>
+                                <div className='columns small-2 xxxlarge-1'>{res.namespace}</div>
                                 {res.kind === 'ReplicaSet' &&
                                     ((getResNode(tree.nodes, nodeKey(res)) as ResourceNode).info || [])
                                         .filter(tag => !tag.name.includes('Node'))
                                         .slice(0, 4)
                                         .map((tag, i) => {
                                             return (
-                                                <div key={i} className='columns small-1 xxxlarge-1'>
+                                                <div key={i} className='columns small-2 xxxlarge-1'>
                                                     {tag?.value?.split(':')[1] || '-'}
                                                 </div>
                                             );
                                         })}
 
-                                <div className='columns small-2 xxxlarge-2'>
+                                <div className='columns small-2 xxxlarge-1'>
                                     {res.createdAt && (
                                         <span>
                                             <Moment fromNow={true} ago={true}>
@@ -118,7 +125,7 @@ export const ApplicationResourceList = ({
                                         </span>
                                     )}
                                 </div>
-                                <div className='columns small-2 xxxlarge-2'>
+                                <div className='columns small-2 columns small-2 xxxlarge-1'>
                                     {res.health && (
                                         <React.Fragment>
                                             <HealthStatusIcon state={res.health} /> {res.health.status} &nbsp;
@@ -143,7 +150,7 @@ export const ApplicationResourceList = ({
                                                 info: null,
                                                 uid: '',
                                                 resourceVersion: null,
-                                                parentRefs: []
+                                                parentRefs: [],
                                             })}
                                         </DropDown>
                                     </div>