diff --git a/webroot/index.html b/webroot/index.html
index 5f8b0cc44..85b6cb396 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -17,15 +17,37 @@
 </head>
 
 <body>
-  <div id="app-container" class="flex">
+  <div id="app-container" class="flex no-chat">
     <header class="flex">
       <h1>
-        Maybe a header
+        😈 Owncast 
       </h1>
-      <span>💬</span>
+
+      <div id="user-options-container" class="flex">
+        <span id="chat-toggle" class="rounded-full">💬</span>
+
+        <div id="user-info">
+          <div id="user-info-display" title="Click to update user name" class="flex">
+            <img src="https://robohash.org/username123" id="username-avatar" class="rounded-full" />
+            <span id="username-display">Random Username 123</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" title="cancel">X</button>
+          </div>
+        </div>
+      </div>
 
     </header>
-    <div id="main-content-container" class="flex nxo-chat">
+    <div id="main-content-container" class="flex">
       <!-- LEFT CONTAINER SIDE-->
       <div class="flex main-cols left-col">
 
@@ -33,25 +55,13 @@
           <video
             id="video"
             preload="auto"
-            autoplay
             controls
             src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
           ></video>
         </div>
 
-        <div id="info">
+        <div id="stream-info">
           {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
-          Heart rate notifications.
-Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
-<br>
-If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
-<br>
-Heart rate notifications.
-Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.
-<br>
-If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
-
-
         </div>
       </div>
 
@@ -60,17 +70,12 @@ If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear t
 
         <div id="chat-container">
           <div id="messages-container">
-            Heart rate notifications.
-Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.— can be viewed in the Health app on iPhone.
-
             <div v-for="(message, index) in messages">
-              
                 <div class="message flex">
                   <img
                     v-bind:src="message.image"
                     class="message-avatar rounded-full"
                   />
-    
                   <div class="message-content">
                     <p class="message-author">{{ message.author }}</p>
                     <p class="message-text"v-html="message.linkedText()"></p>
@@ -79,9 +84,10 @@ Apple Watch checks for unusually high or low heart rates in the background, whic
             </div>
           </div>
     
-          <div id="chat-input-container" class="shadow-md">
-            <form id="chat-form" class="flex" @submit="submitChatForm">
-              <input type="hidden" name="inputAuthor" id="inputAuthor"  v-model="message.author" />
+          <div id="message-input-container" class="shadow-md">
+            <form id="message-form" class="flex" @submit="submitChatForm">
+
+              <input type="hidden" name="inputAuthor" id="self-message-author"  v-model="message.author" />
 
               <!-- Author -->
               <!-- <label class="control-label" for="inputAuthor">Author</label>
@@ -99,15 +105,16 @@ Apple Watch checks for unusually high or low heart rates in the background, whic
                 placeholder="Message"
                 v-model="message.body"
                 class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 leading-tight  focus:bg-white"
-              >
-              </textarea>
+              ></textarea>
               
+              <div id="message-form-actions" class="flex">
+                <span id="message-form-warning">X chars left</span>
+                <button
+                  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
+                > Send
+                </button>
+              </div>
       
-              <button
-                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
-              >
-                Send
-              </button>
             </form>
           </div>
         </div>
diff --git a/webroot/js/app.js b/webroot/js/app.js
index 36bc7330d..ce45491b9 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -1,14 +1,14 @@
 function setupApp() {
   Vue.filter('plural', function (string, count) {
     if (count === 1) {
-      return string
+      return string;
     } else {
-      return string + "s"
+      return string + "s";
     }
   })
 
   window.app = new Vue({
-    el: "#info",
+    el: "#stream-info",
     data: {
       streamStatus: "",
       viewerCount: 0,
@@ -32,17 +32,20 @@ function setupApp() {
     },
     methods: {
       submitChatForm: function (e) {
-        const message = new Message(this.message)
-        message.id = uuidv4()
-        localStorage.author = message.author
-        const messageJSON = JSON.stringify(message)
-        window.ws.send(messageJSON)
-        e.preventDefault()
+        const message = new Message(this.message);
+        message.id = uuidv4();
+        localStorage.author = message.author;
+        const messageJSON = JSON.stringify(message);
+        window.ws.send(messageJSON);
+        e.preventDefault();
 
-        this.message.body = ""
+        this.message.body = "";
       }
     }
   });
+
+  var appMessagingMisc = new Messaging();
+  appMessagingMisc.init();
 }
 
 async function getStatus() {
@@ -64,7 +67,7 @@ async function getStatus() {
 
 }
 
-var websocketReconnectTimer
+var websocketReconnectTimer;
 function setupWebsocket() {
   clearTimeout(websocketReconnectTimer)
 
@@ -138,7 +141,7 @@ setupWebsocket()
 // }
 
 function scrollSmoothToBottom(id) {
-  const div = document.getElementById(id)
+  const div = document.getElementById(id);
   $('#' + id).animate({
     scrollTop: div.scrollHeight - div.clientHeight
   }, 500)
diff --git a/webroot/js/message.js b/webroot/js/message.js
index 36720ed2e..da3dae226 100644
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@@ -18,4 +18,111 @@ class Message {
 			id: this.id
 		}
 	}
+}
+
+
+// convert newlines to <br>s
+
+class Messaging {
+	constructor() {
+		this.chatDisplayed = false;
+		this.username = "";
+		this.avatarSource = "https://robohash.org/";
+
+		this.messageCharCount = 0;
+		this.maxMessageLength = 500;
+
+
+		this.tagChatToggle = document.querySelector("#chat-toggle");
+
+		this.tagUserInfoDisplay = document.querySelector("#user-info-display");
+		this.tagUserInfoChanger = document.querySelector("#user-info-change");
+
+		this.tagUsernameDisplay = document.querySelector("#username-display");
+		this.imgUsernameAvatar = document.querySelector("#username-avatar");
+
+		this.tagMessageAuthor = document.querySelector("#self-message-author");
+
+		this.tagMessageFormWarning = document.querySelector("#message-form-warning");
+		
+		this.tagAppContainer = document.querySelector("#app-container");
+
+		this.inputChangeUserName = document.querySelector("#username-change-input"); 
+		this.btnUpdateUserName = document.querySelector("#button-update-username"); 
+		this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change"); 
+
+		this.formMessageInput = document.querySelector("#inputBody");
+
+	}
+	init() {
+		this.tagChatToggle.addEventListener("click", this.handleChatToggle);
+		this.tagUsernameDisplay.addEventListener("click", this.handleShowChangeNameForm);
+		
+		this.btnUpdateUserName.addEventListener("click", this.handleUpdateUsername);
+		this.btnCancelUpdateUsername.addEventListener("click", this.handleHideChangeNameForm);
+		
+		this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown);
+		this.formMessageInput.addEventListener("keyup", this.handleMessageInputKeydown);
+	}
+
+	handleChatToggle = () => {
+		if (this.chatDisplayed) {
+			this.tagAppContainer.className = "flex no-chat";
+			this.chatDisplayed = false;
+		} else {
+			this.tagAppContainer.className = "flex";
+			this.chatDisplayed = true;
+		}
+	}
+	handleShowChangeNameForm = () => {
+		this.tagUserInfoDisplay.style.display = "none";
+		this.tagUserInfoChanger.style.display = "flex";
+	}
+	handleHideChangeNameForm = () => {
+		this.tagUserInfoDisplay.style.display = "flex";
+		this.tagUserInfoChanger.style.display = "none";
+	}
+	handleUpdateUsername = () => {
+		var newValue = this.inputChangeUserName.value;
+		newValue = newValue.trim();
+		// do other string cleanup?
+
+		if (newValue) {
+			this.userName = newValue;
+			this.inputChangeUserName.value = newValue;
+			this.tagMessageAuthor.innerText = newValue;
+			this.tagUsernameDisplay.innerText = newValue;
+			this.imgUsernameAvatar.src = this.avatarSource + newValue;
+		}
+		this.handleHideChangeNameForm();
+	}
+
+	handleUsernameKeydown = event => {
+		if (event.keyCode === 13) { // enter
+			this.handleUpdateUsername();
+		} else if (event.keyCode === 27) { // esc
+			this.handleHideChangeNameForm();
+		}
+	}
+	handleMessageInputKeydown = event => {
+		console.log("keydown text", event.keyCode + ", " + this.formMessageInput.value + " , ", this.formMessageInput.value.length)
+		// if event.isComposing || 
+		if (event.keyCode === 13) { // enter
+			if (!this.prepNewLine) {
+				// submit
+				return;
+			}
+			this.prepNewLine = false;
+		} else {
+			this.prepNewLine = false;
+		}
+		if (event.keyCode === 16 || event.keyCode === 17) { // ctrl, shift
+			this.prepNewLine = true;
+		}
+
+		// var numChars = this.value.
+	}
+
+
+
 }
\ No newline at end of file
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 646e15ff3..70e5e80b5 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -34,15 +34,91 @@ header {
   left: 0;
   background-color: var(--header-bg-color);
   z-index: 10;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 header h1 {
   font-size: 1.25em;
-  font-weight: bold;
+  font-weight: 100;
+  letter-spacing: 1.2;
+  text-transform: uppercase;
   color: #ddd;
   padding: .5em;
+  white-space: nowrap;
 }
 
+#chat-toggle {
+  margin-right: 2em;
+  cursor: pointer;
+  background-color: #000;
+  border: 1px solid green;
+  display: inline-block;
+  padding: .25em;
+  height: 2em;
+  width: 2em;
+  text-align: center;
+}
+
+/* ************************************************8 */
+
+#user-options-container {
+  padding: .5em 1em;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+#user-info-display {
+  display: none;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+#username-avatar {
+  height: 1.75em;
+  width: 1.75em;
+  margin-right: .5em;
+  border: 1px solid rgba(255,255,255,.25)
+}
+#username-display {
+  font-weight: bold;
+  font-size: .75em;
+  color: #516FEB
+
+}
+#user-info-display:hover {
+  transition: opacity .2s;
+  opacity: .75;
+}
+
+
+#user-info-change {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+#username-change-input {
+  font-size: .75em;
+}
+#button-update-username {
+  font-size: .65em;
+  text-transform: uppercase;
+  height: 2.5em;
+}
+#button-cancel-change {
+  color: rgba(255,255,255,.5);
+  cursor: pointer;
+  height: 2.5em;
+  font-size: .65em;
+}
+.user-btn {
+  margin: 0 .25em;
+}
+
+/* ************************************************8 */
 
 #main-content-container {
   width: 100%;
