diff --git a/packages/web/public/tokens/alter-ego.png b/packages/web/public/tokens/alter-ego.png
new file mode 100644
index 0000000..95ae125
Binary files /dev/null and b/packages/web/public/tokens/alter-ego.png differ
diff --git a/packages/web/public/tokens/boobytrap.png b/packages/web/public/tokens/boobytrap.png
new file mode 100644
index 0000000..402be48
Binary files /dev/null and b/packages/web/public/tokens/boobytrap.png differ
diff --git a/packages/web/public/tokens/dagger.png b/packages/web/public/tokens/dagger.png
new file mode 100644
index 0000000..e45822a
Binary files /dev/null and b/packages/web/public/tokens/dagger.png differ
diff --git a/packages/web/public/tokens/democratic-monster.png b/packages/web/public/tokens/democratic-monster.png
new file mode 100644
index 0000000..490cd4c
Binary files /dev/null and b/packages/web/public/tokens/democratic-monster.png differ
diff --git a/packages/web/public/tokens/destroy-wall.png b/packages/web/public/tokens/destroy-wall.png
new file mode 100644
index 0000000..76d9ccd
Binary files /dev/null and b/packages/web/public/tokens/destroy-wall.png differ
diff --git a/packages/web/public/tokens/dimensional-warp.png b/packages/web/public/tokens/dimensional-warp.png
new file mode 100644
index 0000000..7768ea7
Binary files /dev/null and b/packages/web/public/tokens/dimensional-warp.png differ
diff --git a/packages/web/public/tokens/door.png b/packages/web/public/tokens/door.png
new file mode 100644
index 0000000..d3fc61a
Binary files /dev/null and b/packages/web/public/tokens/door.png differ
diff --git a/packages/web/public/tokens/dustcloud.png b/packages/web/public/tokens/dustcloud.png
new file mode 100644
index 0000000..2114150
Binary files /dev/null and b/packages/web/public/tokens/dustcloud.png differ
diff --git a/packages/web/public/tokens/fire-imp.png b/packages/web/public/tokens/fire-imp.png
new file mode 100644
index 0000000..e8e0ff6
Binary files /dev/null and b/packages/web/public/tokens/fire-imp.png differ
diff --git a/packages/web/public/tokens/fire-wall.png b/packages/web/public/tokens/fire-wall.png
new file mode 100644
index 0000000..67da199
Binary files /dev/null and b/packages/web/public/tokens/fire-wall.png differ
diff --git a/packages/web/public/tokens/illusion-wall.png b/packages/web/public/tokens/illusion-wall.png
new file mode 100644
index 0000000..1645284
Binary files /dev/null and b/packages/web/public/tokens/illusion-wall.png differ
diff --git a/packages/web/public/tokens/jam-lock.png b/packages/web/public/tokens/jam-lock.png
new file mode 100644
index 0000000..f947172
Binary files /dev/null and b/packages/web/public/tokens/jam-lock.png differ
diff --git a/packages/web/public/tokens/killer-ooze.png b/packages/web/public/tokens/killer-ooze.png
new file mode 100644
index 0000000..af069f9
Binary files /dev/null and b/packages/web/public/tokens/killer-ooze.png differ
diff --git a/packages/web/public/tokens/lock-gone.png b/packages/web/public/tokens/lock-gone.png
new file mode 100644
index 0000000..3289cf8
Binary files /dev/null and b/packages/web/public/tokens/lock-gone.png differ
diff --git a/packages/web/public/tokens/magic-stone.png b/packages/web/public/tokens/magic-stone.png
new file mode 100644
index 0000000..80fce27
Binary files /dev/null and b/packages/web/public/tokens/magic-stone.png differ
diff --git a/packages/web/public/tokens/magic-wand.png b/packages/web/public/tokens/magic-wand.png
new file mode 100644
index 0000000..ce36798
Binary files /dev/null and b/packages/web/public/tokens/magic-wand.png differ
diff --git a/packages/web/public/tokens/master-key.png b/packages/web/public/tokens/master-key.png
new file mode 100644
index 0000000..2ac0ea3
Binary files /dev/null and b/packages/web/public/tokens/master-key.png differ
diff --git a/packages/web/public/tokens/pit.png b/packages/web/public/tokens/pit.png
new file mode 100644
index 0000000..b2022e1
Binary files /dev/null and b/packages/web/public/tokens/pit.png differ
diff --git a/packages/web/public/tokens/redirection-a.png b/packages/web/public/tokens/redirection-a.png
new file mode 100644
index 0000000..3fdabd7
Binary files /dev/null and b/packages/web/public/tokens/redirection-a.png differ
diff --git a/packages/web/public/tokens/redirection-b.png b/packages/web/public/tokens/redirection-b.png
new file mode 100644
index 0000000..05a2b54
Binary files /dev/null and b/packages/web/public/tokens/redirection-b.png differ
diff --git a/packages/web/public/tokens/rock.png b/packages/web/public/tokens/rock.png
new file mode 100644
index 0000000..77a5ee8
Binary files /dev/null and b/packages/web/public/tokens/rock.png differ
diff --git a/packages/web/public/tokens/rosebush.png b/packages/web/public/tokens/rosebush.png
new file mode 100644
index 0000000..986b020
Binary files /dev/null and b/packages/web/public/tokens/rosebush.png differ
diff --git a/packages/web/public/tokens/safe.png b/packages/web/public/tokens/safe.png
new file mode 100644
index 0000000..e9c0554
Binary files /dev/null and b/packages/web/public/tokens/safe.png differ
diff --git a/packages/web/public/tokens/shadow.png b/packages/web/public/tokens/shadow.png
new file mode 100644
index 0000000..8ff7404
Binary files /dev/null and b/packages/web/public/tokens/shadow.png differ
diff --git a/packages/web/public/tokens/skeleton.png b/packages/web/public/tokens/skeleton.png
new file mode 100644
index 0000000..89c1937
Binary files /dev/null and b/packages/web/public/tokens/skeleton.png differ
diff --git a/packages/web/public/tokens/slime.png b/packages/web/public/tokens/slime.png
new file mode 100644
index 0000000..f88ce18
Binary files /dev/null and b/packages/web/public/tokens/slime.png differ
diff --git a/packages/web/public/tokens/solid-stone.png b/packages/web/public/tokens/solid-stone.png
new file mode 100644
index 0000000..079262a
Binary files /dev/null and b/packages/web/public/tokens/solid-stone.png differ
diff --git a/packages/web/public/tokens/tacks.png b/packages/web/public/tokens/tacks.png
new file mode 100644
index 0000000..64f8e5d
Binary files /dev/null and b/packages/web/public/tokens/tacks.png differ
diff --git a/packages/web/public/tokens/thorn-bush.png b/packages/web/public/tokens/thorn-bush.png
new file mode 100644
index 0000000..aafb6f6
Binary files /dev/null and b/packages/web/public/tokens/thorn-bush.png differ
diff --git a/packages/web/public/tokens/treasure-0.png b/packages/web/public/tokens/treasure-0.png
new file mode 100644
index 0000000..81b5ff4
Binary files /dev/null and b/packages/web/public/tokens/treasure-0.png differ
diff --git a/packages/web/public/tokens/treasure-1.png b/packages/web/public/tokens/treasure-1.png
new file mode 100644
index 0000000..19ad578
Binary files /dev/null and b/packages/web/public/tokens/treasure-1.png differ
diff --git a/packages/web/public/tokens/treasure-2.png b/packages/web/public/tokens/treasure-2.png
new file mode 100644
index 0000000..e059d16
Binary files /dev/null and b/packages/web/public/tokens/treasure-2.png differ
diff --git a/packages/web/public/tokens/treasure-3.png b/packages/web/public/tokens/treasure-3.png
new file mode 100644
index 0000000..afae37d
Binary files /dev/null and b/packages/web/public/tokens/treasure-3.png differ
diff --git a/packages/web/public/tokens/treasure-4.png b/packages/web/public/tokens/treasure-4.png
new file mode 100644
index 0000000..0e696b9
Binary files /dev/null and b/packages/web/public/tokens/treasure-4.png differ
diff --git a/packages/web/public/tokens/treasure-5.png b/packages/web/public/tokens/treasure-5.png
new file mode 100644
index 0000000..83a45b3
Binary files /dev/null and b/packages/web/public/tokens/treasure-5.png differ
diff --git a/packages/web/public/tokens/troll.png b/packages/web/public/tokens/troll.png
new file mode 100644
index 0000000..2a97319
Binary files /dev/null and b/packages/web/public/tokens/troll.png differ
diff --git a/packages/web/public/tokens/wall-2.png b/packages/web/public/tokens/wall-2.png
new file mode 100644
index 0000000..4cbd004
Binary files /dev/null and b/packages/web/public/tokens/wall-2.png differ
diff --git a/packages/web/public/tokens/wall.png b/packages/web/public/tokens/wall.png
new file mode 100644
index 0000000..2401a78
Binary files /dev/null and b/packages/web/public/tokens/wall.png differ
diff --git a/packages/web/public/tokens/wizard-0.png b/packages/web/public/tokens/wizard-0.png
new file mode 100644
index 0000000..345a9c4
Binary files /dev/null and b/packages/web/public/tokens/wizard-0.png differ
diff --git a/packages/web/public/tokens/wizard-1.png b/packages/web/public/tokens/wizard-1.png
new file mode 100644
index 0000000..255ad67
Binary files /dev/null and b/packages/web/public/tokens/wizard-1.png differ
diff --git a/packages/web/public/tokens/wizard-2.png b/packages/web/public/tokens/wizard-2.png
new file mode 100644
index 0000000..915e83e
Binary files /dev/null and b/packages/web/public/tokens/wizard-2.png differ
diff --git a/packages/web/public/tokens/wizard-3.png b/packages/web/public/tokens/wizard-3.png
new file mode 100644
index 0000000..ab0aa67
Binary files /dev/null and b/packages/web/public/tokens/wizard-3.png differ
diff --git a/packages/web/public/tokens/wizard-4.png b/packages/web/public/tokens/wizard-4.png
new file mode 100644
index 0000000..66ab698
Binary files /dev/null and b/packages/web/public/tokens/wizard-4.png differ
diff --git a/packages/web/public/tokens/wizard-5.png b/packages/web/public/tokens/wizard-5.png
new file mode 100644
index 0000000..86b8fb5
Binary files /dev/null and b/packages/web/public/tokens/wizard-5.png differ
diff --git a/packages/web/public/tokens/wraith.png b/packages/web/public/tokens/wraith.png
new file mode 100644
index 0000000..8d4ab42
Binary files /dev/null and b/packages/web/public/tokens/wraith.png differ
diff --git a/packages/web/src/Board.svelte b/packages/web/src/Board.svelte
index 71344c7..3870a85 100644
--- a/packages/web/src/Board.svelte
+++ b/packages/web/src/Board.svelte
@@ -27,6 +27,36 @@
 
   const PLAYER_COLORS = ["#1a9c46", "#d3352b", "#c9308f", "#3a3ac0", "#2ab0c9", "#c9a72a"];
 
