diff --git a/src/components/playing/NowPlaying.astro b/src/components/playing/NowPlaying.astro
index 19ed956..4993650 100644
--- a/src/components/playing/NowPlaying.astro
+++ b/src/components/playing/NowPlaying.astro
@@ -1,46 +1,188 @@
 ---
 import { spotifyNowPlaying, SpotifyError } from "./spotify";
 
+import mp3Base from "/assets/mp3/base.png";
+import mp3AlbumArtMask from "/assets/mp3/album-art-mask.png";
+import mp3RecordCircle from "/assets/mp3/record-circle.png";
+import mp3HeadCircle from "/assets/mp3/head-circle.png";
+import mp3PlaybackHead from "/assets/mp3/playback-head.png";
+
 const track = await spotifyNowPlaying().catch((err) => {
   if (!(err instanceof SpotifyError)) throw new Error("Unhandled exception");
-  console.error(err.code, err.human, err.details);
-
   if (err.code === "NO_CONTENT") return null;
+  
+  console.error(err.code, err.human, err.details);
   return err;
 });
 ---
 
-<section class="playing" id="now-playing">
-  {
-    track ? (
-      !(track instanceof SpotifyError) ? (
-        <>
-          Now playing:
-          <img
-            src={
-              track.album.images.sort(
-                (a, b) => b.width + b.height - (a.width + a.height),
-              )[0].url
-            }
-            alt=""
-          />
-          {track.name} by {track.artists.map((x) => x.name).join(",")}
-        </>
-      ) : (
-        <>
-          Error occurred {track.code} - {track.human} <br />
-          <code style="word-wrap: break-word;">
-            {JSON.stringify(track.details)}
-          </code>
-          <script set:html={`console.log(${JSON.stringify(track.details)})`} />
-        </>
-      )
-    ) : (
-      <>Nothing is playing :(</>
-    )
-  }
+<section
+  class="playing"
+  id="now-playing"
+  style={`
+  --mp3-base-png: url(${mp3Base.src});
+  --mp3-album-art-mask-png: url(${mp3AlbumArtMask.src});
+  --mp3-record-circle-png: url(${mp3RecordCircle.src});
+  --mp3-head-circle-png: url(${mp3HeadCircle.src});
+  --mp3-playback-head-png: url(${mp3PlaybackHead.src});
+`}
+>
+  <div
+    class="player"
+    style={`display: ${track instanceof SpotifyError ? "none" : "block"};` +
+      new Array(5)
+        .fill(0)
+        .map(
+          (_, i) =>
+            `--head-move-${(i + 2) * 10}: ${Math.random() * 20 + 25}deg;`,
+        )
+        .join("")}
+  >
+    <div class="spinner"></div>
+
+    <div class="record">
+      <img
+        src={track instanceof SpotifyError || !track
+          ? "https://undefined/"
+          : track.album.images[0].url}
+        alt=""
+        class="art"
+        style={`display: ${track instanceof SpotifyError ? "none" : "block"}`}
+      />
+    </div>
+
+    <div class="spinner hidden">
+      <div class="head"></div>
+    </div>
+  </div>
 </section>
 
+{track instanceof SpotifyError && <script set:html={`console.error("Failed to load nowPlaying:", ${JSON.stringify(track)})`}></script>}
+
+<style>
+  @keyframes spin {
+    from {
+      rotate: 0deg;
+    }
+
+    to {
+      rotate: 360deg;
+    }
+  }
+
+  @keyframes head-move {
+    from {
+      rotate: 0deg;
+    }
+
+    10% {
+      rotate: 25deg;
+    }
+
+    20% {
+      rotate: var(--head-move-20);
+    }
+
+    30% {
+      rotate: var(--head-move-30);
+    }
+
+    40% {
+      rotate: var(--head-move-40);
+    }
+
+    50% {
+      rotate: var(--head-move-50);
+    }
+
+    60% {
+      rotate: var(--head-move-60);
+    }
+
+    70% {
+      rotate: 25deg;
+    }
+
+    80% {
+      rotate: 0deg;
+    }
+
+    to {
+      rotate: 0deg;
+    }
+  }
+
+  .player {
+    contain: strict;
+    container: player / size;
+    width: 100%;
+    /* design size is 300px by 244px
+      treat 1cqw = 3px.
+    */
+    aspect-ratio: 300/244;
+
+    image-rendering: pixelated;
+    background-image: var(--mp3-base-png);
+    background-size: contain;
+
+    * {
+      background-size: contain;
+    }
+
+    position: relative;
+
+    & .record {
+      position: absolute;
+      top: calc((20 / 3) * 1cqw);
+      left: calc((40 / 3) * 1cqw);
+
+      width: calc((200 / 3) * 1cqw);
+      height: calc((200 / 3) * 1cqw);
+      background-image: var(--mp3-record-circle-png);
+
+      animation: 30s linear forwards infinite spin;
+
+      & .art {
+        position: absolute;
+        top: calc((50 / 3) * 1cqw);
+        left: calc((50 / 3) * 1cqw);
+        width: calc((100 / 3) * 1cqw);
+        height: calc((100 / 3) * 1cqw);
+        max-width: none;
+        background-color: #008282;
+
+        mask-image: var(--mp3-album-art-mask-png);
+        mask-size: calc((100 / 3) * 1cqw) calc((100 / 3) * 1cqw);
+      }
+    }
+
+    & .spinner {
+      position: absolute;
+      top: calc((30 / 3) * 1cqw);
+      left: calc((214 / 3) * 1cqw);
+
+      background-image: var(--mp3-head-circle-png);
+      width: calc((60 / 3) * 1cqw);
+      height: calc((60 / 3) * 1cqw);
+
+      animation: 30s linear 5s infinite forwards head-move;
+
+      &.hidden {
+        background: none;
+      }
+
+      & .head {
+        position: absolute;
+        top: calc((-10 / 3) * 1cqw);
+        left: calc((28 / 3) * 1cqw);
+        width: calc((30 / 3) * 1cqw);
+        height: calc((200 / 3) * 1cqw);
+        background-image: var(--mp3-playback-head-png);
+      }
+    }
+  }
+</style>
+
 <script>
   import {
     type SpotifyError,