diff --git a/webroot/index2.html b/webroot/index2.html
index 63920763b..babc44c3f 100644
--- a/webroot/index2.html
+++ b/webroot/index2.html
@@ -1,3 +1,14 @@
+<!--
+  todo
+  - clean up commented out css
+  - fix / consolidate responsive styles
+  - consolidate utils
+  - remove unused files
+  - reorg /js
+  - standalone video.html
+
+ -->
+
 <html>
   <head>
     <meta charset="UTF-8" />
@@ -28,7 +39,8 @@
     <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/layout.css" rel="stylesheet" />
+    <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" />
 
diff --git a/webroot/js/app2.js b/webroot/js/app2.js
index 551693292..35e6bd6bd 100644
--- a/webroot/js/app2.js
+++ b/webroot/js/app2.js
@@ -390,7 +390,7 @@ export default class App extends Component {
             </div>
 
 
-            <section id="stream-info" aria-label="Stream status" class="flex text-center flex-row justify-between w-full text-xs font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid ${streamInfoClass}">
+            <section id="stream-info" aria-label="Stream status" class="flex text-center flex-row justify-between font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid ${streamInfoClass}">
               <span>${streamStatusMessage}</span>
               <span>${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
               <span>Max ${pluralize('viewer', sessionMaxViewerCount)}.</span>
diff --git a/webroot/js/chat/username.js b/webroot/js/chat/username.js
index babf6d300..bb67ba260 100644
--- a/webroot/js/chat/username.js
+++ b/webroot/js/chat/username.js
@@ -87,7 +87,7 @@ export default class UsernameForm extends Component {
             <span id="username-display" class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap">${username}</span>
           </div>
 
-          <div id="user-info-change" class="flex p-1 items-center justify-end" style=${styles.form}>
+          <div id="user-info-change" class="flex flex-no-wrap p-1 items-center justify-end" style=${styles.form}>
             <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 text-xs focus:bg-white"
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index 85b7eaaa4..2db8094ea 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -6,11 +6,6 @@
   width: var(--right-col-width);
 
   height: calc(100vh - var(--header-height));
-
-  /* overflow: hidden; */
-  /* display: flex;
-  flex-direction: column;
-  justify-content: flex-end; */
 }
 
 .touch-screen #chat-container {
@@ -27,23 +22,9 @@
 }
 
 
-
-#messages-container {
-  /* overflow: auto;
-  padding: 1em 0; */
-}
-
-#message-input-container {
-  /* width: 100%; */
-  /* padding: 1em; */
-}
-
 /******************************/
 /******************************/
-#message-input {
-  /* height: 5rem; */
-  /* font-size: .85em; */
-}
+
 #message-input img {
   display: inline;
   vertical-align: middle;
@@ -79,49 +60,14 @@
 /******************************/
 
 
-
-
-
-/* #message-form {
-  flex-direction: column;
-  align-items: flex-end;
-  margin-bottom: 0;
-} */
-
-
-
-#message-form-actions {
-  /* flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%; */
-}
-
-#message-form-actions-buttons {
-  /* flex-direction: row;
-  justify-content: flex-end;
-  align-items: center; */
-}
-
-/* Emoji picker button */
-#emoji-button {
-  /* font-size: 1.75em; */
-  /* cursor: pointer;
-  margin-right: .5em; */
-}
 .emoji-picker__emoji {
   border-radius: 10px;
 }
 
 
-.message {
-  /* padding: .85em; */
-  /* align-items: flex-start; */
-}
 .message-avatar {
   height: 3.0em;
   width: 3.0em;
-  /* margin-right: .75em; */
 }
 .message-avatar img {
   max-width: unset;
@@ -131,9 +77,6 @@
 }
 
 .message-content {
-  /* font-size: .85em; */
-  max-width: 85%;
-  /* word-wrap: break-word; */
 }
 
 
@@ -190,10 +133,6 @@
   height: 12rem;
 }
 
