diff --git a/.config/eww/assets/player-expand.svg b/.config/eww/assets/player-expand.svg
index be89569..51255ef 100644
--- a/.config/eww/assets/player-expand.svg
+++ b/.config/eww/assets/player-expand.svg
@@ -1,8 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <!-- The separate expand trigger that sits outside the circle's
-       upper-left edge: a small outlined triangle, flat top edge with
-       its apex pointing down-left, matching the mockup. -->
-  <g fill="none" stroke="#cfcfcf" stroke-width="1.4" stroke-linejoin="round">
-    <path d="M3 4 L20 4 L9 21 Z"/>
-  </g>
+  <path d="M5 5 L19 5 L9 19 Z" fill="#00a2ff" stroke="#00a2ff" stroke-width="1.4" stroke-linejoin="round"/>
 </svg>
diff --git a/.config/eww/assets/player-pause.svg b/.config/eww/assets/player-pause.svg
index fad66c1..e9e79b7 100644
--- a/.config/eww/assets/player-pause.svg
+++ b/.config/eww/assets/player-pause.svg
@@ -1,11 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
-  <!-- Collapsed player, "playing" state: same concentric outline
-       circles as player-play.svg, with outlined pause bars instead of
-       the play triangle. -->
-  <g fill="none" stroke="#ffe66d" stroke-width="1.6">
-    <circle cx="32" cy="32" r="29"/>
-    <circle cx="32" cy="32" r="23"/>
-    <rect x="25" y="22" width="5.5" height="20" rx="1"/>
-    <rect x="35" y="22" width="5.5" height="20" rx="1"/>
-  </g>
+  <circle cx="32" cy="32" r="29" fill="black"/>
+  <rect x="23" y="22" width="6" height="20" rx="1" fill="#ffe66d"/>
+  <rect x="35" y="22" width="6" height="20" rx="1" fill="#ffe66d"/>
 </svg>
diff --git a/.config/eww/assets/player-play.svg b/.config/eww/assets/player-play.svg
index 653f172..2f56e25 100644
--- a/.config/eww/assets/player-play.svg
+++ b/.config/eww/assets/player-play.svg
@@ -1,12 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
-  <!-- Collapsed player, "paused/stopped" state: concentric outline
-       circles with an outlined play triangle. Drawn as SVG rather than
-       a GTK-CSS border-radius button, which renders as a rounded
-       rectangle and cannot express the inner ring or an outlined
-       (rather than font-glyph) triangle at all. -->
-  <g fill="none" stroke="#25d366" stroke-width="1.6">
-    <circle cx="32" cy="32" r="29"/>
-    <circle cx="32" cy="32" r="23"/>
-    <path d="M27 21 L46 32 L27 43 Z" stroke-linejoin="round"/>
-  </g>
+  <circle cx="32" cy="32" r="29" fill="black"/>
+  <path d="M27 21 L46 32 L27 43 Z" fill="#25d366" stroke="#25d366" stroke-width="2" stroke-linejoin="round"/>
 </svg>
diff --git a/.config/eww/eww.scss b/.config/eww/eww.scss
index e360298..7c9e595 100644
--- a/.config/eww/eww.scss
+++ b/.config/eww/eww.scss
@@ -67,6 +67,7 @@
     box-shadow: none;
     padding: 0;
     margin: 0;
+    transition: all 0.15s ease;
 }
 
 .player-shape-btn:hover {
@@ -74,6 +75,11 @@
        SVG, reintroducing exactly the shape this design avoids. */
     background-color: transparent;
     background-image: none;
+    opacity: 0.85;
+}
+
+.player-shape-btn:active {
+    opacity: 0.6;
 }
 
 /* Defines the collapsed state's overall footprint (it is the overlay's
@@ -85,8 +91,8 @@
    top-left, and the triangle's lower tip ends at ~18px. */
 .player-collapsed-sizer {
     background-color: transparent;
-    min-width: 72px;
-    min-height: 72px;
+    min-width: 68px;
+    min-height: 68px;
 }
 
 /* The separate expand triangle -- no negative margin: it is positioned
@@ -99,11 +105,14 @@
     box-shadow: none;
     padding: 0;
     margin: 0;
+    border-radius: 50%;
+    transition: all 0.2s ease;
 }
 
 .player-expand-arrow:hover {
-    background-color: transparent;
+    background-color: rgba(0, 162, 255, 0.15);
     background-image: none;
+    box-shadow: 0 0 12px 4px rgba(0, 162, 255, 0.4);
 }
 
 /* Expanded state: a taller card. */
diff --git a/.config/eww/eww.yuck b/.config/eww/eww.yuck
index 18bb3ed..dff3812 100644
--- a/.config/eww/eww.yuck
+++ b/.config/eww/eww.yuck
@@ -87,7 +87,7 @@
     ;; :visible false drops the widget from allocation entirely; the
     ;; revealer inside it still provides the reveal animation.
     (box :visible {!player_expanded}
-      (revealer :transition "crossfade" :duration "250ms" :reveal {!player_expanded}
+      (revealer :transition "slideup" :duration "250ms" :reveal {!player_expanded}
         ;; The sizer is the overlay's first (size-determining) child:
         ;; a bit larger than the 64px circle, so the arrow can sit in
         ;; the empty upper-left corner *outside* the circle's arc
@@ -110,7 +110,7 @@
     ;; toggle/stop pair, plus collapse (back to the circle) and close
     ;; (this instance only, see win-id above) in the corner.
     (box :visible {player_expanded}
-      (revealer :transition "crossfade" :duration "300ms" :reveal {player_expanded}
+      (revealer :transition "slideup" :duration "300ms" :reveal {player_expanded}
         (overlay
           (box :orientation "v" :space-evenly false :halign "center" :class "player-card"
             (image :class "player-albumart" :path {mpd_status.albumart} :image-width 120 :image-height 120)
@@ -131,7 +131,7 @@
   ;; different widths too, not just heights, and a fixed width would
   ;; leave the small circle floating in the middle of reserved space
   ;; instead of flush against the corner.
-  :geometry (geometry :x "5px" :y "15px" :width "1px" :height "1px" :anchor "bottom right")
+  :geometry (geometry :x "10px" :y "15px" :width "1px" :height "1px" :anchor "bottom right")
   :stacking "fg"
   :windowtype "normal"
   (mpd-player-widget :win-id win-id))