diff --git a/css/glowingbear.css b/css/glowingbear.css
index 26fd773..54c312b 100644
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@@ -1,7 +1,10 @@
 body {
-    font-family: monospace;
     background-color: black;
     color: white;
+    padding: 5px;
+}
+.bufferlines {
+    font-family: sans-serif;
 }
 
 .color-light-green {
@@ -58,4 +61,4 @@ body {
 
 li.notification {
     color: green;
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index b62397a..486050e 100644
--- a/index.html
+++ b/index.html
@@ -53,10 +53,15 @@
       </div>
       <div ng-show="connected">
 
-        <span class="label" ng-class="{'label-success': content.notification }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
-          <a ng-click="setActiveBuffer(key)">{{ content.full_name }}</a>
-        </span>
-        <div ng-repeat="bufferline in activeBuffer.lines">
+        <ul class="nav nav-pills">
+          <li class="label" ng-class="{'label-success': content.notification }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
+            <a ng-click="setActiveBuffer(content.id)">{{ content.full_name }}</a>
+          </li>
+        </ul>
+        <div class="bufferlines" ng-repeat="bufferline in activeBuffer.lines">
+          <span class="date muted">
+            {{ bufferline.date }}
+          </span>
 
           <span ng-repeat="part in bufferline.message" class="text" style="{{ part.fg }}">
             {{ part.text }}
@@ -77,10 +82,16 @@
 
 
         </div>
-              <form ng-submit="sendMessage()">
-              <input type="text" ng-model="command"></input>
-              <input type="submit" class="btn btn-primary"></button>
-              </form>
+        <div class="navbar navbar-inverse navbar-fixed-bottom">
+            <form class="form form-horizontal" ng-submit="sendMessage()">
+              <div class="input-group">
+                <input type="text" class="form-control" ng-model="command"></input>
+                <span class="input-group-btn">
+                  <button class="btn btn-default btn-primary">Send</button>
+                </span>
+              </div>
+            </form>
+        </div>
       </div>
     </div>
   </body>
diff --git a/js/websockets.js b/js/websockets.js
index 29a12b1..c7b3482 100644
--- a/js/websockets.js
+++ b/js/websockets.js
@@ -1,3 +1,7 @@
+Number.prototype.pad = function (len) {
+  return (new Array(len+1).join("0") + this).slice(-len);
+}
+
 var weechat = angular.module('weechat', ['localStorage']);
 weechat.filter('toArray', function () {
     'use strict';
@@ -270,6 +274,9 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
 
     var handleBufferLineAdded = function(message) {
         var buffer_line = {}
+        var date = message['objects'][0]['content'][0]['date'];
+        date = new Date(parseInt(date, 10) * 1000);
+        var datestring = date.getHours().pad(2) + ':' + date.getMinutes().pad(2);
         var prefix = colors.parse(message['objects'][0]['content'][0]['prefix']);
         var text = colors.parse(message['objects'][0]['content'][0]['message']);
         var buffer = message['objects'][0]['content'][0]['buffer'];
@@ -300,6 +307,8 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
 
             $rootScope.buffers[buffer]['lines'].push(buffer_line);
 
+            buffer_line['date'] = datestring;
+
 
             if(highlight || _.contains(tags_array, 'notify_private')) {
                 $rootScope.createHighlight(prefix, text, message, buffer, additionalContent);