diff --git a/packages/web/src/app/chess/page.tsx b/packages/web/src/app/chess/page.tsx
index 499ba62..b9f6fd9 100644
--- a/packages/web/src/app/chess/page.tsx
+++ b/packages/web/src/app/chess/page.tsx
@@ -3,6 +3,7 @@
 import { useState, useCallback, useEffect, useRef } from "react";
 import { Chessboard } from "@/components/chess/Chessboard";
 import { createBotGame } from "@/lib/chess-api";
+import { MoveList } from "@/components/chess/MoveList";
 
 const WS_BASE = process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8000";
 
@@ -172,9 +173,7 @@ export default function ChessPage() {
       />
 
       {currentGameState.moves.length > 0 && (
-        <div className="move-list">
-          <strong>Moves:</strong> {currentGameState.moves.join(" ")}
-        </div>
+        <MoveList moves={currentGameState.moves} />
       )}
 
       {error && <p className="error">{error}</p>}
diff --git a/packages/web/src/app/globals.css b/packages/web/src/app/globals.css
index c4f1f68..10e087c 100644
--- a/packages/web/src/app/globals.css
+++ b/packages/web/src/app/globals.css
@@ -268,12 +268,29 @@ body {
 /* Move List */
 .move-list {
   margin-top: 1rem;
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1rem;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
   font-family: monospace;
-  max-width: 480px;
-  word-wrap: break-word;
+}
+
+.move-list-rows {
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 0 0;
+  display: block;
+  grid-template-columns: 2.5rem 1fr 1fr;
+  gap: 0.15rem 0.5rem;
+}
+
+.move-num {
+  opacity: 0.6;
+  text-align: right;
+}
+
+.move-cell {
+  white-space: nowrap;
+  margin-right: 0.5rem;
 }
 
 /* Error */
diff --git a/packages/web/src/components/chess/MoveList.tsx b/packages/web/src/components/chess/MoveList.tsx
new file mode 100644
index 0000000..b0799f7
--- /dev/null
+++ b/packages/web/src/components/chess/MoveList.tsx
@@ -0,0 +1,31 @@
+interface MoveListProps {
+  moves: string[];
+}
+
+export function MoveList({ moves }: MoveListProps) {
+  if (moves.length === 0) return null;
+
+  const pairs: { number: number; white: string; black?: string }[] = [];
+  for (let i = 0; i < moves.length; i += 2) {
+    pairs.push({
+      number: i / 2 + 1,
+      white: moves[i],
+      black: moves[i + 1],
+    });
+  }
+
+  return (
+    <div className="move-list">
+      <strong>Moves</strong>
+      <ol className="move-list-rows">
+        {pairs.map(({ number, white, black }) => (
+          <li key={number}>
+            <span className="move-num">{number}.</span>
+            <span className="move-cell">{white}</span>
+            <span className="move-cell">{black ?? ""}</span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}