diff --git a/webroot/js/app2.js b/webroot/js/app2.js
index 894178093..04ef2e5ac 100644
--- a/webroot/js/app2.js
+++ b/webroot/js/app2.js
@@ -1,4 +1,4 @@
-import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
+import { h, Component } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 
@@ -11,6 +11,8 @@ import { OwncastPlayer } from './player.js';
 
 import {
   getLocalStorage,
+  setLocalStorage,
+  clearLocalStorage,
   generateAvatar,
   generateUsername,
   URL_OWNCAST,
@@ -25,7 +27,7 @@ import {
   MESSAGE_OFFLINE,
   MESSAGE_ONLINE,
 } from './utils.js';
-import { KEY_USERNAME, KEY_AVATAR,  } from './utils/chat.js';
+import { KEY_USERNAME, KEY_AVATAR, KEY_CHAT_DISPLAYED } from './utils/chat.js';
 
 export default class App extends Component {
   constructor(props, context) {
@@ -33,7 +35,7 @@ export default class App extends Component {
 
     this.state = {
       websocket: new Websocket(),
-      displayChat: false, // chat panel state
+      displayChat: getLocalStorage(KEY_CHAT_DISPLAYED), // chat panel state
       chatEnabled: false, // chat input box state
       username: getLocalStorage(KEY_USERNAME) || generateUsername(),
       userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
@@ -274,8 +276,15 @@ export default class App extends Component {
 
   handleChatPanelToggle() {
     const { displayChat: curDisplayed } = this.state;
+
+    const displayChat = !curDisplayed;
+    if (displayChat) {
+      setLocalStorage(KEY_CHAT_DISPLAYED, displayChat);
+		} else {
+			clearLocalStorage(KEY_CHAT_DISPLAYED);
+		}
     this.setState({
-      displayChat: !curDisplayed,
+      displayChat,
     });
   }
 
diff --git a/webroot/js/chat/chat-input.js b/webroot/js/chat/chat-input.js
index dcc904ad5..c42eea08d 100644
--- a/webroot/js/chat/chat-input.js
+++ b/webroot/js/chat/chat-input.js
@@ -239,6 +239,7 @@ export default class ChatInput extends Component {
         <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
 
           <${ContentEditable}
+            id="message-input"
             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"
 
             placeholderText=${placeholderText}
diff --git a/webroot/js/chat/message.js b/webroot/js/chat/message.js
index 1e52a76d3..985725581 100644
--- a/webroot/js/chat/message.js
+++ b/webroot/js/chat/message.js
@@ -27,10 +27,10 @@ export default class Message extends Component {
             >
               <img src=${avatar} />
             </div>
-            <div class="message-content">
+            <div class="message-content text-sm">
               <p class="message-author text-white font-bold" style=${authorTextColor}>${author}</p>
               <div
-                class="message-text text-gray-400 font-thin"
+                class="message-text text-gray-300 font-normal"
                 dangerouslySetInnerHTML=${
                   { __html: formattedMessage }
                 }
@@ -43,9 +43,11 @@ export default class Message extends Component {
       return (
         html`
           <div class="message flex">
-            <img class="mr-2" src=${image} />
-            <div class="text-white text-center">
-              <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
+            <div class="message-content text-sm">
+              <img class="mr-2" src=${image} />
+              <div class="text-white text-center">
+                <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
+              </div>
             </div>
           </div>
         `);
diff --git a/webroot/js/utils.js b/webroot/js/utils.js
index 7beda7a1e..da32a79db 100644
--- a/webroot/js/utils.js
+++ b/webroot/js/utils.js
@@ -15,8 +15,6 @@ export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAE
 export const MESSAGE_OFFLINE = 'Stream is offline.';
 export const MESSAGE_ONLINE = 'Stream is online';
 
-
-
 export const URL_OWNCAST = 'https://github.com/gabek/owncast'; // used in footer
 
 export function getLocalStorage(key) {
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index c291a9a8d..18e026409 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -9,11 +9,54 @@
   padding: 1em;
 }
 
-#message-form {
+/******************************/
+/******************************/
+#message-input {
+  height: 5rem;
+  font-size: .85em;
+}
+#message-input img {
+  display: inline;
+  vertical-align: middle;
+  padding: 5px;
+}
+
+#message-input .emoji {
+  width: 2.2em;
+}
+
+
+/* If the div is empty then show the placeholder */
+#message-input:empty:before{
+  content: attr(placeholderText);
+  pointer-events: none;
+  display: block; /* For Firefox */
+  color: rgba(0, 0, 0, 0.5);
+}
+
+/* When chat is enabled (contenteditable=true)  */
+#message-input[contenteditable=true]:before {
+  opacity: 1.0;
+}
+
+
+/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
+#message-input:disabled,
+#message-input[contenteditable=false] {
+  opacity: 0.6;
+}
+/******************************/
+/******************************/
+
+
+
+
+
+/* #message-form {
   flex-direction: column;
   align-items: flex-end;
   margin-bottom: 0;
-}
+} */
 
 
 
@@ -122,56 +165,5 @@
 
 
 
-/*
-The chat input has a fake placeholder that is styled below.
-It pulls the placeholder text from the div's placeholder attribute.
-But really it's just the innerHTML content.
-*/
-
-
-
-
-
-
-
-#message-body-form {
-  font-size: 1em;
-  height: 60px;
-}
-#message-body-form:disabled{
-  opacity: .5;
-}
-#message-body-form img {
-  display: inline;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-#message-body-form .emoji {
-  width: 40px;
-}
-
-
-/* If the div is empty then show the placeholder */
-#message-body-form:empty:before{
-  content: attr(placeholder);
-  pointer-events: none;
-  display: block; /* For Firefox */
-
-  /* Style the div's placeholder text color */
-  color: rgba(0, 0, 0, 0.5);
-}
-
-/* When chat is enabled (contenteditable=true)  */
-#message-body-form[contenteditable=true]:before {
-  opacity: 1.0;
-}
-
-
-/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
-#message-body-form[contenteditable=false] {
-  opacity: 0.6;
-}
-
 
 
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 9eb6a6384..ca914b538 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -242,7 +242,6 @@ h2 {
 }
 
 .vjs-airplay .vjs-icon-placeholder::before {
-  /* content: 'AP'; */
   content: url("../img/airplay.png");
 }
 
