diff --git a/app.js b/app.js
index 270ab68..8647408 100644
--- a/app.js
+++ b/app.js
@@ -3,16 +3,10 @@
 
 import 'https://js.boxcast.com/v3.min.js';
 import { html } from "https://esm.sh/htm/react";
-import styled, { css, keyframes } from 'https://esm.sh/styled-components';
-import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react';
+import styled from 'https://esm.sh/styled-components?deps=react@18';
+import { createElement as h, useState, useEffect, useRef } from 'https://esm.sh/react@18';
 import { createRoot } from "https://esm.sh/react-dom/client";
 
-/*
-import State01 from "./testdata-01.json" assert { type: "json" };
-import State02 from "./testdata-02.json" assert { type: "json" };
-import State03 from "./testdata-03.json" assert { type: "json" };
-*/
-
 const StyledRoot = styled.div`
 .Partition
 {
@@ -160,29 +154,31 @@ const App = props =>
     }
     , []);
 
-    // on new list
-    useEffect(()=>
-    {
-        let leading;
-        for(let i=0; i<ListGet.length; i++)
-        {
-            if(ListGet[i].timeframe != "past")
-            {
-                leading = ListGet[i];
-                LeadingSet(leading);
+   // on new list
+   useEffect(()=>
+   {
+       let leading;
+       for(let i=0; i<ListGet.length; i++)
+       {
+           if(ListGet[i].timeframe != "past")
+           {
+               leading = ListGet[i];
 
-                if(SelectedGet == null) // if nothing is selected select the leading event
-                {
-                    SelectedSet(leading.id);
-                }
-                else if(SelectedGet != leading?.id) // if something is selected other than the leading event, alert the user
-                {
-                    AlertSet(true);
-                }
+               if( (leading.timeframe == "current" || leading.timeframe == "preroll") && (leading.id != LeadingGet?.id) && (SelectedGet != leading.id)) // if something is selected other than the leading event, alert the user
+               {
+                   AlertSet(true);
+               }
 
-                return;
-            }
-        }
+               if(SelectedGet == null) // if nothing is selected select the leading event
+               {
+                   SelectedSet(leading.id);
+               }
+
+               LeadingSet(leading);
+
+               return;
+           }
+       }
 
         if(ListGet.length) // if there are events but theres no leading event, clear leading and select the first event
         {
@@ -217,13 +213,6 @@ const App = props =>
     return html`
     <${StyledRoot}>
         <div id=${PlayerID}></div>
-        <!--
-        <div>
-            <button onClick=${()=>ListSet(SortStart(State01))}>testdata-01</button>
-            <button onClick=${()=>ListSet(SortStart(State02))}>testdata-02</button>
-            <button onClick=${()=>ListSet(SortStart(State03))}>testdata-03</button>
-        </div>
-        -->
         <div class="Boxcast-Playlist">
         ${
             ListGet.map( (item, index) =>
diff --git a/index.html b/index.html
index 192c493..50e7c85 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
-<head></head>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+</head>
 <body>
 
 <div style="max-width:500px; margin: 0 auto;">
