diff --git a/shell/components/Resource/Detail/ResourcePopover/index.vue b/shell/components/Resource/Detail/ResourcePopover/index.vue
index 01a740a70c8..f68490c4819 100644
--- a/shell/components/Resource/Detail/ResourcePopover/index.vue
+++ b/shell/components/Resource/Detail/ResourcePopover/index.vue
@@ -31,6 +31,10 @@ const fetch = useFetch(async() => {
   return r;
 });
 
+const stateBackground = computed(() => {
+  return fetch.value.data?.stateBackground?.replace('bg-', '') || 'unknown';
+});
+
 const resourceTypeLabel = computed(() => {
   if (!fetch.value.data) {
     return '';
@@ -67,7 +71,7 @@ const actionInvoked = () => {
       >
         <RcStatusIndicator
           shape="disc"
-          :status="fetch.data?.stateBackground || 'unknown'"
+          :status="stateBackground"
         />
         <router-link
           :to="props.detailLocation || fetch.data.detailLocation || '#'"