diff --git a/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.test.tsx b/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.test.tsx
index 568c8b218bc..1d8a0a6dd84 100644
--- a/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.test.tsx
+++ b/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.test.tsx
@@ -3,7 +3,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import MCPServerPermissions from "./MCPServerPermissions";
 import * as networking from "../networking";
-import { ALL_PROXY_MCP_SERVERS_SENTINEL } from "../mcp_tools/constants";
+import { ALL_PROXY_MCP_SERVERS_SENTINEL, NO_MCP_SERVERS_SENTINEL } from "../mcp_tools/constants";
 
 vi.mock("../networking");
 
@@ -372,4 +372,43 @@ describe("MCPServerPermissions", () => {
     expect(screen.getByText("All")).toBeInTheDocument();
     expect(screen.queryByText(ALL_PROXY_MCP_SERVERS_SENTINEL)).not.toBeInTheDocument();
   });
+
+  it("should use the neutral badge variant unless MCP access is blocked", async () => {
+    /**
+     * The header badge sits next to the Vector Stores and Agents badges, which both render
+     * variant="secondary". "default" renders solid bg-primary (black), so it only belongs on
+     * the blocked state, which uses "destructive".
+     */
+    vi.mocked(networking.fetchMCPServers).mockResolvedValue([]);
+
+    const { rerender } = render(
+      <MCPServerPermissions
+        mcpServers={[]}
+        mcpAccessGroups={[]}
+        mcpToolPermissions={{}}
+        accessToken={mockAccessToken}
+      />,
+    );
+    expect(screen.getByText("0")).toHaveAttribute("data-variant", "secondary");
+
+    rerender(
+      <MCPServerPermissions
+        mcpServers={[ALL_PROXY_MCP_SERVERS_SENTINEL]}
+        mcpAccessGroups={[]}
+        mcpToolPermissions={{}}
+        accessToken={mockAccessToken}
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("All")).toHaveAttribute("data-variant", "secondary"));
+
+    rerender(
+      <MCPServerPermissions
+        mcpServers={[NO_MCP_SERVERS_SENTINEL]}
+        mcpAccessGroups={[]}
+        mcpToolPermissions={{}}
+        accessToken={mockAccessToken}
+      />,
+    );
+    await waitFor(() => expect(screen.getByText("Blocked")).toHaveAttribute("data-variant", "destructive"));
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx b/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx
index 02980cd4c3e..b00fd73c320 100644
--- a/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx
+++ b/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx
@@ -112,7 +112,7 @@ export function MCPServerPermissions({
       <div className="flex items-center gap-2">
         <ServerIcon className="h-4 w-4 text-blue-600" />
         <p className="text-sm font-semibold text-gray-900">MCP Servers</p>
-        <Badge variant={blocksAllMcpServers ? "destructive" : "default"}>
+        <Badge variant={blocksAllMcpServers ? "destructive" : "secondary"}>
           {blocksAllMcpServers ? "Blocked" : grantsAllProxyMcpServers ? "All" : totalCount}
         </Badge>
       </div>