diff --git a/css/glowingbear.css b/css/glowingbear.css
index c2de348..a068f2f 100644
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@@ -1,7 +1,10 @@
 body {
     color: white;
     background-color: #222;
-    padding: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-bottom:70px;
+    padding-top: 70px;
 }
 .bufferlines {
     font-family: monospace;
diff --git a/index.html b/index.html
index f0b3e27..4dabe2c 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,8 @@
       <title ng-bind-template="WeeChat {{ pageTitle}}"></title>
 
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
-    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" rel="stylesheet" media="screen">
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
     <link rel="shortcut icon" type="image/png" href="img/favicon.png" >
     <link href="css/glowingbear.css" rel="stylesheet" media="screen">
     <script type="text/javascript" src="js/angular.min.js"></script>
@@ -20,14 +21,14 @@
     <div ng-controller="WeechatCtrl">
       <div ng-hide="connected" class="container">
         <h2>
-            <img src="img/favicon.png">
-            glowing bear
-            <small>
-                WeeChat web frontend 
-            </small>
+          <img src="img/favicon.png">
+          glowing bear
+          <small>
+            WeeChat web frontend 
+          </small>
         </h2>
         <div>To start using, please enable relay in your WeeChat client:
-            <pre>
+          <pre>
             /set relay.network.password yourpassword
             /relay add weechat 9001</pre>
         Note: The communication goes directly between your browser and your weechat in clear text.
@@ -35,36 +36,45 @@
         </div>
         <h3>Connection settings</h3>
         <form role="form">
-            <div class="alert alert-danger" ng-show="errorMessage">
-                <strong>Oh no!</strong> We cannot connect!
-            </div>
-            <div class="form-group">
-                <label class="control-label" for="hostport">Hostname and port</label>
-                <input type="text" class="form-control" id="hostport" ng-model="hostport" placeholder="Hostport">
-                <p class="help-block">Enter the hostname and the port to the WeeChat relay, separated by a :</p>
-            </div>
-            <div class="form-group">
-                <label class="control-label" for="password">WeeChat relay password</label>
-                <input type="password"class="form-control"  id="password" ng-model="password" placeholder="Password">
-                <p class="help-block">Password will be stored in your browser session</p>
-            </div>
-            <div class="form-group">
-                <label class="control-label" for="proto">Proto</label>
-                <input type="text" class="form-control" id="proto" ng-model="proto" placeholder="proto">
-                <p class="help-block">Default is fine.</p>
-            </div>
-            <button class="btn btn-lg btn-primary" ng-click="connect()">Connect!</button>
+          <div class="alert alert-danger" ng-show="errorMessage">
+            <strong>Oh no!</strong> We cannot connect!
+          </div>
+          <div class="form-group">
+            <label class="control-label" for="hostport">Hostname and port</label>
+            <input type="text" class="form-control" id="hostport" ng-model="hostport" placeholder="Hostport">
+            <p class="help-block">Enter the hostname and the port to the WeeChat relay, separated by a :</p>
+          </div>
+          <div class="form-group">
+            <label class="control-label" for="password">WeeChat relay password</label>
+            <input type="password"class="form-control"  id="password" ng-model="password" placeholder="Password">
+            <p class="help-block">Password will be stored in your browser session</p>
+          </div>
+          <div class="form-group">
+            <label class="control-label" for="proto">Proto</label>
+            <input type="text" class="form-control" id="proto" ng-model="proto" placeholder="proto">
+            <p class="help-block">Default is fine.</p>
+          </div>
+          <button class="btn btn-lg btn-primary" ng-click="connect()">Connect!</button>
         </form>
       </div>
       <div ng-show="connected">
-
-        <div class="navbar navbar-inverse navbar-fixed-top">
-          <ul class="nav nav-pills">
-            <li class="label" ng-class="{'active': content.notification }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
-            <a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }}</a>
-            </li>
-          </ul>
-        </div>
+        <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
+          <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+          </div>
+          <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav ">
+              <li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
+              <a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }} <span class="badge" ng-bind="content.unread"></span></a>
+              </li>
+            </ul>
+          </div>
+        </nav>
         <div class="bufferlines">
           <div class="bufferline" ng-repeat="bufferline in activeBuffer.lines">
             <span class="date text-muted">
diff --git a/js/websockets.js b/js/websockets.js
index fc79f93..c7c27c0 100644
--- a/js/websockets.js
+++ b/js/websockets.js
@@ -290,7 +290,11 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
 
 
             if (!_isActiveBuffer(buffer) && !initial) {
-                $rootScope.buffers[buffer]['notification'] = true;
+                
+                if ($rootScope.buffers[buffer]['unread'] == '') {
+                  $rootScope.buffers[buffer]['unread'] == 0;
+                }
+                $rootScope.buffers[buffer]['unread'] += 1;
             }
 
             if (text[0] != undefined) {
@@ -365,10 +369,12 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
             var pointer = bufferInfo['pointers'][0];
             bufferInfo['id'] = pointer;
             bufferInfo['lines'] = [];
+            bufferInfo['unread'] = '';
             buffers[pointer] = bufferInfo
             if (i == 0) {
                 // first buffer is active buffer by default
                 $rootScope.activeBuffer = buffers[pointer];
+                $rootScope.activeBuffer['active'] = true;
             }
         }
         $rootScope.buffers = buffers;
@@ -412,7 +418,7 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
         _buffer_closing: handleBufferClosing, 
         _buffer_line_added: handleBufferLineAdded,
         _buffer_opened: handleBufferOpened,
-        _buffer_title_changed: handleBufferTitleChanged,
+        _buffer_title_changed: handleBufferTitleChanged
     }
 
     return {
@@ -536,8 +542,9 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', 'connection
     }
 
     $scope.setActiveBuffer = function(key) {
-        $rootScope.activeBuffer['notification'] = false;
-        $rootScope.buffers[key]['notification'] = true;
+        $rootScope.activeBuffer['active'] = false;
+        $rootScope.buffers[key]['active'] = true;
+        $rootScope.buffers[key]['unread'] = '';
         $rootScope.activeBuffer = $rootScope.buffers[key];
         $rootScope.pageTitle = $rootScope.activeBuffer['short_name'] + ' | ' + $rootScope.activeBuffer['title'];
     };