diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css
index 3c07a46fb0..6a945bb7ec 100644
--- a/frappe/public/css/desk.css
+++ b/frappe/public/css/desk.css
@@ -7,7 +7,8 @@ body {
   margin: 0px;
 }
 html,
-body {
+body,
+.desk-container {
   overflow-x: hidden;
   /* Prevent scroll on narrow devices */
 }
@@ -22,6 +23,10 @@ body {
 .desk-main-section {
   width: 100%;
 }
+.desk-main-section-overlay {
+  display: none;
+  cursor: pointer;
+}
 a,
 .badge,
 .btn,
@@ -225,6 +230,7 @@ ul.linked-with-list li {
 }
 .modal-backdrop {
   opacity: 0.5;
+  position: fixed;
 }
 .form-group {
   margin-bottom: 7px;
diff --git a/frappe/public/css/desktop.css b/frappe/public/css/desktop.css
index 6f17a2b550..84203410f2 100644
--- a/frappe/public/css/desktop.css
+++ b/frappe/public/css/desktop.css
@@ -1,11 +1,11 @@
 body[data-route=""] .navbar-default,
 body[data-route="desktop"] .navbar-default {
-  background-color: rgba(255, 255, 255, 0.5);
-  border-color: transparent;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-color: rgba(54, 65, 76, 0.1);
 }
 #page-desktop {
   min-width: 100%;
-  padding-top: 80px;
+  padding-top: calc(55px);
   margin-top: 0px;
   border: 0px;
   position: absolute;
@@ -18,7 +18,7 @@ body[data-route="desktop"] .navbar-default {
   margin: 0px;
   float: left;
   width: 138px;
-  height: 120px;
+  height: 140px;
 }
 .case-label {
   font-size: 12px;
@@ -26,21 +26,19 @@ body[data-route="desktop"] .navbar-default {
   letter-spacing: 0.4px;
   color: #fff;
   text-align: center;
-  margin-top: -10px;
+  margin-top: 10px;
   transition: 0.2s;
   -webkit-transition: 0.2s;
-  text-shadow: 1px 1px 1px #000000, 0px 1px 5px rgba(0, 0, 0, 0.5);
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
 }
 .app-icon {
-  /*	border-radius: 5px;*/
-  overflow: hidden;
   padding: 20px;
   display: inline-block;
   margin: auto;
-  margin-bottom: 7px;
   text-align: center;
-  border-radius: 5px;
+  border-radius: 16px;
   cursor: pointer;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
 }
 .app-icon i {
   font-size: 32px;
@@ -68,9 +66,9 @@ body[data-route="desktop"] .navbar-default {
   color: #fff;
   background-color: #ff5858;
   padding: 6px;
-  border-radius: 50%;
   font-size: 12px;
   line-height: 1;
+  border-radius: 25px;
   min-width: 25px;
   text-align: center;
   text-shadow: none;
@@ -124,9 +122,11 @@ body[data-route="desktop"] .navbar-default {
   .case-label {
     font-size: 80%;
     font-weight: normal;
+    margin-top: 7px;
   }
   .app-icon {
     padding: 10px;
+    border-radius: 12px;
   }
   .app-icon i {
     font-size: 32px;
diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index bba74e5c08..98c66063ab 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -91,13 +91,22 @@
   .navbar-fixed-top {
     transition: 0.25s;
   }
-  .offcanvas {
+  .offcanvas,
+  .desk-main-section-overlay {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .offcanvas.active-left .desk-main-section-overlay,
+  .offcanvas.active-right .desk-main-section-overlay {
+    display: block;
+    background-color: #334143;
+    opacity: 0.5;
+    z-index: 1031;
   }
   .offcanvas.active-left,
   .offcanvas.active-left .page-head,
diff --git a/frappe/public/js/frappe/desk.js b/frappe/public/js/frappe/desk.js
index b8e97a3d8a..016179d49b 100644
--- a/frappe/public/js/frappe/desk.js
+++ b/frappe/public/js/frappe/desk.js
@@ -184,6 +184,15 @@ frappe.Application = Class.extend({
 		if(frappe.boot) {
 			frappe.frappe_toolbar = new frappe.ui.toolbar.Toolbar();
 		}
+
+		// collapse offcanvas sidebars!
+		$(".offcanvas .sidebar").on("click", "a", function() {
+			$(".offcanvas").removeClass("active-left active-right");
+		});
+
+		$(".desk-main-section-overlay").on("click", function() {
+			$(".offcanvas").removeClass("active-left active-right");
+		});
 	},
 	logout: function() {
 		var me = this;
diff --git a/frappe/public/js/frappe/router.js b/frappe/public/js/frappe/router.js
index a34707dfc9..1ebabdcac9 100644
--- a/frappe/public/js/frappe/router.js
+++ b/frappe/public/js/frappe/router.js
@@ -47,9 +47,6 @@ frappe.route = function() {
 	if(frappe.route_titles[window.location.hash]) {
 		document.title = frappe.route_titles[window.location.hash];
 	}
-
-	// collapse offcanvas sidebars!
-	$(".offcanvas").removeClass("active-left active-right");
 }
 
 frappe.get_route = function(route) {
diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less
index 21b037a85c..b83dfc121e 100644
--- a/frappe/public/less/desk.less
+++ b/frappe/public/less/desk.less
@@ -11,7 +11,8 @@ body {
 }
 
 html,
-body {
+body,
+.desk-container {
   overflow-x: hidden; /* Prevent scroll on narrow devices */
 }
 
@@ -28,6 +29,11 @@ body {
 	width: 100%;
 }
 
+.desk-main-section-overlay {
+	display: none;
+	cursor: pointer;
+}
+
 // transition
 a,
 .badge,
@@ -264,7 +270,8 @@ ul.linked-with-list li {
 }
 
 .modal-backdrop {
-  opacity: 0.5;
+	opacity: 0.5;
+	position: fixed;
 }
 
 .form-group {
diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less
index fde2000082..727792dc30 100644
--- a/frappe/public/less/desktop.less
+++ b/frappe/public/less/desktop.less
@@ -4,13 +4,13 @@
 @icon-hover: #fff;
 
 body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default {
-	background-color: rgba(255, 255, 255, 0.5);
-	border-color: transparent;
+	background-color: rgba(255, 255, 255, 0.9);
+	border-color: rgba(54, 65, 76, 0.1);
 }
 
 #page-desktop {
 	min-width: 100%;
-	padding-top: 80px;
+	padding-top: calc(40px + 15%);
 	margin-top: 0px;
 	border: 0px;
 	position: absolute;
@@ -24,7 +24,7 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
 	margin: 0px;
 	float: left;
 	width: 138px;
-	height: 120px;
+	height: 140px;
 }
 
 .case-label {
@@ -33,23 +33,20 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
 	letter-spacing: 0.4px;
 	color: #fff;
 	text-align: center;
-	margin-top: -10px;
+	margin-top: 10px;
 	transition: 0.2s;
 	-webkit-transition: 0.2s;
-	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1), 0px 1px 5px rgba(0, 0, 0, 0.5);
+	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
 }
 
 .app-icon {
-/*	border-radius: 5px;*/
-	overflow: hidden;
 	padding: 20px;
 	display: inline-block;
 	margin: auto;
-	margin-bottom: 7px;
 	text-align: center;
-	// background-color: @btn-bg;
-	border-radius: 5px;
+	border-radius: 16px;
 	cursor: pointer;
+	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
 }
 
 .app-icon i {
@@ -80,9 +77,9 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
 	color: #fff;
 	background-color: @indicator-red;
 	padding: 6px;
-	border-radius: 50%;
 	font-size: 12px;
 	line-height: 1;
+	border-radius: 25px;
 	min-width: 25px;
 	text-align: center;
 	text-shadow: none;
@@ -152,10 +149,12 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
 	.case-label {
 		font-size: 80%;
 		font-weight: normal;
+		margin-top: 7px;
 	}
 
 	.app-icon {
 		padding: 10px;
+		border-radius: 12px;
 	}
 
 	.app-icon i {
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 37fac84d97..56927fe457 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -120,14 +120,23 @@
 		transition: 0.25s;
 	}
 
-	.offcanvas {
-		// position: fixed;
+	.offcanvas,
+	.desk-main-section-overlay {
 		position: absolute;
 		left: 0;
 		right: 0;
 		top: 0;
 		bottom: 0;
 		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	.offcanvas.active-left .desk-main-section-overlay,
+	.offcanvas.active-right .desk-main-section-overlay {
+		display: block;
+		background-color: @modal-backdrop-bg;
+		opacity: 0.5;
+		z-index: 1031;
 	}
 
 	.offcanvas.active-left,
diff --git a/frappe/public/less/variables.less b/frappe/public/less/variables.less
index 3f9185c148..4185579405 100644
--- a/frappe/public/less/variables.less
+++ b/frappe/public/less/variables.less
@@ -7,6 +7,7 @@
 @grey-link-color:     #212a33;
 @navbar-bg:           #f5f7fa;
 @light-bg:            #fafbfc;
+@modal-backdrop-bg:	  #334143;
 @text-extra-muted:    @border-color;
 @font-size-medium:    12px;
 
diff --git a/frappe/templates/pages/desk.html b/frappe/templates/pages/desk.html
index 6683e4c3b8..bc3ab8033a 100644
--- a/frappe/templates/pages/desk.html
+++ b/frappe/templates/pages/desk.html
@@ -5,6 +5,9 @@
 	<meta name="author" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0,
 		maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="white">
+	<meta name="mobile-web-app-capable" content="yes">
 	<link rel="shortcut icon"
 		href="{{ favicon or "/assets/frappe/images/favicon.ico" }}" type="image/x-icon">
 	<link rel="icon"
@@ -23,6 +26,7 @@
 				<div id="body_div"></div>
 				<footer></footer>
 			</div>
+			<div class="desk-main-section-overlay"></div>
 			<div class="sidebar sidebar-left visible-xs"></div>
 			<div class="sidebar sidebar-right visible-xs">
 				<ul class="sidebar-menu" id="sidebar-notification"></ul>