diff --git a/.changeset/panel-v21-hero.md b/.changeset/panel-v21-hero.md
new file mode 100644
index 0000000000..d51ced250c
--- /dev/null
+++ b/.changeset/panel-v21-hero.md
@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Replace the Panel section header with the v2.1 hero: a judgment headline, a subhead explaining the Stage framework, a link to the framework docs, and a "Governance risk, right now" card showing Stage 0/1/2 as horizontal bars with per-stage hover detail. Retires the Treasury Monitoring and Delegated Supply History cards.
diff --git a/.changeset/panel-v21-services-row.md b/.changeset/panel-v21-services-row.md
new file mode 100644
index 0000000000..33e1188080
--- /dev/null
+++ b/.changeset/panel-v21-services-row.md
@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Add the Blockful services row at the foot of the panel, listing the service lines with a link to the contact page.
diff --git a/.changeset/panel-v21-table-scroll.md b/.changeset/panel-v21-table-scroll.md
new file mode 100644
index 0000000000..445331d80a
--- /dev/null
+++ b/.changeset/panel-v21-table-scroll.md
@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Show every monitored DAO on the panel: the homepage itself now scrolls and the table header stays pinned on desktop.
diff --git a/.changeset/panel-v21-ticker.md b/.changeset/panel-v21-ticker.md
new file mode 100644
index 0000000000..6bca8ed0c3
--- /dev/null
+++ b/.changeset/panel-v21-ticker.md
@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Add the "Latest finding" ticker between the panel hero and the Monitored DAOs table. The strip shows the newest post on the blockful Paragraph publication, read server-side from its RSS feed and revalidated hourly, and links out to that post. If the feed is unreachable it falls back to the publication index, so the ticker always renders.
diff --git a/.changeset/panel-v21-track-record.md b/.changeset/panel-v21-track-record.md
new file mode 100644
index 0000000000..dc7d041acf
--- /dev/null
+++ b/.changeset/panel-v21-track-record.md
@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Add the "Track record" section to the panel: three outcome-framed case cards linking to the case write-ups, plus a testimonial carousel carrying the verified quotes from the X mentions audit. `ClickableCard` now accepts an `href` so cards can render as links.
diff --git a/.changeset/panel-v21-use-it-now.md b/.changeset/panel-v21-use-it-now.md
new file mode 100644
index 0000000000..8a34df91c4
--- /dev/null
+++ b/.changeset/panel-v21-use-it-now.md
@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Add the "Use it now" section to the panel and an explainer strip above the channel cards on the alerts page.
diff --git a/apps/dashboard/app/globals.css b/apps/dashboard/app/globals.css
index a0672f0bf3..b246e46c50 100644
--- a/apps/dashboard/app/globals.css
+++ b/apps/dashboard/app/globals.css
@@ -36,7 +36,11 @@
   --font-mono:
     "Roboto Mono", ui-monospace, SFMono-Regular, "Menlo", "Monaco", "Consolas",
     "Liberation Mono", "Courier New", monospace;
+  /* The alternative (mono) styles track at 6% of their size. CSS letter-spacing
+   * takes no percentages, so each size gets its resolved value: wider is the
+   * 12px step (--text-alternative-xs), alternative-sm the 13px one. */
   --tracking-wider: 0.72px;
+  --tracking-alternative-sm: 0.78px;
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
   --animate-scroll-left: scroll-left 20s linear infinite;
