diff --git a/src/js/login.js b/src/js/login.js
index 52300f0d2..f674a0b84 100644
--- a/src/js/login.js
+++ b/src/js/login.js
@@ -10,15 +10,26 @@ app.controller('LoginController', ['$scope', '$http', function ($scope, $http) {
     var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.indexOf('=') === -1 ? [item, true] : [item.slice(0, item.indexOf('=')), item.slice(item.indexOf('=')+1)]; }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
 
     $scope.initialized = false;
-    $scope.mode = search.passwordReset ? 'passwordReset' : 'login';
+    $scope.mode = '';
     $scope.busy = false;
     $scope.error = false;
     $scope.username = '';
     $scope.password = '';
     $scope.totpToken = '';
     $scope.passwordResetIdentifier = '';
+    $scope.newPassword = '';
+    $scope.newPasswordRepeat = '';
     var API_ORIGIN = '<%= oauth.apiOrigin %>' || window.location.origin;
 
+    if (search.passwordReset) {
+        $scope.mode = 'passwordReset';
+    } else if (search.resetToken) {
+        $scope.mode = 'newPassword';
+        setTimeout(function () { $('#inputNewPassword').focus(); }, 200);
+    } else {
+        $scope.mode = 'login';
+    }
+
     $scope.onLogin = function () {
         $scope.busy = true;
         $scope.error = false;
@@ -58,7 +69,36 @@ app.controller('LoginController', ['$scope', '$http', function ($scope, $http) {
             $scope.mode = 'passwordResetDone';
         }
 
-        $http.post(API_ORIGIN + '/api/v1/cloudron/password_reset', data).success(done).error(done);
+        $http.post(API_ORIGIN + '/api/v1/cloudron/password_reset_request', data).success(done).error(done);
+    };
+
+    $scope.onNewPassword = function () {
+        $scope.busy = true;
+
+        var data = {
+            resetToken: search.resetToken,
+            password: $scope.newPassword
+        };
+
+        function error(status) {
+            console.log('error', status)
+            $scope.busy = false;
+
+            if (status === 401) $scope.error = 'Invalid reset token';
+            else if (status === 409) $scope.error = 'Ask your admin for an invite link first';
+            else $scope.error = 'Unknown error';
+        }
+
+        $http.post(API_ORIGIN + '/api/v1/cloudron/password_reset', data).success(function (data, status) {
+            if (status !== 202) return error(status);
+
+            // set token to autologin
+            localStorage.token = data.accessToken;
+
+            $scope.mode = 'newPasswordDone';
+        }).error(function (data, status) {
+            error(status);
+        });
     };
 
     $scope.showPasswordReset = function () {
diff --git a/src/login.html b/src/login.html
index 72bb543e8..2eec5148c 100644
--- a/src/login.html
+++ b/src/login.html
@@ -96,7 +96,7 @@
               <input type="text" class="form-control" id="inputPasswordResetIdentifier" name="passwordResetIdentifier" ng-model="passwordResetIdentifier" ng-disabled="busy" autofocus required>
             </div>
             <br/>
-            <button class="btn btn-primary btn-outline pull-right" type="submit" value="Reset" ng-disabled="busy || passwordResetForm.$invalid"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> Reset</button>
+            <button class="btn btn-primary btn-outline pull-right" type="submit" ng-disabled="busy || passwordResetForm.$invalid"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> Reset</button>
           </form>
           <a ng-href="" class="hand" ng-click="showLogin()">Back to login</a>
         </div>
@@ -118,6 +118,63 @@
     </div>
   </div>
 
+  <div class="layout-content" ng-show="mode === 'newPassword'">
+    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
+      <div class="row">
+        <div class="col-md-12" style="text-align: center;">
+          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
+          <br/>
+          <h2>Set new Password</h2>
+        </div>
+      </div>
+      <br/>
+      <div class="row">
+        <div class="col-md-12">
+          <h4 class="has-error" ng-show="error">{{ error }}</h4>
+        </div>
+      </div>
+      <br/>
+      <div class="row">
+        <div class="col-md-12">
+          <form name="newPasswordForm" ng-submit="onNewPassword()">
+            <input type="password" style="display: none;"/>
+            <div class="form-group" ng-class="{ 'has-error': newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid }">
+              <label class="control-label" for="inputNewPassword">New Password</label>
+              <div class="control-label" ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
+                <small ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">Password must be atleast 8 characters</small>
+              </div>
+              <input type="password" class="form-control" id="inputNewPassword" ng-model="newPassword" name="newPassword" ng-pattern="/^.{8,30}$/" autofocus required>
+            </div>
+            <div class="form-group" ng-class="{ 'has-error': newPasswordForm.newPasswordRepeat.$dirty && (newPassword !== newPasswordRepeat) }">
+              <label class="control-label" for="inputNewPasswordRepeat">Repeat Password</label>
+              <div class="control-label" ng-show="newPasswordForm.newPasswordRepeat.$dirty && (newPassword !== newPasswordRepeat)">
+                <small ng-show="newPasswordForm.newPasswordRepeat.$dirty && (newPassword !== newPasswordRepeat)">Passwords don't match</small>
+              </div>
+              <input type="password" class="form-control" id="inputNewPasswordRepeat" ng-model="newPasswordRepeat" name="newPasswordRepeat" required>
+            </div>
+            <br/>
+            <button class="btn btn-primary btn-outline pull-right" type="submit" ng-disabled="busy || newPasswordForm.$invalid || newPassword !== newPasswordRepeat"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> Submit</button>
+          </form>
+          <a ng-href="" class="hand" ng-click="showLogin()">Back to login</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="layout-content" ng-show="mode === 'newPasswordDone'">
+    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
+      <div class="row">
+        <div class="col-md-12" style="text-align: center;">
+          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
+          <br/>
+          <h2>New Password set</h2>
+          <br/>
+          <a href="/" class="btn btn-primary">Open Dashboard</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <footer class="text-center">
     <span class="text-muted">&copy; 2016-20 <a href="https://cloudron.io" target="_blank">Cloudron</a></span>
   </footer>