diff --git a/solitaire_server/web/index.html b/solitaire_server/web/index.html
index 7338013..1dd18cb 100644
--- a/solitaire_server/web/index.html
+++ b/solitaire_server/web/index.html
@@ -30,6 +30,7 @@
         <section id="board"></section>
 
         <section id="controls">
+            <button id="btn-restart" disabled>⏮ Restart</button>
             <button id="btn-prev" disabled>◀ Back</button>
             <button id="btn-play">▶ Play</button>
             <button id="btn-step">⏭ Step</button>
diff --git a/solitaire_server/web/replay.js b/solitaire_server/web/replay.js
index 23c8c5b..4ae8f10 100644
--- a/solitaire_server/web/replay.js
+++ b/solitaire_server/web/replay.js
@@ -62,6 +62,7 @@ const resultEl = document.getElementById("result");
 const btnPlay = document.getElementById("btn-play");
 const btnStep = document.getElementById("btn-step");
 const btnPrev = document.getElementById("btn-prev");
+const btnRestart = document.getElementById("btn-restart");
 
 let player = null;
 let replayJson = null;
@@ -122,6 +123,7 @@ function resetPlayer() {
     }
     player = new ReplayPlayer(replayJson);
     btnPrev.disabled = true;
+    btnRestart.disabled = true;
     btnStep.disabled = false;
     btnPlay.disabled = false;
     render(player.state());
@@ -134,6 +136,7 @@ function step() {
         return null;
     }
     btnPrev.disabled = false;
+    btnRestart.disabled = false;
     render(snap);
     return snap;
 }
@@ -319,6 +322,7 @@ function stepBack() {
     }
     render(player.state());
     btnPrev.disabled = player.step_idx() === 0;
+    btnRestart.disabled = player.step_idx() === 0;
     btnStep.disabled = false;
     btnPlay.disabled = false;
 }
@@ -327,4 +331,11 @@ btnPrev.addEventListener("click", () => {
     if (player) stepBack();
 });
 
+btnRestart.addEventListener("click", () => {
+    if (!replayJson) return;
+    cardEls.forEach((el) => el.remove());
+    cardEls.clear();
+    resetPlayer();
+});
+
 bootstrap();