diff --git a/apps/tangle-cloud/src/components/RequireWallet.tsx b/apps/tangle-cloud/src/components/RequireWallet.tsx
index 4982f89cf..ca182eb0b 100644
--- a/apps/tangle-cloud/src/components/RequireWallet.tsx
+++ b/apps/tangle-cloud/src/components/RequireWallet.tsx
@@ -32,55 +32,35 @@ const RequireWallet: FC<Props> = ({
       variant="sandbox"
       className="w-full overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
     >
-      <CardContent className="relative p-6 md:p-8">
+      <CardContent className="relative p-6 md:p-7">
         <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_18%_12%,rgba(99,102,241,0.20),transparent_34%),radial-gradient(circle_at_84%_10%,rgba(16,185,129,0.10),transparent_30%)]" />
 
-        <div className="relative grid gap-6 lg:grid-cols-[1fr_260px] lg:items-center">
-          <div>
+        <div className="relative flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0 max-w-3xl">
             <p className="font-bold text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
               {eyebrow}
             </p>
-            <div className="mt-3 font-display font-extrabold text-foreground text-xl leading-tight tracking-tight md:text-2xl">
+            <div className="mt-2 font-display font-extrabold text-foreground text-xl leading-tight tracking-tight md:text-2xl">
               {title}
             </div>
-            <p className="mt-3 max-w-xl text-muted-foreground text-sm leading-6">
+            <p className="mt-2 text-muted-foreground text-sm leading-6">
               {description}
             </p>
             {checks.length > 0 && (
-              <div className="mt-5 grid gap-2 sm:grid-cols-3">
+              <div className="mt-4 flex flex-wrap gap-2">
                 {checks.map((check) => (
-                  <div
+                  <span
                     key={check}
-                    className="rounded-lg border border-border bg-background/40 px-3 py-2 text-foreground text-xs"
+                    className="rounded-full border border-border bg-background/40 px-3 py-1 text-foreground text-xs"
                   >
                     {check}
-                  </div>
+                  </span>
                 ))}
               </div>
             )}
           </div>
 
-          <div className="rounded-xl border border-border bg-background/50 p-4">
-            <div className="grid grid-cols-2 gap-2">
-              {['Account', 'Network', 'Tx', 'History'].map((label) => (
-                <div
-                  key={label}
-                  className="rounded-lg border border-border bg-card/80 p-3"
-                >
-                  <p className="text-muted-foreground text-[10px] uppercase tracking-wider">
-                    {label}
-                  </p>
-                  <p className="mt-1 font-semibold text-foreground text-sm">
-                    Locked
-                  </p>
-                </div>
-              ))}
-            </div>
-
-            <div className="mt-4">
-              <ConnectWalletButton className="tangle-cloud-wallet-action" />
-            </div>
-          </div>
+          <ConnectWalletButton className="tangle-cloud-wallet-action shrink-0" />
         </div>
       </CardContent>
     </Card>
