diff --git a/customize.dist/main.css b/customize.dist/main.css
index aed25ce5b..d722e38cb 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -64,7 +64,7 @@
 .alertify .dialog > *,
 .alertify .alert > * {
   width: 30%;
-  min-width: 500px;
+  width: 500px;
   max-width: 95%;
   margin: 0 auto;
   text-align: center;
diff --git a/customize.dist/src/less/alertify.less b/customize.dist/src/less/alertify.less
index 4d9e22fde..c4bb60898 100644
--- a/customize.dist/src/less/alertify.less
+++ b/customize.dist/src/less/alertify.less
@@ -72,7 +72,7 @@
 
         > * {
             width: 30%;
-            min-width: 500px;
+            width: 500px;
             max-width: 95%;
             margin: 0 auto;
             text-align: center;
diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index 075639649..5d2db90af 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -41,6 +41,7 @@
 
     button {
         &#shareButton {
+            // Bootstrap 4 colors
             color: #fff;
             background: #5cb85c;
             border-color: #5cb85c;
@@ -51,6 +52,9 @@
             span {
                 color: #fff;
             }
+            .large {
+                margin-left: 5px;
+            }
         }
     }
 
@@ -97,24 +101,6 @@
             background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
         }
     }
-
-    .large {
-        @media screen and (max-width: 800px) {
-            display: none;
-        }
-        @media screen and (min-width: 801px) {
-            display: inline-block;
-        }
-    }
-    .small {
-        @media screen and (max-width: 800px) {
-            display: inline-block;
-        }
-        @media screen and (min-width: 801px) {
-            display: none;
-        }
-    }
-
     .cryptpad-state {
         line-height: 32px; /* equivalent to 26px + 2*2px margin used for buttons */
     }
@@ -150,6 +136,74 @@
             height: 24px;
         }
     }
+
+
+    .big {
+        @media screen and (max-width: @media-not-big) {
+            display: none;
+        }
+        @media screen and (min-width: @media-not-small) {
+            display: inline-block;
+        }
+    }
+    .small {
+        @media screen and (max-width: @media-not-big) {
+            display: inline-block;
+        }
+        @media screen and (min-width: @media-not-small) {
+            display: none;
+        }
+    }
+
+    .med-big {
+        @media screen and (max-width: @media-medium-screen) {
+            display: none;
+        }
+        @media screen and (min-width: (@media-medium-screen + 1px)) {
+            display: inline-block;
+        }
+    }
+    .med-small {
+        @media screen and (max-width: @media-medium-screen) {
+            display: inline-block;
+        }
+        @media screen and (min-width: (@media-medium-screen + 1px)) {
+            display: none;
+        }
+    }
+
+    .large {
+        @media screen and (max-width: @media-narrow-screen) {
+            display: none;
+        }
+        @media screen and (min-width: (@media-narrow-screen + 1px)) {
+            display: inline-block;
+        }
+    }
+    .narrow {
+        @media screen and (max-width: @media-narrow-screen) {
+            display: inline-block;
+        }
+        @media screen and (min-width: (@media-narrow-screen + 1px)) {
+            display: none;
+        }
+    }
+}
+
+.cryptpad-toolbar:not(.notitle) {
+    .cryptpad-toolbar-top {
+        @media screen and (max-width: @media-medium-screen) {
+            height: 67px;
+        }
+        .cryptpad-link, .cryptpad-user {
+            @media screen and (max-width: @media-medium-screen) {
+                top: 35px;
+            }
+            @media screen and (min-width: (@media-medium-screen + 1px)) {
+                top: 0px;
+            }
+        }
+    }
 }
 
 .cryptpad-toolbar-top {
@@ -157,9 +211,6 @@
     text-align: center;
     height: 32px;
     position: relative;
-    @media screen and (max-width: @media-narrow-screen) {
-        height: 67px;
-    }
     .cryptpad-title {
         .title, .pencilIcon {
             font-size: 1.5em;
@@ -212,12 +263,6 @@
         position: absolute;
         left: 0px;
         height: 32px;
-        @media screen and (max-width: (@media-short-screen - 1px)) {
-            top: 35px;
-        }
-        @media screen and (min-width: @media-short-screen) {
-            top: 0px;
-        }
 
         a.cryptpad-logo {
             cursor: pointer;
@@ -242,41 +287,19 @@
                 cursor: pointer;
             }
         }
-        .big {
-            @media screen and (max-width: @media-narrow-screen) {
-                display: none;
-            }
-            @media screen and (min-width: (@media-narrow-screen + 1px)) {
-                display: inline-block;
-            }
-        }
-        .small {
-            @media screen and (max-width: @media-narrow-screen) {
-                display: inline-block;
-            }
-            @media screen and (min-width: (@media-narrow-screen + 1px)) {
-                display: none;
-            }
-        }
     }
     .cryptpad-user {
         position: absolute;
         right: 0;
         span:not(.cryptpad-lag) {
             vertical-align: top;
-            display: inline-block;
+            //display: inline-block;
         }
         button {
             span.fa {
                 vertical-align: baseline;
             }
         }
-        @media screen and (max-width: @media-narrow-screen) {
-            top: 3em;
-        }
-        @media screen and (min-width: (@media-narrow-screen + 1px)) {
-            top: 0px;
-        }
     }
 }
 .cryptpad-toolbar-leftside {
diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index cb8e0b434..d3a9c81bb 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -69,6 +69,7 @@
 
 @media-short-screen: 450px;
 @media-narrow-screen: 400px;
+@media-medium-screen: 600px;
 
 @toolbar-gradient-start: #f5f5f5;
 @toolbar-gradient-end: #DDDDDD;
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index 5d824364b..71f0f96ea 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -124,6 +124,9 @@
 .cryptpad-toolbar button#shareButton span {
   color: #fff;
 }
