From fae178e3088521eb04717a2f36f0432c234e788c Mon Sep 17 00:00:00 2001
From: Vasanth T <vasanth.dev2004@gmail.com>
Date: Tue, 6 Oct 2026 10:48:36 +0530
Subject: [PATCH] ui: market board with cards and denser rows

A cards or rows layout kept in a cookie, rows that say why a token is listed, badges that shrink to their mark on phones, and a neutral chip for a flat change.
---
 app/src/app/(home)/page.tsx                   |   5 +-
 app/src/components/launchpad/ChainLanding.tsx |   7 +-
 app/src/components/launchpad/ChangeChip.tsx   |   6 +-
 app/src/components/launchpad/GitlawbBadge.tsx |   9 +-
 app/src/components/launchpad/LaunchCard.tsx   | 145 ++++++++++++++++++
 app/src/components/launchpad/LaunchList.tsx   | 103 +++++++++----
 app/src/components/launchpad/LaunchRow.tsx    |  95 ++++++++----
 .../components/launchpad/MuseworldBadge.tsx   |  18 ++-
 app/src/components/launchpad/TwigBadge.tsx    |   9 +-
 app/src/components/launchpad/WatchButton.tsx  |  35 +++--
 .../components/launchpad/change-chip.test.ts  |  10 +-
 app/src/lib/launchpad/list-layout.test.ts     |  17 ++
 app/src/lib/launchpad/list-layout.ts          |  16 ++
 app/src/lib/launchpad/museworld.test.ts       |   2 +-
 app/src/lib/launchpad/ranking.test.ts         |  12 +-
 app/src/lib/launchpad/ranking.ts              |  30 ++--
 app/src/lib/launchpad/twig.test.ts            |   2 +-
 17 files changed, 409 insertions(+), 112 deletions(-)
 create mode 100644 app/src/components/launchpad/LaunchCard.tsx
 create mode 100644 app/src/lib/launchpad/list-layout.test.ts
 create mode 100644 app/src/lib/launchpad/list-layout.ts

diff --git a/app/src/app/(home)/page.tsx b/app/src/app/(home)/page.tsx
index eebad0c8..42c563ce 100644
--- a/app/src/app/(home)/page.tsx
+++ b/app/src/app/(home)/page.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
+import { cookies } from "next/headers";
 import LaunchHero from "@/components/launchpad/LaunchHero";
 import LaunchList from "@/components/launchpad/LaunchList";
 import LiveRiver from "@/components/launchpad/LiveRiver";
@@ -14,6 +15,7 @@ import { dbConfigured } from "@/lib/db";
 import { isFilter } from "@/lib/launchpad/search";
 import { nowMs } from "@/lib/launchpad/time";
 import { inRiverWindow, riverCoverage } from "@/lib/launchpad/river";
+import { LAYOUT_COOKIE, parseLayout } from "@/lib/launchpad/list-layout";
 import TrendingStrip from "@/components/launchpad/TrendingStrip";
 
 export const dynamic = "force-dynamic";
@@ -40,6 +42,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
   ]);
   const trending = fetchedTrending ?? trendingFrom(page.items); // the default view's first page doubles as the strip's candidates
   const now = nowMs();
+  const layout = parseLayout((await cookies()).get(LAYOUT_COOKIE)?.value);
 
   return (
     <main className="relative mx-auto max-w-6xl space-y-8 px-4 pb-16">
@@ -47,7 +50,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
       <LiveRiver initial={feed.filter((item) => inRiverWindow(item, now))} serverNow={now} coveredSince={riverCoverage(feed, RIVER_SEED, now)} lastActivityAt={feed[0] ? new Date(feed[0].at).getTime() : 0} />
       <TrendingStrip initial={trending} />
       <div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_17rem]">
-        <LaunchList initial={page.items} initialHasMore={page.hasMore} initialSort={sort} initialWindow={window} initialChain={chain} initialFilter={filter} initialView={sp.view === "watchlist" ? "watchlist" : "market"} hasDb={dbConfigured()} />
+        <LaunchList initial={page.items} initialHasMore={page.hasMore} initialSort={sort} initialWindow={window} initialChain={chain} initialFilter={filter} initialView={sp.view === "watchlist" ? "watchlist" : "market"} initialLayout={layout} hasDb={dbConfigured()} serverNow={now} />
         <aside aria-label="New launches and community" className="grid min-w-0 gap-4 md:grid-cols-2 xl:sticky xl:top-24 xl:grid-cols-1">
           <JustLaunched initial={fresh.items} serverNow={now} />
           <div className="min-w-0 space-y-4">
diff --git a/app/src/components/launchpad/ChainLanding.tsx b/app/src/components/launchpad/ChainLanding.tsx
index 54efb9e3..a7da7a0d 100644
--- a/app/src/components/launchpad/ChainLanding.tsx
+++ b/app/src/components/launchpad/ChainLanding.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { cookies } from "next/headers";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ArrowRight, ArrowUpRight } from "lucide-react";
@@ -14,6 +15,8 @@ import { PAGE_SIZE } from "@/lib/launchpad/paging";
 import { ethUsd } from "@/lib/launchpad/ethPrice";
 import { dbConfigured } from "@/lib/db";
 import { pageMetadata } from "@/lib/seo";
+import { nowMs } from "@/lib/launchpad/time";
+import { LAYOUT_COOKIE, parseLayout } from "@/lib/launchpad/list-layout";
 
 /** Metadata for /<chain>: its own title, snippet and canonical (never "/", see app/metadata.test.ts). */
 export function chainLandingMetadata(chain: ChainKey): Metadata {
@@ -35,6 +38,8 @@ export default async function ChainLanding({ chain }: { chain: ChainKey }) {
     getLaunchTotalsForRequest(usd), // the root layout already ran it this request: shared, not repeated
   ]);
   const launches = totals.by_chain[chain].launches;
