diff --git a/browser/css/cool.css b/browser/css/cool.css
index 4ec9055d0..8f88d1834 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -230,6 +230,11 @@ nav.spreadsheet-color-indicator ~ #sidebar-dock-wrapper {
 	width: 0;
 }
 
+/* Hide back btn except on mobile phones */
+#toolbar-mobile-back {
+	width: 0;
+}
+
 #mobile-edit-button {
 	position: absolute;
 	width: 56px;
diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index 58202c292..444853629 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -105,6 +105,21 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
 	display: none !important;
 }
 
+/* Related to back button */
+#toolbar-mobile-back {
+	width: 36px;
+	height: 36px;
+	position: relative;
+	z-index: 1003;
+}
+.editmode-off {
+	background: url('images/lc_closedocmobile.svg') no-repeat center !important;
+}
+.editmode-on {
+	background: url('images/lc_listitem-selected.svg') no-repeat center / 28px !important;
+}
+
+
 /* No ruler on mobile phones. */
 .cool-ruler {
 	height: 0px;
diff --git a/browser/html/cool.html.m4 b/browser/html/cool.html.m4
index fee29f7bd..97ecf06f3 100644
--- a/browser/html/cool.html.m4
+++ b/browser/html/cool.html.m4
@@ -206,6 +206,7 @@ m4_ifelse(MOBILEAPP,[true],
      <table id="toolbar-wrapper">
      <tr>
        <td id="toolbar-logo"></td>
+       <td id="toolbar-mobile-back" class="editmode-off"></td>
        <td id="toolbar-up"></td>
        <td id="toolbar-hamburger">
          <label class="main-menu-btn" for="main-menu-state">
diff --git a/browser/src/control/Control.MobileTopBar.js b/browser/src/control/Control.MobileTopBar.js
index cde6c8585..abf42ed78 100644
--- a/browser/src/control/Control.MobileTopBar.js
+++ b/browser/src/control/Control.MobileTopBar.js
@@ -25,7 +25,6 @@ L.Control.MobileTopBar = L.Control.extend({
 	getToolItems: function(docType) {
 		if (docType == 'text') {
 			return [
-				{type: 'button',  id: 'closemobile',  img: 'closemobile'},
 				{type: 'button',  id: 'undo',  img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true},
 				{type: 'button',  id: 'redo',  img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true},
 				{type: 'spacer'},
@@ -36,7 +35,6 @@ L.Control.MobileTopBar = L.Control.extend({
 			];
 		} else if (docType == 'spreadsheet') {
 			return [
-				{type: 'button',  id: 'closemobile',  img: 'closemobile'},
 				{type: 'button',  id: 'undo',  img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true},
 				{type: 'button',  id: 'redo',  img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true},
 				{type: 'button', hidden: true, id: 'acceptformula',  img: 'ok', hint: _('Accept')},
@@ -49,7 +47,6 @@ L.Control.MobileTopBar = L.Control.extend({
 			];
 		} else if (docType == 'presentation') {
 			return [
-				{type: 'button',  id: 'closemobile',  img: 'closemobile'},
 				{type: 'button',  id: 'undo',  img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true},
 				{type: 'button',  id: 'redo',  img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true},
 				{type: 'spacer'},
@@ -61,7 +58,6 @@ L.Control.MobileTopBar = L.Control.extend({
 			];
 		} else if (docType == 'drawing') {
 			return [
-				{type: 'button',  id: 'closemobile',  img: 'closemobile'},
 				{type: 'button',  id: 'undo',  img: 'undo', hint: _UNO('.uno:Undo'), uno: 'Undo', disabled: true},
 				{type: 'button',  id: 'redo',  img: 'redo', hint: _UNO('.uno:Redo'), uno: 'Redo', disabled: true},
 				{type: 'spacer'},
@@ -154,10 +150,6 @@ L.Control.MobileTopBar = L.Control.extend({
 				toolbar.check(id);
 			}
 		}
-		else if (id === 'closemobile') {
-			// Call global onClick handler
-			window.onClick(e, id, item);
-		}
 		else if (id === 'fullscreen-drawing') {
 			if (item.checked) {
 				toolbar.uncheck(id);
@@ -220,7 +212,6 @@ L.Control.MobileTopBar = L.Control.extend({
 				toolbarDownButtons.forEach(function(id) {
 					toolbar.enable(id);
 				});
-				toolbar.set('closemobile', {img: 'editmode'});
 			}
 		} else {
 			toolbar = w2ui['actionbar'];
@@ -229,7 +220,6 @@ L.Control.MobileTopBar = L.Control.extend({
 					toolbar.disable(id);
 				});
 				toolbar.enable('comment_wizard');
-				toolbar.set('closemobile', {img: 'closemobile'});
 			}
 		}
 	},
diff --git a/browser/src/control/Control.Toolbar.js b/browser/src/control/Control.Toolbar.js
index 587ae7ed8..5aa5e6817 100644
--- a/browser/src/control/Control.Toolbar.js
+++ b/browser/src/control/Control.Toolbar.js
@@ -1057,8 +1057,12 @@ function onUpdatePermission(e) {
 			}
 		}
 		if (e.perm === 'edit') {
+			$('#toolbar-mobile-back').removeClass('editmode-off');
+			$('#toolbar-mobile-back').addClass('editmode-on');
 			toolbar.set('closemobile', {img: 'editmode'});
 		} else {
+			$('#toolbar-mobile-back').removeClass('editmode-on');
+			$('#toolbar-mobile-back').addClass('editmode-off');
 			toolbar.set('closemobile', {img: 'closemobile'});
 		}
 
diff --git a/browser/src/control/Control.UIManager.js b/browser/src/control/Control.UIManager.js
index e7494e958..011b4acad 100644
--- a/browser/src/control/Control.UIManager.js
+++ b/browser/src/control/Control.UIManager.js
@@ -42,6 +42,7 @@ L.Control.UIManager = L.Control.extend({
 
 	initializeBasicUI: function() {
 		var enableNotebookbar = window.userInterfaceMode === 'notebookbar';
+		var that = this;
 
 		if (window.mode.isMobile() || !enableNotebookbar) {
 			var menubar = L.control.menubar();
@@ -49,6 +50,12 @@ L.Control.UIManager = L.Control.extend({
 			this.map.addControl(menubar);
 		}
 
+		if (window.mode.isMobile()) {
+			$('#toolbar-mobile-back').on('click', function() {
+				that.enterReadonlyOrClose();
+			});
+		}
+
 		if (!window.mode.isMobile()) {
 			if (!enableNotebookbar) {
 				this.map.topToolbar = L.control.topToolbar();