diff --git a/bower.json b/bower.json
index 60040c9ee..fef2e7adb 100644
--- a/bower.json
+++ b/bower.json
@@ -39,6 +39,7 @@
     "diff-dom": "#gh-pages",
     "alertifyjs": "^1.0.11",
     "spin.js": "^2.3.2",
-    "scrypt-async": "^1.2.0"
+    "scrypt-async": "^1.2.0",
+    "components-font-awesome": "^4.6.3"
   }
 }
diff --git a/customize.dist/BottomBar.html b/customize.dist/BottomBar.html
index 70eb8ee86..827cef5cd 100644
--- a/customize.dist/BottomBar.html
+++ b/customize.dist/BottomBar.html
@@ -2,15 +2,15 @@
 <div>
   <div class="bottom-bar">
     <div class="bottom-bar-left">
-      <p data-localization="bottom_love">
-      </p>
       <span class="bottom-bar-language">
         <select id="language-selector">
           <option value="en">English</option>
           <option value="fr">Français</option>
         </select>
       </span>
-    </div>
+      <p data-localization="bottom_france">
+      </p>
+   </div>
     <!--
     <div class="bottom-bar-center">
       <p><a href="https://github.com/xwiki-labs/cryptpad">Fork me on GitHub</a></p>
diff --git a/customize.dist/DecorateToolbar.js b/customize.dist/DecorateToolbar.js
index bee23e500..ca66c601f 100644
--- a/customize.dist/DecorateToolbar.js
+++ b/customize.dist/DecorateToolbar.js
@@ -8,11 +8,18 @@ define([
 ], function (LS, Messages) {
     var $ = window.jQuery;
     var main = function () {
+        var url = window.location.pathname;
+        var isHtml = /\.html/.test(url) || url === '/';
         $.ajax({
-            url: '/customize/BottomBar.html',
+            url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
             success: function (ret) {
                 $('iframe').height('96%');
-                $('body').append(ret);
+                if (isHtml) {
+                    $('body').append(ret);
+                }
+                else {
+                    $('body').prepend(ret);
+                }
                 $('head').append($('<link>', {
                     rel: 'stylesheet',
                     href: '/customize/main.css'
diff --git a/customize.dist/Header.html b/customize.dist/Header.html
new file mode 100644
index 000000000..3ffeaa347
--- /dev/null
+++ b/customize.dist/Header.html
@@ -0,0 +1,23 @@
+<!-- This is an HTML fragment which is included into the bottom toolbar -->
+<div>
+  <div class="top-bar">
+    <div class="bottom-bar-left">
+      <span class="bottom-bar-language">
+        <select id="language-selector">
+          <option value="en">English</option>
+          <option value="fr">Français</option>
+        </select>
+      </span>
+      <p data-localization="bottom_france">
+      </p>
+    </div>
+    <!--
+    <div class="bottom-bar-center">
+      <p><a href="https://github.com/xwiki-labs/cryptpad">Fork me on GitHub</a></p>
+    </div> -->
+    <div class="bottom-bar-right">
+      <p data-localization="bottom_support">
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/customize.dist/main.css b/customize.dist/main.css
index dd14889f0..38edb7a59 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -209,10 +209,9 @@ tbody td:last-child {
   border-right: none;
 }
 /* Bottom Bar */
+.top-bar,
 .bottom-bar {
   position: fixed;
-  bottom: 0px;
-  right: 0px;
   height: 4%;
   height: 2.5em;
   display: inline-block;
@@ -220,23 +219,35 @@ tbody td:last-child {
   background: #302B28;
   border-top: 1px solid #444;
 }
+.top-bar a,
 .bottom-bar a {
   color: #46E981;
   text-decoration: none;
 }
+.top-bar p,
 .bottom-bar p {
   margin: -1px;
   font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   font-size: 20px;
   display: block;
-  float: left;
+  float: right;
+  margin-left: 10px;
   padding-top: 3px;
   color: #fafafa;
 }
+.top-bar img,
 .bottom-bar img {
   margin-right: 4px;
   position: relative;
 }
+.bottom-bar {
+  bottom: 0px;
+  right: 0px;
+}
+.top-bar {
+  top: 0px;
+  right: 0px;
+}
 .bottom-bar-left {
   display: block;
   float: left;
diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less
index 59eee286a..9c9a3ae22 100644
--- a/customize.dist/src/cryptpad.less
+++ b/customize.dist/src/cryptpad.less
@@ -187,7 +187,6 @@ p, pre, td, a, table, tr {
     margin-bottom: 2 * 6px;
     white-space: nowrap;
 }
-
 /* Tables */
 
 table {
@@ -248,10 +247,8 @@ tbody {
 
 /* Bottom Bar */
 
-.bottom-bar {
+.top-bar, .bottom-bar {
     position:fixed;
-    bottom:0px;
-    right:0px;
     height:4%;
     height: 2.5em;
 
@@ -270,7 +267,8 @@ tbody {
 
         font-size: 20px;
         display:block;
-        float:left;
+        float:right;
+        margin-left: 10px;
         padding-top:3px;
         color: @fore;
     }
@@ -279,6 +277,14 @@ tbody {
         position: relative;
     }
 }
+.bottom-bar {
+    bottom: 0px;
+    right: 0px;
+}
+.top-bar {
+    top: 0px;
+    right: 0px;
+}
 
 .bottom-bar-left {
     display:block;
diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less
index 7534c4870..7a7b437b3 100644
--- a/customize.dist/src/toolbar.less
+++ b/customize.dist/src/toolbar.less
@@ -30,7 +30,7 @@
         padding: 0 10px;
         height: 1.5em;
         line-height: 25px;
-        height: 22px;
+        height: 100%;
         &.cryptpad-back {
             padding: 0;
             font-weight: bold;
@@ -42,11 +42,16 @@
     button {
         height: 100%;
         background-color: inherit;
+        background-image: linear-gradient(to bottom,#fff,#e4e4e4);
         border: 1px solid #A6A6A6;
-        border-radius: 5px;
+        border-bottom-color: #979797;
+        border-radius: 3px;
         margin-right: 5px;
         padding-right: 5px;
         padding-left: 5px;
+        &:hover {
+            background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
+        }
     }
     .rightside-button {
         float: right;
@@ -91,4 +96,23 @@
 .cryptpad-toolbar-username {
     font-style: italic;
 }
+.lag {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 !important;
+    margin: 0 !important;
+    height: 15px !important;
+    width: 15px !important;
+    border-radius: 50%;
+    border: 1px solid @cp-outline;
+}
+.lag-green {
+    background-color: @cp-green;
+}
+.lag-red {
+    background-color: @cp-red;
+}
+.lag-orange {
+    background-color: @cp-orange;
+}
 
diff --git a/customize.dist/src/variables.less b/customize.dist/src/variables.less
index 9b59651ad..14e6de373 100644
--- a/customize.dist/src/variables.less
+++ b/customize.dist/src/variables.less
@@ -8,6 +8,7 @@
 @cp-red: #FF0073; // remove red
 @cp-outline: #444;
 
+@cp-orange: #FE9A2E;
 // alertify things
 
 @box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index 7e8fdc8b1..82eebb356 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -29,7 +29,7 @@
   padding: 0 10px;
   height: 1.5em;
   line-height: 25px;
-  height: 22px;
+  height: 100%;
 }
 .cryptpad-toolbar div.cryptpad-back {
   padding: 0;
@@ -40,12 +40,17 @@
 .cryptpad-toolbar button {
   height: 100%;
   background-color: inherit;
+  background-image: linear-gradient(to bottom, #fff, #e4e4e4);
   border: 1px solid #A6A6A6;
-  border-radius: 5px;
+  border-bottom-color: #979797;
+  border-radius: 3px;
   margin-right: 5px;
   padding-right: 5px;
   padding-left: 5px;
 }
+.cryptpad-toolbar button:hover {
+  background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
+}
 .cryptpad-toolbar .rightside-button {
   float: right;
   cursor: pointer;
@@ -83,3 +88,22 @@
 .cryptpad-toolbar-username {
   font-style: italic;
 }
+.lag {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 !important;
+  margin: 0 !important;
+  height: 15px !important;
+  width: 15px !important;
+  border-radius: 50%;
+  border: 1px solid #444;
+}
+.lag-green {
+  background-color: #46E981;
+}
+.lag-red {
+  background-color: #FF0073;
+}
+.lag-orange {
+  background-color: #FE9A2E;
+}
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 6f5fc6c8d..dd2fb372a 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -31,6 +31,7 @@ define(function () {
     out.peopleAreEditing = '{0} personnes éditent le document';
     out.oneViewer = '1 lecteur';
     out.viewers = '{0} lecteurs';
+    out.anonymous = "Vous êtes actuellement anonyme";
 
     out.importButton = 'IMPORTER';
     out.importButtonTitle = 'Importer un document depuis un fichier local';
@@ -179,7 +180,7 @@ define(function () {
 
     // BottomBar.html
 
-    out.bottom_love = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer">Fait avec <img class="bottom-bar-heart" src="/customize/heart.png" /> en <img class="bottom-bar-fr" src="/customize/fr.png" /></a>';
+    out.bottom_france = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer">Fait avec <img class="bottom-bar-heart" src="/customize/heart.png" /> en <img class="bottom-bar-fr" src="/customize/fr.png" /></a>';
     out.bottom_support = '<a href="http://labs.xwiki.com/" title="XWiki Labs" target="_blank" rel="noopener noreferrer">Un projet <img src="/customize/logo-xwiki2.png" alt="XWiki SAS" class="bottom-bar-xwiki"/> Labs</a> avec le soutien de <a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
 
     return out;
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index f13409b72..eea13040f 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -31,6 +31,7 @@ define(function () {
     out.peopleAreEditing = '{0} people are editing';
     out.oneViewer = '1 viewer';
     out.viewers = '{0} viewers';
+    out.anonymous = "You are currently anonymous";
 
     out.importButton = 'IMPORT';
     out.importButtonTitle = 'Import a document from a local file';
@@ -179,7 +180,7 @@ define(function () {
 
     // BottomBar.html
 
-    out.bottom_love = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">Made with <img class="bottom-bar-heart" src="/customize/heart.png" /> in <img class="bottom-bar-fr" src="/customize/fr.png" /></a>';
+    out.bottom_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">Made with <img class="bottom-bar-heart" src="/customize/heart.png" /> in <img class="bottom-bar-fr" src="/customize/fr.png" /></a>';
     out.bottom_support = '<a href="http://labs.xwiki.com/" title="XWiki Labs" target="_blank" rel="noopener noreferrer">An <img src="/customize/logo-xwiki2.png" alt="XWiki SAS" class="bottom-bar-xwiki"/> Labs Project </a> with the support of <a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
 
     return out;
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 8aa391496..be31e9f5e 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -607,6 +607,69 @@ define([
         };
     };
 
+    /*
+     * Buttons
+     */
+    var createButton = common.createButton = function (type, rightside) {
+        var button;
+        var size = "17px";
+        switch (type) {
+            case 'export':
+                button = $('<button>', {
+                    title: Messages.exportButtonTitle,
+                    'class': "fa fa-download",
+                    style: 'font:'+size+' FontAwesome'
+                });
+                break;
+            case 'import':
+                button = $('<button>', {
+                    title: Messages.importButtonTitle,
+                    'class': "fa fa-upload",
+                    style: 'font:'+size+' FontAwesome'
+                });
+                break;
+            case 'rename':
+                button = $('<button>', {
+                    id: 'name-pad',
+                    title: Messages.renameButtonTitle,
+                    'class': "fa fa-bookmark cryptpad-rename",
+                    style: 'font:'+size+' FontAwesome'
+                });
+                break;
+            case 'forget':
+                button = $('<button>', {
+                    id: 'cryptpad-forget',
+                    title: Messages.forgetButtonTitle,
+                    'class': "fa fa-trash cryptpad-forget",
+                    style: 'font:'+size+' FontAwesome'
+                });
+                break;
+            case 'username':
+                button = $('<button>', {
+                    title: Messages.changeNameButton,
+                    'class': "fa fa-user",
+                    style: 'font:'+size+' FontAwesome'
+                });
+                break;
+            case 'readonly':
+                button = $('<button>', {
+                    title: Messages.getViewButtonTitle,
+                    'class': "fa fa-eye",
+                    style: 'font:'+size+' FontAwesome'
+                });
+                break;
+            default:
+                button = $('<button>', {
+                    'class': "fa fa-question",
+                    style: 'font:'+size+' FontAwesome'
+                });
+        }
+        if (rightside) {
+            button.addClass('rightside-button')
+        }
+        return button;
+    };
+
     /*
      *  Alertifyjs
      */
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index 089195950..9187fb9ad 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -43,6 +43,8 @@ define([
 
     var $style;
 
+    var firstConnection = true;
+
     var styleToolbar = function ($container, href) {
         href = href || '/customize/toolbar.css';
 
@@ -181,8 +183,12 @@ define([
             }
         }
         innerHTML += getViewers(numberOfViewUsers);
-        if (userData[myUserName] && userData[myUserName].name) {
-            innerHTML = '<span class="' + USERNAME_CLS + '">' + userData[myUserName].name + '</span> | ' + innerHTML;
+        if (userData[myUserName]) {
+            var name = userData[myUserName].name;
+            if (!name) {
+                name = '<span title="' + Messages.anonymous + '" class="fa fa-user-secret" style="font-family:FontAwesome"></span>';
+            }
+            innerHTML = '<span class="' + USERNAME_CLS + '">' + name + '</span> | ' + innerHTML;
         }
         listElement.innerHTML = innerHTML;
     };
@@ -197,21 +203,31 @@ define([
     };
 
     var checkLag = function (getLag, lagElement) {
-        if(typeof getLag !== "function") { return; }
-        var lag = getLag();
-        var lagMsg = Messages.lag + ' ';
+        var lag;
+        if(typeof getLag === "function") {
+            lag = getLag();
+        }
+        var lagLight = $('<div>', {
+            'class': 'lag'
+        });
         if(lag) {
-          var lagSec = lag/1000;
-          if (lag.waiting && lagSec > 1) {
-              lagMsg += "?? " + Math.floor(lagSec);
+          firstConnection = false;
+          var title = Messages.lag + ' : ' + lag + ' ms\n';
+          if (lag.waiting || lag > 1000) {
+            lagLight.addClass('lag-orange');
+            title += 'Your connection to the server is slow, it may impact the performance of the collaborative editor.';
           } else {
-              lagMsg += lagSec;
+            lagLight.addClass('lag-green');
+            title += "Everything is working fine";
           }
         }
-        else {
-          lagMsg += "??";
+        else if (!firstConnection){
+          lagLight.addClass('lag-red');
+          title = "You are disconnected from the server!";
         }
-        lagElement.textContent = lagMsg;
+        lagLight.attr('title', title);
+        $(lagElement).html('');
+        $(lagElement).append(lagLight);
     };
 
     var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) {
@@ -256,6 +272,7 @@ define([
         // Try to filter out non-patch messages, doesn't have to be perfect this is just the spinner
         realtime.onMessage(function (msg) { if (msg.indexOf(':[2,') > -1) { ks(); } });
 
+        checkLag(getLag, lagElement);
         setInterval(function () {
             if (!connected) { return; }
             checkLag(getLag, lagElement);
@@ -265,13 +282,13 @@ define([
             failed: function () {
                 connected = false;
                 userListElement.textContent = Messages.disconnected;
-                lagElement.textContent = '';
+                checkLag(undefined, lagElement);
             },
             reconnecting: function (userId) {
                 myUserName = userId;
                 connected = false;
                 userListElement.textContent = Messages.reconnecting;
-                lagElement.textContent = '';
+                checkLag(getLag, lagElement);
             },
             connected: function () {
                 connected = true;
diff --git a/www/pad/index.html b/www/pad/index.html
index e577b3ee0..825439cb4 100644
--- a/www/pad/index.html
+++ b/www/pad/index.html
@@ -20,7 +20,7 @@
         }
         #pad-iframe {
             position:fixed;
-            top:0px;
+            top:2.5em;
             left:0px;
             bottom:0px;
             right:0px;
diff --git a/www/pad/inner.html b/www/pad/inner.html
index bf79dcd0d..3db7dd246 100644
--- a/www/pad/inner.html
+++ b/www/pad/inner.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
     <script src="/bower_components/ckeditor/ckeditor.js"></script>
 </head>
diff --git a/www/pad/main.js b/www/pad/main.js
index b9ebd657a..758bd1fbf 100644
--- a/www/pad/main.js
+++ b/www/pad/main.js
@@ -297,13 +297,6 @@ define([
             var createChangeName = function(id, $container) {
                 var buttonElmt = $container.find('#'+id)[0];
                 //var lastName = getLastName();
-                getLastName(function (err, lastName) {
-                    buttonElmt.addEventListener("click", function() {
-                        Cryptpad.prompt(Messages.changeNamePrompt, lastName, function (newName) {
-                            setName(newName);
-                        });
-                    });
-                });
             };
 
             var DD = new DiffDom(diffOptions);
@@ -511,12 +504,12 @@ define([
                 toolbarList = info.userList;
                 var config = {
                     userData: userList,
-                    changeNameID: Toolbar.constants.changeName,
+                    //changeNameID: Toolbar.constantdds.changeName,
                     readOnly: readOnly
                 };
                 if (readOnly) {delete config.changeNameID; }
                 toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
-                if (!readOnly) { createChangeName(Toolbar.constants.changeName, $bar); }
+                //if (!readOnly) { createChangeName(Toolbar.constants.changeName, $bar); }
 
                 var $rightside = $bar.find('.' + Toolbar.constants.rightside);
 
@@ -527,22 +520,23 @@ define([
                     editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
                 }
 
+                getLastName(function (err, lastName) {
+                    var $username = Cryptpad.createButton('username', true)
+                        .click(function() {
+                        Cryptpad.prompt(Messages.changeNamePrompt, lastName, function (newName) {
+                            setName(newName);
+                        });
+                    });
+                    $rightside.append($username);
+                });
+
                 /* add an export button */
-                var $export = $('<button>', {
-                    title: Messages.exportButtonTitle,
-                })
-                    .text(Messages.exportButton)
-                    .addClass('rightside-button')
-                    .click(exportFile);
+                var $export = Cryptpad.createButton('export', true).click(exportFile);
                 $rightside.append($export);
 
                 if (!readOnly) {
                     /* add an import button */
-                    var $import = $('<button>', {
-                        title: Messages.importButtonTitle
-                    })
-                        .text(Messages.importButton)
-                        .addClass('rightside-button')
+                    var $import = Cryptpad.createButton('import', true)
                         .click(Cryptpad.importContent('text/plain', function (content) {
                             var shjson = stringify(Hyperjson.fromDOM(domFromHTML(content).body));
                             applyHjson(shjson);
@@ -552,12 +546,7 @@ define([
                 }
 
                 /* add a rename button */
-                var $rename = $('<button>', {
-                        id: 'name-pad',
-                        title: Messages.renameButtonTitle,
-                    })
-                    .addClass('cryptpad-rename rightside-button')
-                    .text(Messages.renameButton)
+                var $rename = Cryptpad.createButton('rename', true)
                     .click(function () {
                         var suggestion = suggestName();
 
@@ -584,12 +573,7 @@ define([
                 $rightside.append($rename);
 
                 /* add a forget button */
-                var $forgetPad = $('<button>', {
-                        id: 'cryptpad-forget',
-                        title: Messages.forgetButtonTitle,
-                    })
-                    .text(Messages.forgetButton)
-                    .addClass('cryptpad-forget rightside-button')
+                var $forgetPad = Cryptpad.createButton('forget', true)
                     .click(function () {
                         var href = window.location.href;
                         Cryptpad.confirm(Messages.forgetPrompt, function (yes) {
@@ -604,11 +588,7 @@ define([
 
                 if (!readOnly && viewHash) {
                     /* add a 'links' button */
-                    var $links = $('<button>', {
-                        title: Messages.getViewButtonTitle
-                    })
-                        .text(Messages.getViewButton)
-                        .addClass('rightside-button')
+                    var $links = Cryptpad.createButton('readonly', true)
                         .click(function () {
                             var baseUrl = window.location.origin + window.location.pathname + '#';
                             var content = '<b>' + Messages.readonlyUrl + '</b><br><a>' + baseUrl + viewHash + '</a><br>';