diff --git a/css/style.css b/css/style.css
index 0674b1fa6778d572b50d1520b06aacae8efad04f..2126fa335730162c8831711575fdb1fc358f1c40 100644
--- a/css/style.css
+++ b/css/style.css
@@ -277,3 +277,21 @@ img.appicon-settings {
 .title {
   font-size: 1.5em;
 }
+
+.subtitle {
+  font-size: 0.9rem;
+  opacity: 0.7;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.chip.song > img {
+  height: 128px;
+  object-fit: contain;
+}
+
+#current-song-art {
+  height: 200px;
+}
diff --git a/index.html b/index.html
index 684af75722d2dbb894dc33c0df4b74c4d4746606..1c929231b28901b011d927845439158f0c0b92b0 100644
--- a/index.html
+++ b/index.html
@@ -75,7 +75,7 @@
         <a href="#add_station" class="button"><span class="fa-fw fa-solid fa-plus-circle"></span> Add a new station</a>
       </div>
 
-      <div class="stationList" id="tunerStationList">
+      <div class="stack v" id="tunerStationList">
 
       </div>
 
@@ -127,7 +127,7 @@
         <a href="#add_station">Add station manually</a>
       </div>
 
-      <label for="add_fromazcast_url">Azuracast Station URL</label>
+      <label for="add_fromazcast_url">Azuracast Server URL</label>
       <div id="add_azuracast_searcher" class="input_button_hybrid">
         <input type="url" placeholder="https://example.com" name="add_fromazcast_url" id="add_fromazcast_url">
         <button id="add_azcast_search"><span class="fa-fw fa-solid fa-search"></span> Search</button>
@@ -140,7 +140,34 @@
 
     <section id="station" hidden="hidden" aria-hidden="true">
 
+      <h2 id="station_name">Loading...</h2>
+      <div id="station_info" class="info"><span class="fa-fw fa-solid fa-headphones"></span> <span id="live_listeners">0</span></div>
+      <p id="station_description"></p>
+
+      <div class="stack v">
+        <div class="chip song nowplaying stack h">
+          <img src="img/radio-icon.png" alt="No album art" class="rounded" id="current-song-art">
+          <div class="stack v nogap justify-center">
+            <span class="subtitle">Now playing:</span>
+            <span id="current-song-title" class="title">Loading...</span>
+            <span id="current-song-artist" class="artist">Loading...</span>
+          </div>
+        </div>
+
+        <div class="ship song compact nextup stack h">
+          <img src="img/radio-icon.png" alt="No album art" class="rounded" id="next-song-art">
+          <div class="stack v nogap justify-center">
+            <span class="subtitle">Next up:</span>
+            <span id="next-song-title" class="title">Loading...</span>
+            <span id="next-song-artist" class="artist">Loading...</span>
+            <span id="next-song-until" class="subtitle">in 3 minutes</span>
+          </div>
+        </div>
+      </div>
+
     </section>
+
+
     <section id="settings" hidden="hidden" aria-hidden="true">
       <h2>Settings</h2>
 
diff --git a/js/app.js b/js/app.js
index 5dd91387bf0282daac4a4c99d0a2907ff2dd0d26..bea1f6bd42600cba92bbd17697e946acb6ead886 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,8 +5,14 @@ const player = document.getElementById("player");
 const audioSource = player.children.item(0);
 console.debug(audioSource);
 
+const currentSongTitle = document.getElementById("current-song-title");
+const currentSongArtist = document.getElementById("current-song-artist");
+const currentSongArt = document.getElementById("current-song-art");
+
 // Important init stuff
 
+let noise = null;
+
 audioSource.src = "assets/audio/noise.wav";
 let currentStation = null;
 
@@ -66,6 +72,10 @@ function setVolume (volume) {
   player.volume = volume / 100;
   controlVolume.value = volume;
   controlRealVolume.value = volume;
+
+  if (noise) {
+    noise.volume = (volume / 100) /4;
+  }
 }
 
 controlMute.addEventListener("click", toggleMute);
@@ -138,9 +148,6 @@ async function updateMetadata(title="", artist="", album="radio waves", artUrl="
       playbackRate: 1
     })
 
-    document.getElementById("songtitle").innerText = title;
-    document.getElementById("songartist").innerText = artist
-
   }
 }
 
@@ -301,7 +308,6 @@ const viewFunctions = { // These run when a view is loaded.
     const stationThingy = views['#station'];
 
     if (!currentStation) {
-      stationThingy.innerHTML = `<span class="fa-fw fa-solid fa-warning"></span> Not tuned.`;
       location.hash = "#tuner";
       return;
     }
@@ -310,15 +316,8 @@ const viewFunctions = { // These run when a view is loaded.
       let request = await fetch(currentStation.azuracast_server_url + `/api/station/${currentStation.azuracast_station_shortcode}`);
       let json = await request.json();
 
-      // TODO: Make this better
-      stationThingy.innerHTML = `
-    <h2>${json.name}</h2>
-    <div class="info"><code>${json.shortcode}</code> / <span class="fa-fw fa-solid fa-people"></span> <span id="live_listeners"></span></div>
-    <p>${json.description}</p>
-    <div class="chip">
-    <h2 id="songtitle"></h2>
-    <p id="songartist"></p>
-</div>`
+      document.getElementById("station_name").innerText = json.name;
+      document.getElementById("station_description").innerText = json.description;
     } else {
       stationThingy.innerHTML = "Yeah this is icecast, metadata coming soon."
     }
@@ -408,14 +407,16 @@ async function updateLoop() {
 
   const isPlaying = player.paused ? "paused" : "playing";
   await updateMetadata(metadata.title, metadata.artist, metadata.album, metadata.art, metadata.startTime, metadata.duration, isPlaying);
+
+  currentSongTitle.innerText = metadata.title;
+  currentSongArtist.innerText = metadata.artist;
+  currentSongArt.src          = metadata.art;
 }
 
 setInterval(updateLoop, 3000)
 
 // Give user feedback on buffering
 
-let noise = null;
-
 player.addEventListener('playing', function() {
   console.log('Playback started.');
   noise.pause();
@@ -435,7 +436,7 @@ player.addEventListener('waiting', function() {
   console.log("Buffering...");
   noise = new Audio("assets/audio/noise.wav");
   noise.play();
-  noise.volume = 0.4;
+  noise.volume = player.volume / 4;
   noise.loop = true;
   setPlayPauseButtonIcon("buffer");