diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpasswordtoggle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpasswordtoggle.directive.js
new file mode 100644
index 0000000000..30cfaf88b2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpasswordtoggle.directive.js
@@ -0,0 +1,23 @@
+(function () {
+    'use strict';
+
+    function PasswordToggleDirective($compile) {
+
+        var directive = {
+            restrict: 'A',
+            scope: {},
+            link: function(scope, elem, attrs) {
+                scope.tgl = function () { elem.attr("type", (elem.attr("type") === "text" ? "password" : "text")); }
+                var lnk = angular.element("<a data-ng-click=\"tgl()\">Toggle</a>");
+                $compile(lnk)(scope);
+                elem.wrap("<div class=\"password-toggle\"/>").after(lnk);
+            }
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbPasswordToggle', PasswordToggleDirective);
+
+})();
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 924f9b20bb..2fe214bf07 100644
--- a/src/Umbraco.Web.UI.Client/src/less/pages/login.less
+++ b/src/Umbraco.Web.UI.Client/src/less/pages/login.less
@@ -66,7 +66,7 @@
     margin-bottom: auto;
 }
 
-.login-overlay .form input[type="text"], 
+.login-overlay .form input[type="text"],
 .login-overlay .form input[type="password"],
 .login-overlay .form input[type="email"] {
     height: 36px;
@@ -114,8 +114,44 @@
     line-height: 36px;
 }
 
-.login-overlay .text-error, 
-.login-overlay .text-info 
+.login-overlay .text-error,
+.login-overlay .text-info
 {
     font-weight:bold;
-} 
+}
+
+.password-toggle {
+    position: relative;
+    display: block;
+    user-select: none;
+
+    input::-ms-clear, input::-ms-reveal {
+        display: none;
+    }
+
+    a {
+        opacity: .5;
+        cursor: pointer;
+        display: inline-block;
+        position: absolute;
+        height: 1px;
+        width: 45px;
+        height: 75%;
+        font-size: 0;
+        background-repeat: no-repeat;
+        background-size: 50%;
+        background-position: center;
+        top: 0;
+        margin-left: -45px;
+        z-index: 1;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    [type="text"] + a {
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23444' d='M29.6.4C29 0 28 0 27.4.4L21 6.8c-1.4-.5-3-.8-5-.8C9 6 3 10 0 16c1.3 2.6 3 4.8 5.4 6.5l-5 5c-.5.5-.5 1.5 0 2 .3.4.7.5 1 .5s1 0 1.2-.4l27-27C30 2 30 1 29.6.4zM13 10c1.3 0 2.4 1 2.8 2L12 15.8c-1-.4-2-1.5-2-2.8 0-1.7 1.3-3 3-3zm-9.6 6c1.2-2 2.8-3.5 4.7-4.7l.7-.2c-.4 1-.6 2-.6 3 0 1.8.6 3.4 1.6 4.7l-2 2c-1.6-1.2-3-2.7-4-4.4zM24 13.8c0-.8 0-1.7-.4-2.4l-10 10c.7.3 1.6.4 2.4.4 4.4 0 8-3.6 8-8z'/%3E%3Cpath fill='%23444' d='M26 9l-2.2 2.2c2 1.3 3.6 3 4.8 4.8-1.2 2-2.8 3.5-4.7 4.7-2.7 1.5-5.4 2.3-8 2.3-1.4 0-2.6 0-3.8-.4L10 25c2 .6 4 1 6 1 7 0 13-4 16-10-1.4-2.8-3.5-5.2-6-7z'/%3E%3C/svg%3E");
+    }
+
+    [type="password"] + a {
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23444' d='M16 6C9 6 3 10 0 16c3 6 9 10 16 10s13-4 16-10c-3-6-9-10-16-10zm8 5.3c1.8 1.2 3.4 2.8 4.6 4.7-1.2 2-2.8 3.5-4.7 4.7-3 1.5-6 2.3-8 2.3s-6-.8-8-2.3C6 19.5 4 18 3 16c1.5-2 3-3.5 5-4.7l.6-.2C8 12 8 13 8 14c0 4.5 3.5 8 8 8s8-3.5 8-8c0-1-.3-2-.6-2.6l.4.3zM16 13c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3z'/%3E%3C/svg%3E");
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html
index 61d04d30fb..a1913d76e7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html
@@ -24,8 +24,8 @@
             </label>
             <input type="password" ng-model="invitedUserPasswordModel.password" name="password" class="-full-width-input" umb-auto-focus required val-server-field="value" autocomplete="off" ng-minlength="{{invitedUserPasswordModel.passwordPolicies.minPasswordLength}}" />
             <span class="help-inline" val-msg-for="password" val-toggle-msg="required"><localize key="user_passwordIsBlank">Your new password cannot be blank!</localize></span>
-            <span class="help-inline" val-msg-for="password" val-toggle-msg="minlength">Minimum {{invitedUserPasswordModel.passwordPolicies.minPasswordLength}} characters</span>    
-            <span class="help-inline" val-msg-for="password" val-toggle-msg="valServerField"></span>     
+            <span class="help-inline" val-msg-for="password" val-toggle-msg="minlength">Minimum {{invitedUserPasswordModel.passwordPolicies.minPasswordLength}} characters</span>
+            <span class="help-inline" val-msg-for="password" val-toggle-msg="valServerField"></span>
           </div>
 
           <div class="control-group" ng-class="{error: setPasswordForm.confirmPassword.$invalid}">
@@ -49,15 +49,15 @@
       <div class="form" ng-if="inviteStep === 2">
 
         <div class="flex justify-center items-center">
-          
+
           <ng-form name="avatarForm">
-            
+
             <umb-progress-bar style="max-width: 100px; margin-bottom: 5px;"
                               ng-show="avatarFile.uploadStatus === 'uploading'"
                               progress="{{ avatarFile.uploadProgress }}"
                               size="s">
             </umb-progress-bar>
-            
+
             <div class="umb-info-local-item text-error mt3" ng-if="avatarFile.uploadStatus === 'error'">
               {{ avatarFile.serverErrorMessage }}
             </div>
@@ -69,7 +69,7 @@
                  ngf-multiple="false"
                  ngf-pattern="{{avatarFile.acceptedFileTypes}}"
                  ngf-max-size="{{ avatarFile.maxFileSize }}">
-                  
+
                   <umb-avatar color="gray"
                               size="xl"
                               unknown-char="+"
@@ -77,7 +77,7 @@
                               img-srcset="{{invitedUser.avatars[4]}} 2x, {{invitedUser.avatars[4]}} 3x">
                   </umb-avatar>
               </a>
-            
+
           </ng-form>
         </div>
 
@@ -149,7 +149,7 @@
 
             <div class="control-group" ng-class="{error: loginForm.password.$invalid}">
               <label><localize key="general_password">Password</localize></label>
-              <input type="password" ng-model="password" name="password" class="-full-width-input" localize="placeholder" placeholder="@placeholders_password" autocomplete="off" />
+              <input type="password" ng-model="password" name="password" class="-full-width-input" localize="placeholder" placeholder="@placeholders_password" autocomplete="off" umb-password-toggle />
             </div>
 
             <div class="flex justify-between items-center">