diff --git a/src/lib/PromotionDialog.svelte b/src/lib/PromotionDialog.svelte
new file mode 100644
index 0000000..d039db1
--- /dev/null
+++ b/src/lib/PromotionDialog.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { gameStore } from './stores/game.svelte';
+  import type { PromotionPiece } from '../engine/types';
+
+  const PIECES: { code: PromotionPiece; glyph: string }[] = [
+    { code: 'q', glyph: '♛' }, { code: 'r', glyph: '♜' },
+    { code: 'b', glyph: '♝' }, { code: 'n', glyph: '♞' },
+  ];
+
+  let pending = $derived(gameStore.pendingPromotion);
+</script>
+
+{#if pending}
+  <div class="backdrop" onclick={() => gameStore.cancelPromotion()}
+       role="presentation">
+    <div class="dialog" onclick={(e) => e.stopPropagation()} role="presentation">
+      <h3>Promote pawn ({pending.from}→{pending.to})</h3>
+      <div class="row">
+        {#each PIECES as p}
+          <button onclick={() => gameStore.choosePromotion(p.code)}>{p.glyph}</button>
+        {/each}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .backdrop {
+    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
+    display: flex; align-items: center; justify-content: center; z-index: 50;
+  }
+  .dialog {
+    background: #1d2027; border: 1px solid #333845;
+    border-radius: 10px; padding: 18px 22px;
+  }
+  .dialog h3 { margin: 0 0 12px; font-size: 14px; }
+  .row { display: flex; gap: 10px; }
+  .row button {
+    font-size: 38px; line-height: 1; width: 60px; height: 60px;
+    background: #262b34; color: #e6e8ec;
+    border: 1px solid #333845; border-radius: 8px; cursor: pointer;
+  }
+  .row button:hover { border-color: #46c24f; }
+</style>