diff --git a/ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap b/ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap
index 9ca8303ca5388..c3756c3510277 100644
--- a/ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap
+++ b/ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`HealthStatusIcon.Missing 1`] = `
   qe-id="utils-health-status-title"
   style={
     Object {
-      "color": "#CCD6DD",
+      "color": "#f4c030",
     }
   }
   title="Missing"
@@ -106,7 +106,7 @@ exports[`HealthStatusIcon.Suspended 1`] = `
   qe-id="utils-health-status-title"
   style={
     Object {
-      "color": "#CCD6DD",
+      "color": "#766f94",
     }
   }
   title="Suspended"
diff --git a/ui/src/app/applications/components/applications-list/applications-list.scss b/ui/src/app/applications/components/applications-list/applications-list.scss
index 12d4fb96a2c71..75051ad0ac932 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.scss
+++ b/ui/src/app/applications/components/applications-list/applications-list.scss
@@ -32,34 +32,30 @@
         color: $argo-color-gray-7;
 
         // healthy statuses
-
-        &--comparison-Synced {
-            border-left-color: $argo-success-color;
-        }
-
         &--health-Healthy {
             border-left-color: $argo-success-color;
         }
 
-        // having this higher up ensures that progressing takes precedence
-        &--comparison-OutOfSync {
-            border-left-color: $argo-status-warning-color;
-        }
-
         // intermediate statuses
-
         &--health-Progressing {
             border-left-color: $argo-running-color;
         }
 
-        // failed statuses
+        &--health-Suspended {
+            border-left-color: $argo-suspended-color;
+        }
 
+        // failed statuses
         &--health-Degraded {
             border-left-color: $argo-failed-color;
         }
 
-        &--comparison-Error {
-            border-left-color: $argo-failed-color;
+        &--health-Unknown {
+            border-left-color: $argo-color-gray-4;
+        }
+
+        &--health-Missing {
+            border-left-color: $argo-status-warning-color;
         }
 
         &--actions {
@@ -178,4 +174,16 @@
             top: 200px;
         }
     }
+
+    ul {
+        margin: 0;
+    }
+
+    .chart-group {
+        margin: 0 0.8em;
+    }
+
+    .chart {
+        justify-content: space-evenly;
+    }
 }
diff --git a/ui/src/app/applications/components/applications-list/applications-status-bar.tsx b/ui/src/app/applications/components/applications-list/applications-status-bar.tsx
index 922a9649369d4..9d61598752084 100644
--- a/ui/src/app/applications/components/applications-list/applications-status-bar.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-status-bar.tsx
@@ -1,4 +1,4 @@
-import {Text, Tooltip} from 'argo-ui/v2';
+import {Tooltip} from 'argo-ui/v2';
 import * as React from 'react';
 import {COLORS} from '../../../shared/components';
 import {Consumer} from '../../../shared/context';
@@ -30,12 +30,17 @@ export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps
         {
             name: 'Suspended',
             value: applications.filter(app => app.status.health.status === 'Suspended').length,
-            color: COLORS.sync.out_of_sync
+            color: COLORS.health.suspended
         },
         {
-            name: 'Missing, Unknown',
-            value: applications.filter(app => app.status.health.status === 'Unknown' || app.status.health.status === 'Missing').length,
-            color: '#6D7F8B' // $argo-color-gray-6
+            name: 'Missing',
+            value: applications.filter(app => app.status.health.status === 'Missing').length,
+            color: COLORS.health.missing
+        },
+        {
+            name: 'Unknown',
+            value: applications.filter(app => app.status.health.status === 'Unknown').length,
+            color: COLORS.health.unknown
         }
     ];
 
@@ -46,26 +51,6 @@ export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps
         return total + i.value;
     }, 0);
 