diff --git a/apps/dashboard/app/page.tsx b/apps/dashboard/app/page.tsx
index ba340f9a68..c686ea65d6 100644
--- a/apps/dashboard/app/page.tsx
+++ b/apps/dashboard/app/page.tsx
@@ -51,12 +51,12 @@ export default function Home() {
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <JsonLd data={softwareApplicationSchema} />
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto lg:flex lg:min-h-0 lg:flex-col lg:overflow-hidden">
+      <main className="flex-1 overflow-auto">
         <div className="lg:hidden">
           <HeaderMobile className="fixed! top-0" />
         </div>
-        <div className="flex min-h-screen w-full flex-col items-center lg:h-full lg:min-h-0 lg:flex-1">
-          <div className="w-full flex-1 lg:flex lg:min-h-0 lg:flex-col">
+        <div className="flex min-h-screen w-full flex-col items-center">
+          <div className="w-full flex-1">
             <PanelSection />
           </div>
           <Footer />
diff --git a/apps/dashboard/e2e/mobile-smoke.spec.ts b/apps/dashboard/e2e/mobile-smoke.spec.ts
index cdc698a083..ae5d0b5c1c 100644
--- a/apps/dashboard/e2e/mobile-smoke.spec.ts
+++ b/apps/dashboard/e2e/mobile-smoke.spec.ts
@@ -9,9 +9,13 @@ test.describe("Mobile smoke tests", () => {
 
   test("Panel (/) renders heading on mobile", async ({ goto, page }) => {
     await goto("/");
-    await expect(page.locator("h4").filter({ hasText: "Panel" })).toBeVisible({
-      timeout: 15_000,
-    });
+    // Panel v2.1 dropped the "Panel" section title; the hero h1 is the page
+    // heading on every viewport.
+    await expect(
+      page
+        .locator("h1")
+        .filter({ hasText: "See which DAOs could be captured" }),
+    ).toBeVisible({ timeout: 15_000 });
   });
 
   test("DAO Overview (/ens) renders on mobile", async ({ goto, page }) => {
diff --git a/apps/dashboard/e2e/panel.spec.ts b/apps/dashboard/e2e/panel.spec.ts
index d4c910735f..bfc55ce385 100644
--- a/apps/dashboard/e2e/panel.spec.ts
+++ b/apps/dashboard/e2e/panel.spec.ts
@@ -1,16 +1,22 @@
 import { test, expect } from "./fixtures";
 
+/* Desktop width, but shorter than the table: the layout-sensitive tests below
+ * all need the page to scroll vertically past the table. */
+const SHORT_DESKTOP_VIEWPORT = { width: 1920, height: 640 };
+
 test.describe("Panel page", () => {
   test(
-    "renders Panel heading and description",
+    "renders the panel hero heading and description",
     { tag: "@smoke" },
     async ({ goto, page }) => {
       await goto("/");
       await expect(
-        page.locator("h4").filter({ hasText: "Panel" }),
+        page
+          .locator("h1")
+          .filter({ hasText: "See which DAOs could be captured" }),
       ).toBeVisible();
       await expect(
-        page.locator("text=Check governance security across DAOs"),
+        page.locator("text=Live governance-security risk for every DAO"),
       ).toBeVisible();
     },
   );
@@ -61,7 +67,7 @@ test.describe("Panel page", () => {
     goto,
     page,
   }) => {
-    await page.setViewportSize({ width: 1920, height: 640 });
+    await page.setViewportSize(SHORT_DESKTOP_VIEWPORT);
     await page.route("**/api/user/api/auth/get-session", (route) =>
       route.fulfill({
         status: 200,
@@ -82,15 +88,83 @@ test.describe("Panel page", () => {
     expect(tableBox).not.toBeNull();
     expect(footerBox).not.toBeNull();
     expect(tableBox!.y + tableBox!.height).toBeLessThanOrEqual(footerBox!.y);
+
+    // The table is no longer an inner scroll box: every row lays out at full
+    // height, past the bottom of this viewport, and `main` is what scrolls.
+    await expect
+      .poll(() => tableContainer.evaluate((element) => element.clientHeight))
+      .toBeGreaterThan(SHORT_DESKTOP_VIEWPORT.height);
     await expect
       .poll(() =>
-        tableContainer.evaluate(
-          (element) => element.scrollHeight > element.clientHeight,
-        ),
+        page
+          .locator("main")
+          .evaluate((element) => element.scrollHeight > element.clientHeight),
       )
       .toBe(true);
   });
 
+  // 1024 exercises the lg band, where the sidebar is up but headers may
+  // wrap; 1920 exercises the roomy layout. The header must pin in both.
+  for (const width of [1024, SHORT_DESKTOP_VIEWPORT.width]) {
+    test(`keeps the table header pinned while the ${width}px desktop page scrolls`, async ({
+      goto,
+      page,
+    }) => {
+      await page.setViewportSize({
+        width,
+        height: SHORT_DESKTOP_VIEWPORT.height,
+      });
+      await page.route("**/api/user/api/auth/get-session", (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: "null",
+        }),
+      );
+      await goto("/");
+
+      await expect(page.locator("table thead").first()).toBeVisible({
+        timeout: 15_000,
+      });
+
+      // Metric cells stream in after load and keep growing the page, so the
+      // scroll, its precondition, and the header measurement all happen inside
+      // one polled evaluation: park the table top 150px above the scrollport
+      // of `main` (the page scroller) — never "scroll to bottom", sections
+      // after the table would push it entirely off screen — then read where
+      // the sticky header rests.
+      const positions = () =>
+        page.locator("main").evaluate((main) => {
+          const table = main.querySelector("table");
+          const thead = table?.querySelector("thead");
+          if (!table || !thead)
+            return { tableTop: NaN, theadTop: NaN, mainOverflowX: NaN };
+          main.scrollTop +=
+            table.getBoundingClientRect().top -
+            main.getBoundingClientRect().top +
+            150;
+          return {
+            tableTop: table.getBoundingClientRect().top,
+            theadTop: thead.getBoundingClientRect().top,
+            mainOverflowX: main.scrollWidth - main.clientWidth,
+          };
+        });
+
+      await expect
+        .poll(async () => (await positions()).tableTop, { timeout: 15_000 })
+        .toBeLessThan(0);
+
+      const { tableTop, theadTop, mainOverflowX } = await positions();
+      expect(tableTop).toBeLessThan(0);
+      // Pinned means resting at the top of the scrollport (sticky -top-px).
+      expect(theadTop).toBeGreaterThanOrEqual(-2);
+      expect(theadTop).toBeLessThanOrEqual(2);
+      // The un-scrollported table must not leak a page-level horizontal
+      // scrollbar; column headers wrap below xl to keep this true.
+      expect(mainOverflowX).toBe(0);
+    });
+  }
+
   test("sortable column headers respond to clicks", async ({ goto, page }) => {
     await goto("/");
     await expect(page.locator("table").first()).toBeVisible({
diff --git a/apps/dashboard/features/alerts/AlertsSection.tsx b/apps/dashboard/features/alerts/AlertsSection.tsx
index b1e2913100..3b07d43dc3 100644
--- a/apps/dashboard/features/alerts/AlertsSection.tsx
+++ b/apps/dashboard/features/alerts/AlertsSection.tsx
@@ -16,6 +16,18 @@ export const AlertsSection = () => {
       className="bg-surface-background! lg:mt-0! border-b-0!"
     >
       <div className="flex flex-col gap-2">
+        <div className="bg-surface-default flex flex-col gap-1 p-4">
+          {/* Not a heading: the section title above renders as h4, so any
+           * heading here would invert the document outline. */}
+          <p className="text-primary text-alternative-xs font-mono font-medium uppercase leading-4 tracking-wider">
+            What you get pinged about
+          </p>
+          <p className="text-secondary text-sm font-normal leading-5">
+            New proposals on-chain or Snapshot, vote reminders, delegation
+            shifts, and results for the DAOs you track. You choose the triggers;
+            pick a channel below to start.
+          </p>
+        </div>
         <div className="grid grid-cols-1 gap-3 py-5 lg:grid-cols-3">
           {ALERTS_ITEMS.map((alert: AlertItem) => (
             <AlertCard
diff --git a/apps/dashboard/features/panel/PanelSection.tsx b/apps/dashboard/features/panel/PanelSection.tsx
index b528b264ae..895cd2a61d 100644
--- a/apps/dashboard/features/panel/PanelSection.tsx
+++ b/apps/dashboard/features/panel/PanelSection.tsx
@@ -1,59 +1,43 @@
-import { BarChart4 } from "lucide-react";
-
-import {
-  PanelTable,
-  DelegatedSupplyHistory,
-  DaoProtectionLevels,
-  TreasuryMonitoring,
-} from "@/features/panel/components";
-import { TheSectionLayout } from "@/shared/components";
-import { Carousel } from "@/shared/components/design-system/carousel/Carousel";
-import { DividerDefault } from "@/shared/components/design-system/divider/DividerDefault";
+import { LatestFindingTicker } from "@/features/panel/components/LatestFindingTicker";
+import { PanelHero } from "@/features/panel/components/PanelHero";
+import { PanelTable } from "@/features/panel/components/PanelTable";
+import { ServicesRow } from "@/features/panel/components/ServicesRow";
+import { TrackRecordSection } from "@/features/panel/components/TrackRecordSection";
+import { UseItNowSection } from "@/features/panel/components/UseItNowSection";
 import {
   SubSection,
   SubSectionsContainer,
 } from "@/shared/components/design-system/section";
-import { PAGES_CONSTANTS } from "@/shared/constants/pages-constants";
 
 export const PanelSection = () => {
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.panel.title}
-      icon={<BarChart4 className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.panel.description}
-      className="mt-12 lg:mt-0 lg:min-h-0"
-    >
-      <div className="flex flex-col gap-8 lg:h-full lg:min-h-0 lg:flex-1 lg:gap-2">
-        <div className="lg:hidden">
-          <Carousel
-            slides={[
-              <DaoProtectionLevels key="dao-protection-levels" />,
-              <TreasuryMonitoring key="treasury-monitoring" />,
-              <DelegatedSupplyHistory key="delegated-supply-history" />,
-            ]}
-          />
-        </div>
-        <div className="hidden gap-2 lg:grid lg:grid-cols-3">
-          <DaoProtectionLevels />
-          <TreasuryMonitoring />
-          <DelegatedSupplyHistory />
-        </div>
+    // Figma spaces the three blocks 32px apart and everything inside them 8px
+    // apart, so the inner wrappers hold the tight gap while the page holds the
+    // section rhythm.
+    <div className="mt-12 flex w-full flex-col gap-5 px-4 py-5 lg:mt-0 lg:gap-8 lg:p-5">
+      <div className="flex flex-col gap-5 lg:gap-2">
+        <PanelHero />
 
-        <div className="block lg:hidden">
-          <DividerDefault isHorizontal />
-        </div>
+        <LatestFindingTicker />
 
-        <SubSectionsContainer className="gap-3 lg:min-h-0 lg:flex-1">
+        <SubSectionsContainer className="gap-3">
           <SubSection
             className="gap-0"
             subsectionTitle={"Monitored DAOs"}
             dateRange=""
-            contentClassName="lg:flex lg:flex-col lg:flex-1 lg:min-h-0"
           >
             <PanelTable />
           </SubSection>
         </SubSectionsContainer>
       </div>
-    </TheSectionLayout>
+
+      <TrackRecordSection />
+
+      <div className="flex flex-col gap-5 lg:gap-2">
+        <UseItNowSection />
+
+        <ServicesRow />
+      </div>
+    </div>
   );
 };
diff --git a/apps/dashboard/features/panel/components/DaoProtectionLevels.tsx b/apps/dashboard/features/panel/components/DaoProtectionLevels.tsx
index 356c17726e..7c1b103e39 100644
--- a/apps/dashboard/features/panel/components/DaoProtectionLevels.tsx
+++ b/apps/dashboard/features/panel/components/DaoProtectionLevels.tsx
@@ -1,14 +1,8 @@
 "use client";
 
-import { ChevronRight } from "lucide-react";
 import { useMemo } from "react";
-import { BarChart, Bar, XAxis, Cell, LabelList, Tooltip } from "recharts";
 
-import { DaoProtectionLevelsTooltip } from "@/features/panel/components/tooltips/DaoProtectionLevelsTooltip";
-import { DividerDefault } from "@/shared/components/design-system/divider/DividerDefault";
-import { DefaultLink } from "@/shared/components/design-system/links/default-link";
-import type { ChartConfig } from "@/shared/components/ui/chart";
-import { ChartContainer } from "@/shared/components/ui/chart";
+import { Tooltip } from "@/shared/components/design-system/tooltips/Tooltip";
 import daoConfigByDaoId from "@/shared/dao-config";
 import {
   fieldsToArray,
@@ -16,164 +10,127 @@ import {
 } from "@/shared/dao-config/utils";
 import { DaoIdEnum } from "@/shared/types/daos";
 import { Stage } from "@/shared/types/enums/Stage";
+import { cn } from "@/shared/utils/cn";
 
-const chartConfig: ChartConfig = {
-  value: {
-    label: "Value",
-    color: "var(--color-primary)",
+/* Bars are sized against the busiest stage. The count rides at the end of the bar,
+ * so the widest bar fills the track less that label and its gap. */
+const EMPTY_BAR_WIDTH = "0.5rem";
+const COUNT_TRACK_WIDTH = "2rem";
+
+const STAGE_BARS = [
+  {
+    stage: Stage.ZERO,
+    label: "Stage 0",
+    riskLevel: "High Risk",
+    labelClassName: "text-error",
+    barClassName: "bg-error",
+    description:
+      "DAOs that have a critical weakness that could let an attacker influence or take over governance",
+  },
+  {
+    stage: Stage.ONE,
+    label: "Stage 1",
+    riskLevel: "Medium Risk",
+    labelClassName: "text-warning",
+    barClassName: "bg-warning",
+    description:
+      "DAOs that have no critical weaknesses, but still have a medium-risk issue that could affect governance.",
+  },
+  {
+    stage: Stage.TWO,
+    label: "Stage 2",
+    riskLevel: "Low Risk",
+    labelClassName: "text-success",
+    barClassName: "bg-success",
+    description:
+      "DAOs with no significant risks and strong protection against governance attacks.",
   },
-} satisfies ChartConfig;
+] as const;
 
 export const DaoProtectionLevels = () => {
-  // Calculate stage distribution from real DAO data
-  const stageData = useMemo(() => {
-    // Get all DAOs
-    const daoIds = Object.values(DaoIdEnum);
+  const stageCounts = useMemo(() => {
+    const counts: Partial<Record<Stage, number>> = {};
 
-    // Count DAOs by stage
-    const stageCounts = {
-      [Stage.ZERO]: 0,
-      [Stage.ONE]: 0,
-      [Stage.TWO]: 0,
-      [Stage.UNKNOWN]: 0,
-      [Stage.NONE]: 0,
-    };
-
-    daoIds.forEach((daoId) => {
+    Object.values(DaoIdEnum).forEach((daoId) => {
       const daoConfig = daoConfigByDaoId[daoId];
-      let stage: Stage;
-
-      if (!daoConfig.governanceImplementation) {
-        stage = Stage.UNKNOWN;
-      } else {
-        stage = getDaoStageFromFields({
-          fields: fieldsToArray(daoConfig.governanceImplementation?.fields),
-          noStage: daoConfig.noStage,
-        });
-      }
+      const stage = daoConfig.governanceImplementation
+        ? getDaoStageFromFields({
+            fields: fieldsToArray(daoConfig.governanceImplementation.fields),
+            noStage: daoConfig.noStage,
+          })
+        : Stage.UNKNOWN;
 
-      stageCounts[stage] = (stageCounts[stage] || 0) + 1;
+      counts[stage] = (counts[stage] ?? 0) + 1;
     });
 
-    // Map to chart data format
-    return [
-      {
-        stage: "Stage 0",
-        value: stageCounts[Stage.ZERO],
-        riskLevel: "High Risk",
-        color: "var(--color-error)",
-        description:
-          "DAOs that have a critical weakness that could let an attacker influence or take over governance",
-      },
-      {
-        stage: "Stage 1",
-        value: stageCounts[Stage.ONE],
-        riskLevel: "Medium Risk",
-        color: "var(--color-warning)",
-        description:
-          "DAOs that have no critical weaknesses, but still have a medium-risk issue that could affect governance.",
-      },
-      {
-        stage: "Stage 2",
-        value: stageCounts[Stage.TWO],
-        riskLevel: "Low Risk",
-        color: "var(--color-success)",
-        description:
-          "DAOs with no significant risks and strong protection against governance attacks.",
-      },
-      {
-        stage: "No Stage",
-        value: stageCounts[Stage.NONE],
-        riskLevel: "Doesn't apply",
-        color: "var(--color-surface-hover)",
-        description:
-          "DAOs that don't qualify for the staging system because they lack autonomous execution and rely on a centralized entity.",
-      },
-    ];
+    return counts;
   }, []);
 
-  // Calculate total monitored DAOs
-  const totalMonitored = useMemo(() => {
-    return Object.values(DaoIdEnum).length;
-  }, []);
+  const busiestStageCount = Math.max(
+    ...STAGE_BARS.map(({ stage }) => stageCounts[stage] ?? 0),
+    1,
+  );
 
   return (
-    <div className="bg-surface-background lg:bg-surface-default flex w-full flex-col gap-2 lg:p-4">
-      <div className="flex flex-col gap-1">
-        <h3 className="text-primary text-alternative-sm font-mono font-medium uppercase leading-5 tracking-wider">
-          DAO Governance Risk Levels
-        </h3>
-        <p className="text-secondary text-sm font-normal leading-5">
-          This platform monitors DAO governance risks and rates them through
-          Anticapture&apos;s Stage system.
-        </p>
-        <DefaultLink
-          href="https://blockful.gitbook.io/anticapture/anticapture/framework"
-          variant="highlight"
-          openInNewTab
-        >
-          Learn the Stage Criteria
-          <ChevronRight className="size-4" />
-        </DefaultLink>
-      </div>
-
-      {/* Status indicators */}
-      <div className="flex w-full flex-col gap-2">
-        <DividerDefault isHorizontal />
-        <div className="border-t-brand flex items-center gap-1.5 border-b-0 border-l-4 border-r-0 border-t-0 pl-3">
-          <p className="text-primary text-alternative-xs font-mono font-medium uppercase leading-4 tracking-wider">
-            {totalMonitored} DAOs monitored by Anticapture
-          </p>
-        </div>
-        <DividerDefault isHorizontal />
-      </div>
+    <div className="bg-surface-default flex w-full min-w-0 flex-1 flex-col justify-between gap-3.5 p-4">
+      <h3 className="text-primary text-alternative-sm tracking-alternative-sm font-mono font-medium uppercase leading-5">
+        Governance risk, right now
+      </h3>
 
-      {/* Bar Chart */}
-      <div className="flex flex-col gap-2">
-        <div className="lg:h-18.75 relative flex h-40 w-full items-end">
-          <ChartContainer className="h-full w-full" config={chartConfig}>
-            <BarChart
-              data={stageData}
-              margin={{ top: 16, right: 0, left: 0, bottom: 0 }}
-            >
-              <XAxis dataKey="stage" hide axisLine={false} tickLine={false} />
-              <Tooltip
-                content={DaoProtectionLevelsTooltip}
-                cursor={false}
-                allowEscapeViewBox={{ x: true, y: true }}
-              />
-              <Bar dataKey="value" radius={[0, 0, 0, 0]} minPointSize={1}>
-                {stageData.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={entry.color} />
-                ))}
-                <LabelList
-                  dataKey="value"
-                  position="top"
-                  className="text-primary text-xs font-medium"
-                  fill="var(--color-primary)"
-                  formatter={(value: number) => value}
-                />
-              </Bar>
-            </BarChart>
-          </ChartContainer>
-        </div>
+      <div className="flex flex-col justify-center gap-3">
+        {STAGE_BARS.map(
+          ({
+            stage,
+            label,
+            riskLevel,
+            labelClassName,
+            barClassName,
+            description,
+          }) => {
+            const count = stageCounts[stage] ?? 0;
+            const countLabel = `${count} DAO${count === 1 ? "" : "s"}`;
 
-        {/* Labels */}
-        <div className="flex w-full">
-          {stageData.map((item, index) => (
-            <div
-              key={index}
-              className="flex flex-1 flex-col items-center justify-center"
-            >
-              <p className="text-primary text-xs font-medium leading-4">
-                {item.stage}
-              </p>
-              <p className="text-secondary text-xs font-medium leading-4">
-                {item.riskLevel}
-              </p>
-            </div>
-          ))}
-        </div>
+            return (
+              <div key={stage} className="flex items-center gap-3">
+                <div className="w-22 flex shrink-0 flex-col text-xs font-medium leading-4">
+                  <span className={labelClassName}>{label}</span>
+                  <span className="text-secondary">{riskLevel}</span>
+                </div>
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <Tooltip
+                    asChild
+                    title={label}
+                    titleRight={countLabel}
+                    tooltipContent={
+                      <p className="text-secondary text-sm font-normal leading-5">
+                        {description}
+                      </p>
+                    }
+                  >
+                    {/* A button, not a div: the description only exists inside
+                     * the tooltip, so the bar has to be reachable by keyboard. */}
+                    <button
+                      type="button"
+                      aria-label={`${label}, ${countLabel}`}
+                      className={cn(
+                        "h-7 shrink-0 cursor-pointer",
+                        barClassName,
+                      )}
+                      style={{
+                        width: count
+                          ? `calc((100% - ${COUNT_TRACK_WIDTH}) * ${count / busiestStageCount})`
+                          : EMPTY_BAR_WIDTH,
+                      }}
+                    />
+                  </Tooltip>
+                  <span className="text-primary shrink-0 text-xs font-medium leading-4">
+                    {count}
+                  </span>
+                </div>
+              </div>
+            );
+          },
+        )}
       </div>
     </div>
   );
diff --git a/apps/dashboard/features/panel/components/DelegatedSupplyHistory.tsx b/apps/dashboard/features/panel/components/DelegatedSupplyHistory.tsx
deleted file mode 100644
index fc5ae256e5..0000000000
--- a/apps/dashboard/features/panel/components/DelegatedSupplyHistory.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-"use client";
-
-import Lottie from "lottie-react";
-import { useMemo } from "react";
-import {
-  CartesianGrid,
-  Line,
-  LineChart,
-  XAxis,
-  YAxis,
-  Tooltip,
-} from "recharts";
-
-import loadingAnimation from "@/public/loading-animation.json";
-import { TooltipInfo } from "@/shared/components";
-import type { ChartConfig } from "@/shared/components/ui/chart";
-import { ChartContainer } from "@/shared/components/ui/chart";
-import { useDelegationPercentageByDay } from "@/shared/hooks";
-
-const chartConfig: ChartConfig = {
-  delegatedSupply: {
-    label: "Delegated Supply",
-    color: "#FF6B6B",
-  },
-} satisfies ChartConfig;
-
-export const DelegatedSupplyHistory = () => {
-  // Calculate startDate as one year ago in seconds (Unix timestamp)
-  const startDate = useMemo(() => {
-    const oneYearAgo = new Date();
-    oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
-    return Math.floor(oneYearAgo.getTime() / 1000);
-  }, []);
-
-  // Calculate endDate as today at midnight UTC in seconds (Unix timestamp)
-  const endDate = useMemo(() => {
-    const today = new Date();
-    today.setUTCHours(0, 0, 0, 0);
-    return Math.floor(today.getTime() / 1000);
-  }, []);
-
-  const { data, loading, error } = useDelegationPercentageByDay(
-    startDate,
-    endDate,
-  );
-
-  // Transform data for chart
-  const chartData = useMemo(() => {
-    if (!data || data.length === 0) return [];
-
-    return data
-      .map((item) => {
-        // Parse date string as Unix timestamp (seconds) and convert to Date
-        // Handle both string timestamps and ensure valid number
-        if (!item.date || item.date === "" || isNaN(Number(item.date))) {
-          console.warn("Invalid date value:", item.date);
-          return null;
-        }
-
-        const timestamp = Number(item.date);
-        const date = new Date(timestamp * 1000);
-
-        // Validate date
-        if (isNaN(date.getTime())) {
-          console.warn("Invalid date after parsing:", item.date, timestamp);
-          return null;
-        }
-
-        const month = date.toLocaleDateString("en-US", { month: "short" });
-        const year = date.getFullYear().toString().slice(-2);
-        const formattedDate = `${month} '${year}`;
-
-        // Convert high (string) to percentage number
-        const percentage = parseFloat(item.high);
-        if (isNaN(percentage)) {
-          console.warn("Invalid percentage value:", item.high);
-          return null;
-        }
-
-        return {
-          date: formattedDate,
-          percentage,
-          timestamp: date.getTime(),
-          originalDate: item.date, // Keep original for tooltip
-        };
-      })
-      .filter((item): item is NonNullable<typeof item> => item !== null);
-  }, [data]);
-
-  // Calculate Y-axis domain and ticks with standard increments (5% or 10%)
-  const yAxisConfig = useMemo(() => {
-    if (!chartData || chartData.length === 0) {
-      return {
-        domain: [0, 10] as [number, number],
-        ticks: [0, 5, 10],
-      };
-    }
-
-    const percentages = chartData.map((item) => item.percentage);
-    const minValue = Math.min(...percentages);
-    const maxValue = Math.max(...percentages);
-    const range = maxValue - minValue;
-
-    // Determine appropriate increment: use 5% for smaller ranges, 10% for larger ranges
-    const increment = range <= 15 ? 5 : 10;
-
-    // Round down min to nearest multiple of increment, round up max to nearest multiple
-    const minDomain = Math.max(0, Math.floor(minValue / increment) * increment);
-    const maxDomain = Math.ceil(maxValue / increment) * increment;
-
-    // Ensure minimum range for better visualization
-    const adjustedMaxDomain =
-      maxDomain - minDomain < increment * 2
-        ? minDomain + increment * 2
-        : maxDomain;
-
-    // Generate ticks at standard intervals (5% or 10%)
-    const ticks: number[] = [];
-    for (
-      let value = minDomain;
-      value <= adjustedMaxDomain;
-      value += increment
-    ) {
-      ticks.push(value);
-    }
-
-    return {
-      domain: [minDomain, adjustedMaxDomain] as [number, number],
-      ticks,
-    };
-  }, [chartData]);
-
-  if (loading) {
-    return (
-      <ContentWrapper>
-        <div className="text-center">
-          <Lottie animationData={loadingAnimation} height={400} width={400} />
-        </div>
-      </ContentWrapper>
-    );
-  }
-
-  if (error || !chartData || chartData.length === 0) {
-    return (
-      <ContentWrapper>
-        <p className="text-secondary text-sm">No data available</p>
-      </ContentWrapper>
-    );
-  }
-
-  return (
-    <ContentWrapper>
-      <ChartContainer className="h-full w-full" config={chartConfig}>
-        <LineChart
-          data={chartData}
-          margin={{ top: 0, right: 16, left: 15, bottom: 0 }}
-        >
-          <CartesianGrid vertical={false} stroke="#27272a" />
-          <XAxis
-            dataKey="date"
-            tickLine={false}
-            axisLine={false}
-            tickMargin={8}
-            tick={{
-              fill: "var(--color-secondary)",
-              fontSize: 12,
-              fontFamily: "Inter",
-              fontWeight: 400,
-            }}
-            tickFormatter={(value) => value}
-          />
-          <YAxis
-            domain={yAxisConfig.domain}
-            ticks={yAxisConfig.ticks}
-            tickFormatter={(value) => (value === 0 ? "0" : `${value}%`)}
-            tickLine={false}
-            axisLine={false}
-            tickMargin={8}
-            width={28}
-            tick={{
-              fill: "var(--color-secondary)",
-              fontSize: 12,
-              fontFamily: "Inter",
-              fontWeight: 400,
-            }}
-          />
-          <Tooltip
-            content={({ active, payload, label }) => {
-              if (!active || !payload?.length) return null;
-              const data = payload[0];
-              return (
-                <div className="border-light-dark bg-surface-default text-primary rounded-lg border px-3 py-2 shadow-lg">
-                  <p className="text-secondary text-xs">{label}</p>
-                  <p className="text-primary text-sm font-medium">
-                    {data.value}%
-                  </p>
-                </div>
-              );
-            }}
-          />
-          <Line
-            type="monotone"
-            dataKey="percentage"
-            stroke="#FF6B6B"
-            strokeWidth={2}
-            dot={false}
-          />
-        </LineChart>
-      </ChartContainer>
-    </ContentWrapper>
-  );
-};
-
-const ContentWrapper = ({ children }: { children: React.ReactNode }) => {
-  const delegatedSupplyDescription =
-    "Shows how delegated supply changes over time in DAOs indexed by Anticapture. Lower delegation can make governance easier to influence.";
-
-  const tooltipText =
-    "Delegation shows how much of the token supply actively participates in governance. When this share keeps falling, decisions depend on a shrinking group of voters, increasing the chance of concentrated influence across the ecosystem.";
-
-  return (
-    <div className="bg-surface-background lg:bg-surface-default flex w-full flex-col gap-4 lg:p-4">
-      <div className="flex flex-col gap-1">
-        <div className="flex items-center gap-2">
-          <h3 className="text-primary text-alternative-sm font-mono font-medium uppercase leading-5 tracking-wider">
-            delegated supply history
-          </h3>
-          <TooltipInfo text={tooltipText} />
-        </div>
-        <p className="text-secondary text-sm font-normal leading-5">
-          {delegatedSupplyDescription}
-        </p>
-      </div>
-      <div className="relative flex h-60 w-full items-center justify-center pb-1 lg:h-[175px]">
-        {children}
-      </div>
-    </div>
-  );
-};
diff --git a/apps/dashboard/features/panel/components/LatestFindingTicker.tsx b/apps/dashboard/features/panel/components/LatestFindingTicker.tsx
new file mode 100644
index 0000000000..695ec5e9fe
--- /dev/null
+++ b/apps/dashboard/features/panel/components/LatestFindingTicker.tsx
@@ -0,0 +1,27 @@
+import { ChevronRight } from "lucide-react";
+
+import { DefaultLink } from "@/shared/components/design-system/links/default-link/DefaultLink";
+import { getLatestParagraphPost } from "@/shared/services/paragraph/latestPost";
+
+export const LatestFindingTicker = async () => {
+  const { title: finding, url: caseUrl } = await getLatestParagraphPost();
+
+  return (
+    <div className="bg-surface-default flex flex-col gap-2 px-4 py-3 lg:flex-row lg:items-center lg:gap-3.5">
+      <div className="flex flex-1 flex-col gap-1 lg:min-w-0 lg:flex-row lg:items-center lg:gap-3.5">
+        <h2 className="text-primary text-alternative-sm tracking-alternative-sm shrink-0 font-mono font-medium uppercase leading-5">
+          Latest finding
+        </h2>
+        {/* Post titles come from the feed and run long; the design draws this
+         * strip as a single line on desktop, and wraps it on mobile. */}
+        <p className="text-secondary text-sm font-normal leading-5 lg:min-w-0 lg:truncate">
+          {finding}
+        </p>
+      </div>
+      <DefaultLink href={caseUrl} variant="highlight" size="sm" openInNewTab>
+        Read the case
+        <ChevronRight className="size-4" />
+      </DefaultLink>
+    </div>
+  );
+};
diff --git a/apps/dashboard/features/panel/components/PanelHero.tsx b/apps/dashboard/features/panel/components/PanelHero.tsx
new file mode 100644
index 0000000000..3c667cbb25
--- /dev/null
+++ b/apps/dashboard/features/panel/components/PanelHero.tsx
@@ -0,0 +1,39 @@
+import { ChevronRight } from "lucide-react";
+
+import { DaoProtectionLevels } from "@/features/panel/components/DaoProtectionLevels";
+import { DefaultLink } from "@/shared/components/design-system/links/default-link/DefaultLink";
+
+const FRAMEWORK_DOCS_URL =
+  "https://blockful.gitbook.io/anticapture/anticapture/framework";
+
+export const PanelHero = () => {
+  return (
+    <div className="flex flex-col items-stretch gap-2 lg:flex-row">
+      <div className="bg-surface-default flex min-w-0 flex-1 flex-col justify-between gap-4 p-4">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-primary text-h3 font-medium">
+            See which DAOs could be captured,
+            <br />
+            and what it would cost an attacker.
+          </h1>
+          <p className="text-secondary text-[15px] font-normal leading-[23px]">
+            Live governance-security risk for every DAO we monitor, scored by
+            our open Stage framework, showing how exposed each DAO is to hostile
+            capture.
+          </p>
+        </div>
+        <DefaultLink
+          href={FRAMEWORK_DOCS_URL}
+          variant="highlight"
+          size="sm"
+          openInNewTab
+        >
+          How the framework works
+          <ChevronRight className="size-4" />
+        </DefaultLink>
+      </div>
+
+      <DaoProtectionLevels />
+    </div>
+  );
+};
diff --git a/apps/dashboard/features/panel/components/PanelTable.tsx b/apps/dashboard/features/panel/components/PanelTable.tsx
index 58fd0c2c47..cf7edb57b2 100644
--- a/apps/dashboard/features/panel/components/PanelTable.tsx
+++ b/apps/dashboard/features/panel/components/PanelTable.tsx
@@ -222,8 +222,15 @@ export const PanelTable = () => {
       columns={panelColumns}
       data={allDaos}
       withSorting={true}
-      fillHeight={true}
-      wrapperClassName="min-h-[400px] lg:min-h-0"
+      wrapperClassName="min-h-[400px]"
+      /* On desktop the page (main) is the scroller, so the container must not
+       * be a scrollport or the sticky header would pin to it and scroll away.
+       * Nothing may overflow the fixed-layout table at these widths, or a
+       * page-level horizontal scrollbar leaks: column headers wrap below xl
+       * for exactly that reason (see TitleUnderlined). Mobile keeps the inner
+       * scroll: the header never pinned there, and HeaderMobile is fixed with
+       * no specified offset to pin under. */
+      containerClassName="lg:overflow-visible"
       stickyFirstColumn={true}
       pinRowsToBottom={(row) => row.isPartiallyIndexed}
       getRowClassName={(row, index, rows) => {
diff --git a/apps/dashboard/features/panel/components/ServicesRow.tsx b/apps/dashboard/features/panel/components/ServicesRow.tsx
new file mode 100644
index 0000000000..cea6a334fa
--- /dev/null
+++ b/apps/dashboard/features/panel/components/ServicesRow.tsx
@@ -0,0 +1,54 @@
+import { ChevronRight, ShieldCheck } from "lucide-react";
+
+import { BadgeIcon } from "@/shared/components/design-system/badges/badge-icon/BadgeIcon";
+import { DefaultLink } from "@/shared/components/design-system/links/default-link/DefaultLink";
+import { BulletDivider } from "@/shared/components/design-system/section/bullet-divider/BulletDivider";
+
+const SERVICES = [
+  "Security audits",
+  "Calldata review",
+  "Front-end package",
+  "Consulting & research",
+];
+
+export const ServicesRow = () => {
+  return (
+    <div className="bg-surface-default flex flex-col gap-2 p-3 lg:flex-row lg:items-center lg:justify-between lg:gap-4">
+      <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:gap-4">
+        <div className="flex items-center gap-1.5">
+          <BadgeIcon icon={ShieldCheck} variant="dimmed" iconVariant="dimmed" />
+          <h2 className="text-primary text-alternative-xs font-mono font-medium uppercase leading-4 tracking-wider">
+            Services by Blockful
+          </h2>
+        </div>
+
+        {/* Every label carries a leading bullet and the list is pulled left by
+         * exactly that lead-in (4px bullet + 7px gap) inside an overflow-hidden
+         * wrapper, so a bullet landing at a wrapped line start is clipped away
+         * instead of reading as a list marker. */}
+        <div className="overflow-hidden">
+          <div className="-ml-[11px] flex flex-wrap items-center gap-x-[7px] gap-y-1">
+            {SERVICES.map((service) => (
+              <div key={service} className="flex items-center gap-x-[7px]">
+                <BulletDivider />
+                <span className="text-secondary text-sm font-normal leading-5">
+                  {service}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <DefaultLink
+        href="/contact"
+        variant="highlight"
+        size="sm"
+        openInNewTab={false}
+      >
+        Talk to us
+        <ChevronRight className="size-4" />
+      </DefaultLink>
+    </div>
+  );
+};
diff --git a/apps/dashboard/features/panel/components/SortableColumnHeader.tsx b/apps/dashboard/features/panel/components/SortableColumnHeader.tsx
index 0efe1b197e..59f2f66b9c 100644
--- a/apps/dashboard/features/panel/components/SortableColumnHeader.tsx
+++ b/apps/dashboard/features/panel/components/SortableColumnHeader.tsx
@@ -15,7 +15,10 @@ export const TitleUnderlined = ({
   return (
     <h4
       className={cn(
-        "text-table-header decoration-secondary/20 group-hover:decoration-primary hover:decoration-primary whitespace-nowrap text-right underline decoration-dashed underline-offset-[6px] transition-colors duration-300",
+        // lg:max-xl may wrap: the fixed-layout desktop table cannot fit the
+        // longest header on one line there, and un-wrappable text would
+        // overflow the table and leak a page-level horizontal scrollbar.
+        "text-table-header decoration-secondary/20 group-hover:decoration-primary hover:decoration-primary whitespace-nowrap text-right underline decoration-dashed underline-offset-[6px] transition-colors duration-300 lg:max-xl:whitespace-normal",
         className,
       )}
     >
diff --git a/apps/dashboard/features/panel/components/TestimonialCarousel.tsx b/apps/dashboard/features/panel/components/TestimonialCarousel.tsx
new file mode 100644
index 0000000000..1d41e1dbde
--- /dev/null
+++ b/apps/dashboard/features/panel/components/TestimonialCarousel.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+
+import { TESTIMONIALS } from "@/features/panel/constants/track-record";
+import { IconButton } from "@/shared/components/design-system/buttons/icon-button/IconButton";
+
+export const TestimonialCarousel = () => {
+  const [index, setIndex] = useState(0);
+
+  const testimonial = TESTIMONIALS[index];
+  const hasMultiple = TESTIMONIALS.length > 1;
+
+  if (!testimonial) return null;
+
+  const goTo = (offset: number) =>
+    setIndex(
+      (current) =>
+        (current + offset + TESTIMONIALS.length) % TESTIMONIALS.length,
+    );
+
+  return (
+    <div
+      className="border-border-default bg-surface-default flex items-center justify-center gap-4 border px-3 py-4"
+      role="group"
+      aria-roledescription="carousel"
+      aria-label="Testimonials"
+    >
+      <IconButton
+        icon={ChevronLeft}
+        variant="ghost"
+        size="md"
+        className="size-9"
+        iconClassName="size-4"
+        aria-label="Previous testimonial"
+        disabled={!hasMultiple}
+        onClick={() => goTo(-1)}
+      />
+
+      {/*
+        The arrows keep focus while the quote underneath them is swapped, so
+        without a live region a screen-reader user hears nothing and the buttons
+        read as dead. `aria-atomic` makes the quote and its author announce as
+        one testimonial rather than as two unrelated text changes.
+      */}
+      <div
+        className="flex min-w-0 flex-1"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        <Link
+          href={testimonial.sourceUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-1 flex-col items-center gap-4"
+        >
+          <p className="text-primary text-center text-base font-normal leading-6">
+            &ldquo;{testimonial.quote}&rdquo;
+          </p>
+          <div className="flex items-center gap-2">
+            <Image
+              src={testimonial.avatarSrc}
+              /* Decorative: the author's name renders right next to it, and
+               * the atomic live region would announce the name twice on
+               * every slide change if the portrait repeated it. */
+              alt=""
+              width={36}
+              height={36}
+              className="bg-surface-contrast size-9 shrink-0 rounded-full object-cover"
+            />
+            <div className="flex flex-col justify-center">
+              <span className="text-primary text-sm font-medium leading-5">
+                {testimonial.author}
+              </span>
+              <span className="text-secondary text-sm font-normal leading-5">
+                {testimonial.handle}
+              </span>
+            </div>
+          </div>
+        </Link>
+      </div>
+
+      <IconButton
+        icon={ChevronRight}
+        variant="ghost"
+        size="md"
+        className="size-9"
+        iconClassName="size-4"
+        aria-label="Next testimonial"
+        disabled={!hasMultiple}
+        onClick={() => goTo(1)}
+      />
+    </div>
+  );
+};
diff --git a/apps/dashboard/features/panel/components/TrackRecordSection.tsx b/apps/dashboard/features/panel/components/TrackRecordSection.tsx
new file mode 100644
index 0000000000..db6c6e9fed
--- /dev/null
+++ b/apps/dashboard/features/panel/components/TrackRecordSection.tsx
@@ -0,0 +1,45 @@
+import { TestimonialCarousel } from "@/features/panel/components/TestimonialCarousel";
+import { TRACK_RECORD_CASES } from "@/features/panel/constants/track-record";
+import { ClickableCard } from "@/shared/components/design-system/cards/clickable-card/ClickableCard";
+import { DaoAvatarIcon } from "@/shared/components/icons/DaoAvatarIcon";
+
+export const TrackRecordSection = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <h2 className="text-primary text-alternative-sm tracking-alternative-sm font-mono font-medium uppercase leading-5">
+        Track record
+      </h2>
+
+      <div className="grid gap-2 lg:grid-cols-3">
+        {TRACK_RECORD_CASES.map(
+          ({ daoId, icon: Icon, name, description, caseUrl }) => (
+            <ClickableCard
+              key={name}
+              href={caseUrl}
+              openInNewTab
+              title={name}
+              description={description}
+              avatar={
+                daoId ? (
+                  <DaoAvatarIcon
+                    daoId={daoId}
+                    className="size-icon-sm"
+                    isRounded={true}
+                  />
+                ) : Icon ? (
+                  <Icon className="size-icon-sm rounded-full" />
+                ) : (
+                  <span className="bg-surface-contrast text-secondary size-icon-sm flex shrink-0 items-center justify-center rounded-full text-xs font-medium">
+                    {name.charAt(0)}
+                  </span>
+                )
+              }
+            />
+          ),
+        )}
+      </div>
+
+      <TestimonialCarousel />
+    </div>
+  );
+};
diff --git a/apps/dashboard/features/panel/components/TreasuryMonitoring.tsx b/apps/dashboard/features/panel/components/TreasuryMonitoring.tsx
deleted file mode 100644
index c8c4a0574e..0000000000
--- a/apps/dashboard/features/panel/components/TreasuryMonitoring.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-
-import { TooltipInfo } from "@/shared/components";
-import { InlineAlert } from "@/shared/components/design-system/alerts/inline-alert/InlineAlert";
-import { formatNumberUserReadable } from "@/shared/utils";
-
-// Fake data for now
-const monitoringData = [
-  {
-    title: "Treasury: Monitored vs Ecosystem total",
-    tooltip:
-      "Represents the funds held in DAO treasuries. The first value shows treasuries from DAOs monitored by Anticapture; the second shows the total across the ecosystem.",
-    current: 4100000000, // $4.1B
-    total: 16200000000, // $16.2B
-    percentage: 25,
-  },
-
-  // Fake data for now
-  {
-    title: "TVL: Monitored vs Ecosystem Total",
-    tooltip:
-      "Represents the total value locked in DAO contracts. The first value reflects DAOs monitored by Anticapture; the second shows the ecosystem-wide total.",
-    current: 5600000000, // $5.6B
-    total: 35100000000, // $35.1B
-    percentage: 16,
-  },
-];
-
-export const TreasuryMonitoring = () => {
-  return (
-    <div className="bg-surface-background lg:bg-surface-default flex w-full flex-col gap-10 lg:gap-4 lg:p-4">
-      <div className="flex flex-col gap-10 lg:gap-3">
-        {monitoringData.map((item, index) => (
-          <div key={index} className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <h3 className="text-primary text-alternative-sm font-mono font-medium uppercase leading-5 tracking-wider">
-                {item.title}
-              </h3>
-
-              <TooltipInfo text={item.tooltip} />
-            </div>
-
-            <div className="flex flex-col">
-              {/* Value display */}
-              <div className="flex items-end gap-1">
-                <p className="text-primary font-mono text-2xl font-normal uppercase leading-8">
-                  {formatNumberUserReadable(item.current)}
-                </p>
-                <p className="text-secondary text-alternative-xs font-mono font-medium uppercase leading-4 tracking-wider">
-                  / {formatNumberUserReadable(item.total)}
-                </p>
-              </div>
-
-              {/* Progress bar */}
-              <div className="flex h-5 items-center gap-1">
-                <div className="bg-surface-hover relative h-1 flex-1 overflow-hidden">
-                  <div
-                    className="bg-error h-full transition-all duration-300 ease-in-out"
-                    style={{ width: `${item.percentage}%` }}
-                  />
-                </div>
-                <p className="text-error text-sm font-normal leading-5">
-                  {item.percentage}%
-                </p>
-              </div>
-            </div>
-            {index < monitoringData.length - 1 && (
-              <div className="bg-border-contrast h-px w-full" />
-            )}
-          </div>
-        ))}
-      </div>
-
-      {/* Alert */}
-      <InlineAlert
-        text="Only a portion of the ecosystem's funds is monitored by Anticapture, which means some risks may not be detected yet."
-        variant="error"
-      />
-    </div>
-  );
-};
diff --git a/apps/dashboard/features/panel/components/UseItNowSection.tsx b/apps/dashboard/features/panel/components/UseItNowSection.tsx
new file mode 100644
index 0000000000..52a85c963d
--- /dev/null
+++ b/apps/dashboard/features/panel/components/UseItNowSection.tsx
@@ -0,0 +1,82 @@
+import { Bell, ChevronRight, Code2 } from "lucide-react";
+import type { ElementType } from "react";
+
+import { BadgeIcon } from "@/shared/components/design-system/badges/badge-icon/BadgeIcon";
+import { DefaultLink } from "@/shared/components/design-system/links/default-link/DefaultLink";
+
+type FeatureCard = {
+  icon: ElementType;
+  label: string;
+  description: string;
+  ctaLabel: string;
+  href: string;
+  openInNewTab: boolean;
+};
+
+const FEATURE_CARDS: FeatureCard[] = [
+  {
+    icon: Bell,
+    label: "Alerts",
+    description:
+      "Telegram or Slack pings when a DAO you track moves: new proposals on-chain or Snapshot, vote reminders, delegation shifts, results. You choose the triggers.",
+    ctaLabel: "Set up alerts",
+    href: "/alerts",
+    openInNewTab: false,
+  },
+  {
+    icon: Code2,
+    label: "API + MCP",
+    description:
+      "Give your AI agent live governance data for every DAO on this page, with a free self-service API key. Plug Anticapture into Claude, Cursor, or anything that speaks MCP.",
+    ctaLabel: "Connect your agent",
+    href: "/api-keys",
+    openInNewTab: false,
+  },
+];
+
+export const UseItNowSection = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <h2 className="text-primary text-alternative-sm tracking-alternative-sm font-mono font-medium uppercase leading-5">
+        Use it now
+      </h2>
+
+      <div className="grid gap-2 lg:grid-cols-2">
+        {FEATURE_CARDS.map(
+          ({ icon, label, description, ctaLabel, href, openInNewTab }) => (
+            <div
+              key={label}
+              className="bg-surface-default flex flex-col justify-between gap-4 p-4"
+            >
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-1.5">
+                  <BadgeIcon
+                    icon={icon}
+                    variant="dimmed"
+                    iconVariant="dimmed"
+                  />
+                  <h3 className="text-primary text-alternative-xs font-mono font-medium uppercase leading-4 tracking-wider">
+                    {label}
+                  </h3>
+                </div>
+                <p className="text-secondary text-sm font-normal leading-5">
+                  {description}
+                </p>
+              </div>
+
+              <DefaultLink
+                href={href}
+                variant="highlight"
+                size="sm"
+                openInNewTab={openInNewTab}
+              >
+                {ctaLabel}
+                <ChevronRight className="size-4" />
+              </DefaultLink>
+            </div>
+          ),
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/dashboard/features/panel/components/index.ts b/apps/dashboard/features/panel/components/index.ts
index 29a0403d94..0cfaabd67b 100644
--- a/apps/dashboard/features/panel/components/index.ts
+++ b/apps/dashboard/features/panel/components/index.ts
@@ -1,5 +1,8 @@
 export * from "@/features/panel/components/PanelTable";
-export * from "@/features/panel/components/DelegatedSupplyHistory";
+export * from "@/features/panel/components/PanelHero";
+export * from "@/features/panel/components/LatestFindingTicker";
+export * from "@/features/panel/components/TrackRecordSection";
+export * from "@/features/panel/components/UseItNowSection";
+export * from "@/features/panel/components/ServicesRow";
 export * from "@/features/panel/components/DaoProtectionLevels";
-export * from "@/features/panel/components/TreasuryMonitoring";
 export * from "@/features/panel/components/TooltipCell";
diff --git a/apps/dashboard/features/panel/components/tooltips/DaoProtectionLevelsTooltip.tsx b/apps/dashboard/features/panel/components/tooltips/DaoProtectionLevelsTooltip.tsx
deleted file mode 100644
index ffea5350bb..0000000000
--- a/apps/dashboard/features/panel/components/tooltips/DaoProtectionLevelsTooltip.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import type { TooltipProps } from "recharts";
-
-type StageData = {
-  stage: string;
-  value: number;
-  riskLevel: string;
-  color: string;
-  description?: string;
-};
-
-export const DaoProtectionLevelsTooltip = ({
-  active,
-  payload,
-  coordinate,
-}: TooltipProps<number, string>) => {
-  if (
-    !active ||
-    !payload?.length ||
-    !coordinate ||
-    coordinate.x === undefined ||
-    coordinate.y === undefined
-  )
-    return null;
-
-  const data = payload[0]?.payload as StageData;
-
-  return (
-    <div
-      className="border-light-dark bg-surface-default text-primary rounded-lg border px-3 py-2 shadow-lg"
-      style={{
-        minWidth: "200px",
-      }}
-    >
-      <div className="flex w-full items-center justify-between">
-        <div className="flex items-center gap-2">
-          <div
-            className="h-2 w-2 rounded-full"
-            style={{ backgroundColor: data.color }}
-          />
-          <p className="text-primary text-xs font-normal">{data.stage}</p>
-        </div>
-
-        <p className="text-primary text-xs font-normal">
-          {data.value} DAO{data.value !== 1 ? "s" : ""}
-        </p>
-      </div>
-
-      {data.description && (
-        <p className="text-secondary mt-2 max-w-[250px] text-xs">
-          {data.description}
-        </p>
-      )}
-    </div>
-  );
-};
diff --git a/apps/dashboard/features/panel/constants/track-record.ts b/apps/dashboard/features/panel/constants/track-record.ts
new file mode 100644
index 0000000000..983604771a
--- /dev/null
+++ b/apps/dashboard/features/panel/constants/track-record.ts
@@ -0,0 +1,102 @@
+import type { ElementType } from "react";
+
+import { ArbitrumIcon } from "@/shared/components/icons/ArbitrumIcon";
+import { DaoIdEnum } from "@/shared/types/daos";
+
+export type TrackRecordCase = {
+  name: string;
+  description: string;
+  caseUrl: string;
+  /** Set when the DAO ships an icon in the dashboard. */
+  daoId?: DaoIdEnum;
+  /** Avatar for cases whose subject is not a monitored DAO (no `daoConfig` entry). */
+  icon?: ElementType;
+};
+
+export type Testimonial = {
+  quote: string;
+  /** X display name of the account the quote is lifted from. */
+  author: string;
+  /** X @handle of that account — always rendered below the name. */
+  handle: string;
+  sourceUrl: string;
+  /** Profile picture of the account the quote is lifted from. */
+  avatarSrc: string;
+};
+
+/**
+ * Case copy is final (Panel v2.1 spec); each card links to the Paragraph post
+ * that write-up lives in.
+ */
+export const TRACK_RECORD_CASES: TrackRecordCase[] = [
+  {
+    daoId: DaoIdEnum.ENS,
+    name: "ENS",
+    description:
+      "Mitigated a governance vulnerability that could have captured a $150M treasury: found and fixed before it could be exploited.",
+    caseUrl:
+      "https://paragraph.com/@blockful/a-hidden-threat-to-ens-uncovering-and-solving-a-major-governanc",
+  },
+  {
+    daoId: DaoIdEnum.UNISWAP,
+    name: "Uniswap",
+    description:
+      "Anticapture surfaced a low-cost capture path against a multi-billion-dollar treasury, quantified before it could be exploited.",
+    caseUrl:
+      "https://paragraph.com/@blockful/thanks-to-tallys-support-uniswap-dao-reached-stage-1-of-gov-se",
+  },
+  {
+    icon: ArbitrumIcon,
+    name: "Arbitrum",
+    description:
+      "Acquired 14.4M votes in a live stress test, demonstrating how cheaply governance could be swayed before the DAO hardened it.",
+    caseUrl: "https://paragraph.com/@blockful/arbitrum-security-council",
+  },
+];
+
+/**
+ * Wording, handles and links come verbatim from the X mentions audit
+ * (Growth doc 2ky4wrw9-39373, re-verified Aug 2026); each `sourceUrl` is the
+ * tweet the quote was lifted from, and each `author` is that X account's
+ * display name. Only entries the audit marks as usable social proof belong
+ * here — never paraphrase a quote or add one that is not on that doc.
+ */
+export const TESTIMONIALS: Testimonial[] = [
+  {
+    quote:
+      "using the Anticapture dashboard to break down what actually matters in practice",
+    author: "Ethereum Foundation",
+    handle: "@ethereumfndn",
+    sourceUrl: "https://x.com/ethereumfndn/status/2044080364717502737",
+    avatarSrc: "/images/testimonials/ethereumfndn.jpg",
+  },
+  {
+    quote: "makes it so easy to see when governance changes",
+    author: "Lefteris Karapetsas",
+    handle: "@LefterisJP",
+    sourceUrl: "https://x.com/LefterisJP/status/2070613219979174269",
+    avatarSrc: "/images/testimonials/lefterisjp.jpg",
+  },
+  {
+    quote:
+      "Massively impressed by the @blockful_io team's @anticapture dashboard",
+    author: "Hugo M",
+    handle: "@blockbanzai",
+    sourceUrl: "https://x.com/blockbanzai/status/1998695381194985712",
+    avatarSrc: "/images/testimonials/blockbanzai.jpg",
+  },
+  {
+    quote: "Blockful is doing the lords work keeping DAOs safe",
+    author: "Joseph Schiarizzi",
+    handle: "@CupOJoseph",
+    sourceUrl: "https://x.com/CupOJoseph/status/2034316404988449075",
+    avatarSrc: "/images/testimonials/cupojoseph.jpg",
+  },
+  {
+    quote: "@anticapture reports show ENS governance security improving",
+    author: "ENS DAO",
+    handle: "@ENS_DAO",
+    sourceUrl: "https://x.com/ENS_DAO/status/1948046880505479527",
+    avatarSrc: "/images/testimonials/ens-dao.jpg",
+  },
+];
diff --git a/apps/dashboard/public/images/testimonials/blockbanzai.jpg b/apps/dashboard/public/images/testimonials/blockbanzai.jpg
new file mode 100644
index 0000000000..0005c0c2b1
Binary files /dev/null and b/apps/dashboard/public/images/testimonials/blockbanzai.jpg differ
diff --git a/apps/dashboard/public/images/testimonials/cupojoseph.jpg b/apps/dashboard/public/images/testimonials/cupojoseph.jpg
new file mode 100644
index 0000000000..fa7b0393c0
Binary files /dev/null and b/apps/dashboard/public/images/testimonials/cupojoseph.jpg differ
diff --git a/apps/dashboard/public/images/testimonials/ens-dao.jpg b/apps/dashboard/public/images/testimonials/ens-dao.jpg
new file mode 100644
index 0000000000..d4ea5dcddd
Binary files /dev/null and b/apps/dashboard/public/images/testimonials/ens-dao.jpg differ
diff --git a/apps/dashboard/public/images/testimonials/ethereumfndn.jpg b/apps/dashboard/public/images/testimonials/ethereumfndn.jpg
new file mode 100644
index 0000000000..bebd4ac18d
Binary files /dev/null and b/apps/dashboard/public/images/testimonials/ethereumfndn.jpg differ
diff --git a/apps/dashboard/public/images/testimonials/lefterisjp.jpg b/apps/dashboard/public/images/testimonials/lefterisjp.jpg
new file mode 100644
index 0000000000..bdace41c19
Binary files /dev/null and b/apps/dashboard/public/images/testimonials/lefterisjp.jpg differ
diff --git a/apps/dashboard/shared/components/design-system/cards/clickable-card/ClickableCard.tsx b/apps/dashboard/shared/components/design-system/cards/clickable-card/ClickableCard.tsx
index 16665c37ec..fe29f0b91e 100644
--- a/apps/dashboard/shared/components/design-system/cards/clickable-card/ClickableCard.tsx
+++ b/apps/dashboard/shared/components/design-system/cards/clickable-card/ClickableCard.tsx
@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 import { cn } from "@/shared/utils/cn";
 
 import { CardTitle } from "@/shared/components/design-system/cards/card-title/CardTitle";
@@ -12,42 +14,64 @@ export const ClickableCard = ({
   isDisabled = false,
   onClick,
   className,
+  href,
+  openInNewTab = false,
 }: ClickableCardProps) => {
   const hasLargeDescription = Boolean(description);
 
+  const cardClassName = cn(
+    // Base
+    "border-border-default bg-surface-default flex w-full border p-3 text-left",
+    // Hover (suppressed when disabled via pointer-events-none)
+    "hover:bg-surface-contrast",
+    // Transition
+    "transition-colors duration-200",
+    // Disabled
+    isDisabled && "pointer-events-none cursor-not-allowed opacity-50",
+    className,
+  );
+
+  const content = hasLargeDescription ? (
+    <div className="flex w-full flex-col gap-1">
+      <CardTitle size="small" text={title} avatar={avatar} badge={badge} />
+      <p className="text-body-md text-secondary">{description}</p>
+    </div>
+  ) : (
+    <div className="flex w-full items-center gap-3">
+      {avatar && <div className="shrink-0">{avatar}</div>}
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <CardTitle size="small" text={title} badge={badge} />
+        {subtitle && (
+          <span className="text-body-sm text-secondary">{subtitle}</span>
+        )}
+      </div>
+    </div>
+  );
+
+  // A disabled card falls back to the button branch even when it has an href:
+  // an anchor stays focusable and still follows its destination on Enter, so
+  // `pointer-events-none` would only ever hide the state from pointer users.
+  if (href && !isDisabled) {
+    return (
+      <Link
+        href={href}
+        target={openInNewTab ? "_blank" : "_self"}
+        rel="noopener noreferrer"
+        className={cardClassName}
+      >
+        {content}
+      </Link>
+    );
+  }
+
   return (
     <button
       type="button"
       onClick={onClick}
       disabled={isDisabled}
-      className={cn(
-        // Base
-        "border-border-default bg-surface-default flex w-full border p-3 text-left",
-        // Hover (suppressed when disabled via pointer-events-none)
-        "hover:bg-surface-contrast",
-        // Transition
-        "transition-colors duration-200",
-        // Disabled
-        isDisabled && "pointer-events-none cursor-not-allowed opacity-50",
-        className,
-      )}
+      className={cardClassName}
     >
-      {hasLargeDescription ? (
-        <div className="flex w-full flex-col gap-1">
-          <CardTitle size="small" text={title} avatar={avatar} badge={badge} />
-          <p className="text-body-md text-secondary">{description}</p>
-        </div>
-      ) : (
-        <div className="flex w-full items-center gap-3">
-          {avatar && <div className="shrink-0">{avatar}</div>}
-          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-            <CardTitle size="small" text={title} badge={badge} />
-            {subtitle && (
-              <span className="text-body-sm text-secondary">{subtitle}</span>
-            )}
-          </div>
-        </div>
-      )}
+      {content}
     </button>
   );
 };
diff --git a/apps/dashboard/shared/components/design-system/cards/types.ts b/apps/dashboard/shared/components/design-system/cards/types.ts
index 41482e7c19..5aed90b2e3 100644
--- a/apps/dashboard/shared/components/design-system/cards/types.ts
+++ b/apps/dashboard/shared/components/design-system/cards/types.ts
@@ -18,4 +18,7 @@ export type ClickableCardProps = {
   isDisabled?: boolean;
   onClick?: () => void;
   className?: string;
+  /** Renders the card as a link instead of a button. Takes precedence over onClick. */
+  href?: string;
+  openInNewTab?: boolean;
 };
diff --git a/apps/dashboard/shared/components/design-system/table/Table.tsx b/apps/dashboard/shared/components/design-system/table/Table.tsx
index dc84a5c77d..74f40795de 100644
--- a/apps/dashboard/shared/components/design-system/table/Table.tsx
+++ b/apps/dashboard/shared/components/design-system/table/Table.tsx
@@ -54,6 +54,7 @@ type ColumnDef<TData, TValue> = TanstackColumnDef<TData, TValue> & {
 interface DataTableProps<TData, TValue> {
   className?: string;
   columns: ColumnDef<TData, TValue>[];
+  containerClassName?: string;
   customEmptyState?: ReactNode;
   data: TData[];
   disableRowClick?: (row: TData) => boolean;
@@ -92,6 +93,7 @@ interface DataTableProps<TData, TValue> {
 export const Table = <TData, TValue>({
   className,
   columns,
+  containerClassName,
   customEmptyState,
   data,
   disableRowClick,
@@ -215,6 +217,7 @@ export const Table = <TData, TValue>({
         className={cn(
           "text-secondary lg:bg-surface-default bg-transparent",
           fillHeight && "flex h-full flex-col",
+          containerClassName,
         )}
         tableClassName={cn(
           "border-separate border-spacing-0",
diff --git a/apps/dashboard/shared/components/icons/ArbitrumIcon.tsx b/apps/dashboard/shared/components/icons/ArbitrumIcon.tsx
new file mode 100644
index 0000000000..9f842fbdfe
--- /dev/null
+++ b/apps/dashboard/shared/components/icons/ArbitrumIcon.tsx
@@ -0,0 +1,43 @@
+import type { DaoIconProps } from "@/shared/components/icons/types";
+
+export const ArbitrumIcon = ({
+  showBackground = true,
+  ...props
+}: DaoIconProps) => {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      {showBackground && <rect width="24" height="24" fill="#2D384B" />}
+      <path
+        d="M13.2335 13.2678L12.4261 15.4829C12.4061 15.543 12.4061 15.6097 12.4261 15.6764L13.8139 19.4861L15.4219 18.5587L13.4937 13.2678C13.447 13.1477 13.2802 13.1477 13.2335 13.2678Z"
+        fill="white"
+      />
+      <path
+        d="M14.855 9.54478C14.8083 9.42469 14.6415 9.42469 14.5948 9.54478L13.7875 11.7599C13.7675 11.8199 13.7675 11.8867 13.7875 11.9534L16.0626 18.1917L17.6706 17.2643L14.855 9.55146V9.54478Z"
+        fill="white"
+      />
+      <path
+        d="M11.999 4.69419C12.0391 4.69419 12.0791 4.70754 12.1124 4.72755L18.2373 8.26371C18.3107 8.30375 18.3508 8.38381 18.3508 8.46387V15.5362C18.3508 15.6163 18.3041 15.6963 18.2373 15.7364L12.1124 19.2725C12.0791 19.2925 12.0391 19.3059 11.999 19.3059C11.959 19.3059 11.919 19.2925 11.8856 19.2725L5.7607 15.7364C5.68731 15.6963 5.64728 15.6163 5.64728 15.5362V8.4572C5.64728 8.37714 5.69398 8.29707 5.7607 8.25704L11.8856 4.72088C11.919 4.70087 11.959 4.68752 11.999 4.68752V4.69419ZM11.999 3.66003C11.7788 3.66003 11.5653 3.71341 11.3652 3.82683L5.24029 7.36299C4.84664 7.58984 4.60645 8.00351 4.60645 8.4572V15.5295C4.60645 15.9832 4.84664 16.3969 5.24029 16.6237L11.3652 20.1599C11.5587 20.2733 11.7788 20.3267 11.999 20.3267C12.2192 20.3267 12.4327 20.2733 12.6329 20.1599L18.7578 16.6237C19.1514 16.3969 19.3916 15.9832 19.3916 15.5295V8.4572C19.3916 8.00351 19.1514 7.58984 18.7578 7.36299L12.6262 3.82683C12.4327 3.71341 12.2125 3.66003 11.9923 3.66003H11.999Z"
+        fill="white"
+      />
+      <path
+        d="M7.94238 18.1983L8.5095 16.6504L9.64374 17.5911L8.58289 18.5653L7.94238 18.1983Z"
+        fill="white"
+      />
+      <path
+        d="M11.4791 7.95675H9.9245C9.81107 7.95675 9.70432 8.03014 9.66429 8.13689L6.33496 17.2642L7.94291 18.1916L11.6125 8.13689C11.6459 8.04348 11.5792 7.95007 11.4857 7.95007L11.4791 7.95675Z"
+        fill="white"
+      />
+      <path
+        d="M14.2008 7.95675H12.6463C12.5328 7.95675 12.4261 8.03014 12.386 8.13689L8.58301 18.5586L10.191 19.486L14.3276 8.13689C14.361 8.04348 14.2942 7.95007 14.2008 7.95007V7.95675Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
diff --git a/apps/dashboard/shared/components/icons/index.ts b/apps/dashboard/shared/components/icons/index.ts
index 8f592c354e..b7eda576a7 100644
--- a/apps/dashboard/shared/components/icons/index.ts
+++ b/apps/dashboard/shared/components/icons/index.ts
@@ -1,4 +1,5 @@
 export * from "@/shared/components/icons/AnticaptureIcon";
+export * from "@/shared/components/icons/ArbitrumIcon";
 export * from "@/shared/components/icons/ArrowUpDown";
 export * from "@/shared/components/icons/BulletPoint";
 export * from "@/shared/components/icons/CookieIcon";
diff --git a/apps/dashboard/shared/services/paragraph/latestPost.ts b/apps/dashboard/shared/services/paragraph/latestPost.ts
new file mode 100644
index 0000000000..1b44e0b59d
--- /dev/null
+++ b/apps/dashboard/shared/services/paragraph/latestPost.ts
@@ -0,0 +1,83 @@
+// Reader for the blockful publication on Paragraph. Paragraph exposes no JSON
+// API for a blog's posts, so the newest publication is taken from the public
+// RSS 2.0 feed. Server-only: the feed host rejects browser origins.
+
+const FEED_URL = "https://api.paragraph.com/blogs/rss/@blockful";
+
+/** Revalidate window for the feed, in seconds. Posts ship a few times a month. */
+const REVALIDATE_SECONDS = 3600;
+
+/**
+ * Deadline for the feed request. The ticker is awaited while the homepage
+ * renders, so a Paragraph host that accepts the connection and then stalls
+ * would hold the whole page open until the transport gives up. Capped so the
+ * publication fallback is reached in about the time a reader would wait.
+ */
+const FEED_TIMEOUT_MS = 3000;
+
+export type ParagraphPost = {
+  title: string;
+  url: string;
+};
+
+/**
+ * Rendered when the feed is unreachable so the ticker never ships an empty
+ * strip. Points at the publication index, which always resolves.
+ */
+export const PARAGRAPH_PUBLICATION: ParagraphPost = {
+  title: "Research that maps DAO governance risks and capture vectors",
+  url: "https://paragraph.com/@blockful",
+};
+
+const HTML_ENTITIES: Record<string, string> = {
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&apos;": "'",
+  "&#39;": "'",
+};
+
+const decode = (value: string) =>
+  value
+    .replace(/<!\[CDATA\[([\s\S]*?)\]\]>/g, "$1")
+    .replace(
+      /&(?:amp|lt|gt|quot|apos|#39);/g,
+      (entity) => HTML_ENTITIES[entity],
+    )
+    .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code)))
+    .trim();
+
+const readTag = (item: string, tag: string) => {
+  const match = item.match(new RegExp(`<${tag}[^>]*>([\\s\\S]*?)</${tag}>`));
+  return match ? decode(match[1]) : "";
+};
+
+/**
+ * Newest post on the blockful publication. Falls back to the publication index
+ * on any transport, timeout, status or parse failure — the panel ticker must
+ * render.
+ */
+export const getLatestParagraphPost = async (): Promise<ParagraphPost> => {
+  try {
+    const response = await fetch(FEED_URL, {
+      next: { revalidate: REVALIDATE_SECONDS },
+      signal: AbortSignal.timeout(FEED_TIMEOUT_MS),
+    });
+
+    if (!response.ok) return PARAGRAPH_PUBLICATION;
+
+    const feed = await response.text();
+    const [item] = feed.match(/<item[^>]*>[\s\S]*?<\/item>/) ?? [];
+    if (!item) return PARAGRAPH_PUBLICATION;
+
+    const title = readTag(item, "title");
+    const url = readTag(item, "link") || readTag(item, "guid");
+
+    return title && url.startsWith("http")
+      ? { title, url }
+      : PARAGRAPH_PUBLICATION;
+  } catch {
+    return PARAGRAPH_PUBLICATION;
+  }
+};