diff --git a/web/bun.lock b/web/bun.lock
index d5330ab..5dc891f 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -5,6 +5,7 @@
     "": {
       "name": "untitledui-vite-starter-kit",
       "dependencies": {
+        "@hookform/resolvers": "^5.2.2",
         "@solana/kit": "^6.1.0",
         "@solana/react": "^6.1.0",
         "@tailwindcss/typography": "^0.5.19",
@@ -20,6 +21,7 @@
         "react-aria": "^3.46.0",
         "react-aria-components": "^1.15.1",
         "react-dom": "^19.2.3",
+        "react-hook-form": "^7.71.2",
         "react-hotkeys-hook": "^5.2.3",
         "react-router": "^7.13.0",
         "solana-kite": "^3.2.1",
@@ -27,6 +29,7 @@
         "tailwindcss": "^4.1.18",
         "tailwindcss-animate": "^1.0.7",
         "tailwindcss-react-aria-components": "^2.0.1",
+        "zod": "^4.3.6",
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.18",
@@ -164,6 +167,8 @@
 
     "@formatjs/intl-localematcher": ["@formatjs/intl-localematcher@0.6.2", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA=="],
 
+    "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
@@ -560,6 +565,8 @@
 
     "@solana/wallet-standard-features": ["@solana/wallet-standard-features@1.3.0", "", { "dependencies": { "@wallet-standard/base": "^1.1.0", "@wallet-standard/features": "^1.1.0" } }, "sha512-ZhpZtD+4VArf6RPitsVExvgkF+nGghd1rzPjd97GmBximpnt1rsUxMOEyoIEuH3XBxPyNB6Us7ha7RHWQR+abg=="],
 
+    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
+
     "@swc/core": ["@swc/core@1.15.10", "", { "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.25" }, "optionalDependencies": { "@swc/core-darwin-arm64": "1.15.10", "@swc/core-darwin-x64": "1.15.10", "@swc/core-linux-arm-gnueabihf": "1.15.10", "@swc/core-linux-arm64-gnu": "1.15.10", "@swc/core-linux-arm64-musl": "1.15.10", "@swc/core-linux-x64-gnu": "1.15.10", "@swc/core-linux-x64-musl": "1.15.10", "@swc/core-win32-arm64-msvc": "1.15.10", "@swc/core-win32-ia32-msvc": "1.15.10", "@swc/core-win32-x64-msvc": "1.15.10" }, "peerDependencies": { "@swc/helpers": ">=0.5.17" }, "optionalPeers": ["@swc/helpers"] }, "sha512-udNofxftduMUEv7nqahl2nvodCiCDQ4Ge0ebzsEm6P8s0RC2tBM0Hqx0nNF5J/6t9uagFJyWIDjXy3IIWMHDJw=="],
 
     "@swc/core-darwin-arm64": ["@swc/core-darwin-arm64@1.15.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-U72pGqmJYbjrLhMndIemZ7u9Q9owcJczGxwtfJlz/WwMaGYAV/g4nkGiUVk/+QSX8sFCAjanovcU1IUsP2YulA=="],
@@ -1254,6 +1261,8 @@
 
     "react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],
 
+    "react-hook-form": ["react-hook-form@7.71.2", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA=="],
+
     "react-hotkeys-hook": ["react-hotkeys-hook@5.2.3", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-Q27F8EuImYJOVSXAjSQrQPj9cx4GSNY+WdSdk5tSNN085H8/a00W6LZp0PrytEDwF6iT0pGTJeVEDKPRpEK2Bg=="],
 
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
diff --git a/web/index.html b/web/index.html
index 467b21e..82c2fab 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Samizdat — Decentralized Physical Infrastructure for permissionless advertising on Solana" />
+    <meta
+      name="description"
+      content="Samizdat — Decentralized Physical Infrastructure for permissionless advertising on Solana"
+    />
     <meta name="theme-color" content="#FF4D00" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/web/package.json b/web/package.json
index c219f18..4f348d0 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,6 +13,7 @@
     "format:fix": "bunx prettier --write ."
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@solana/kit": "^6.1.0",
     "@solana/react": "^6.1.0",
     "@tailwindcss/typography": "^0.5.19",
@@ -28,13 +29,15 @@
     "react-aria": "^3.46.0",
     "react-aria-components": "^1.15.1",
     "react-dom": "^19.2.3",
+    "react-hook-form": "^7.71.2",
     "react-hotkeys-hook": "^5.2.3",
     "react-router": "^7.13.0",
     "solana-kite": "^3.2.1",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-react-aria-components": "^2.0.1"
+    "tailwindcss-react-aria-components": "^2.0.1",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
diff --git a/web/src/components/application/app-layout.tsx b/web/src/components/application/app-layout.tsx
index b393737..77e4e79 100644
--- a/web/src/components/application/app-layout.tsx
+++ b/web/src/components/application/app-layout.tsx
@@ -1,12 +1,7 @@
 import type { FC } from 'react';
-import { Outlet, useLocation } from 'react-router';
+import { Link, Outlet, useLocation } from 'react-router';
 
-import {
-  Globe05,
-  Monitor04,
-  Send01,
-  Signal01,
-} from '@untitledui/icons';
+import { Globe05, Monitor04, Send01, Signal01 } from '@untitledui/icons';
 
 import { ConnectWalletMenu } from '@/components/application/connect-wallet-menu';
 import { cx } from '@/utils/cx';
@@ -33,26 +28,24 @@ export function AppLayout() {
       <header className="sticky top-0 z-50 border-b border-secondary bg-primary/80 backdrop-blur-md">
         <div className="mx-auto flex h-14 max-w-360 items-center justify-between px-4 md:px-8">
           {/* Logo */}
-          <a href="/" className="flex items-center gap-2.5">
+          <Link to="/" className="flex items-center gap-2.5">
             <img src="/samizdat/logo.svg" alt="Samizdat" className="size-8" />
             <span className="font-mono text-xl tracking-tight text-primary">
               samizdat
             </span>
-          </a>
+          </Link>
 
           {/* Nav */}
           <nav className="hidden md:block">
             <ul className="flex items-center gap-1">
               {NAV_ITEMS.map(item => {
                 const isActive =
-                  item.href === '/'
-                    ? pathname === '/'
-                    : pathname.startsWith(item.href);
+                  item.href === '/' ? pathname === '/' : pathname.startsWith(item.href);
 
                 return (
                   <li key={item.href}>
-                    <a
-                      href={item.href}
+                    <Link
+                      to={item.href}
                       className={cx(
                         'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition duration-100 ease-linear',
                         isActive
@@ -62,7 +55,7 @@ export function AppLayout() {
                     >
                       <item.icon className="size-4" />
                       {item.label}
-                    </a>
+                    </Link>
                   </li>
                 );
               })}
@@ -83,9 +76,7 @@ export function AppLayout() {
       <footer className="border-t border-secondary py-6">
         <div className="mx-auto flex max-w-360 items-center justify-between px-4 text-xs text-quaternary md:px-8">
           <span className="font-mono">SAMIZDAT PROTOCOL</span>
-          <span className="font-mono">
-            SOLANA DEVNET • {new Date().getFullYear()}
-          </span>
+          <span className="font-mono">SOLANA DEVNET • {new Date().getFullYear()}</span>
         </div>
       </footer>
     </div>
diff --git a/web/src/components/application/connect-wallet-menu.tsx b/web/src/components/application/connect-wallet-menu.tsx
index e526d36..40ebc08 100644
--- a/web/src/components/application/connect-wallet-menu.tsx
+++ b/web/src/components/application/connect-wallet-menu.tsx
@@ -43,11 +43,7 @@ function ConnectableWalletItem({
       const nextAccounts = await connect();
       // Prefer first new account
       for (const next of nextAccounts) {
-        if (
-          !existingAccounts.some(existing =>
-            uiWalletAccountsAreSame(next, existing)
-          )
-        ) {
+        if (!existingAccounts.some(existing => uiWalletAccountsAreSame(next, existing))) {
           onAccountSelect(next);
           return;
         }
@@ -84,9 +80,7 @@ function ConnectableWalletItem({
         <span className="grow truncate text-sm font-semibold text-secondary">
           {wallet.name}
         </span>
-        {isConnected && (
-          <span className="size-1.5 shrink-0 rounded-full bg-brand-500" />
-        )}
+        {isConnected && <span className="size-1.5 shrink-0 rounded-full bg-brand-500" />}
       </button>
 
       {/* Connected accounts */}
@@ -172,7 +166,7 @@ export function ConnectWalletMenu() {
   for (const wallet of wallets) {
     if (
       wallet.features.includes(StandardConnect) &&
-      wallet.features.includes(StandardDisconnect) && 
+      wallet.features.includes(StandardDisconnect) &&
       wallet.chains.includes(chainDetails.chain)
     ) {
       connectable.push(wallet);
@@ -182,7 +176,7 @@ export function ConnectWalletMenu() {
   return (
     <Dropdown.Root key={menuKey}>
       <Button size="sm" color="primary">
-        <div className='flex gap-2 items-center'>
+        <div className="flex items-center gap-2">
           {selectedWalletAccount ? (
             <ConnectedDisplay account={selectedWalletAccount} />
           ) : (
@@ -215,10 +209,7 @@ export function ConnectWalletMenu() {
                   onDisconnect={wallet => {
                     if (
                       selectedWalletAccount &&
-                      uiWalletAccountBelongsToUiWallet(
-                        selectedWalletAccount,
-                        wallet
-                      )
+                      uiWalletAccountBelongsToUiWallet(selectedWalletAccount, wallet)
                     ) {
                       setSelectedWalletAccount(undefined);
                     }
diff --git a/web/src/context/selected-wallet-account-context-provider.tsx b/web/src/context/selected-wallet-account-context-provider.tsx
index 0bcca5b..e8eeae7 100644
--- a/web/src/context/selected-wallet-account-context-provider.tsx
+++ b/web/src/context/selected-wallet-account-context-provider.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   getUiWalletAccountStorageKey,
@@ -14,11 +14,11 @@ import {
   type SelectedWalletAccountState,
 } from '@/context/selected-wallet-account-context';
 
-const STORAGE_KEY = 'cayed:selected-wallet';
+const STORAGE_KEY = 'samizdat:selected-wallet';
 
-let wasSetterInvoked = false;
 function getSavedWalletAccount(
-  wallets: readonly UiWallet[]
+  wallets: readonly UiWallet[],
+  wasSetterInvoked: boolean
 ): UiWalletAccount | undefined {
   if (wasSetterInvoked) {
     // After the user makes an explicit choice of wallet, stop trying to auto-select the
@@ -55,13 +55,16 @@ export function SelectedWalletAccountContextProvider({
   children: React.ReactNode;
 }) {
   const wallets = useWallets();
+  const wasSetterInvokedRef = useRef(false);
   const [selectedWalletAccount, setSelectedWalletAccountInternal] =
-    useState<SelectedWalletAccountState>(() => getSavedWalletAccount(wallets));
+    useState<SelectedWalletAccountState>(() =>
+      getSavedWalletAccount(wallets, wasSetterInvokedRef.current)
+    );
   const setSelectedWalletAccount: React.Dispatch<
     React.SetStateAction<SelectedWalletAccountState>
   > = setStateAction => {
     setSelectedWalletAccountInternal(prevSelectedWalletAccount => {
-      wasSetterInvoked = true;
+      wasSetterInvokedRef.current = true;
       const nextWalletAccount =
         typeof setStateAction === 'function'
           ? setStateAction(prevSelectedWalletAccount)
@@ -78,7 +81,10 @@ export function SelectedWalletAccountContextProvider({
     });
   };
   useEffect(() => {
-    const savedWalletAccount = getSavedWalletAccount(wallets);
+    const savedWalletAccount = getSavedWalletAccount(
+      wallets,
+      wasSetterInvokedRef.current
+    );
     if (savedWalletAccount) {
       setSelectedWalletAccountInternal(savedWalletAccount);
     }
diff --git a/web/src/main.tsx b/web/src/main.tsx
index a8d4c77..ae34e6c 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -3,23 +3,44 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router';
 
-import { HomeScreen } from '@/pages/home-screen';
+import { AppLayout } from '@/components/application/app-layout';
+import { ChainContextProvider } from '@/context/chain-context-provider';
+import { ConnectionContextProvider } from '@/context/connection-context-provider';
+import { SelectedWalletAccountContextProvider } from '@/context/selected-wallet-account-context-provider';
+import { LandingPage } from '@/pages/landing';
+import { NodeDashboardPage } from '@/pages/node';
 import { NotFound } from '@/pages/not-found';
+import { PublisherDashboardPage } from '@/pages/publisher';
+import { DigitalTwinPage } from '@/pages/twin';
 import { RouteProvider } from '@/providers/router-provider';
+import { SamizdatServiceProviderConnected } from '@/providers/samizdat-service-provider';
 import { ThemeProvider } from '@/providers/theme-provider';
 import '@/styles/globals.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ThemeProvider>
-      <BrowserRouter>
-        <RouteProvider>
-          <Routes>
-            <Route path="/" element={<HomeScreen />} />
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </RouteProvider>
-      </BrowserRouter>
+    <ThemeProvider defaultTheme="dark">
+      <ChainContextProvider>
+        <SelectedWalletAccountContextProvider>
+          <ConnectionContextProvider>
+            <SamizdatServiceProviderConnected>
+              <BrowserRouter basename="/samizdat">
+                <RouteProvider>
+                  <Routes>
+                    <Route element={<AppLayout />}>
+                      <Route index path="/" element={<LandingPage />} />
+                      <Route path="/publisher" element={<PublisherDashboardPage />} />
+                      <Route path="/node" element={<NodeDashboardPage />} />
+                      <Route path="/twin" element={<DigitalTwinPage />} />
+                    </Route>
+                    <Route path="*" element={<NotFound />} />
+                  </Routes>
+                </RouteProvider>
+              </BrowserRouter>
+            </SamizdatServiceProviderConnected>
+          </ConnectionContextProvider>
+        </SelectedWalletAccountContextProvider>
+      </ChainContextProvider>
     </ThemeProvider>
   </StrictMode>
 );
diff --git a/web/src/pages/landing.tsx b/web/src/pages/landing.tsx
index 3388428..a9fea6c 100644
--- a/web/src/pages/landing.tsx
+++ b/web/src/pages/landing.tsx
@@ -65,7 +65,10 @@ function ProtocolFlowDiagram() {
   ];
 
   return (
-    <div ref={ref} className="flex flex-col items-center justify-center gap-12 md:flex-row md:gap-0">
+    <div
+      ref={ref}
+      className="flex flex-col items-center justify-center gap-12 md:flex-row md:gap-0"
+    >
       {steps.map((step, i) => (
         <div key={step.label} className="flex items-center gap-0">
           <motion.div
@@ -78,9 +81,7 @@ function ProtocolFlowDiagram() {
               <step.icon className="size-7 text-brand-500" />
             </div>
             <div className="text-center">
-              <p className="font-mono text-sm font-semibold text-primary">
-                {step.label}
-              </p>
+              <p className="font-mono text-sm font-semibold text-primary">{step.label}</p>
               <p className="max-w-35 text-xs text-tertiary">{step.sublabel}</p>
             </div>
           </motion.div>
@@ -139,19 +140,16 @@ export function LandingPage() {
           {/* Oversized typographic header */}
           <div className="flex flex-col gap-6">
             <div className="flex items-center gap-2">
-              <span className="pulse-dot inline-block size-2 rounded-full bg-brand-500" />
-              <span className="font-mono text-xs uppercase tracking-widest text-brand-500">
+              <span className="inline-block size-2 pulse-dot rounded-full bg-brand-500" />
+              <span className="font-mono text-xs tracking-widest text-brand-500 uppercase">
                 Live on Solana Devnet
               </span>
             </div>
 
-            <h1 className="max-w-5xl font-display text-display-xl font-normal leading-[0.95] tracking-tight text-primary md:text-[5rem] lg:text-[6.5rem]">
+            <h1 className="max-w-5xl font-display text-display-xl leading-[0.95] font-normal tracking-tight text-primary md:text-[5rem] lg:text-[6.5rem]">
               <StaggerRevealText text="Decentralized billboards." />
               <br />
-              <StaggerRevealText
-                text="Permissionless reach."
-                delay={0.4}
-              />
+              <StaggerRevealText text="Permissionless reach." delay={0.4} />
             </h1>
 
             <motion.p
@@ -173,12 +171,7 @@ export function LandingPage() {
               <Button href="/publisher" size="lg" iconTrailing={ArrowRight}>
                 I'm a Publisher
               </Button>
-              <Button
-                href="/node"
-                size="lg"
-                color="secondary"
-                iconTrailing={ArrowRight}
-              >
+              <Button href="/node" size="lg" color="secondary" iconTrailing={ArrowRight}>
                 I'm an Operator
               </Button>
             </motion.div>
@@ -186,7 +179,7 @@ export function LandingPage() {
 
           {/* Oversized bg accent text */}
           <div
-            className="pointer-events-none absolute -right-8 top-1/2 -translate-y-1/2 select-none font-display text-[20rem] font-normal leading-none tracking-tighter text-brand-500/3 md:text-[28rem]"
+            className="pointer-events-none absolute top-1/2 -right-8 -translate-y-1/2 font-display text-[20rem] leading-none font-normal tracking-tighter text-brand-500/3 select-none md:text-[28rem]"
             aria-hidden="true"
           >
             S
@@ -198,7 +191,7 @@ export function LandingPage() {
       <section className="border-b border-secondary py-20 md:py-28">
         <div className="mx-auto max-w-360 px-4 md:px-8">
           <div className="mb-12 flex flex-col gap-3">
-            <span className="font-mono text-xs uppercase tracking-widest text-brand-500">
+            <span className="font-mono text-xs tracking-widest text-brand-500 uppercase">
               How it works
             </span>
             <h2 className="max-w-lg font-display text-display-md text-primary">
@@ -214,7 +207,7 @@ export function LandingPage() {
       <section className="border-b border-secondary py-20 md:py-28">
         <div className="mx-auto max-w-360 px-4 md:px-8">
           <div className="mb-12 flex flex-col gap-3">
-            <span className="font-mono text-xs uppercase tracking-widest text-brand-500">
+            <span className="font-mono text-xs tracking-widest text-brand-500 uppercase">
               Protocol Features
             </span>
             <h2 className="max-w-lg font-display text-display-md text-primary">
@@ -279,28 +272,21 @@ export function LandingPage() {
               <Button href="/publisher" size="lg" iconLeading={Send01}>
                 Launch a Campaign
               </Button>
-              <Button
-                href="/twin"
-                size="lg"
-                color="secondary"
-                iconLeading={Monitor04}
-              >
+              <Button href="/twin" size="lg" color="secondary" iconLeading={Monitor04}>
                 Try the Digital Twin
               </Button>
             </div>
 
             <div className="mt-8 flex items-center gap-6">
               <div className="flex items-center gap-2">
-                <span className="pulse-dot inline-block size-2 rounded-full bg-success-500" />
+                <span className="inline-block size-2 pulse-dot rounded-full bg-success-500" />
                 <span className="font-mono text-xs text-tertiary">
                   8 active campaigns
                 </span>
               </div>
               <div className="flex items-center gap-2">
-                <span className="pulse-dot inline-block size-2 rounded-full bg-brand-500" />
-                <span className="font-mono text-xs text-tertiary">
-                  1,247 total plays
-                </span>
+                <span className="inline-block size-2 pulse-dot rounded-full bg-brand-500" />
+                <span className="font-mono text-xs text-tertiary">1,247 total plays</span>
               </div>
             </div>
           </div>
diff --git a/web/src/pages/node.tsx b/web/src/pages/node.tsx
new file mode 100644
index 0000000..eed7d5f
--- /dev/null
+++ b/web/src/pages/node.tsx
@@ -0,0 +1,934 @@
+import { useCallback, useContext, useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Activity,
+  ArrowUp,
+  Clock,
+  CurrencyDollar,
+  Edit05,
+  FilterLines,
+  Globe05,
+  Loading01,
+  Monitor04,
+  Plus,
+  Save01,
+  Zap,
+} from '@untitledui/icons';
+import { UiWalletAccount } from '@wallet-standard/react';
+import { AnimatePresence, motion } from 'motion/react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { Badge, BadgeWithDot } from '@/components/base/badges/badges';
+import { Button } from '@/components/base/buttons/button';
+import { Checkbox } from '@/components/base/checkbox/checkbox';
+import { Input } from '@/components/base/input/input';
+import { SelectedWalletAccountContext } from '@/context/selected-wallet-account-context';
+import {
+  useSamizdatService,
+  type SamizdatService,
+} from '@/providers/samizdat-service-provider';
+import {
+  type CampaignAccount,
+  CampaignStatus,
+  type NodeAccount,
+  NodeStatus,
+  type PlayRecord,
+  PlayStatus,
+  SCREEN_SIZES,
+  TAG_BITS,
+  type WithAddress,
+  geoToDecimal,
+  lamportsToSol,
+  num,
+  parseScreenSize,
+  screenSizeLabel,
+  shortenAddress,
+  tagsFromMask,
+  unwrap,
+} from '@/types/samizdat';
+import { pollUntilReady } from '@/utils/poll-until-ready';
+import {
+  type RegisterNodeForm,
+  type UpdateNodeSettingsForm,
+  registerNodeSchema,
+  updateNodeSettingsSchema,
+} from '@/utils/schemas';
+
+// ============================================================================
+// Node Operator Dashboard
+// ============================================================================
+
+function NodeStatusIndicator({ status }: { status: NodeStatus }) {
+  const config = {
+    [NodeStatus.Active]: {
+      color: 'success' as const,
+      label: 'Online',
+      dotClass: 'bg-success-500',
+    },
+    [NodeStatus.Offline]: {
+      color: 'gray' as const,
+      label: 'Offline',
+      dotClass: 'bg-gray-400',
+    },
+    [NodeStatus.Suspended]: {
+      color: 'error' as const,
+      label: 'Suspended',
+      dotClass: 'bg-error-500',
+    },
+  };
+  const c = config[status];
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className={`inline-block size-2.5 pulse-dot rounded-full ${c.dotClass}`} />
+      <BadgeWithDot color={c.color} type="modern" size="sm">
+        {c.label}
+      </BadgeWithDot>
+    </div>
+  );
+}
+
+function PlayStatusBadge({ status }: { status: PlayStatus }) {
+  const config = {
+    [PlayStatus.Claimed]: { color: 'warning' as const, label: 'Claimed' },
+    [PlayStatus.Paid]: { color: 'success' as const, label: 'Paid' },
+    [PlayStatus.TimedOut]: { color: 'error' as const, label: 'Timed Out' },
+  };
+  const c = config[status];
+
+  return (
+    <BadgeWithDot color={c.color} type="pill-color" size="sm">
+      {c.label}
+    </BadgeWithDot>
+  );
+}
+
+function CampaignCard({
+  campaign,
+  onClaim,
+  isClaiming = false,
+}: {
+  campaign: WithAddress<CampaignAccount>;
+  onClaim: (c: WithAddress<CampaignAccount>) => void;
+  isClaiming?: boolean;
+}) {
+  const tags = tagsFromMask(campaign.tagMask);
+  const tf = campaign.targetFilters;
+  const geoBounds = unwrap(tf.geoBounds);
+  const total = num(campaign.playsRemaining) + num(campaign.playsCompleted);
+
+  return (
+    <motion.div
+      className="flex flex-col gap-4 rounded-xl border border-secondary bg-secondary p-5 transition duration-100 hover:border-brand-500/30"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      layout
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <p className="font-mono text-sm font-semibold text-primary">
+            Campaign #{String(campaign.campaignId)}
+          </p>
+          <p className="mt-0.5 font-mono text-xs text-quaternary">
+            {String(campaign.publisherAccount).slice(0, 8)}...
+          </p>
+        </div>
+        <span className="font-mono text-lg font-bold text-brand-500">
+          {lamportsToSol(campaign.bountyPerPlay)} SOL
+        </span>
+      </div>
+
+      {/* Stats */}
+      <div className="flex gap-4 text-xs text-tertiary">
+        <div>
+          <span className="text-quaternary">Remaining</span>
+          <p className="font-mono text-sm text-primary">
+            {num(campaign.playsRemaining).toLocaleString()}
+          </p>
+        </div>
+        <div>
+          <span className="text-quaternary">Total</span>
+          <p className="font-mono text-sm text-primary">{total.toLocaleString()}</p>
+        </div>
+        <div>
+          <span className="text-quaternary">Cooldown</span>
+          <p className="font-mono text-sm text-primary">{num(campaign.claimCooldown)}s</p>
+        </div>
+      </div>
+
+      {/* Tags */}
+      <div className="flex flex-wrap gap-1">
+        {tags.map(tag => (
+          <Badge key={tag} color="brand" size="sm" type="pill-color">
+            {tag}
+          </Badge>
+        ))}
+        {tf.establishmentTypes.map(et => (
+          <Badge key={et} color="gray" size="sm" type="pill-color">
+            {et}
+          </Badge>
+        ))}
+        {tf.screenSizes.map(sz => (
+          <Badge key={sz} color="blue" size="sm" type="pill-color">
+            {screenSizeLabel(sz)}
+          </Badge>
+        ))}
+      </div>
+
+      {/* Geo */}
+      {geoBounds && (
+        <p className="text-xs text-quaternary">
+          <Globe05 className="mr-1 inline size-3" />
+          Geo: {geoToDecimal(geoBounds.minLat).toFixed(2)}° -{' '}
+          {geoToDecimal(geoBounds.maxLat).toFixed(2)}° N
+        </p>
+      )}
+
+      {/* Claim */}
+      <Button
+        size="sm"
+        iconLeading={Zap}
+        onClick={() => onClaim(campaign)}
+        isDisabled={isClaiming}
+        className="mt-auto"
+      >
+        {isClaiming ? (
+          <span className="flex items-center gap-2">
+            <Loading01 className="size-3.5 animate-spin" />
+            Claiming...
+          </span>
+        ) : (
+          'Claim Campaign'
+        )}
+      </Button>
+    </motion.div>
+  );
+}
+
+function PlayHistoryTable({ records }: { records: WithAddress<PlayRecord>[] }) {
+  return (
+    <div className="overflow-x-auto rounded-xl border border-secondary">
+      <table className="w-full text-left">
+        <thead>
+          <tr className="border-b border-secondary bg-secondary text-xs text-tertiary">
+            <th className="px-4 py-3 font-medium">Campaign</th>
+            <th className="px-4 py-3 font-medium">Status</th>
+            <th className="px-4 py-3 font-medium">Payment</th>
+            <th className="px-4 py-3 font-medium">Claimed</th>
+            <th className="px-4 py-3 font-medium">Confirmed</th>
+          </tr>
+        </thead>
+        <tbody>
+          {records.map(record => (
+            <tr
+              key={record.address}
+              className="border-b border-secondary transition duration-100 hover:bg-primary_hover"
+            >
+              <td className="px-4 py-3 font-mono text-sm text-primary">
+                {String(record.campaignAccount).slice(0, 8)}...
+              </td>
+              <td className="px-4 py-3">
+                <PlayStatusBadge status={record.status} />
+              </td>
+              <td className="px-4 py-3 font-mono text-sm text-brand-500">
+                {lamportsToSol(record.paymentAmount)} SOL
+              </td>
+              <td className="px-4 py-3 text-xs text-tertiary">
+                {new Date(num(record.claimedAt) * 1000).toLocaleString()}
+              </td>
+              <td className="px-4 py-3 text-xs text-tertiary">
+                {num(record.confirmedAt) > 0
+                  ? new Date(num(record.confirmedAt) * 1000).toLocaleString()
+                  : '—'}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function NodeSettingsPanel({
+  node,
+  service,
+  onSaved,
+}: {
+  node: WithAddress<NodeAccount>;
+  service: SamizdatService;
+  onSaved: () => void;
+}) {
+  const [saving, setSaving] = useState(false);
+
+  const { control, handleSubmit, watch, setValue } = useForm<UpdateNodeSettingsForm>({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    resolver: zodResolver(updateNodeSettingsSchema) as any,
+    defaultValues: {
+      latitude: geoToDecimal(node.location.latitude),
+      longitude: geoToDecimal(node.location.longitude),
+      estimatedFootfall: node.estimatedFootfall,
+      blockedTagMask: node.blockedTagMask,
+    },
+  });
+
+  const blockedTagMask = watch('blockedTagMask');
+  const toggleTag = (bit: bigint) => setValue('blockedTagMask', blockedTagMask ^ bit);
+
+  const onSubmit = async (data: UpdateNodeSettingsForm) => {
+    setSaving(true);
+    try {
+      await service.updateNodeMetadata(node.address, {
+        location: {
+          latitude: Math.round(data.latitude * 1e7),
+          longitude: Math.round(data.longitude * 1e7),
+        },
+        estimatedFootfall: data.estimatedFootfall,
+        blockedTagMask: data.blockedTagMask,
+        status: null,
+      });
+      onSaved();
+    } catch (err) {
+      console.error('Update node failed:', err);
+      alert(`Failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="rounded-xl border border-secondary bg-secondary p-6"
+    >
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-primary">Node Settings</h3>
+        <NodeStatusIndicator status={node.status} />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Controller
+          name="latitude"
+          control={control}
+          render={({ field, fieldState }) => (
+            <Input
+              label="Latitude"
+              value={field.value?.toString() ?? ''}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              hint={fieldState.error?.message ?? 'Degrees (e.g. 40.7128)'}
+              isInvalid={!!fieldState.error}
+              size="sm"
+            />
+          )}
+        />
+        <Controller
+          name="longitude"
+          control={control}
+          render={({ field, fieldState }) => (
+            <Input
+              label="Longitude"
+              value={field.value?.toString() ?? ''}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              hint={fieldState.error?.message ?? 'Degrees (e.g. -74.0060)'}
+              isInvalid={!!fieldState.error}
+              size="sm"
+            />
+          )}
+        />
+        <Controller
+          name="estimatedFootfall"
+          control={control}
+          render={({ field, fieldState }) => (
+            <Input
+              label="Estimated Footfall"
+              value={field.value?.toString() ?? ''}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              hint={fieldState.error?.message ?? 'Daily foot traffic estimate'}
+              isInvalid={!!fieldState.error}
+              size="sm"
+              type="number"
+            />
+          )}
+        />
+        <div>
+          <p className="mb-1 text-sm font-medium text-secondary">Establishment Type</p>
+          <span className="font-mono text-sm text-primary">{node.establishmentType}</span>
+        </div>
+        <div>
+          <p className="mb-2 text-sm font-medium text-secondary">Screen Size</p>
+          <Badge color="brand" type="pill-color" size="md">
+            {screenSizeLabel(node.screenSize)}
+          </Badge>
+        </div>
+        <div>
+          <p className="mb-2 text-sm font-medium text-secondary">Resolution</p>
+          <span className="font-mono text-sm text-primary">
+            {node.resolution.width}×{node.resolution.height}
+          </span>
+        </div>
+        <div className="md:col-span-2">
+          <p className="mb-2 text-sm font-medium text-secondary">Blocked Tags</p>
+          <div className="flex flex-wrap gap-3">
+            {TAG_BITS.map(({ bit, label }) => (
+              <Checkbox
+                key={bit}
+                label={label}
+                size="sm"
+                isSelected={(blockedTagMask & bit) !== 0n}
+                onChange={() => toggleTag(bit)}
+              />
+            ))}
+          </div>
+        </div>
+        <div className="md:col-span-2">
+          <p className="mb-1 text-sm font-medium text-secondary">Landmarks</p>
+          <span className="text-sm text-tertiary">
+            {node.landmarks.join(', ') || '—'}
+          </span>
+        </div>
+      </div>
+
+      <div className="mt-4 flex justify-end">
+        <Button size="sm" iconLeading={Save01} type="submit" isDisabled={saving}>
+          {saving ? 'Saving...' : 'Save Changes'}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+// --- Helper sub-components for empty states ---
+
+function ConnectWalletPrompt() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4">
+      <Monitor04 className="size-12 text-quaternary" />
+      <h2 className="font-display text-display-xs text-primary">Connect Your Wallet</h2>
+      <p className="max-w-sm text-center text-sm text-tertiary">
+        Connect a Solana wallet to access the node operator dashboard, manage your display
+        node, and earn rewards.
+      </p>
+    </div>
+  );
+}
+
+function RegisterNodePrompt({
+  service,
+  wallet,
+  onRegistered,
+}: {
+  service: SamizdatService;
+  wallet: UiWalletAccount;
+  onRegistered: () => void;
+}) {
+  const [showForm, setShowForm] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const { control, handleSubmit, watch, setValue } = useForm<RegisterNodeForm>({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    resolver: zodResolver(registerNodeSchema) as any,
+    defaultValues: {
+      nodeId: undefined,
+      latitude: undefined,
+      longitude: undefined,
+      screenSize: undefined,
+      resolutionWidth: undefined,
+      resolutionHeight: undefined,
+      landmarks: '',
+      blockedTagMask: 0n,
+      estimatedFootfall: undefined,
+      establishmentType: '',
+    },
+  });
+
+  const blockedTagMask = watch('blockedTagMask');
+  const toggleTag = (bit: bigint) => setValue('blockedTagMask', blockedTagMask ^ bit);
+
+  const onSubmit = async (data: RegisterNodeForm) => {
+    setSubmitting(true);
+    try {
+      await service.registerNode({
+        nodeId: data.nodeId,
+        location: {
+          latitude: Math.round(data.latitude * 1e7),
+          longitude: Math.round(data.longitude * 1e7),
+        },
+        screenSize: parseScreenSize(data.screenSize),
+        resolution: { width: data.resolutionWidth, height: data.resolutionHeight },
+        landmarks: data.landmarks
+          ? data.landmarks
+              .split(',')
+              .map(s => s.trim())
+              .filter(Boolean)
+          : [],
+        blockedTagMask: data.blockedTagMask,
+        estimatedFootfall: data.estimatedFootfall,
+        establishmentType: data.establishmentType,
+      });
+
+      // Poll until the account is queryable
+      await pollUntilReady(() => service.getNode(wallet.address), {
+        resourceName: 'Node account',
+      });
+
+      onRegistered();
+    } catch (err) {
+      console.error('Register node failed:', err);
+      alert(`Failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!showForm) {
+    return (
+      <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4">
+        <Monitor04 className="size-12 text-quaternary" />
+        <h2 className="font-display text-display-xs text-primary">
+          Register a Display Node
+        </h2>
+        <p className="max-w-sm text-center text-sm text-tertiary">
+          Register your display node on-chain to start claiming campaigns and earning
+          rewards.
+        </p>
+        <Button size="md" iconLeading={Plus} onClick={() => setShowForm(true)}>
+          Register Node
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-xl py-8">
+      <h2 className="mb-6 font-display text-display-xs text-primary">
+        Register Display Node
+      </h2>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-5">
+        <Controller
+          name="nodeId"
+          control={control}
+          render={({ field, fieldState }) => (
+            <Input
+              label="Node ID"
+              placeholder="1"
+              type="number"
+              value={field.value?.toString() ?? ''}
+              onChange={field.onChange}
+              hint={fieldState.error?.message ?? 'Unique numeric ID'}
+              isInvalid={!!fieldState.error}
+            />
+          )}
+        />
+        <div className="grid grid-cols-2 gap-4">
+          <Controller
+            name="latitude"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Input
+                label="Latitude"
+                placeholder="40.7128"
+                type="number"
+                value={field.value?.toString() ?? ''}
+                onChange={field.onChange}
+                hint={fieldState.error?.message}
+                isInvalid={!!fieldState.error}
+              />
+            )}
+          />
+          <Controller
+            name="longitude"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Input
+                label="Longitude"
+                placeholder="-74.0060"
+                type="number"
+                value={field.value?.toString() ?? ''}
+                onChange={field.onChange}
+                hint={fieldState.error?.message}
+                isInvalid={!!fieldState.error}
+              />
+            )}
+          />
+        </div>
+        <div>
+          <p className="mb-2 text-sm font-medium text-secondary">Screen Size</p>
+          <div className="flex flex-wrap gap-3">
+            {SCREEN_SIZES.map(size => {
+              const label = screenSizeLabel(size);
+              return (
+                <Controller
+                  key={size}
+                  name="screenSize"
+                  control={control}
+                  render={({ field }) => (
+                    <Checkbox
+                      label={label}
+                      size="sm"
+                      isSelected={field.value === label}
+                      onChange={() => field.onChange(label)}
+                    />
+                  )}
+                />
+              );
+            })}
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <Controller
+            name="resolutionWidth"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Input
+                label="Width (px)"
+                placeholder="1920"
+                type="number"
+                value={field.value?.toString() ?? ''}
+                onChange={field.onChange}
+                hint={fieldState.error?.message}
+                isInvalid={!!fieldState.error}
+              />
+            )}
+          />
+          <Controller
+            name="resolutionHeight"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Input
+                label="Height (px)"
+                placeholder="1080"
+                type="number"
+                value={field.value?.toString() ?? ''}
+                onChange={field.onChange}
+                hint={fieldState.error?.message}
+                isInvalid={!!fieldState.error}
+              />
+            )}
+          />
+        </div>
+        <Controller
+          name="estimatedFootfall"
+          control={control}
+          render={({ field, fieldState }) => (
+            <Input
+              label="Estimated Footfall"
+              placeholder="5000"
+              type="number"
+              value={field.value?.toString() ?? ''}
+              onChange={field.onChange}
+              hint={fieldState.error?.message ?? 'Daily foot traffic'}
+              isInvalid={!!fieldState.error}
+            />
+          )}
+        />
+        <Controller
+          name="establishmentType"
+          control={control}
+          render={({ field, fieldState }) => (
+            <Input
+              label="Establishment Type"
+              placeholder="Mall, Transit Hub"
+              value={field.value ?? ''}
+              onChange={field.onChange}
+              hint={fieldState.error?.message}
+              isInvalid={!!fieldState.error}
+            />
+          )}
+        />
+        <Controller
+          name="landmarks"
+          control={control}
+          render={({ field }) => (
+            <Input
+              label="Landmarks"
+              placeholder="Times Square, Penn Station"
+              value={field.value ?? ''}
+              onChange={field.onChange}
+              hint="Comma-separated nearby landmarks"
+            />
+          )}
+        />
+        <div>
+          <p className="mb-2 text-sm font-medium text-secondary">Blocked Tags</p>
+          <div className="flex flex-wrap gap-3">
+            {TAG_BITS.map(({ bit, label }) => {
+              const bitNum = bit;
+              return (
+                <Checkbox
+                  key={bitNum}
+                  label={label}
+                  size="sm"
+                  isSelected={(blockedTagMask & bitNum) !== 0n}
+                  onChange={() => toggleTag(bitNum)}
+                />
+              );
+            })}
+          </div>
+        </div>
+        <div className="flex justify-end gap-3 border-t border-secondary pt-4">
+          <Button
+            size="md"
+            color="secondary"
+            type="button"
+            onClick={() => setShowForm(false)}
+          >
+            Cancel
+          </Button>
+          <Button size="md" iconLeading={Plus} type="submit" isDisabled={submitting}>
+            {submitting ? 'Registering...' : 'Register Node'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+// ============================================================================
+// Main Page
+// ============================================================================
+
+export function NodeDashboardPage() {
+  const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
+
+  if (!selectedWalletAccount) {
+    return (
+      <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+        <ConnectWalletPrompt />
+      </div>
+    );
+  }
+
+  return <NodeDashboardContent />;
+}
+
+function NodeDashboardContent() {
+  const service = useSamizdatService();
+  const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
+
+  const [node, setNode] = useState<WithAddress<NodeAccount> | null>(null);
+  const [campaigns, setCampaigns] = useState<WithAddress<CampaignAccount>[]>([]);
+  const [playRecords, setPlayRecords] = useState<WithAddress<PlayRecord>[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [checkedNode, setCheckedNode] = useState(false);
+  const [claimingCampaign, setClaimingCampaign] = useState<string | null>(null);
+
+  const [activeTab, setActiveTab] = useState<'marketplace' | 'history' | 'settings'>(
+    'marketplace'
+  );
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const n = await service.getNode(selectedWalletAccount!.address);
+      setNode(n);
+      setCheckedNode(true);
+      if (n) {
+        const [camps, records] = await Promise.all([
+          service.getCampaigns(),
+          service.getPlayRecords(),
+        ]);
+        setCampaigns(camps.filter(c => c.status === CampaignStatus.Active));
+        setPlayRecords(records);
+      }
+    } catch (err) {
+      console.error('Failed to fetch node data:', err);
+      setCheckedNode(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [service, selectedWalletAccount]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // --- Loading ---
+  if (loading && !checkedNode) {
+    return (
+      <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+        <div className="flex min-h-[40vh] flex-col items-center justify-center gap-3">
+          <Loading01 className="size-8 animate-spin text-brand-500" />
+          <p className="font-mono text-sm text-tertiary">Loading on-chain data...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // --- No node registered ---
+  if (!node) {
+    return (
+      <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+        <RegisterNodePrompt
+          service={service}
+          wallet={selectedWalletAccount!}
+          onRegistered={fetchData}
+        />
+      </div>
+    );
+  }
+
+  const handleClaim = async (campaign: WithAddress<CampaignAccount>) => {
+    setClaimingCampaign(campaign.address);
+    try {
+      await service.claimCampaign(campaign.address, node.address, 0);
+      await fetchData();
+    } catch (err) {
+      console.error('Claim failed:', err);
+      alert(`Claim failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setClaimingCampaign(null);
+    }
+  };
+
+  const availableCampaigns = campaigns;
+
+  return (
+    <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <h1 className="font-display text-display-sm text-primary">Node Operator</h1>
+          <NodeStatusIndicator status={node.status} />
+        </div>
+        <p className="mt-1 font-mono text-xs text-quaternary">
+          {shortenAddress(node.address, 8)}
+        </p>
+      </div>
+
+      {/* Stats */}
+      <div className="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
+        <div className="rounded-xl border border-secondary bg-secondary p-5">
+          <div className="flex items-center gap-2 text-xs text-tertiary">
+            <Activity className="size-4" />
+            Total Plays
+          </div>
+          <p className="mt-2 font-mono text-2xl font-semibold text-primary">
+            {num(node.totalPlays).toLocaleString()}
+          </p>
+        </div>
+        <div className="rounded-xl border border-secondary bg-secondary p-5">
+          <div className="flex items-center gap-2 text-xs text-tertiary">
+            <CurrencyDollar className="size-4 text-brand-500" />
+            Total Earnings
+          </div>
+          <p className="mt-2 font-mono text-2xl font-semibold text-brand-500">
+            {lamportsToSol(node.totalEarnings).toFixed(2)} SOL
+          </p>
+        </div>
+        <div className="rounded-xl border border-secondary bg-secondary p-5">
+          <div className="flex items-center gap-2 text-xs text-tertiary">
+            <Monitor04 className="size-4" />
+            Screen
+          </div>
+          <p className="mt-2 text-lg font-semibold text-primary">
+            {screenSizeLabel(node.screenSize)}{' '}
+            <span className="font-mono text-sm text-quaternary">
+              {node.resolution.width}×{node.resolution.height}
+            </span>
+          </p>
+        </div>
+        <div className="rounded-xl border border-secondary bg-secondary p-5">
+          <div className="flex items-center gap-2 text-xs text-tertiary">
+            <ArrowUp className="size-4 text-success-500" />
+            Uptime
+          </div>
+          <p className="mt-2 font-mono text-2xl font-semibold text-success-500">99.7%</p>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="mb-6 flex items-center gap-1 border-b border-secondary">
+        {[
+          { key: 'marketplace' as const, label: 'Available Campaigns', icon: Zap },
+          { key: 'history' as const, label: 'Play History', icon: Clock },
+          { key: 'settings' as const, label: 'Node Settings', icon: Edit05 },
+        ].map(tab => (
+          <button
+            key={tab.key}
+            onClick={() => setActiveTab(tab.key)}
+            className={`flex items-center gap-1.5 border-b-2 px-4 py-2.5 text-sm font-medium transition duration-100 ${
+              activeTab === tab.key
+                ? 'border-brand-500 text-brand-500'
+                : 'border-transparent text-tertiary hover:text-secondary'
+            }`}
+          >
+            <tab.icon className="size-4" />
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab Content */}
+      <AnimatePresence mode="wait">
+        {activeTab === 'marketplace' && (
+          <motion.div
+            key="marketplace"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+          >
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-sm text-tertiary">
+                {availableCampaigns.length} campaigns available
+              </p>
+              <Button size="sm" color="tertiary" iconLeading={FilterLines}>
+                Filters
+              </Button>
+            </div>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {availableCampaigns.map(campaign => (
+                <CampaignCard
+                  key={String(campaign.campaignId)}
+                  campaign={campaign}
+                  onClaim={handleClaim}
+                  isClaiming={claimingCampaign === campaign.address}
+                />
+              ))}
+            </div>
+            {availableCampaigns.length === 0 && (
+              <div className="flex flex-col items-center gap-2 py-12 text-tertiary">
+                <Zap className="size-8" />
+                <p className="text-sm">No active campaigns available right now</p>
+              </div>
+            )}
+          </motion.div>
+        )}
+
+        {activeTab === 'history' && (
+          <motion.div
+            key="history"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+          >
+            {playRecords.length > 0 ? (
+              <PlayHistoryTable records={playRecords} />
+            ) : (
+              <div className="flex flex-col items-center gap-2 py-12 text-tertiary">
+                <Clock className="size-8" />
+                <p className="text-sm">
+                  No play history yet — claim a campaign to get started
+                </p>
+              </div>
+            )}
+          </motion.div>
+        )}
+
+        {activeTab === 'settings' && (
+          <motion.div
+            key="settings"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+          >
+            <NodeSettingsPanel node={node} service={service} onSaved={fetchData} />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/web/src/pages/publisher.tsx b/web/src/pages/publisher.tsx
new file mode 100644
index 0000000..4807aa3
--- /dev/null
+++ b/web/src/pages/publisher.tsx
@@ -0,0 +1,1081 @@
+import { useCallback, useContext, useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  AlertCircle,
+  CheckCircle,
+  Clock,
+  CurrencyDollar,
+  Eye,
+  Loading01,
+  PauseCircle,
+  Plus,
+  Send01,
+  Trash01,
+  XCircle,
+  Zap,
+} from '@untitledui/icons';
+import { UiWalletAccount } from '@wallet-standard/react';
+import { AnimatePresence, motion } from 'motion/react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { Badge, BadgeWithDot } from '@/components/base/badges/badges';
+import { Button } from '@/components/base/buttons/button';
+import { Checkbox } from '@/components/base/checkbox/checkbox';
+import { Input } from '@/components/base/input/input';
+import { ProgressBar } from '@/components/base/progress-indicators/progress-indicators';
+import { TextArea } from '@/components/base/textarea/textarea';
+import { SelectedWalletAccountContext } from '@/context/selected-wallet-account-context';
+import {
+  useSamizdatService,
+  type SamizdatService,
+} from '@/providers/samizdat-service-provider';
+import {
+  CAMPAIGN_STATUSES,
+  type CampaignAccount,
+  CampaignStatus,
+  type PublisherAccount,
+  SCREEN_SIZES,
+  TAG_BITS,
+  type TargetFiltersArgs,
+  type WithAddress,
+  campaignStatusLabel,
+  lamportsToSol,
+  num,
+  parseScreenSize,
+  screenSizeLabel,
+  shortenAddress,
+  tagsFromMask,
+  unwrap,
+} from '@/types/samizdat';
+import { pollUntilReady } from '@/utils/poll-until-ready';
+import {
+  type CreateCampaignForm,
+  type CreateCampaignFormInput,
+  createCampaignSchema,
+} from '@/utils/schemas';
+
+// ============================================================================
+// Publisher Dashboard
+// ============================================================================
+
+function StatusBadge({ status }: { status: CampaignStatus }) {
+  const config = {
+    [CampaignStatus.Active]: { color: 'success' as const, label: 'Active' },
+    [CampaignStatus.Paused]: { color: 'warning' as const, label: 'Paused' },
+    [CampaignStatus.Depleted]: { color: 'error' as const, label: 'Depleted' },
+    [CampaignStatus.Closed]: { color: 'gray' as const, label: 'Closed' },
+  };
+
+  const c = config[status];
+
+  return (
+    <BadgeWithDot color={c.color} type="pill-color" size="sm">
+      {c.label}
+    </BadgeWithDot>
+  );
+}
+
+function CampaignRow({
+  campaign,
+  onSelect,
+}: {
+  campaign: WithAddress<CampaignAccount>;
+  onSelect: (c: WithAddress<CampaignAccount>) => void;
+}) {
+  const total = num(campaign.playsRemaining) + num(campaign.playsCompleted);
+  const pct = total > 0 ? (num(campaign.playsCompleted) / total) * 100 : 0;
+  const tags = tagsFromMask(campaign.tagMask);
+
+  return (
+    <motion.tr
+      className="cursor-pointer border-b border-secondary transition duration-100 hover:bg-primary_hover"
+      onClick={() => onSelect(campaign)}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      layout
+    >
+      <td className="px-4 py-3">
+        <span className="font-mono text-sm text-primary">
+          #{String(campaign.campaignId)}
+        </span>
+      </td>
+      <td className="px-4 py-3">
+        <StatusBadge status={campaign.status} />
+      </td>
+      <td className="px-4 py-3">
+        <span className="font-mono text-sm text-brand-500">
+          {lamportsToSol(campaign.bountyPerPlay)} SOL
+        </span>
+      </td>
+      <td className="px-4 py-3">
+        <div className="flex flex-col gap-1">
+          <div className="flex justify-between">
+            <span className="text-xs text-tertiary">
+              {num(campaign.playsCompleted)}/{total}
+            </span>
+            <span className="font-mono text-xs text-quaternary">{Math.round(pct)}%</span>
+          </div>
+          <ProgressBar value={pct} />
+        </div>
+      </td>
+      <td className="px-4 py-3">
+        <div className="flex flex-wrap gap-1">
+          {tags.length > 0 ? (
+            tags.map(tag => (
+              <Badge key={tag} color="brand" size="sm" type="pill-color">
+                {tag}
+              </Badge>
+            ))
+          ) : (
+            <span className="text-xs text-quaternary">None</span>
+          )}
+        </div>
+      </td>
+      <td className="px-4 py-3 text-right">
+        <span className="text-xs text-tertiary">
+          {new Date(num(campaign.createdAt) * 1000).toLocaleDateString()}
+        </span>
+      </td>
+    </motion.tr>
+  );
+}
+
+function CampaignDetail({
+  campaign,
+  service,
+  onClose,
+  onRefresh,
+}: {
+  campaign: WithAddress<CampaignAccount>;
+  service: SamizdatService;
+  onClose: () => void;
+  onRefresh: () => void;
+}) {
+  const [busy, setBusy] = useState(false);
+  const total = num(campaign.playsRemaining) + num(campaign.playsCompleted);
+  const pct = total > 0 ? (num(campaign.playsCompleted) / total) * 100 : 0;
+  const tags = tagsFromMask(campaign.tagMask);
+  const tf = campaign.targetFilters;
+
+  const doAction = async (label: string, fn: () => Promise<void>) => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      await fn();
+      onRefresh();
+      onClose();
+    } catch (err) {
+      console.error(`${label} failed:`, err);
+      alert(`${label} failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <motion.div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-overlay/60 p-4 backdrop-blur-sm"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      onClick={onClose}
+    >
+      <motion.div
+        className="w-full max-w-2xl rounded-xl border border-secondary bg-primary p-6 shadow-2xl"
+        initial={{ scale: 0.95, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0.95, opacity: 0 }}
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="mb-6 flex items-start justify-between">
+          <div>
+            <div className="flex items-center gap-3">
+              <h2 className="font-display text-display-xs text-primary">
+                Campaign #{String(campaign.campaignId)}
+              </h2>
+              <StatusBadge status={campaign.status} />
+            </div>
+            <p className="mt-1 font-mono text-xs text-quaternary">{campaign.address}</p>
+          </div>
+          <Button size="sm" color="tertiary" onClick={onClose}>
+            ✕
+          </Button>
+        </div>
+
+        {/* Stats */}
+        <div className="mb-6 grid grid-cols-3 gap-4">
+          <div className="rounded-lg border border-secondary bg-secondary p-4">
+            <p className="text-xs text-tertiary">Bounty/Play</p>
+            <p className="mt-1 font-mono text-lg font-semibold text-brand-500">
+              {lamportsToSol(campaign.bountyPerPlay)} SOL
+            </p>
+          </div>
+          <div className="rounded-lg border border-secondary bg-secondary p-4">
+            <p className="text-xs text-tertiary">Plays</p>
+            <p className="mt-1 font-mono text-lg font-semibold text-primary">
+              {num(campaign.playsCompleted)}
+              <span className="text-sm text-quaternary"> / {total}</span>
+            </p>
+          </div>
+          <div className="rounded-lg border border-secondary bg-secondary p-4">
+            <p className="text-xs text-tertiary">Total Spent</p>
+            <p className="mt-1 font-mono text-lg font-semibold text-primary">
+              {lamportsToSol(num(campaign.playsCompleted) * num(campaign.bountyPerPlay))}{' '}
+              SOL
+            </p>
+          </div>
+        </div>
+
+        {/* Progress */}
+        <div className="mb-6">
+          <div className="mb-2 flex justify-between text-sm">
+            <span className="text-tertiary">Campaign Progress</span>
+            <span className="font-mono text-quaternary">{Math.round(pct)}%</span>
+          </div>
+          <ProgressBar value={pct} />
+        </div>
+
+        {/* Details */}
+        <div className="mb-6 grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <p className="text-xs text-quaternary">Tags</p>
+            <div className="mt-1 flex flex-wrap gap-1">
+              {tags.length > 0 ? (
+                tags.map(tag => (
+                  <Badge key={tag} color="brand" size="sm" type="pill-color">
+                    {tag}
+                  </Badge>
+                ))
+              ) : (
+                <span className="text-tertiary">None</span>
+              )}
+            </div>
+          </div>
+          <div>
+            <p className="text-xs text-quaternary">Screen Sizes</p>
+            <p className="mt-1 text-primary">
+              {tf.screenSizes.length > 0
+                ? tf.screenSizes.map(screenSizeLabel).join(', ')
+                : 'Any'}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs text-quaternary">Establishment Types</p>
+            <p className="mt-1 text-primary">
+              {tf.establishmentTypes.length > 0
+                ? tf.establishmentTypes.join(', ')
+                : 'Any'}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs text-quaternary">Footfall Range</p>
+            <p className="mt-1 text-primary">
+              {unwrap(tf.minFootfall) ?? '—'} – {unwrap(tf.maxFootfall) ?? '∞'}
+            </p>
+          </div>
+          <div className="col-span-2">
+            <p className="text-xs text-quaternary">Content CIDs</p>
+            <div className="mt-1 flex flex-col gap-1">
+              {campaign.cids.map((cid, i) => (
+                <code key={i} className="truncate font-mono text-xs text-tertiary">
+                  {cid}
+                </code>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-wrap gap-2 border-t border-secondary pt-4">
+          {campaign.status === CampaignStatus.Active && (
+            <Button
+              size="sm"
+              color="secondary"
+              iconLeading={PauseCircle}
+              isDisabled={busy}
+              onClick={() =>
+                doAction('Pause campaign', () =>
+                  service.updateCampaign(campaign.address, {
+                    tagMask: null,
+                    targetFilters: null,
+                    status: CampaignStatus.Paused,
+                  })
+                )
+              }
+            >
+              Pause
+            </Button>
+          )}
+          {campaign.status === CampaignStatus.Paused && (
+            <Button
+              size="sm"
+              color="primary"
+              iconLeading={Zap}
+              isDisabled={busy}
+              onClick={() =>
+                doAction('Resume campaign', () =>
+                  service.updateCampaign(campaign.address, {
+                    tagMask: null,
+                    targetFilters: null,
+                    status: CampaignStatus.Active,
+                  })
+                )
+              }
+            >
+              Resume
+            </Button>
+          )}
+          {campaign.status !== CampaignStatus.Closed && (
+            <Button
+              size="sm"
+              color="primary-destructive"
+              iconLeading={Trash01}
+              isDisabled={busy}
+              onClick={() =>
+                doAction('Close campaign', () => service.closeCampaign(campaign.address))
+              }
+            >
+              Close
+            </Button>
+          )}
+          {busy && (
+            <span className="flex items-center gap-2 text-xs text-tertiary">
+              <Loading01 className="size-3.5 animate-spin" />
+              Processing...
+            </span>
+          )}
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+function CreateCampaignModal({
+  service,
+  onClose,
+  onCreated,
+}: {
+  service: SamizdatService;
+  onClose: () => void;
+  onCreated: () => void;
+}) {
+  const [submitting, setSubmitting] = useState(false);
+
+  const { control, handleSubmit, watch, setValue } = useForm<
+    CreateCampaignFormInput,
+    unknown,
+    CreateCampaignForm
+  >({
+    resolver: zodResolver(createCampaignSchema),
+    defaultValues: {
+      campaignId: undefined,
+      cids: '',
+      bountyPerPlay: undefined,
+      totalPlays: undefined,
+      claimCooldown: 300,
+      tagMask: 0,
+      minFootfall: '',
+      maxFootfall: '',
+      screenSizes: [],
+      geoBoundsMinLat: '',
+      geoBoundsMaxLat: '',
+      geoBoundsMinLon: '',
+      geoBoundsMaxLon: '',
+      establishmentTypes: '',
+      requiredLandmarks: '',
+    },
+  });
+
+  const tagMask = watch('tagMask') ?? 0;
+  const screenSizes = watch('screenSizes') ?? [];
+
+  const toggleTag = (bit: number) => setValue('tagMask', tagMask ^ bit);
+  const toggleScreenSize = (size: string) => {
+    setValue(
+      'screenSizes',
+      screenSizes.includes(size)
+        ? screenSizes.filter(s => s !== size)
+        : [...screenSizes, size]
+    );
+  };
+
+  const onSubmit = async (data: CreateCampaignForm) => {
+    setSubmitting(true);
+    try {
+      const hasGeo =
+        data.geoBoundsMinLat !== '' &&
+        data.geoBoundsMaxLat !== '' &&
+        data.geoBoundsMinLon !== '' &&
+        data.geoBoundsMaxLon !== '';
+
+      const targetFilters: TargetFiltersArgs = {
+        minFootfall:
+          data.minFootfall !== '' && data.minFootfall != null
+            ? Number(data.minFootfall)
+            : null,
+        maxFootfall:
+          data.maxFootfall !== '' && data.maxFootfall != null
+            ? Number(data.maxFootfall)
+            : null,
+        screenSizes: data.screenSizes.map(parseScreenSize),
+        geoBounds: hasGeo
+          ? {
+              minLat: Math.round(Number(data.geoBoundsMinLat) * 1e7),
+              maxLat: Math.round(Number(data.geoBoundsMaxLat) * 1e7),
+              minLon: Math.round(Number(data.geoBoundsMinLon) * 1e7),
+              maxLon: Math.round(Number(data.geoBoundsMaxLon) * 1e7),
+            }
+          : null,
+        establishmentTypes: data.establishmentTypes
+          ? data.establishmentTypes
+              .split(',')
+              .map(s => s.trim())
+              .filter(Boolean)
+          : [],
+        requiredLandmarks: data.requiredLandmarks
+          ? data.requiredLandmarks
+              .split(',')
+              .map(s => s.trim())
+              .filter(Boolean)
+          : [],
+      };
+
+      await service.createCampaign({
+        campaignId: data.campaignId,
+        cids: data.cids,
+        bountyPerPlay: Math.round(data.bountyPerPlay * 1e9),
+        totalPlays: data.totalPlays,
+        tagMask: data.tagMask,
+        targetFilters,
+        claimCooldown: data.claimCooldown,
+      });
+
+      // Poll until the campaign is queryable
+      await pollUntilReady(
+        async () => {
+          const campaigns = await service.getCampaigns();
+          const found = campaigns.find(c => Number(c.campaignId) === data.campaignId);
+          if (!found) throw new Error('Campaign not found');
+          return found;
+        },
+        { resourceName: 'Campaign account' }
+      );
+
+      onCreated();
+      onClose();
+    } catch (err) {
+      console.error('Create campaign failed:', err);
+      alert(`Failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <motion.div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-overlay/60 p-4 backdrop-blur-sm"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      onClick={onClose}
+    >
+      <motion.div
+        className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-xl border border-secondary bg-primary p-6 shadow-2xl"
+        initial={{ scale: 0.95, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0.95, opacity: 0 }}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="mb-6 flex items-center justify-between">
+          <h2 className="font-display text-display-xs text-primary">Create Campaign</h2>
+          <Button size="sm" color="tertiary" onClick={onClose}>
+            ✕
+          </Button>
+        </div>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-5">
+          {/* Campaign ID */}
+          <Controller
+            name="campaignId"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Input
+                label="Campaign ID"
+                placeholder="1"
+                hint={fieldState.error?.message ?? 'Unique numeric ID for this campaign'}
+                type="number"
+                value={field.value?.toString() ?? ''}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                isInvalid={!!fieldState.error}
+              />
+            )}
+          />
+
+          {/* Content CIDs */}
+          <Controller
+            name="cids"
+            control={control}
+            render={({ field, fieldState }) => (
+              <TextArea
+                label="Content CIDs"
+                placeholder="One CID per line (max 10)"
+                hint={fieldState.error?.message ?? 'Arweave or IPFS content identifiers'}
+                value={String(field.value ?? '')}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                isInvalid={!!fieldState.error}
+              />
+            )}
+          />
+
+          {/* Payment */}
+          <div className="grid grid-cols-2 gap-4">
+            <Controller
+              name="bountyPerPlay"
+              control={control}
+              render={({ field, fieldState }) => (
+                <Input
+                  label="Bounty per Play"
+                  placeholder="0.05"
+                  hint={fieldState.error?.message ?? 'SOL per confirmed play'}
+                  type="number"
+                  value={field.value?.toString() ?? ''}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                  isInvalid={!!fieldState.error}
+                />
+              )}
+            />
+            <Controller
+              name="totalPlays"
+              control={control}
+              render={({ field, fieldState }) => (
+                <Input
+                  label="Total Plays"
+                  placeholder="1000"
+                  hint={fieldState.error?.message ?? 'Total number of plays to fund'}
+                  type="number"
+                  value={field.value?.toString() ?? ''}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                  isInvalid={!!fieldState.error}
+                />
+              )}
+            />
+          </div>
+
+          <Controller
+            name="claimCooldown"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Input
+                label="Claim Cooldown"
+                placeholder="300"
+                hint={fieldState.error?.message ?? 'Seconds between consecutive claims'}
+                type="number"
+                value={field.value?.toString() ?? ''}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                isInvalid={!!fieldState.error}
+              />
+            )}
+          />
+
+          {/* Tags */}
+          <div>
+            <p className="mb-2 text-sm font-medium text-secondary">Content Tags</p>
+            <div className="flex flex-wrap gap-3">
+              {TAG_BITS.map(({ bit, label }) => {
+                const b = Number(bit);
+                return (
+                  <Checkbox
+                    key={b}
+                    label={label}
+                    size="sm"
+                    isSelected={(tagMask & b) !== 0}
+                    onChange={() => toggleTag(b)}
+                  />
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Target Filters */}
+          <div className="rounded-lg border border-secondary bg-secondary p-4">
+            <p className="mb-3 text-sm font-medium text-secondary">Target Filters</p>
+            <div className="grid grid-cols-2 gap-4">
+              <Controller
+                name="minFootfall"
+                control={control}
+                render={({ field }) => (
+                  <Input
+                    label="Min Footfall"
+                    placeholder="0"
+                    type="number"
+                    size="sm"
+                    value={field.value?.toString() ?? ''}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+              <Controller
+                name="maxFootfall"
+                control={control}
+                render={({ field }) => (
+                  <Input
+                    label="Max Footfall"
+                    placeholder="∞"
+                    type="number"
+                    size="sm"
+                    value={field.value?.toString() ?? ''}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+            </div>
+
+            <div className="mt-4">
+              <p className="mb-2 text-xs font-medium text-tertiary">Screen Sizes</p>
+              <div className="flex flex-wrap gap-3">
+                {SCREEN_SIZES.map(size => {
+                  const label = screenSizeLabel(size);
+                  return (
+                    <Checkbox
+                      key={size}
+                      label={label}
+                      size="sm"
+                      isSelected={screenSizes.includes(label)}
+                      onChange={() => toggleScreenSize(label)}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="mt-4 grid grid-cols-2 gap-4">
+              <Controller
+                name="establishmentTypes"
+                control={control}
+                render={({ field }) => (
+                  <Input
+                    label="Establishment Types"
+                    placeholder="Mall, Transit Hub"
+                    hint="Comma-separated"
+                    size="sm"
+                    value={field.value ?? ''}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+              <Controller
+                name="requiredLandmarks"
+                control={control}
+                render={({ field }) => (
+                  <Input
+                    label="Required Landmarks"
+                    placeholder="Times Square"
+                    hint="Comma-separated"
+                    size="sm"
+                    value={field.value ?? ''}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+            </div>
+
+            <div className="mt-4">
+              <p className="mb-2 text-xs font-medium text-tertiary">
+                Geo Bounds (decimal degrees)
+              </p>
+              <div className="grid grid-cols-4 gap-2">
+                <Controller
+                  name="geoBoundsMinLat"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      placeholder="Min Lat"
+                      size="sm"
+                      type="number"
+                      value={field.value?.toString() ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+                <Controller
+                  name="geoBoundsMaxLat"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      placeholder="Max Lat"
+                      size="sm"
+                      type="number"
+                      value={field.value?.toString() ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+                <Controller
+                  name="geoBoundsMinLon"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      placeholder="Min Lon"
+                      size="sm"
+                      type="number"
+                      value={field.value?.toString() ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+                <Controller
+                  name="geoBoundsMaxLon"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      placeholder="Max Lon"
+                      size="sm"
+                      type="number"
+                      value={field.value?.toString() ?? ''}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Submit */}
+          <div className="flex justify-end gap-3 border-t border-secondary pt-4">
+            <Button size="md" color="secondary" onClick={onClose} type="button">
+              Cancel
+            </Button>
+            <Button size="md" iconLeading={Send01} type="submit" isDisabled={submitting}>
+              {submitting ? (
+                <span className="flex items-center gap-2">
+                  <Loading01 className="size-4 animate-spin" />
+                  Creating...
+                </span>
+              ) : (
+                'Create Campaign'
+              )}
+            </Button>
+          </div>
+        </form>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+// --- Helper sub-components for empty states ---
+
+function ConnectWalletPrompt() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4">
+      <Eye className="size-12 text-quaternary" />
+      <h2 className="font-display text-display-xs text-primary">Connect Your Wallet</h2>
+      <p className="max-w-sm text-center text-sm text-tertiary">
+        Connect a Solana wallet to access the publisher dashboard, create campaigns, and
+        manage your content distribution.
+      </p>
+    </div>
+  );
+}
+
+function RegisterPublisherPrompt({
+  service,
+  wallet,
+  onRegistered,
+}: {
+  service: SamizdatService;
+  wallet: UiWalletAccount;
+  onRegistered: () => void;
+}) {
+  const [busy, setBusy] = useState(false);
+
+  const handleRegister = async () => {
+    setBusy(true);
+    try {
+      await service.registerPublisher();
+      // Poll until the account is queryable
+      await pollUntilReady(() => service.getPublisher(wallet.address), {
+        resourceName: 'Publisher account',
+      });
+      onRegistered();
+    } catch (err) {
+      console.error('Register publisher failed:', err);
+      alert(`Failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4">
+      <Send01 className="size-12 text-quaternary" />
+      <h2 className="font-display text-display-xs text-primary">Register as Publisher</h2>
+      <p className="max-w-sm text-center text-sm text-tertiary">
+        You need to register a publisher account before creating campaigns. This is a
+        one-time on-chain registration.
+      </p>
+      <Button size="md" iconLeading={Plus} onClick={handleRegister} isDisabled={busy}>
+        {busy ? (
+          <span className="flex items-center gap-2">
+            <Loading01 className="size-4 animate-spin" />
+            Registering...
+          </span>
+        ) : (
+          'Register Publisher'
+        )}
+      </Button>
+    </div>
+  );
+}
+
+// ============================================================================
+// Main Page
+// ============================================================================
+
+export function PublisherDashboardPage() {
+  const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
+
+  if (!selectedWalletAccount) {
+    return (
+      <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+        <ConnectWalletPrompt />
+      </div>
+    );
+  }
+
+  return <PublisherDashboardContent selectedWallet={selectedWalletAccount} />;
+}
+
+function PublisherDashboardContent({
+  selectedWallet,
+}: {
+  selectedWallet: UiWalletAccount;
+}) {
+  const service = useSamizdatService();
+
+  const [publisher, setPublisher] = useState<WithAddress<PublisherAccount> | null>(null);
+  const [campaigns, setCampaigns] = useState<WithAddress<CampaignAccount>[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [checkedPublisher, setCheckedPublisher] = useState(false);
+
+  const [selectedCampaign, setSelectedCampaign] =
+    useState<WithAddress<CampaignAccount> | null>(null);
+  const [showCreate, setShowCreate] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<CampaignStatus | 'all'>('all');
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const pub = await service.getPublisher(selectedWallet.address);
+      setPublisher(pub);
+      setCheckedPublisher(true);
+      if (pub) {
+        const camps = await service.getCampaigns();
+        const publisherCampaigns = camps.filter(
+          campaign => campaign.publisherAccount === pub.address
+        );
+
+        setCampaigns(publisherCampaigns);
+      }
+    } catch (err) {
+      console.error('Failed to fetch publisher data:', err);
+      setCheckedPublisher(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [service, selectedWallet]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // --- Loading ---
+  if (loading && !checkedPublisher) {
+    return (
+      <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+        <div className="flex min-h-[40vh] flex-col items-center justify-center gap-3">
+          <Loading01 className="size-8 animate-spin text-brand-500" />
+          <p className="font-mono text-sm text-tertiary">Loading on-chain data...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // --- No publisher account ---
+  if (!publisher) {
+    return (
+      <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+        <RegisterPublisherPrompt
+          service={service}
+          wallet={selectedWallet!}
+          onRegistered={fetchData}
+        />
+      </div>
+    );
+  }
+
+  // --- Computed stats ---
+  const filteredCampaigns =
+    statusFilter === 'all' ? campaigns : campaigns.filter(c => c.status === statusFilter);
+
+  const statusIcon = {
+    [CampaignStatus.Active]: CheckCircle,
+    [CampaignStatus.Paused]: PauseCircle,
+    [CampaignStatus.Depleted]: AlertCircle,
+    [CampaignStatus.Closed]: XCircle,
+  };
+
+  const activeCampaigns = campaigns.filter(
+    c => c.status === CampaignStatus.Active
+  ).length;
+  const totalPlays = campaigns.reduce((s, c) => s + num(c.playsCompleted), 0);
+  const totalSpent = campaigns.reduce(
+    (s, c) => s + num(c.playsCompleted) * num(c.bountyPerPlay),
+    0
+  );
+
+  return (
+    <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+      {/* Header */}
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="font-display text-display-sm text-primary">
+            Publisher Dashboard
+          </h1>
+          <p className="mt-1 font-mono text-xs text-quaternary">
+            {shortenAddress(publisher.address, 8)}
+          </p>
+        </div>
+        <Button size="md" iconLeading={Plus} onClick={() => setShowCreate(true)}>
+          Create Campaign
+        </Button>
+      </div>
+
+      {/* Stats Row */}
+      <div className="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
+        <div className="rounded-xl border border-secondary bg-secondary p-5">
+          <div className="flex items-center gap-2 text-xs text-tertiary">
+            <Eye className="size-4" />
+            Total Campaigns
+          </div>
+          <p className="mt-2 font-mono text-2xl font-semibold text-primary">
+            {campaigns.length}
+          </p>
+        </div>
+        <div className="rounded-xl border border-secondary bg-secondary p-5">
+          <div className="flex items-center gap-2 text-xs text-tertiary">
+            <Zap className="size-4 text-success-500" />
+            Active
+          </div>
+          <p className="mt-2 font-mono text-2xl font-semibold text-success-500">
+            {activeCampaigns}
+          </p>
+        </div>
+        <div className="rounded-xl border border-secondary bg-secondary p-5">
+          <div className="flex items-center gap-2 text-xs text-tertiary">
+            <Clock className="size-4" />
+            Total Plays
+          </div>
+          <p className="mt-2 font-mono text-2xl font-semibold text-primary">
+            {totalPlays.toLocaleString()}
+          </p>
+        </div>
+        <div className="rounded-xl border border-secondary bg-secondary p-5">
+          <div className="flex items-center gap-2 text-xs text-tertiary">
+            <CurrencyDollar className="size-4 text-brand-500" />
+            Total Spent
+          </div>
+          <p className="mt-2 font-mono text-2xl font-semibold text-brand-500">
+            {lamportsToSol(totalSpent).toFixed(2)} SOL
+          </p>
+        </div>
+      </div>
+
+      {/* Filter Tabs */}
+      <div className="mb-4 flex items-center gap-2 overflow-x-auto">
+        {(['all', ...CAMPAIGN_STATUSES] as const).map(status => (
+          <button
+            key={status}
+            onClick={() => setStatusFilter(status)}
+            className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition duration-100 ${
+              statusFilter === status
+                ? 'bg-active text-primary'
+                : 'text-tertiary hover:text-secondary'
+            }`}
+          >
+            {status !== 'all' &&
+              (() => {
+                const Icon = statusIcon[status];
+                return <Icon className="size-3.5" />;
+              })()}
+            {status === 'all' ? 'All' : campaignStatusLabel(status)}
+          </button>
+        ))}
+      </div>
+
+      {/* Campaign Table */}
+      <div className="overflow-x-auto rounded-xl border border-secondary">
+        <table className="w-full text-left">
+          <thead>
+            <tr className="border-b border-secondary bg-secondary text-xs text-tertiary">
+              <th className="px-4 py-3 font-medium">ID</th>
+              <th className="px-4 py-3 font-medium">Status</th>
+              <th className="px-4 py-3 font-medium">Bounty</th>
+              <th className="px-4 py-3 font-medium">Progress</th>
+              <th className="px-4 py-3 font-medium">Tags</th>
+              <th className="px-4 py-3 text-right font-medium">Created</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredCampaigns.map(campaign => (
+              <CampaignRow
+                key={String(campaign.campaignId)}
+                campaign={campaign}
+                onSelect={setSelectedCampaign}
+              />
+            ))}
+          </tbody>
+        </table>
+
+        {filteredCampaigns.length === 0 && (
+          <div className="flex flex-col items-center gap-2 py-12 text-tertiary">
+            <Eye className="size-8" />
+            <p className="text-sm">
+              {campaigns.length === 0
+                ? 'No campaigns yet — create your first one'
+                : 'No campaigns match this filter'}
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Modals */}
+      <AnimatePresence>
+        {selectedCampaign && (
+          <CampaignDetail
+            campaign={selectedCampaign}
+            service={service}
+            onClose={() => setSelectedCampaign(null)}
+            onRefresh={fetchData}
+          />
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {showCreate && (
+          <CreateCampaignModal
+            service={service}
+            onClose={() => setShowCreate(false)}
+            onCreated={fetchData}
+          />
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/web/src/pages/twin.tsx b/web/src/pages/twin.tsx
new file mode 100644
index 0000000..9adde92
--- /dev/null
+++ b/web/src/pages/twin.tsx
@@ -0,0 +1,604 @@
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+import {
+  CheckCircle,
+  CurrencyDollar,
+  Loading01,
+  Monitor04,
+  Play,
+  Wifi,
+  WifiOff,
+} from '@untitledui/icons';
+import { AnimatePresence, motion } from 'motion/react';
+
+import { Badge, BadgeWithDot } from '@/components/base/badges/badges';
+import { Button } from '@/components/base/buttons/button';
+import { SelectedWalletAccountContext } from '@/context/selected-wallet-account-context';
+import { useSamizdatService } from '@/providers/samizdat-service-provider';
+import {
+  type CampaignAccount,
+  CampaignStatus,
+  type NodeAccount,
+  type WithAddress,
+  geoToDecimal,
+  lamportsToSol,
+  screenSizeLabel,
+  tagsFromMask,
+} from '@/types/samizdat';
+
+// ============================================================================
+// Digital Twin — split-screen simulated display + control panel
+// ============================================================================
+
+type ScreenState = 'idle' | 'loading' | 'playing' | 'confirming' | 'confirmed';
+
+interface StatusEvent {
+  id: number;
+  message: string;
+  type: 'info' | 'success' | 'error' | 'payment';
+  timestamp: Date;
+}
+
+function NoSignalScreen() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-4">
+      <WifiOff
+        className="size-16 text-gray-600"
+        style={{ animation: 'flicker 3s ease-in-out infinite' }}
+      />
+      <div className="text-center">
+        <p
+          className="font-mono text-2xl font-bold tracking-widest text-gray-500"
+          style={{ animation: 'flicker 3s ease-in-out infinite' }}
+        >
+          NO SIGNAL
+        </p>
+        <p className="mt-2 font-mono text-xs text-gray-600">AWAITING CAMPAIGN CLAIM</p>
+      </div>
+    </div>
+  );
+}
+
+function LoadingScreen() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-4">
+      <motion.div
+        className="size-12 rounded-full border-2 border-brand-500 border-t-transparent"
+        animate={{ rotate: 360 }}
+        transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+      />
+      <p className="font-mono text-sm text-brand-500">LOADING CONTENT...</p>
+    </div>
+  );
+}
+
+function PlayingScreen({ campaign }: { campaign: WithAddress<CampaignAccount> }) {
+  const tags = tagsFromMask(campaign.tagMask);
+
+  return (
+    <motion.div
+      className="flex h-full flex-col items-center justify-center gap-6 p-8"
+      initial={{ opacity: 0, scale: 1.05 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.5 }}
+    >
+      {/* Simulated campaign content */}
+      <div className="flex size-full flex-col items-center justify-center rounded-lg bg-linear-to-br from-brand-600/20 to-brand-500/5 p-8">
+        <motion.div
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ delay: 0.2, duration: 0.5 }}
+        >
+          <Monitor04 className="size-20 text-brand-500" />
+        </motion.div>
+        <motion.p
+          className="mt-4 font-display text-3xl text-primary"
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.4 }}
+        >
+          Campaign #{String(campaign.campaignId)}
+        </motion.p>
+        <motion.p
+          className="mt-2 font-mono text-xs text-quaternary"
+          initial={{ y: 10, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.6 }}
+        >
+          CID: {campaign.cids[0]?.slice(0, 24)}...
+        </motion.p>
+        <motion.div
+          className="mt-4 flex gap-2"
+          initial={{ y: 10, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.8 }}
+        >
+          {tags.map(tag => (
+            <Badge key={tag} color="brand" size="sm" type="pill-color">
+              {tag}
+            </Badge>
+          ))}
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+}
+
+function ConfirmedScreen({
+  payment,
+}: {
+  campaign: WithAddress<CampaignAccount>;
+  payment: bigint | number;
+}) {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-4 p-8">
+      <motion.div
+        initial={{ scale: 0, rotate: -180 }}
+        animate={{ scale: 1, rotate: 0 }}
+        transition={{ type: 'spring', stiffness: 200, damping: 15 }}
+      >
+        <CheckCircle className="size-20 text-success-500" />
+      </motion.div>
+      <motion.p
+        className="font-display text-2xl text-primary"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.3 }}
+      >
+        Play Confirmed
+      </motion.p>
+
+      {/* Payment animation */}
+      <motion.div
+        className="flex items-center gap-2 rounded-lg bg-brand-600/20 px-4 py-2"
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ delay: 0.5, type: 'spring' }}
+      >
+        <motion.div
+          initial={{ x: -40, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          transition={{ delay: 0.7, duration: 0.4 }}
+        >
+          <CurrencyDollar className="size-5 text-brand-500" />
+        </motion.div>
+        <motion.span
+          className="font-mono text-xl font-bold text-brand-500"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.9 }}
+        >
+          +{lamportsToSol(payment)} SOL
+        </motion.span>
+        <motion.span
+          className="text-xs text-tertiary"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 1.1 }}
+        >
+          → Node Operator
+        </motion.span>
+      </motion.div>
+    </div>
+  );
+}
+
+function StatusFeed({ events }: { events: StatusEvent[] }) {
+  const feedRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (feedRef.current) {
+      feedRef.current.scrollTop = feedRef.current.scrollHeight;
+    }
+  }, [events]);
+
+  const typeColors = {
+    info: 'text-tertiary',
+    success: 'text-success-500',
+    error: 'text-error-500',
+    payment: 'text-brand-500',
+  };
+
+  return (
+    <div
+      ref={feedRef}
+      className="flex h-48 flex-col gap-1 overflow-y-auto rounded-lg border border-secondary bg-primary p-3"
+    >
+      {events.length === 0 && (
+        <p className="py-4 text-center font-mono text-xs text-quaternary">
+          No activity yet
+        </p>
+      )}
+      <AnimatePresence>
+        {events.map(event => (
+          <motion.div
+            key={event.id}
+            className="flex items-start gap-2"
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <span className="mt-0.5 font-mono text-[10px] text-quaternary">
+              {event.timestamp.toLocaleTimeString()}
+            </span>
+            <span className={`font-mono text-xs ${typeColors[event.type]}`}>
+              {event.message}
+            </span>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export function DigitalTwinPage() {
+  const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
+
+  if (!selectedWalletAccount) {
+    return (
+      <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+        <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4">
+          <Monitor04 className="size-12 text-quaternary" />
+          <h2 className="font-display text-display-xs text-primary">
+            Connect Your Wallet
+          </h2>
+          <p className="max-w-sm text-center text-sm text-tertiary">
+            Connect a Solana wallet to access the Digital Twin simulator.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return <DigitalTwinContent />;
+}
+
+function DigitalTwinContent() {
+  const service = useSamizdatService();
+  const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
+
+  const [node, setNode] = useState<WithAddress<NodeAccount> | null>(null);
+  const [availableCampaigns, setAvailableCampaigns] = useState<
+    WithAddress<CampaignAccount>[]
+  >([]);
+  const [loading, setLoading] = useState(true);
+
+  const [screenState, setScreenState] = useState<ScreenState>('idle');
+  const [activeCampaign, setActiveCampaign] =
+    useState<WithAddress<CampaignAccount> | null>(null);
+  const [events, setEvents] = useState<StatusEvent[]>([]);
+  const [countdown, setCountdown] = useState<number | null>(null);
+  const eventId = useRef(0);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [n, camps] = await Promise.all([
+        service.getNode(selectedWalletAccount!.address),
+        service.getCampaigns(),
+      ]);
+      setNode(n);
+      setAvailableCampaigns(camps.filter(c => c.status === CampaignStatus.Active));
+    } catch (err) {
+      console.error('Failed to load twin data:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [service, selectedWalletAccount]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const addEvent = useCallback((message: string, type: StatusEvent['type'] = 'info') => {
+    eventId.current += 1;
+    setEvents(prev => [
+      ...prev,
+      { id: eventId.current, message, type, timestamp: new Date() },
+    ]);
+  }, []);
+
+  const handleClaim = useCallback(
+    async (campaign: WithAddress<CampaignAccount>) => {
+      if (screenState !== 'idle' && screenState !== 'confirmed') return;
+      if (!node) return;
+
+      setActiveCampaign(campaign);
+      setScreenState('loading');
+      addEvent(`Claiming Campaign #${String(campaign.campaignId)}...`);
+      addEvent(`CID: ${campaign.cids[0]?.slice(0, 20)}...`, 'info');
+
+      try {
+        const playRecord = await service.claimCampaign(campaign.address, node.address, 0);
+        addEvent('Claim TX confirmed on-chain', 'success');
+
+        // Transition to playing
+        setScreenState('playing');
+        addEvent('Content loaded — now playing', 'success');
+        addEvent(`Bounty: ${lamportsToSol(campaign.bountyPerPlay)} SOL per play`, 'info');
+
+        // Start 5-second countdown
+        let remaining = 5;
+        setCountdown(remaining);
+
+        const interval = setInterval(() => {
+          remaining -= 1;
+          setCountdown(remaining);
+
+          if (remaining <= 0) {
+            clearInterval(interval);
+            setCountdown(null);
+            setScreenState('confirming');
+            addEvent('Play complete — confirming on-chain...', 'info');
+
+            // Confirm play on-chain
+            service
+              .confirmPlay(playRecord.address)
+              .then(() => {
+                setScreenState('confirmed');
+                addEvent('Play confirmed on-chain ✓', 'success');
+                addEvent(
+                  `+${lamportsToSol(campaign.bountyPerPlay)} SOL → Node Operator`,
+                  'payment'
+                );
+                fetchData(); // refresh data
+              })
+              .catch(err => {
+                addEvent(
+                  `Confirm failed: ${err instanceof Error ? err.message : String(err)}`,
+                  'error'
+                );
+                setScreenState('idle');
+              });
+          }
+        }, 1000);
+      } catch (err) {
+        addEvent(
+          `Claim failed: ${err instanceof Error ? err.message : String(err)}`,
+          'error'
+        );
+        setScreenState('idle');
+        setActiveCampaign(null);
+      }
+    },
+    [screenState, addEvent, service, node, fetchData]
+  );
+
+  const handleReset = useCallback(() => {
+    setScreenState('idle');
+    setActiveCampaign(null);
+    setCountdown(null);
+    addEvent('Screen reset to idle', 'info');
+  }, [addEvent]);
+
+  // --- Loading ---
+  if (loading) {
+    return (
+      <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+        <div className="flex min-h-[40vh] flex-col items-center justify-center gap-3">
+          <Loading01 className="size-8 animate-spin text-brand-500" />
+          <p className="font-mono text-sm text-tertiary">Loading on-chain data...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // --- No node ---
+  if (!node) {
+    return (
+      <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+        <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4">
+          <Monitor04 className="size-12 text-quaternary" />
+          <h2 className="font-display text-display-xs text-primary">
+            No Node Registered
+          </h2>
+          <p className="max-w-sm text-center text-sm text-tertiary">
+            Register a display node first on the Node Operator page before using the
+            Digital Twin.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-360 px-4 py-8 md:px-8">
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="font-display text-display-sm text-primary">Digital Twin</h1>
+        <p className="mt-1 text-sm text-tertiary">
+          Simulate the full claim → display → confirm → pay cycle
+        </p>
+      </div>
+
+      {/* Split Layout */}
+      <div className="grid gap-6 lg:grid-cols-5">
+        {/* Left: Simulated Display — 3 cols */}
+        <div className="lg:col-span-3">
+          <div className="overflow-hidden rounded-xl border border-secondary bg-[#0a0a0a]">
+            {/* Screen chrome */}
+            <div className="flex items-center justify-between border-b border-gray-800 px-4 py-2">
+              <div className="flex items-center gap-2">
+                <Monitor04 className="size-4 text-gray-600" />
+                <span className="font-mono text-xs text-gray-600">
+                  NODE #{String(node.nodeId)} — {screenSizeLabel(node.screenSize)}{' '}
+                  {node.resolution.width}×{node.resolution.height}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                {screenState === 'playing' && countdown !== null && (
+                  <span className="font-mono text-xs text-brand-500">
+                    {countdown}s remaining
+                  </span>
+                )}
+                {screenState !== 'idle' ? (
+                  <Wifi className="size-3.5 text-success-500" />
+                ) : (
+                  <WifiOff className="size-3.5 text-gray-600" />
+                )}
+              </div>
+            </div>
+
+            {/* Screen content — 16:9 */}
+            <div className="scanline-overlay relative aspect-video">
+              <div className="relative z-10 h-full">
+                <AnimatePresence mode="wait">
+                  {screenState === 'idle' && (
+                    <motion.div
+                      key="idle"
+                      className="h-full"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                    >
+                      <NoSignalScreen />
+                    </motion.div>
+                  )}
+                  {screenState === 'loading' && (
+                    <motion.div
+                      key="loading"
+                      className="h-full"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                    >
+                      <LoadingScreen />
+                    </motion.div>
+                  )}
+                  {(screenState === 'playing' || screenState === 'confirming') &&
+                    activeCampaign && (
+                      <motion.div
+                        key="playing"
+                        className="h-full"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                      >
+                        <PlayingScreen campaign={activeCampaign} />
+                      </motion.div>
+                    )}
+                  {screenState === 'confirmed' && activeCampaign && (
+                    <motion.div
+                      key="confirmed"
+                      className="h-full"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                    >
+                      <ConfirmedScreen
+                        campaign={activeCampaign}
+                        payment={activeCampaign.bountyPerPlay}
+                      />
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+          </div>
+
+          {/* Screen controls */}
+          <div className="mt-3 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="inline-block size-2 pulse-dot rounded-full bg-brand-500" />
+              <span className="font-mono text-xs text-tertiary uppercase">
+                {screenState === 'idle' && 'Standby'}
+                {screenState === 'loading' && 'Loading...'}
+                {screenState === 'playing' && 'Now Playing'}
+                {screenState === 'confirming' && 'Confirming...'}
+                {screenState === 'confirmed' && 'Confirmed'}
+              </span>
+            </div>
+            {(screenState === 'confirmed' || screenState === 'idle') && (
+              <Button size="sm" color="secondary" onClick={handleReset}>
+                Reset Screen
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Right: Control Panel — 2 cols */}
+        <div className="flex flex-col gap-4 lg:col-span-2">
+          {/* Node Info */}
+          <div className="rounded-xl border border-secondary bg-secondary p-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-semibold text-primary">Node Control</span>
+              <BadgeWithDot color="success" type="modern" size="sm">
+                Online
+              </BadgeWithDot>
+            </div>
+            <div className="mt-3 grid grid-cols-2 gap-3 text-xs">
+              <div>
+                <span className="text-quaternary">Location</span>
+                <p className="font-mono text-primary">
+                  {(() => {
+                    const lat = geoToDecimal(node.location.latitude);
+                    const lon = geoToDecimal(node.location.longitude);
+                    const latDir = lat >= 0 ? 'N' : 'S';
+                    const lonDir = lon >= 0 ? 'E' : 'W';
+                    return `${Math.abs(lat).toFixed(2)}°${latDir}, ${Math.abs(lon).toFixed(2)}°${lonDir}`;
+                  })()}
+                </p>
+              </div>
+              <div>
+                <span className="text-quaternary">Footfall</span>
+                <p className="font-mono text-primary">
+                  {node.estimatedFootfall.toLocaleString()}/day
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Claimable Campaigns */}
+          <div className="rounded-xl border border-secondary bg-secondary p-4">
+            <p className="mb-3 text-sm font-semibold text-primary">Claimable Campaigns</p>
+            <div className="flex flex-col gap-2">
+              {availableCampaigns.map(campaign => {
+                const tags = tagsFromMask(campaign.tagMask);
+                const isDisabled = screenState !== 'idle' && screenState !== 'confirmed';
+
+                return (
+                  <div
+                    key={String(campaign.campaignId)}
+                    className="flex items-center justify-between rounded-lg border border-secondary bg-primary p-3"
+                  >
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="font-mono text-sm font-medium text-primary">
+                          #{String(campaign.campaignId)}
+                        </span>
+                        <span className="font-mono text-xs text-brand-500">
+                          {lamportsToSol(campaign.bountyPerPlay)} SOL
+                        </span>
+                      </div>
+                      <div className="mt-1 flex gap-1">
+                        {tags.map(tag => (
+                          <Badge key={tag} color="brand" size="sm" type="pill-color">
+                            {tag}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                    <Button
+                      size="sm"
+                      iconLeading={Play}
+                      isDisabled={isDisabled}
+                      onClick={() => handleClaim(campaign)}
+                    >
+                      Claim
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Status Feed */}
+          <div>
+            <p className="mb-2 text-sm font-semibold text-primary">Activity Log</p>
+            <StatusFeed events={events} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/providers/samizdat-service-provider.tsx b/web/src/providers/samizdat-service-provider.tsx
new file mode 100644
index 0000000..ffc5d95
--- /dev/null
+++ b/web/src/providers/samizdat-service-provider.tsx
@@ -0,0 +1,155 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+
+import { useWalletAccountTransactionSendingSigner } from '@solana/react';
+
+import { ChainContext } from '@/context/chain-context';
+import { ConnectionContext } from '@/context/connection-context';
+import { SelectedWalletAccountContext } from '@/context/selected-wallet-account-context';
+import { SamizdatBlockchainService } from '@/services/samizdat-service';
+import type { WithAddress } from '@/types/samizdat';
+
+import type {
+  CampaignAccount,
+  CreateCampaignInstructionDataArgs,
+  NodeAccount,
+  PlayRecord,
+  PublisherAccount,
+  RegisterNodeInstructionDataArgs,
+  UpdateCampaignInstructionDataArgs,
+  UpdateNodeMetadataInstructionDataArgs,
+} from '@client/index';
+
+// ============================================================================
+// Samizdat Service — interface for blockchain interactions.
+//
+// Uses generated Codama types directly. All account data returned with
+// `WithAddress<T>` so callers always have the on-chain PDA address.
+// ============================================================================
+
+export interface SamizdatService {
+  // Publisher
+  registerPublisher(): Promise<WithAddress<PublisherAccount>>;
+  getPublisher(authority: string): Promise<WithAddress<PublisherAccount> | null>;
+
+  // Campaigns
+  createCampaign(
+    args: CreateCampaignInstructionDataArgs
+  ): Promise<WithAddress<CampaignAccount>>;
+  getCampaigns(): Promise<WithAddress<CampaignAccount>[]>;
+  getCampaign(address: string): Promise<WithAddress<CampaignAccount> | null>;
+  fundCampaign(campaignAddress: string, amount: number): Promise<void>;
+  updateCampaign(
+    campaignAddress: string,
+    args: UpdateCampaignInstructionDataArgs
+  ): Promise<void>;
+  addCidsToCampaign(campaignAddress: string, newCids: string[]): Promise<void>;
+  closeCampaign(campaignAddress: string): Promise<void>;
+
+  // Node Operator
+  registerNode(args: RegisterNodeInstructionDataArgs): Promise<WithAddress<NodeAccount>>;
+  getNode(authority: string): Promise<WithAddress<NodeAccount> | null>;
+  updateNodeMetadata(
+    nodeAddress: string,
+    args: UpdateNodeMetadataInstructionDataArgs
+  ): Promise<void>;
+
+  // Play Cycle
+  claimCampaign(
+    campaignAddress: string,
+    nodeAddress: string,
+    cidIndex: number
+  ): Promise<WithAddress<PlayRecord>>;
+  confirmPlay(playRecordAddress: string): Promise<void>;
+  timeoutPlay(playRecordAddress: string): Promise<void>;
+  getPlayRecords(): Promise<WithAddress<PlayRecord>[]>;
+}
+
+const SamizdatServiceContext = createContext<SamizdatService | null>(null);
+
+export function useSamizdatService(): SamizdatService {
+  const ctx = useContext(SamizdatServiceContext);
+
+  if (!ctx) {
+    throw new Error('useSamizdatService must be used within a SamizdatServiceProvider');
+  }
+
+  return ctx;
+}
+
+interface SamizdatServiceProviderProps {
+  children: ReactNode;
+  service: SamizdatService;
+}
+
+export function SamizdatServiceProvider({
+  children,
+  service,
+}: SamizdatServiceProviderProps) {
+  return (
+    <SamizdatServiceContext.Provider value={service}>
+      {children}
+    </SamizdatServiceContext.Provider>
+  );
+}
+
+// ============================================================================
+// Connected provider — instantiates the real service with wallet signer
+// ============================================================================
+
+/**
+ * Wraps children with SamizdatServiceProvider when a wallet is connected.
+ * When no wallet is connected, the service context is null (callers should
+ * check via useSamizdatService which will throw if used without a wallet).
+ */
+export function SamizdatServiceProviderConnected({ children }: { children: ReactNode }) {
+  const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
+  const { chain } = useContext(ChainContext);
+  const { connection } = useContext(ConnectionContext);
+
+  // Only create the signer + service when a wallet account is selected
+  if (!selectedWalletAccount) {
+    return (
+      <SamizdatServiceContext.Provider value={null}>
+        {children}
+      </SamizdatServiceContext.Provider>
+    );
+  }
+
+  return (
+    <SamizdatServiceProviderInner chain={chain} connection={connection}>
+      {children}
+    </SamizdatServiceProviderInner>
+  );
+}
+
+/**
+ * Inner component that calls hooks unconditionally (hooks can't be conditional).
+ */
+function SamizdatServiceProviderInner({
+  children,
+  chain,
+  connection,
+}: {
+  children: ReactNode;
+  chain: `solana:${string}`;
+  connection: import('solana-kite').Connection;
+}) {
+  const [selectedWalletAccount] = useContext(SelectedWalletAccountContext);
+
+  // This hook must be called unconditionally — guarded by the parent check
+  const transactionSendingSigner = useWalletAccountTransactionSendingSigner(
+    selectedWalletAccount!,
+    chain
+  );
+
+  const service = useMemo(
+    () => new SamizdatBlockchainService(connection, transactionSendingSigner),
+    [connection, transactionSendingSigner]
+  );
+
+  return (
+    <SamizdatServiceContext.Provider value={service}>
+      {children}
+    </SamizdatServiceContext.Provider>
+  );
+}
diff --git a/web/src/services/samizdat-service.ts b/web/src/services/samizdat-service.ts
new file mode 100644
index 0000000..9995c27
--- /dev/null
+++ b/web/src/services/samizdat-service.ts
@@ -0,0 +1,332 @@
+/**
+ * Samizdat blockchain service — real implementation using Codama-generated
+ * client and solana-kite for connection management.
+ */
+import {
+  CAMPAIGN_ACCOUNT_DISCRIMINATOR,
+  NODE_ACCOUNT_DISCRIMINATOR,
+  PLAY_RECORD_DISCRIMINATOR,
+  SAMIZDAT_PROGRAM_ADDRESS,
+  fetchMaybeCampaignAccount,
+  fetchMaybeNodeAccount,
+  fetchMaybePlayRecord,
+  fetchMaybePublisherAccount,
+  getAddCidsToCampaignInstructionAsync,
+  getCampaignAccountDecoder,
+  getClaimCampaignInstructionAsync,
+  getCloseCampaignInstructionAsync,
+  getConfirmPlayInstruction,
+  getCreateCampaignInstructionAsync,
+  getFundCampaignInstructionAsync,
+  getNodeAccountDecoder,
+  getPlayRecordDecoder,
+  getRegisterNodeInstructionAsync,
+  getRegisterPublisherInstructionAsync,
+  getTimeoutPlayInstruction,
+  getUpdateCampaignInstructionAsync,
+  getUpdateNodeMetadataInstruction,
+} from '@client/index';
+import {
+  type Address,
+  type TransactionSendingSigner,
+  type TransactionSigner,
+  address as toAddress,
+  appendTransactionMessageInstructions,
+  createTransactionMessage,
+  lamports,
+  pipe,
+  setTransactionMessageFeePayerSigner,
+  setTransactionMessageLifetimeUsingBlockhash,
+  signAndSendTransactionMessageWithSigners,
+} from '@solana/kit';
+
+import type { SamizdatService } from '@/providers/samizdat-service-provider';
+import type { WithAddress } from '@/types/samizdat';
+import { pollUntilReady } from '@/utils/poll-until-ready';
+
+import type {
+  CampaignAccount,
+  CreateCampaignInstructionDataArgs,
+  NodeAccount,
+  PlayRecord,
+  PublisherAccount,
+  RegisterNodeInstructionDataArgs,
+  UpdateCampaignInstructionDataArgs,
+  UpdateNodeMetadataInstructionDataArgs,
+} from '@client/index';
+import type { Connection } from 'solana-kite';
+
+// ─── Service Implementation ─────────────────────────────────────────────────
+
+export class SamizdatBlockchainService implements SamizdatService {
+  constructor(
+    private connection: Connection,
+    private signer: TransactionSendingSigner
+  ) {}
+
+  /** Widen to TransactionSigner for Codama instruction account metas. */
+  private get authority(): TransactionSigner {
+    return this.signer as TransactionSigner;
+  }
+
+  /** Build a v0 tx and let the wallet sign + send via TransactionSendingSigner. */
+  private async sendIx(
+    instructions: Parameters<
+      Connection['sendTransactionFromInstructionsWithWalletApp']
+    >[0]['instructions']
+  ) {
+    const { value: latestBlockhash } = await this.connection.rpc
+      .getLatestBlockhash()
+      .send();
+    const txMsg = pipe(
+      createTransactionMessage({ version: 0 }),
+      m => setTransactionMessageFeePayerSigner(this.signer, m),
+      m => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),
+      m => appendTransactionMessageInstructions(instructions, m)
+    );
+    await signAndSendTransactionMessageWithSigners(txMsg);
+  }
+
+  // ─── Publisher ──────────────────────────────────────────────────────────
+
+  async registerPublisher(): Promise<WithAddress<PublisherAccount>> {
+    const ix = await getRegisterPublisherInstructionAsync({ authority: this.authority });
+    await this.sendIx([ix]);
+    const { pda } = await this.connection.getPDAAndBump(SAMIZDAT_PROGRAM_ADDRESS, [
+      'publisher',
+      this.signer.address,
+    ]);
+    return pollUntilReady(() => this.fetchPublisher(pda), {
+      resourceName: 'Publisher account',
+    });
+  }
+
+  async getPublisher(authority: string): Promise<WithAddress<PublisherAccount> | null> {
+    const { pda } = await this.connection.getPDAAndBump(SAMIZDAT_PROGRAM_ADDRESS, [
+      'publisher',
+      authority,
+    ]);
+    try {
+      return await this.fetchPublisher(pda);
+    } catch {
+      return null;
+    }
+  }
+
+  private async fetchPublisher(addr: Address): Promise<WithAddress<PublisherAccount>> {
+    const acct = await fetchMaybePublisherAccount(this.connection.rpc, addr);
+    if (!acct.exists) throw new Error(`Publisher not found at ${addr}`);
+    return { ...acct.data, address: String(addr) };
+  }
+
+  // ─── Campaigns ──────────────────────────────────────────────────────────
+
+  async createCampaign(
+    args: CreateCampaignInstructionDataArgs
+  ): Promise<WithAddress<CampaignAccount>> {
+    const ix = await getCreateCampaignInstructionAsync({
+      authority: this.authority,
+      ...args,
+    });
+    await this.sendIx([ix]);
+
+    const { pda: publisherPDA } = await this.connection.getPDAAndBump(
+      SAMIZDAT_PROGRAM_ADDRESS,
+      ['publisher', this.signer.address]
+    );
+    const { pda: campaignPDA } = await this.connection.getPDAAndBump(
+      SAMIZDAT_PROGRAM_ADDRESS,
+      ['campaign', publisherPDA, BigInt(args.campaignId)]
+    );
+    return pollUntilReady(() => this.fetchCampaign(campaignPDA), {
+      resourceName: 'Campaign account',
+    });
+  }
+
+  async getCampaigns(): Promise<WithAddress<CampaignAccount>[]> {
+    const getAll = this.connection.getAccountsFactory(
+      SAMIZDAT_PROGRAM_ADDRESS,
+      CAMPAIGN_ACCOUNT_DISCRIMINATOR,
+      getCampaignAccountDecoder()
+    );
+    const accounts = await getAll();
+    return accounts
+      .filter(a => a.exists)
+      .map(a => ({
+        ...(a as { data: CampaignAccount }).data,
+        address: String(a.address),
+      }));
+  }
+
+  async getCampaign(addr: string): Promise<WithAddress<CampaignAccount> | null> {
+    try {
+      return await this.fetchCampaign(toAddress(addr));
+    } catch {
+      return null;
+    }
+  }
+
+  async fundCampaign(campaignAddress: string, amount: number): Promise<void> {
+    const ix = await getFundCampaignInstructionAsync({
+      authority: this.authority,
+      campaignAccount: toAddress(campaignAddress),
+      amount: lamports(BigInt(amount)),
+    });
+    await this.sendIx([ix]);
+  }
+
+  async updateCampaign(
+    campaignAddress: string,
+    args: UpdateCampaignInstructionDataArgs
+  ): Promise<void> {
+    const ix = await getUpdateCampaignInstructionAsync({
+      authority: this.authority,
+      campaignAccount: toAddress(campaignAddress),
+      ...args,
+    });
+    await this.sendIx([ix]);
+  }
+
+  async addCidsToCampaign(campaignAddress: string, newCids: string[]): Promise<void> {
+    const ix = await getAddCidsToCampaignInstructionAsync({
+      authority: this.authority,
+      campaignAccount: toAddress(campaignAddress),
+      newCids,
+    });
+    await this.sendIx([ix]);
+  }
+
+  async closeCampaign(campaignAddress: string): Promise<void> {
+    const ix = await getCloseCampaignInstructionAsync({
+      authority: this.authority,
+      campaignAccount: toAddress(campaignAddress),
+    });
+    await this.sendIx([ix]);
+  }
+
+  // ─── Node Operator ──────────────────────────────────────────────────────
+
+  async registerNode(
+    args: RegisterNodeInstructionDataArgs
+  ): Promise<WithAddress<NodeAccount>> {
+    const ix = await getRegisterNodeInstructionAsync({
+      authority: this.authority,
+      ...args,
+    });
+    await this.sendIx([ix]);
+    const { pda } = await this.connection.getPDAAndBump(SAMIZDAT_PROGRAM_ADDRESS, [
+      'node_account',
+      this.signer.address,
+      BigInt(args.nodeId),
+    ]);
+    return pollUntilReady(() => this.fetchNode(pda), { resourceName: 'Node account' });
+  }
+
+  async getNode(authority: string): Promise<WithAddress<NodeAccount> | null> {
+    const getAll = this.connection.getAccountsFactory(
+      SAMIZDAT_PROGRAM_ADDRESS,
+      NODE_ACCOUNT_DISCRIMINATOR,
+      getNodeAccountDecoder()
+    );
+    const accounts = await getAll();
+    const match = accounts.find(
+      a => a.exists && (a as { data: NodeAccount }).data.authority === authority
+    );
+    if (!match || !match.exists) return null;
+    return { ...(match as { data: NodeAccount }).data, address: String(match.address) };
+  }
+
+  async updateNodeMetadata(
+    nodeAddress: string,
+    args: UpdateNodeMetadataInstructionDataArgs
+  ): Promise<void> {
+    const ix = getUpdateNodeMetadataInstruction({
+      authority: this.authority,
+      nodeAccount: toAddress(nodeAddress),
+      ...args,
+    });
+    await this.sendIx([ix]);
+  }
+
+  // ─── Play Cycle ─────────────────────────────────────────────────────────
+
+  async claimCampaign(
+    campaignAddress: string,
+    nodeAddress: string,
+    cidIndex: number
+  ): Promise<WithAddress<PlayRecord>> {
+    const claimNonce = BigInt(Date.now());
+    const ix = await getClaimCampaignInstructionAsync({
+      authority: this.authority,
+      campaignAccount: toAddress(campaignAddress),
+      nodeAccount: toAddress(nodeAddress),
+      cidIndex,
+      claimNonce,
+    });
+    await this.sendIx([ix]);
+
+    const { pda } = await this.connection.getPDAAndBump(SAMIZDAT_PROGRAM_ADDRESS, [
+      'play_record',
+      campaignAddress,
+      nodeAddress,
+      claimNonce,
+    ]);
+    return pollUntilReady(() => this.fetchPlayRecord(pda), {
+      resourceName: 'Play record',
+    });
+  }
+
+  async confirmPlay(playRecordAddress: string): Promise<void> {
+    const record = await this.fetchPlayRecord(toAddress(playRecordAddress));
+    const campaign = await this.fetchCampaign(record.campaignAccount);
+    const ix = getConfirmPlayInstruction({
+      authority: this.authority,
+      playRecord: toAddress(playRecordAddress),
+      campaignAccount: record.campaignAccount,
+      publisherAccount: campaign.publisherAccount,
+      nodeAccount: record.nodeAccount,
+    });
+    await this.sendIx([ix]);
+  }
+
+  async timeoutPlay(playRecordAddress: string): Promise<void> {
+    const record = await this.fetchPlayRecord(toAddress(playRecordAddress));
+    const ix = getTimeoutPlayInstruction({
+      playRecord: toAddress(playRecordAddress),
+      campaignAccount: record.campaignAccount,
+    });
+    await this.sendIx([ix]);
+  }
+
+  async getPlayRecords(): Promise<WithAddress<PlayRecord>[]> {
+    const getAll = this.connection.getAccountsFactory(
+      SAMIZDAT_PROGRAM_ADDRESS,
+      PLAY_RECORD_DISCRIMINATOR,
+      getPlayRecordDecoder()
+    );
+    const accounts = await getAll();
+    return accounts
+      .filter(a => a.exists)
+      .map(a => ({ ...(a as { data: PlayRecord }).data, address: String(a.address) }));
+  }
+
+  // ─── Private helpers ────────────────────────────────────────────────────
+
+  private async fetchCampaign(addr: Address): Promise<WithAddress<CampaignAccount>> {
+    const acct = await fetchMaybeCampaignAccount(this.connection.rpc, addr);
+    if (!acct.exists) throw new Error(`Campaign not found at ${addr}`);
+    return { ...acct.data, address: String(addr) };
+  }
+
+  private async fetchNode(addr: Address): Promise<WithAddress<NodeAccount>> {
+    const acct = await fetchMaybeNodeAccount(this.connection.rpc, addr);
+    if (!acct.exists) throw new Error(`Node not found at ${addr}`);
+    return { ...acct.data, address: String(addr) };
+  }
+
+  private async fetchPlayRecord(addr: Address): Promise<WithAddress<PlayRecord>> {
+    const acct = await fetchMaybePlayRecord(this.connection.rpc, addr);
+    if (!acct.exists) throw new Error(`PlayRecord not found at ${addr}`);
+    return { ...acct.data, address: String(addr) };
+  }
+}
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 53e3240..9174051 100755
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -119,7 +119,8 @@ input[type='search']::-webkit-search-cancel-button {
 }
 
 @keyframes pulse-dot {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -128,10 +129,23 @@ input[type='search']::-webkit-search-cancel-button {
 }
 
 @keyframes flicker {
-  0%, 100% { opacity: 1; }
-  92% { opacity: 1; }
-  93% { opacity: 0.8; }
-  94% { opacity: 1; }
-  96% { opacity: 0.9; }
-  97% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  92% {
+    opacity: 1;
+  }
+  93% {
+    opacity: 0.8;
+  }
+  94% {
+    opacity: 1;
+  }
+  96% {
+    opacity: 0.9;
+  }
+  97% {
+    opacity: 1;
+  }
 }
diff --git a/web/src/styles/theme.css b/web/src/styles/theme.css
index 1ea0209..aa590ea 100644
--- a/web/src/styles/theme.css
+++ b/web/src/styles/theme.css
@@ -1,9 +1,7 @@
 @theme {
   /* FONT FAMILY */
-  --font-body:
-    'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
-  --font-display:
-    'Instrument Serif', Georgia, 'Times New Roman', serif;
+  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
   --font-mono:
     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
diff --git a/web/src/types/samizdat.ts b/web/src/types/samizdat.ts
index ece4d4a..f7eb137 100644
--- a/web/src/types/samizdat.ts
+++ b/web/src/types/samizdat.ts
@@ -1,169 +1,116 @@
-// ============================================================================
-// Samizdat Protocol Types
-// Mirrors the on-chain account structures from programs/samizdat/src/state/
-// ============================================================================
-
-// --- Enums ---
-
-export enum CampaignStatus {
-  Active = 'Active',
-  Paused = 'Paused',
-  Depleted = 'Depleted',
-  Closed = 'Closed',
-}
+/**
+ * Samizdat Protocol — shared types and helpers.
+ *
+ * All account structs, enums and value types come directly from the
+ * Codama-generated client (`@client/index`). This file re-exports
+ * the ones the UI cares about and adds a thin display-helper layer.
+ */
+
+import {
+  CampaignStatus,
+  NodeStatus,
+  PlayStatus,
+  PublisherStatus,
+  ScreenSize,
+} from '@client/index';
+import { isSome, type Option } from '@solana/kit';
+
+// ─── Re-exports from generated client ───────────────────────────────────────
+
+export { CampaignStatus, NodeStatus, PlayStatus, PublisherStatus, ScreenSize };
+
+export type {
+  CampaignAccount,
+  NodeAccount,
+  PlayRecord,
+  PublisherAccount,
+} from '@client/index';
+
+export type {
+  GeoLocation,
+  GeoBounds,
+  Resolution,
+  TargetFilters,
+  TargetFiltersArgs,
+} from '@client/index';
+
+// ─── Utility: attach a PDA address to an account data struct ────────────────
+
+/** The generated account types don't carry their on-chain address.
+ *  We pair them with the address from the `Account<T>` envelope. */
+export type WithAddress<T> = T & { address: string };
+
+// ─── bigint → number for display ────────────────────────────────────────────
+
+/** Safely coerce bigint/number to JS number for display. */
+export const num = (v: bigint | number): number => Number(v);
+
+// ─── Option<T> unwrapping ───────────────────────────────────────────────────
+
+/** Unwrap Option<T> → T | null (avoids importing isSome in every page). */
+export function unwrap<T>(opt: Option<T>): T | null {
+  return isSome(opt) ? opt.value : null;
+}
+
+// ─── ScreenSize display helpers ─────────────────────────────────────────────
+
+/** The four enum members as a plain array (avoids Object.values quirks). */
+export const SCREEN_SIZES = [
+  ScreenSize.Small,
+  ScreenSize.Medium,
+  ScreenSize.Large,
+  ScreenSize.XLarge,
+] as const;
 
-export enum NodeStatus {
-  Active = 'Active',
-  Offline = 'Offline',
-  Suspended = 'Suspended',
-}
+/** Numeric ScreenSize → human label.  Uses the enum's reverse mapping. */
+export const screenSizeLabel = (s: ScreenSize): string => ScreenSize[s];
 
-export enum PublisherStatus {
-  Active = 'Active',
-  Suspended = 'Suspended',
-}
+/** Form string → numeric enum lookup. */
+export const parseScreenSize = (s: string): ScreenSize =>
+  ScreenSize[s as keyof typeof ScreenSize];
 
-export enum PlayStatus {
-  Claimed = 'Claimed',
-  Paid = 'Paid',
-  TimedOut = 'TimedOut',
-}
+// ─── CampaignStatus display helpers ─────────────────────────────────────────
 
-export enum ScreenSize {
-  Small = 'Small',
-  Medium = 'Medium',
-  Large = 'Large',
-  XLarge = 'XLarge',
-}
+/** The four statuses as a plain array. */
+export const CAMPAIGN_STATUSES = [
+  CampaignStatus.Active,
+  CampaignStatus.Paused,
+  CampaignStatus.Depleted,
+  CampaignStatus.Closed,
+] as const;
 
-// --- Content Tags (bitmask) ---
+/** Numeric CampaignStatus → human label. */
+export const campaignStatusLabel = (s: CampaignStatus): string => CampaignStatus[s];
 
-export const TAG_LABELS: Record<number, string> = {
-  0: 'None',
-  1: 'Crypto',
-  2: 'Betting',
-  4: 'NSFW',
-  8: 'Political',
-  16: 'Alcohol',
-};
+// ─── Content-tag bitmask helpers ────────────────────────────────────────────
 
 export const TAG_BITS = [
-  { bit: 1, label: 'Crypto' },
-  { bit: 2, label: 'Betting' },
-  { bit: 4, label: 'NSFW' },
-  { bit: 8, label: 'Political' },
-  { bit: 16, label: 'Alcohol' },
+  { bit: 1n, label: 'Crypto' },
+  { bit: 2n, label: 'Betting' },
+  { bit: 4n, label: 'NSFW' },
+  { bit: 8n, label: 'Political' },
+  { bit: 16n, label: 'Alcohol' },
 ] as const;
 
-// --- Structs ---
-
-export interface GeoLocation {
-  /** Latitude in fixed-point (degrees × 1e7) */
-  latitude: number;
-  /** Longitude in fixed-point (degrees × 1e7) */
-  longitude: number;
-}
-
-export interface Resolution {
-  width: number;
-  height: number;
-}
-
-export interface GeoBounds {
-  minLat: number;
-  maxLat: number;
-  minLon: number;
-  maxLon: number;
-}
-
-export interface TargetFilters {
-  minFootfall: number | null;
-  maxFootfall: number | null;
-  screenSizes: ScreenSize[];
-  geoBounds: GeoBounds | null;
-  establishmentTypes: string[];
-  requiredLandmarks: string[];
+/** Extract human-readable tag labels from a bitmask. */
+export function tagsFromMask(mask: bigint | number): string[] {
+  const m = BigInt(mask);
+  return TAG_BITS.filter(t => (m & t.bit) !== 0n).map(t => t.label);
 }
 
-// --- Account Types ---
-
-export interface PublisherAccount {
-  address: string;
-  authority: string;
-  totalCampaigns: number;
-  totalSpent: number;
-  registeredAt: number;
-  status: PublisherStatus;
-}
-
-export interface CampaignAccount {
-  address: string;
-  publisherAccount: string;
-  campaignId: number;
-  cids: string[];
-  bountyPerPlay: number;
-  playsRemaining: number;
-  playsCompleted: number;
-  tagMask: number;
-  targetFilters: TargetFilters;
-  status: CampaignStatus;
-  claimCooldown: number;
-  createdAt: number;
-}
-
-export interface NodeAccount {
-  address: string;
-  authority: string;
-  nodeId: number;
-  location: GeoLocation;
-  screenSize: ScreenSize;
-  resolution: Resolution;
-  landmarks: string[];
-  blockedTagMask: number;
-  estimatedFootfall: number;
-  establishmentType: string;
-  totalPlays: number;
-  totalEarnings: number;
-  registeredAt: number;
-  status: NodeStatus;
-}
-
-export interface PlayRecord {
-  address: string;
-  campaignAccount: string;
-  nodeAccount: string;
-  nonce: number;
-  claimedAt: number;
-  confirmedAt: number;
-  cidIndex: number;
-  paymentAmount: number;
-  status: PlayStatus;
-}
-
-export interface ClaimCooldown {
-  campaign: string;
-  node: string;
-  lastClaimedAt: number;
-}
-
-// --- Helpers ---
-
-/** Convert fixed-point i64 (× 1e7) to human-readable degrees */
-export function geoToDecimal(fixedPoint: number): number {
-  return fixedPoint / 1e7;
-}
+// ─── Display helpers ────────────────────────────────────────────────────────
 
-/** Convert lamports to SOL */
-export function lamportsToSol(lamports: number): number {
-  return lamports / 1e9;
+/** Convert fixed-point i64 (degrees × 1e7) to decimal degrees. */
+export function geoToDecimal(fixedPoint: bigint | number): number {
+  return Number(BigInt(fixedPoint)) / 1e7;
 }
 
-/** Extract tag labels from a bitmask */
-export function tagsFromMask(mask: number): string[] {
-  return TAG_BITS.filter(t => (mask & t.bit) !== 0).map(t => t.label);
+/** Convert lamports (u64) to SOL. */
+export function lamportsToSol(lamports: bigint | number): number {
+  return Number(BigInt(lamports)) / 1e9;
 }
 
-/** Truncate a Solana address for display */
+/** Truncate a Solana address for display. */
 export function shortenAddress(address: string, chars = 4): string {
   return `${address.slice(0, chars)}...${address.slice(-chars)}`;
 }
diff --git a/web/src/utils/poll-until-ready.ts b/web/src/utils/poll-until-ready.ts
new file mode 100644
index 0000000..ac6f328
--- /dev/null
+++ b/web/src/utils/poll-until-ready.ts
@@ -0,0 +1,40 @@
+/**
+ * Poll an async function until it succeeds or times out.
+ * Useful for fetching newly created on-chain accounts that may not be immediately queryable.
+ */
+export async function pollUntilReady<T>(
+  fn: () => Promise<T>,
+  options: {
+    interval?: number;
+    timeout?: number;
+    resourceName?: string;
+  } = {}
+): Promise<T> {
+  const {
+    interval = 200, // Poll every 200ms
+    timeout = 3000, // Give up after 3 seconds
+    resourceName = 'Account',
+  } = options;
+
+  const startTime = Date.now();
+
+  while (true) {
+    try {
+      return await fn();
+    } catch (error) {
+      const elapsed = Date.now() - startTime;
+
+      if (elapsed >= timeout) {
+        console.log(
+          `${resourceName} could not be fetched after ${timeout}ms. ` +
+            `The transaction may have succeeded, but the account is not yet queryable. ` +
+            `Please refresh the page to try again.`
+        );
+        throw error;
+      }
+
+      // Wait before retrying
+      await new Promise(resolve => setTimeout(resolve, interval));
+    }
+  }
+}
diff --git a/web/src/utils/schemas.ts b/web/src/utils/schemas.ts
new file mode 100644
index 0000000..0710eda
--- /dev/null
+++ b/web/src/utils/schemas.ts
@@ -0,0 +1,117 @@
+import { z } from 'zod';
+
+// ============================================================================
+// Zod Validation Schemas — form validation for Samizdat protocol interactions
+// ============================================================================
+
+// --- Create Campaign ---
+
+export const createCampaignSchema = z.object({
+  campaignId: z.coerce
+    .number({ message: 'Required' })
+    .int('Must be an integer')
+    .positive('Must be positive'),
+  cids: z
+    .string()
+    .min(1, 'At least one CID is required')
+    .transform(val =>
+      val
+        .split('\n')
+        .map(s => s.trim())
+        .filter(Boolean)
+    )
+    .refine(arr => arr.length <= 10, 'Max 10 CIDs')
+    .refine(
+      arr => arr.every(s => s.length >= 10),
+      'Each CID must be at least 10 characters'
+    ),
+  bountyPerPlay: z.coerce.number({ message: 'Required' }).positive('Must be positive'),
+  totalPlays: z.coerce
+    .number({ message: 'Required' })
+    .int('Must be an integer')
+    .positive('Must be positive'),
+  claimCooldown: z.coerce
+    .number({ message: 'Required' })
+    .int('Must be an integer')
+    .positive('Must be positive'),
+  tagMask: z.number().int().min(0).default(0),
+
+  // Target filters — optional
+  minFootfall: z.union([z.coerce.number().int().min(0), z.literal('')]).optional(),
+  maxFootfall: z.union([z.coerce.number().int().min(0), z.literal('')]).optional(),
+  screenSizes: z.array(z.string()).default([]),
+  geoBoundsMinLat: z.union([z.coerce.number(), z.literal('')]).optional(),
+  geoBoundsMaxLat: z.union([z.coerce.number(), z.literal('')]).optional(),
+  geoBoundsMinLon: z.union([z.coerce.number(), z.literal('')]).optional(),
+  geoBoundsMaxLon: z.union([z.coerce.number(), z.literal('')]).optional(),
+  establishmentTypes: z.string().optional(),
+  requiredLandmarks: z.string().optional(),
+});
+
+export type CreateCampaignForm = z.infer<typeof createCampaignSchema>;
+export type CreateCampaignFormInput = z.input<typeof createCampaignSchema>;
+
+// --- Register Node ---
+
+export const registerNodeSchema = z.object({
+  nodeId: z.coerce
+    .number({ message: 'Required' })
+    .int('Must be an integer')
+    .positive('Must be positive'),
+  latitude: z.coerce
+    .number({ message: 'Required' })
+    .min(-90, 'Min -90°')
+    .max(90, 'Max 90°'),
+  longitude: z.coerce
+    .number({ message: 'Required' })
+    .min(-180, 'Min -180°')
+    .max(180, 'Max 180°'),
+  screenSize: z.enum(['Small', 'Medium', 'Large', 'XLarge'], {
+    message: 'Select a screen size',
+  }),
+  resolutionWidth: z.coerce
+    .number({ message: 'Required' })
+    .int()
+    .positive('Must be positive'),
+  resolutionHeight: z.coerce
+    .number({ message: 'Required' })
+    .int()
+    .positive('Must be positive'),
+  landmarks: z.string().optional(),
+  blockedTagMask: z.bigint().min(0n).default(0n),
+  estimatedFootfall: z.coerce
+    .number({ message: 'Required' })
+    .int()
+    .min(0, 'Must be non-negative'),
+  establishmentType: z.string().min(1, 'Required'),
+});
+
+export type RegisterNodeForm = z.infer<typeof registerNodeSchema>;
+
+// --- Update Node Settings ---
+
+export const updateNodeSettingsSchema = z.object({
+  latitude: z.coerce
+    .number({ message: 'Required' })
+    .min(-90, 'Min -90°')
+    .max(90, 'Max 90°'),
+  longitude: z.coerce
+    .number({ message: 'Required' })
+    .min(-180, 'Min -180°')
+    .max(180, 'Max 180°'),
+  estimatedFootfall: z.coerce
+    .number({ message: 'Required' })
+    .int()
+    .min(0, 'Must be non-negative'),
+  blockedTagMask: z.bigint().min(0n).default(0n),
+});
+
+export type UpdateNodeSettingsForm = z.infer<typeof updateNodeSettingsSchema>;
+
+// --- Fund Campaign ---
+
+export const fundCampaignSchema = z.object({
+  amount: z.coerce.number({ message: 'Required' }).positive('Must be positive'),
+});
+
+export type FundCampaignForm = z.infer<typeof fundCampaignSchema>;