diff --git a/src/App.tsx b/src/App.tsx
index efead44..ed93e73 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useMemo, useRef, lazy, Suspense } from "react";
-import { Routes, Route, NavLink, useNavigate, useLocation } from "react-router-dom";
+import { Routes, Route, NavLink, Navigate, useNavigate, useLocation } from "react-router-dom";
 import { ThemeToggle } from "./ThemeToggle";
 import ServerError from "./components/ServerError";
 import useDocumentTitle from "./hooks/useDocumentTitle";
@@ -24,6 +24,7 @@ import { useSessionExpiry } from "./hooks/useSessionExpiry";
 import SessionExpiryBanner from "./components/SessionExpiryBanner";
 import WalletStatus from "./components/WalletStatus";
 import { useWalletStore } from "./state/walletStore";
+import { useToast } from "./components/Toast";
 
 // Route splitting: dynamic imports for all heavy page routes
 const MarketplacePage = lazy(() => import("./pages/MarketplacePage"));
@@ -216,7 +217,8 @@ const APP_ROUTES = {
   themePlayground: "/theme-playground",
   designSystem: "/design-system/docs",
   serverError: "/500",
-  rateLimitCard: "/rate-limit",
+  rateLimitCard: "/marketplace/:apiId/rate-limits",
+  legacyRateLimit: "/rate-limit",
   slaCard: "/marketplace/:apiId/sla",
   webhookDeliveries: "/webhooks/deliveries",
   onboarding: "/onboarding",
@@ -235,7 +237,11 @@ const PRIMARY_NAV: Array<{ to: string; label: string }> = [
 /** `/rate-limit` no longer exists; limits are per-API. Send users to the Marketplace. */
 function LegacyRateLimitRedirect() {
   const { showToast } = useToast();
+  const announced = useRef(false);
   useEffect(() => {
+    // Guard against StrictMode's double effect invocation in development.
+    if (announced.current) return;
+    announced.current = true;
     showToast("Rate limits are now shown per API. Pick an API to see its limits.");
   }, [showToast]);
   return <Navigate to={APP_ROUTES.marketplace} replace />;
diff --git a/src/RouteSplitting.test.tsx b/src/RouteSplitting.test.tsx
index 7026380..ffb4c2e 100644
--- a/src/RouteSplitting.test.tsx
+++ b/src/RouteSplitting.test.tsx
@@ -70,7 +70,7 @@ describe('Route Splitting and Responsiveness Suite (Quality-2)', () => {
   });
 
   it('dynamically loads Rate Limit Card route inside Suspense boundary', async () => {
-    renderApp('/rate-limit');
+    renderApp('/marketplace/weather-001/rate-limits');
     await waitFor(() => {
       expect(screen.getByRole('heading', { name: /Rate Limit Configuration/i })).toBeTruthy();
     }, { timeout: 4000 });
diff --git a/src/pages/ApiDetailPage.tsx b/src/pages/ApiDetailPage.tsx
index 3b87a63..5f9c155 100644
--- a/src/pages/ApiDetailPage.tsx
+++ b/src/pages/ApiDetailPage.tsx
@@ -1325,6 +1325,15 @@ export default function ApiDetailPage({ onBack }: Props) {
                         View SLA
                       </Link>
                     </div>
+                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: "var(--mkt-space-xs)", borderTop: "1px solid var(--line, rgba(255,255,255,0.06))" }}>
+                      <span style={{ fontSize: 14, color: "var(--muted)" }}>Rate limits</span>
+                      <Link
+                        to={`/marketplace/${api.id}/rate-limits`}
+                        style={{ fontSize: 14, color: "var(--accent)", textDecoration: "none", fontWeight: 500 }}
+                      >
+                        View rate limits
+                      </Link>
+                    </div>
                   </div>
                 </div>
 
diff --git a/src/pages/RateLimitCard.test.tsx b/src/pages/RateLimitCard.test.tsx
index a987481..a42bb81 100644
--- a/src/pages/RateLimitCard.test.tsx
+++ b/src/pages/RateLimitCard.test.tsx
@@ -1,30 +1,48 @@
 // @vitest-environment jsdom
 
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { MemoryRouter } from "react-router-dom";
-import RateLimitCard, { type RateLimitCardProps } from "./RateLimitCard";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import RateLimitCard, { PLAN_PATTERNS, type RateLimitCardProps } from "./RateLimitCard";
+import type { APIItem } from "../data/mockApis";
+import { ROUTE_CATALOGUE } from "../config/routeCatalogue";
 
 /**
- * RateLimitCard tests – issue #567 (GrantFox FWC26 "Stellar Wave")
- * and mobile responsive stacked plan cards.
+ * RateLimitCard tests – per-API rate limits at `/marketplace/:apiId/rate-limits`.
  *
- * Covers:
- *  1. Mobile layout: four plan cards, no table
- *  2. Desktop layout: table with four body rows
- *  3. currentPlan prop: badge and aria-current on card or row
- *  4. Numbers: non-breaking tabular-nums span
- *  5. Pattern text: exposed to assistive tech
- *  6. Style injection: no inline <style> tag rendered by component
- *  7. Breadcrumb presence and middle-ellipsis truncation
+ * Covers loading / ready / not-published / not-found / error states, optional
+ * columns, current-plan marking, mobile cards, breadcrumb and number format.
  */
 
-import RateLimitCard from "./RateLimitCard";
+const FIXTURES: APIItem[] = [
+  {
+    id: "three-tier",
+    name: "Three Tier API",
+    rateLimits: [
+      { plan: "Free", requestsPerMinute: 60, burstLimit: 120, concurrentConnections: 2 },
+      { plan: "Pro", requestsPerMinute: 6000, burstLimit: 9000, concurrentConnections: 50 },
+      { plan: "Enterprise", requestsPerMinute: 120000, burstLimit: 200000, concurrentConnections: 500 },
+    ],
+  },
+  {
+    id: "no-burst",
+    name: "No Burst API",
+    rateLimits: [
+      { plan: "Standard", requestsPerMinute: 300 },
+      { plan: "Premium", requestsPerMinute: 3000 },
+    ],
+  },
+  { id: "unpublished", name: "Unpublished API" },
+] as unknown as APIItem[];
+
+const fetchCatalogMock = vi.fn();
+
+vi.mock("../api/catalogApi", () => ({
+  fetchCatalog: (...args: unknown[]) => fetchCatalogMock(...args),
+  isCatalogAbortError: (err: unknown) =>
+    err instanceof DOMException && err.name === "AbortError",
+}));
 
-/**
- * Forces `window.matchMedia("(max-width: 639px)")` to report a match so the
- * component renders its mobile card layout.
- */
 function mockViewport(isMobile: boolean) {
   const original = window.matchMedia;
   window.matchMedia = vi.fn().mockImplementation((query: string) => ({
@@ -42,17 +60,29 @@ function mockViewport(isMobile: boolean) {
   };
 }
 
-function renderPage(props?: RateLimitCardProps) {
+function renderPage(apiId: string, props: Omit<RateLimitCardProps, "apiId"> = {}) {
   return render(
-    <MemoryRouter>
-      <RateLimitCard {...props} />
+    <MemoryRouter initialEntries={[`/marketplace/${apiId}/rate-limits`]}>
+      <Routes>
+        <Route path="/marketplace/:apiId/rate-limits" element={<RateLimitCard {...props} />} />
+      </Routes>
     </MemoryRouter>,
   );
 }
 
 describe("RateLimitCard", () => {
-  beforeEach(() => vi.clearAllMocks());
-  afterEach(() => cleanup());
+  let restoreViewport: () => void = () => {};
+
+  beforeEach(() => {
+    fetchCatalogMock.mockReset();
+    fetchCatalogMock.mockResolvedValue(FIXTURES);
+    restoreViewport = mockViewport(false);
+  });
+
+  afterEach(() => {
+    cleanup();
+    restoreViewport();
+  });
 
   it("shows a loading state first", () => {
     renderPage("three-tier");
@@ -83,162 +113,73 @@ describe("RateLimitCard", () => {
     expect(screen.queryByRole("table")).toBeNull();
   });
 
-  // ── Rate-limit table (Desktop) ────────────────────────────────────────────
-
-  it("renders the rate-limit tier table", () => {
-    renderPage();
-    expect(screen.getByRole("table", { name: /rate limit tiers/i })).toBeTruthy();
+  it("shows a not-found panel for an unknown id", async () => {
+    renderPage("does-not-exist");
+    const alert = await screen.findByRole("alert");
+    expect(alert.textContent).toMatch(/API Not Found/);
+    expect(within(alert).getByRole("link", { name: /Back to Marketplace/ }).getAttribute("href")).toBe("/marketplace");
   });
 
-  it("renders the table with four body rows on desktop viewports", () => {
-    const { container } = renderPage();
-    const table = screen.getByRole("table", { name: /rate limit tiers/i });
-    expect(table).toBeTruthy();
-    const rows = container.querySelectorAll("tbody tr");
-    expect(rows.length).toBe(4);
-    expect(container.querySelectorAll(".rate-limit-plan-card").length).toBe(0);
-  });
-
-  it("shows all four plan tiers", () => {
-    renderPage();
-    for (const plan of ["Free", "Developer", "Pro", "Enterprise"]) {
-      expect(screen.getByText(plan)).toBeTruthy();
-    }
-    expect(nav.textContent).toContain("Three Tier API");
+  it("shows an error panel when the catalogue fails to load", async () => {
+    fetchCatalogMock.mockRejectedValue(new Error("boom"));
+    renderPage("three-tier");
+    const alert = await screen.findByRole("alert");
+    expect(alert.textContent).toMatch(/unavailable/i);
   });
 
-  it("contains no GrantFox literals", async () => {
-    const { container } = renderPage("three-tier");
+  it("builds a breadcrumb from the API name whose hrefs all resolve to existing routes", async () => {
+    renderPage("three-tier");
     await screen.findByRole("table");
-    expect(container.textContent).not.toMatch(/GrantFox/i);
-  });
-});
-
-  it("renders the throttle note below the table", () => {
-    renderPage();
-    expect(
-      screen.getByText(/rolling 60-second window/i),
-    ).toBeTruthy();
-  });
-
-  // ── Mobile Plan Cards ─────────────────────────────────────────────────────
-
-  it("renders four plan cards and no table on mobile viewports (< 640px)", () => {
-    const restore = mockViewport(true);
-    try {
-      const { container } = renderPage();
-      expect(screen.queryByRole("table")).toBeNull();
-      const cards = container.querySelectorAll(".rate-limit-plan-card");
-      expect(cards.length).toBe(4);
-      for (const plan of ["Free", "Developer", "Pro", "Enterprise"]) {
-        expect(screen.getByText(plan)).toBeTruthy();
-      }
-    } finally {
-      restore();
+    const nav = screen.getByRole("navigation", { name: /breadcrumb/i });
+    expect(nav.textContent).toContain("Marketplace");
+    expect(nav.textContent).toContain("Three Tier API");
+    const hrefs = Array.from(nav.querySelectorAll("a")).map((a) => a.getAttribute("href"));
+    for (const href of hrefs) {
+      expect(href).toMatch(/^\/(marketplace|details\/three-tier|marketplace\/three-tier\/rate-limits)$/);
     }
   });
 
-  // ── Current Plan ──────────────────────────────────────────────────────────
-
-  it("marks the specified currentPlan row with 'Current plan' badge and aria-current on desktop", () => {
-    const { container } = renderPage({ currentPlan: "Pro" });
-    const currentRow = container.querySelector('tbody tr[aria-current="true"]');
-    expect(currentRow).not.toBeNull();
+  it("marks the specified currentPlan row with a 'Current plan' badge", async () => {
+    renderPage("three-tier", { currentPlan: "Pro" });
+    const table = await screen.findByRole("table");
+    const currentRow = table.querySelector('tbody tr[aria-current="true"]');
     expect(currentRow?.textContent).toContain("Pro");
     expect(currentRow?.textContent).toContain("Current plan");
-
-    const nonCurrentRows = container.querySelectorAll('tbody tr:not([aria-current="true"])');
-    expect(nonCurrentRows.length).toBe(3);
-    for (const row of Array.from(nonCurrentRows)) {
-      expect(row.textContent).not.toContain("Current plan");
-    }
+    expect(table.querySelectorAll('tbody tr:not([aria-current="true"])').length).toBe(2);
   });
 
-  it("marks the specified currentPlan card with 'Current plan' badge and aria-current on mobile", () => {
-    const restore = mockViewport(true);
-    try {
-      const { container } = renderPage({ currentPlan: "Pro" });
-      const currentCard = container.querySelector('.rate-limit-plan-card[aria-current="true"]');
-      expect(currentCard).not.toBeNull();
-      expect(currentCard?.textContent).toContain("Pro");
-      expect(currentCard?.textContent).toContain("Current plan");
-
-      const nonCurrentCards = container.querySelectorAll('.rate-limit-plan-card:not([aria-current="true"])');
-      expect(nonCurrentCards.length).toBe(3);
-      for (const card of Array.from(nonCurrentCards)) {
-        expect(card.textContent).not.toContain("Current plan");
-      }
-    } finally {
-      restore();
-    }
+  it("renders stacked plan cards and no table on mobile viewports", async () => {
+    restoreViewport();
+    restoreViewport = mockViewport(true);
+    const { container } = renderPage("three-tier");
+    await screen.findByText("Enterprise");
+    expect(screen.queryByRole("table")).toBeNull();
+    expect(container.querySelectorAll(".rate-limit-plan-card").length).toBe(3);
   });
 
-  // ── Numbers ───────────────────────────────────────────────────────────────
-
-  it("renders numbers like 6,000 inside a single non-breaking tabular-nums span on desktop", () => {
-    renderPage();
-    const span = screen.getByText("6,000");
+  it("renders numbers inside a tabular-nums span with a pattern badge per plan", async () => {
+    renderPage("three-tier");
+    await screen.findByRole("table");
+    const span = screen.getByText(new Intl.NumberFormat().format(6000));
     expect(span.tagName).toBe("SPAN");
     expect(span.classList.contains("rate-limit-number")).toBe(true);
-  });
-
-  it("renders numbers like 6,000 inside a single non-breaking tabular-nums span on mobile dl", () => {
-    const restore = mockViewport(true);
-    try {
-      renderPage();
-      const span = screen.getByText("6,000");
-      expect(span.tagName).toBe("SPAN");
-      expect(span.classList.contains("rate-limit-number")).toBe(true);
-    } finally {
-      restore();
-    }
-  });
-
-  // ── Color-blind safe patterns & Pattern text ──────────────────────────────
-
-  it.each(["Free", "Developer", "Pro", "Enterprise"])(
-    `%s badge has a distinct pattern class for color-blind safety`,
-    (plan) => {
-      renderPage();
+    for (const plan of ["Free", "Pro", "Enterprise"]) {
       const badge = screen.getByText(plan);
-      const expectedClass = PLAN_PATTERN_CLASSES[plan];
       expect(badge.classList.contains("rate-limit-badge")).toBe(true);
-      expect(badge.classList.contains(expectedClass)).toBe(true);
-    },
-  );
-
-  it("each plan badge carries a data-pattern attribute describing the texture", () => {
-    renderPage();
-    for (const plan of ["Free", "Developer", "Pro", "Enterprise"]) {
-      const badge = screen.getByText(plan);
+      expect(badge.classList.contains(PLAN_PATTERNS[plan].class)).toBe(true);
       expect(badge.getAttribute("data-pattern")).toBeTruthy();
     }
   });
 
-  it("each plan exposes its pattern description to assistive tech on desktop", () => {
-    renderPage();
-    for (const desc of ["solid baseline", "dot pattern", "diagonal stripes", "crosshatch pattern"]) {
-      expect(screen.getByText(desc)).toBeTruthy();
-    }
-  });
-
-  it("each plan exposes its pattern description to assistive tech on mobile", () => {
-    const restore = mockViewport(true);
-    try {
-      renderPage();
-      for (const desc of ["solid baseline", "dot pattern", "diagonal stripes", "crosshatch pattern"]) {
-        expect(screen.getByText(desc)).toBeTruthy();
-      }
-    } finally {
-      restore();
-    }
+  it("contains no GrantFox literals", async () => {
+    const { container } = renderPage("three-tier");
+    await screen.findByRole("table");
+    expect(container.textContent).not.toMatch(/GrantFox/i);
   });
+});
 
-  // ── Style injection ───────────────────────────────────────────────────────
-
-  it("renders no inline <style> element directly within the rate-limit page", () => {
-    const { container } = renderPage();
-    const pageStyle = container.querySelector(".rate-limit-page > style");
-    expect(pageStyle).toBeNull();
+describe("ROUTE_CATALOGUE", () => {
+  it("has no dead /rate-limit entry", () => {
+    expect(ROUTE_CATALOGUE.some((entry) => entry.path === "/rate-limit")).toBe(false);
   });
 });
diff --git a/src/pages/RateLimitCard.tsx b/src/pages/RateLimitCard.tsx
index 75f105d..d0fb409 100644
--- a/src/pages/RateLimitCard.tsx
+++ b/src/pages/RateLimitCard.tsx
@@ -1,6 +1,9 @@
 import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
 import Breadcrumb from "../components/Breadcrumb";
 import useDocumentTitle from "../hooks/useDocumentTitle";
+import { fetchCatalog, isCatalogAbortError } from "../api/catalogApi";
+import type { APIItem } from "../data/mockApis";
 import "./RateLimitCard.css";
 
 /**
@@ -12,66 +15,7 @@ import "./RateLimitCard.css";
  */
 
 /** Rate-limit tier shape used in the table below. */
-export type RateLimitTier = {
-  plan: string;
-  requestsPerMinute: number;
-  burstLimit: number;
-  concurrentConnections: number;
-};
-
-export const RATE_LIMIT_TIERS: RateLimitTier[] = [
-  {
-    plan: "Free",
-    requestsPerMinute: 10,
-    burstLimit: 20,
-    concurrentConnections: 2,
-  },
-  {
-    plan: "Developer",
-    requestsPerMinute: 120,
-    burstLimit: 200,
-    concurrentConnections: 10,
-  },
-  {
-    plan: "Pro",
-    requestsPerMinute: 600,
-    burstLimit: 1000,
-    concurrentConnections: 50,
-  },
-  {
-    plan: "Enterprise",
-    requestsPerMinute: 6000,
-    burstLimit: 10000,
-    concurrentConnections: 500,
-  },
-];
-
-/**
- * Breadcrumb path for this page.  Segment labels are deliberately long so the
- * middle-ellipsis truncation is visible without special configuration.
- *
- * Full path (un-truncated):
- *   Marketplace
- *     → GrantFox Wave Compute API – Stellar Edition
- *     → Rate Limits & Throttling Policies
- *     → Current Plan Configuration  (current page)
- */
-const BREADCRUMB_ITEMS = [
-  { label: "Marketplace", href: "/marketplace" },
-  {
-    label: "GrantFox Wave Compute API – Stellar Edition",
-    href: "/marketplace/grantfox-wave-compute",
-  },
-  {
-    label: "Rate Limits & Throttling Policies",
-    href: "/marketplace/grantfox-wave-compute/rate-limits",
-  },
-  {
-    label: "Current Plan Configuration",
-    href: "/marketplace/grantfox-wave-compute/rate-limits/config",
-    isCurrent: true,
-  },
-] as const;
+export type RateLimitTier = NonNullable<APIItem["rateLimits"]>[number];
 
 /** Maximum characters before a crumb label is shortened with a middle-ellipsis. */
 const BREADCRUMB_MAX_LABEL = 28;
@@ -85,12 +29,33 @@ export const PLAN_PATTERNS: Record<string, { class: string; description: string
 };
 
 export type RateLimitCardProps = {
+  /** API id to show; defaults to the `:apiId` route parameter. */
+  apiId?: string;
   /** Currently active plan tier (e.g. "Pro" or "Developer"). */
   currentPlan?: string;
   /** Force mobile card view (defaults to window viewport query < 640px). */
   isMobile?: boolean;
 };
 
+/** Fallback pattern for plan names without a dedicated texture. */
+const DEFAULT_PATTERN = { class: "custom", description: "plain fill" };
+
+function patternFor(plan: string) {
+  return PLAN_PATTERNS[plan] ?? DEFAULT_PATTERN;
+}
+
+const numberFormat = new Intl.NumberFormat();
+
+function formatLimit(value: number | undefined): string {
+  return value === undefined ? "—" : numberFormat.format(value);
+}
+
+type LoadState =
+  | { status: "loading" }
+  | { status: "ready"; api: APIItem }
+  | { status: "not-found" }
+  | { status: "error" };
+
 function useMediaQuery(query: string, maxPixelThreshold?: number): boolean {
   const evaluate = () => {
     if (typeof window === "undefined") return false;
@@ -142,43 +107,124 @@ function useMediaQuery(query: string, maxPixelThreshold?: number): boolean {
 }
 
 export default function RateLimitCard({
+  apiId: propApiId,
   currentPlan,
   isMobile: isMobileProp,
 }: RateLimitCardProps = {}) {
+  const { apiId: routeApiId } = useParams<{ apiId: string }>();
+  const apiId = propApiId ?? routeApiId;
+
+  const [state, setState] = useState<LoadState>({ status: "loading" });
+
+  useEffect(() => {
+    let isMounted = true;
+    const controller = new AbortController();
+    setState({ status: "loading" });
+
+    fetchCatalog(controller.signal)
+      .then((apis) => {
+        if (!isMounted) return;
+        const found = apis.find((a) => a.id === apiId);
+        setState(found ? { status: "ready", api: found } : { status: "not-found" });
+      })
+      .catch((err) => {
+        if (!isMounted || isCatalogAbortError(err)) return;
+        setState({ status: "error" });
+      });
+
+    return () => {
+      isMounted = false;
+      controller.abort();
+    };
+  }, [apiId]);
+
+  const api = state.status === "ready" ? state.api : null;
+
   useDocumentTitle(
-    "Rate Limit Configuration – Callora",
-    "Current rate-limit plan and throttling policies for the GrantFox Wave Compute API.",
+    state.status === "loading"
+      ? "Loading Rate Limits – Callora"
+      : api
+        ? `${api.name} Rate Limits – Callora`
+        : state.status === "error"
+          ? "Rate Limits Unavailable – Callora"
+          : "API Not Found – Callora",
+    api ? `Published rate-limit tiers for ${api.name}.` : "Per-API rate limits.",
   );
 
   const isViewportMobile = useMediaQuery("(max-width: 639px)", 640);
   const isMobile = isMobileProp !== undefined ? isMobileProp : isViewportMobile;
 
+  if (state.status === "loading") {
+    return (
+      <div className="rate-limit-page" aria-busy="true">
+        <div className="rate-limit-card">
+          <p role="status" className="rate-limit-card-subtitle">
+            Loading rate limits…
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!api) {
+    const isError = state.status === "error";
+    return (
+      <div className="rate-limit-page">
+        <Breadcrumb
+          items={[
+            { label: "Marketplace", href: "/marketplace" },
+            { label: isError ? "Rate Limits" : "API Not Found", href: "#", isCurrent: true },
+          ]}
+          maxLabelLength={BREADCRUMB_MAX_LABEL}
+        />
+        <section className="rate-limit-card" role="alert" aria-labelledby="rate-limit-unavailable-title">
+          <div className="rate-limit-card-header">
+            <h1 id="rate-limit-unavailable-title" className="rate-limit-card-title">
+              {isError ? "Rate limits unavailable" : "API Not Found"}
+            </h1>
+            <p className="rate-limit-card-subtitle">
+              {isError
+                ? "We couldn't load the catalogue. Please try again later."
+                : "The requested API could not be found in the catalogue."}
+            </p>
+          </div>
+          <Link to="/marketplace">Back to Marketplace</Link>
+        </section>
+      </div>
+    );
+  }
+
+  const breadcrumbItems = [
+    { label: "Marketplace", href: "/marketplace" },
+    { label: api.name, href: `/details/${api.id}` },
+    { label: "Rate Limits", href: `/marketplace/${api.id}/rate-limits`, isCurrent: true },
+  ];
+
+  const tiers: RateLimitTier[] = api.rateLimits ?? [];
+  const hasBurst = tiers.some((t) => t.burstLimit !== undefined);
+  const hasConcurrent = tiers.some((t) => t.concurrentConnections !== undefined);
+  const tableLabel = `Rate limit tiers for ${api.name}`;
+
   const isCurrentPlan = (plan: string) =>
     Boolean(currentPlan && plan.toLowerCase() === currentPlan.toLowerCase());
 
   return (
     <div className="rate-limit-page">
-      {/*
-        Breadcrumb uses maxLabelLength={28} so each crumb label is capped at
-        28 characters.  Both long middle-segment names will be shown with a
-        "…" in the middle, preserving the start and end of the real label.
-        The full strings are always in `title` / `aria-label`.
-      */}
-      <Breadcrumb
-        items={BREADCRUMB_ITEMS}
-        maxLabelLength={BREADCRUMB_MAX_LABEL}
-      />
+      <Breadcrumb items={breadcrumbItems} maxLabelLength={BREADCRUMB_MAX_LABEL} />
 
       <div className="rate-limit-card">
         <div className="rate-limit-card-header">
           <h1 className="rate-limit-card-title">Rate Limit Configuration</h1>
-          {api && <p className="rate-limit-card-subtitle">{api.name}</p>}
+          <p className="rate-limit-card-subtitle">{api.name}</p>
         </div>
 
-        {isMobile ? (
-          <div className="rate-limit-cards" aria-label="Rate limit tiers">
-            {RATE_LIMIT_TIERS.map((tier) => {
+        {tiers.length === 0 ? (
+          <p className="rate-limit-note">This provider has not published rate limits.</p>
+        ) : isMobile ? (
+          <div className="rate-limit-cards" aria-label={tableLabel}>
+            {tiers.map((tier) => {
               const isCurrent = isCurrentPlan(tier.plan);
+              const pattern = patternFor(tier.plan);
               return (
                 <div
                   key={tier.plan}
@@ -187,104 +233,81 @@ export default function RateLimitCard({
                 >
                   <div className="rate-limit-plan-card-header">
                     <div className="rate-limit-plan-title-group">
-                      <span
-                        className={`rate-limit-badge ${PLAN_PATTERNS[tier.plan].class}`}
-                        data-pattern={PLAN_PATTERNS[tier.plan].description}
-                      >
+                      <span className={`rate-limit-badge ${pattern.class}`} data-pattern={pattern.description}>
                         {tier.plan}
                       </span>
-                      <span className="rate-limit-pattern-desc">
-                        {PLAN_PATTERNS[tier.plan].description}
-                      </span>
+                      <span className="rate-limit-pattern-desc">{pattern.description}</span>
                     </div>
-                    {isCurrent && (
-                      <span className="rate-limit-current-badge">
-                        Current plan
-                      </span>
-                    )}
+                    {isCurrent && <span className="rate-limit-current-badge">Current plan</span>}
                   </div>
 
                   <dl className="rate-limit-plan-dl">
                     <div className="rate-limit-dl-row">
                       <dt title="Requests per minute">Requests/min</dt>
                       <dd>
-                        <span className="rate-limit-number">
-                          {tier.requestsPerMinute.toLocaleString()}
-                        </span>
-                      </dd>
-                    </div>
-                    <div className="rate-limit-dl-row">
-                      <dt title="Burst limit">Burst</dt>
-                      <dd>
-                        <span className="rate-limit-number">
-                          {tier.burstLimit.toLocaleString()}
-                        </span>
-                      </dd>
-                    </div>
-                    <div className="rate-limit-dl-row">
-                      <dt title="Concurrent connections">Concurrent</dt>
-                      <dd>
-                        <span className="rate-limit-number">
-                          {tier.concurrentConnections.toLocaleString()}
-                        </span>
+                        <span className="rate-limit-number">{formatLimit(tier.requestsPerMinute)}</span>
                       </dd>
                     </div>
+                    {hasBurst && (
+                      <div className="rate-limit-dl-row">
+                        <dt title="Burst limit">Burst</dt>
+                        <dd>
+                          <span className="rate-limit-number">{formatLimit(tier.burstLimit)}</span>
+                        </dd>
+                      </div>
+                    )}
+                    {hasConcurrent && (
+                      <div className="rate-limit-dl-row">
+                        <dt title="Concurrent connections">Concurrent</dt>
+                        <dd>
+                          <span className="rate-limit-number">{formatLimit(tier.concurrentConnections)}</span>
+                        </dd>
+                      </div>
+                    )}
                   </dl>
                 </div>
               );
             })}
           </div>
         ) : (
-          <table className="rate-limit-table" aria-label="Rate limit tiers">
+          <table className="rate-limit-table" aria-label={tableLabel}>
+            <caption className="sr-only">{tableLabel}</caption>
             <thead>
               <tr>
                 <th scope="col">Plan</th>
                 <th scope="col">Requests / min</th>
-                <th scope="col">Burst limit</th>
-                <th scope="col">Concurrent connections</th>
+                {hasBurst && <th scope="col">Burst limit</th>}
+                {hasConcurrent && <th scope="col">Concurrent connections</th>}
               </tr>
             </thead>
             <tbody>
-              {RATE_LIMIT_TIERS.map((tier) => {
+              {tiers.map((tier) => {
                 const isCurrent = isCurrentPlan(tier.plan);
+                const pattern = patternFor(tier.plan);
                 return (
-                  <tr
-                    key={tier.plan}
-                    {...(isCurrent ? { "aria-current": "true" } : {})}
-                  >
+                  <tr key={tier.plan} {...(isCurrent ? { "aria-current": "true" } : {})}>
                     <td>
                       <div className="rate-limit-plan-cell">
-                        <span
-                          className={`rate-limit-badge ${PLAN_PATTERNS[tier.plan].class}`}
-                          data-pattern={PLAN_PATTERNS[tier.plan].description}
-                        >
+                        <span className={`rate-limit-badge ${pattern.class}`} data-pattern={pattern.description}>
                           {tier.plan}
                         </span>
-                        <span className="rate-limit-pattern-desc">
-                          {PLAN_PATTERNS[tier.plan].description}
-                        </span>
-                        {isCurrent && (
-                          <span className="rate-limit-current-badge">
-                            Current plan
-                          </span>
-                        )}
+                        <span className="rate-limit-pattern-desc">{pattern.description}</span>
+                        {isCurrent && <span className="rate-limit-current-badge">Current plan</span>}
                       </div>
                     </td>
                     <td>
-                      <span className="rate-limit-number">
-                        {tier.requestsPerMinute.toLocaleString()}
-                      </span>
-                    </td>
-                    <td>
-                      <span className="rate-limit-number">
-                        {tier.burstLimit.toLocaleString()}
-                      </span>
-                    </td>
-                    <td>
-                      <span className="rate-limit-number">
-                        {tier.concurrentConnections.toLocaleString()}
-                      </span>
+                      <span className="rate-limit-number">{formatLimit(tier.requestsPerMinute)}</span>
                     </td>
+                    {hasBurst && (
+                      <td>
+                        <span className="rate-limit-number">{formatLimit(tier.burstLimit)}</span>
+                      </td>
+                    )}
+                    {hasConcurrent && (
+                      <td>
+                        <span className="rate-limit-number">{formatLimit(tier.concurrentConnections)}</span>
+                      </td>
+                    )}
                   </tr>
                 );
               })}
@@ -292,12 +315,13 @@ export default function RateLimitCard({
           </table>
         )}
 
-        <p className="rate-limit-note">
-          Limits reset on a rolling 60-second window. Burst allowance is
-          consumed first; sustained throughput is governed by the per-minute
-          quota. Enterprise plans can request custom limits via the support
-          portal.
-        </p>
+        {tiers.length > 0 && (
+          <p className="rate-limit-note">
+            Limits reset on a rolling 60-second window. Burst allowance is
+            consumed first; sustained throughput is governed by the per-minute
+            quota.
+          </p>
+        )}
       </div>
     </div>
   );
diff --git a/src/renderRoute.tsx b/src/renderRoute.tsx
index 1aa085a..1b9db77 100644
--- a/src/renderRoute.tsx
+++ b/src/renderRoute.tsx
@@ -67,8 +67,9 @@ export async function renderRoute(
     return;
   }
 
-  const isSlaRoute = pathname.split("?")[0].replace(/\/+$/, "").endsWith("/sla");
-  if (pathname.startsWith("/marketplace") && !isSlaRoute) {
+  // Per-API subpages (`/marketplace/:apiId/sla`, `/marketplace/:apiId/rate-limits`)
+  // are routed by `App`; everything else under `/marketplace` is the listing.
+  if (pathname.startsWith("/marketplace") && !isMarketplaceSubpage(pathname)) {
     startRouteLoading();
     root.render(wrap(<StandaloneShell><MarketplacePageSkeleton /></StandaloneShell>));
     const mod = await import("./pages/MarketplacePage");