diff --git a/app.js b/app.js
index 8647408..239ad49 100644
--- a/app.js
+++ b/app.js
@@ -8,6 +8,33 @@ import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/
 import { createRoot } from "https://esm.sh/react-dom/client";
 
 const StyledRoot = styled.div`
+.Boxcast-Player
+{
+    .boxcast-well
+    {
+        display:flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px 10px;
+        min-height: 10px;
+        margin: 0;
+
+        & > span, .boxcast-linkback
+        {
+            display:none;
+        }
+
+        & > *
+        {
+            margin: 0;
+        }
+    }
+}
+.Boxcast-Playlist
+{
+    max-width: 550px;
+    margin: 30px auto;
+}
 .Partition
 {
     margin: 10px 0 0 0;
@@ -30,12 +57,18 @@ const StyledRoot = styled.div`
             font-weight: 900;
             font-family: sans-serif;
             letter-spacing: 0.1em;
+            text-transform: uppercase;
 
             &.Next
             {
                 background: yellow;
                 color: black;
             }
+            &.Soon
+            {
+                background: orange;
+                color: white;
+            }
             &.Live
             {
                 background: limegreen;
@@ -71,7 +104,7 @@ const StyledRoot = styled.div`
         }
         button[disabled]
         {
-            background: grey;
+            background: red;
         }
     }
 }
@@ -192,7 +225,6 @@ const App = props =>
     }
     , [ListGet]);
 
-
     // on new video selected
     useEffect(()=>
     {
@@ -212,7 +244,7 @@ const App = props =>
 
     return html`
     <${StyledRoot}>
-        <div id=${PlayerID}></div>
+        <div class="Boxcast-Player" id=${PlayerID}></div>
         <div class="Boxcast-Playlist">
         ${
             ListGet.map( (item, index) =>
@@ -241,16 +273,22 @@ const App = props =>
 /** @type {(props:{item:Boxcast.Broadcast, previous: false | Boxcast.Broadcast,  priority:boolean, selected:boolean, select:()=>void})=>any} */
 const BroadcastItem = ({item, previous, priority, selected, select}) =>
 {
+    // pointer
     let pointerText;
-    if(item.timeframe == "current" || item.timeframe == "preroll")
-    {
-        pointerText = html`<div class="Badge Live">Live</div>`;
-    }
-    else if (priority)
+    if (priority)
     {
         pointerText = html`<div class="Badge Next">Next</div>`;
     }
+    if(item.timeframe == "current")
+    {
+        pointerText = html`<div class="Badge Live">Live</div>`;
+    }
+    if(item.timeframe == "preroll")
+    {
+        pointerText = html`<div class="Badge Soon">Soon</div>`;
+    }
 
+    // (date) partition
     let partition;
     if(!previous || (previous.start.Date !== item.start.Date))
     {
@@ -259,10 +297,11 @@ const BroadcastItem = ({item, previous, priority, selected, select}) =>
         </h3>`;
     }
 
+    // button
     let buttonText;
     if(item.timeframe == "past")
     {
-        buttonText = "Recording";
+        buttonText = "Re-watch";
     }
     if(item.timeframe == "current" || item.timeframe == "preroll")
     {
diff --git a/index.html b/index.html
index 50e7c85..518e180 100644
--- a/index.html
+++ b/index.html
@@ -5,12 +5,12 @@
 </head>
 <body>
 
-<div style="max-width:500px; margin: 0 auto;">
+<div style="max-width:1100px; margin: 0 auto;">
     <div id="boxcast"></div>
     <script type="module">
         import Init from "./app.js";
         const Channel = { Basics: "sfz7ja3rlpoous6usu8a", Sunday: "gzahmhugrzogttfdtbjj", Dev: "r3os2zfdnhlquhuypgtp" };
-        Init(Channel.Dev, "#boxcast");
+        Init(Channel.Basics, "#boxcast");
     </script>
 </div>
 
