diff --git a/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts b/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts
index 6bdbed59f0d2b..b89f2eb551f38 100644
--- a/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts
+++ b/x-pack/solutions/observability/plugins/apm/common/service_health_status.ts
@@ -8,6 +8,7 @@
 import { i18n } from '@kbn/i18n';
 import type { EuiThemeComputed } from '@elastic/eui';
 import { ML_ANOMALY_SEVERITY } from '@kbn/ml-anomaly-utils/anomaly_severity';
+import type { NamedColor } from '@elastic/eui/src/components/icon/named_colors';
 
 export enum ServiceHealthStatus {
   healthy = 'healthy',
@@ -50,19 +51,16 @@ export function getServiceHealthStatusColor(
   }
 }
 
-export function getServiceHealthStatusBadgeColor(
-  euiTheme: EuiThemeComputed,
-  status: ServiceHealthStatus
-) {
+export function getServiceHealthStatusBadgeColor(status: ServiceHealthStatus): NamedColor {
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return euiTheme.colors.severity.success;
+      return 'success';
     case ServiceHealthStatus.warning:
-      return euiTheme.colors.severity.warning;
+      return 'warning';
     case ServiceHealthStatus.critical:
-      return euiTheme.colors.severity.risk;
+      return 'danger';
     case ServiceHealthStatus.unknown:
-      return euiTheme.colors.mediumShade;
+      return 'default';
   }
 }
 
diff --git a/x-pack/solutions/observability/plugins/apm/public/components/app/service_inventory/service_list/health_badge.tsx b/x-pack/solutions/observability/plugins/apm/public/components/app/service_inventory/service_list/health_badge.tsx
index 0cfe5b9539f53..ef4c08f665758 100644
--- a/x-pack/solutions/observability/plugins/apm/public/components/app/service_inventory/service_list/health_badge.tsx
+++ b/x-pack/solutions/observability/plugins/apm/public/components/app/service_inventory/service_list/health_badge.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiBadge, useEuiTheme } from '@elastic/eui';
+import { EuiBadge } from '@elastic/eui';
 import type { ServiceHealthStatus } from '../../../../../common/service_health_status';
 import {
   getServiceHealthStatusBadgeColor,
@@ -14,10 +14,8 @@ import {
 } from '../../../../../common/service_health_status';
 
 export function HealthBadge({ healthStatus }: { healthStatus: ServiceHealthStatus }) {
-  const { euiTheme } = useEuiTheme();
-
   return (
-    <EuiBadge color={getServiceHealthStatusBadgeColor(euiTheme, healthStatus)}>
+    <EuiBadge color={getServiceHealthStatusBadgeColor(healthStatus)}>
       {getServiceHealthStatusLabel(healthStatus)}
     </EuiBadge>
   );