-.message-text .highlighted {
-  /* color: orange;
-  font-weight: 400;
-} */
 /* MESSAGE TEXT CONTENT */
 /* MESSAGE TEXT CONTENT */
 /* MESSAGE TEXT CONTENT */
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index aaa50fe29..3518b0705 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -1,6 +1,7 @@
 /*
 Overall layout styles for all of owncast app.
 
+DE[RECATE THIS LAYOUT.CSS FILE.
 */
 
 /* variables */
@@ -12,22 +13,19 @@ Overall layout styles for all of owncast app.
   --user-image-width: 10em;
 }
 
-body {
-  font-size: 14px;
+html {
+  font-size:  14px;
 }
 
 a:hover {
   text-decoration: underline;
 }
-/* vuejs attribute to hide things before content ready */
-[v-cloak] { visibility: hidden; }
 
 ::-webkit-scrollbar {
   width: 0px;
   background: transparent;
 }
 
-
 .visually-hidden {
   position: absolute !important;
   height: 1px;
@@ -38,176 +36,25 @@ a:hover {
   white-space: nowrap; /* added line */
 }
 
-#app-container {
-  /* width: 100%;
-  flex-direction: column;
-  justify-content: flex-start;
-  position: relative; */
-}
 
 header {
-  /* position: fixed;
-  width: 100%; */
   height: var(--header-height);
-  /* top: 0;
-  left: 0; */
   background-color: var(--header-bg-color);
-  /* z-index: 10; */
-  /* flex-direction: row;
-  justify-content: space-between; */
-  /* flex-wrap: nowrap; */
 }
 
-header h1 {
-  /* font-size: 1.25em; */
-  /* font-weight: 100;
-  letter-spacing: 1.2; */
-  /* text-transform: uppercase; */
-  /* padding: .5em; */
-  /* white-space: nowrap; */
-  /* justify-content: flex-start;
-  align-items: center;
-  flex-direction: row; */
-  /* overflow: hidden; */
-}
-#logo-container{
-  /* height: 1.75em;
-  width: 1.75em; */
-  /* min-height: 1.75em;
-  min-width: 1.75em; */
-  /* margin-right: .5em; */
-  /* display: inline-block; */
-  /* background-repeat: no-repeat; */
-  /* background-position: center center; */
+#logo-container {
   background-size: 1.35em;
 }
-header .instance-title {
-  /* overflow: hidden;
-  text-overflow: ellipsis; */
-}
+
 #chat-toggle {
-  /* cursor: pointer;
-  text-align: center; */
-  /* height: 100%;*/
   min-width: 3rem;
-/*  justify-content: center;
-  align-items: center; */
 }
 
-footer {
-  /* flex-direction: row;
-  justify-content: flex-start;
-  font-size: .75em;
-  padding: 2em;
-  opacity: .5; */
-}
-footer span {
-  /* display: inline-block;
-  margin: 0 1em; */
-}
-
-
 /* ************************************************8 */
 
-#stream-info {
-  /* padding: .5em 2em; */
-  /* text-align: center;
-  width: 100%;
-
-  flex-direction: row;
-  justify-content: space-between; */
-
-}
-#stream-info span {
-  /* font-size: .7em; */
-}
-.user-content {
-  /* padding: 2em; */
-}
-/* #user-content {
-  display: block;
-}
-#user-content-touch {
-  display: none;
-} */
-/* ************************************************8 */
-
-
-
-
-/* .user-image img {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-} */
-.stream-summary {
-  /* margin: 1em 0; */
-}
-
-h2 {
-  /* font-size: 3em; */
-}
-
-
-/* ************************************************8 */
-
-#user-options-container {
-  /* flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  flex-wrap: nowrap; */
-}
-
-#user-info-display {
-  /* display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  cursor: pointer;
-  padding: .5em 1em;
-  overflow: hidden;
-  width: 100%; */
-}
-
-#username-avatar {
-  /* height: 2.1em;
-  width: 2.1em;
-  margin-right: .5em; */
-}
-#username-display {
-  /* font-weight: 600; */
-  /* font-size: .75em; */
-  /* white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden; */
-}
-#user-info-display:hover {
-  /* transition: opacity .2s;
-  opacity: .75; */
-}
-
 
 #user-info-change {
   display: none;
