diff --git a/src/renderer/src/components/agent-host-panel/cloud-sections/CloudMissingSecretRow.tsx b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudMissingSecretRow.tsx
index 300e8105d3b..2917af5db7f 100644
--- a/src/renderer/src/components/agent-host-panel/cloud-sections/CloudMissingSecretRow.tsx
+++ b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudMissingSecretRow.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { Loader2 } from 'lucide-react'
 import { useTranslate } from '@/i18n/use-translate'
-import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import {
@@ -82,12 +81,9 @@ export function CloudMissingSecretRow({
     <li className="flex flex-col gap-2 py-2.5">
       <div className="flex min-w-0 items-center gap-2">
         <code className="truncate font-mono text-xs text-foreground">{name}</code>
-        <Badge
-          variant="outline"
-          className="border-status-warning/40 bg-status-warning-background text-status-warning-text"
-        >
+        <span className="inline-flex shrink-0 items-center rounded-full border border-status-warning/40 bg-status-warning-background px-2 py-0.5 text-xs font-medium text-status-warning-text">
           {t('agentHostPanel.env.missing', 'Missing')}
-        </Badge>
+        </span>
         {expanded ? null : !canAdd ? (
           <span className="ms-auto text-end text-xs text-muted-foreground">
             {data.sharing?.ownerName
diff --git a/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.tsx b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.tsx
index eefbedf9b1d..d13f0c4b71e 100644
--- a/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.tsx
+++ b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate, type Translate } from '@/i18n/use-translate'
-import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { InlineError } from '@/components/ui/inline-error'
 import { maskedHint } from '@/components/settings/cloud-secrets/CloudSecretList'
@@ -310,9 +309,9 @@ export function CloudEnvironmentPanelSection({
               row.kind === 'set' ? (
                 <li key={row.name} className="flex min-w-0 flex-wrap items-center gap-2 py-2.5">
                   <code className="truncate font-mono text-xs text-foreground">{row.name}</code>
-                  <Badge variant="outline" className="font-normal text-muted-foreground">
+                  <span className="inline-flex shrink-0 items-center rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
                     {cloudSecretScopeLabel(row.scope, t)}
-                  </Badge>
+                  </span>
                   {row.overrides.length > 0 ? (
                     <span className="text-xs text-muted-foreground">
                       {t('agentHostPanel.env.overrides', 'overrides {{scopes}}', {