+  const now = nowMs();
+  const layout = parseLayout((await cookies()).get(LAYOUT_COOKIE)?.value);
   const others = CHAIN_KEYS.filter((k) => k !== chain && hasChainPage(k));
 
   return (
@@ -64,7 +69,7 @@ export default async function ChainLanding({ chain }: { chain: ChainKey }) {
       <section className={`${shell.anchorSection} mt-14`} aria-labelledby="chain-launches-heading">
         <h2 id="chain-launches-heading" className="font-display text-2xl sm:text-3xl font-bold tracking-tight text-ink">Tokens on {CHAIN_LABELS[chain]}</h2>
         <div className="mt-6">
-          <LaunchList initial={page.items} initialHasMore={page.hasMore} initialSort="live" initialWindow="all" initialChain={chain} initialFilter={null} hasDb={dbConfigured()} />
+          <LaunchList initial={page.items} initialHasMore={page.hasMore} initialSort="live" initialWindow="all" initialChain={chain} initialFilter={null} initialLayout={layout} hasDb={dbConfigured()} serverNow={now} />
         </div>
       </section>
 
diff --git a/app/src/components/launchpad/ChangeChip.tsx b/app/src/components/launchpad/ChangeChip.tsx
index 90d85be7..caa76aea 100644
--- a/app/src/components/launchpad/ChangeChip.tsx
+++ b/app/src/components/launchpad/ChangeChip.tsx
@@ -7,9 +7,11 @@ export default function ChangeChip({ v, className = "", plain = false, context =
   const available = Number.isFinite(pct);
   const up = pct >= 0;
   const market = marketChange(v);
+  // no move (it rounds to 0.0%) is neither up nor down: it reads neutral, never as a green "+0.0%"
+  const flat = available && market.direction === "flat";
   // a multiple (2× and up) reads the same in both styles; smaller moves keep the pill's signed percent
-  const txt = !available ? "—" : market.label.endsWith("×") ? market.label : `${up ? "+" : ""}${Math.abs(pct) >= 1000 ? fmtCompact(pct, 0) : pct.toFixed(Math.abs(pct) >= 10 ? 0 : 1)}%`;
-  const pillColor = !available ? "bg-paper text-muted" : up ? "bg-up-soft text-up" : "bg-down-soft text-down-ink";
+  const txt = !available ? "—" : flat || market.label.endsWith("×") ? market.label : `${up ? "+" : ""}${Math.abs(pct) >= 1000 ? fmtCompact(pct, 0) : pct.toFixed(Math.abs(pct) >= 10 ? 0 : 1)}%`;
+  const pillColor = !available || flat ? "bg-paper text-muted" : up ? "bg-up-soft text-up" : "bg-down-soft text-down-ink";
   return (
     <span className={`inline-flex max-w-full items-center text-[11px] font-mono font-bold tnum ${plain ? (market.direction === "flat" ? "text-muted" : market.direction === "up" ? "text-up" : "text-down-ink") : `rounded-md px-1.5 h-5 ${pillColor}`} ${className}`} title={`${available ? `${pct}%` : "—"} ${context}`}>
       <span className="truncate">{plain ? market.label : txt}</span>
diff --git a/app/src/components/launchpad/GitlawbBadge.tsx b/app/src/components/launchpad/GitlawbBadge.tsx
index 94383b4d..f43b48c3 100644
--- a/app/src/components/launchpad/GitlawbBadge.tsx
+++ b/app/src/components/launchpad/GitlawbBadge.tsx
@@ -10,17 +10,18 @@ export function GitlawbMark({ size = 16, className = "" }: { size?: number; clas
  * Badge for tokens paired with GITLAWB. Shown wherever a token appears (list, trending, feed, token page,
  * dashboard, share card) — the visible perk of picking GITLAWB as the quote asset. "sm" is 20px tall so it sits
  * inside a text-sm line without changing row heights. Black like the logo tile,
- * white text, a light hairline in dark mode so it still reads as a chip on a dark page.
+ * white text, a light hairline in dark mode so it still reads as a chip on a dark page. `collapse` shows the mark
+ * alone on phones, keeping the label for screen readers.
  */
-export default function GitlawbBadge({ size = "sm", className = "", label = GITLAWB_SYMBOL }: { size?: "sm" | "md"; className?: string; label?: string }) {
+export default function GitlawbBadge({ size = "sm", className = "", label = GITLAWB_SYMBOL, collapse = false }: { size?: "sm" | "md"; className?: string; label?: string; collapse?: boolean }) {
   return (
     <span
-      className={`inline-flex shrink-0 items-center rounded-md border border-black/10 font-semibold leading-none whitespace-nowrap text-white dark:border-white/25 ${size === "md" ? "h-6 gap-1.5 pl-[3px] pr-2 text-[11px]" : "h-5 gap-1 pl-[2px] pr-1.5 text-[10px] tracking-wide"} ${className}`}
+      className={`inline-flex shrink-0 items-center rounded-md border border-black/10 font-semibold leading-none whitespace-nowrap text-white dark:border-white/25 ${size === "md" ? "h-6 gap-1.5 pl-[3px] pr-2 text-[11px]" : "h-5 gap-1 pl-[2px] pr-1.5 text-[10px] tracking-wide"} ${collapse ? "max-sm:pr-[2px]" : ""} ${className}`}
       style={{ background: GITLAWB_LOGO_BG }}
       title="Paired with GITLAWB: buyers pay in GITLAWB; any trading fee is paid, or burned, in GITLAWB."
     >
       <GitlawbMark size={size === "md" ? 18 : 16} />
-      {label}
+      {collapse ? <span className="max-sm:sr-only">{label}</span> : label}
     </span>
   );
 }
diff --git a/app/src/components/launchpad/LaunchCard.tsx b/app/src/components/launchpad/LaunchCard.tsx
new file mode 100644
index 00000000..3169411a
--- /dev/null
+++ b/app/src/components/launchpad/LaunchCard.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { Globe } from "lucide-react";
+import TokenAvatar from "./TokenAvatar";
+import type { LaunchRow as L } from "@/lib/launchpad/queries";
+import { ago } from "@/lib/launchpad/time";
+import ChangeChip from "./ChangeChip";
+import { QuoteBrandBadge } from "./MuseworldBadge";
+import UnlistedPairBadge from "./UnlistedPairBadge";
+import { capDisplay } from "@/lib/launchpad/market-cap";
+import { addressHue } from "@/lib/launchpad/tint";
+import type { ChipParts } from "@/lib/launchpad/ranking";
+import { MorphAvatar, MorphName } from "./TokenMorph";
+import { ChainLogo } from "./ChainLogo";
+import { setPendingToken } from "@/lib/launchpad/token-transition";
+import { safeSocials } from "@/lib/launchpad/socials";
+import { XMark } from "./BrandMarks";
+import { MagicCard } from "@/components/vendor/magic-card";
+import { BorderBeam } from "@/components/vendor/border-beam";
+import type { RowHighlight } from "./LaunchRow";
+
+/**
+ * The market list as cards: a banner, the token's mark over it, then only what decides a click (name, market cap,
+ * ticker, change, live activity) and a buys/sells bar along the bottom edge. Volume, holders and fees stay in the
+ * row view and on the token page. The name is the card's link and stretches over the whole card, so the social
+ * links on the banner can be links of their own. `preview` draws the same card for the launch form: no link, no
+ * page transition, no hover lift, and "now" for its age.
+ */
+export default function LaunchCard({ l, rank, hl = null, now, pop = false, chip = null, preview = false }: { l: L; rank?: number; hl?: RowHighlight; now: number; pop?: boolean; chip?: ChipParts | null; preview?: boolean }) {
+  // one string: the compact form carries the mark for a quote with no dollar price
+  const cap = capDisplay(l.fdv_quote, l.quote_usd, { key: l.quote_key, symbol: l.quote_symbol, decimals: l.quote_decimals }).compact;
+  const trades = l.buys + l.sells;
+  const { x, site } = safeSocials(l);
+  const activity = chip ?? (hl?.kind === "new" ? { tier: "new" as const, count: null, label: "just launched", when: null, more: null } : null);
+
+  const avatar = <TokenAvatar chain={l.chain} token={l.token} symbol={l.symbol} image={l.image_url} size={56} className="rounded-2xl" />;
+  const body = (
+      <article className="group/card relative flex h-full flex-col overflow-hidden rounded-[inherit] bg-card" title={l.description || `${l.name} (${l.symbol})`}>
+        <div className="relative h-24 shrink-0 overflow-hidden">
+          <Banner token={l.token} image={l.image_url} banner={l.banner_url} />
+          {/* the cover melts into the card, so the mark and the name read on one surface */}
+          <span aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-2/3 bg-linear-to-b from-transparent via-card/45 to-card" />
+          <div className="absolute left-2 top-2 flex min-w-0 items-center gap-1 pr-10">
+            {rank !== undefined ? <span className={`grid h-6 min-w-6 shrink-0 place-items-center rounded-full px-1.5 text-xs font-bold tabular-nums ${rank <= 3 ? "bg-white text-black shadow-sm" : "bg-black/55 text-white ring-1 ring-white/15 backdrop-blur-md"}`}><span className="sr-only">Rank </span>{rank}</span> : null}
+            <QuoteBrandBadge quoteKey={l.quote_key} />
+            {l.quote_key === "other" ? <UnlistedPairBadge symbol={l.quote_symbol} className="shrink-0" /> : null}
+          </div>
+        </div>
+        <div className="flex flex-1 flex-col px-3.5 pb-3.5">
+          <div className="flex items-start gap-3">
+            <span className="relative -mt-8 shrink-0 rounded-[19px] bg-card p-[3px] shadow-[0_6px_16px_-8px_rgb(0_0_0/0.45)]">
+              {preview ? avatar : <MorphAvatar chain={l.chain} token={l.token}>{avatar}</MorphAvatar>}
+            </span>
+            <div className="min-w-0 flex-1 space-y-0.5 pt-1.5">
+              <div className="flex min-w-0 items-center gap-2">
+                {preview ? <span className="min-w-0 truncate text-[15px] font-semibold tracking-tight text-ink">{l.name}</span> : <Link
+                  href={`/t/${l.chain}/${l.token}`}
+                  // leaves a note for the token page's loading header, so the mark and name morph on the very first frame
+                  onClick={() => setPendingToken({ chain: l.chain, token: l.token, name: l.name, symbol: l.symbol, image: l.image_url })}
+                  className="min-w-0 truncate text-[15px] font-semibold tracking-tight text-ink outline-none after:absolute after:inset-0 after:z-[1] after:rounded-[inherit] focus-visible:after:ring-2 focus-visible:after:ring-brand"
+                >
+                  <MorphName chain={l.chain} token={l.token}><span>{l.name}</span></MorphName>
+                </Link>}
+                {/* above the stretched name link, so each opens its own page */}
+                {x || site ? (
+                  <span className="relative z-[2] ml-auto flex shrink-0 items-center gap-0.5">
+                    {x ? <a href={`https://x.com/${x}`} target="_blank" rel="noopener noreferrer nofollow" aria-label={`${l.name} on X (@${x})`} title={`@${x} on X`} className={social}><XMark className="size-3" /></a> : null}
+                    {site ? <a href={site} target="_blank" rel="noopener noreferrer nofollow" aria-label={`${l.name} website`} title={site} className={social}><Globe size={13} aria-hidden="true" /></a> : null}
+                  </span>
+                ) : null}
+              </div>
+              <p className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted">
+                <ChainLogo chain={l.chain} size={13} />
+                <span className="truncate"><span className="font-mono text-body">{l.symbol}</span><span aria-hidden="true"> · </span>{preview ? "now" : <><span className="sr-only">launched </span><time dateTime={l.block_time} title={new Date(l.block_time).toUTCString()} suppressHydrationWarning>{ago(l.block_time, now)}</time><span className="sr-only"> ago</span></>}</span>
+              </p>
+            </div>
+          </div>
+          <div className="mt-3 flex items-center justify-between gap-2">
+            <span key={hl?.at ?? "rest"} className={`min-w-0 truncate font-mono text-lg font-bold tracking-tight text-ink tnum ${pop ? "bb-pop" : ""}`}><span className="sr-only">Market cap </span>{cap}</span>
+            <span className="shrink-0"><span className="sr-only">Change since launch </span><ChangeChip v={l.change_from_launch} /></span>
+          </div>
+          {activity ? <Activity chip={activity} /> : null}
+        </div>
+        {/* buys against sells, flush with the bottom edge; no trades draws an empty track, never an even split */}
+        <div className="mt-auto flex h-[3px] shrink-0 gap-px" title={trades ? `${l.buys.toLocaleString("en-US")} buys, ${l.sells.toLocaleString("en-US")} sells` : "No trades yet"}>
+          {trades ? <><span className="bg-up" style={{ width: `${(l.buys / trades) * 100}%` }} /><span className="flex-1 bg-down" /></> : <span className="flex-1 bg-line" />}
+        </div>
+      </article>
+  );
+  if (preview) return <div className="h-full rounded-2xl border border-line">{body}</div>;
+  return (
+    <MagicCard className="h-full rounded-2xl transition-transform duration-200 hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
+      {rank === 1 ? <BorderBeam size={110} duration={9} /> : null}
+      {body}
+    </MagicCard>
+  );
+}
+
+const social = "grid size-7 place-items-center rounded-full text-muted transition-colors hover:bg-ink/[0.06] hover:text-ink motion-reduce:transition-none";
+
+/** Why the card sits where it sits: a live dot that pings, the wallet count in bold, and when the last outside trade was. */
+function Activity({ chip }: { chip: ChipParts }) {
+  const live = chip.tier === "live";
+  return (
+    <p className="mt-1.5 flex min-w-0 items-center gap-1.5 text-[11px] leading-4" suppressHydrationWarning>
+      <span aria-hidden="true" className="relative flex size-1.5 shrink-0">
+        {live ? <span className="absolute inset-0 animate-ping rounded-full bg-up opacity-60 motion-reduce:hidden" /> : null}
+        <span className={`relative size-1.5 rounded-full ${live ? "bg-up" : chip.tier === "new" ? "bg-ink" : "bg-line-strong"}`} />
+      </span>
+      <span className={`truncate ${live ? "text-up" : chip.tier === "new" ? "text-ink" : "text-muted"}`}>
+        {chip.count !== null ? <b className="font-semibold tabular-nums">{chip.count} </b> : null}
+        {chip.label}
+        {chip.when ? <span className="text-muted"> · {chip.when}</span> : null}
+        {chip.more ? <span className="text-muted"> · {chip.more}</span> : null}
+      </span>
+    </p>
+  );
+}
+
+/**
+ * The creator's banner when they uploaded one. Otherwise the banner is the logo again, blown up and blurred into a
+ * soft wash of its own colours. No image at all (or a broken one) falls back to the token's address hue, the same
+ * colour its default mark uses, as a quiet two-tone gradient. The token page's hero wears the same cover, so the card
+ * you open and the page it opens look alike.
+ */
+export function Banner({ token, image, banner }: { token: string; image: string | null; banner: string | null }) {
+  const [failed, setFailed] = useState<string | null>(null);
+  const own = banner?.trim() || null;
+  if (own && own !== failed) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={own} alt="" aria-hidden="true" referrerPolicy="no-referrer" loading="lazy" decoding="async" onError={() => setFailed(own)} className="absolute inset-0 size-full object-cover transition-transform duration-700 ease-out group-hover/card:scale-[1.04] motion-reduce:transition-none" />;
+  }
+  const src = image?.trim() || null;
+  return (
+    <span aria-hidden="true" className="absolute inset-0 block" style={{ background: `linear-gradient(135deg, hsl(${addressHue(token)} 55% 46%), hsl(${(addressHue(token) + 35) % 360} 50% 30%))` }}>
+      {src && src !== failed ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={src} alt="" referrerPolicy="no-referrer" loading="lazy" decoding="async" onError={() => setFailed(src)} className="absolute inset-0 size-full scale-[2.2] object-cover blur-2xl saturate-[1.35] transition-transform duration-700 ease-out group-hover/card:scale-[2.4] motion-reduce:transition-none" />
+      ) : null}
+      <span className="absolute inset-0 bg-black/15" />
+    </span>
+  );
+}
diff --git a/app/src/components/launchpad/LaunchList.tsx b/app/src/components/launchpad/LaunchList.tsx
index 98e15bc4..94a139e8 100644
--- a/app/src/components/launchpad/LaunchList.tsx
+++ b/app/src/components/launchpad/LaunchList.tsx
@@ -3,10 +3,13 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Fragment, useEffect, useRef, useState } from "react";
-import { ArrowDownWideNarrow, ArrowRight, Search, SlidersHorizontal, Star, X } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import { ArrowDownWideNarrow, ArrowRight, LayoutGrid, Rows3, Search, SlidersHorizontal, Star, X } from "lucide-react";
 import LaunchRow, { LaunchListHeader, type RowHighlight } from "./LaunchRow";
+import LaunchCard from "./LaunchCard";
 import { useLive } from "./LiveProvider";
 import WatchButton from "./WatchButton";
+import { ChainLogo } from "./ChainLogo";
 import WatchlistPanel from "./WatchlistPanel";
 import { useWatchlist } from "./useWatchlist";
 import { ToggleGroup, ToggleGroupItem } from "@/components/vendor/toggle-group";
@@ -16,9 +19,10 @@ import { CHAIN_SHORT, type ChainKey } from "@/lib/chainPublic";
 import { VISIBLE_CHAINS } from "@/lib/launchpad/config";
 import { FILTERS, filterOnChain, isAddressQuery, matchesFilter, matchesQuery, normalizeQuery, rankHit, type LaunchFilter } from "@/lib/launchpad/search";
 import { launchKey, mergeLaunches, refreshInPlace } from "@/lib/launchpad/list-state";
-import { liveChip, liveTier } from "@/lib/launchpad/ranking";
+import { liveChip, liveChipParts, liveTier } from "@/lib/launchpad/ranking";
 import { PAGE_SIZE } from "@/lib/launchpad/paging";
 import { Spinner } from "@/components/Skeleton";
+import { layoutCookie, type ListLayout } from "@/lib/launchpad/list-layout";
 import { startNav } from "@/components/RouteProgress";
 
 const SORTS: { key: LaunchSort; label: string }[] = [
@@ -37,18 +41,27 @@ const CHAIN_FILTERS: { key: ChainKey | null; label: string }[] = [
 const HL_NEW_MS = 60_000;
 const HL_TRADE_MS = 2_500;
 const REORDER_QUIET_MS = 3_000;
+/** When the live order changes, rows and cards glide to their new places instead of jumping. */
+const REORDER = { type: "spring", stiffness: 380, damping: 38 } as const;
 
 type Selection = { sort: LaunchSort; window: VolumeWindow; chain: ChainKey | null; filter: LaunchFilter | null };
 type SearchResult = { query: string; chain: ChainKey | null; rows: L[]; error?: boolean };
 export type ListView = "market" | "watchlist";
 
-/** Shared live data, stable pointer targets, URL-backed filters and scoped async results. */
-export default function LaunchList({ initial, initialHasMore = false, initialSort, initialWindow, initialChain, initialFilter = null, initialView = "market", hasDb }: { initial: L[]; initialHasMore?: boolean; initialSort: LaunchSort; initialWindow: VolumeWindow; initialChain: ChainKey | null; initialFilter?: LaunchFilter | null; initialView?: ListView; ethUsd?: number | null; hasDb: boolean }) {
+/**
+ * Shared live data, stable pointer targets, URL-backed filters and scoped async results. `serverNow` is the time the
+ * page rendered: the clock starts there, so hydration sees the same tiers, filters and divider as the server's HTML.
+ */
+export default function LaunchList({ initial, initialHasMore = false, initialSort, initialWindow, initialChain, initialFilter = null, initialView = "market", initialLayout = "list", frame = "rounded-2xl border border-line bg-paper", bare = false, hasDb, serverNow }: { initial: L[]; serverNow: number; frame?: string; bare?: boolean; initialHasMore?: boolean; initialSort: LaunchSort; initialWindow: VolumeWindow; initialChain: ChainKey | null; initialFilter?: LaunchFilter | null; initialView?: ListView; initialLayout?: ListLayout; ethUsd?: number | null; hasDb: boolean }) {
   const router = useRouter();
   const { live, setListParams, subscribe } = useLive();
   const [selection, setSelection] = useState<Selection>({ sort: initialSort, window: initialWindow, chain: initialChain, filter: initialFilter });
   const { sort, window: window_, chain, filter } = selection;
   const [view, setView] = useState<ListView>(initialView);
+  const [layout, setLayout] = useState<ListLayout>(initialLayout);
+  // `bare`: the list sits on the page (the full-screen home) instead of in its own box, aligned to the page column
+  const pad = bare ? "px-0" : "px-4";
+  const reduced = useReducedMotion();
   const watchlist = useWatchlist();
   const selectionRef = useRef(selection);
   const generation = useRef(0);
@@ -63,7 +76,7 @@ export default function LaunchList({ initial, initialHasMore = false, initialSor
   const limitRef = useRef(limit);
   const [rows, setRows] = useState<L[]>(initial);
   const [hl, setHl] = useState<Map<string, RowHighlight>>(new Map());
-  const [now, setNow] = useState(() => Date.now());
+  const [now, setNow] = useState(serverNow);
   const [holding, setHolding] = useState(false);
   const previous = useRef(new Map(initial.map((l) => [launchKey(l), l])));
   const pendingOrder = useRef<L[] | null>(null);
@@ -224,6 +237,12 @@ export default function LaunchList({ initial, initialHasMore = false, initialSor
     }
   }
 
+  /** Rows or cards; remembered in a cookie so the next visit renders the same layout from the server. */
+  function chooseLayout(next: ListLayout) {
+    setLayout(next);
+    document.cookie = layoutCookie(next);
+  }
+
   const searchResult = remote?.query === nq && remote.chain === chain ? remote : null;
   const searching = Boolean(nq && !searchResult);
   const candidates = nq ? mergeLaunches(rows, searchResult?.rows ?? []) : rows;
@@ -235,12 +254,12 @@ export default function LaunchList({ initial, initialHasMore = false, initialSor
   const firstQuiet = ranked ? shown.findIndex((row) => liveTier(row, now) === "quiet") : -1; // one divider, where the database's order enters the quiet tier
 
   return (
-    <section id="launches" aria-labelledby="launches-heading" className="min-w-0 scroll-mt-24 overflow-hidden rounded-2xl border border-line bg-paper">
-      <div className="space-y-4 px-4 pt-5">
+    <section id="launches" aria-labelledby="launches-heading" className={`min-w-0 scroll-mt-24 ${bare ? "" : `overflow-hidden ${frame}`}`}>
+      <div className={`space-y-4 ${pad} ${bare ? "pt-2" : "pt-5"}`}>
         <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
           <div>
             <div className="flex items-center gap-2.5">
-              <h2 id="launches-heading" className="text-base font-semibold tracking-tight text-ink">Launches</h2>
+              <h2 id="launches-heading" className={`font-semibold tracking-tight text-ink ${bare ? "text-xl" : "text-base"}`}>Launches</h2>
               <span className="rounded-md border border-line px-1.5 py-0.5 font-mono text-[11px] text-muted tnum" title="Total launches across all chains">{live.totals.launches}</span>
             </div>
             <p className="mt-1 text-xs text-muted">{view === "watchlist" ? "The tokens you starred, and what changed since you last looked." : sort === "live" ? "Tokens with buyers first. Every launch stays in New." : "Every token. Open from the start."}</p>
@@ -252,61 +271,77 @@ export default function LaunchList({ initial, initialHasMore = false, initialSor
             {q ? <button type="button" onClick={() => { setQ(""); document.getElementById("launch-search")?.focus(); }} aria-label="Clear search" className="absolute right-0 top-0 grid h-11 w-11 place-items-center rounded-xl text-muted hover:text-ink"><X size={15} aria-hidden="true" /></button> : null}
           </div>
         </div>
-        <div className="-mx-4 overflow-x-auto px-4 bb-scroll">
-          <div role="group" aria-label="Sort launches" className="flex min-w-max gap-5">
-            {SORTS.map((s) => { const on = view === "market" && s.key === sort; return <button key={s.key} type="button" onClick={() => pick(s.key, window_, chain, filter, "market")} aria-pressed={on} className={`relative flex min-h-11 items-center gap-1.5 border-b-2 text-xs font-medium transition-colors motion-reduce:transition-none ${on ? "border-ink text-ink" : "border-transparent text-muted hover:text-ink"}`}>{s.key === "new" ? <ArrowDownWideNarrow size={13} aria-hidden="true" /> : null}{s.label}</button>; })}
-            <button type="button" onClick={() => pick(sort, window_, chain, filter, "watchlist")} aria-pressed={view === "watchlist"} className={`relative flex min-h-11 items-center gap-1.5 border-b-2 text-xs font-medium transition-colors motion-reduce:transition-none ${view === "watchlist" ? "border-ink text-ink" : "border-transparent text-muted hover:text-ink"}`}>
+        <div className={`overflow-x-auto bb-scroll ${bare ? "" : "-mx-4 px-4"}`}>
+          <ToggleGroup aria-label="Sort launches" variant="underline" value={[view === "watchlist" ? "watchlist" : sort]} onValueChange={(values) => { const next = values[0]; if (!next) return; if (next === "watchlist") pick(sort, window_, chain, filter, "watchlist"); else pick(next as LaunchSort, window_, chain, filter, "market"); }} className="min-w-max gap-5">
+            {SORTS.map((s) => <ToggleGroupItem key={s.key} value={s.key} thumbClassName="inset-x-0" className="min-h-11 rounded-none px-0">{s.key === "new" ? <ArrowDownWideNarrow size={13} aria-hidden="true" /> : null}{s.label}</ToggleGroupItem>)}
+            <ToggleGroupItem value="watchlist" thumbClassName="inset-x-0" className="min-h-11 rounded-none px-0">
               <Star size={13} aria-hidden="true" fill={view === "watchlist" ? "currentColor" : "none"} />Watchlist
               {watchlist.ready && watchlist.entries.length ? <span className="font-mono text-[11px] text-muted tnum"><span className="sr-only">, </span>{watchlist.entries.length}<span className="sr-only"> saved</span></span> : null}
-            </button>
-          </div>
+            </ToggleGroupItem>
+          </ToggleGroup>
         </div>
       </div>
-      <div className="space-y-3 border-t border-line px-4 py-3">
+      <div className={`space-y-3 border-t border-line py-3 ${pad}`}>
         <div className="flex flex-wrap items-center justify-between gap-2">
           <ToggleGroup aria-label="Chain" value={[chain ?? "all"]} onValueChange={(values) => { const value = values[0]; if (!value) return; const c = value === "all" ? null : (value as ChainKey); const keep = !filter || FILTERS.some((f) => f.key === filter && filterOnChain(f, c)); pick(sort, window_, c, keep ? filter : null); }}>
-            {CHAIN_FILTERS.map((c) => <ToggleGroupItem key={c.key ?? "all"} value={c.key ?? "all"}>{c.label}</ToggleGroupItem>)}
+            {CHAIN_FILTERS.map((c) => <ToggleGroupItem key={c.key ?? "all"} value={c.key ?? "all"} title={c.label}>{c.key ? <ChainLogo chain={c.key} size={16} /> : null}<span className={c.key ? "max-sm:sr-only" : undefined}>{c.label}</span></ToggleGroupItem>)}
           </ToggleGroup>
-          {showWindow && view === "market" ? <ToggleGroup aria-label="Volume window" value={[window_]} onValueChange={(values) => { if (values[0]) pick(sort, values[0] as VolumeWindow); }}>
-            {WINDOWS.map((w) => <ToggleGroupItem key={w} value={w} className="px-2.5 font-mono tnum">{w === "all" ? "All time" : w}</ToggleGroupItem>)}
-          </ToggleGroup> : null}
+          <div className="flex flex-wrap items-center gap-2">
+            {showWindow && view === "market" ? <ToggleGroup aria-label="Volume window" value={[window_]} onValueChange={(values) => { if (values[0]) pick(sort, values[0] as VolumeWindow); }}>
+              {WINDOWS.map((w) => <ToggleGroupItem key={w} value={w} className="px-2.5 font-mono tnum">{w === "all" ? "All time" : w}</ToggleGroupItem>)}
+            </ToggleGroup> : null}
+            {view === "market" ? <ToggleGroup aria-label="Layout" value={[layout]} onValueChange={(values) => { const next = values[0]; if (next === "list" || next === "cards") chooseLayout(next); }}>
+              <ToggleGroupItem value="list" aria-label="Show as rows" title="Rows" className="px-2.5"><Rows3 size={14} aria-hidden="true" /><span className="hidden sm:inline">Rows</span></ToggleGroupItem>
+              <ToggleGroupItem value="cards" aria-label="Show as cards" title="Cards" className="px-2.5"><LayoutGrid size={14} aria-hidden="true" /><span className="hidden sm:inline">Cards</span></ToggleGroupItem>
+            </ToggleGroup> : null}
+          </div>
         </div>
         <div className={`flex items-start gap-2 ${view === "watchlist" ? "hidden" : ""}`}>
           <SlidersHorizontal aria-hidden="true" size={13} className="mt-3.5 shrink-0 text-muted" />
-          <ToggleGroup aria-label="Quick filter" value={filter ? [filter] : []} onValueChange={(values) => pick(sort, window_, chain, (values[0] as LaunchFilter | undefined) ?? null)} className="min-w-0 gap-1 overflow-x-auto rounded-none border-0 bg-transparent p-0 bb-scroll">
-            {FILTERS.filter((f) => filterOnChain(f, chain)).map((f) => <ToggleGroupItem key={f.key} value={f.key} title={f.title} className="min-h-10 px-2.5 text-[11px] data-pressed:bg-card">{f.label}</ToggleGroupItem>)}
+          <ToggleGroup aria-label="Quick filter" value={filter ? [filter] : []} onValueChange={(values) => pick(sort, window_, chain, (values[0] as LaunchFilter | undefined) ?? null)} variant="chips" className="min-w-0 overflow-x-auto bb-scroll">
+            {FILTERS.filter((f) => filterOnChain(f, chain)).map((f) => <ToggleGroupItem key={f.key} value={f.key} title={f.title} className="min-h-10 px-2.5 text-[11px]">{f.label}</ToggleGroupItem>)}
           </ToggleGroup>
         </div>
       </div>
       {view === "watchlist" ? <WatchlistPanel chain={chain} onBrowse={() => pick(sort, window_, chain, filter, "market")} /> : <>
-      <div role="status" className="flex min-h-9 items-center justify-between gap-2 border-t border-line px-4 text-[11px] text-muted">
+      <div role="status" className={`flex min-h-9 items-center justify-between gap-2 border-t border-line text-[11px] text-muted ${pad}`}>
         <span className="inline-flex items-center gap-2">{updating || searching ? <><Spinner size={11} />{searching ? "Searching all launches…" : "Updating view…"}</> : nq ? <><span className="font-mono tnum">{shown.length}</span> matches</> : <><span className="font-mono tnum">{shown.length}</span> shown · {chain ? CHAIN_SHORT[chain] : "all chains"}</>}</span>
         <span className="shrink-0">{holding ? "Order held while browsing" : "Updates every 5s"}</span>
       </div>
-      <LaunchListHeader window={showWindow ? window_ : "all"} />
-      <ul ref={listRef} aria-label="Token launches" aria-busy={updating} onPointerEnter={(e) => { if (e.pointerType === "mouse") interaction.current.pointer = true; }} onPointerLeave={() => { interaction.current.pointer = false; interaction.current.at = Date.now(); }} onPointerDown={() => { interaction.current.at = Date.now(); }} onFocusCapture={() => { interaction.current.focus = true; }} onBlurCapture={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) { interaction.current.focus = false; interaction.current.at = Date.now(); } }}>
+      {layout === "list" ? <LaunchListHeader window={showWindow ? window_ : "all"} /> : null}
+      <ul ref={listRef} aria-label="Token launches" aria-busy={updating} className={layout === "cards" ? `grid grid-cols-[repeat(auto-fill,minmax(13rem,1fr))] gap-4 border-t border-line pt-4 ${pad}` : undefined} onPointerEnter={(e) => { if (e.pointerType === "mouse") interaction.current.pointer = true; }} onPointerLeave={() => { interaction.current.pointer = false; interaction.current.at = Date.now(); }} onPointerDown={() => { interaction.current.at = Date.now(); }} onFocusCapture={() => { interaction.current.focus = true; }} onBlurCapture={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) { interaction.current.focus = false; interaction.current.at = Date.now(); } }}>
         {shown.map((l, i) => {
           const key = launchKey(l);
           const chip = ranked ? liveChip(l, now) : null;
           const rank = !nq && sort !== "new" && (!chip || chip.tier === "live") ? i + 1 : undefined;
-          return <Fragment key={key}>
-            {i === firstQuiet ? <li className="border-b border-line bg-card px-4 py-2 text-[11px] text-muted"><span className="font-medium text-body">Quiet launches</span> · no buyers yet. One row per wallet; every launch stays in New.</li> : null}
-            <li data-token={key} className="relative">
-              <LaunchRow l={l} rank={rank} window={showWindow ? window_ : "all"} hl={hl.get(key) ?? null} now={now} pop={Boolean(hl.get(key) && hl.get(key)?.kind !== "new")} chip={chip} />
-              {/* outside the row's link: saving never navigates */}
-              <div className="absolute right-1 top-2 md:top-1/2 md:-translate-y-1/2"><WatchButton token={{ chain: l.chain, token: l.token, name: l.name, symbol: l.symbol }} /></div>
-            </li>
+          const flash = hl.get(key) ?? null;
+          // keyed by layout too: switching layouts redraws the list instead of flying every token across the page
+          return <Fragment key={`${layout}:${key}`}>
+            {i === firstQuiet ? <li className={layout === "cards" ? "col-span-full pt-2 text-[11px] text-muted" : "border-b border-line bg-card px-4 py-2 text-[11px] text-muted"}><span className="font-medium text-body">Quiet launches</span> · no buyers yet. One row per wallet; every launch stays in New.</li> : null}
+            {layout === "cards" ? (
+              <motion.li layout={reduced ? false : "position"} transition={REORDER} data-token={key} className={`relative rounded-2xl ${flash ? `bb-card-${flash.kind}` : ""}`}>
+                <LaunchCard l={l} rank={rank} hl={flash} now={now} pop={Boolean(flash && flash.kind !== "new")} chip={ranked ? liveChipParts(l, now) : null} />
+                {/* outside the card's link: saving never navigates */}
+                <div className="absolute right-2 top-2 z-20"><WatchButton overlay token={{ chain: l.chain, token: l.token, name: l.name, symbol: l.symbol }} /></div>
+              </motion.li>
+            ) : (
+              <motion.li layout={reduced ? false : "position"} transition={REORDER} data-token={key} className="relative">
+                <LaunchRow l={l} rank={rank} window={showWindow ? window_ : "all"} hl={flash} now={now} pop={Boolean(flash && flash.kind !== "new")} chip={chip} />
+                {/* outside the row's link: saving never navigates */}
+                <div className="absolute right-1 top-2 md:top-1/2 md:-translate-y-1/2"><WatchButton token={{ chain: l.chain, token: l.token, name: l.name, symbol: l.symbol }} /></div>
+              </motion.li>
+            )}
           </Fragment>;
         })}
-        {shown.length === 0 ? <li className="space-y-3 border-t border-line px-5 py-12 text-center">
+        {shown.length === 0 ? <li className="col-span-full space-y-3 border-t border-line px-5 py-12 text-center">
           <Search size={20} aria-hidden="true" className="mx-auto text-muted" />
           <p className="text-sm font-semibold text-ink">{updating || searching ? "Finding your launches…" : nq || filter || chain ? "No matching launches" : "The next launch could be yours"}</p>
           <p className="mx-auto max-w-xs text-pretty text-xs leading-relaxed text-muted">{!hasDb ? "The launch database is not configured yet." : nq || filter || chain ? "Try a different name, chain or filter." : "New tokens will appear here as soon as they launch."}</p>
           {nq || filter || chain ? <button type="button" onClick={reset} className={btn.secondarySm}>Clear search & filters</button> : <Link href="/launch" className={btn.secondarySm}>Launch the first token <ArrowRight size={13} aria-hidden="true" /></Link>}
         </li> : null}
       </ul>
-      {loadError || searchResult?.error ? <p role="alert" className="px-4 py-3 text-xs text-warm-ink">{loadError || "Search is unavailable. Showing matches from loaded launches."}</p> : null}
-      <div className="flex min-h-14 items-center justify-center px-4 py-3">
+      {loadError || searchResult?.error ? <p role="alert" className={`py-3 text-xs text-warm-ink ${pad}`}>{loadError || "Search is unavailable. Showing matches from loaded launches."}</p> : null}
+      <div className={`flex min-h-14 items-center justify-center py-3 ${pad}`}>
         {!nq && hasMore && rows.length < 200 ? <button type="button" onClick={() => void loadMore()} disabled={loadingMore || updating} className={btn.secondarySm}>{loadingMore ? <><Spinner size={13} /> Loading…</> : <>Load more <ArrowRight size={13} aria-hidden="true" /></>}</button> : <p className="text-center text-[11px] text-muted">{nq ? "Search includes older launches." : rows.length >= 200 && hasMore ? "Showing the first 200. Search or filter to narrow the list." : shown.length ? "You're all caught up." : "One transaction. Zero platform fee."}</p>}
       </div>
       </>}
diff --git a/app/src/components/launchpad/LaunchRow.tsx b/app/src/components/launchpad/LaunchRow.tsx
index 4f41e3f0..6c3e5be4 100644
--- a/app/src/components/launchpad/LaunchRow.tsx
+++ b/app/src/components/launchpad/LaunchRow.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import TokenAvatar from "./TokenAvatar";
 import { feeModeOf } from "./FeeChip";
 import type { LaunchRow as L, VolumeWindow } from "@/lib/launchpad/queries";
-import { fmtQuote, fmtUsd, pipsToPct } from "@/lib/launchpad/math";
+import { fmtCompact, fmtQuote, fmtUsd, pipsToPct } from "@/lib/launchpad/math";
 import { CHAIN_SHORT } from "@/lib/chainPublic";
 import { ago } from "@/lib/launchpad/time";
 import ChangeChip from "./ChangeChip";
@@ -14,18 +14,23 @@ import { marketUsd } from "@/lib/launchpad/market-format";
 import { capDisplay } from "@/lib/launchpad/market-cap";
 import type { LiveTier } from "@/lib/launchpad/ranking";
 import { MorphAvatar, MorphName } from "./TokenMorph";
+import { ChainCorner } from "./ChainLogo";
 import { setPendingToken } from "@/lib/launchpad/token-transition";
 
-const columns = "md:grid-cols-[minmax(0,1fr)_6.5rem_5.5rem_6rem_5rem_2.5rem]";
+/** Token, market cap, since launch, volume, buys / sells, holders, age; the star sits in the right gutter (md:pr-13). */
+const columns = "md:grid-cols-[minmax(0,1fr)_6.25rem_4.5rem_5rem_6rem_3.75rem_2.5rem]";
+/** A count that never wraps its column: 3,231 below ten thousand, 22.5K above. */
+const count = (n: number) => (n >= 10_000 ? fmtCompact(n, 1) : n.toLocaleString("en-US"));
 
 export function LaunchListHeader({ window }: { window: VolumeWindow }) {
   return (
-    <div aria-hidden="true" className={`hidden md:grid ${columns} items-center gap-3 border-y border-line bg-card py-3 pl-4 pr-13 text-[11px] font-medium text-muted`}>
-      <span>Token / paired with</span>
+    <div aria-hidden="true" className={`hidden md:grid ${columns} items-center gap-3 border-y border-line bg-card py-2.5 pl-4 pr-13 text-[11px] font-medium text-muted`}>
+      <span>Token</span>
       <span className="text-right">Market cap</span>
       <span className="text-right">Since launch</span>
       <span className="text-right">Volume · {window}</span>
       <span className="text-right">Buys / sells</span>
+      <span className="text-right">Holders</span>
       <span className="text-right">Age</span>
     </div>
   );
@@ -35,6 +40,11 @@ export type RowHighlight = { kind: "new" | "buy" | "sell"; at: number } | null;
 
 export type RowChip = { tier: LiveTier; text: string } | null;
 
+/**
+ * One market row, read like a trading board: the token in two lines (name and badges; ticker, chain and fee), a third
+ * on the live sort for why it sits there, then one figure per column. Phones keep the token and its market cap on top
+ * and fold the other columns into one line under it.
+ */
 export default function LaunchRow({ l, rank, window = "all", hl = null, now, pop = false, chip = null }: { l: L; ethUsd?: number | null; rank?: number; window?: VolumeWindow; hl?: RowHighlight; now: number; pop?: boolean; chip?: RowChip }) {
   const mode = feeModeOf(l.lp_fee, l.recipients);
   const volRaw = window === "1h" ? l.volume_1h : window === "24h" ? l.volume_24h : l.volume_quote;
@@ -44,7 +54,9 @@ export default function LaunchRow({ l, rank, window = "all", hl = null, now, pop
   const cap = capDisplay(l.fdv_quote, l.quote_usd, { key: l.quote_key, symbol: l.quote_symbol, decimals: l.quote_decimals }); // dollars lead; the quote figure is the detail
   const capLabel = cap.main;
   const capDetail = cap.usd !== null ? `${fmtUsd(cap.usd)} · ${cap.detail}` : `${cap.main} · ${cap.detail}`;
-  const feeLabel = mode === "free" ? "0% trading fee" : `${pipsToPct(l.lp_fee)} fee → ${mode === "burn" ? "burned" : mode === "split" ? "split" : "beneficiary"}`;
+  const feeLabel = mode === "free" ? "0% fee" : `${pipsToPct(l.lp_fee)} fee`;
+  const feeTitle = mode === "free" ? "No trading fee" : `${pipsToPct(l.lp_fee)} trading fee, ${mode === "burn" ? "burned" : mode === "split" ? "split between recipients" : "to the recipient"}`;
+  const trades = l.buys + l.sells;
   const flash = hl ? `bb-row-${hl.kind}` : "";
   const age = <time dateTime={l.block_time} title={new Date(l.block_time).toUTCString()} suppressHydrationWarning>{ago(l.block_time, now)}</time>;
 
@@ -53,51 +65,68 @@ export default function LaunchRow({ l, rank, window = "all", hl = null, now, pop
       href={`/t/${l.chain}/${l.token}`}
       // leaves a note for the token page's loading header, so the mark and name morph on the very first frame
       onClick={() => setPendingToken({ chain: l.chain, token: l.token, name: l.name, symbol: l.symbol, image: l.image_url })}
-      className={`bb-market-row group block border-b border-line bg-paper px-4 py-3.5 md:pr-13 transition-colors hover:bg-card focus-visible:relative focus-visible:z-10 motion-reduce:transition-none ${flash}`}
+      className={`bb-market-row group block border-b border-line bg-paper px-4 py-2.5 md:pr-13 transition-colors hover:bg-card focus-visible:relative focus-visible:z-10 motion-reduce:transition-none ${flash}`}
       title={l.description || `${l.name} (${l.symbol})`}
     >
-      <div className={`grid ${columns} grid-cols-[minmax(0,1fr)_9.25rem] items-center gap-x-3 gap-y-3`}>
-        <div className="flex min-w-0 items-center gap-2.5">
-          {rank !== undefined ? <span className="hidden w-4 shrink-0 text-right font-mono text-[11px] text-muted tnum xl:block">{rank}</span> : null}
-          <MorphAvatar chain={l.chain} token={l.token}>
-            <TokenAvatar chain={l.chain} token={l.token} symbol={l.symbol} image={l.image_url} size={36} className="shrink-0 rounded-lg" />
-          </MorphAvatar>
-          <div className="min-w-0">
-            <div className="flex min-w-0 items-center gap-2">
+      <div className={`grid ${columns} grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1.5`}>
+        <div className="flex min-w-0 items-center gap-3">
+          {rank !== undefined ? <span className={`hidden shrink-0 place-items-center font-mono text-[11px] font-semibold tnum xl:grid ${rank <= 3 ? "size-5 rounded-md bg-ink text-inverse dark:bg-brand" : "w-5 text-faint"}`}>{rank}</span> : null}
+          <span className="relative shrink-0">
+            <MorphAvatar chain={l.chain} token={l.token}>
+              <TokenAvatar chain={l.chain} token={l.token} symbol={l.symbol} image={l.image_url} size={38} className="shrink-0 rounded-xl" />
+            </MorphAvatar>
+            <ChainCorner chain={l.chain} />
+          </span>
+          <div className="min-w-0 flex-1">
+            <div className="flex min-w-0 items-center gap-1.5">
               <MorphName chain={l.chain} token={l.token}>
                 <span className="truncate text-sm font-semibold text-ink">{l.name}</span>
               </MorphName>
-              <QuoteBrandBadge quoteKey={l.quote_key} />
+              {/* phones show the badge's mark only, so the name keeps its room */}
+              <QuoteBrandBadge quoteKey={l.quote_key} collapse />
               {l.quote_key === "other" ? <UnlistedPairBadge symbol={l.quote_symbol} className="shrink-0" /> : null}
-              {hl?.kind === "new" ? <span className="shrink-0 text-[10px] font-medium text-brand">New</span> : null}
+              {hl?.kind === "new" ? <span className="shrink-0 rounded-md bg-brand-soft px-1.5 py-px text-[10px] font-semibold text-brand">New</span> : null}
             </div>
-            <div className="mt-0.5 truncate text-[11px] text-muted" title={`${l.symbol} · ${CHAIN_SHORT[l.chain]} · paired with ${l.quote_symbol}`}>
-              <span className="font-mono text-body">{l.symbol}</span><span aria-hidden="true"> · </span>{CHAIN_SHORT[l.chain]}<span aria-hidden="true"> · </span>{l.quote_symbol}
-            </div>
-            <div className={`mt-0.5 truncate text-[11px] ${mode === "burn" ? "text-warm-ink" : "text-muted"}`}>{feeLabel}</div>
-            {chip ? <div className={`mt-0.5 truncate text-[11px] ${chip.tier === "live" ? "text-up" : chip.tier === "new" ? "text-brand" : "text-muted"}`} suppressHydrationWarning>{chip.text}</div> : null}
+            {/* ticker, chain and fee: one line that truncates as a whole */}
+            <p className="mt-0.5 truncate text-[11px] text-muted" title={`${l.symbol} · ${CHAIN_SHORT[l.chain]} · paired with ${l.quote_symbol} · ${feeTitle}`}>
+              <span className="font-mono text-body">{l.symbol}</span><span aria-hidden="true"> · </span>{CHAIN_SHORT[l.chain]}<span aria-hidden="true"> · </span><span className={mode === "burn" ? "text-warm-ink" : ""}><span className="sr-only">{feeTitle}</span><span aria-hidden="true">{feeLabel}</span></span>
+            </p>
+            {chip ? <Why chip={chip} className="mt-0.5 hidden md:flex" /> : null}
           </div>
         </div>
         <div className="min-w-0 pr-9 text-right md:pr-0">
-          <span className="mb-0.5 block text-[10px] text-muted md:sr-only">Market cap</span>
-          <span key={hl?.at ?? "rest"} className={`block truncate font-mono text-sm font-bold text-ink tnum ${pop ? "bb-pop" : ""}`} title={capDetail}>{capLabel}</span>
+          <span key={hl?.at ?? "rest"} className={`block truncate font-mono text-sm font-bold text-ink tnum ${pop ? "bb-pop" : ""}`} title={capDetail}><span className="sr-only">Market cap </span>{capLabel}</span>
           <span className="hidden truncate font-mono text-[10px] text-muted tnum md:block" title={capDetail}>{cap.detail}</span>
-          <span className="mt-0.5 block md:hidden"><span className="block truncate font-mono text-[10px] text-muted tnum" title={capDetail}>{cap.detail}</span><span className="sr-only">Change since launch </span><ChangeChip v={l.change_from_launch} plain /></span>
+          <span className="mt-0.5 flex items-center justify-end gap-2 md:hidden"><span className="block truncate font-mono text-[10px] text-muted tnum" title={capDetail}>{cap.detail}</span><span className="sr-only">Change since launch </span><ChangeChip v={l.change_from_launch} plain /></span>
         </div>
         <div className="hidden min-w-0 text-right md:block"><span className="sr-only">Change since launch </span><ChangeChip v={l.change_from_launch} plain /></div>
         <div className="hidden min-w-0 text-right font-mono text-xs text-body tnum md:block" title={volumeDetail}><span className="sr-only">Volume {window} </span><span className="block truncate">{volLabel}</span></div>
-        <div className="hidden text-right font-mono text-xs tnum md:block">
-          <span className="sr-only">Buys </span><span className="text-up">{l.buys}</span><span className="text-muted"> / </span><span className="sr-only">Sells </span><span className="text-down-ink">{l.sells}</span>
-          <div className="mt-0.5 text-[10px] text-muted">{l.holders} holders</div>
+        <div className="hidden text-right font-mono text-xs tnum md:block" title={trades ? `${l.buys.toLocaleString("en-US")} buys, ${l.sells.toLocaleString("en-US")} sells` : "No trades yet"}>
+          <span className="whitespace-nowrap"><span className="sr-only">Buys </span><span className="text-up">{count(l.buys)}</span><span className="text-muted"> / </span><span className="sr-only">Sells </span><span className="text-down-ink">{count(l.sells)}</span></span>
+          {/* the same split as a bar; a token with no trades keeps an empty track */}
+          <div aria-hidden="true" className="ml-auto mt-1 flex h-[3px] w-16 gap-px">{trades ? <><span className="rounded-full bg-up" style={{ width: `${(l.buys / trades) * 100}%` }} /><span className="flex-1 rounded-full bg-down" /></> : <span className="flex-1 rounded-full bg-line" />}</div>
         </div>
+        <div className="hidden text-right font-mono text-xs text-body tnum md:block"><span className="sr-only">Holders </span>{count(l.holders)}</div>
         <div className="hidden text-right font-mono text-[11px] text-muted tnum md:block"><span className="sr-only">Launched </span>{age}<span className="sr-only"> ago</span></div>
-        <dl className="col-span-2 grid grid-cols-[1.3fr_1fr_1fr_auto] gap-3 border-t border-line pt-2.5 md:hidden">
-          <div className="min-w-0"><dt className="text-[10px] text-muted">Volume · {window}</dt><dd className="mt-1 truncate font-mono text-[11px] text-body tnum" title={volumeDetail}>{volLabel}</dd></div>
-          <div><dt className="text-[10px] text-muted">Buys / sells</dt><dd className="mt-1 font-mono text-[11px] tnum"><span className="text-up">{l.buys}</span><span className="text-muted"> / </span><span className="text-down-ink">{l.sells}</span></dd></div>
-          <div><dt className="text-[10px] text-muted">Holders</dt><dd className="mt-1 font-mono text-[11px] text-body tnum">{l.holders}</dd></div>
-          <div className="text-right"><dt className="text-[10px] text-muted">Age</dt><dd className="mt-1 font-mono text-[11px] text-body tnum">{age}</dd></div>
-        </dl>
+        {/* phones: why the row is live across the full width, then the other columns as one line */}
+        {chip ? <Why chip={chip} className="col-span-2 flex md:hidden" /> : null}
+        <p className="col-span-2 flex min-w-0 items-center gap-x-3 truncate text-[11px] text-muted md:hidden">
+          <span className="truncate"><span className="text-faint">Vol </span><span className="font-mono text-body tnum" title={volumeDetail}>{volLabel}</span></span>
+          <span className="shrink-0 font-mono tnum"><span className="text-up">{count(l.buys)}</span><span> / </span><span className="text-down-ink">{count(l.sells)}</span></span>
+          <span className="shrink-0"><span className="font-mono text-body tnum">{count(l.holders)}</span> holders</span>
+          <span className="ml-auto shrink-0 font-mono tnum">{age}</span>
+        </p>
       </div>
     </Link>
   );
 }
+
+/** Why the row sits where it sits on the live sort: "55 wallets today · 10h ago", "just launched · 4m", "no buyers yet". */
+function Why({ chip, className }: { chip: NonNullable<RowChip>; className: string }) {
+  return (
+    <p className={`min-w-0 items-center gap-1.5 text-[11px] font-medium ${chip.tier === "live" ? "text-up" : chip.tier === "new" ? "text-brand" : "text-muted"} ${className}`}>
+      {chip.tier === "live" ? <span aria-hidden="true" className="bb-beacon relative inline-block size-1.5 shrink-0 rounded-full bg-up" /> : null}
+      <span className="truncate" suppressHydrationWarning>{chip.text}</span>
+    </p>
+  );
+}
diff --git a/app/src/components/launchpad/MuseworldBadge.tsx b/app/src/components/launchpad/MuseworldBadge.tsx
index b58ed317..3dc597fc 100644
--- a/app/src/components/launchpad/MuseworldBadge.tsx
+++ b/app/src/components/launchpad/MuseworldBadge.tsx
@@ -14,8 +14,9 @@ export function MuseworldMark({ size = 16, className = "" }: { size?: number; cl
  * GITLAWB badge so the two sit side by side in any row: "sm" is 20px tall and fits a text-sm line. Museworld blue with
  * the logo tile flush left and a check seal on the right: the mark that says the pair is official, not just named so.
  * The badge follows the server-resolved quote key, which comes from the quote ADDRESS, never from an on-chain name.
+ * `collapse` shows the mark and seal alone on phones, keeping the label for screen readers.
  */
-export default function MuseworldBadge({ size = "sm", className = "", label = MUSEWORLD_SYMBOL }: { size?: "sm" | "md"; className?: string; label?: string }) {
+export default function MuseworldBadge({ size = "sm", className = "", label = MUSEWORLD_SYMBOL, collapse = false }: { size?: "sm" | "md"; className?: string; label?: string; collapse?: boolean }) {
   return (
     <span
       className={`inline-flex shrink-0 items-center rounded-md border border-black/10 font-semibold leading-none whitespace-nowrap text-white dark:border-white/25 ${size === "md" ? "h-6 gap-1.5 pl-[3px] pr-1.5 text-[11px]" : "h-5 gap-1 pl-[2px] pr-1 text-[10px] tracking-wide"} ${className}`}
@@ -23,7 +24,7 @@ export default function MuseworldBadge({ size = "sm", className = "", label = MU
       title="Official pair: MUSEWORLD, Museworld's token. Launches paired with it are made inside Museworld by its AI agents. USD from the MUSEWORLD/GITLAWB pool."
     >
       <MuseworldMark size={size === "md" ? 18 : 16} />
-      {label}
+      {collapse ? <span className="max-sm:sr-only">{label}</span> : label}
       <BadgeCheck size={size === "md" ? 13 : 12} strokeWidth={2.25} aria-label="official" className="shrink-0" />
     </span>
   );
@@ -47,13 +48,16 @@ export function hasQuoteBrandBadge(quoteKey: string | null | undefined): boolean
   return brandOf(quoteKey) !== null;
 }
 
-/** A quote's brand badge, or nothing. One place for every list to call; `satisfies` keeps it in step with `Brand`. */
-export function QuoteBrandBadge({ quoteKey, size = "sm", className = "" }: { quoteKey: string | null | undefined; size?: "sm" | "md"; className?: string }) {
+/**
+ * A quote's brand badge, or nothing. One place for every list to call; `satisfies` keeps it in step with `Brand`.
+ * `collapse` shows the badge's mark alone on phones (the label stays for screen readers), where a row is narrow.
+ */
+export function QuoteBrandBadge({ quoteKey, size = "sm", className = "", collapse = false }: { quoteKey: string | null | undefined; size?: "sm" | "md"; className?: string; collapse?: boolean }) {
   const brand = brandOf(quoteKey);
   if (brand === null) return null;
   return ({
-    twig: <TwigBadge size={size} className={className} />,
-    gitlawb: <GitlawbBadge size={size} className={className} />,
-    museworld: <MuseworldBadge size={size} className={className} />,
+    twig: <TwigBadge size={size} className={className} collapse={collapse} />,
+    gitlawb: <GitlawbBadge size={size} className={className} collapse={collapse} />,
+    museworld: <MuseworldBadge size={size} className={className} collapse={collapse} />,
   } satisfies Record<Brand, React.ReactElement>)[brand];
 }
diff --git a/app/src/components/launchpad/TwigBadge.tsx b/app/src/components/launchpad/TwigBadge.tsx
index 9513029b..a0282f9f 100644
--- a/app/src/components/launchpad/TwigBadge.tsx
+++ b/app/src/components/launchpad/TwigBadge.tsx
@@ -9,17 +9,18 @@ export function TwigMark({ size = 16, className = "" }: { size?: number; classNa
 /**
  * Badge for tokens paired with TWIG, the Base form's GITLAWB wrapper (lib/launchpad/twig.ts). Same geometry as the
  * GITLAWB badge so either sits in any row: "sm" is 20px tall and fits a text-sm line. Near-black like the logo tile,
- * white text, a light hairline in dark mode so it still reads as a chip on a dark page.
+ * white text, a light hairline in dark mode so it still reads as a chip on a dark page. `collapse` shows the mark
+ * alone on phones, keeping the label for screen readers.
  */
-export default function TwigBadge({ size = "sm", className = "", label = TWIG_SYMBOL }: { size?: "sm" | "md"; className?: string; label?: string }) {
+export default function TwigBadge({ size = "sm", className = "", label = TWIG_SYMBOL, collapse = false }: { size?: "sm" | "md"; className?: string; label?: string; collapse?: boolean }) {
   return (
     <span
-      className={`inline-flex shrink-0 items-center rounded-md border border-black/10 font-semibold leading-none whitespace-nowrap text-white dark:border-white/25 ${size === "md" ? "h-6 gap-1.5 pl-[3px] pr-2 text-[11px]" : "h-5 gap-1 pl-[2px] pr-1.5 text-[10px] tracking-wide"} ${className}`}
+      className={`inline-flex shrink-0 items-center rounded-md border border-black/10 font-semibold leading-none whitespace-nowrap text-white dark:border-white/25 ${size === "md" ? "h-6 gap-1.5 pl-[3px] pr-2 text-[11px]" : "h-5 gap-1 pl-[2px] pr-1.5 text-[10px] tracking-wide"} ${collapse ? "max-sm:pr-[2px]" : ""} ${className}`}
       style={{ background: TWIG_LOGO_BG }}
       title="Paired with TWIG, the 1:1 wrapper of GITLAWB: buyers pay in TWIG; any trading fee is paid, or burned, in TWIG."
     >
       <TwigMark size={size === "md" ? 18 : 16} />
-      {label}
+      {collapse ? <span className="max-sm:sr-only">{label}</span> : label}
     </span>
   );
 }
diff --git a/app/src/components/launchpad/WatchButton.tsx b/app/src/components/launchpad/WatchButton.tsx
index 027a6372..ad826bfc 100644
--- a/app/src/components/launchpad/WatchButton.tsx
+++ b/app/src/components/launchpad/WatchButton.tsx
@@ -6,27 +6,44 @@ import { Star } from "lucide-react";
 import { watchlistKey, type WatchlistIdentity } from "@/lib/launchpad/watchlist";
 import { useWatchlist } from "./useWatchlist";
 
-/** Kept outside token links: saving must never navigate or request a signature. */
-export default function WatchButton({ token, labelled = false, onRemoved }: { token: WatchlistIdentity; labelled?: boolean; onRemoved?: (button: HTMLButtonElement) => void }) {
+/**
+ * Kept outside token links: saving must never navigate or request a signature. `overlay` sits on a market card's art
+ * (dark glass); `labelled` is the token page's action bar button, the same height as the bar beside it.
+ */
+export default function WatchButton({ token, labelled = false, overlay = false, onRemoved }: { token: WatchlistIdentity; labelled?: boolean; overlay?: boolean; onRemoved?: (button: HTMLButtonElement) => void }) {
   const { savedKeys, ready, toggle, storageError } = useWatchlist();
   const reduced = useReducedMotion();
   const [message, setMessage] = useState("");
   const saved = savedKeys.includes(watchlistKey(token));
   const label = `${saved ? "Remove" : "Save"} ${token.name} ${saved ? "from" : "to"} watchlist`;
+  const star = (
+    <motion.span initial={false} animate={{ scale: saved && !reduced ? [1, 1.3, 1] : 1, rotate: saved && !reduced ? [0, -12, 0] : 0 }} transition={{ duration: reduced ? 0 : 0.24 }} className="inline-flex">
+      <Star size={overlay ? 14 : labelled ? 15 : 17} aria-hidden="true" fill={saved ? "currentColor" : "none"} strokeWidth={1.7} />
+    </motion.span>
+  );
   return (
     <span className="relative inline-flex shrink-0">
-      <button type="button" disabled={!ready} aria-label={label} aria-pressed={saved} title={label}
+      {/* the press scale sits on the button itself: on a child span, Motion would make that span a second tab stop */}
+      <motion.button type="button" disabled={!ready} aria-label={label} aria-pressed={saved} title={label}
+        whileTap={reduced ? undefined : { scale: 0.94 }}
         onClick={(event) => {
           const result = toggle(token);
           setMessage(result === "limit" ? "Your watchlist is full. Remove a token to save another (50 maximum)." : result === "invalid" ? "This token could not be saved." : "");
           if (result === "removed") onRemoved?.(event.currentTarget);
         }}
-        className={`inline-flex min-h-11 items-center justify-center gap-2 rounded-xl transition-colors disabled:opacity-40 motion-reduce:transition-none ${labelled ? "border border-line px-3 text-xs hover:border-line-strong" : "w-11"} ${saved ? "text-brand" : "text-muted hover:text-ink"}`}>
-        <motion.span initial={false} whileTap={reduced ? undefined : { scale: 0.88 }} animate={{ scale: saved && !reduced ? [1, 1.3, 1] : 1, rotate: saved && !reduced ? [0, -12, 0] : 0 }} transition={{ duration: reduced ? 0 : 0.24 }} className="inline-flex">
-          <Star size={17} aria-hidden="true" fill={saved ? "currentColor" : "none"} strokeWidth={1.7} />
-        </motion.span>
-        {labelled ? saved ? "Watching" : "Watch" : null}
-      </button>
+        className={overlay
+          ? "inline-flex size-8 items-center justify-center rounded-full bg-black/55 text-white ring-1 ring-white/15 backdrop-blur-md transition-colors hover:bg-black/70 disabled:opacity-40 motion-reduce:transition-none"
+          : labelled
+            ? `inline-flex h-10 items-center justify-center rounded-xl border px-3 text-xs font-medium transition-colors disabled:opacity-40 motion-reduce:transition-none sm:h-9 ${saved ? "border-brand/40 bg-brand-soft text-brand" : "border-line bg-card text-body hover:border-line-strong hover:text-ink"}`
+            : `inline-flex min-h-11 w-11 items-center justify-center rounded-xl transition-colors disabled:opacity-40 motion-reduce:transition-none ${saved ? "text-brand" : "text-muted hover:text-ink"}`}>
+        {/* the wider word sizes the button, so the bar beside it never shifts; the star and word stay centred together */}
+        {labelled ? (
+          <span className="grid justify-items-center">
+            <span className="col-start-1 row-start-1 inline-flex items-center gap-1.5">{star}{saved ? "Watching" : "Watch"}</span>
+            <span aria-hidden="true" className="invisible col-start-1 row-start-1 inline-flex items-center gap-1.5"><span className="size-[15px]" />Watching</span>
+          </span>
+        ) : star}
+      </motion.button>
       {message ? <span role="alert" className="absolute left-0 top-full z-20 w-52 rounded-xl border border-line-strong bg-paper p-3 text-xs text-warm-ink">{message}</span> : null}
       {storageError && labelled ? <span role="status" className="sr-only">Browser storage unavailable. Saved for this session only.</span> : null}
     </span>
diff --git a/app/src/components/launchpad/change-chip.test.ts b/app/src/components/launchpad/change-chip.test.ts
index b437d8ef..3b2f039d 100644
--- a/app/src/components/launchpad/change-chip.test.ts
+++ b/app/src/components/launchpad/change-chip.test.ts
@@ -57,11 +57,13 @@ for (const plain of [false, true]) {
       assert.ok(chip.props.className.includes(color));
       assert.ok(chip.props.className.includes("custom-chip"));
     }
-    for (const v of [0, -0]) {
+    // no move reads neutral in both styles: a green "+0.0%" would say up when nothing moved
+    for (const v of [0, -0, 0.0004, -0.0004]) {
       const chip = render({ v, plain });
-      assert.equal(label(chip), plain ? "0.0%" : "+0.0%");
-      assert.equal(chip.props.title, "0% since launch");
-      assert.ok(chip.props.className.includes(plain ? "text-muted" : "text-up"));
+      assert.equal(label(chip), "0.0%", String(v));
+      assert.equal(chip.props.title, `${v * 100}% since launch`);
+      assert.match(chip.props.className, /\btext-muted\b/);
+      assert.doesNotMatch(chip.props.className, /(?:text|bg)-(?:up|down)/);
     }
   });
 }
diff --git a/app/src/lib/launchpad/list-layout.test.ts b/app/src/lib/launchpad/list-layout.test.ts
new file mode 100644
index 00000000..f8631289
--- /dev/null
+++ b/app/src/lib/launchpad/list-layout.test.ts
@@ -0,0 +1,17 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { LAYOUT_COOKIE, layoutCookie, parseLayout } from "./list-layout.ts";
+
+test("only an exact cards value picks cards; anything else is the row list", () => {
+  assert.equal(parseLayout("cards"), "cards");
+  assert.equal(parseLayout("list"), "list");
+  for (const value of [undefined, null, "", "Cards", "grid", "cards;"]) assert.equal(parseLayout(value), "list", String(value));
+});
+
+test("the cookie lasts a year, covers the whole site and stays first-party", () => {
+  const cookie = layoutCookie("cards");
+  assert.ok(cookie.startsWith(`${LAYOUT_COOKIE}=cards;`));
+  assert.match(cookie, /; path=\/;/);
+  assert.match(cookie, /max-age=31536000/);
+  assert.match(cookie, /samesite=lax/);
+});
diff --git a/app/src/lib/launchpad/list-layout.ts b/app/src/lib/launchpad/list-layout.ts
new file mode 100644
index 00000000..e9995337
--- /dev/null
+++ b/app/src/lib/launchpad/list-layout.ts
@@ -0,0 +1,16 @@
+/**
+ * How the home market list draws its tokens: rows (the default) or cards. The choice lives in a first-party
+ * cookie so the server renders the same layout the visitor picked last time, with no swap after load.
+ */
+export type ListLayout = "list" | "cards";
+
+export const LAYOUT_COOKIE = "ol_layout";
+
+export function parseLayout(value: string | undefined | null): ListLayout {
+  return value === "cards" ? "cards" : "list";
+}
+
+/** The cookie string to write when the visitor picks a layout: a year, the whole site, never sent cross-site. */
+export function layoutCookie(layout: ListLayout): string {
+  return `${LAYOUT_COOKIE}=${layout}; path=/; max-age=31536000; samesite=lax`;
+}
diff --git a/app/src/lib/launchpad/museworld.test.ts b/app/src/lib/launchpad/museworld.test.ts
index 4e5c80e3..b43e9368 100644
--- a/app/src/lib/launchpad/museworld.test.ts
+++ b/app/src/lib/launchpad/museworld.test.ts
@@ -66,7 +66,7 @@ test("server: priced from its own GITLAWB pool, guarded by the average, fails so
 test("badge: Museworld blue with its logo, in every list and on the token page and share card", () => {
   assert.equal(MUSEWORLD_BLUE, "#0866FF");
   assert.ok(existsSync(path.join(import.meta.dirname, "../../../public", MUSEWORLD_LOGO_PATH)));
-  for (const f of ["LaunchRow.tsx", "LaunchTape.tsx", "MeDashboard.tsx", "TrendingStrip.tsx"]) assert.match(src(`../../components/launchpad/${f}`), /<QuoteBrandBadge quoteKey=\{/, f);
+  for (const f of ["LaunchRow.tsx", "LaunchCard.tsx", "LaunchTape.tsx", "MeDashboard.tsx", "TrendingStrip.tsx"]) assert.match(src(`../../components/launchpad/${f}`), /<QuoteBrandBadge quoteKey=\{/, f);
   assert.match(src("../../app/t/[chain]/[token]/page.tsx"), /<MuseworldBadge label="Paired with MUSEWORLD" \/>/);
   assert.deepEqual(quotePillOf("museworld", "MUSEWORLD"), { symbol: "MUSEWORLD", ticker: "MW", kind: "museworld" });
   assert.match(src("../../app/t/[chain]/[token]/opengraph-image.tsx"), /official · priced in/);
diff --git a/app/src/lib/launchpad/ranking.test.ts b/app/src/lib/launchpad/ranking.test.ts
index dcb87a6d..6e368e03 100644
--- a/app/src/lib/launchpad/ranking.test.ts
+++ b/app/src/lib/launchpad/ranking.test.ts
@@ -1,6 +1,6 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
-import { eligible1h, eligible24h, liveChip, liveTier, orderWithKing, rankTrending, stickyKing, trendingScore } from "./ranking.ts";
+import { eligible1h, eligible24h, liveChip, liveChipParts, liveTier, orderWithKing, rankTrending, stickyKing, trendingScore } from "./ranking.ts";
 
 const now = Date.parse("2026-09-07T03:00:00Z");
 const at = (minutesAgo: number) => new Date(now - minutesAgo * 60_000).toISOString();
@@ -100,3 +100,13 @@ test("orderWithKing puts the king first and keeps the rest in score order", () =
   assert.deepEqual(orderWithKing(items, "nope").map((i) => i.token), ["x", "y", "z"]);
   assert.deepEqual(orderWithKing(items, null).map((i) => i.token), ["x", "y", "z"]);
 });
+
+test("liveChipParts: the same facts as the chip, with the count set apart for the cards", () => {
+  assert.deepEqual(liveChipParts(row({ token: "a", traders_1h_ex: 14, traders_24h_ex: 20, last_outside_trade_at: at(21) }), now), { tier: "live", count: 14, label: "wallets this hour", when: "21m ago", more: null });
+  assert.deepEqual(liveChipParts(row({ token: "b", traders_24h_ex: 1, last_outside_trade_at: at(5 * 60) }), now), { tier: "live", count: 1, label: "wallet today", when: "5h ago", more: null });
+  assert.deepEqual(liveChipParts(row({ token: "c", block_time: at(4) }), now), { tier: "new", count: null, label: "just launched", when: "4m", more: null });
+  for (const r of [row({ token: "d", traders_1h_ex: 2, traders_24h_ex: 2 }), row({ token: "e", block_time: at(4), launcher_collapsed: 3 }), row({ token: "f", block_time: at(600), launcher_collapsed: 4 })]) {
+    const p = liveChipParts(r, now);
+    assert.equal([p.count === null ? p.label : `${p.count} ${p.label}`, p.when, p.more].filter(Boolean).join(" · "), liveChip(r, now).text, "the parts join back into the chip");
+  }
+});
diff --git a/app/src/lib/launchpad/ranking.ts b/app/src/lib/launchpad/ranking.ts
index 11868913..d800c5c5 100644
--- a/app/src/lib/launchpad/ranking.ts
+++ b/app/src/lib/launchpad/ranking.ts
@@ -41,20 +41,30 @@ export function liveTier(r: RankRow, nowMs: number): LiveTier {
   return ageMs < GRACE_HOURS * 3_600_000 ? "new" : "quiet";
 }
 
-function plural(n: number, word: string): string {
-  return `${n} ${word}${n === 1 ? "" : "s"}`;
-}
+/**
+ * The chip's pieces, for surfaces that set the count apart from its words (the market cards):
+ * live { count: 3, label: "wallets this hour", when: "12m ago" }, new { label: "just launched", when: "4m" },
+ * quiet { label: "no buyers yet" }. `more` notes launches folded into this row.
+ */
+export type ChipParts = { tier: LiveTier; count: number | null; label: string; when: string | null; more: string | null };
 
-/** Why a row sits where it sits on the live sort: "3 wallets this hour · 12m ago", "just launched · 4m", "no buyers yet · +4 from this wallet". */
-export function liveChip(r: RankRow, nowMs: number): { tier: LiveTier; text: string } {
+export function liveChipParts(r: RankRow, nowMs: number): ChipParts {
   const tier = liveTier(r, nowMs);
-  const more = r.launcher_collapsed ? ` · +${r.launcher_collapsed} from this wallet` : "";
+  const more = r.launcher_collapsed ? `+${r.launcher_collapsed} from this wallet` : null;
   if (tier === "live") {
-    const when = r.last_outside_trade_at ? ` · ${ago(r.last_outside_trade_at, nowMs)} ago` : "";
-    return { tier, text: r.traders_1h_ex > 0 ? `${plural(r.traders_1h_ex, "wallet")} this hour${when}` : `${plural(r.traders_24h_ex, "wallet")} today${when}` };
+    const hour = r.traders_1h_ex > 0;
+    const count = hour ? r.traders_1h_ex : r.traders_24h_ex;
+    return { tier, count, label: `${count === 1 ? "wallet" : "wallets"} ${hour ? "this hour" : "today"}`, when: r.last_outside_trade_at ? `${ago(r.last_outside_trade_at, nowMs)} ago` : null, more: null };
   }
-  if (tier === "new") return { tier, text: `just launched · ${ago(r.block_time, nowMs)}${more}` };
-  return { tier, text: `no buyers yet${more}` };
+  if (tier === "new") return { tier, count: null, label: "just launched", when: ago(r.block_time, nowMs), more };
+  return { tier, count: null, label: "no buyers yet", when: null, more };
+}
+
+/** Why a row sits where it sits on the live sort: "3 wallets this hour · 12m ago", "just launched · 4m", "no buyers yet · +4 from this wallet". */
+export function liveChip(r: RankRow, nowMs: number): { tier: LiveTier; text: string } {
+  const p = liveChipParts(r, nowMs);
+  const text = [p.count === null ? p.label : `${p.count} ${p.label}`, p.when, p.more].filter(Boolean).join(" · ");
+  return { tier: p.tier, text };
 }
 
 /* ────────────────────────────── trending strip ────────────────────────────── */
diff --git a/app/src/lib/launchpad/twig.test.ts b/app/src/lib/launchpad/twig.test.ts
index 8003b2ef..13db027b 100644
--- a/app/src/lib/launchpad/twig.test.ts
+++ b/app/src/lib/launchpad/twig.test.ts
@@ -98,7 +98,7 @@ test("badge: Twigpine tile in every list, the form, the token page and the share
   assert.ok(existsSync(path.join(import.meta.dirname, "../../../public", TWIG_LOGO_PATH)));
   const brand = src("../../components/launchpad/MuseworldBadge.tsx");
   assert.match(brand, /if \(isTwigQuote\(quoteKey\)\) return "twig";/);
-  assert.match(brand, /twig: <TwigBadge size=\{size\} className=\{className\} \/>/);
+  assert.match(brand, /twig: <TwigBadge size=\{size\} className=\{className\}(?: collapse=\{collapse\})? \/>/);
   assert.match(brand, /return brandOf\(quoteKey\) !== null;/, "hasQuoteBrandBadge reads the same list QuoteBrandBadge renders from");
   for (const f of ["LaunchRow.tsx", "LaunchTape.tsx", "MeDashboard.tsx", "TrendingStrip.tsx"]) assert.match(src(`../../components/launchpad/${f}`), /<QuoteBrandBadge quoteKey=\{/, f);
   assert.match(src("../../components/launchpad/TrendingStrip.tsx"), /hasQuoteBrandBadge\(row\.quote_key\)/, "TWIG rows show the badge, not the bare symbol");