+.cryptpad-toolbar button#shareButton .large {
+  margin-left: 5px;
+}
 .cryptpad-toolbar .cryptpad-lag {
   box-sizing: content-box;
   height: 16px;
@@ -166,26 +169,6 @@
 .cryptpad-toolbar button:hover {
   background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
 }
-@media screen and (max-width: 800px) {
-  .cryptpad-toolbar .large {
-    display: none;
-  }
-}
-@media screen and (min-width: 801px) {
-  .cryptpad-toolbar .large {
-    display: inline-block;
-  }
-}
-@media screen and (max-width: 800px) {
-  .cryptpad-toolbar .small {
-    display: inline-block;
-  }
-}
-@media screen and (min-width: 801px) {
-  .cryptpad-toolbar .small {
-    display: none;
-  }
-}
 .cryptpad-toolbar .cryptpad-state {
   line-height: 32px;
   /* equivalent to 26px + 2*2px margin used for buttons */
@@ -218,17 +201,89 @@
 .cryptpad-toolbar select option {
   height: 24px;
 }
+@media screen and (max-width: 800px) {
+  .cryptpad-toolbar .big {
+    display: none;
+  }
+}
+@media screen and (min-width: 801px) {
+  .cryptpad-toolbar .big {
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 800px) {
+  .cryptpad-toolbar .small {
+    display: inline-block;
+  }
+}
+@media screen and (min-width: 801px) {
+  .cryptpad-toolbar .small {
+    display: none;
+  }
+}
+@media screen and (max-width: 600px) {
+  .cryptpad-toolbar .med-big {
+    display: none;
+  }
+}
+@media screen and (min-width: 601px) {
+  .cryptpad-toolbar .med-big {
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 600px) {
+  .cryptpad-toolbar .med-small {
+    display: inline-block;
+  }
+}
+@media screen and (min-width: 601px) {
+  .cryptpad-toolbar .med-small {
+    display: none;
+  }
+}
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar .large {
+    display: none;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar .large {
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 400px) {
+  .cryptpad-toolbar .narrow {
+    display: inline-block;
+  }
+}
+@media screen and (min-width: 401px) {
+  .cryptpad-toolbar .narrow {
+    display: none;
+  }
+}
+@media screen and (max-width: 600px) {
+  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top {
+    height: 67px;
+  }
+}
+@media screen and (max-width: 600px) {
+  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-link,
+  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-user {
+    top: 35px;
+  }
+}
+@media screen and (min-width: 601px) {
+  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-link,
+  .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-user {
+    top: 0px;
+  }
+}
 .cryptpad-toolbar-top {
   display: block;
   text-align: center;
   height: 32px;
   position: relative;
 }
-@media screen and (max-width: 400px) {
-  .cryptpad-toolbar-top {
-    height: 67px;
-  }
-}
 .cryptpad-toolbar-top .cryptpad-title .title,
 .cryptpad-toolbar-top .cryptpad-title .pencilIcon {
   font-size: 1.5em;
@@ -278,16 +333,6 @@
   left: 0px;
   height: 32px;
 }
-@media screen and (max-width: 449px) {
-  .cryptpad-toolbar-top .cryptpad-link {
-    top: 35px;
-  }
-}
-@media screen and (min-width: 450px) {
-  .cryptpad-toolbar-top .cryptpad-link {
-    top: 0px;
-  }
-}
 .cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
   cursor: pointer;
   height: 32px;
@@ -309,47 +354,16 @@
   vertical-align: middle;
   cursor: pointer;
 }
-@media screen and (max-width: 400px) {
-  .cryptpad-toolbar-top .cryptpad-link .big {
-    display: none;
-  }
-}
-@media screen and (min-width: 401px) {
-  .cryptpad-toolbar-top .cryptpad-link .big {
-    display: inline-block;
-  }
-}
-@media screen and (max-width: 400px) {
-  .cryptpad-toolbar-top .cryptpad-link .small {
-    display: inline-block;
-  }
-}
-@media screen and (min-width: 401px) {
-  .cryptpad-toolbar-top .cryptpad-link .small {
-    display: none;
-  }
-}
 .cryptpad-toolbar-top .cryptpad-user {
   position: absolute;
   right: 0;
 }
 .cryptpad-toolbar-top .cryptpad-user span:not(.cryptpad-lag) {
   vertical-align: top;
-  display: inline-block;
 }
 .cryptpad-toolbar-top .cryptpad-user button span.fa {
   vertical-align: baseline;
 }
-@media screen and (max-width: 400px) {
-  .cryptpad-toolbar-top .cryptpad-user {
-    top: 3em;
-  }
-}
-@media screen and (min-width: 401px) {
-  .cryptpad-toolbar-top .cryptpad-user {
-    top: 0px;
-  }
-}
 .cryptpad-toolbar-leftside {
   float: left;
   margin-bottom: -1px;
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index 1c7003747..d369e8293 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -63,7 +63,7 @@ define([
         });
     };
 
-    var createRealtimeToolbar = function ($container) {
+    var createRealtimeToolbar = function ($container, config) {
         var $toolbar = $('<div>', {
             'class': TOOLBAR_CLS,
             id: uid(),
@@ -72,6 +72,11 @@ define([
         .append($('<div>', {'class': LEFTSIDE_CLS}))
         .append($('<div>', {'class': RIGHTSIDE_CLS}));
 
+        // The 'notitle' class removes the line added for the title with a small screen
+        if (!config || typeof config !== "object") {
+            $toolbar.addClass('notitle');
+        }
+
         $container.prepend($toolbar);
         styleToolbar($container);
         return $toolbar;
@@ -81,7 +86,7 @@ define([
         if (config.displayed.indexOf('spinner') !== -1) {
             var $spinner = $('<span>', {
                 id: uid(),
-                'class': SPINNER_CLS + ' fa fa fa-spinner fa-pulse',
+                'class': SPINNER_CLS + ' fa fa-spinner fa-pulse',
             }).hide();
             $container.prepend($spinner);
             return $spinner[0];
@@ -117,10 +122,9 @@ define([
         // Share button
         if (config.displayed.indexOf('share') !== -1) {
             var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
-            var $span = $('<span>', {'class': 'large'}).append($shareIcon.clone()).append(' ' +Messages.shareButton);
-            var $spanSmall = $('<span>', {'class': 'small'}).append($shareIcon.clone());
+            var $span = $('<span>', {'class': 'large'}).append(' ' +Messages.shareButton);
             var dropdownConfigShare = {
-                text: $('<div>').append($span).append($spanSmall).html(),
+                text: $('<div>').append($shareIcon).append($span).html(),
                 options: []
             };
             var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
@@ -234,7 +238,7 @@ define([
             var viewersText = numberOfViewUsers > 1 ? Messages.viewers : Messages.viewer;
             var editorsText = numberOfEditUsers > 1 ? Messages.editors : Messages.editor;
             var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
-            var $spansmall = $('<span>', {'class': 'small'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
+            var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
             $userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
         }
 
@@ -314,8 +318,8 @@ define([
             'class': "cryptpad-logo"
         }).append($imgTag);
         var $span = $('<span>').text('CryptPad');
-        var $aTagBig = $aTagSmall.clone().addClass('big').append($span);
-        $aTagSmall.addClass('small');
+        var $aTagBig = $aTagSmall.clone().addClass('large').append($span);
+        $aTagSmall.addClass('narrow');
         var onClick = function (e) {
             e.preventDefault();
             window.location = "/";
@@ -362,7 +366,9 @@ define([
                     content: Messages.type[p]
                 });
             });
-            var $newButton = $('<div>').append($('<span>', {'class': 'fa fa-plus'})).append(Messages.newButton);
+            var $plusIcon = $('<span>', {'class': 'fa fa-plus'});
+            var $newbig = $('<span>', {'class': 'big'}).append(' ' +Messages.newButton);
+            var $newButton = $('<div>').append($plusIcon).append($newbig);
             var dropdownConfig = {
                 text: $newButton.html(), // Button initial text
                 options: pads_options, // Entries displayed in the menu
@@ -436,12 +442,13 @@ define([
                 });
             }
             var $icon = $('<span>', {'class': 'fa fa-user'});
-            var $button = $('<div>').append($icon).append($displayedName.clone());
+            var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
+            var $userButton = $('<div>').append($icon).append($userbig);
             if (account) {
-                $button.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
+                $userbig.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
             }
             var dropdownConfigUser = {
-                text: $button.html(), // Button initial text
+                text: $userButton.html(), // Button initial text
                 options: options, // Entries displayed in the menu
                 left: true, // Open to the left of the button
             };
@@ -555,7 +562,7 @@ define([
         var Cryptpad = config.common;
         config.displayed = config.displayed || [];
 
-        var toolbar = createRealtimeToolbar($container);
+        var toolbar = createRealtimeToolbar($container, config.title);
         var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), config, readOnly, Cryptpad);
         var $titleElement = createTitle(toolbar.find('.' + TOP_CLS), readOnly, config.title, Cryptpad);
         var $linkElement = createLinkToMain(toolbar.find('.' + TOP_CLS));
diff --git a/www/drive/file.css b/www/drive/file.css
index afbf061fe..46295d95d 100644
--- a/www/drive/file.css
+++ b/www/drive/file.css
@@ -29,6 +29,20 @@ body {
   display: flex;
   flex-flow: row;
 }
+@media screen and (max-width: 600px) {
+  .app-container {
+    display: block;
+  }
+  .app-container #tree {
+    resize: none;
+    width: 100%;
+    max-width: unset;
+    border-bottom: 1px solid #ccc;
+  }
+  .app-container #tree .category2 {
+    margin-top: 0.5em;
+  }
+}
 .fa {
   /*min-width: 17px;*/
   margin-right: 3px;
@@ -188,7 +202,6 @@ span.fa-folder-open {
   margin-top: 10px;
 }
 #content .info-box {
-  height: 40px;
   line-height: 40px;
   padding-left: 10px;
   margin: 10px auto;
@@ -347,17 +360,17 @@ span.fa-folder-open {
   position: relative;
   display: inline-block;
 }
-#driveToolbar .dropdown-bar.right {
+#driveToolbar .right {
   float: right;
   /* Right-side buttons */
 }
-#driveToolbar .dropdown-bar.right button {
+#driveToolbar .right button {
   display: inline-block;
 }
-#driveToolbar .dropdown-bar.right button.active {
+#driveToolbar .right button.active {
   display: none;
 }
-#driveToolbar .dropdown-bar.right button .fa {
+#driveToolbar .right button .fa {
   margin-right: 0px;
 }
 #driveToolbar .dropdown-bar-content {
diff --git a/www/drive/file.less b/www/drive/file.less
index e4c7dfdfb..0b6a52cc9 100644
--- a/www/drive/file.less
+++ b/www/drive/file.less
@@ -18,6 +18,8 @@
 @toolbar-path-bg: #fff;
 @toolbar-path-border: #888;
 
+@size-mobile: 600px;
+
 /* PAGE */
 
 html, body {
@@ -51,6 +53,18 @@ body {
     width: 100%;
     display: flex;
     flex-flow: row;
+    @media screen and (max-width: @size-mobile) {
+        display: block;
+        #tree {
+            resize: none;
+            width: 100%;
+            max-width: unset;
+            border-bottom: 1px solid @toolbar-border-col;
+            .category2 {
+                margin-top: 0.5em;
+            }
+        }
+    }
 }
 
 .fa {
@@ -228,7 +242,6 @@ span {
         margin-top: 10px;
     }
     .info-box {
-        height: 40px;
         line-height: 40px;
         padding-left: 10px;
         margin: 10px auto;
@@ -404,17 +417,17 @@ span {
         line-height: 1em;
         position: relative;
         display: inline-block;
-        &.right {
-            float: right;
-            /* Right-side buttons */
-            button {
-                display: inline-block;
-                &.active {
-                    display: none;
-                }
-                .fa {
-                    margin-right: 0px;
-                }
+    }
+    .right {
+        float: right;
+        /* Right-side buttons */
+        button {
+            display: inline-block;
+            &.active {
+                display: none;
+            }
+            .fa {
+                margin-right: 0px;
             }
         }
     }
diff --git a/www/drive/index.html b/www/drive/index.html
index 74903a325..36502515b 100644
--- a/www/drive/index.html
+++ b/www/drive/index.html
@@ -2,6 +2,7 @@
 <html class="cp">
 <head>
     <title>CryptDrive</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <link rel="icon" type="image/png"
         href="/customize/main-favicon.png"
diff --git a/www/drive/main.js b/www/drive/main.js
index e80c00afa..43f469aff 100644
--- a/www/drive/main.js
+++ b/www/drive/main.js
@@ -29,7 +29,8 @@ define([
     var APP = window.APP = {
         editable: false,
         Cryptpad: Cryptpad,
-        loggedIn: Cryptpad.isLoggedIn()
+        loggedIn: Cryptpad.isLoggedIn(),
+        mobile: $('body').width() <= 600 // Menu and content area are not inline-block anymore for mobiles
     };
 
     var stringify = APP.stringify = function (obj) {
@@ -353,6 +354,14 @@ define([
             } else {
                 $element.removeClass("selected");
             }
+            $driveToolbar.find('#contextButton').css({
+                background: '#000'
+            });
+            window.setTimeout(function () {
+                $driveToolbar.find('#contextButton').css({
+                    background: ''
+                });
+            }, 500);
         };
 
         // Open the selected context menu on the closest "li" element
@@ -776,6 +785,9 @@ define([
             if (!path || path.length === 0) { return; }
             var isTrash = filesOp.isPathInTrash(path);
             var $title = $('<span>', {'class': 'path unselectable'});
+            if (APP.mobile) {
+                return $title;
+            }
             path.forEach(function (p, idx) {
                 if (isTrash && [1,2].indexOf(idx) !== -1) { return; }
 
@@ -1142,7 +1154,9 @@ define([
             var $toolbar = $driveToolbar;
             $toolbar.html('');
             var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar);
-            $leftside.width($tree.width());
+            if (!APP.mobile) {
+                $leftside.width($tree.width());
+            }
             var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
             return $toolbar;
         };
@@ -1307,6 +1321,25 @@ define([
             var $modeButton = createViewModeButton().appendTo($toolbar.find('.rightside'));
             var $title = createTitle(path).appendTo($toolbar.find('.rightside'));
 
+            if (APP.mobile) {
+                var $context = $('<button>', {'class': 'element right dropdown-bar', id: 'contextButton'});
+                $context.append($('<span>', {'class': 'fa fa-caret-down'}));
+                $context.click(function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    var $li = $content.find('.selected');
+                    if ($li.length !== 1) {
+                        $li = $tree.find('.element.active').closest('li');
+                    }
+                    $iframe.find('.contextMenu').css({
+                        top: ($li.offset().top + 10) + 'px',
+                        left: ($li.offset().left + 50) + 'px'
+                    });
+                    $li.contextmenu();
+                });
+                $context.appendTo($toolbar.find('.rightside'));
+            }
+
             // NewButton can be undefined if we're in read only mode
             $toolbar.find('.leftside').append(createNewButton(isInRoot));
 
@@ -1761,6 +1794,7 @@ define([
         });
 
         $iframe.find('#tree').mousedown(function (e) {
+            if (APP.mobile) { return; }
             if (APP.resizeTree) { return; }
             APP.resizeTree = window.setInterval(function () {
                 $driveToolbar.find('.leftside').width($tree.width());