diff --git a/web/chatview.css b/web/chatview.css
index ce14d19..1dce00f 100644
--- a/web/chatview.css
+++ b/web/chatview.css
@@ -25,30 +25,31 @@
 
 #sendMessage {
   display: flex;
-  width: 97%;
   position: relative;
-  transform: translateZ(0);
-  height: 50px;
   border-top : 2px solid #d3d3d3;
-  padding-right: 10px;
-  margin-left: 1%;
-  margin-right: 1.5%;
+  margin-left: 10px;
+  margin-right: 10px;
+  padding-left: 8px;
+  overflow: hidden;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  align-items: center;
+
 }
 
 #message {
-  width: 100%;
-  border: 0;
-  height: 55px;
-  overflow: hidden;
-  padding-right: 20px;
-  color: black;
-  padding-left: 8px;
   flex: 1;
+  margin-right: 10px;
+  border: 0;
+  overflow-y: scroll;
+  color: black;
+  max-height: 150px;
+  padding-left: 8px;
+  resize: none;
 }
 
 #message:focus,
 #message.focus {
-  border: 0;
   outline: none;
 }
 
@@ -61,7 +62,7 @@
   border: 0;
   width: 40px;
   height: 40px;
-  margin-top: 8px;
+  align-self: center;
   transition: all 0.3s ease;
 }
 
@@ -194,6 +195,17 @@
     overflow: hidden;
 }
 
+pre {
+  font : inherit;
+  font-family : inherit;
+  font-size : inherit;
+  font-style : inherit;
+  font-variant : inherit;
+  font-weight : inherit;
+  margin: 0;
+  padding: 0;
+}
+
 .message_out {
     flex-direction: row-reverse;
 }
diff --git a/web/chatview.html b/web/chatview.html
index 732dafd..b66764a 100644
--- a/web/chatview.html
+++ b/web/chatview.html
@@ -10,8 +10,7 @@
       <div id="messages"></div>
 
       <div id="sendMessage">
-        <input id="message" type="text" autofocus placeholder="Message" onkeyup="auto_grow(this)"
-        onkeydown="if (event.keyCode == 13) { ring.chatview.sendMessage(); return false; }">
+        <textarea id="message" autofocus placeholder="Message" onkeyup="grow_text_area()" rows="1" ></textarea>
         <div id="sendBtn" onclick="ring.chatview.sendMessage()" title="Send">
           <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
               <path xmlns="http://www.w3.org/2000/svg" d="M12,11.874v4.357l7-6.69l-7-6.572v3.983c-8.775,0-11,9.732-11,9.732C3.484,12.296,7.237,11.874,12,11.874z"/>
@@ -30,6 +29,35 @@
 -->
 
 <script>
+
+document.querySelector("#message").addEventListener("keydown", function (e) {
+    e = e || event;
+    var map = {};
+    map[e.keyCode] = e.type == 'keydown';
+    if (e.ctrlKey || e.shiftKey) {
+      return true;
+    }
+    if (map[13]) {
+      ring.chatview.sendMessage();
+      e.preventDefault();
+    }
+    return true;
+});
+
+function grow_text_area() {
+    var messages = document.querySelector('#messages');
+    var is_at_bottom = messages.scrollTop === (messages.scrollHeight - messages.offsetHeight);
+
+    var area = document.querySelector("#message");
+    var old_height = area.style.height;
+    area.style.height = "auto";
+    area.style.height = area.scrollHeight +"px";
+
+    if (is_at_bottom) {
+      messages.scrollTop = messages.scrollHeight;
+    }
+}
+
 var ring = {}; // ring namespace
 
 ring.chatview = (function(){
@@ -45,7 +73,7 @@
        var input = document.querySelector("#sendMessage #message");
        var message = input.value;
        if (message.length > 0) {
-         input.value = "";
+         input.value = '';
          window.prompt(message);
        }
      }
@@ -78,7 +106,7 @@
         var escaped_message = escapeHtml(message_text),
             linkified_message = linkifyHtml(escaped_message, {});
 
-        return linkified_message;
+        return "<pre>" + linkified_message + "</pre>";
     }
 
     /**