diff --git a/scraper/internal/server/ui.go b/scraper/internal/server/ui.go
index 8c9fa66..556736c 100644
--- a/scraper/internal/server/ui.go
+++ b/scraper/internal/server/ui.go
@@ -2310,19 +2310,17 @@ const chapterTmpl = `
       <button id="player-play-btn" type="button" onclick="ttsToggle()"
               aria-label="Play / Pause"
               class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-amber-500 hover:bg-amber-400 text-zinc-950 text-base border-none cursor-pointer transition-colors shadow-sm">
-        <span id="player-play-icon" aria-hidden="true">&#9654;</span>
+        <span id="player-play-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M8 5v14l11-7z"/></svg></span>
       </button>
 
       <!-- Centre info -->
-      <div class="flex-1 min-w-0 flex flex-col justify-center px-1">
-        <div class="flex items-center gap-1.5">
-          <span id="player-title" class="text-xs font-medium text-zinc-300 truncate">Ch.&#x00A0;{{.ChapterN}}</span>
-          <span id="player-state-badge" class="queue-badge queue-badge-idle flex-shrink-0">idle</span>
-          <!-- next-chapter prefetch badge -->
-          <span id="player-next-row" hidden>
-            <span id="player-next-badge" class="queue-badge queue-badge-idle">next</span>
-          </span>
-        </div>
+      <div class="flex-1 min-w-0 flex items-center gap-1.5 px-1">
+        <span id="player-title" class="text-xs font-medium text-zinc-300 truncate">Ch.&#x00A0;{{.ChapterN}}</span>
+        <span id="player-state-badge" class="queue-badge queue-badge-idle flex-shrink-0">idle</span>
+        <!-- next-chapter prefetch badge -->
+        <span id="player-next-row" hidden class="flex-shrink-0">
+          <span id="player-next-badge" class="queue-badge queue-badge-idle">next</span>
+        </span>
       </div>
 
       <!-- Settings -->
@@ -2597,6 +2595,8 @@ const chapterTmpl = `
   }
 
   // ── UI state helpers ──────────────────────────────────────────────────────
+  var SVG_PLAY  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M8 5v14l11-7z"/></svg>';
+  var SVG_PAUSE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>';
   function setPlayIcon(icon) { playerPlayIcon.innerHTML = icon; }
 
   function setGenerating() {
@@ -2610,11 +2610,13 @@ const chapterTmpl = `
   }
   function setPlaying() {
     if (stale()) return;
-    setPlayIcon('&#9646;&#9646;');
+    setPlayIcon(SVG_PAUSE);
     playerPlayBtn.disabled = false;
     voiceSel.disabled = false; speedSlider.disabled = false;
     setBadge(playerStateBadge, 'playing');
-    playerStateBadge.textContent = '0%';
+    var pct = (audio.duration && isFinite(audio.duration))
+      ? Math.round((audio.currentTime / audio.duration) * 100) : 0;
+    playerStateBadge.textContent = pct + '%';
     playerTitle.textContent = 'Ch.\u00a0' + CHAPTER_N;
     setStatus('');
     showSeek();
@@ -2622,7 +2624,7 @@ const chapterTmpl = `
   }
   function setPaused() {
     if (stale()) return;
-    setPlayIcon('&#9654;');
+    setPlayIcon(SVG_PLAY);
     setBadge(playerStateBadge, 'paused');
     var pct = (audio.duration && isFinite(audio.duration))
       ? Math.round((audio.currentTime / audio.duration) * 100) : 0;
@@ -2633,7 +2635,7 @@ const chapterTmpl = `
   }
   function setStopped() {
     highlightPara(-1);
-    setPlayIcon('&#9654;');
+    setPlayIcon(SVG_PLAY);
     playerPlayBtn.disabled = false;
     voiceSel.disabled = false; speedSlider.disabled = false;
     setBadge(playerStateBadge, 'idle');
@@ -2651,7 +2653,7 @@ const chapterTmpl = `
   function setError(msg) {
     if (stale()) return;
     highlightPara(-1);
-    setPlayIcon('&#9654;');
+    setPlayIcon(SVG_PLAY);
     playerPlayBtn.disabled = false;
     voiceSel.disabled = false; speedSlider.disabled = false;
     setBadge(playerStateBadge, 'error');