diff --git a/src/components/topbar/CloudBadge.vue b/src/components/topbar/CloudBadge.vue
index 93772f7f4..897ab5144 100644
--- a/src/components/topbar/CloudBadge.vue
+++ b/src/components/topbar/CloudBadge.vue
@@ -27,7 +27,7 @@ withDefaults(
     displayMode: 'full',
     reverseOrder: false,
     noPadding: false,
-    backgroundColor: 'var(--comfy-menu-bg)'
+    backgroundColor: 'var(--comfy-menu-secondary-bg)'
   }
 )
 
diff --git a/src/components/topbar/TopbarBadge.vue b/src/components/topbar/TopbarBadge.vue
index 9a766f85a..6a2732a88 100644
--- a/src/components/topbar/TopbarBadge.vue
+++ b/src/components/topbar/TopbarBadge.vue
@@ -141,7 +141,7 @@ const props = withDefaults(
     displayMode: 'full',
     reverseOrder: false,
     noPadding: false,
-    backgroundColor: 'var(--comfy-menu-bg)'
+    backgroundColor: 'var(--comfy-menu-secondary-bg)'
   }
 )
 
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index 2903d5e8b..fa751d47b 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -5,7 +5,10 @@
         <h2 class="text-2xl">
           {{ $t('subscription.title') }}
         </h2>
-        <CloudBadge reverse-order />
+        <CloudBadge
+          reverse-order
+          background-color="var(--p-dialog-background)"
+        />
       </div>
 
       <div class="grow overflow-auto">