diff --git a/src/Umbraco.Web.UI.Client/src/less/pages/login.less b/src/Umbraco.Web.UI.Client/src/less/pages/login.less
index 4e7937830c..e36acdc273 100644
--- a/src/Umbraco.Web.UI.Client/src/less/pages/login.less
+++ b/src/Umbraco.Web.UI.Client/src/less/pages/login.less
@@ -13,23 +13,25 @@
     border: none;
     border-radius: 0;
     overflow-y: auto;
-    background-color: @purple-d2;
+    background-color: @blueNight;
 }
 
 .login-overlay__background-image {
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
+    background-image: url('../img/login.jpg');
     width: 100%;
     height: 100%;
     position: absolute;
-    opacity: 0.05;
 }
 
 .login-overlay__logo {
     position: absolute;
     top: 22px;
     left: 25px;
+    width: 30px;
+    height: 30px;
     z-index: 1;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html
index d6ec18667c..d5dc203d67 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html
@@ -2,10 +2,10 @@
 
     <div id="login" class="umb-modalcolumn umb-dialog" ng-class="{'show-validation': vm.loginForm.$invalid}" ng-cloak>
 
-        <div class="login-overlay__background-image" ng-if="vm.backgroundImage" ng-style="{'background-image':'url(' + vm.backgroundImage + ')'}"></div>
+        <div class="login-overlay__background-image" ng-style="{'background-image': 'url('+vm.backgroundImage+')'}"></div>
 
         <div class="login-overlay__logo">
-            <img ng-src="assets/img/application/logo.png" ng-srcset="assets/img/application/logo@2x.png 2x, assets/img/application/logo@3x.png 3x">
+            <img src="assets/img/application/umbraco_logo_white.svg">
         </div>
 
         <div ng-show="vm.invitedUser != null" class="umb-login-container">
@@ -37,11 +37,11 @@
                             <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
                             <span class="help-inline" ng-message="valCompare"><localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize></span>
                         </span>
-                        
+
                     </div>
 
                     <div class="flex justify-between items-center">
-                        <umb-button 
+                        <umb-button
                             type="submit"
                             button-style="success"
                             state="vm.invitedUserPasswordModel.buttonState"
@@ -58,7 +58,7 @@
 
                     <ng-form name="vm.avatarForm">
 
-                        <umb-progress-bar 
+                        <umb-progress-bar
                             style="max-width: 100px; margin-bottom: 5px;"
                             ng-show="vm.avatarFile.uploadStatus === 'uploading'"
                             progress="{{ vm.avatarFile.uploadProgress }}"
@@ -77,7 +77,7 @@
                             ngf-pattern="{{vm.avatarFile.acceptedFileTypes}}"
                             ngf-max-size="{{ vm.avatarFile.maxFileSize }}">
 
-                            <umb-avatar 
+                            <umb-avatar
                                 color="gray"
                                 size="xl"
                                 unknown-char="+"
@@ -94,7 +94,7 @@
                     <localize key="user_userinviteAvatarMessage"></localize>
                 </p>
                 <div class="flex justify-center items-center">
-                    <umb-button 
+                    <umb-button
                         type="button"
                         button-style="success"
                         label="Done"
@@ -102,7 +102,7 @@
                     </umb-button>
                 </div>
             </div>
-            
+
         </div>
         <div ng-show="vm.invitedUser == null && vm.inviteStep === 3" ng-if="vm.inviteStep === 3" class="umb-login-container">
             <div class="form">
@@ -169,7 +169,7 @@
                         </div>
 
                         <div class="flex justify-between items-center">
-                            <umb-button 
+                            <umb-button
                                 button-style="success"
                                 size="m"
                                 label-key="general_login"
@@ -261,4 +261,4 @@
             </div>
         </div>
     </div>
-</div>    
+</div>
diff --git a/src/Umbraco.Web.UI/Umbraco/assets/img/login.jpg b/src/Umbraco.Web.UI/Umbraco/assets/img/login.jpg
new file mode 100644
index 0000000000..06204510d0
Binary files /dev/null and b/src/Umbraco.Web.UI/Umbraco/assets/img/login.jpg differ
diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
index 1420063cd6..f647e1ae1e 100644
--- a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
+++ b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config
@@ -53,8 +53,8 @@
     <!-- These file types will not be allowed to be uploaded via the upload control for media and content -->
     <disallowedUploadFiles>ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess</disallowedUploadFiles>
 
-    <!-- You can specify your own background image for the login screen here. The image will automatically get an overlay to match back office colors - this path is relative to the ~/umbraco path. The default location is: /umbraco/assets/img/installer.jpg -->
-    <loginBackgroundImage>assets/img/installer.jpg</loginBackgroundImage>
+    <!-- You can specify your own background image for the login screen here. This path is relative to the ~/umbraco path. The default location is: /umbraco/assets/img/login.jpg -->
+    <loginBackgroundImage>assets/img/login.jpg</loginBackgroundImage>
 
   </content>
 
@@ -93,9 +93,9 @@
       @validateAlternativeTemplates
         By default you can add a altTemplate querystring or append a template name to the current URL which
         will make Umbraco render the content on the current page with the template you requested, for example:
-        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the 
-        "About Us" page with a template with the alias Home. Setting this setting to true will ensure that 
-        only templates that have been permitted on the document type will be allowed        
+        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
+        "About Us" page with a template with the alias Home. Setting this setting to true will ensure that
+        only templates that have been permitted on the document type will be allowed
       @disableFindContentByIdPath
         By default you can call any content Id in the url and show the content with that id, for example:
         http://mysite.com/1092 or http://mysite.com/1092.aspx would render the content with id 1092. Setting
diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config
index 1420063cd6..f647e1ae1e 100644
--- a/src/Umbraco.Web.UI/config/umbracoSettings.config
+++ b/src/Umbraco.Web.UI/config/umbracoSettings.config
@@ -53,8 +53,8 @@
     <!-- These file types will not be allowed to be uploaded via the upload control for media and content -->
     <disallowedUploadFiles>ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess</disallowedUploadFiles>
 
-    <!-- You can specify your own background image for the login screen here. The image will automatically get an overlay to match back office colors - this path is relative to the ~/umbraco path. The default location is: /umbraco/assets/img/installer.jpg -->
-    <loginBackgroundImage>assets/img/installer.jpg</loginBackgroundImage>
+    <!-- You can specify your own background image for the login screen here. This path is relative to the ~/umbraco path. The default location is: /umbraco/assets/img/login.jpg -->
+    <loginBackgroundImage>assets/img/login.jpg</loginBackgroundImage>
 
   </content>
 
@@ -93,9 +93,9 @@
       @validateAlternativeTemplates
         By default you can add a altTemplate querystring or append a template name to the current URL which
         will make Umbraco render the content on the current page with the template you requested, for example:
-        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the 
-        "About Us" page with a template with the alias Home. Setting this setting to true will ensure that 
-        only templates that have been permitted on the document type will be allowed        
+        http://mysite.com/about-us/?altTemplate=Home and http://mysite.com/about-us/Home would render the
+        "About Us" page with a template with the alias Home. Setting this setting to true will ensure that
+        only templates that have been permitted on the document type will be allowed
       @disableFindContentByIdPath
         By default you can call any content Id in the url and show the content with that id, for example:
         http://mysite.com/1092 or http://mysite.com/1092.aspx would render the content with id 1092. Setting