@@ -61,6 +137,8 @@ header h1 {
   width: calc(100vw - var(--right-col-width));
 }
 
+/* ************************************************8 */
+
 #video-container {
   width: 100%;
   height: auto;
@@ -74,6 +152,18 @@ header h1 {
   display: block;
 }
 
+#stream-info {
+  padding: .5em;
+  text-align: center;
+  font-family: monospace;
+  font-size: .75em;
+  background-color: rgba(0,0,0,.5);
+  border-bottom: 1px solid black;
+}
+
+/* ************************************************8 */
+
+
 #chat-container {
   position: fixed;
   z-index: 9;
@@ -87,22 +177,34 @@ header h1 {
   flex-direction: column;
   justify-content: flex-end;
 }
+
 #messages-container {
   overflow: auto;
   padding: 1em 0;
 }
-#chat-input-container {
+#message-input-container {
   width: 100%;
   border-top: 1px solid #eee;
   padding: 1em;
   background-color: #334;
 }
 
-#chat-form {
+#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-warning {
+  font-size: .75em;
+}
+
+/* ************************************************8 */
 
 .message {
   padding: .85em;
@@ -112,12 +214,17 @@ header h1 {
   height: 2.5em;
   width: 2.5em;
   margin-right: .75em;
-  /* background-color: rgba(236, 236, 236, .5); */
   background-color: rgba(0,0,0, .75);
 }
 .message-content {
   font-size: .85em;
 }
+.message-content a {
+  color: #6699cc;
+}
+.message-content a:hover {
+  text-decoration: underline;
+}
 .message-author {
   font-weight: 600;
 }
@@ -125,6 +232,7 @@ header h1 {
   color: #ccc;
   font-weight: 100;
 }
+/* ************************************************8 */
 
 
 .no-chat .left-col {
diff --git a/webroot/vendor/autolink.js b/webroot/vendor/autolink.js
index 796b001f7..66ba0e8ec 100644
--- a/webroot/vendor/autolink.js
+++ b/webroot/vendor/autolink.js
@@ -113,7 +113,7 @@ AutoLink.prototype = {
     var text = this.options.removeHTTP ? removeHTTP(match) : match
     return (
       p1 +
-      '<a href="' +
+      '<a target="_blank" href="' +
       match +
       '"' +
       this.attrs +
