diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
index 2b9a96cf55..8efaf0c024 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function AppHeaderDirective(eventsService, appState, userService, focusService) {
+    function AppHeaderDirective(eventsService, appState, userService, focusService, backdropService) {
 
         function link(scope, el, attr, ctrl) {
 
@@ -72,12 +72,14 @@
 
             scope.avatarClick = function () {
                 if (!scope.userDialog) {
+                    backdropService.open();
                     scope.userDialog = {
                         view: "user",
                         show: true,
                         close: function (oldModel) {
                             scope.userDialog.show = false;
                             scope.userDialog = null;
+                            backdropService.close();
                         }
                     };
                 } else {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
index eb8740b385..f4402dec7b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -2,7 +2,7 @@
     position: fixed;
     overflow: hidden;
     background: @white;
-    z-index: @zindexUmbOverlay;
+    z-index: 7501;
     animation: fadeIn 0.2s;
     box-shadow: 0 10px 50px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.16);
     text-align: left;