diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPSubmissionsTab.tsx b/ui/litellm-dashboard/src/components/mcp_tools/MCPSubmissionsTab.tsx
index 74ff0be629c..50d119134f0 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/MCPSubmissionsTab.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/MCPSubmissionsTab.tsx
@@ -277,102 +277,151 @@ function MCPServerCard({ server, onApprove, onReject, requiredFields }: MCPServe
   const checks = MCP_REQUIRED_FIELD_DEFS.filter((f) => requiredFields.includes(f.key)).map((f) => ({
     key: f.key,
     label: f.label,
+    description: f.description,
     passed: f.check(server),
   }));
   const passCount = checks.filter((c) => c.passed).length;
-  const allPassed = checks.length > 0 && passCount === checks.length;
+  const failCount = checks.length - passCount;
+  const allPassed = checks.length > 0 && failCount === 0;
 
   return (
-    <div className="bg-white border border-gray-200 rounded-lg p-4">
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1.5">
-            <span
-              className={`inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full ${statusCfg.bg} ${statusCfg.text}`}
-            >
-              <span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />
-              {statusCfg.label}
-            </span>
-            {checks.length > 0 && (
+    <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+      {/* Server info */}
+      <div className="px-4 pt-4 pb-3">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1.5">
               <span
-                className={`text-xs px-2 py-0.5 rounded-full font-medium ${
-                  allPassed ? "bg-green-50 text-green-700" : "bg-amber-50 text-amber-700"
-                }`}
+                className={`inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full ${statusCfg.bg} ${statusCfg.text}`}
               >
-                {passCount}/{checks.length} checks
+                <span className={`w-1.5 h-1.5 rounded-full ${statusCfg.dot}`} />
+                {statusCfg.label}
               </span>
+            </div>
+            <h3 className="text-sm font-semibold text-gray-900">
+              {server.alias ?? server.server_name ?? server.server_id}
+            </h3>
+            {server.description && (
+              <p className="text-xs text-gray-500 mt-0.5 line-clamp-1">{server.description}</p>
+            )}
+            {server.url && (
+              <div className="flex items-center gap-1.5 mt-1.5">
+                <ServerIcon className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
+                <code className="text-xs text-gray-500 font-mono truncate">{server.url}</code>
+              </div>
+            )}
+            <div className="flex items-center gap-3 mt-1.5 text-xs text-gray-400">
+              <span>Transport: <span className="text-gray-600">{server.transport ?? "sse"}</span></span>
+              <span>·</span>
+              <span>Submitted by: <span className="text-gray-600">{server.submitted_by ?? "—"}</span></span>
+              <span>·</span>
+              <span>{formatDate(server.submitted_at)}</span>
+            </div>
+            {approvalStatus === "rejected" && server.review_notes && (
+              <p className="text-xs text-red-600 mt-1.5">Rejection reason: {server.review_notes}</p>
             )}
           </div>
-          <h3 className="text-sm font-semibold text-gray-900 mb-1">
-            {server.alias ?? server.server_name ?? server.server_id}
-          </h3>
-          {server.description && (
-            <p className="text-xs text-gray-500 mb-2 line-clamp-1">{server.description}</p>
-          )}
-          {server.url && (
-            <div className="flex items-center gap-1.5 mb-2">
-              <ServerIcon className="h-3.5 w-3.5 text-gray-400 flex-shrink-0" />
-              <code className="text-xs text-gray-500 font-mono truncate">{server.url}</code>
-            </div>
-          )}
-          <div className="flex items-center gap-4 text-xs text-gray-500">
-            <span>
-              Transport:{" "}
-              <span className="font-medium text-gray-700">{server.transport ?? "sse"}</span>
-            </span>
-            <span>
-              Submitted by:{" "}
-              <span className="font-medium text-gray-700">{server.submitted_by ?? "—"}</span>
-            </span>
-            <span>
-              Date:{" "}
-              <span className="font-medium text-gray-700">{formatDate(server.submitted_at)}</span>
-            </span>
-          </div>
-          {approvalStatus === "rejected" && server.review_notes && (
-            <p className="text-xs text-red-600 mt-1">
-              Rejection reason: {server.review_notes}
-            </p>
-          )}
-          {checks.length > 0 && (
-            <div className="flex flex-wrap gap-1.5 mt-2 pt-2 border-t border-gray-100">
-              {checks.map((c) => (
-                <span
-                  key={c.key}
-                  className={`inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full ${
-                    c.passed ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"
-                  }`}
-                >
-                  {c.passed ? (
-                    <CheckIcon className="h-3 w-3" />
-                  ) : (
-                    <XIcon className="h-3 w-3" />
-                  )}
-                  {c.label}
-                </span>
-              ))}
+          {/* Approve/Reject when no checks panel (no rules configured) */}
+          {checks.length === 0 && approvalStatus === "pending_review" && (
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <button
+                type="button"
+                onClick={onApprove}
+                className="text-xs bg-green-500 hover:bg-green-600 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
+              >
+                Approve
+              </button>
+              <button
+                type="button"
+                onClick={onReject}
+                className="text-xs border border-red-300 text-red-600 hover:bg-red-50 px-3 py-1.5 rounded-md transition-colors font-medium"
+              >
+                Reject
+              </button>
             </div>
           )}
         </div>
-        {approvalStatus === "pending_review" && (
-          <div className="flex items-center gap-2 flex-shrink-0">
-            <button
-              type="button"
-              onClick={onApprove}
-              className="text-xs bg-green-500 hover:bg-green-600 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
-            >
-              Approve
-            </button>
-            <button
-              type="button"
-              onClick={onReject}
-              className="text-xs border border-red-300 text-red-600 hover:bg-red-50 px-3 py-1.5 rounded-md transition-colors font-medium"
-            >
-              Reject
-            </button>
-          </div>
-        )}
       </div>
+
+      {/* GitHub-style checks panel */}
+      {checks.length > 0 && (
+        <div className="border-t border-gray-200">
+          {/* Overall status header */}
+          <div
+            className={`flex items-center gap-3 px-4 py-3 ${
+              allPassed ? "bg-green-50 border-b border-green-100" : "bg-red-50 border-b border-red-100"
+            }`}
+          >
+            {/* Large status circle */}
+            <div
+              className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
+                allPassed ? "bg-green-500" : "bg-red-500"
+              }`}
+            >
+              {allPassed ? (
+                <CheckIcon className="h-4 w-4 text-white" />
+              ) : (
+                <XIcon className="h-4 w-4 text-white" />
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className={`text-sm font-semibold leading-tight ${allPassed ? "text-green-800" : "text-red-800"}`}>
+                {allPassed
+                  ? "All checks passed"
+                  : `${failCount} check${failCount !== 1 ? "s" : ""} failed`}
+              </div>
+              <div className="text-xs text-gray-500 mt-0.5">
+                {passCount} passing, {failCount} failing
+              </div>
+            </div>
+            {/* Approve / Reject in header */}
+            {approvalStatus === "pending_review" && (
+              <div className="flex items-center gap-2 flex-shrink-0">
+                <button
+                  type="button"
+                  onClick={onApprove}
+                  className="text-xs bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
+                >
+                  Approve
+                </button>
+                <button
+                  type="button"
+                  onClick={onReject}
+                  className="text-xs border border-red-300 text-red-600 hover:bg-red-50 bg-white px-3 py-1.5 rounded-md transition-colors font-medium"
+                >
+                  Reject
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Individual check rows */}
+          <div className="divide-y divide-gray-100">
+            {checks.map((c) => (
+              <div key={c.key} className="flex items-center gap-3 px-4 py-2.5">
+                {/* Small circle icon */}
+                <div
+                  className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 ${
+                    c.passed ? "bg-green-100" : "bg-red-100"
+                  }`}
+                >
+                  {c.passed ? (
+                    <CheckIcon className="h-3 w-3 text-green-600" />
+                  ) : (
+                    <XIcon className="h-3 w-3 text-red-600" />
+                  )}
+                </div>
+                <span className={`text-sm flex-1 ${c.passed ? "text-gray-700" : "text-gray-800"}`}>
+                  {c.label}
+                </span>
+                <span className={`text-xs ${c.passed ? "text-green-600" : "text-red-500"}`}>
+                  {c.passed ? "Passes" : "Missing"}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }