diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index 2248c8e63..40f895c24 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -42,7 +42,7 @@
     }
 
     button {
-        &#shareButton {
+        &#shareButton, &.btn.btn-success {
             // Bootstrap 4 colors
             color: #fff;
             background: @toolbar-green;
@@ -58,7 +58,7 @@
                 margin-left: 5px;
             }
         }
-        &#newdoc {
+        &#newdoc, &.btn.btn-primary {
             // Bootstrap 4 colors
             color: #fff;
             background: #0275d8;
@@ -77,6 +77,18 @@
         &.hidden {
             display: none;
         }
+
+        // Bootstrap 4 colors (btn-secondary)
+        border: 1px solid transparent;
+        border-radius: .25rem;
+        color: #292b2c;
+        background-color: #fff;
+        border-color: #ccc;
+        &:hover {
+            color: #292b2c;
+            background-color: #e6e6e6;
+            border-color: #adadad;
+        }
     }
 
     .cryptpad-limit {
@@ -195,17 +207,6 @@
         margin-right: 2px;
     }
 
-    button {
-        color: #000;
-        background-color: inherit;
-        background-image: linear-gradient(to bottom,#fff,#e4e4e4);
-        border: 1px solid #A6A6A6;
-        border-bottom-color: #979797;
-        border-radius: 3px;
-        &:hover {
-            background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
-        }
-    }
     .cryptpad-state {
         line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
     }
@@ -429,13 +430,19 @@
     display: none;
     text-align: center;
     .next {
-        float: right;
+        display: inline-block;
+        vertical-align: middle;
+        margin: 20px;
     }
     .previous {
-        float: left;
+        display: inline-block;
+        vertical-align: middle;
+        margin: 20px;
     }
     .goto {
         display: inline-block;
+        vertical-align: middle;
+        text-align: center;
         input { width: 50px; }
     }
     .gotoInput {
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index 58fa58033..76eeb5b4d 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -117,39 +117,59 @@
 .cryptpad-toolbar a {
   float: right;
 }
-.cryptpad-toolbar button#shareButton {
+.cryptpad-toolbar button {
+  border: 1px solid transparent;
+  border-radius: .25rem;
+  color: #292b2c;
+  background-color: #fff;
+  border-color: #ccc;
+}
+.cryptpad-toolbar button#shareButton,
+.cryptpad-toolbar button.btn.btn-success {
   color: #fff;
   background: #5cb85c;
   border-color: #5cb85c;
 }
-.cryptpad-toolbar button#shareButton:hover {
+.cryptpad-toolbar button#shareButton:hover,
+.cryptpad-toolbar button.btn.btn-success:hover {
   background: #449d44;
   border: 1px solid #419641;
 }
-.cryptpad-toolbar button#shareButton span {
+.cryptpad-toolbar button#shareButton span,
+.cryptpad-toolbar button.btn.btn-success span {
   color: #fff;
 }
-.cryptpad-toolbar button#shareButton .large {
+.cryptpad-toolbar button#shareButton .large,
+.cryptpad-toolbar button.btn.btn-success .large {
   margin-left: 5px;
 }
-.cryptpad-toolbar button#newdoc {
+.cryptpad-toolbar button#newdoc,
+.cryptpad-toolbar button.btn.btn-primary {
   color: #fff;
   background: #0275d8;
   border-color: #0275d8;
 }
-.cryptpad-toolbar button#newdoc:hover {
+.cryptpad-toolbar button#newdoc:hover,
+.cryptpad-toolbar button.btn.btn-primary:hover {
   background: #025aa5;
   border: 1px solid #01549b;
 }
-.cryptpad-toolbar button#newdoc span {
+.cryptpad-toolbar button#newdoc span,
+.cryptpad-toolbar button.btn.btn-primary span {
   color: #fff;
 }
-.cryptpad-toolbar button#newdoc .large {
+.cryptpad-toolbar button#newdoc .large,
+.cryptpad-toolbar button.btn.btn-primary .large {
   margin-left: 5px;
 }
 .cryptpad-toolbar button.hidden {
   display: none;
 }
+.cryptpad-toolbar button:hover {
+  color: #292b2c;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
 .cryptpad-toolbar .cryptpad-limit {
   box-sizing: content-box;
   height: 16px;
@@ -265,17 +285,6 @@
   margin-top: -3px;
   margin-right: 2px;
 }
-.cryptpad-toolbar button {
-  color: #000;
-  background-color: inherit;
-  background-image: linear-gradient(to bottom, #fff, #e4e4e4);
-  border: 1px solid #A6A6A6;
-  border-bottom-color: #979797;
-  border-radius: 3px;
-}
-.cryptpad-toolbar button:hover {
-  background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
-}
 .cryptpad-toolbar .cryptpad-state {
   line-height: 32px;
   /* equivalent to 26px + 2*2px margin used for buttons */
@@ -492,13 +501,19 @@
   text-align: center;
 }
 .cryptpad-toolbar-history .next {
-  float: right;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 20px;
 }
 .cryptpad-toolbar-history .previous {
-  float: left;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 20px;
 }
 .cryptpad-toolbar-history .goto {
   display: inline-block;
+  vertical-align: middle;
+  text-align: center;
 }
 .cryptpad-toolbar-history .goto input {
   width: 50px;
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 50a2bf667..030817836 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -133,6 +133,7 @@ define(function () {
     out.history_restoreTitle = "Restaurer la version du document sélectionnée";
     out.history_restorePrompt = "Êtes-vous sûr de vouloir remplacer la version actuelle du document par la version affichée ?";
     out.history_restoreDone = "Document restauré";
+    out.history_version = "Version :";
 
     // Polls
 
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 7c5fd8df5..0c4c74a95 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -135,6 +135,7 @@ define(function () {
     out.history_restoreTitle = "Restore the selected version of the document";
     out.history_restorePrompt = "Are you sure you want to replace the current version of the document by the displayed one?";
     out.history_restoreDone = "Document restored";
+    out.history_version = "Version:";
 
     // Polls
 
diff --git a/www/common/common-history.js b/www/common/common-history.js
index e006210a6..58fd54900 100644
--- a/www/common/common-history.js
+++ b/www/common/common-history.js
@@ -112,9 +112,9 @@ define([
             var val = states[i].getContent().doc;
             c = i;
             if (typeof onUpdate === "function") { onUpdate(); }
-            $hist.find('.next, .previous').show();
-            if (c === states.length - 1) { $hist.find('.next').hide(); }
-            if (c === 0) { $hist.find('.previous').hide(); }
+            $hist.find('.next, .previous').css('visibility', '');
+            if (c === states.length - 1) { $hist.find('.next').css('visibility', 'hidden'); }
+            if (c === 0) { $hist.find('.previous').css('visibility', 'hidden'); }
             return val || '';
         };
 
@@ -132,15 +132,16 @@ define([
             $right.hide();
             $cke.hide();
             var $prev =$('<button>', {
-                'class': 'previous fa fa-step-backward',
+                'class': 'previous fa fa-step-backward btn btn-primary',
                 title: Messages.history_prev
             }).appendTo($hist);
+            var $nav = $('<div>', {'class': 'goto'}).appendTo($hist);
             var $next = $('<button>', {
-                'class': 'next fa fa-step-forward',
+                'class': 'next fa fa-step-forward btn btn-primary',
                 title: Messages.history_next
             }).appendTo($hist);
 
-            var $nav = $('<div>', {'class': 'goto'}).appendTo($hist);
+            var $label = $('<label>').text(Messages.history_version).appendTo($nav);
             var $cur = $('<input>', {
                 'class' : 'gotoInput',
                 'type' : 'number',
@@ -151,19 +152,15 @@ define([
                 e.stopPropagation();
             });
             var $label = $('<label>').text(' / '+ states.length).appendTo($nav);
-            var $goTo = $('<button>', {
-                'class': 'fa fa-check',
-                'title': Messages.history_goTo
-            }).appendTo($nav);
             $('<br>').appendTo($nav);
-            var $rev = $('<button>', {
-                'class':'revertHistory',
-                title: Messages.history_restoreTitle
-            }).text(Messages.history_restore).appendTo($nav);
             var $close = $('<button>', {
                 'class':'closeHistory',
                 title: Messages.history_closeTitle
             }).text(Messages.history_close).appendTo($nav);
+            var $rev = $('<button>', {
+                'class':'revertHistory btn btn-success',
+                title: Messages.history_restoreTitle
+            }).text(Messages.history_restore).appendTo($nav);
 
             onUpdate = function () {
                 $cur.attr('max', states.length);
@@ -181,7 +178,6 @@ define([
             // Buttons actions
             $prev.click(function () { render(getPrevious()); });
             $next.click(function () { render(getNext()); });
-            $goTo.click(function () { render( get($cur.val() - 1) ); });
             $cur.keydown(function (e) {
                 var p = function () { e.preventDefault(); };
                 if (e.which === 13) { p(); return render( get($cur.val() - 1) ); } // Enter
@@ -192,7 +188,7 @@ define([
                 if (e.which === 27) { p(); $close.click(); }
             }).focus();
             $cur.on('change', function () {
-                $goTo.click();
+                render( get($cur.val() - 1) );
             });
             $close.click(function () {
                 states = [];