diff --git a/astro.config.mjs b/astro.config.mjs
deleted file mode 100644
index 2c3e25d..0000000
--- a/astro.config.mjs
+++ /dev/null
@@ -1,5 +0,0 @@
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
-  trailingSlash: "always",
-});
diff --git a/src/applets/themes/pilot/ui/audio/applet.astro b/src/applets/themes/pilot/ui/audio/applet.astro
index df7c731..fb5134e 100644
--- a/src/applets/themes/pilot/ui/audio/applet.astro
+++ b/src/applets/themes/pilot/ui/audio/applet.astro
@@ -3,25 +3,88 @@
   href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"
 />
 
-<div>
-  <button>▶️</button>
-  <progress max="100" value="0"></progress>
-</div>
+<main>
+  <div class="queue-entry"></div>
+  <div class="playback-info">
+    <div class="controls">
+      <button class="controls__playpause">
+        <i class="iconoir-play-solid"></i>
+      </button>
+    </div>
+    <div class="time">
+      <progress max="100" value="0"></progress>
+    </div>
+  </div>
+  <div class="additional"></div>
+</main>
 
 <style>
   @import "../../../../../styles/themes/pilot/variables.css";
 
-  div {
-    /* 5% darker version */
-    background: oklch(from var(--delicate-cloud) calc(l - 0.1) c h);
-
-    height: 100px;
-    line-height: 100px;
+  main {
+    align-items: center;
+    background: var(--made-in-the-shade);
+    color: oklch(from var(--made-in-the-shade) calc(l + 0.375) c h);
+    display: flex;
+    justify-content: center;
     text-align: center;
   }
 
   button {
-    line-height: 1.5;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    display: inline-block;
+    line-height: 0;
+  }
+
+  /***********************************
+   * Playback info
+   ***********************************/
+  .playback-info {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    max-width: var(--container-lg);
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .controls {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-bottom: var(--space-2xs);
+
+    & .controls__playpause {
+      font-size: var(--fs-lg);
+    }
+  }
+
+  .time {
+    align-self: stretch;
+    display: flex;
+  }
+
+  progress {
+    appearance: none;
+    border: 0;
+    flex: 1;
+    height: 4px;
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: oklch(from var(--made-in-the-shade) calc(l + 0.15) c h);
+    overflow: hidden;
+    border-radius: 4px;
+  }
+
+  progress::-webkit-progress-value {
+    background-color: oklch(from var(--made-in-the-shade) calc(l + 0.3) c h);
+    border-radius: 4px;
+  }
+
+  progress::-moz-progress-bar {
   }
 </style>
 
@@ -51,7 +114,6 @@
 
   context.setActionHandler("set_progress", (progress: number) => {
     document.body.querySelector("progress").value = Math.round(progress * 100);
-    render();
   });
 
   ////////////////////////////////////////////
@@ -62,8 +124,8 @@
   };
 
   function render() {
-    document.body.querySelector("button").innerText = context.data.isPlaying ? "⏸️" : "▶️";
+    document.body.querySelector("button").innerHTML = context.data.isPlaying
+      ? `<i class="iconoir-pause-solid"></i>`
+      : `<i class="iconoir-play-solid"></i>`;
   }
-
-  render();
 </script>
diff --git a/src/pages/themes/pilot/index.astro b/src/pages/themes/pilot/index.astro
index 35c7dca..9a77e24 100644
--- a/src/pages/themes/pilot/index.astro
+++ b/src/pages/themes/pilot/index.astro
@@ -6,9 +6,9 @@ import Page from "../../../layouts/page.astro";
   <script src="../../../scripts/themes/pilot/index.js"></script>
 
   <!-- Theme applets -->
-  <iframe id="#applet__ui__audio" src="ui/audio/" frameborder="0" style="width: 100%"></iframe>
+  <iframe id="applet__ui__audio" src="ui/audio/" frameborder="0"></iframe>
 
   <!-- Other applets -->
-  <iframe id="#applet__engine__audio" src="../../engine/audio/" frameborder="0" height="0" width="0"
+  <iframe id="applet__engine__audio" src="../../engine/audio/" frameborder="0" height="0" width="0"
   ></iframe>
 </Page>
diff --git a/src/styles/themes/pilot/index.css b/src/styles/themes/pilot/index.css
index 6dc65b0..0730bc3 100644
--- a/src/styles/themes/pilot/index.css
+++ b/src/styles/themes/pilot/index.css
@@ -21,16 +21,24 @@
 body {
   background-color: var(--delicate-cloud);
   color: var(--made-in-the-shade);
+  display: flex;
   overflow: hidden;
+  height: 100dvh;
 }
 
 /***********************************
- * Applets | Position
+ * Applets (UI)
  ***********************************/
 #applet__ui__audio {
+  align-self: flex-end;
+  width: 100%;
 }
 
-/* Position engines outside the viewframe (no UI for these) */
+/***********************************
+ * Applets (No UI)
+ * ---------------
+ * Position engines outside the viewframe
+ ***********************************/
 #applet__engine__audio {
   left: 110vw;
   position: absolute;