diff --git a/apps/tangle-cloud/src/components/Sidebar.tsx b/apps/tangle-cloud/src/components/Sidebar.tsx
index 4eb4d649d..634d42918 100644
--- a/apps/tangle-cloud/src/components/Sidebar.tsx
+++ b/apps/tangle-cloud/src/components/Sidebar.tsx
@@ -115,17 +115,11 @@ const Sidebar: FC<Props> = ({ isExpandedByDefault, onExpandedChange }) => {
     <>
       <aside
         className={twMerge(
-          'fixed bottom-0 left-0 top-0 z-50 hidden shrink-0 border-border border-r bg-background transition-[width] duration-200 lg:flex lg:flex-col',
+          'group/sidebar fixed bottom-0 left-0 top-0 z-50 hidden shrink-0 border-border border-r bg-background transition-[width] duration-200 lg:flex lg:flex-col',
           isDesktopExpanded ? 'w-64' : 'w-16',
         )}
       >
         <SidebarBrand isExpanded={isDesktopExpanded} />
-        <div className="px-2 pb-3">
-          <SidebarCollapseButton
-            isExpanded={isDesktopExpanded}
-            onClick={toggleDesktopExpanded}
-          />
-        </div>
         <SidebarNav
           items={SIDEBAR_ITEMS}
           pathname={pathname}
@@ -138,6 +132,11 @@ const Sidebar: FC<Props> = ({ isExpandedByDefault, onExpandedChange }) => {
             isExpanded={isDesktopExpanded}
           />
         </div>
+
+        <SidebarCollapseButton
+          isExpanded={isDesktopExpanded}
+          onClick={toggleDesktopExpanded}
+        />
       </aside>
 
       <div className="fixed left-4 top-2 z-[45] lg:hidden">
@@ -224,6 +223,10 @@ const SidebarNav = ({
   </nav>
 );
 
+// Pinned to the sidebar's right edge so it's affordance-clear (matches VS
+// Code / Linear / Vercel patterns) and never competes with the nav stack
+// for the "what's a nav item" mental model. Floats over the border so it
+// stays visible whether the sidebar is expanded (w-64) or collapsed (w-16).
 const SidebarCollapseButton = ({
   isExpanded,
   onClick,
@@ -233,15 +236,23 @@ const SidebarCollapseButton = ({
 }) => (
   <button
     type="button"
-    className={twMerge(
-      'group flex h-10 items-center rounded-md border border-border bg-muted/20 text-xs font-semibold text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground',
-      isExpanded ? 'w-full justify-between px-3' : 'w-12 justify-center',
-    )}
-    aria-label={isExpanded ? 'Collapse navigation' : 'Expand navigation labels'}
     onClick={onClick}
+    aria-label={isExpanded ? 'Collapse sidebar' : 'Expand sidebar'}
+    className="absolute -right-3 top-20 z-10 hidden h-6 w-6 items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-[var(--shadow-card)] transition-opacity hover:text-foreground focus:opacity-100 group-hover/sidebar:opacity-100 group-focus-within/sidebar:opacity-100 lg:inline-flex"
   >
-    {isExpanded && <span>Collapse</span>}
-    <span aria-hidden>{isExpanded ? '‹' : '›'}</span>
+    <svg
+      aria-hidden
+      viewBox="0 0 16 16"
+      className={twMerge(
+        'h-3 w-3 fill-none stroke-current transition-transform',
+        isExpanded ? '' : 'rotate-180',
+      )}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M10 4 6 8l4 4" />
+    </svg>
   </button>
 );
 
diff --git a/apps/tangle-cloud/src/pages/earnings/page.tsx b/apps/tangle-cloud/src/pages/earnings/page.tsx
index 65e75ce14..fd95f5bba 100644
--- a/apps/tangle-cloud/src/pages/earnings/page.tsx
+++ b/apps/tangle-cloud/src/pages/earnings/page.tsx
@@ -47,31 +47,7 @@ const EarningsPage: FC = () => {
   if (!isConnected) {
     return (
       <div className="space-y-6">
-        <Card
-          variant="sandbox"
-          className="cloud-hero-card cloud-compact-header overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
-        >
-          <CardContent className="relative p-4 md:p-5">
-            <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_12%_8%,rgba(99,102,241,0.18),transparent_32%),radial-gradient(circle_at_86%_12%,rgba(16,185,129,0.10),transparent_28%)]" />
-            <div className="relative grid gap-5 xl:grid-cols-[minmax(0,1fr)_420px] xl:items-center">
-              <div>
-                <h1 className="font-display font-extrabold text-3xl text-foreground leading-[1.05] tracking-[-0.035em] sm:text-4xl">
-                  Publisher earnings
-                </h1>
-                <p className="mt-3 max-w-2xl text-muted-foreground text-sm leading-relaxed">
-                  Track blueprint payout totals and indexed payment events for
-                  the connected publisher wallet.
-                </p>
-              </div>
-
-              <div className="grid grid-cols-3 gap-2">
-                <HeroMetric label="Assets" value="Grouped" />
-                <HeroMetric label="Events" value="Indexed" />
-                <HeroMetric label="Explorer" value="Linked" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        <EarningsHero />
 
         <RequireWallet
           eyebrow="Earnings"
@@ -79,37 +55,13 @@ const EarningsPage: FC = () => {
           description="Load publisher balances, payout totals, and indexed payment events for the connected wallet."
           checks={['Token totals', 'Payout events', 'Explorer links']}
         />
-        <EarningsPreviewPanel />
       </div>
     );
   }
 
   return (
     <div className="space-y-6">
-      <Card
-        variant="sandbox"
-        className="cloud-hero-card cloud-compact-header overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
-      >
-        <CardContent className="relative p-4 md:p-5">
-          <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_12%_8%,rgba(99,102,241,0.18),transparent_32%),radial-gradient(circle_at_86%_12%,rgba(16,185,129,0.10),transparent_28%)]" />
-          <div className="relative grid gap-5 xl:grid-cols-[minmax(0,1fr)_420px] xl:items-center">
-            <div>
-              <h1 className="font-display font-extrabold text-3xl text-foreground leading-[1.05] tracking-[-0.035em] sm:text-4xl">
-                Publisher earnings
-              </h1>
-              <p className="mt-3 max-w-2xl text-muted-foreground text-sm leading-relaxed">
-                Totals are derived from indexed on-chain payout events.
-              </p>
-            </div>
-
-            <div className="grid grid-cols-3 gap-2">
-              <HeroMetric label="Assets" value="Live" />
-              <HeroMetric label="Events" value="Exact" />
-              <HeroMetric label="Explorer" value="Linked" />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <EarningsHero />
 
       {isLoading ? <EarningsLoadingState /> : null}
       {!isLoading && isUnsupportedSchema && data ? (
@@ -157,85 +109,22 @@ const EarningsPage: FC = () => {
 
 export default EarningsPage;
 
-const EarningsPreviewPanel = () => (
-  <Card variant="sandbox" className="border-border bg-card">
-    <CardContent className="space-y-5 p-5">
-      <div className="grid gap-4 md:grid-cols-3">
-        <PreviewItem
-          label="Balances"
-          title="Token totals"
-          description="Publisher payouts grouped by asset from indexed payment events."
-        />
-        <PreviewItem
-          label="Ledger"
-          title="Payout events"
-          description="Exact transaction records with service, asset, and explorer context."
-        />
-        <PreviewItem
-          label="Operations"
-          title="Withdrawal planning"
-          description="Use the ledger to reconcile revenue from deployed blueprint services."
-        />
-      </div>
-
-      <div className="overflow-hidden rounded-xl border border-border bg-background/40">
-        <div className="grid grid-cols-[1fr_1fr_1fr_1fr] border-border border-b px-4 py-3 font-semibold text-muted-foreground text-[10px] uppercase tracking-wider">
-          <span>Asset</span>
-          <span>Earned</span>
-          <span>Last payout</span>
-          <span>Status</span>
-        </div>
-        {[
-          ['TNT', 'Connect wallet', 'Indexed event', 'Locked'],
-          ['USDC', 'Connect wallet', 'Service payout', 'Locked'],
-          ['ETH', 'Connect wallet', 'Explorer link', 'Locked'],
-        ].map(([asset, earned, payout, status]) => (
-          <div
-            key={asset}
-            className="grid grid-cols-[1fr_1fr_1fr_1fr] border-border border-b px-4 py-3 text-sm last:border-b-0"
-          >
-            <span className="font-semibold text-foreground">{asset}</span>
-            <span className="text-muted-foreground">{earned}</span>
-            <span className="text-muted-foreground">{payout}</span>
-            <span className="font-semibold text-muted-foreground">
-              {status}
-            </span>
-          </div>
-        ))}
+const EarningsHero = () => (
+  <Card
+    variant="sandbox"
+    className="cloud-hero-card cloud-compact-header overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
+  >
+    <CardContent className="relative p-4 md:p-5">
+      <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_12%_8%,rgba(99,102,241,0.18),transparent_32%),radial-gradient(circle_at_86%_12%,rgba(16,185,129,0.10),transparent_28%)]" />
+      <div className="relative">
+        <h1 className="font-display font-extrabold text-3xl text-foreground leading-[1.05] tracking-[-0.035em] sm:text-4xl">
+          Publisher earnings
+        </h1>
+        <p className="mt-3 max-w-2xl text-muted-foreground text-sm leading-relaxed">
+          Track blueprint payout totals and indexed payment events for the
+          connected publisher wallet.
+        </p>
       </div>
     </CardContent>
   </Card>
 );
-
-const PreviewItem = ({
-  label,
-  title,
-  description,
-}: {
-  label: string;
-  title: string;
-  description: string;
-}) => (
-  <div className="rounded-xl border border-border bg-muted/30 p-4">
-    <p className="font-semibold text-muted-foreground text-[10px] uppercase tracking-wider">
-      {label}
-    </p>
-    <div className="mt-2 font-display font-bold text-foreground text-base">
-      {title}
-    </div>
-    <p className="mt-2 text-muted-foreground text-sm leading-relaxed">
-      {description}
-    </p>
-  </div>
-);
-
-const HeroMetric = ({ label, value }: { label: string; value: string }) => (
-  <div className="rounded-md border border-border bg-card/70 p-2.5">
-    <p className="font-medium text-muted-foreground text-[10px] uppercase tracking-wider">
-      {label}
-    </p>
-    <p className="mt-0.5 font-display font-bold text-foreground text-base">
-      {value}
-    </p>
-  </div>
-);
diff --git a/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx b/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx
index a8fbeebd4..23dd84609 100644
--- a/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx
+++ b/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx
@@ -120,45 +120,30 @@ export const AccountStatsCard: FC<AccountStatsCardProps> = (props) => {
           rootProps?.className,
         )}
       >
-        <CardContent className="grid gap-6 p-5 md:grid-cols-[1fr_220px] md:p-6">
-          <div className="flex min-w-0 gap-4">
+        <CardContent className="flex h-full flex-col gap-5 p-5 md:p-6">
+          <div className="flex min-w-0 items-start gap-4">
             <Avatar className="h-12 w-12 border border-border bg-muted">
               <AvatarFallback className="font-display font-bold text-foreground">
                 TC
               </AvatarFallback>
             </Avatar>
 
-            <div className="min-w-0">
+            <div className="min-w-0 flex-1">
               <p className="font-semibold text-muted-foreground text-xs uppercase tracking-wider">
                 Account
               </p>
               <div className="mt-2 font-display font-bold text-foreground text-lg tracking-tight">
-                Wallet required
+                Connect a wallet to load your account
               </div>
               <p className="mt-2 max-w-xl text-muted-foreground text-sm leading-relaxed">
                 Connect to load deployed services, operator registrations, and
-                account-scoped lifecycle events.
+                account-scoped lifecycle events. Public catalog and operator
+                registry data load below without a wallet.
               </p>
-              <div className="mt-5">
-                <ConnectWalletButton className="tangle-cloud-wallet-action" />
-              </div>
             </div>
           </div>
-
-          <div className="grid grid-cols-2 gap-2">
-            {['Services', 'Approvals', 'Jobs', 'Balances'].map((label) => (
-              <div
-                key={label}
-                className="rounded-lg border border-border bg-muted/30 p-3"
-              >
-                <p className="text-muted-foreground text-[10px] uppercase tracking-wider">
-                  {label}
-                </p>
-                <p className="mt-1 font-semibold text-foreground text-sm">
-                  Locked
-                </p>
-              </div>
-            ))}
+          <div className="mt-auto">
+            <ConnectWalletButton className="tangle-cloud-wallet-action" />
           </div>
         </CardContent>
       </Card>
diff --git a/apps/tangle-cloud/src/pages/instances/TotalValueLocked/index.tsx b/apps/tangle-cloud/src/pages/instances/TotalValueLocked/index.tsx
index 7f6161bb4..8f520aa8c 100644
--- a/apps/tangle-cloud/src/pages/instances/TotalValueLocked/index.tsx
+++ b/apps/tangle-cloud/src/pages/instances/TotalValueLocked/index.tsx
@@ -4,82 +4,46 @@ import {
   Card,
   CardContent,
   Skeleton,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
 } from '@tangle-network/sandbox-ui/primitives';
-import { useState } from 'react';
 import { useAccount } from 'wagmi';
 import { useStakingOverview } from '@tangle-network/tangle-shared-ui/data/staking';
 import { formatUnits } from 'viem';
 import { Link } from 'react-router';
+import ConnectWalletButton from '@tangle-network/tangle-shared-ui/components/ConnectWalletButton';
 import { TangleDAppPagePath } from '../../../types';
 
-enum TotalValueLockedTab {
-  TVL = 'tvl',
-}
-
+// Wallet-scoped deposits panel. Previously titled "Total Value Locked" which
+// implied a network-wide metric — but the underlying hook (useStakingOverview)
+// returns only the connected wallet's deposits. Renamed to "My Deposits" so
+// the heading matches the data.
 export const TotalValueLockedTabs = () => {
-  const [selectedTab, setSelectedTab] = useState(TotalValueLockedTab.TVL);
   const { isConnected } = useAccount();
 
   return (
-    <Tabs
-      value={selectedTab}
-      onValueChange={(tab: string) =>
-        setSelectedTab(tab as TotalValueLockedTab)
-      }
-      className="w-full space-y-5"
-    >
-      <TabsList className="flex h-auto w-full justify-start rounded-lg border border-border bg-card p-1 shadow-[var(--shadow-card)]">
-        <TabsTrigger
-          value={TotalValueLockedTab.TVL}
-          className="gap-2 rounded-md px-3 py-2 font-semibold text-sm data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
-        >
-          <LockFillIcon className="h-4 w-4 fill-current" />
-          Total Value Locked
-        </TabsTrigger>
-      </TabsList>
-
-      <TabsContent value={TotalValueLockedTab.TVL} className="w-full">
-        <Card variant="sandbox">
-          <CardContent className="p-5">
-            {!isConnected ? <DisconnectedTvlState /> : <ConnectedTvlState />}
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </Tabs>
+    <Card variant="sandbox" className="w-full">
+      <CardContent className="space-y-4 p-5">
+        <div className="flex items-center gap-2 border-b border-border pb-3 font-display font-bold text-foreground text-sm tracking-tight">
+          <LockFillIcon className="h-4 w-4 fill-current text-primary" />
+          My deposits
+        </div>
+        {!isConnected ? <DisconnectedTvlState /> : <ConnectedTvlState />}
+      </CardContent>
+    </Card>
   );
 };
 
 const DisconnectedTvlState = () => (
-  <div className="grid min-h-56 gap-4 rounded-xl border border-dashed border-border bg-muted/30 p-6 md:grid-cols-[1fr_260px] md:items-center">
-    <div>
-      <p className="font-semibold text-muted-foreground text-xs uppercase tracking-wider">
-        Wallet required
-      </p>
-      <div className="mt-2 font-display font-bold text-foreground text-lg">
-        Connect to load locked value
+  <div className="flex flex-col items-start gap-3 rounded-lg border border-dashed border-border bg-muted/20 p-5 sm:flex-row sm:items-center sm:justify-between">
+    <div className="min-w-0">
+      <div className="font-display font-bold text-foreground text-base tracking-tight">
+        Connect a wallet to view your deposits
       </div>
-      <p className="mt-2 max-w-xl text-muted-foreground text-sm leading-relaxed">
-        Deposits, running services, and operator exposure are shown from the
-        connected account.
+      <p className="mt-1 max-w-xl text-muted-foreground text-sm leading-relaxed">
+        Personal deposits, running services, and operator exposure load once a
+        wallet is connected. Public chain data on this page loads without one.
       </p>
     </div>
-    <div className="grid grid-cols-2 gap-2">
-      {['Deposits', 'Services', 'Exposure', 'Claims'].map((label) => (
-        <div
-          key={label}
-          className="rounded-lg border border-border bg-card/80 p-3"
-        >
-          <p className="text-muted-foreground text-[10px] uppercase tracking-wider">
-            {label}
-          </p>
-          <p className="mt-1 font-semibold text-foreground text-sm">Locked</p>
-        </div>
-      ))}
-    </div>
+    <ConnectWalletButton className="tangle-cloud-wallet-action shrink-0" />
   </div>
 );
 
diff --git a/apps/tangle-cloud/src/pages/instances/page.tsx b/apps/tangle-cloud/src/pages/instances/page.tsx
index ccaed0f04..713cfbdda 100644
--- a/apps/tangle-cloud/src/pages/instances/page.tsx
+++ b/apps/tangle-cloud/src/pages/instances/page.tsx
@@ -16,22 +16,14 @@ const Page = () => {
       >
         <CardContent className="relative p-4 md:p-5">
           <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_12%_8%,rgba(99,102,241,0.18),transparent_32%),radial-gradient(circle_at_86%_12%,rgba(16,185,129,0.10),transparent_28%)]" />
-          <div className="relative grid gap-5 xl:grid-cols-[minmax(0,1fr)_420px] xl:items-center">
-            <div>
-              <h1 className="font-display font-extrabold text-3xl text-foreground leading-[1.05] tracking-[-0.035em] sm:text-4xl">
-                Instances
-              </h1>
-              <p className="mt-3 max-w-2xl text-muted-foreground text-sm leading-relaxed">
-                Monitor service instances, operator approvals, job records, and
-                account balances.
-              </p>
-            </div>
-
-            <div className="grid grid-cols-3 gap-2">
-              <HeroMetric label="Services" value="Live" />
-              <HeroMetric label="Orders" value="Tracked" />
-              <HeroMetric label="Wallet" value="Scoped" />
-            </div>
+          <div className="relative">
+            <h1 className="font-display font-extrabold text-3xl text-foreground leading-[1.05] tracking-[-0.035em] sm:text-4xl">
+              Instances
+            </h1>
+            <p className="mt-3 max-w-2xl text-muted-foreground text-sm leading-relaxed">
+              Monitor service instances, operator approvals, job records, and
+              account balances.
+            </p>
           </div>
         </CardContent>
       </Card>
@@ -41,7 +33,7 @@ const Page = () => {
         setRefreshTrigger={setRefreshTrigger}
       />
 
-      <div className="grid gap-5 xl:grid-cols-[1.05fr_0.95fr] xl:items-start">
+      <div className="grid gap-5 xl:grid-cols-2 xl:auto-rows-fr xl:items-stretch">
         <AccountStatsCard refreshTrigger={refreshTrigger} />
         <InstructionCard />
       </div>
@@ -51,14 +43,3 @@ const Page = () => {
 };
 
 export default Page;
-
-const HeroMetric = ({ label, value }: { label: string; value: string }) => (
-  <div className="rounded-md border border-border bg-card/70 p-2.5">
-    <p className="font-medium text-muted-foreground text-[10px] uppercase tracking-wider">
-      {label}
-    </p>
-    <p className="mt-0.5 font-display font-bold text-foreground text-base">
-      {value}
-    </p>
-  </div>
-);
diff --git a/apps/tangle-cloud/src/pages/rewards/page.tsx b/apps/tangle-cloud/src/pages/rewards/page.tsx
index ad1302057..ee5da966d 100644
--- a/apps/tangle-cloud/src/pages/rewards/page.tsx
+++ b/apps/tangle-cloud/src/pages/rewards/page.tsx
@@ -302,30 +302,7 @@ const RewardsPage: FC = () => {
   if (!isConnected) {
     return (
       <div className="space-y-6">
-        <Card
-          variant="sandbox"
-          className="cloud-hero-card cloud-compact-header overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
-        >
-          <CardContent className="relative p-4 md:p-5">
-            <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_12%_8%,rgba(99,102,241,0.18),transparent_32%),radial-gradient(circle_at_86%_12%,rgba(16,185,129,0.10),transparent_28%)]" />
-            <div className="relative grid gap-5 xl:grid-cols-[minmax(0,1fr)_420px] xl:items-center">
-              <div>
-                <h1 className="font-display font-extrabold text-3xl text-foreground leading-[1.05] tracking-[-0.035em] sm:text-4xl">
-                  Rewards
-                </h1>
-                <p className="mt-3 max-w-2xl text-muted-foreground text-sm leading-relaxed">
-                  Claim operator and delegator rewards from the active network.
-                </p>
-              </div>
-
-              <div className="grid grid-cols-3 gap-2">
-                <HeroMetric label="Balances" value="Indexed" />
-                <HeroMetric label="Claims" value="On-chain" />
-                <HeroMetric label="History" value="Auditable" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        <RewardsHero />
 
         <RequireWallet
           eyebrow="Rewards"
@@ -333,38 +310,13 @@ const RewardsPage: FC = () => {
           description="Load pending balances, claimable assets, and claim history for the connected account."
           checks={['Pending rewards', 'Claimable assets', 'Claim history']}
         />
-        <RewardsPreviewPanel />
       </div>
     );
   }
 
   return (
     <div className="space-y-6">
-      <Card
-        variant="sandbox"
-        className="cloud-hero-card cloud-compact-header overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
-      >
-        <CardContent className="relative p-4 md:p-5">
-          <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_12%_8%,rgba(99,102,241,0.18),transparent_32%),radial-gradient(circle_at_86%_12%,rgba(16,185,129,0.10),transparent_28%)]" />
-          <div className="relative grid gap-5 xl:grid-cols-[minmax(0,1fr)_420px] xl:items-center">
-            <div>
-              <h1 className="font-display font-extrabold text-3xl text-foreground leading-[1.05] tracking-[-0.035em] sm:text-4xl">
-                Rewards
-              </h1>
-              <p className="mt-3 max-w-2xl text-muted-foreground text-sm leading-relaxed">
-                Pending balances come from contract state. Claim history comes
-                from indexed on-chain events.
-              </p>
-            </div>
-
-            <div className="grid grid-cols-3 gap-2">
-              <HeroMetric label="Balances" value="Live" />
-              <HeroMetric label="Claims" value="Signed" />
-              <HeroMetric label="History" value="Indexed" />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <RewardsHero />
 
       {configuredEndpoint && (
         <Card
@@ -562,89 +514,26 @@ const PendingRewardsTable: FC<PendingRewardsTableProps> = ({
   );
 };
 
-const RewardsPreviewPanel = () => (
-  <Card variant="sandbox" className="border-border bg-card">
-    <CardContent className="space-y-5 p-5">
-      <div className="grid gap-4 md:grid-cols-3">
-        <PreviewItem
-          label="Pending"
-          title="Reward balances"
-          description="Token balances available to claim after indexing catches up."
-        />
-        <PreviewItem
-          label="Action"
-          title="Claim transactions"
-          description="Claim one asset, selected assets, or every claimable balance."
-        />
-        <PreviewItem
-          label="Audit"
-          title="Claim history"
-          description="Indexed transaction history with explorer links where available."
-        />
-      </div>
-
-      <div className="overflow-hidden rounded-xl border border-border bg-background/40">
-        <div className="grid grid-cols-[1fr_1fr_1fr_1fr] border-border border-b px-4 py-3 font-semibold text-muted-foreground text-[10px] uppercase tracking-wider">
-          <span>Asset</span>
-          <span>Claimable</span>
-          <span>Action</span>
-          <span>History</span>
-        </div>
-        {[
-          ['TNT', 'Connect wallet', 'Claim token', 'Locked'],
-          ['USDC', 'Connect wallet', 'Claim selected', 'Locked'],
-          ['ETH', 'Connect wallet', 'Claim all', 'Locked'],
-        ].map(([asset, amount, action, history]) => (
-          <div
-            key={asset}
-            className="grid grid-cols-[1fr_1fr_1fr_1fr] border-border border-b px-4 py-3 text-sm last:border-b-0"
-          >
-            <span className="font-semibold text-foreground">{asset}</span>
-            <span className="text-muted-foreground">{amount}</span>
-            <span className="text-muted-foreground">{action}</span>
-            <span className="font-semibold text-muted-foreground">
-              {history}
-            </span>
-          </div>
-        ))}
+const RewardsHero = () => (
+  <Card
+    variant="sandbox"
+    className="cloud-hero-card cloud-compact-header overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
+  >
+    <CardContent className="relative p-4 md:p-5">
+      <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_12%_8%,rgba(99,102,241,0.18),transparent_32%),radial-gradient(circle_at_86%_12%,rgba(16,185,129,0.10),transparent_28%)]" />
+      <div className="relative">
+        <h1 className="font-display font-extrabold text-3xl text-foreground leading-[1.05] tracking-[-0.035em] sm:text-4xl">
+          Rewards
+        </h1>
+        <p className="mt-3 max-w-2xl text-muted-foreground text-sm leading-relaxed">
+          Pending balances come from contract state; claim history comes from
+          indexed on-chain events.
+        </p>
       </div>
     </CardContent>
   </Card>
 );
 
-const PreviewItem = ({
-  label,
-  title,
-  description,
-}: {
-  label: string;
-  title: string;
-  description: string;
-}) => (
-  <div className="rounded-xl border border-border bg-muted/30 p-4">
-    <p className="font-semibold text-muted-foreground text-[10px] uppercase tracking-wider">
-      {label}
-    </p>
-    <div className="mt-2 font-display font-bold text-foreground text-base">
-      {title}
-    </div>
-    <p className="mt-2 text-muted-foreground text-sm leading-relaxed">
-      {description}
-    </p>
-  </div>
-);
-
-const HeroMetric = ({ label, value }: { label: string; value: string }) => (
-  <div className="rounded-md border border-border bg-card/70 p-2.5">
-    <p className="font-medium text-muted-foreground text-[10px] uppercase tracking-wider">
-      {label}
-    </p>
-    <p className="mt-0.5 font-display font-bold text-foreground text-base">
-      {value}
-    </p>
-  </div>
-);
-
 const PendingAssetCell: FC<{ token: Address; addressExplorerUrl?: string }> = ({
   token,
   addressExplorerUrl,