diff --git a/celstomp/celstomp-app.js b/celstomp/celstomp-app.js
index 3d924b6..41afd42 100644
--- a/celstomp/celstomp-app.js
+++ b/celstomp/celstomp-app.js
@@ -884,7 +884,13 @@
             safeSetChecked(onion, onionEnabled);
             safeSetChecked(psnap, playSnapped);
             toggle?.addEventListener("click", () => {
-                if (isPlaying) pausePlayback(); else startPlayback();
+                if (isPlaying) {
+                    pausePlayback();
+                    toggle.classList.remove("playing");
+                } else {
+                    startPlayback();
+                    toggle.classList.add("playing");
+                }
             });
             prevF?.addEventListener("click", () => gotoFrame(stepBySnap(-1)));
             nextF?.addEventListener("click", () => gotoFrame(stepBySnap(1)));
diff --git a/celstomp/css/components/timeline.css b/celstomp/css/components/timeline.css
index 9256498..711fac2 100644
--- a/celstomp/css/components/timeline.css
+++ b/celstomp/css/components/timeline.css
@@ -250,6 +250,122 @@ body.dragging-cel{ cursor: grabbing; user-select:none; }
 #timelineHeader input[type="number"],
 #timelineHeader .chip{ min-height:36px; }
 
+.tl-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.tl-btn-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 2px;
+}
+
+.tl-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #c7d0db;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.tl-icon-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.tl-icon-btn:active {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.tl-icon-btn.danger:hover {
+  background: rgba(255, 82, 82, 0.2);
+  color: #ff5252;
+}
+
+.tl-icon-btn svg {
+  pointer-events: none;
+}
+
+.tl-play-btn {
+  width: 40px;
+  height: 40px;
+  background: rgba(0, 229, 255, 0.15);
+  color: #9fd5ff;
+}
+
+.tl-play-btn:hover {
+  background: rgba(0, 229, 255, 0.25);
+}
+
+.tl-play-btn.playing .play-icon { display: none; }
+.tl-play-btn.playing .pause-icon { display: block !important; }
+
+.tl-num-input {
+  width: 60px;
+  padding: 4px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.28);
+  color: #e2e8f0;
+  font-size: 12px;
+  -moz-appearance: textfield;
+}
+
+.tl-num-input::-webkit-outer-spin-button,
+.tl-num-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.tl-num-input-sm {
+  width: 48px;
+  padding: 2px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.28);
+  color: #e2e8f0;
+  font-size: 11px;
+  -moz-appearance: textfield;
+}
+
+.tl-num-input-sm::-webkit-outer-spin-button,
+.tl-num-input-sm::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.tl-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.2);
+  font-size: 12px;
+  color: #c7d0db;
+  cursor: pointer;
+}
+
+.tl-chip input[type="checkbox"] {
+  margin: 0;
+}
+
+.tl-opts-group {
+  background: transparent;
+}
+
 .tlMobArrow{ display:none; }
 
 @media (max-width: 900px){
diff --git a/celstomp/parts/timeline.js b/celstomp/parts/timeline.js
index d98b5dc..7280c54 100644
--- a/celstomp/parts/timeline.js
+++ b/celstomp/parts/timeline.js
@@ -8,47 +8,77 @@ document.getElementById('part-timeline').innerHTML = `
         aria-expanded="false">▴</button>
 
 
-      <div class="left">
+      <div class="left tl-group">
         <strong>Timeline</strong>
         <span class="badge" id="timeCounter">0s+0f</span>
         <span class="badge">Loop <input id="loopToggle" type="checkbox" checked
             style="vertical-align:middle; margin-left:6px;" /></span>
-        <button id="insertFrameBtn" class="miniBtn" title="Insert Frame">+</button>
-        <button id="deleteFrameBtn" class="miniBtn danger" title="Delete Frame">−</button>
-        <input id="gotoFrameInput" type="number" min="1" class="gotoFrameInput" placeholder="Frame #"
-            title="Jump to frame" />
-        <button id="gotoFrameBtn" class="miniBtn">Go</button>
+        <div class="tl-btn-group">
+          <button id="insertFrameBtn" class="tl-icon-btn" title="Insert Frame">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+          </button>
+          <button id="deleteFrameBtn" class="tl-icon-btn danger" title="Delete Frame">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+          </button>
+        </div>
+        <input id="gotoFrameInput" type="number" min="1" class="tl-num-input" placeholder="#" title="Jump to frame" />
+        <button id="gotoFrameBtn" class="tl-icon-btn" title="Go to frame">
+          <svg viewBox="0 0 24 24" width="16" height="16"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </button>
       </div>
 
 
-      <div class="center" id="tlHeaderCenter">
-        <button id="tlPrevCel">◀︎ Cel</button>
-        <button id="tlPrevFrame">◀︎ Frame</button>
-        <button id="tlPlayToggle">▶︎ / ⏸</button>
-        <button id="tlNextFrame">Frame ▶︎</button>
-        <button id="tlNextCel">Cel ▶︎</button>
+      <div class="center tl-group" id="tlHeaderCenter">
+        <div class="tl-btn-group">
+          <button id="tlPrevCel" class="tl-icon-btn" title="Previous Cel">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+          <button id="tlPrevFrame" class="tl-icon-btn" title="Previous Frame">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+          <button id="tlPlayToggle" class="tl-icon-btn tl-play-btn" title="Play/Pause">
+            <svg class="play-icon" viewBox="0 0 24 24" width="18" height="18"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
+            <svg class="pause-icon" viewBox="0 0 24 24" width="18" height="18" style="display:none"><path d="M6 4h4v16H6zM14 4h4v16h-4z" fill="currentColor"/></svg>
+          </button>
+          <button id="tlNextFrame" class="tl-icon-btn" title="Next Frame">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+          <button id="tlNextCel" class="tl-icon-btn" title="Next Cel">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path d="M13 17l5-5-5-5M6 17l5-5-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </button>
+        </div>
       </div>
 
-      <div class="right">
+      <div class="right tl-group">
+        <div class="tl-btn-group">
+          <label class="tl-chip"><input id="tlOnion" type="checkbox" /> Onion</label>
+          <button id="tlDupCel" class="tl-icon-btn" title="Duplicate Cel">
+            <svg viewBox="0 0 24 24" width="16" height="16"><rect x="8" y="8" width="12" height="12" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><path d="M4 16V6a2 2 0 012-2h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+          </button>
+        </div>
 
-        <label><input id="tlOnion" type="checkbox" /> Onion</label>
-        <button id="tlDupCel">Duplicate Cel</button>
+        <div class="tl-btn-group tl-opts-group">
+          <label class="tl-chip"><span>Snap</span><input id="tlSnap" type="number" min="1" class="tl-num-input-sm" /></label>
+          <label class="tl-chip"><input id="tlPlaySnapped" type="checkbox" /> Snapped</label>
+        </div>
 
-        <label for="tlSnap">Snap (frames)</label>
-        <input id="tlSnap" type="number" min="1" style="width:70px;" />
-        <label><input id="tlPlaySnapped" type="checkbox" /> Play snapped</label>
+        <div class="tl-btn-group tl-opts-group">
+          <label class="tl-chip"><span>Sec</span><input id="tlSeconds" type="number" min="1" class="tl-num-input-sm" /></label>
+          <label class="tl-chip"><span>FPS</span><input id="tlFps" type="number" min="1" class="tl-num-input-sm" /></label>
+        </div>
 
-        <label for="tlSeconds">Seconds</label>
-        <input id="tlSeconds" type="number" min="1" style="width:70px;" />
+        <div class="tl-btn-group">
+          <button id="zoomTimelineOut" class="tl-icon-btn" title="Zoom Out">
+            <svg viewBox="0 0 24 24" width="16" height="16"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M8 11h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+          </button>
+          <button id="zoomTimelineIn" class="tl-icon-btn" title="Zoom In">
+            <svg viewBox="0 0 24 24" width="16" height="16"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M8 11h6M11 8v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+          </button>
+        </div>
 
-        <label for="tlFps">FPS</label>
-        <input id="tlFps" type="number" min="1" style="width:70px;" />
-
-        <button id="zoomTimelineOut" class="miniBtn" title="Zoom Out">−</button>
-        <span class="timelineZoom">Zoom</span>
-        <button id="zoomTimelineIn" class="miniBtn" title="Zoom In">+</button>
-
-        <button id="hideTimelineBtn">—</button>
+        <button id="hideTimelineBtn" class="tl-icon-btn" title="Hide Timeline">
+          <svg viewBox="0 0 24 24" width="16" height="16"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        </button>
       </div>
     </div>