diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
index 58406d8e6555d..97af322dee989 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
@@ -37,19 +37,27 @@ const METRIC_ITEM_HEIGHT = 160;
 
 export const getColor = (euiTheme: EuiThemeComputed, isEnabled: boolean, status?: string) => {
   if (!isEnabled) {
-    return euiTheme.colors.lightestShade;
+    return euiTheme.colors.backgroundBaseDisabled;
   }
   const isAmsterdam = euiTheme.flags.hasVisColorAdjustment;
 
+  // make sure these are synced with slo card colors while making changes
+
   switch (status) {
     case 'down':
-      return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText9 : euiTheme.colors.danger;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText9
+        : euiTheme.colors.backgroundBaseDanger;
     case 'up':
-      return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText0 : euiTheme.colors.success;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText0
+        : euiTheme.colors.backgroundBaseSuccess;
     case 'unknown':
-      return euiTheme.colors.ghost;
+      return euiTheme.colors.backgroundBasePlain;
     default:
-      return isAmsterdam ? euiTheme.colors.vis.euiColorVisBehindText0 : euiTheme.colors.success;
+      return isAmsterdam
+        ? euiTheme.colors.vis.euiColorVisBehindText0
+        : euiTheme.colors.backgroundBaseSuccess;
   }
 };