diff --git a/static/asteroid.css b/static/asteroid.css
index 3518c32..8979354 100644
--- a/static/asteroid.css
+++ b/static/asteroid.css
@@ -11,6 +11,30 @@ body{
     box-sizing: border-box;
 }
 
+body select{
+    font-family: VT323, monospace;
+}
+
+
+
+body header .page-title{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    margin: 0;
+}
+
+body header .page-subtitle{
+    color: #4488FF;
+    display: flex;
+    justify-content: center;
+    font-style: italic;
+    margin: 0;
+    margin-top: .8rem;
+    margin-bottom: 4rem;
+}
+
 body .container{
     max-width: 1200px;
     margin: 0 auto;
@@ -175,17 +199,49 @@ body .recently-played-panel .recently-played-list .error{
     color: #ff4444;
 }
 
-body .recently-played-panel .recently-played-list.track-list{
+body .recently-played-panel .recently-played-list .track-link{
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: #00ffff;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1em;
+    -moz-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -ms-transition: all 0.2s;
+    transition: all 0.2s;
+}
+
+body .recently-played-panel .recently-played-list .track-link .external-icon{
+    width: 14px;
+    height: 14px;
+    margin-left: 2px;
+    vertical-align: middle;
+}
+
+body .recently-played-panel .recently-played-list .track-link:hover{
+    color: #00ff00;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+
+body .recently-played-panel .recently-played-list .track-link:visited{
+    color: #4488ff;
+}
+
+body .recently-played-panel .recently-played-list .track-list{
     list-style: none;
-    padding: 0;
+    padding: 0 12px;
     margin: 0;
     border: none;
     max-height: none;
     overflow-y: visible;
 }
 
-body .recently-played-panel .recently-played-list.track-item{
-    padding: 6px 12px;
+body .recently-played-panel .recently-played-list .track-item{
+    padding: 10px 0;
     border-bottom: 1px solid #2a3441;
     -moz-transition: background-color 0.2s;
     -o-transition: background-color 0.2s;
@@ -194,11 +250,11 @@ body .recently-played-panel .recently-played-list.track-item{
     transition: background-color 0.2s;
 }
 
-body .recently-played-panel .recently-played-list.track-item LAST-CHILD{
+body .recently-played-panel .recently-played-list .track-item LAST-CHILD{
     border-bottom: none;
 }
 
-body .recently-played-panel .recently-played-list.track-item HOVER{
+body .recently-played-panel .recently-played-list .track-item HOVER{
     background-color: #2a3441;
 }
 
@@ -211,9 +267,6 @@ body .recently-played-panel .recently-played-list.track-info{
 }
 
 body .recently-played-panel .recently-played-list.track-title{
-    color: #4488ff;
-    font-weight: 500;
-    font-size: 1em;
     grid-column: 1;
     grid-row: 1;
 }
@@ -233,41 +286,6 @@ body .recently-played-panel .recently-played-list.track-time{
     text-align: right;
 }
 
-body .recently-played-panel .recently-played-list.track-meta{
-    grid-column: 2;
-    grid-row: 2;
-    text-align: right;
-}
-
-
-
-body .recently-played-list .allmusic-link{
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    color: #4488ff;
-    text-decoration: none;
-    font-size: 0.85em;
-    letter-spacing: 0.08rem;
-    -moz-transition: all 0.2s;
-    -o-transition: all 0.2s;
-    -webkit-transition: all 0.2s;
-    -ms-transition: all 0.2s;
-    transition: all 0.2s;
-    white-space: nowrap;
-}
-
-body .recently-played-list .allmusic-link HOVER{
-    color: #00ff00;
-    text-decoration: underline;
-    text-underline-offset: 5px;
-}
-
-body .recently-played-list .allmusic-link svg{
-    width: 14px;
-    height: 14px;
-}
-
 body .back{
     color: #00ffff;
     text-decoration: none;
@@ -307,19 +325,29 @@ body .player-section .live-stream{
     overflow: auto;
 }
 
+body .live-stream{
+    margin-top: 2rem;
+    font-size: 1.1rem;
+    color: #4488FF;
+}
 
-
-body .live-stream p,
-body .live-stream label{
-    font-size: 1.5rem;
+body .live-stream .live-stream-label{
+    font-size: 1.2rem;
+    color: #00FFFF;
 }
 
 body .live-stream code{
-    font-size: 1rem;
+    font-size: 0.9rem;
+}
+
+body .live-stream .frame-enable-message{
+    color: #00FFFF;
 }
 
 body .live-stream .live-stream-quality{
     display: flex;
+    align-items: center;
+    flex-wrap: wrap;
 }
 
 body .live-stream .live-stream-quality label{
@@ -327,9 +355,20 @@ body .live-stream .live-stream-quality label{
 }
 
 body .live-stream .live-stream-quality select{
+    background: transparent;
+    color: #00ff00;
+    border: 1px solid #00ff00;
+    letter-spacing: 0.08rem;
+    font-size: 0.95rem;
+    min-width: 220px;
+    width: fit-content;
     padding: 5px;
 }
 
+body .live-stream .live-stream-quality select:hover{
+    background: #2a3441;
+}
+
 body .track-browser{
     margin: 15px 0;
 }
@@ -395,8 +434,16 @@ body .audio-player{
     text-align: center;
 }
 
+
+
+body @-moz-documenturl-prefix() audio{
+    background-color: red;
+}
+
 body audio::-webkit-media-controls-panel{
-    background-color: #1a1a1a;
+    border: 1px solid;
+    border-color: #1a2332;
+    background-color: #1a2332;
 }
 
 body audio::-webkit-media-controls-current-time-display,
@@ -1177,6 +1224,191 @@ body .stat-card .stat-label{
     margin-top: 0.5rem;
 }
 
+body.persistent-player-container{
+    margin: 0;
+    padding: 10px;;
+    background: #1a2332;
+}
+
+body.persistent-player-container .persistent-player{
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    max-width: 100%;
+}
+
+body.persistent-player-container .player-label{
+    color: #00ff00;
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+body.persistent-player-container .quality-selector{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+
+
+body.persistent-player-container .quality-selector label{
+    color: #00ff00;
+    font-size: 0.9em;
+}
+
+
+
+body.persistent-player-container .quality-selector select{
+    background: transparent;
+    color: #00ff00;
+    letter-spacing: 0.08rem;
+    border: 1px solid #00ff00;
+    padding: 3px 8px;
+}
+
+body.persistent-player-container .quality-selector select:hover{
+    background: #2a3441;
+}
+
+body.persistent-player-container audio{
+    flex: 1;
+    min-width: 200px;
+    border: 0;
+}
+
+body.persistent-player-container .now-playing-mini{
+    color: #00ff00;
+    font-size: 0.9em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    min-width: 300px;
+}
+
+body.persistent-player-container .persistent-disable-btn{
+    background: transparent;
+    color: #00ff00;
+    border: 1px solid #00ff00;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-family: VT323, monospace;
+    font-size: 0.85em;
+    white-space: nowrap;
+}
+
+body.persistent-player-container .persistent-disable-btn:hover{
+    background: #2a3441;
+}
+
+body.popout-body{
+    margin: 0;
+    padding: 10px;
+    background: #0a0a0a;
+    overflow: hidden;
+}
+
+body.popout-body .popout-player{
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+body.popout-body .popout-header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #2a3441;
+}
+
+body.popout-body .popout-title{
+    font-size: 1.2em;
+    color: #4488FF;
+}
+
+body.popout-body .popout-title .popout-subtitle{
+    margin-top: 0;
+    margin-left: 2rem;
+    font-style: italic;
+    font-size: .8rem;
+}
+
+body.popout-body .close-btn{
+    background: transparent;
+    font-family: VT323, monospace;
+    color: #00ff00;
+    border: 1px solid #00ff00;
+    padding: 5px 10px;
+    cursor: pointer;
+    border-radius: 3px;
+    font-size: 0.9em;
+}
+
+body.popout-body .close-btn:hover{
+    background: #2a3441;
+}
+
+body.popout-body .now-playing-mini{
+    background: #1a2332;
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    border: 1px solid #2a3441;
+}
+
+body.popout-body .track-info-mini{
+    font-size: 0.9em;
+}
+
+body.popout-body .track-title-mini{
+    color: #00ff00;
+    font-weight: bold;
+    margin-bottom: 3px;
+}
+
+body.popout-body .track-artist-mini{
+    color: #4488ff;
+    font-size: 0.85em;
+}
+
+body.popout-body .quality-selector{
+    margin: 10px 0;
+    padding: 10px;
+    background: #1a2332;
+    border-radius: 5px;
+    border: 1px solid #2a3441;
+}
+
+body.popout-body .quality-selector label{
+    color: #00ff00;
+    margin-right: 10px;
+}
+
+body.popout-body .quality-selector select{
+    background: transparent;
+    color: #00ff00;
+    border: 1px solid #00ff00;
+    padding: 5px;
+    border-radius: 3px;
+}
+
+body.popout-body .quality-selector select:hover{
+    background: #2a3441;
+}
+
+body.popout-body audio{
+    width: 100%;
+    margin: 10px 0;
+}
+
+body.popout-body .status-mini{
+    text-align: center;
+    color: #888;
+    font-size: 0.85em;
+    margin-top: 10px;
+}
+
 @media (max-width: 576px){
     body .playlist-controls{
         display: block;
@@ -1188,4 +1420,11 @@ body .stat-card .stat-label{
         margin-left: 0;
         margin-right: 0;
     }
+}
+
+@supports (-moz-appearance: none){
+    audio{
+        opacity: 1;
+        background-color: #1a2332;
+    }
 }
\ No newline at end of file
diff --git a/static/asteroid.lass b/static/asteroid.lass
index 1f38273..f1b868f 100644
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@@ -1,11 +1,14 @@
 ;; LASS stylesheet for Asteroid Radio
 ;; Hacker-themed green terminal styling
 
-(:let ()
+(:let ((color-dodger-blue "#4488FF")
+       (color-aqua "#00FFFF")
+       (color-accented-black "#1a2332")
+       (main-font "VT323, monospace"))
   (:import (url "https://fonts.googleapis.com/css2?family=VT323&display=swap"))
   (body
     ;; :font-family "Courier New, monospace"
-    :font-family "VT323, monospace"
+    :font-family #(main-font)
     :font-weight 400
     :font-style normal
     :background "#0a0a0a"
@@ -14,6 +17,26 @@
     :padding "20px"
     :box-sizing "border-box"
 
+    (select
+     :font-family #(main-font))
+
+    (header
+     (.page-title
+      :display "flex"
+      :align-items "center"
+      :justify-content "center"
+      :gap "15px"
+      :margin 0)
+
+     (.page-subtitle
+      :color #(color-dodger-blue)
+      :display "flex"
+      :justify-content "center"
+      :font-style "italic"
+      :margin 0
+      :margin-top ".8rem"
+      :margin-bottom "4rem"))
+
     (.container
      :max-width "1200px"
      :margin "0 auto")
@@ -239,23 +262,45 @@
      :border "1px solid #2a3441"
      :margin "20px 0"
      :border-radius "5px"
+
      (.live-stream
-      :overflow auto) )
+      :overflow auto))
 
     (.live-stream
-     ((:or p label) :font-size "1.5rem")
+     :margin-top "2rem"
+     :font-size "1.1rem"
+     :color #(color-dodger-blue)
 
-     (code :font-size "1rem")
+     (.live-stream-label
+      :font-size "1.2rem"
+      :color #(color-aqua))
+
+     (code :font-size "0.9rem")
+
+     (.frame-enable-message
+      :color #(color-aqua))
 
      (.live-stream-quality
 
       :display "flex"
+      :align-items "center"
+      :flex-wrap "wrap"
 
       (label
        :margin-right "10px")
 
       (select
-       :padding "5px")))
+       :background "transparent"
+       :color "#00ff00"
+       :border "1px solid #00ff00"
+       :letter-spacing "0.08rem"
+       :font-size "0.95rem"
+       :min-width "220px"
+       :width "fit-content"
+       :padding "5px")
+
+      ((:and select :hover)
+       :background "#2a3441")))
 
     (.track-browser
      :margin "15px 0")
@@ -306,8 +351,14 @@
     (.audio-player
      :text-align center)
 
+    ((:and "@-moz-document" "url-prefix()")
+      (audio
+       :background-color "red"))
+
     ((:and audio |::-webkit-media-controls-panel|)
-     :background-color "#1a2332")
+     :border "1px solid"
+     :border-color #(color-accented-black)
+     :background-color #(color-accented-black))
 
     ;; ((:and audio (:or |::-webkit-media-controls-mute-button|
     ;;                   |::-webkit-media-controls-play-button|
@@ -935,6 +986,165 @@
 
   ) ;; Close main body block
 
+  ;; Persistent bottom player overrides
+  ((:and body .persistent-player-container)
+   :margin 0
+   :padding "10px;"
+   :background #(color-accented-black)
+
+   (.persistent-player
+    :display "flex"
+    :align-items "center"
+    :gap "15px"
+    :max-width "100%")
+
+   (.player-label
+    :color "#00ff00"
+    :font-weight "bold"
+    :white-space "nowrap")
+
+   (.quality-selector
+    :display "flex"
+    :align-items "center"
+    :gap "5px")
+
+   (.quality-selector
+    (label
+     :color "#00ff00"
+     :font-size "0.9em"))
+
+   (.quality-selector
+    (select
+     :background "transparent"
+     :color "#00ff00"
+     :letter-spacing "0.08rem"
+     :border "1px solid #00ff00"
+     :padding "3px 8px")
+    ((:and select :hover)
+     :background "#2a3441"))
+
+   (audio
+    :flex 1
+    :min-width "200px"
+    :border 0)
+
+   ;; ((:and audio |::-webkit-media-controls-panel|)
+   ;;   :border 1 solid #(color-accented-black)
+   ;;   :background-color #(color-accented-black))
+
+   (.now-playing-mini
+    :color "#00ff00"
+    :font-size "0.9em"
+    :white-space "nowrap"
+    :overflow "hidden"
+    :text-overflow "ellipsis"
+    :flex 1
+    :min-width "300px")
+
+   (.persistent-disable-btn
+    :background transparent
+    :color "#00ff00"
+    :border "1px solid #00ff00"
+    :padding "5px 10px"
+    :cursor "pointer"
+    :font-family #(main-font)
+    :font-size "0.85em"
+    :white-space nowrap)
+
+   ((:and .persistent-disable-btn :hover)
+    :background "#2a3441"))
+
+  ;; Popout player overrides
+  ((:and body .popout-body)
+   :margin 0
+   :padding "10px"
+   :background "#0a0a0a"
+   :overflow "hidden"
+
+   (.popout-player
+    :max-width "400px"
+    :margin "0 auto")
+
+   (.popout-header
+    :display "flex"
+    :justify-content "space-between"
+    :align-items "center"
+    :margin-bottom "10px"
+    :padding-bottom "10px"
+    :border-bottom "1px solid #2a3441")
+
+   (.popout-title
+    :font-size "1.2em"
+    :color #(color-dodger-blue)
+    (.popout-subtitle
+     :margin-top 0
+     :margin-left "2rem"
+     :font-style italic
+     :font-size ".8rem"))
+
+   (.close-btn
+    :background transparent
+    :font-family #(main-font)
+    :color "#00ff00"
+    :border "1px solid #00ff00"
+    :padding "5px 10px"
+    :cursor "pointer"
+    :border-radius "3px"
+    :font-size "0.9em")
+
+   ((:and .close-btn :hover)
+     :background "#2a3441")
+
+   (.now-playing-mini
+    :background #(color-accented-black)
+    :padding "10px"
+    :border-radius "5px"
+    :margin-bottom "10px"
+    :border "1px solid #2a3441")
+
+   (.track-info-mini
+    :font-size "0.9em")
+
+   (.track-title-mini
+    :color "#00ff00"
+    :font-weight "bold"
+    :margin-bottom "3px")
+
+    (.track-artist-mini
+     :color "#4488ff"
+     :font-size "0.85em")
+
+   (.quality-selector
+    :margin "10px 0"
+    :padding "10px"
+    :background #(color-accented-black)
+    :border-radius "5px"
+    :border "1px solid #2a3441"
+
+    (label
+     :color "#00ff00"
+     :margin-right "10px")
+
+    (select
+     :background transparent
+     :color "#00ff00"
+     :border "1px solid #00ff00"
+     :padding "5px"
+     :border-radius "3px")
+
+    ((:and select :hover)
+     :background "#2a3441"))
+
+   (audio
+    :width "100%"
+    :margin "10px 0")
+
+   (.status-mini
+    :text-align "center"
+    :color "#888"
+    :font-size "0.85em"
+    :margin-top "10px"))
+
   ;; media queries for reponsiveness
   (:media "(max-width: 576px)"
           (body
@@ -944,4 +1154,10 @@
             (>* :width "100%")
             (button :margin-left 0
                     :margin-right 0))))
+
+  ;; specific browser queries
+  (:supports "(-moz-appearance: none)"
+                  (audio
+                   :opacity 1
+                   :background-color #(color-accented-black)))
 ) ;; End of let block
diff --git a/template/audio-player-frame.ctml b/template/audio-player-frame.ctml
index e5b07a1..30be3c6 100644
--- a/template/audio-player-frame.ctml
+++ b/template/audio-player-frame.ctml
@@ -4,56 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
-  <style>
-    body {
-      margin: 0;
-      padding: 10px;
-      background: #1a1a1a;
-      font-family: 'VT323', monospace;
-    }
-    .persistent-player {
-      display: flex;
-      align-items: center;
-      gap: 15px;
-      max-width: 100%;
-    }
-    .player-label {
-      color: #00ff00;
-      font-weight: bold;
-      white-space: nowrap;
-    }
-    .quality-selector {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-    .quality-selector label {
-      color: #00ff00;
-      font-size: 0.9em;
-    }
-    .quality-selector select {
-      background: #2a2a2a;
-      color: #00ff00;
-      border: 1px solid #00ff00;
-      padding: 3px 8px;
-      font-family: 'VT323', monospace;
-    }
-    audio {
-      flex: 1;
-      min-width: 200px;
-    }
-    .now-playing-mini {
-      color: #00ff00;
-      font-size: 0.9em;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex: 1;
-      min-width: 300px;
-    }
-  </style>
 </head>
-<body>
+<body class="persistent-player-container">
   <div class="persistent-player">
     <span class="player-label">🟢 LIVE:</span>
     
@@ -73,7 +25,7 @@
     
     <span class="now-playing-mini" id="mini-now-playing">Loading...</span>
     
-    <button onclick="disableFramesetMode()" style="background: #2a2a2a; color: #00ff00; border: 1px solid #00ff00; padding: 5px 10px; cursor: pointer; font-family: 'VT323', monospace; font-size: 0.85em; white-space: nowrap;">
+    <button onclick="disableFramesetMode()" class="persistent-disable-btn">
       ✕ Disable
     </button>
   </div>
diff --git a/template/front-page-content.ctml b/template/front-page-content.ctml
index b8912dd..7aab33c 100644
--- a/template/front-page-content.ctml
+++ b/template/front-page-content.ctml
@@ -15,11 +15,12 @@
 <body>
   <div class="container">
     <header>
-      <h1 style="display: flex; align-items: center; justify-content: center; gap: 15px;">
+      <h1 class="page-title">
         <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
         <span data-text="station-name">ASTEROID RADIO</span>
         <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
       </h1>
+      <h3 class="page-subtitle">The Station at the End of Time</h3>
       <nav class="nav">
         <a href="/asteroid/content" target="content-frame">Home</a>
         <a href="/asteroid/player-content" target="content-frame">Player</a>
@@ -34,12 +35,12 @@
 
     <main>
       <div class="live-stream">
-        <h2 style="color: #00ff00;">🟢 LIVE STREAM</h2>
+          <h2 style="color: #00ff00; margin: 0;"><span style="font-size: 1rem;">🟢</span> LIVE STREAM</h2>
         <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
-        <p><strong>Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
-        <p><strong>Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
-        <p><strong>BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers on The Station at the End of Time.</span></p>
-        <p><em>The live stream player is now in the persistent bar at the bottom of the page.</em></p>
+        <p><strong class="live-stream-label">Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
+        <p><strong class="live-stream-label">Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
+        <p><strong class="live-stream-label">BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers.</span></p>
+        <p class="frame-enable-message"><em>The live stream player is now in the persistent bar at the bottom of the page</em></p>
       </div>
       
       <div id="now-playing" class="now-playing"></div>
diff --git a/template/front-page.ctml b/template/front-page.ctml
index 8ea8e39..95bdac9 100644
--- a/template/front-page.ctml
+++ b/template/front-page.ctml
@@ -15,11 +15,12 @@
 <body>
   <div class="container">
     <header>
-      <h1 style="display: flex; align-items: center; justify-content: center; gap: 15px;">
+      <h1 class="page-title">
         <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
         <span data-text="station-name">ASTEROID RADIO</span>
         <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
       </h1>
+      <h3 class="page-subtitle">The Station at the End of Time</h3>
       <nav class="nav">
         <a href="/asteroid/">Home</a>
         <a href="/asteroid/player">Player</a>
@@ -34,13 +35,13 @@
 
     <main>
       <div class="live-stream">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-          <h2 style="color: #00ff00; margin: 0;">🟢 LIVE STREAM</h2>
+        <div style="margin-bottom: 20px;">
+          <h2 style="color: #00ff00; margin: 0;"><span style="font-size: 1rem;">🟢</span> LIVE STREAM</h2>
         </div>
         
         <!-- Stream Quality Selector -->
         <div class="live-stream-quality">
-          <label for="stream-quality" ><strong>Quality:</strong></label>
+          <label for="stream-quality" class="live-stream-label" ><strong>Quality:</strong></label>
           <select id="stream-quality" onchange="changeStreamQuality()">
             <option value="aac">AAC 96kbps (Recommended)</option>
             <option value="mp3">MP3 128kbps (Compatible)</option>
@@ -49,9 +50,9 @@
         </div>
         
         <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
-        <p><strong>Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
-        <p><strong>Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
-        <p><strong>BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers on The Station at the End of Time.</span></p>
+        <p><strong class="live-stream-label">Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
+        <p><strong class="live-stream-label">Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
+        <p><strong class="live-stream-label" class="live-stream-label">BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers</span></p>
 
         <div style="display: flex; gap: 10px; justify-content: end; margin-bottom: 20px;">
             <button id="popout-btn" class="btn btn-info" onclick="openPopoutPlayer()" style="font-size: 0.9em;">
diff --git a/template/player-content.ctml b/template/player-content.ctml
index c347c46..bc2afb4 100644
--- a/template/player-content.ctml
+++ b/template/player-content.ctml
@@ -65,7 +65,7 @@
           </div>
         </div>
         
-        <audio id="audio-player" controls preload="none" style="width: 100%; margin: 20px 0;">
+        <audio id="audio-player" controls preload="none" style="width: 100%; margin: 20px 0; display: none;">
           Your browser does not support the audio element.
         </audio>
         
diff --git a/template/popout-player.ctml b/template/popout-player.ctml
index d34b0cb..234b86b 100644
--- a/template/popout-player.ctml
+++ b/template/popout-player.ctml
@@ -5,95 +5,16 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
-    <style>
-        body {
-            margin: 0;
-            padding: 10px;
-            background: #0a0a0a;
-            overflow: hidden;
-        }
-        .popout-container {
-            max-width: 400px;
-            margin: 0 auto;
-        }
-        .popout-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #2a3441;
-        }
-        .popout-title {
-            font-size: 1.2em;
-            color: #00ff00;
-        }
-        .close-btn {
-            background: #ff4444;
-            color: white;
-            border: none;
-            padding: 5px 10px;
-            cursor: pointer;
-            border-radius: 3px;
-            font-size: 0.9em;
-        }
-        .close-btn:hover {
-            background: #ff6666;
-        }
-        .now-playing-mini {
-            background: #1a1a1a;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 10px;
-            border: 1px solid #2a3441;
-        }
-        .track-info-mini {
-            font-size: 0.9em;
-        }
-        .track-title-mini {
-            color: #00ff00;
-            font-weight: bold;
-            margin-bottom: 3px;
-        }
-        .track-artist-mini {
-            color: #4488ff;
-            font-size: 0.85em;
-        }
-        .quality-selector {
-            margin: 10px 0;
-            padding: 10px;
-            background: #1a1a1a;
-            border-radius: 5px;
-            border: 1px solid #2a3441;
-        }
-        .quality-selector label {
-            color: #00ff00;
-            margin-right: 10px;
-        }
-        .quality-selector select {
-            background: #0a0a0a;
-            color: #00ff00;
-            border: 1px solid #2a3441;
-            padding: 5px;
-            border-radius: 3px;
-        }
-        audio {
-            width: 100%;
-            margin: 10px 0;
-        }
-        .status-mini {
-            text-align: center;
-            color: #888;
-            font-size: 0.85em;
-            margin-top: 10px;
-        }
-    </style>
     <script src="/asteroid/static/js/front-page.js"></script>
 </head>
-<body>
+<body class="popout-body">
     <div class="popout-container">
         <div class="popout-header">
-            <div class="popout-title">🎵 Asteroid Radio</div>
+            <div class="popout-title">
+              🎵 Asteroid Radio
+              <br/>
+              <span class="popout-subtitle">The Station at the End of Time</span>
+            </div>
             <button class="close-btn" onclick="window.close()">✖ Close</button>
         </div>