diff --git a/src/renderer/components/ui/Badge.tsx b/src/renderer/components/ui/Badge.tsx
index 7519ec6d..244f6485 100644
--- a/src/renderer/components/ui/Badge.tsx
+++ b/src/renderer/components/ui/Badge.tsx
@@ -1,6 +1,10 @@
 export function Badge({ count, tone = "default" }: { count: number; tone?: "default" | "warn" | "danger" }) {
   if (count <= 0) return null;
-  const toneClass = tone === "danger" ? "bg-destructive text-primary-foreground" : tone === "warn" ? "bg-warning text-primary-foreground" : "bg-[color:var(--muted-foreground)] text-primary-foreground";
+  const toneClass = tone === "danger"
+    ? "bg-destructive text-destructive-foreground"
+    : tone === "warn"
+    ? "bg-warning text-warning-foreground"
+    : "bg-muted text-muted-foreground";
   return (
     <span className={`ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1.5 text-[10px] font-bold ${toneClass}`}>
       {count > 99 ? "99+" : count}
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 7f125960..d3c9e1f0 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -142,9 +142,9 @@
   --popover-foreground: oklch(0.959 0.008 95);
   --primary: oklch(0.462 0.096 255);
   --primary-foreground: oklch(0.959 0.008 95);
-  --secondary: oklch(0.296 0.014 80);
+  --secondary: oklch(0.360 0.014 80);
   --secondary-foreground: oklch(0.770 0.015 85);
-  --muted: oklch(0.296 0.014 80);
+  --muted: oklch(0.360 0.014 80);
   --muted-foreground: oklch(0.770 0.015 85);
   --accent: oklch(0.320 0.035 245);
   --accent-foreground: oklch(0.959 0.008 95);