+  // Real token art, cropped from the owner's physical set (public/tokens/).
+  // Anything without an entry falls back to the vector rendering below.
+  const USE_TOKEN_ART = true;
+  const TERRAIN_ART: Record<string, string> = {
+    stone: "solid-stone", thornbush: "thorn-bush", rosebush: "rosebush",
+    ooze: "killer-ooze", dust: "dustcloud", slime: "slime",
+    tacks: "tacks", pit: "pit", safe: "safe",
+  };
+  const CREATURE_ART: Record<string, string> = {
+    skeleton: "skeleton", troll: "troll", wraith: "wraith",
+    "fire-imp": "fire-imp", "democratic-monster": "democratic-monster",
+    shadow: "shadow", "alter-ego": "alter-ego",
+  };
+  function objectArt(cardId: string): string | null {
+    if (cardId === "dagger") return "dagger";
+    if (cardId === "large-rock") return "rock";
+    if (cardId === "master-key") return "master-key";
+    if (cardId.endsWith("stone")) return "magic-stone";
+    if (cardId.endsWith("-wand")) return "magic-wand";
+    return null;
+  }
+  function wizardArt(id: string): string {
+    const idx = view.players.findIndex((p) => p.id === id);
+    return `/tokens/wizard-${((idx % 6) + 6) % 6}.png`;
+  }
+  function treasureArt(owner: string): string {
+    const idx = view.players.findIndex((p) => p.id === owner);
+    return `/tokens/treasure-${((idx % 6) + 6) % 6}.png`;
+  }
+
   function playerColor(id: string): string {
     const idx = view.players.findIndex((p) => p.id === id);
     return PLAYER_COLORS[idx % PLAYER_COLORS.length]!;
@@ -124,11 +154,21 @@
     {#if t.position}
       {@const tx = t.position.x * CELL + CELL / 2}
       {@const ty = t.position.y * CELL + CELL * 0.72}
-      <g class="treasure-g">
-        <circle cx={tx} cy={ty} r={8} class="treasure" fill={playerColor(t.owner)} />
-        <circle cx={tx} cy={ty} r={4.5} class="treasure-swirl" />
-        <circle cx={tx} cy={ty} r={1.6} class="treasure-core" />
-      </g>
+      {#if USE_TOKEN_ART}
+        <image
+          href={treasureArt(t.owner)}
+          x={tx - CELL * 0.26} y={ty - CELL * 0.26}
+          width={CELL * 0.52} height={CELL * 0.52}
+          preserveAspectRatio="xMidYMid slice"
+          class="token-art small"
+        />
+      {:else}
+        <g class="treasure-g">
+          <circle cx={tx} cy={ty} r={8} class="treasure" fill={playerColor(t.owner)} />
+          <circle cx={tx} cy={ty} r={4.5} class="treasure-swirl" />
+          <circle cx={tx} cy={ty} r={1.6} class="treasure-core" />
+        </g>
+      {/if}
     {/if}
   {/each}
 
@@ -136,7 +176,15 @@
   {#each Object.entries(view.squareContents) as [key, content] (key)}
     {@const sx = Number(key.split(",")[0])}
     {@const sy = Number(key.split(",")[1])}
-    {#if content.kind === "stone"}
+    {#if USE_TOKEN_ART && TERRAIN_ART[content.kind]}
+      <image
+        href={`/tokens/${TERRAIN_ART[content.kind]}.png`}
+        x={sx * CELL + 3} y={sy * CELL + 3}
+        width={CELL - 6} height={CELL - 6}
+        preserveAspectRatio="xMidYMid slice"
+        class="token-art"
+      />
+    {:else if content.kind === "stone"}
       <rect x={sx * CELL + 2} y={sy * CELL + 2} width={CELL - 4} height={CELL - 4} class="stone" rx="4" />
     {:else if content.kind === "thornbush" || content.kind === "rosebush"}
       <circle cx={sx * CELL + CELL / 2} cy={sy * CELL + CELL / 2} r={CELL * 0.36}
@@ -158,8 +206,17 @@
   <!-- dimensional warp tokens -->
   {#each view.dimWarps as w, wi (wi)}
     {#each [w.a, w.b] as tok, i (i)}
-      <circle cx={tok.x * CELL + CELL * 0.5} cy={tok.y * CELL + CELL * 0.5} r={CELL * 0.3}
-        class="dimwarp" />
+      {#if USE_TOKEN_ART}
+        <image
+          href="/tokens/dimensional-warp.png"
+          x={tok.x * CELL + CELL * 0.16} y={tok.y * CELL + CELL * 0.16}
+          width={CELL * 0.68} height={CELL * 0.68}
+          preserveAspectRatio="xMidYMid slice" class="token-art"
+        />
+      {:else}
+        <circle cx={tok.x * CELL + CELL * 0.5} cy={tok.y * CELL + CELL * 0.5} r={CELL * 0.3}
+          class="dimwarp" />
+      {/if}
     {/each}
   {/each}
 
@@ -176,12 +233,25 @@
     {@const gx = Number(key.split(",")[0])}
     {@const gy = Number(key.split(",")[1])}
     {#each objects as o, i (o.instanceId)}
-      <rect
-        x={gx * CELL + 6 + i * 8} y={gy * CELL + CELL - 16}
-        width={12} height={10} rx="2" class="ground-object"
-      >
-        <title>{o.cardId}</title>
-      </rect>
+      {@const art = USE_TOKEN_ART ? objectArt(o.cardId) : null}
+      {#if art}
+        <image
+          href={`/tokens/${art}.png`}
+          x={gx * CELL + 4 + i * 9} y={gy * CELL + CELL - CELL * 0.42 - 3}
+          width={CELL * 0.4} height={CELL * 0.4}
+          preserveAspectRatio="xMidYMid slice"
+          class="token-art small"
+        >
+          <title>{o.cardId}</title>
+        </image>
+      {:else}
+        <rect
+          x={gx * CELL + 6 + i * 8} y={gy * CELL + CELL - 16}
+          width={12} height={10} rx="2" class="ground-object"
+        >
+          <title>{o.cardId}</title>
+        </rect>
+      {/if}
     {/each}
   {/each}
 
@@ -259,10 +329,25 @@
         onkeydown={() => {}}
         class="wizard"
       >
-        <circle {cx} {cy} r={12} fill={playerColor(p.id)} stroke="#2b2218" stroke-width="2" />
-        <text x={cx} y={cy + 4} class="wizard-label">{p.id[0]?.toUpperCase()}</text>
+        {#if USE_TOKEN_ART}
+          <image
+            href={wizardArt(p.id)}
+            x={cx - CELL * 0.3} y={cy - CELL * 0.3}
+            width={CELL * 0.6} height={CELL * 0.6}
+            preserveAspectRatio="xMidYMid slice"
+            class="token-art hit"
+          />
+          <rect
+            x={cx - CELL * 0.3} y={cy - CELL * 0.3}
+            width={CELL * 0.6} height={CELL * 0.6}
+            class="wizard-ring" stroke={playerColor(p.id)}
+          />
+        {:else}
+          <circle {cx} {cy} r={12} fill={playerColor(p.id)} stroke="#2b2218" stroke-width="2" />
+          <text x={cx} y={cy + 4} class="wizard-label">{p.id[0]?.toUpperCase()}</text>
+        {/if}
         {#if p.carriedTreasureId}
-          <circle cx={cx + 9} cy={cy + 9} r={5} class="carried" />
+          <circle cx={cx + CELL * 0.26} cy={cy + CELL * 0.26} r={5} class="carried" />
         {/if}
       </g>
     {/each}
@@ -277,16 +362,36 @@
       onclick={(ev) => { ev.stopPropagation(); onCreatureClick?.(c.id); }}
       onkeydown={() => {}}
     >
-      <rect
-        x={ccx - 10} y={ccy - 10} width={20} height={20} rx="3"
-        transform={`rotate(45 ${ccx} ${ccy})`}
-        class="creature-body"
-        class:selected={c.id === selectedCreatureId}
-        stroke={playerColor(c.controllerId)}
-      >
-        <title>{c.kind} ({c.controllerId}) — {c.damage}/{Number.isFinite(c.maxDamage) ? c.maxDamage : "∞"} dmg</title>
-      </rect>
-      <text x={ccx} y={ccy + 4} class="creature-label">{c.kind === "fire-imp" ? "I" : c.kind === "democratic-monster" ? "D" : c.kind[0]?.toUpperCase()}</text>
+      {#if USE_TOKEN_ART && CREATURE_ART[c.kind]}
+        <image
+          href={`/tokens/${CREATURE_ART[c.kind]}.png`}
+          x={ccx - CELL * 0.26} y={ccy - CELL * 0.26}
+          width={CELL * 0.52} height={CELL * 0.52}
+          preserveAspectRatio="xMidYMid slice"
+          class="token-art hit"
+          class:selected-art={c.id === selectedCreatureId}
+        >
+          <title>{c.kind} ({c.controllerId}) — {c.damage}/{Number.isFinite(c.maxDamage) ? c.maxDamage : "∞"} dmg</title>
+        </image>
+        <rect
+          x={ccx - CELL * 0.26} y={ccy - CELL * 0.26}
+          width={CELL * 0.52} height={CELL * 0.52}
+          class="creature-ring"
+          class:selected={c.id === selectedCreatureId}
+          stroke={playerColor(c.controllerId)}
+        />
+      {:else}
+        <rect
+          x={ccx - 10} y={ccy - 10} width={20} height={20} rx="3"
+          transform={`rotate(45 ${ccx} ${ccy})`}
+          class="creature-body"
+          class:selected={c.id === selectedCreatureId}
+          stroke={playerColor(c.controllerId)}
+        >
+          <title>{c.kind} ({c.controllerId}) — {c.damage}/{Number.isFinite(c.maxDamage) ? c.maxDamage : "∞"} dmg</title>
+        </rect>
+        <text x={ccx} y={ccy + 4} class="creature-label">{c.kind === "fire-imp" ? "I" : c.kind === "democratic-monster" ? "D" : c.kind[0]?.toUpperCase()}</text>
+      {/if}
     </g>
   {/each}
 
@@ -349,6 +454,17 @@
   .trap-token { fill: #513c22; stroke: #201709; stroke-width: 1.5; }
   .trap-real { stroke: #d3352b; stroke-width: 2.5; }
   .dimwarp { fill: none; stroke: #5b3f9e; stroke-width: 3.5; stroke-dasharray: 4 3; }
+  .token-art {
+    filter: drop-shadow(0.5px 1.5px 1.5px rgba(10, 8, 4, 0.5));
+    pointer-events: none;
+  }
+  .token-art.hit { pointer-events: auto; cursor: pointer; }
+  .creature-ring, .wizard-ring {
+    fill: none;
+    stroke-width: 2.5;
+    pointer-events: none;
+  }
+  .creature-ring.selected { stroke-width: 4; stroke-dasharray: 5 3; }
   .ground-object { fill: #a6812e; stroke: #4a3a10; stroke-width: 1; }
   .illusion { stroke: #7a6f9a; stroke-width: 4; stroke-dasharray: 6 5; opacity: 0.7; }
   .creature { cursor: pointer; }