-  /* justify-content: flex-end;
-  align-items: center;
-  padding: .25em; */
-}
-#username-change-input {
-  /* font-size: .75em; */
-}
-#button-update-username {
-  /* font-size: .65em; */
-  /* text-transform: uppercase; */
-  /* height: 2.5em; */
-}
-#button-cancel-change {
-  /* cursor: pointer; */
-  /* height: 2.5em; */
-  /* font-size: .65em; */
-}
-.user-btn {
-  /* margin: 0 .25em; */
 }
 
 /* ************************************************8 */
@@ -215,20 +62,12 @@ h2 {
 
 #video-container {
   height: calc(var(--video-container-height));
-  /* width: 100%; */
   margin-top: var(--header-height);
-  /* background-position: center center;
-  background-repeat: no-repeat; */
-
   background-size: 30%;
 }
 
 .owncast-video-container {
   height: auto;
-  /* display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center; */
 }
 .owncast-video-container .video-js {
   width: 100%;
@@ -271,10 +110,9 @@ h2 {
   width: calc(100% - var(--right-col-width));
 }
 
-
-
-
-
+#stream-info span {
+  font-size: .70rem;
+}
 
 /* ************************************************8 */
 
diff --git a/webroot/styles/user-content.css b/webroot/styles/user-content.css
index b2671a503..0121ab5ea 100644
--- a/webroot/styles/user-content.css
+++ b/webroot/styles/user-content.css
@@ -1,82 +1,26 @@
-.user-content {
-  /* padding: 3rem; */
-
-  /* display: flex;
-  flex-direction: row; */
-}
 .user-content .user-image {
-  /* padding: 1rem;
-  margin-right: 2rem; */
   min-width: var(--user-image-width);
   width: var(--user-image-width);
   height: var(--user-image-width);
   max-height: var(--user-image-width);
-  /* background-repeat: no-repeat;
-  background-position: center center; */
   background-size: calc(var(--user-image-width) - 1em);
 }
 
-.user-content-header {
-  /* margin-bottom: 2rem; */
-}
-
-.tag-list {
-  /* flex-direction: row; */
-  /* margin: 1em 0; */
-}
-.tag-list li {
-  /* font-size: .75rem; */
-  /* text-transform: uppercase; */
-  /* margin-right: .75rem; */
-  /* padding: .5rem; */
-}
-
-
-.social-list {
-  /* flex-direction: row; */
-  /* align-items: center; */
-  /* justify-content: flex-start; */
-  /* flex-wrap: wrap; */
-}
-.social-list .follow-label {
-  /* font-weight: bold; */
-  /* font-size: .75rem; */
-  /* margin-right: .5rem; */
-  /* text-transform: uppercase; */
-}
-
-.user-social-item {
-  /* display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-right: -.25rem; */
-}
 .user-social-item .platform-icon {
   --icon-width: 40px;
   height: var(--icon-width);
   width: var(--icon-width);
   background-image: url(/img/social-icons.gif);
-  /* background-repeat: no-repeat; */
   background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width));
   transform: scale(.65);
 }
 
-.user-social-item.use-default .platform-label {
-  /* font-size: .7rem; */
-  /* text-transform: uppercase; */
-  /* display: inline-block; */
-  /* max-width: 10rem; */
-}
-
 
 /*
 EXTRA CUSTOM CONTENT STYLES
 Assumes markup converted from markdown input.
 */
 
-#extra-user-content {
-  /* padding: 1rem 3rem 3rem 3rem; */
-}
 
 #extra-user-content ul,
 #extra-user-content ol {
@@ -94,14 +38,6 @@ Assumes markup converted from markdown input.
   margin-left: 1.5rem;
 }
 
-/* #extra-user-content h1,
-#extra-user-content h2,
-#extra-user-content h3,
-#extra-user-content h4 {
-  color: #111111;
-  font-weight: 400;
-} */
-
 #extra-user-content h1,
 #extra-user-content h2,
 #extra-user-content h3,
@@ -116,7 +52,6 @@ Assumes markup converted from markdown input.
 }
 
 
-
 #extra-user-content h1 {
   font-size: 2.1rem;
 }