-    const getTooltipContent = (item: {name: string; value: number; color: string}) => {
-        if (item.name === 'Missing, Unknown') {
-            const missing = applications.filter(app => app.status.health.status === 'Missing').length;
-            const unknown = applications.filter(app => app.status.health.status === 'Unknown').length;
-            if (missing) {
-                if (unknown) {
-                    return `${missing} Missing, ${unknown} Unknown`;
-                }
-                return `${missing} Missing`;
-            }
-            return <Text>{unknown} Unknown</Text>;
-        } else {
-            return (
-                <Text>
-                    {item.value} {item.name}
-                </Text>
-            );
-        }
-    };
-
     return (
         <Consumer>
             {ctx => (
@@ -78,7 +63,7 @@ export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps
                                     if (item.value > 0) {
                                         return (
                                             <div className='status-bar__segment' style={{backgroundColor: item.color, width: (item.value / totalItems) * 100 + '%'}} key={i}>
-                                                <Tooltip content={getTooltipContent(item)} inverted={true}>
+                                                <Tooltip content={`${item.value} ${item.name}`} inverted={true}>
                                                     <div className='status-bar__segment__fill' />
                                                 </Tooltip>
                                             </div>
diff --git a/ui/src/app/applications/components/applications-list/applications-summary.tsx b/ui/src/app/applications/components/applications-list/applications-summary.tsx
index f60be26aa258e..9fc78169ea700 100644
--- a/ui/src/app/applications/components/applications-list/applications-summary.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-summary.tsx
@@ -3,18 +3,21 @@ const PieChart = require('react-svg-piechart').default;
 
 import {COLORS} from '../../../shared/components';
 import * as models from '../../../shared/models';
+import {HealthStatusCode, SyncStatusCode} from '../../../shared/models';
+import {ComparisonStatusIcon, HealthStatusIcon} from '../utils';
 
 const healthColors = new Map<models.HealthStatusCode, string>();
-healthColors.set('Healthy', COLORS.health.healthy);
+healthColors.set('Unknown', COLORS.health.unknown);
 healthColors.set('Progressing', COLORS.health.progressing);
+healthColors.set('Suspended', COLORS.health.suspended);
+healthColors.set('Healthy', COLORS.health.healthy);
 healthColors.set('Degraded', COLORS.health.degraded);
 healthColors.set('Missing', COLORS.health.missing);
-healthColors.set('Unknown', COLORS.health.unknown);
 
 const syncColors = new Map<models.SyncStatusCode, string>();
+syncColors.set('Unknown', COLORS.sync.unknown);
 syncColors.set('Synced', COLORS.sync.synced);
 syncColors.set('OutOfSync', COLORS.sync.out_of_sync);
-syncColors.set('Unknown', COLORS.sync.unknown);
 
 export const ApplicationsSummary = ({applications}: {applications: models.Application[]}) => {
     const sync = new Map<string, number>();
@@ -73,27 +76,39 @@ export const ApplicationsSummary = ({applications}: {applications: models.Applic
                         ))}
                     </div>
                 </div>
-                {charts.map(chart => (
-                    <React.Fragment key={chart.title}>
-                        <div className='columns large-4 small-12'>
-                            <div className='row'>
-                                <div className='columns large-10 small-6'>
-                                    <h4 style={{textAlign: 'center'}}>{chart.title}</h4>
-                                    <PieChart data={chart.data} />
-                                </div>
-                                <div className='columns large-1 small-1'>
-                                    <ul>
-                                        {Array.from(chart.legend.keys()).map(key => (
-                                            <li style={{color: chart.legend.get(key)}} key={key}>
-                                                {key}
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </React.Fragment>
-                ))}
+                <div className='columns large-9 small-12'>
+                    <div className='row chart-group'>
+                        {charts.map(chart => {
+                            const getLegendValue = (key: string) => {
+                                const index = chart.data.findIndex((data: {title: string}) => data.title === key);
+                                return index > -1 ? chart.data[index].value : 0;
+                            };
+                            return (
+                                <React.Fragment key={chart.title}>
+                                    <div className='columns large-6 small-12'>
+                                        <div className='row chart'>
+                                            <div className='large-8 small-6'>
+                                                <h4 style={{textAlign: 'center'}}>{chart.title}</h4>
+                                                <PieChart data={chart.data} />
+                                            </div>
+                                            <div className='large-3 small-1'>
+                                                <ul>
+                                                    {Array.from(chart.legend.keys()).map(key => (
+                                                        <li style={{listStyle: 'none', whiteSpace: 'nowrap'}} key={key}>
+                                                            {chart.title === 'Health' && <HealthStatusIcon state={{status: key as HealthStatusCode, message: ''}} noSpin={true} />}
+                                                            {chart.title === 'Sync' && <ComparisonStatusIcon status={key as SyncStatusCode} noSpin={true} />}
+                                                            {` ${key} (${getLegendValue(key)})`}
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </React.Fragment>
+                            );
+                        })}
+                    </div>
+                </div>
             </div>
         </div>
     );
diff --git a/ui/src/app/applications/components/applications-list/applications-table.tsx b/ui/src/app/applications/components/applications-list/applications-table.tsx
index b5231ea6035dc..d8ced3906c901 100644
--- a/ui/src/app/applications/components/applications-list/applications-table.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-table.tsx
@@ -39,8 +39,7 @@ export const ApplicationsTable = (props: {
                         <div
                             key={app.metadata.name}
                             className={`argo-table-list__row
-                applications-list__entry applications-list__entry--comparison-${app.status.sync.status}
-                applications-list__entry--health-${app.status.health.status} ${selectedApp === i ? 'applications-tiles__selected' : ''}`}>
+                applications-list__entry applications-list__entry--health-${app.status.health.status} ${selectedApp === i ? 'applications-tiles__selected' : ''}`}>
                             <div className={`row applications-list__table-row`} onClick={e => ctx.navigation.goto(`/applications/${app.metadata.name}`, {}, {event: e})}>
                                 <div className='columns small-4'>
                                     <div className='row'>
diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
index 9e0cffb62db3f..db59938703851 100644
--- a/ui/src/app/applications/components/applications-list/applications-tiles.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -105,9 +105,9 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
                         <div key={app.metadata.name} className='column column-block'>
                             <div
                                 ref={appRef.set ? null : appRef.ref}
-                                className={`argo-table-list__row applications-list__entry applications-list__entry--comparison-${
-                                    app.status.sync.status
-                                } applications-list__entry--health-${app.status.health.status} ${selectedApp === i ? 'applications-tiles__selected' : ''}`}>
+                                className={`argo-table-list__row applications-list__entry applications-list__entry--health-${app.status.health.status} ${
+                                    selectedApp === i ? 'applications-tiles__selected' : ''
+                                }`}>
                                 <div className='row' onClick={e => ctx.navigation.goto(`/applications/${app.metadata.name}`, {}, {event: e})}>
                                     <div className={`columns small-12 applications-list__info qe-applications-list-${app.metadata.name}`}>
                                         <div className='applications-list__external-link'>
diff --git a/ui/src/app/shared/components/colors.ts b/ui/src/app/shared/components/colors.ts
index 72974551c96fc..9f38d3f925442 100644
--- a/ui/src/app/shared/components/colors.ts
+++ b/ui/src/app/shared/components/colors.ts
@@ -4,6 +4,7 @@ export const ARGO_FAILED_COLOR = '#E96D76';
 export const ARGO_RUNNING_COLOR = '#0DADEA';
 export const ARGO_GRAY4_COLOR = '#CCD6DD';
 export const ARGO_TERMINATING_COLOR = '#DE303D';
+export const ARGO_SUSPENDED_COLOR = '#766f94';
 
 export const COLORS = {
     connection_status: {
@@ -14,9 +15,9 @@ export const COLORS = {
     health: {
         degraded: ARGO_FAILED_COLOR,
         healthy: ARGO_SUCCESS_COLOR,
-        missing: ARGO_GRAY4_COLOR,
+        missing: ARGO_WARNING_COLOR,
         progressing: ARGO_RUNNING_COLOR,
-        suspended: ARGO_GRAY4_COLOR,
+        suspended: ARGO_SUSPENDED_COLOR,
         unknown: ARGO_GRAY4_COLOR
     },
     operation: {
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 0a0a592ee4425..a67bda5a1dc81 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1669,7 +1669,7 @@ are-we-there-yet@~1.1.2:
 
 "argo-ui@git+https://github.com/argoproj/argo-ui.git":
   version "1.0.0"
-  resolved "git+https://github.com/argoproj/argo-ui.git#a7be8b3208549c7cf5a0b9531ca41af5614f0eda"
+  resolved "git+https://github.com/argoproj/argo-ui.git#270fe1a236185a94693ae56939042b393e5c0239"
   dependencies:
     "@fortawesome/fontawesome-free" "^5.8.1"
     "@tippy.js/react" "^2.1.2"