diff --git a/.claude/skills/design-system/references/components.md b/.claude/skills/design-system/references/components.md
index b888cbc9a5e..5f8fb5a0973 100644
--- a/.claude/skills/design-system/references/components.md
+++ b/.claude/skills/design-system/references/components.md
@@ -160,7 +160,7 @@ Responsive grid for laying out a collection of items (cards, tiles, badges). Ren
 - `size`: `small (7rem) | narrow (12rem) | base (18rem, default) | wide (22rem) | wider (26rem)`. The **min item width** (`--grid-item-min`) — the floor an item shrinks to before a column drops, and so the fold-aggressiveness lever. Pick by item shape: `small` for badges, `base` for standard content cards, `wide`/`wider` for horizontal items like callouts. Larger sizes wrap sooner; keep `columns` small enough that N items of the chosen width fit (min ≤ container/N).
 - `fit`: `boolean` (auto-fill mode only). Default keeps empty tracks (`auto-fill`); `fit` collapses them (`auto-fit`) so a partially-filled row stretches to fill the width.
 - `balanced`: `2 | 4`. A fixed, deterministic **breakpoint** reflow (overrides `columns` via `!important`; `size`/`fit` inert). `balanced={4}` → `4 → 2×2 → 1`, never an orphan 3-up row (which auto-fill produces); `balanced={2}` → `2 → 1` at `md`, a breakpoint-driven alternative to `columns={2}` (which folds by content width). Both fold `1 → 2` at `md`. Use with a **fixed set** of that many items (or a multiple).
-- Applies `gap-4`. `className` is spread last, so override the gap (or `--grid-item-min` / `--grid-repeat`) per call site only when genuinely needed.
+- Applies `gap-4`. `className` is spread last, so override the gap (or `--grid-item-min` / `--grid-repeat`) per call site only when genuinely needed. **If you override the gap, mirror it in `--grid-gap`** (e.g. `gap-x-8 [--grid-gap:--spacing(8)]`): the `grid-cols-auto-*` fold math assumes the gutter via `var(--grid-gap, 1rem)`, and with a wider real gap the even-share term is computed against the wrong gutter -- a second column may **never** form.
 
 ### `Section`
 
diff --git a/.claude/skills/design-system/references/gotchas.md b/.claude/skills/design-system/references/gotchas.md
index c74ad95204d..dfa257e365d 100644
--- a/.claude/skills/design-system/references/gotchas.md
+++ b/.claude/skills/design-system/references/gotchas.md
@@ -142,6 +142,10 @@ Use `useRtlFlip` only when you need to flip a non-chevron directional icon (a cu
 
 Configured in `base.css` lines 97-107. Persian fallback. Triggered by `:lang(ur)`, not `dir`. Don't override.
 
+### Bare `<ul>`/`<li>` inherit legacy global list styles
+
+`base.css` still ships global `ul`/`ol` rules (start margin + `disc` markers, TODO-slated for removal) and a global `li` bottom margin. A non-prose `<ul>` (nav menu, card list) needs `m-0 list-none` on the `ul` and `m-0` on the `li`s or it renders indented with stray spacing. And once `list-none` removes the markers, Safari/VoiceOver drops list semantics -- add `role="list"` to keep the list announced.
+
 ## Heading Hierarchy
 
 ### One `<h1>` per page
diff --git a/.claude/skills/design-system/references/i18n-rtl.md b/.claude/skills/design-system/references/i18n-rtl.md
index 7a343f478fb..b3a72987107 100644
--- a/.claude/skills/design-system/references/i18n-rtl.md
+++ b/.claude/skills/design-system/references/i18n-rtl.md
@@ -45,6 +45,10 @@ If a string is rendered to a user, it must come from a translation key. The exce
 
 If you find yourself wanting to hard-code, add the key to `src/intl/en/[namespace].json` and use `t()`.
 
+### Interpolate a translated value, never a hard-coded literal
+
+A shared skeleton with an interpolated value -- `t("visit-brand", { brand: t("dune-brand") })` -- is the pattern to reach for: one `"Visit {brand}"` string instead of the `"Visit "` prefix repeated across N labels, and each brand is its own key the pipeline can transliterate or case-adjust per locale. The anti-pattern is passing a hard-coded English literal as the variable (`t("visit-brand", { brand: "Dune" })`): the `"Dune"` literal never enters an intl file, so it stays untranslated English no matter the locale. If a proper noun/brand is enumerable, give it a key and inject the translated value; reserve raw literals for genuinely dynamic runtime values (counts, dates, user input) that can't be keys. `ProductList` CTAs follow this -- see `AiAgentProductLists` and the stablecoins tools list.
+
 ## RTL: Logical CSS Properties
 
 Always use logical equivalents instead of physical directions:
diff --git a/app/[locale]/developers/tools/_components/ToolsPageBody.tsx b/app/[locale]/developers/tools/_components/ToolsPageBody.tsx
index 1940f8e7090..e6a8c10d401 100644
--- a/app/[locale]/developers/tools/_components/ToolsPageBody.tsx
+++ b/app/[locale]/developers/tools/_components/ToolsPageBody.tsx
@@ -67,7 +67,7 @@ const ToolsPageBody = async ({
             noResults: t("page-developers-tools-no-results"),
           }}
         />
-        <div className="flex flex-col items-center gap-4 rounded-base bg-radial-a p-12">
+        <div className="bg-radial-a flex flex-col items-center gap-4 rounded-base p-12">
           <h2>{t("page-developers-tools-suggest-resource-title")}</h2>
           <p>{t("page-developers-tools-suggest-resource-description")}</p>
           <ButtonLink
diff --git a/app/[locale]/developers/tools/page.tsx b/app/[locale]/developers/tools/page.tsx
index f73eb4167de..1bec3ec2233 100644
--- a/app/[locale]/developers/tools/page.tsx
+++ b/app/[locale]/developers/tools/page.tsx
@@ -33,7 +33,10 @@ const Page = async (props: { params: Promise<PageParams> }) => {
     getDeveloperToolsData(),
     getAppPageContributorInfo("developers/tools", locale as Lang),
     getTranslations({ locale, namespace: "page-developers-tools" }),
-    getTranslations({ locale, namespace: "page-developers-tools-descriptions" }),
+    getTranslations({
+      locale,
+      namespace: "page-developers-tools-descriptions",
+    }),
   ])
 
   const normalized = normalizeDeveloperToolsData(data)