diff --git a/webroot/styles/user-content.css b/webroot/styles/user-content.css
index dea858f08..32a4d99b4 100644
--- a/webroot/styles/user-content.css
+++ b/webroot/styles/user-content.css
@@ -55,7 +55,7 @@
   --icon-width: 40px;
   height: var(--icon-width);
   width: var(--icon-width);
-  background-image: url(../img/social-icons.gif);
+  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);
@@ -69,105 +69,137 @@
 }
 
 
+/*
+EXTRA CUSTOM CONTENT STYLES
+Assumes markup converted from markdown input.
+*/
 
-
-.extra-user-content {
+#extra-user-content {
   padding: 1em 3em 3em 3em;
 }
 
-.extra-user-content ol {
+#extra-user-content ol {
   list-style: decimal;
 }
 
-.extra-user-content ul {
+#extra-user-content ul {
   list-style: unset;
 }
 
-.extra-user-content h1, .extra-user-content h2, .extra-user-content h3, .extra-user-content h4 {
+#extra-user-content h1,
+#extra-user-content h2,
+#extra-user-content h3,
+#extra-user-content h4 {
   color: #111111;
-  font-weight: 400; }
+  font-weight: 400;
+}
 
-.extra-user-content h1, .extra-user-content h2, .extra-user-content h3, .extra-user-content h4, .extra-user-content h5, .extra-user-content p {
+#extra-user-content h1,
+#extra-user-content h2,
+#extra-user-content h3,
+#extra-user-content h4,
+#extra-user-content h5,
+#extra-user-content p {
   margin-bottom: 24px;
-  padding: 0; }
+  padding: 0;
+}
 
-.extra-user-content h1 {
-  font-size: 48px; }
+#extra-user-content h1 {
+  font-size: 48px;
+}
 
-.extra-user-content h2 {
+#extra-user-content h2 {
   font-size: 36px;
-  margin: 24px 0 6px; }
+  margin: 24px 0 6px;
+}
 
-.extra-user-content h3 {
-  font-size: 24px; }
+#extra-user-content h3 {
+  font-size: 24px;
+}
 
-.extra-user-content h4 {
-  font-size: 21px; }
+#extra-user-content h4 {
+  font-size: 21px;
+}
 
-.extra-user-content h5 {
-  font-size: 18px; }
+#extra-user-content h5 {
+  font-size: 18px;
+}
 
-.extra-user-content a {
+#extra-user-content a {
   color: #0099ff;
   margin: 0;
   padding: 0;
-  vertical-align: baseline; }
+  vertical-align: baseline;
+}
 
-.extra-user-content ul, .extra-user-content ol {
+#extra-user-content ul, #extra-user-content ol {
   padding: 0;
-  margin: 0; }
+  margin: 0;
+}
 
-.extra-user-content li {
-  line-height: 24px; }
+#extra-user-content li {
+  line-height: 24px;
+}
 
-.extra-user-content li ul, .extra-user-content li ul {
+#extra-user-content li ul, #extra-user-content li ul {
   margin-left: 24px; }
 
-.extra-user-content p, .extra-user-content ul, .extra-user-content ol {
+#extra-user-content p, #extra-user-content ul, #extra-user-content ol {
   font-size: 16px;
   line-height: 24px;
-  }
 
-.extra-user-content pre {
+}
+
+#extra-user-content pre {
   padding: 0px 24px;
   max-width: 800px;
-  white-space: pre-wrap; }
+  white-space: pre-wrap;
+}
 
-.extra-user-content code {
+#extra-user-content code {
   font-family: Consolas, Monaco, Andale Mono, monospace;
   line-height: 1.5;
-  font-size: 13px; }
+  font-size: 13px;
+}
 
-.extra-user-content aside {
+#extra-user-content aside {
   display: block;
   float: right;
-  width: 390px; }
+  width: 390px;
+}
 
-.extra-user-content blockquote {
+#extra-user-content blockquote {
   margin: 1em 2em;
-  max-width: 476px; }
+  max-width: 476px;
+}
 
-.extra-user-content blockquote p {
+#extra-user-content blockquote p {
   color: #666;
-  max-width: 460px; }
+  max-width: 460px;
+}
 
-.extra-user-content hr {
+#extra-user-content hr {
   width: 540px;
   text-align: left;
   margin: 0 auto 0 0;
-  color: #999; }
+  color: #999;
+}
 
-.extra-user-content table {
+#extra-user-content table {
   border-collapse: collapse;
   margin: 1em 1em;
-  border: 1px solid #CCC; }
+  border: 1px solid #CCC;
+}
 
-.extra-user-content table thead {
-  background-color: #EEE; }
+#extra-user-content table thead {
+  background-color: #EEE;
+}
 
-.extra-user-content table thead td {
-  color: #666; }
+#extra-user-content table thead td {
+  color: #666;
+}
 
-.extra-user-content table td {
+#extra-user-content table td {
   padding: 0.5em 1em;
-  border: 1px solid #CCC; }
+  border: 1px solid #CCC;
+}