diff --git a/webroot/standalone-chat.html b/webroot/index-standalone-chat.html
similarity index 92%
rename from webroot/standalone-chat.html
rename to webroot/index-standalone-chat.html
index 96fd8aa76..fe334a600 100644
--- a/webroot/standalone-chat.html
+++ b/webroot/index-standalone-chat.html
@@ -17,7 +17,7 @@
 
     <script type="module">
       import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
-      import StandaloneChat from './js/standalone-chat-app.js';
+      import StandaloneChat from './js/app-standalong-chat.js';
 
       (function () {
         render(html`<${StandaloneChat} messagesOnly />`, document.getElementById("chat-container"));
diff --git a/webroot/index.html b/webroot/index.html
index b4fb2b46b..a751cacfb 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -1,221 +1,85 @@
+<!--
+  todo
+  - fix / consolidate responsive styles
+  - standalone video.html
+
+ -->
+
 <html>
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
 
-  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
-  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
-  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
-  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
-  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
-  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
-  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
-  <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <link rel="manifest" href="/manifest.json">
-  <meta name="msapplication-TileColor" content="#ffffff">
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-  <meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/img/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
 
-  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-  <script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
 
-  <link href="//unpkg.com/video.js@7.9.2/dist/video-js.css" rel="stylesheet">
-  <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
-  <script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script>
-  <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
+    <link href="//unpkg.com/video.js@7.9.2/dist/video-js.css" rel="stylesheet">
+    <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
+    <script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script>
+    <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
+
+    <link href="./styles/app.css" rel="stylesheet" />
+    <link href="./styles/video.css" rel="stylesheet" />
+    <link href="./styles/chat.css" rel="stylesheet" />
+    <link href="./styles/user-content.css" rel="stylesheet" />
+
+  </head>
 
-  <link href="./styles/layout.css" rel="stylesheet" />
-</head>
 
 <body class="bg-gray-300 text-gray-800">
+  <div id="app"></div>
 
-  <div id="app-container" class="flex chat">
-    <div id="top-content">  
-      <header class="flex border-b border-gray-900 border-solid shadow-md">
-        <h1 v-cloak class="flex text-gray-400">
-          <span
-            id="logo-container"
-            class="rounded-full bg-white px-1 py-1"
-            v-bind:style="{ backgroundImage: 'url(' + logo + ')' }"
-          >
-            <img class="logo visually-hidden" v-bind:src="logo">
-          </span>
-          <span class="instance-title">{{title}}</span>
-        </h1>
-
-        <div id="user-options-container" class="flex">
-          <div id="user-info">
-            <div id="user-info-display" title="Click to update user name" class="flex">
-              <img
-                src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
-                alt="" 
-                id="username-avatar" 
-                class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700"
-              />
-              <span id="username-display" class="text-indigo-600"></span>
-            </div>
-
-            <div id="user-info-change">
-              <input type="text"
-                id="username-change-input"
-                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
-                value="Random Username 123"
-                maxlength="100"
-                placeholder="Update username"
-              >
-              <button id="button-update-username" class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
-              <button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
-            </div>
-          </div>
-          <button type="button" id="chat-toggle" class="flex bg-gray-800 hover:bg-gray-700">💬</button>
-        </div>
-
-      </header>
-
-      <main v-bind:class="{ online: playerOn }">
-        <div
-          id="video-container"
-          class="flex owncast-video-container bg-black"
-          v-bind:style="{ backgroundImage: 'url(' + logoLarge + ')' }"
-        >
-          <video
-            class="video-js vjs-big-play-centered"
-            id="video"
-            preload="auto"
-            controls
-            playsinline
-          >
-          </video>
-        </div>
-
-
-        <section id="stream-info" aria-label="Stream status" v-cloak class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
-          <span>{{ streamStatus }}</span>
-          <span v-if="isOnline">{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
-          <span v-if="isOnline">Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
-          <span v-if="isOnline">{{ overallMaxViewerCount }} overall.</span>
-        </section>
-     </main>
-
-      <section id="user-content" aria-label="User information">
-        <user-details
-          v-bind:logo="logo"
-          v-bind:platforms="socialHandles"
-          v-bind:summary="summary"
-          v-bind:tags="tags"
-        >{{streamerName}}</user-details>
-
-        <div v-html="extraUserContent" class="extra-user-content">{{extraUserContent}}</div>
-
-      </section>
-
-      <owncast-footer v-bind:app-version="appVersion"></owncast-footer>
-
-    </div>
-
-    <section id="chat-container-wrap" class="flex">
-      <div id="chat-container" class="bg-gray-800">        
-        <div id="messages-container">
-          <div v-for="message in messages" v-cloak>
-            <!-- Regular user chat message-->
-              <div class="message flex" v-if="message.type === 'CHAT'">
-                <div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }">
-                  <img
-                    v-bind:src="message.image"
-                  />
-                </div>
-                <div class="message-content">
-                  <p class="message-author text-white font-bold">{{ message.author }}</p>
-                  <p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
-                </div>
-            </div>
-
-            <!-- Username change message -->
-            <div class="message flex" v-else-if="message.type === 'NAME_CHANGE'">
-                <img
-                class="mr-2"
-                width="30px"
-                  v-bind:src="message.image"
-                />
-                <div class="text-white text-center">
-                  <span class="font-bold">{{ message.oldName }}</span> is now known as <span class="font-bold">{{ message.newName }}</span>.
-                </div>
-            </div>
-
-          </div>
-        </div>
-
-
-        <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
-          <form id="message-form" class="flex">
-
-            <input type="hidden" name="inputAuthor" id="self-message-author" />
-            <div id="message-body-form" contenteditable="true" placeholder=""
-            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
-            ></div>
-              <div id="emoji-button">😏</div>
-
-            <div id="message-form-actions" class="flex">
-              <span id="message-form-warning" class="text-red-600 text-xs"></span>
-              <button
-                id="button-submit-message"
-                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
-              > Chat
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </section>
-
-  </div>
-
-  <script src="js/usercolors.js"></script>
-  <script src="js/utils.js?v=2"></script>
-  <script type="module" src="js/message.js?v=2"></script>
-  <script src="js/social.js"></script>
-  <script src="js/components.js"></script>
   <script type="module">
-      import Owncast from './js/app.js';
+    import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
+    import App from './js/app2.js';
 
-      (function () {
-        const app = new Owncast();
-        app.init();
-      })();
+    (function () {
+      render(html`<${App} />`, document.getElementById("app"));
+    })();
   </script>
 
-  <noscript>
-    <style>
-      [v-cloak] { display: none; }
-      .noscript {
-        text-align: center;
-        padding: 30px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-      }
 
-      .noscript a {
-        display: inline;
-        color: blue;
-        text-decoration: underline;
-      }
-    </style>
-    <div class="noscript">
-      <img src="https://github.com/gabek/owncast/raw/master/doc/logo.png">
-      <br/>
-      <p>
-        This <a href="https://github.com/gabek/owncast" target="_blank">Owncast</a> stream requires Javascript to play.
-      </p>
-    </div>
-  </noscript>
+<noscript>
+  <style>
+    .noscript {
+      text-align: center;
+      padding: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
 
-  <script type='module' src="/js/emoji.js"></script>
+    .noscript a {
+      display: inline;
+      color: blue;
+      text-decoration: underline;
+    }
+  </style>
+  <div class="noscript">
+    <img src="https://github.com/gabek/owncast/raw/master/doc/logo.png" />
+    <br/>
+    <p>
+      This <a href="https://github.com/gabek/owncast" target="_blank">Owncast</a> stream requires Javascript to play.
+    </p>
+  </div>
+</noscript>
 </body>
 </html>
diff --git a/webroot/index2.html b/webroot/index2.html
deleted file mode 100644
index a751cacfb..000000000
--- a/webroot/index2.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<!--
-  todo
-  - fix / consolidate responsive styles
-  - standalone video.html
-
- -->
-
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
-
-    <link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"  href="/img/favicon/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png">
-    <meta name="theme-color" content="#ffffff">
-
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-
-    <link href="//unpkg.com/video.js@7.9.2/dist/video-js.css" rel="stylesheet">
-    <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
-    <script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script>
-    <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
-
-    <link href="./styles/app.css" rel="stylesheet" />
-    <link href="./styles/video.css" rel="stylesheet" />
-    <link href="./styles/chat.css" rel="stylesheet" />
-    <link href="./styles/user-content.css" rel="stylesheet" />
-
-  </head>
-
-
-<body class="bg-gray-300 text-gray-800">
-  <div id="app"></div>
-
-  <script type="module">
-    import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
-    import App from './js/app2.js';
-
-    (function () {
-      render(html`<${App} />`, document.getElementById("app"));
-    })();
-  </script>
-
-
-<noscript>
-  <style>
-    .noscript {
-      text-align: center;
-      padding: 30px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
-
-    .noscript a {
-      display: inline;
-      color: blue;
-      text-decoration: underline;
-    }
-  </style>
-  <div class="noscript">
-    <img src="https://github.com/gabek/owncast/raw/master/doc/logo.png" />
-    <br/>
-    <p>
-      This <a href="https://github.com/gabek/owncast" target="_blank">Owncast</a> stream requires Javascript to play.
-    </p>
-  </div>
-</noscript>
-</body>
-</html>
diff --git a/webroot/js/standalone-chat-app.js b/webroot/js/app-standalone-chat.js
similarity index 100%
rename from webroot/js/standalone-chat-app.js
rename to webroot/js/app-standalone-chat.js