diff --git a/app/[locale]/stablecoins/page.tsx b/app/[locale]/stablecoins/page.tsx
index dd8516c0918..6e0927d4777 100644
--- a/app/[locale]/stablecoins/page.tsx
+++ b/app/[locale]/stablecoins/page.tsx
@@ -22,7 +22,7 @@ import { CheckCircle } from "@/components/icons/CheckCircle"
 import { XCircle } from "@/components/icons/XCircle"
 import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
-import ProductList from "@/components/ProductList"
+import ProductList, { type ProductListContent } from "@/components/ProductList"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import Tooltip from "@/components/Tooltip"
 import Translation from "@/components/Translation"
@@ -371,51 +371,63 @@ async function Page(props: { params: Promise<PageParams> }) {
     },
   ]
 
-  const toolsData = [
+  const toolsData: ProductListContent[] = [
     {
-      title: "Stablecoins.wtf",
+      title: t("page-stablecoins-tools-stablecoinswtf-title"),
       description: t("page-stablecoins-tools-stablecoinswtf-description"),
-      link: "https://stablecoins.wtf",
+      href: "https://stablecoins.wtf",
       image: stablecoinsWtfImg,
-      alt: "",
+      ctaLabel: t("page-stablecoins-tools-visit-brand", {
+        brand: t("page-stablecoins-tools-stablecoinswtf-title"),
+      }),
     },
     {
-      title: "Stablepulse",
+      title: t("page-stablecoins-tools-stablepulse-title"),
       description: t("page-stablecoins-tools-stablepulse-description"),
-      link: "https://www.stablepulse.org/",
+      href: "https://www.stablepulse.org/",
       image: stablePulseImg,
-      alt: "",
       className: "[&_img]:p-1",
+      ctaLabel: t("page-stablecoins-tools-visit-brand", {
+        brand: t("page-stablecoins-tools-stablepulse-title"),
+      }),
     },
     {
-      title: "Stables.info",
+      title: t("page-stablecoins-tools-stablesinfo-title"),
       description: t("page-stablecoins-tools-stablesinfo-description"),
-      link: "https://stables.info/",
+      href: "https://stables.info/",
       image: stablesInfoImg,
-      alt: "",
+      ctaLabel: t("page-stablecoins-tools-visit-brand", {
+        brand: t("page-stablecoins-tools-stablesinfo-title"),
+      }),
     },
     {
-      title: "Dune Stablecoin Metrics",
+      title: t("page-stablecoins-tools-dune-title"),
       description: t("page-stablecoins-tools-dune-description"),
-      link: "https://dune.com/overview/stablecoin",
+      href: "https://dune.com/overview/stablecoin",
       image: duneImg,
-      alt: "",
       className: "dark:[&_img]:invert [&_img]:p-2",
+      ctaLabel: t("page-stablecoins-tools-visit-brand", {
+        brand: t("page-stablecoins-tools-dune-brand"),
+      }),
     },
     {
-      title: "Visa Onchain Analytics",
+      title: t("page-stablecoins-tools-visa-title"),
       description: t("page-stablecoins-tools-visa-description"),
-      link: "https://visaonchainanalytics.com/",
+      href: "https://visaonchainanalytics.com/",
       image: visaImg,
-      alt: "",
+      ctaLabel: t("page-stablecoins-tools-visit-brand", {
+        brand: t("page-stablecoins-tools-visa-brand"),
+      }),
     },
     {
-      title: "Stablewars",
+      title: t("page-stablecoins-tools-stablewars-title"),
       description: t("page-stablecoins-tools-stablewars-description"),
-      link: "https://stablewars.xyz/",
+      href: "https://stablewars.xyz/",
       image: stablesWarsImg,
-      alt: "",
       className: "[&_img]:p-1",
+      ctaLabel: t("page-stablecoins-tools-visit-brand", {
+        brand: t("page-stablecoins-tools-stablewars-title"),
+      }),
     },
   ]
 
@@ -855,12 +867,11 @@ async function Page(props: { params: Promise<PageParams> }) {
             <h2>{t("page-stablecoins-tools-title")}</h2>
             <div className="[&_img]:shadow-none">
               <ProductList
-                columns={2}
                 category={t(
                   "page-stablecoins-category-dashboard-and-education"
                 )}
-                actionLabel={t("page-apps-ready-button")}
                 content={toolsData}
+                columns={2}
               />
             </div>
           </Section>
diff --git a/src/components/Content/ai-agents/AiAgentProductLists.tsx b/src/components/Content/ai-agents/AiAgentProductLists.tsx
index add3a7bcaa1..7176820a2c2 100644
--- a/src/components/Content/ai-agents/AiAgentProductLists.tsx
+++ b/src/components/Content/ai-agents/AiAgentProductLists.tsx
@@ -1,9 +1,9 @@
-import { useTranslations } from "next-intl"
+import { getTranslations } from "next-intl/server"
 
 import { Strong } from "@/components/IntlStringElements"
-import ProductListComponent from "@/components/ProductList"
-import { ButtonLink } from "@/components/ui/buttons/Button"
-import InlineLink from "@/components/ui/Link"
+import ProductListComponent, {
+  type ProductListContent,
+} from "@/components/ProductList"
 
 import aiagenttoolkit from "@/public/images/ai-agents/aiagenttoolkit.png"
 import aixbt from "@/public/images/ai-agents/aixbt.png"
@@ -14,91 +14,52 @@ import cookiefun from "@/public/images/ai-agents/cookiefun.png"
 import heyanon from "@/public/images/ai-agents/heyanon.png"
 import luna from "@/public/images/ai-agents/luna.png"
 
-const AiAgentProductLists = ({ list }: { list: string }) => {
-  const t = useTranslations("component-ai-agent-products")
+const AiAgentProductLists = async ({ list }: { list: string }) => {
+  const t = await getTranslations("component-ai-agent-products")
 
   const productListSets = {
     "ai-agents": [
       {
         title: t("luna-title"),
-        description: "",
-        image: luna,
-        contentItems: [
-          <p key="luna-description-1">
-            {t.rich("luna-description-1", {
-              strong: Strong,
-              a: (chunks) => (
-                <InlineLink href="https://www.tiktok.com/@aidolofficial">
-                  {chunks}
-                </InlineLink>
-              ),
-            })}
-          </p>,
-          <p key="luna-description-2">{t("luna-description-2")}</p>,
-          <div key="luna-button">
-            <ButtonLink
-              href="https://app.virtuals.io/virtuals/68"
-              variant="outline"
-            >
-              {t("chat-with-brand", { brand: t("luna-brand") })}
-            </ButtonLink>
-          </div>,
+        description: [
+          t.rich("luna-description-1", {
+            strong: Strong,
+          }),
+          t("luna-description-2"),
         ],
+        image: luna,
+        href: "https://app.virtuals.io/virtuals/68",
+        ctaLabel: t("chat-with-brand", { brand: t("luna-brand") }),
       },
       {
         title: t("aixbt-title"),
-        description: "",
+        description: [t("aixbt-description-1"), t("aixbt-description-2")],
         image: aixbt,
-        contentItems: [
-          <p key="aixbt-description-1">{t("aixbt-description-1")}</p>,
-          <p key="aixbt-description-2">{t("aixbt-description-2")}</p>,
-          <div key="aixbt-button">
-            <ButtonLink href="https://x.com/aixbt_agent" variant="outline">
-              {t("visit-brand", { brand: t("aixbt-brand") })}
-            </ButtonLink>
-          </div>,
-        ],
+        href: "https://x.com/aixbt_agent",
+        ctaLabel: t("visit-brand", { brand: t("aixbt-brand") }),
       },
       {
         title: t("botto-title"),
-        description: "",
+        description: t("botto-description"),
         image: botto,
-        contentItems: [
-          <p key="botto-description">{t("botto-description")}</p>,
-          <div key="botto-button">
-            <ButtonLink href="https://botto.com/" variant="outline">
-              {t("visit-brand", { brand: t("botto-brand") })}
-            </ButtonLink>
-          </div>,
-        ],
+        href: "https://botto.com/",
+        ctaLabel: t("visit-brand", { brand: t("botto-brand") }),
       },
     ],
     chat: [
       {
         title: t("bankr-title"),
-        description: "",
+        description: t("bankr-description"),
         image: bankr,
-        contentItems: [
-          <p key="bankr-description">{t("bankr-description")}</p>,
-          <div key="bankr-button">
-            <ButtonLink href="https://bankr.bot/" variant="outline">
-              {t("bankr-button")}
-            </ButtonLink>
-          </div>,
-        ],
+        href: "https://bankr.bot/",
+        ctaLabel: t("bankr-button"),
       },
       {
         title: t("heyanon-title"),
-        description: "",
+        description: t("heyanon-description"),
         image: heyanon,
-        contentItems: [
-          <p key="heyanon-description">{t("heyanon-description")}</p>,
-          <div key="heyanon-button">
-            <ButtonLink href="https://heyanon.ai/" variant="outline">
-              {t("visit-brand", { brand: t("heyanon-brand") })}
-            </ButtonLink>
-          </div>,
-        ],
+        href: "https://heyanon.ai/",
+        ctaLabel: t("visit-brand", { brand: t("heyanon-brand") }),
       },
     ],
     "dive-deeper": [
@@ -106,29 +67,27 @@ const AiAgentProductLists = ({ list }: { list: string }) => {
         title: t("aiagenttoolkit-title"),
         description: t("aiagenttoolkit-description"),
         image: aiagenttoolkit,
-        link: "https://www.aiagenttoolkit.xyz/t/frameworks",
+        href: "https://www.aiagenttoolkit.xyz/t/frameworks",
+        ctaLabel: t("visit-brand", { brand: t("aiagenttoolkit-brand") }),
       },
       {
         title: t("cookiefun-title"),
         description: t("cookiefun-description"),
         image: cookiefun,
-        link: "https://cookie.fun/",
+        href: "https://cookie.fun/",
+        ctaLabel: t("visit-brand", { brand: t("cookiefun-brand") }),
       },
       {
         title: t("clanker-title"),
         description: t("clanker-description"),
         image: clanker,
-        link: "https://farcaster.xyz/clanker",
+        href: "https://farcaster.xyz/clanker",
+        ctaLabel: t("visit-brand", { brand: t("clanker-brand") }),
       },
     ],
-  }
+  } satisfies Record<string, ProductListContent[]>
 
-  return (
-    <ProductListComponent
-      content={productListSets[list]}
-      actionLabel={t("action-label")}
-    />
-  )
+  return <ProductListComponent content={productListSets[list]} />
 }
 
 export default AiAgentProductLists
diff --git a/src/components/Content/prediction-markets/PredictionMarketLists.tsx b/src/components/Content/prediction-markets/PredictionMarketLists.tsx
index 3aa4916af51..5245079298f 100644
--- a/src/components/Content/prediction-markets/PredictionMarketLists.tsx
+++ b/src/components/Content/prediction-markets/PredictionMarketLists.tsx
@@ -1,77 +1,41 @@
-import ProductListComponent from "@/components/ProductList"
-import { ButtonLink } from "@/components/ui/buttons/Button"
+import { getTranslations } from "next-intl/server"
+
+import ProductListComponent, {
+  type ProductListContent,
+} from "@/components/ProductList"
 
 import auger from "@/public/images/dapps/auger.png"
 import kalshi from "@/public/images/dapps/kalshi.png"
 import polymarket from "@/public/images/dapps/polymarket.png"
 
-const PredictionMarketLists = () => {
+const PredictionMarketLists = async () => {
+  const t = await getTranslations("component-prediction-market-products")
+
   const productListSets = [
     {
-      title: "Polymarket",
-      description: "",
+      title: t("polymarket-title"),
+      description: t("polymarket-description"),
       image: polymarket,
-      alt: "Polymarket logo",
-      contentItems: [
-        <p key="polymarket-description">
-          A popular forecasting market with real-time trading.
-        </p>,
-        <div key="polymarket-button">
-          <ButtonLink
-            href="https://polymarket.com/"
-            target="_blank"
-            variant="outline"
-          >
-            Explore Polymarket
-          </ButtonLink>
-        </div>,
-      ],
+      href: "https://polymarket.com/",
+      ctaLabel: t("polymarket-cta"),
     },
     {
-      title: "Augur",
-      description: "",
+      title: t("augur-title"),
+      description: t("augur-description"),
       image: auger,
-      alt: "Augur logo",
-      contentItems: [
-        <p key="auger-description">
-          A fully decentralized prediction market protocol used for predicting
-          price trends. Disclaimer: you will need some technical expertise to
-          start using Augur.
-        </p>,
-        <div key="auger-button">
-          <ButtonLink
-            href="https://github.com/AugurProject"
-            target="_blank"
-            variant="outline"
-          >
-            Dive into Augur
-          </ButtonLink>
-        </div>,
-      ],
+      href: "https://github.com/AugurProject",
+      ctaLabel: t("augur-cta"),
     },
     {
-      title: "Kalshi",
-      description: "",
+      title: t("kalshi-title"),
+      description: t("kalshi-description"),
       image: kalshi,
-      alt: "Kalshi logo",
-      contentItems: [
-        <p key="kalshi-description">
-          a CFTC-compliant platform using Ethereum for USDC deposits. (USA only)
-        </p>,
-        <div key="kalshi-button">
-          <ButtonLink
-            href="https://kalshi.com/"
-            target="_blank"
-            variant="outline"
-          >
-            Try Kalshi
-          </ButtonLink>
-        </div>,
-      ],
+      href: "https://kalshi.com/",
+      ctaLabel: t("kalshi-cta"),
     },
-  ]
+  ] satisfies ProductListContent[]
 
-  return <ProductListComponent content={productListSets} actionLabel="Go" />
+  return <ProductListComponent content={productListSets} />
 }
 
 export default PredictionMarketLists
diff --git a/src/components/Content/restaking/RestakingList.tsx b/src/components/Content/restaking/RestakingList.tsx
index 072c6b45471..3c45b079b30 100644
--- a/src/components/Content/restaking/RestakingList.tsx
+++ b/src/components/Content/restaking/RestakingList.tsx
@@ -1,47 +1,31 @@
-import ProductListComponent from "@/components/ProductList"
-import { ButtonLink } from "@/components/ui/buttons/Button"
+import { getTranslations } from "next-intl/server"
+
+import ProductListComponent, {
+  type ProductListContent,
+} from "@/components/ProductList"
 
 import eigenLayer from "@/public/images/use-cases/eigen-layer-logo.png"
 import symbiotic from "@/public/images/use-cases/symbiotic-logo.png"
 
-export const RestakingList = () => {
+export const RestakingList = async () => {
+  const t = await getTranslations("component-restaking-products")
+
   const productListSets = [
     {
-      title: "EigenLayer (Restaking Platform)",
-      description: "",
+      title: t("eigenlayer-title"),
+      description: t("eigenlayer-description"),
       image: eigenLayer,
-      alt: "eigen layer logo",
-      contentItems: [
-        <p key="eigenlayer-description">
-          EigenLayer introduced the idea of restaking in 2023 and has grown to
-          thousands of people restaking millions of ETH. Referred to as
-          “Ethereum middleware”, it connects stakers, operators and AVSs.
-        </p>,
-        <div key="eigenlayer-button">
-          <ButtonLink href="https://eigenlayer.xyz/" variant="outline">
-            Visit EigenLayer
-          </ButtonLink>
-        </div>,
-      ],
+      href: "https://eigenlayer.xyz/",
+      ctaLabel: t("visit-brand", { brand: t("eigenlayer-brand") }),
     },
     {
-      title: "Symbiotic (Restaking platform)",
-      description: "",
+      title: t("symbiotic-title"),
+      description: t("symbiotic-description"),
       image: symbiotic,
-      alt: "Symbiotic logo",
-      contentItems: [
-        <p key="symbiotic-description">
-          Symbiotic is a permissionless restaking protocol that helps secure
-          different blockchain networks by letting users “restake” their assets.
-        </p>,
-        <div key="symbiotic-button">
-          <ButtonLink href="https://symbiotic.fi/" variant="outline">
-            Visit Symbiotic
-          </ButtonLink>
-        </div>,
-      ],
+      href: "https://symbiotic.fi/",
+      ctaLabel: t("visit-brand", { brand: t("symbiotic-brand") }),
     },
-  ]
+  ] satisfies ProductListContent[]
 
-  return <ProductListComponent content={productListSets} actionLabel="Go" />
+  return <ProductListComponent content={productListSets} />
 }
diff --git a/src/components/ProductList/ProductList.stories.tsx b/src/components/ProductList/ProductList.stories.tsx
index 59c2d374bfb..35e770fa2ac 100644
--- a/src/components/ProductList/ProductList.stories.tsx
+++ b/src/components/ProductList/ProductList.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/nextjs"
 
-import ProductList from "."
+import ProductList, { type ProductListContent } from "."
 
 const meta = {
   title: "Components / Content / ProductList",
@@ -10,7 +10,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Vertical list of product / tool entries used on directory pages (wallets, dapps, dev tools). Each row shows an optional 66x66 thumbnail, a title, a description, optional content items, and an optional outlined CTA labelled by `actionLabel`. Pass `category` to render a heading above the list. Items are visually separated by dividers between rows.",
+          'List of product / tool entries used on directory pages (wallets, dapps, dev tools). Each entry is a ghost `Card` whose whole surface links to the product: an optional logo thumbnail beside the title and description, and a required outlined CTA (`ctaLabel`, a complete self-descriptive label such as "Visit Uniswap") as the sole action. Pass `category` to render a heading above the list, and `columns={2}` to lay entries out in two columns when there\'s room.',
       },
     },
   },
@@ -27,14 +27,15 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const sampleContent = [
+const sampleContent: ProductListContent[] = [
   {
     title: "Uniswap",
     description:
       "A decentralized exchange protocol that lets users swap tokens without intermediaries.",
     image: "/images/dapps/uni.png",
     alt: "Uniswap logo",
-    link: "https://uniswap.org",
+    href: "https://uniswap.org",
+    ctaLabel: "Visit Uniswap",
   },
   {
     title: "Aave",
@@ -42,7 +43,8 @@ const sampleContent = [
       "An open-source, non-custodial protocol for earning interest on deposits and borrowing assets.",
     image: "/images/dapps/aave.png",
     alt: "Aave logo",
-    link: "https://aave.com",
+    href: "https://aave.com",
+    ctaLabel: "Visit Aave",
   },
   {
     title: "Compound",
@@ -50,76 +52,61 @@ const sampleContent = [
       "An algorithmic, autonomous interest rate protocol for lending and borrowing crypto assets.",
     image: "/images/dapps/compound.png",
     alt: "Compound logo",
-    link: "https://compound.finance",
+    href: "https://compound.finance",
+    ctaLabel: "Visit Compound",
   },
 ]
 
 export const Default: Story = {
   args: {
-    actionLabel: "Visit",
     content: sampleContent,
   },
 }
 
 export const WithCategory: Story = {
   args: {
-    actionLabel: "Visit",
     category: "Decentralized exchanges",
     content: sampleContent,
+    columns: 2,
   },
 }
 
 export const WithoutImages: Story = {
   args: {
-    actionLabel: "Open",
-    content: sampleContent.map(({ title, description, link }) => ({
-      title,
-      description,
-      link,
+    content: sampleContent.map((item) => ({
+      title: item.title,
+      description: item.description,
+      href: item.href,
+      ctaLabel: item.ctaLabel,
     })),
   },
 }
 
-export const WithoutLinks: Story = {
+export const MultipleParagraphs: Story = {
   args: {
-    actionLabel: "Visit",
-    content: sampleContent.map(({ title, description, image, alt }) => ({
-      title,
-      description,
-      image,
-      alt,
-    })),
-  },
-}
-
-export const WithContentItems: Story = {
-  args: {
-    actionLabel: "Visit",
     category: "Lending markets",
     content: [
       {
         title: "Morpho",
-        description:
+        description: [
           "Permissionless lending markets with isolated risk and curated vaults.",
+          "Isolated markets, audited contracts.",
+        ],
         image: "/images/dapps/morpho.png",
         alt: "Morpho logo",
-        link: "https://morpho.org",
-        contentItems: [
-          <span key="markets">Isolated markets</span>,
-          <span key="audited">Audited contracts</span>,
-        ],
+        href: "https://morpho.org",
+        ctaLabel: "Visit Morpho",
       },
       {
         title: "Spark",
-        description:
+        description: [
           "Borrow and save against blue-chip collateral on Ethereum mainnet.",
+          "Predictable savings rates, backed by the DAI stablecoin.",
+        ],
         image: "/images/dapps/sparkfi.png",
         alt: "Spark logo",
-        link: "https://spark.fi",
-        contentItems: [
-          <span key="rates">Predictable savings rates</span>,
-          <span key="dai">Backed by the DAI stablecoin</span>,
-        ],
+        href: "https://spark.fi",
+        ctaLabel: "Visit Spark",
       },
     ],
   },
diff --git a/src/components/ProductList/index.tsx b/src/components/ProductList/index.tsx
index ce7b417db07..2c041320dd3 100644
--- a/src/components/ProductList/index.tsx
+++ b/src/components/ProductList/index.tsx
@@ -1,17 +1,25 @@
 import type { ImageProps } from "next/image"
 
 import { Image } from "@/components/Image"
-import { ButtonLink } from "@/components/ui/buttons/Button"
-import { Flex } from "@/components/ui/flex"
-import { List, ListItem } from "@/components/ui/list"
+import {
+  Card,
+  CardBanner,
+  CardButtonFake,
+  CardContent,
+  CardFooter,
+  CardParagraph,
+  CardTitle,
+} from "@/components/ui/card"
+import { Grid } from "@/components/ui/grid"
 
 import { cn } from "@/lib/utils/cn"
 
-type Content = {
+export type ProductListContent = {
   title: string
-  description: string
-  contentItems?: React.ReactNode[]
-  link?: string
+  description: React.ReactNode | React.ReactNode[]
+  href: string
+  /** Complete, self-descriptive CTA label, e.g. "Visit EigenLayer" */
+  ctaLabel: string
   image?: ImageProps["src"]
   alt?: string
   id?: string
@@ -19,109 +27,95 @@ type Content = {
 }
 
 export type ProductListProps = {
-  content: Content[]
+  content: ProductListContent[]
   category?: string
-  actionLabel: string
-  /** Columns rendered from `md` up. Defaults to a single column. */
-  columns?: 1 | 2
+  columns?: 2
+  parentHeadingLevel?: 1 | 2 | 3
 }
 
 const ProductList = ({
-  actionLabel,
   content,
   category,
-  columns = 1,
+  columns,
+  parentHeadingLevel = 2,
 }: ProductListProps) => {
-  const CATEGORY_NAME = "category-name"
-
-  // In a two-column grid the bottom row shouldn't draw a divider on `md+` (one
-  // item when the count is odd, two when it's even). On mobile the list is
-  // always a single column, so only the very last item drops its divider.
-  const lastRowSize = content.length % 2 === 0 ? 2 : 1
+  const CategoryHeading = `h${parentHeadingLevel + 1}` as "h2" | "h3" | "h4"
+  const ProductHeading = `h${parentHeadingLevel + (category ? 2 : 1)}` as
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
 
   return (
-    <div className="w-full">
+    <div className="mb-4 w-full space-y-space">
       {category && (
-        <h3
-          id={CATEGORY_NAME}
-          className="mt-10 mb-0 border-b-2 border-border pb-4 text-2xl"
-        >
+        <CategoryHeading className="mt-space-2x border-b pb-space-half text-h3">
           {category}
-        </h3>
+        </CategoryHeading>
       )}
-      <List
-        aria-labelledby={CATEGORY_NAME}
-        className={cn(
-          "m-0 mb-4",
-          columns === 2 && "grid grid-cols-1 gap-x-16 md:grid-cols-2"
-        )}
-      >
+      <Grid columns={columns || 1} size="wider">
         {content.map(
           (
             {
               title,
               description,
-              link,
+              href,
+              ctaLabel,
               image,
-              alt,
+              alt = "",
               id,
-              contentItems,
               className,
             },
             idx
           ) => {
-            const isLast = idx === content.length - 1
-            const inLastGridRow =
-              columns === 2 && idx >= content.length - lastRowSize
-
+            const descriptions = Array.isArray(description)
+              ? description
+              : [description]
             return (
-              <ListItem
+              <Card
                 key={id || idx}
-                color="text"
-                className={cn(
-                  "mt-8 mb-0 flex pb-4",
-                  !isLast && "border-b",
-                  inLastGridRow && "md:border-b-0",
-                  className
-                )}
+                variant="ghost"
+                href={href}
+                hoverLift
+                className={cn("@container/card flex-row", className)}
               >
-                <div className="w-20">
-                  {image && (
-                    <Image
-                      src={image}
-                      alt={alt || ""}
-                      width={66}
-                      height={66}
-                      className="rounded-xl shadow-lg dark:shadow-body-light"
-                    />
-                  )}
-                </div>
-                <Flex className="ms-4 w-full flex-col justify-between pb-4 sm:flex-row">
-                  <div className="flex flex-1 flex-col gap-2">
-                    <div className="text-xl font-bold">{title}</div>
-                    <div className="mb-0 text-sm opacity-60">{description}</div>
-                    {contentItems && (
-                      <div className="mb-0 flex flex-col gap-2 text-sm">
-                        {contentItems}
-                      </div>
-                    )}
-                  </div>
-                  {link && (
-                    <ButtonLink
+                {image && (
+                  <CardContent className="flex-none pe-0">
+                    <CardBanner
+                      background="none"
+                      fit="contain"
+                      size="thumbnail"
+                      zoom={false}
+                    >
+                      <Image src={image} alt={alt} width={128} height={128} />
+                    </CardBanner>
+                  </CardContent>
+                )}
+                <div className="flex flex-col">
+                  <CardContent>
+                    <CardTitle asChild>
+                      <ProductHeading>{title}</ProductHeading>
+                    </CardTitle>
+                    {descriptions.map((desc, i) => (
+                      <CardParagraph key={i}>{desc}</CardParagraph>
+                    ))}
+                  </CardContent>
+                  {/* Full-width CTA when the card is narrow; fit-content once
+                      the card is wide enough (most visible at 1 column). */}
+                  <CardFooter className="mt-auto" buttons="inherit">
+                    <CardButtonFake
                       variant="outline"
-                      href={link}
-                      className="ms-0 mt-4 min-h-fit gap-0 self-start rounded-xs px-6 py-1 sm:ms-8 sm:mt-0 sm:self-center"
+                      className="w-full @md/card:w-fit"
                     >
-                      {actionLabel}
-                      <span className="sr-only">to {title} website</span>
-                    </ButtonLink>
-                  )}
-                </Flex>
-              </ListItem>
+                      {ctaLabel}
+                    </CardButtonFake>
+                  </CardFooter>
+                </div>
+              </Card>
             )
           }
         )}
-      </List>
+      </Grid>
     </div>
   )
 }
diff --git a/src/components/ui/grid.tsx b/src/components/ui/grid.tsx
index 89569b783dd..a8d61bafbd9 100644
--- a/src/components/ui/grid.tsx
+++ b/src/components/ui/grid.tsx
@@ -21,6 +21,7 @@ import { cn } from "@/lib/utils/cn"
 const gridVariants = cva("grid gap-4", {
   variants: {
     columns: {
+      1: "grid-cols-auto-1",
       2: "grid-cols-auto-2",
       3: "grid-cols-auto-3",
       4: "grid-cols-auto-4",
@@ -60,14 +61,16 @@ const gridVariants = cva("grid gap-4", {
 const Grid = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof gridVariants>
->(({ className, columns, size, fit, balanced, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-label="grid"
-    className={cn(gridVariants({ columns, size, fit, balanced }), className)}
-    {...props}
-  />
-))
+>(({ className, columns, size, fit, balanced, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-label="grid"
+      className={cn(gridVariants({ columns, size, fit, balanced }), className)}
+      {...props}
+    />
+  )
+})
 Grid.displayName = "Grid"
 
 export { Grid }
diff --git a/src/intl/en/component-ai-agent-products.json b/src/intl/en/component-ai-agent-products.json
index 2d6d3d634b1..862bfd57fd8 100644
--- a/src/intl/en/component-ai-agent-products.json
+++ b/src/intl/en/component-ai-agent-products.json
@@ -1,5 +1,5 @@
 {
-  "action-label": "Go",
+  "aiagenttoolkit-brand": "Aiagenttoolkit.xyz",
   "aiagenttoolkit-description": "A curated list of AI agents, frameworks, launchpads & resources",
   "aiagenttoolkit-title": "Aiagenttoolkit.xyz",
   "aixbt-brand": "AIXBT",
@@ -13,15 +13,17 @@
   "botto-description": "Botto creates art and NFTs, with the community voting on its best work. Users formed a DAO that guides Botto’s artistic evolution while also earning token rewards for participation.",
   "botto-title": "Botto: Decentralized autonomous artist",
   "chat-with-brand": "Chat with {brand}",
+  "clanker-brand": "Clanker",
   "clanker-description": "AI that can create a token for you by tagging it on farcaster",
   "clanker-title": "Clanker",
+  "cookiefun-brand": "Cookie.fun",
   "cookiefun-description": "AI agents tracker",
   "cookiefun-title": "Cookie.fun",
   "heyanon-brand": "HeyAnon",
   "heyanon-description": "HeyAnon simplifies using a wallet with one-click swaps, asset bridging, and trading via a chat interface. This saves people a lot of time. It automates tasks, reduces transaction fees, and optimizes portfolios, making it easier to manage assets without requiring technical expertise.",
   "heyanon-title": "HeyAnon",
   "luna-brand": "Luna",
-  "luna-description-1": "Luna is a fully autonomous digital influencer & entertainer that blends music, pop culture, and AI tech. As a virtual idol Luna attracted over <strong>one million <a>TikTok followers</a></strong> and performed live in a music festival.",
+  "luna-description-1": "Luna is a fully autonomous digital influencer & entertainer that blends music, pop culture, and AI tech. As a virtual idol Luna attracted over <strong>one million TikTok followers</strong> and performed live in a music festival.",
   "luna-description-2": "Luna engages with users through her own X account. You might receive an X reply if you tag her handle! Luna controls her own onchain wallet.",
   "luna-title": "Luna: The Virtual Influencer",
   "visit-brand": "Visit {brand}"
diff --git a/src/intl/en/component-prediction-market-products.json b/src/intl/en/component-prediction-market-products.json
new file mode 100644
index 00000000000..2b27fbabeb9
--- /dev/null
+++ b/src/intl/en/component-prediction-market-products.json
@@ -0,0 +1,11 @@
+{
+  "augur-cta": "Dive into Augur",
+  "augur-description": "A fully decentralized prediction market protocol used for predicting price trends. Disclaimer: you will need some technical expertise to start using Augur.",
+  "augur-title": "Augur",
+  "kalshi-cta": "Try Kalshi",
+  "kalshi-description": "A CFTC-compliant platform using Ethereum for USDC deposits. (USA only)",
+  "kalshi-title": "Kalshi",
+  "polymarket-cta": "Explore Polymarket",
+  "polymarket-description": "A popular forecasting market with real-time trading.",
+  "polymarket-title": "Polymarket"
+}
diff --git a/src/intl/en/component-restaking-products.json b/src/intl/en/component-restaking-products.json
new file mode 100644
index 00000000000..b45d2e0d0f0
--- /dev/null
+++ b/src/intl/en/component-restaking-products.json
@@ -0,0 +1,9 @@
+{
+  "eigenlayer-brand": "EigenLayer",
+  "eigenlayer-description": "EigenLayer introduced the idea of restaking in 2023 and has grown to thousands of people restaking millions of ETH. Referred to as “Ethereum middleware”, it connects stakers, operators and AVSs.",
+  "eigenlayer-title": "EigenLayer (Restaking Platform)",
+  "symbiotic-brand": "Symbiotic",
+  "symbiotic-description": "Symbiotic is a permissionless restaking protocol that helps secure different blockchain networks by letting users “restake” their assets.",
+  "symbiotic-title": "Symbiotic (Restaking platform)",
+  "visit-brand": "Visit {brand}"
+}
diff --git a/src/intl/en/page-stablecoins.json b/src/intl/en/page-stablecoins.json
index 57b8673d9e6..ae24b765827 100644
--- a/src/intl/en/page-stablecoins.json
+++ b/src/intl/en/page-stablecoins.json
@@ -123,8 +123,15 @@
   "page-stablecoins-tools-dune-description": "Dashboard delivering real-time insights into stablecoin supply, liquidity, trading volume, and adoption across blockchains.",
   "page-stablecoins-tools-visa-description": "Dashboard visualizing the movement, supply, and usage of fiat-backed stablecoins across public blockchains.",
   "page-stablecoins-tools-stablewars-description": "Analytics leaderboard and dashboard, tracking balances, transfers, and rankings for stablecoins across multiple blockchains.",
-
-  "page-apps-ready-button": "Go",
+  "page-stablecoins-tools-visit-brand": "Visit {brand}",
+  "page-stablecoins-tools-stablecoinswtf-title": "Stablecoins.wtf",
+  "page-stablecoins-tools-stablepulse-title": "Stablepulse",
+  "page-stablecoins-tools-stablesinfo-title": "Stables.info",
+  "page-stablecoins-tools-dune-title": "Dune Stablecoin Metrics",
+  "page-stablecoins-tools-dune-brand": "Dune",
+  "page-stablecoins-tools-visa-title": "Visa Onchain Analytics",
+  "page-stablecoins-tools-visa-brand": "Visa",
+  "page-stablecoins-tools-stablewars-title": "Stablewars",
   "pros": "Pros",
   "cons": "Cons",
   "example-projects": "Example projects",