diff --git a/src/app/badges/page.tsx b/src/app/badges/page.tsx
new file mode 100644
index 00000000..0318756e
--- /dev/null
+++ b/src/app/badges/page.tsx
@@ -0,0 +1,226 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { getBenchmarksSafe } from "@/data/benchmarks";
+import { BadgesCatalog, type BadgePair } from "@/components/badges-catalog";
+import { pageMetadata } from "@/lib/page-metadata";
+import { safeJsonLd, buildBreadcrumbJsonLd } from "@/lib/jsonld";
+import { SITE } from "@/data/site";
+
+/**
+ * Public discovery page for the per-(benchmark, provider) badge endpoints.
+ *
+ * The /api/badge/<bench>/<provider> route has been live for months and
+ * powers per-row embed buttons on bench pages and the /partners docs,
+ * but nothing on the site lets a visitor browse what is available.
+ * This page is the shields.io-style catalog: search, filter, preview,
+ * copy. Also doubles as a backlink generator: every embedded snippet
+ * is one more link back to a bench page.
+ *
+ * Loads from `getBenchmarksSafe` so a Prom blackout still renders the
+ * shell with whatever the carry-forward snapshot holds. Pairs that
+ * have no live rank are filtered out so the page never advertises a
+ * "rank N/A" badge.
+ */
+
+export const revalidate = 600;
+
+const DESCRIPTION =
+  "Browse every live ranking badge published by OpenChainBench. Search by provider or category, preview the SVG, then copy a Markdown, HTML, URL or JSON snippet for your README, docs or marketing page. Free, CC-BY-4.0.";
+
+export const metadata: Metadata = pageMetadata({
+  path: "/badges",
+  title: "Live ranking badges",
+  description: DESCRIPTION,
+});
+
+/** Hand-picked example pairs surfaced in the hero preview row. Each one
+ *  is a recognisable leader the page can safely showcase. Pairs missing
+ *  from the live snapshot (provider absent, bench in draft) are silently
+ *  skipped so a transient outage doesn't break the layout. */
+const PREVIEW_PAIRS: Array<{ bench: string; provider: string }> = [
+  { bench: "bridge-fee", provider: "mobula" },
+  { bench: "perp-fees", provider: "lighter" },
+  { bench: "rpc-capabilities", provider: "drpc" },
+  { bench: "nft-collection-metadata", provider: "moralis" },
+  { bench: "pm-api-latency", provider: "polymarket" },
+];
+
+export default async function BadgesPage() {
+  const benchmarks = await getBenchmarksSafe();
+
+  const live = benchmarks.filter((b) => b.editorialStatus === "live");
+
+  // Flat list of (bench, provider) pairs the catalog can browse. Each
+  // entry carries the ranked position so the card can flash "#1/12"
+  // without an extra fetch. Sort order: best ranks first inside each
+  // bench, benches grouped alphabetically by category then title.
+  const pairs: BadgePair[] = [];
+  for (const b of live) {
+    const livePr = b.results.filter((r) => r.ms.p50 > 0);
+    if (livePr.length === 0) continue;
+    const sorted = [...livePr].sort((a, c) =>
+      b.higherIsBetter ? c.ms.p50 - a.ms.p50 : a.ms.p50 - c.ms.p50,
+    );
+    sorted.forEach((r, idx) => {
+      pairs.push({
+        benchSlug: b.slug,
+        benchTitle: b.title,
+        benchCategory: b.category,
+        providerSlug: r.slug,
+        providerName: r.name,
+        rank: idx + 1,
+        total: sorted.length,
+        dimensions: {
+          chain: b.dimensions?.chain,
+          region: b.dimensions?.region,
+        },
+      });
+    });
+  }
+  pairs.sort((a, b) => {
+    if (a.benchCategory !== b.benchCategory)
+      return a.benchCategory.localeCompare(b.benchCategory);
+    if (a.benchTitle !== b.benchTitle)
+      return a.benchTitle.localeCompare(b.benchTitle);
+    return a.rank - b.rank;
+  });
+
+  // Lookup table so the hero preview row can resolve the canonical
+  // provider name + alt text without a second pass over the snapshot.
+  const pairKey = (bench: string, provider: string) => `${bench}|${provider}`;
+  const pairIndex = new Map(
+    pairs.map((p) => [pairKey(p.benchSlug, p.providerSlug), p]),
+  );
+  const previewItems = PREVIEW_PAIRS.map((p) =>
+    pairIndex.get(pairKey(p.bench, p.provider)),
+  ).filter((p): p is BadgePair => Boolean(p));
+
+  const collectionLd = {
+    "@context": "https://schema.org",
+    "@type": "CollectionPage",
+    name: "OpenChainBench live ranking badges",
+    description: DESCRIPTION,
+    url: `${SITE.url}/badges`,
+    isPartOf: {
+      "@type": "WebSite",
+      name: SITE.name,
+      url: SITE.url,
+    },
+    mainEntity: {
+      "@type": "ItemList",
+      name: "OpenChainBench badges",
+      numberOfItems: pairs.length,
+      itemListElement: pairs.slice(0, 100).map((p, i) => ({
+        "@type": "ListItem",
+        position: i + 1,
+        name: `${p.providerName} on ${p.benchTitle}`,
+        url: `${SITE.url}/api/badge/${p.benchSlug}/${p.providerSlug}`,
+      })),
+    },
+  };
+
+  const breadcrumbLd = {
+    "@context": "https://schema.org",
+    ...buildBreadcrumbJsonLd([
+      { name: "Home", item: SITE.url },
+      { name: "Badges", item: `${SITE.url}/badges` },
+    ]),
+  };
+
+  return (
+    <article className="mx-auto max-w-[1400px] px-4 sm:px-6 py-12 sm:py-16">
+      <script
+        type="application/ld+json"
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: serialized via safeJsonLd
+        dangerouslySetInnerHTML={{ __html: safeJsonLd(collectionLd) }}
+      />
+      <script
+        type="application/ld+json"
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: serialized via safeJsonLd
+        dangerouslySetInnerHTML={{ __html: safeJsonLd(breadcrumbLd) }}
+      />
+
+      {/* Section 1: hero */}
+      <header className="mb-12 max-w-3xl">
+        <p className="label-mono text-ink-faint mb-2">Embeds</p>
+        <h1 className="display text-4xl sm:text-5xl text-ink">
+          Live ranking badges
+        </h1>
+        <p className="mt-4 text-base sm:text-lg text-ink-soft leading-snug">
+          Embed your live OpenChainBench rank in your README, docs, or
+          marketing page. Every badge auto-refreshes when our benchmarks
+          run. Free, no signup.
+        </p>
+      </header>
+
+      {/* Section 2: live preview row */}
+      {previewItems.length > 0 && (
+        <section aria-label="Featured badges" className="mb-14">
+          <p className="label-mono text-ink-faint mb-3">Live examples</p>
+          <ul className="flex flex-wrap gap-3">
+            {previewItems.map((p) => (
+              <li key={pairKey(p.benchSlug, p.providerSlug)}>
+                <Link
+                  href={`/benchmarks/${p.benchSlug}`}
+                  className="inline-block rounded border border-rule bg-paper-soft p-2 hover:border-ink/40 transition-colors"
+                  aria-label={`See ${p.providerName} on ${p.benchTitle}`}
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={`/api/badge/${p.benchSlug}/${p.providerSlug}`}
+                    alt={`Live badge for ${p.providerName} on ${p.benchTitle}`}
+                    className="max-w-full h-auto"
+                    loading="eager"
+                    decoding="async"
+                  />
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/* Section 3: catalog */}
+      <section aria-label="Badge catalog">
+        <header className="mb-6 flex flex-wrap items-end justify-between gap-3">
+          <div>
+            <h2 className="display text-2xl sm:text-3xl text-ink">
+              Catalog
+            </h2>
+            <p className="mt-2 text-sm text-ink-soft max-w-2xl">
+              One card per (provider, benchmark) pair. {pairs.length}{" "}
+              badges across {live.length} benchmarks. Click a card for
+              the embed snippet.
+            </p>
+          </div>
+        </header>
+        <BadgesCatalog pairs={pairs} />
+      </section>
+
+      {/* Section 5: footer */}
+      <footer className="mt-16 border-t border-rule pt-8 flex flex-wrap items-center justify-between gap-4">
+        <p className="text-sm text-ink-soft max-w-xl">
+          Built for providers who want to display real, third-party
+          verified rankings.
+        </p>
+        <ul className="flex flex-wrap items-center gap-4 text-sm">
+          <li>
+            <Link href="/methodology" className="lnk text-ink-muted hover:text-ink">
+              View methodology
+            </Link>
+          </li>
+          <li>
+            <Link href="/benchmarks" className="lnk text-ink-muted hover:text-ink">
+              View all benchmarks
+            </Link>
+          </li>
+          <li>
+            <Link href="/partners" className="lnk text-ink-muted hover:text-ink">
+              Partner docs
+            </Link>
+          </li>
+        </ul>
+      </footer>
+    </article>
+  );
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index bc89abbf..690c98da 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -86,6 +86,7 @@ function staticHubRoutes(catalogTs: Date): MetadataRoute.Sitemap {
     { url: `${SITE.url}/methodology`, lastModified: pageMtime("methodology/page.tsx"), changeFrequency: "monthly", priority: 0.7 },
     { url: `${SITE.url}/contribute`, lastModified: pageMtime("contribute/page.tsx"), changeFrequency: "monthly", priority: 0.7 },
     { url: `${SITE.url}/partners`, lastModified: pageMtime("partners/page.tsx"), changeFrequency: "monthly", priority: 0.7 },
+    { url: `${SITE.url}/badges`, lastModified: catalogTs, changeFrequency: "daily", priority: 0.7 },
     { url: `${SITE.url}/about`, lastModified: pageMtime("about/page.tsx"), changeFrequency: "monthly", priority: 0.5 },
     { url: `${SITE.url}/press`, lastModified: pageMtime("press/page.tsx"), changeFrequency: "monthly", priority: 0.4 },
     { url: `${SITE.url}/compare`, lastModified: pageMtime("compare/page.tsx"), changeFrequency: "weekly", priority: 0.6 },
diff --git a/src/components/badges-catalog.tsx b/src/components/badges-catalog.tsx
new file mode 100644
index 00000000..f9ab9cf2
--- /dev/null
+++ b/src/components/badges-catalog.tsx
@@ -0,0 +1,494 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Code2, Loader2, Search, X } from "lucide-react";
+import { CopyButton } from "@/components/copy-button";
+import { ProviderLogo } from "@/components/provider-logo";
+
+/**
+ * Public discovery surface for the per-(benchmark, provider) badge SVGs
+ * already served from /api/badge/<bench>/<provider>. Renders a filterable
+ * grid of cards and an embed-snippet modal with optional chain / region
+ * scope controls when the parent bench declares those dimensions.
+ *
+ * Server hands in the flat list of pairs so the search index is a single
+ * prerendered array; the snippet payload for each (pair, format, scope)
+ * is fetched on demand from the existing /snippet?format= route so a
+ * change of scope in the modal is one network call, not a page rebuild.
+ */
+
+export type BadgePair = {
+  benchSlug: string;
+  benchTitle: string;
+  benchCategory: string;
+  providerSlug: string;
+  providerName: string;
+  /** Live rank position (1-indexed) on the unfiltered ranking. */
+  rank: number;
+  /** Number of live providers ranked on this bench. */
+  total: number;
+  /** Optional scope dimensions surfaced by the modal as dropdowns. */
+  dimensions?: {
+    chain?: { value: string; label: string }[];
+    region?: { value: string; label: string }[];
+  };
+};
+
+type Format = "markdown" | "html" | "url" | "json";
+
+const FORMATS: { id: Format; label: string }[] = [
+  { id: "markdown", label: "Markdown" },
+  { id: "html", label: "HTML" },
+  { id: "url", label: "URL" },
+  { id: "json", label: "JSON" },
+];
+
+export function BadgesCatalog({ pairs }: { pairs: BadgePair[] }) {
+  const [query, setQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+  const [open, setOpen] = useState<BadgePair | null>(null);
+
+  const categories = useMemo(() => {
+    const seen = new Set<string>();
+    const list: string[] = [];
+    for (const p of pairs) {
+      if (!seen.has(p.benchCategory)) {
+        seen.add(p.benchCategory);
+        list.push(p.benchCategory);
+      }
+    }
+    return list.sort();
+  }, [pairs]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return pairs.filter((p) => {
+      if (activeCategory && p.benchCategory !== activeCategory) return false;
+      if (!q) return true;
+      return (
+        p.providerName.toLowerCase().includes(q) ||
+        p.providerSlug.toLowerCase().includes(q) ||
+        p.benchTitle.toLowerCase().includes(q) ||
+        p.benchSlug.toLowerCase().includes(q)
+      );
+    });
+  }, [pairs, query, activeCategory]);
+
+  return (
+    <div>
+      {/* Filter bar */}
+      <div className="mb-8 flex flex-col gap-4">
+        <ul className="-mx-4 px-4 sm:mx-0 sm:px-0 flex flex-nowrap sm:flex-wrap items-center gap-2 overflow-x-auto sm:overflow-visible [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          <li>
+            <button
+              type="button"
+              className="pill"
+              data-active={activeCategory === null}
+              onClick={() => setActiveCategory(null)}
+            >
+              All
+            </button>
+          </li>
+          {categories.map((c) => (
+            <li key={c}>
+              <button
+                type="button"
+                className="pill"
+                data-active={activeCategory === c}
+                onClick={() =>
+                  setActiveCategory(activeCategory === c ? null : c)
+                }
+              >
+                {c}
+              </button>
+            </li>
+          ))}
+        </ul>
+
+        <label className="group relative flex items-center w-full sm:max-w-sm">
+          <Search
+            size={13}
+            strokeWidth={2}
+            className="absolute left-3 text-ink-faint group-focus-within:text-ink-muted pointer-events-none"
+          />
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search provider or benchmark"
+            className="w-full pl-8 pr-3 py-2 text-sm bg-surface border border-rule rounded-md focus:outline-none focus:border-ink/40 placeholder:text-ink-faint transition-colors"
+          />
+        </label>
+
+        <p className="label-mono text-ink-faint">
+          {filtered.length} {filtered.length === 1 ? "badge" : "badges"}{" "}
+          available
+        </p>
+      </div>
+
+      {/* Grid */}
+      {filtered.length === 0 ? (
+        <div className="card p-10 text-center">
+          <p className="text-sm text-ink-muted">
+            No badge matches that search.
+          </p>
+        </div>
+      ) : (
+        <ul className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+          {filtered.map((p) => (
+            <li key={`${p.benchSlug}|${p.providerSlug}`}>
+              <BadgeCard pair={p} onOpen={() => setOpen(p)} />
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {open && (
+        <EmbedModal pair={open} onClose={() => setOpen(null)} />
+      )}
+    </div>
+  );
+}
+
+function BadgeCard({
+  pair,
+  onOpen,
+}: {
+  pair: BadgePair;
+  onOpen: () => void;
+}) {
+  const badgeUrl = `/api/badge/${pair.benchSlug}/${pair.providerSlug}`;
+  return (
+    <div className="card-soft p-5 flex flex-col gap-4 h-full">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 min-w-0">
+          <ProviderLogo
+            slug={pair.providerSlug}
+            name={pair.providerName}
+            size={24}
+          />
+          <div className="min-w-0">
+            <p className="text-sm font-semibold text-ink truncate">
+              {pair.providerName}
+            </p>
+            <p className="label-mono text-ink-faint truncate">
+              {pair.benchCategory}
+            </p>
+          </div>
+        </div>
+        <span
+          className="label-mono shrink-0 px-1.5 py-0.5 rounded border border-rule text-ink-muted tabular"
+          title={`Ranked ${pair.rank} of ${pair.total}`}
+        >
+          #{pair.rank}/{pair.total}
+        </span>
+      </div>
+
+      <p className="text-[13px] text-ink-soft leading-snug line-clamp-2 min-h-[36px]">
+        {pair.benchTitle}
+      </p>
+
+      <div className="rounded border border-rule bg-paper-soft p-2 flex items-center justify-center min-h-[60px] overflow-hidden">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={badgeUrl}
+          alt={`Live badge for ${pair.providerName} on ${pair.benchTitle}`}
+          loading="lazy"
+          decoding="async"
+          className="max-w-full h-auto"
+        />
+      </div>
+
+      <button
+        type="button"
+        onClick={onOpen}
+        className="mt-auto inline-flex items-center justify-center gap-1.5 self-start rounded border border-rule px-2.5 py-1 text-[11px] uppercase tracking-[0.14em] text-ink-muted hover:text-ink hover:border-ink transition-colors font-medium"
+      >
+        <Code2 size={12} strokeWidth={2} />
+        Get embed code
+      </button>
+    </div>
+  );
+}
+
+function EmbedModal({
+  pair,
+  onClose,
+}: {
+  pair: BadgePair;
+  onClose: () => void;
+}) {
+  const [active, setActive] = useState<Format>("markdown");
+  const [chain, setChain] = useState<string>("");
+  const [region, setRegion] = useState<string>("");
+  const [snippets, setSnippets] = useState<Record<Format, string> | null>(null);
+  const [badgeUrl, setBadgeUrl] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+
+  const chainDims = (pair.dimensions?.chain ?? []).filter(
+    (c) => c.value.toLowerCase() !== "all",
+  );
+  const regionDims = (pair.dimensions?.region ?? []).filter(
+    (r) => r.value.toLowerCase() !== "all",
+  );
+
+  const scopeQs = useMemo(() => {
+    const qs = new URLSearchParams();
+    if (chain) qs.set("chain", chain);
+    if (region) qs.set("region", region);
+    return qs.toString();
+  }, [chain, region]);
+
+  // Reset cached payload during render when the fetch identity changes
+  // instead of dispatching setState inside the effect body (which trips
+  // `react-hooks/set-state-in-effect`). The fetch itself still runs in
+  // the effect below.
+  const fetchKey = `${pair.benchSlug}|${pair.providerSlug}|${scopeQs}`;
+  const [prevFetchKey, setPrevFetchKey] = useState(fetchKey);
+  if (prevFetchKey !== fetchKey) {
+    setPrevFetchKey(fetchKey);
+    setSnippets(null);
+    setBadgeUrl(null);
+    setError(false);
+  }
+
+  // Refetch all four formats whenever the pair or scope changes. Four
+  // parallel calls hit the CDN-cached snippet route; first paint usually
+  // arrives within a single network round-trip.
+  useEffect(() => {
+    let cancelled = false;
+    const base = `/api/badge/${pair.benchSlug}/${pair.providerSlug}/snippet`;
+    const suffix = scopeQs ? `&${scopeQs}` : "";
+    Promise.all([
+      fetch(`${base}?format=json${suffix}`).then((r) =>
+        r.ok ? r.json() : Promise.reject(new Error(`json ${r.status}`)),
+      ),
+      fetch(`${base}?format=markdown${suffix}`).then((r) =>
+        r.ok ? r.text() : Promise.reject(new Error(`md ${r.status}`)),
+      ),
+      fetch(`${base}?format=html${suffix}`).then((r) =>
+        r.ok ? r.text() : Promise.reject(new Error(`html ${r.status}`)),
+      ),
+      fetch(`${base}?format=url${suffix}`).then((r) =>
+        r.ok ? r.text() : Promise.reject(new Error(`url ${r.status}`)),
+      ),
+    ])
+      .then(([jsonPayload, markdown, html, url]) => {
+        if (cancelled) return;
+        setSnippets({
+          markdown: markdown.trim(),
+          html: html.trim(),
+          url: url.trim(),
+          json: JSON.stringify(jsonPayload, null, 2),
+        });
+        setBadgeUrl(
+          typeof jsonPayload?.badge_url === "string"
+            ? jsonPayload.badge_url
+            : null,
+        );
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        if (process.env.NODE_ENV !== "production") {
+          console.debug("[badges-catalog] snippet fetch failed", err);
+        }
+        setError(true);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [pair.benchSlug, pair.providerSlug, scopeQs]);
+
+  // Esc to close + body scroll lock + focus management.
+  useEffect(() => {
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+
+    const focusTimer = window.setTimeout(() => {
+      const focusables = dialogRef.current?.querySelectorAll<HTMLElement>(
+        'button, [href], textarea, input, select, [tabindex]:not([tabindex="-1"])',
+      );
+      focusables?.[0]?.focus();
+    }, 0);
+
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      window.removeEventListener("keydown", onKey);
+      window.clearTimeout(focusTimer);
+      previouslyFocused?.focus?.();
+    };
+  }, [onClose]);
+
+  const ariaLabel = `Embed badge for ${pair.providerName} on ${pair.benchTitle}`;
+  const currentSnippet = snippets?.[active] ?? "";
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-ink/40 backdrop-blur-sm p-4 sm:p-8"
+      onClick={onClose}
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        className="card-soft relative w-full max-w-2xl rounded-md border border-rule bg-paper shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-rule px-4 sm:px-5 py-3">
+          <div className="min-w-0">
+            <p className="label-mono text-ink-faint">Embed badge</p>
+            <p className="mt-0.5 text-[13px] font-medium text-ink truncate">
+              {pair.providerName} on {pair.benchTitle}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            className="text-ink-muted hover:text-ink transition-colors shrink-0 ml-3"
+          >
+            <X size={18} strokeWidth={2} />
+          </button>
+        </div>
+
+        <div className="px-4 sm:px-5 py-4 space-y-4">
+          {/* Live preview */}
+          <div className="rounded border border-rule bg-paper-soft p-3 flex items-center justify-center min-h-[68px]">
+            {badgeUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={badgeUrl}
+                alt={`Live badge for ${pair.providerName} on ${pair.benchTitle}`}
+                className="max-w-full h-auto"
+              />
+            ) : error ? (
+              <span className="text-[11px] text-ink-muted">
+                Could not load the badge preview.
+              </span>
+            ) : (
+              <span className="inline-flex items-center gap-2 text-[11px] text-ink-muted">
+                <Loader2 size={14} className="animate-spin" />
+                Loading badge
+              </span>
+            )}
+          </div>
+
+          {/* Optional scope controls */}
+          {(chainDims.length > 0 || regionDims.length > 0) && (
+            <div className="flex flex-wrap gap-3">
+              {chainDims.length > 0 && (
+                <ScopeSelect
+                  label="Chain"
+                  value={chain}
+                  onChange={setChain}
+                  options={chainDims}
+                />
+              )}
+              {regionDims.length > 0 && (
+                <ScopeSelect
+                  label="Region"
+                  value={region}
+                  onChange={setRegion}
+                  options={regionDims}
+                />
+              )}
+            </div>
+          )}
+
+          {/* Format tabs */}
+          <div
+            role="tablist"
+            aria-label="Snippet format"
+            className="flex flex-wrap items-center gap-1 border border-rule rounded p-1 bg-paper-soft w-fit"
+          >
+            {FORMATS.map((f) => (
+              <button
+                key={f.id}
+                role="tab"
+                type="button"
+                aria-selected={active === f.id}
+                onClick={() => setActive(f.id)}
+                className={`label-mono px-2.5 py-1 rounded transition-colors ${
+                  active === f.id
+                    ? "bg-paper text-ink shadow-sm"
+                    : "text-ink-muted hover:text-ink"
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Snippet */}
+          <div className="space-y-2">
+            <textarea
+              readOnly
+              value={
+                error
+                  ? "Failed to load snippet."
+                  : (currentSnippet || "Loading…")
+              }
+              rows={active === "json" ? 10 : 4}
+              aria-label={`${active.toUpperCase()} snippet`}
+              className="w-full font-mono text-[11px] bg-paper-soft border border-rule rounded p-3 resize-none text-ink whitespace-pre overflow-x-auto"
+              onFocus={(e) => e.currentTarget.select()}
+            />
+            <div className="flex items-center justify-end">
+              <CopyButton
+                value={currentSnippet}
+                label={`Copy ${active}`}
+              />
+            </div>
+          </div>
+
+          <p className="text-[11px] text-ink-muted leading-relaxed border-t border-rule pt-3">
+            Free to embed under CC-BY-4.0. Badge auto-refreshes every five
+            minutes from openchainbench.com.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ScopeSelect({
+  label,
+  value,
+  onChange,
+  options,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  options: { value: string; label: string }[];
+}) {
+  return (
+    <label className="flex flex-col gap-1 text-[11px] text-ink-muted">
+      <span className="label-mono text-ink-faint">{label}</span>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="bg-surface border border-rule rounded px-2 py-1.5 text-sm text-ink focus:outline-none focus:border-ink/40"
+      >
+        <option value="">All</option>
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
diff --git a/src/components/site-footer.tsx b/src/components/site-footer.tsx
index 597fbd05..35376674 100644
--- a/src/components/site-footer.tsx
+++ b/src/components/site-footer.tsx
@@ -42,6 +42,7 @@ export function SiteFooter() {
             title="Developers"
             links={[
               { label: "Partners + embeds", href: "/partners" },
+              { label: "Badges catalog", href: "/badges" },
               { label: "MCP server", href: "/mcp" },
               { label: "OpenAPI spec", href: "/api/openapi.json" },
               { label: "JSON citation", href: "/api/citable" },