diff --git a/dashboard/login.html b/dashboard/login.html
index 6c494865e..7411a3fb4 100644
--- a/dashboard/login.html
+++ b/dashboard/login.html
@@ -6,9 +6,8 @@
 
     <title>##NAME##</title>
 
-    <link id="favicon" type="image/png" rel="icon" href="##ICON_URL##">
-    <link rel="apple-touch-icon" href="##ICON_URL##">
     <link rel="icon" href="##ICON_URL##">
+    <link rel="apple-touch-icon" href="##ICON_URL##">
 
     <style>
       @media (prefers-color-scheme: dark) {
diff --git a/dashboard/oidc_interaction_abort.html b/dashboard/oidc_interaction_abort.html
index 926f89375..5640586b5 100644
--- a/dashboard/oidc_interaction_abort.html
+++ b/dashboard/oidc_interaction_abort.html
@@ -6,9 +6,8 @@
 
     <title>Authorize ##NAME##</title>
 
-    <link id="favicon" type="image/png" rel="icon" href="/api/v1/cloudron/avatar">
-    <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
     <link rel="icon" href="/api/v1/cloudron/avatar">
+    <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
 
     <script type="module" src="./src/style.js"></script>
 
diff --git a/dashboard/oidc_interaction_confirm.html b/dashboard/oidc_interaction_confirm.html
index ce48336a7..74ecda912 100644
--- a/dashboard/oidc_interaction_confirm.html
+++ b/dashboard/oidc_interaction_confirm.html
@@ -6,7 +6,8 @@
 
     <title>Authorize ##NAME##</title>
 
-    <link id="favicon" type="image/png" rel="icon" href="/api/v1/cloudron/avatar">
+    <link rel="icon" href="/api/v1/cloudron/avatar">
+    <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
 
   </head>
 <body>
diff --git a/dashboard/passwordreset.html b/dashboard/passwordreset.html
index 3bd88b708..e6bb084c3 100644
--- a/dashboard/passwordreset.html
+++ b/dashboard/passwordreset.html
@@ -1,165 +1,28 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
 
-  <!-- this gets changed once we get the status (because angular has not loaded yet, we see template string for a flash) -->
-  <title>Cloudron Password Reset</title>
-  <meta name="description" content="Cloudron Password Reset">
+    <title>Cloudron Password Reset</title>
 
-  <link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
+    <link rel="icon" href="/api/v1/cloudron/avatar">
+    <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
 
-  <!-- contains all thing already using import statement -->
-  <script type="module" src="./src/modules.js"></script>
+    <style>
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: black;
+        }
+      }
+    </style>
 
-  <!-- Theme CSS -->
-  <link type="text/css" rel="stylesheet" href="./src/theme.scss">
+    <script type="module" src="./src/style.js"></script>
+  </head>
 
-  <!-- jQuery-->
-  <script type="text/javascript" src="/js/jquery.min.js"></script>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/passwordreset.js"></script>
+  </body>
 
-  <!-- async -->
-  <script type="text/javascript" src="/js/async-3.2.0.min.js"></script>
-
-  <!-- Showdown (markdown converter) -->
-  <script type="text/javascript" src="/js/showdown-1.9.1.min.js"></script>
-
-  <!-- Angularjs scripts -->
-  <script type="text/javascript" src="/js/angular.min.js"></script>
-  <script type="text/javascript" src="/js/angular-loader.min.js"></script>
-  <script type="text/javascript" src="/js/angular-cookies.min.js"></script>
-
-  <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
-  <script type="text/javascript" src="/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
-
-  <!-- Angular translate https://angular-translate.github.io/ -->
-  <script type="text/javascript" src="/js/angular-translate.min.js"></script>
-  <script type="text/javascript" src="/js/angular-translate-loader-static-files.min.js"></script>
-  <script type="text/javascript" src="/js/angular-translate-storage-cookie.min.js"></script>
-  <script type="text/javascript" src="/js/angular-translate-storage-local.min.js"></script>
-
-  <!-- Setup Application -->
-  <script type="text/javascript" src="/js/passwordreset.js?%VITE_CACHE_ID%"></script>
-  <script type="text/javascript" src="/js/utils.js?%VITE_CACHE_ID%"></script>
-
-</head>
-
-<body ng-app="Application" ng-controller="PasswordResetController">
-
-<div class="layout-root ng-cloak" ng-show="initialized">
-
-  <div class="layout-content" ng-show="mode === 'passwordReset'">
-    <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="/api/v1/cloudron/avatar"/>
-          <br/>
-          <h2>{{ 'passwordReset.title' | tr }}</h2>
-        </div>
-      </div>
-      <br/>
-      <div class="row">
-        <div class="col-md-12">
-          <form name="passwordResetForm" ng-submit="onPasswordReset()">
-            <div class="form-group">
-              <label class="control-label" for="inputPasswordResetIdentifier">{{ 'passwordReset.usernameOrEmail' | tr }}</label>
-              <input type="text" class="form-control" id="inputPasswordResetIdentifier" name="passwordResetIdentifier" ng-model="passwordResetIdentifier" ng-disabled="busy" autofocus required>
-            </div>
-            <br/>
-            <div class="card-form-bottom-bar">
-              <a href="/" class="hand">{{ 'passwordReset.backToLoginAction' | tr }}</a>
-              <button class="btn btn-primary btn-outline" type="submit" ng-disabled="busy || passwordResetForm.$invalid"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> {{ 'passwordReset.resetAction' | tr }}</button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="layout-content" ng-show="mode === 'passwordResetDone'">
-    <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="/api/v1/cloudron/avatar"/>
-          <br/>
-          <h2 ng-hide="error">{{ 'passwordReset.emailSent.title' | tr }}</h2>
-          <h4 ng-show="error" class="has-error">{{ error }}</h4>
-          <br/>
-          <a href="/" class="btn btn-primary">{{ 'passwordReset.backToLoginAction' | tr }}</a>
-        </div>
-      </div>
-    </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="/api/v1/cloudron/avatar"/>
-          <br/>
-          <h2>{{ 'passwordReset.newPassword.title' | tr }}</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">{{ 'passwordReset.newPassword.password' | tr }}</label>
-              <div class="control-label" ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
-                <small ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">{{ 'passwordReset.newPassword.errorLength' | tr }}</small>
-              </div>
-              <input type="password" class="form-control" id="inputNewPassword" ng-model="newPassword" name="newPassword" ng-minlength="8" ng-maxlength="256" autofocus required password-reveal>
-            </div>
-            <div class="form-group" ng-class="{ 'has-error': newPasswordForm.newPasswordRepeat.$dirty && (newPassword !== newPasswordRepeat) }">
-              <label class="control-label" for="inputNewPasswordRepeat">{{ 'passwordReset.newPassword.passwordRepeat' | tr }}</label>
-              <div class="control-label" ng-show="newPasswordForm.newPasswordRepeat.$dirty && (newPassword !== newPasswordRepeat)">
-                <small ng-show="newPasswordForm.newPasswordRepeat.$dirty && (newPassword !== newPasswordRepeat)">{{ 'passwordReset.newPassword.errorMismatch' | tr }}</small>
-              </div>
-              <input type="password" class="form-control" id="inputNewPasswordRepeat" ng-model="newPasswordRepeat" name="newPasswordRepeat" required password-reveal>
-            </div>
-            <div class="form-group">
-              <label class="control-label" for="inputPasswordResetTotpToken">{{ 'login.2faToken' | tr }}</label>
-              <input type="text" class="form-control" name="passwordResetTotpToken" id="inputPasswordResetTotpToken" ng-model="totpToken" ng-disabled="busy" value="">
-            </div>
-            <div class="card-form-bottom-bar">
-              <a href="/" class="hand">{{ 'passwordReset.backToLoginAction' | tr }}</a>
-              <button class="btn btn-primary btn-outline" type="submit" ng-disabled="busy || newPasswordForm.$invalid || newPassword !== newPasswordRepeat"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> {{ 'passwordReset.passwordChanged.submitAction' | tr }}</button>
-            </div>
-          </form>
-        </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="/api/v1/cloudron/avatar"/>
-          <br/>
-          <h2>{{ 'passwordReset.success.title' | tr }}</h2>
-          <br/>
-          <a href="/" class="btn btn-primary">{{ 'passwordReset.success.openDashboardAction' | tr }}</a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <footer class="text-center">
-    <span class="text-muted" ng-bind-html="branding.footer | markdown2html"></span>
-  </footer>
-
-</div>
-
-</body>
 </html>
-
diff --git a/dashboard/src/components/Login.vue b/dashboard/src/components/Login.vue
index 6fa0b2d3c..6c08e5374 100644
--- a/dashboard/src/components/Login.vue
+++ b/dashboard/src/components/Login.vue
@@ -9,8 +9,11 @@
       <br/>
       <div :html="note"></div>
 
+      <p class="has-error" v-show="passwordError">{{ $t('login.errorIncorrectCredentials') }}</p>
+      <p class="has-error" v-show="internalError">{{ $t('login.errorInternal') }}</p>
+
       <form @submit.prevent="onSubmit" v-show="!totpTokenRequired">
-        <button type="submit" style="display: none;"></button>
+        <input type="submit" style="display: none;"/>
 
         <div class="form-element">
           <label for="inputUsername">{{ $t('login.username') }}</label>
@@ -20,16 +23,14 @@
         <div class="form-element">
           <label for="inputPassword">{{ $t('login.password') }}</label>
           <PasswordInput id="inputPassword" v-model="password" required/>
-          <p class="has-error" v-show="passwordError">{{ $t('login.errorIncorrectCredentials') }}</p>
-          <p class="has-error" v-show="internalError">{{ $t('login.errorInternal') }}</p>
         </div>
 
-        <Button id="loginSubmitButton" style="margin-top: 12px" type="submit" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
+        <Button id="loginSubmitButton" style="margin-top: 12px" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
         <a href="/passwordreset.html" style="margin-left: 10px;">{{ $t('login.resetPasswordAction') }}</a>
       </form>
 
       <form @submit.prevent="onSubmit" v-show="totpTokenRequired">
-        <button type="submit" style="display: none;"></button>
+        <input type="submit" style="display: none;"/>
 
         <div class="form-element">
           <label for="inputTotpToken">{{ $t('login.2faToken') }}</label>
diff --git a/dashboard/src/components/PasswordReset.vue b/dashboard/src/components/PasswordReset.vue
new file mode 100644
index 000000000..c98530048
--- /dev/null
+++ b/dashboard/src/components/PasswordReset.vue
@@ -0,0 +1,213 @@
+<template>
+
+  <div class="layout-root">
+    <div class="layout-left">
+      <img width="128" height="128" class="icon" :src="'/api/v1/cloudron/avatar'"/>
+    </div>
+
+    <div class="layout-right">
+
+      <div v-show="mode === 'passwordReset'">
+        <h2>{{ $t('passwordReset.title') }}</h2>
+
+        <form name="passwordResetForm" @submit.prevent="onPasswordReset()">
+          <input type="submit" style="display: none;"/>
+
+          <div class="form-element">
+            <label for="inputPasswordResetIdentifier">{{ $t('passwordReset.usernameOrEmail') }}</label>
+            <TextInput id="inputPasswordResetIdentifier" name="passwordResetIdentifier" v-model="passwordResetIdentifier" :disabled="busy" autofocus required />
+          </div>
+
+          <Button style="margin-top: 12px" @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
+          <a href="/" style="margin-left: 10px;">{{ $t('passwordReset.backToLoginAction') }}</a>
+        </form>
+      </div>
+
+      <div v-show="mode === 'passwordResetDone'">
+        <h2 v-show="!error">{{ $t('passwordReset.emailSent.title') }}</h2>
+        <h4 v-show="error" class="has-error">{{ error }}</h4>
+        <Button href="/">{{ $t('passwordReset.backToLoginAction') }}</Button>
+      </div>
+
+      <div v-show="mode === 'newPassword'">
+        <h2>{{ $t('passwordReset.newPassword.title') }}</h2>
+
+        <p class="has-error" v-show="error">{{ error }}</p>
+
+        <form name="newPasswordForm" @submit.prevent="onNewPassword()">
+          <input type="submit" style="display: none;"/>
+          <input type="password" style="display: none;"/>
+
+          <div class="form-element" :class="{'has-error': newPasswordRepeat && newPassword !== newPasswordRepeat}">
+            <label for="inputNewPassword">{{ $t('passwordReset.newPassword.password') }}</label>
+            <PasswordInput id="inputNewPassword" v-model="newPassword" autofocus required />
+          </div>
+
+          <div class="form-element" :class="{'has-error': newPasswordRepeat && newPassword !== newPasswordRepeat}">
+            <label for="inputNewPasswordRepeat">{{ $t('passwordReset.newPassword.passwordRepeat') }}</label>
+            <PasswordInput id="inputNewPasswordRepeat" v-model="newPasswordRepeat" required />
+          </div>
+
+          <div class="form-element">
+            <label for="inputPasswordResetTotpToken">{{ $t('login.2faToken') }}</label>
+            <TextInput id="inputPasswordResetTotpToken" v-model="totpToken" :disabled="busy" />
+          </div>
+
+          <Button style="margin-top: 12px" @click="onNewPassword()" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
+          <a href="/" style="margin-left: 10px;">{{ $t('passwordReset.backToLoginAction') }}</a>
+        </form>
+      </div>
+
+      <div v-show="mode === 'newPasswordDone'">
+        <h2>{{ $t('passwordReset.success.title') }}</h2>
+        <Button href="/">{{ $t('passwordReset.success.openDashboardAction') }}</Button>
+      </div>
+    </div>
+  </div>
+
+  <footer v-show="footer" v-html="footer"></footer>
+</template>
+
+<script>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+import { marked } from 'marked';
+import { Button, PasswordInput, TextInput, fetcher } from 'pankow';
+
+export default {
+  name: 'PasswordReset',
+  components: {
+    Button,
+    PasswordInput,
+    TextInput
+  },
+  data() {
+    return {
+      ready: false,
+      busy: false,
+      error: '',
+      footer: '',
+      mode: '',
+      resetToken: '',
+      passwordResetIdentifier: '',
+      newPassword: '',
+      newPasswordRepeat: '',
+      totpToken: ''
+    };
+  },
+  async mounted() {
+    const 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; }, {});
+
+    try {
+      const res = await fetcher.get(`${API_ORIGIN}/api/v1/auth/branding`);
+      this.footer = marked.parse(res.body.footer);
+    } catch (error) {
+      console.error('Failed to get branding info.', error);
+    }
+
+    // Init into the correct view
+    if (search.resetToken) {
+      this.resetToken = search.resetToken;
+      window.document.title = 'Set New Password';
+      this.mode = 'newPassword';
+      setTimeout(() => document.getElementById('inputNewPassword').focus(), 200);
+    } else if (search.accessToken || search.access_token) { // auto-login feature
+      localStorage.token = search.accessToken || search.access_token;
+      window.location.href = '/';
+    } else { // also search.passwordReset
+      window.document.title = 'Password Reset Request';
+      this.mode = 'passwordReset';
+      this.passwordResetIdentifier = '';
+      setTimeout(() => document.getElementById('inputPasswordResetIdentifier').focus(), 200);
+    }
+
+    this.ready = true;
+  },
+  methods: {
+    async onPasswordReset() {
+      this.busy = true;
+
+      try {
+        await fetcher.post(`${API_ORIGIN}/api/v1/auth/password_reset_request`, { identifier: this.passwordResetIdentifier });
+      } catch (error) {
+        console.error('Failed to reset password.', error);
+      }
+
+      this.busy = 'false';
+      this.mode = 'passwordResetDone';
+    },
+    async onNewPassword() {
+      this.busy = true;
+
+      const data = {
+        resetToken: this.resetToken,
+        password: this.newPassword,
+        totpToken: this.totpToken
+      };
+
+      try {
+        const res = await fetcher.post(`${API_ORIGIN}/api/v1/auth/password_reset`, data);
+        if (res.status === 400 || res.status === 401) {
+          this.error = res.body.message;
+          this.newPasswordRepeat = '';
+        } else if (res.status === 409) {
+          this.error = 'Ask your admin for an invite link first';
+        } else if (res.status === 202) {
+          // set token to autologin
+          localStorage.token = data.accessToken;
+          this.mode = 'newPasswordDone';
+        }
+      } catch (error) {
+        console.error('Failed to set new password.', error);
+      }
+
+      this.busy = false;
+    }
+  }
+};
+
+</script>
+
+<style>
+
+.icon {
+  margin-bottom: 20%;
+}
+
+.layout-root {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+  height: 100%;
+}
+
+.layout-left {
+  background-color: rgba(0,0,0,0.1);
+  background-image: url('/api/v1/cloudron/background');
+  background-size: cover;
+  background-position: center;
+  flex-basis: 30%;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+}
+
+.layout-right {
+  padding-left: 20px;
+  flex-basis: 70%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  justify-content: center;
+}
+
+.form-element {
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+</style>
+
diff --git a/dashboard/src/passwordreset.js b/dashboard/src/passwordreset.js
new file mode 100644
index 000000000..8d2fc613f
--- /dev/null
+++ b/dashboard/src/passwordreset.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+
+import i18n from './i18n.js';
+import PasswordReset from './components/PasswordReset.vue';
+
+(async function init() {
+  const app = createApp(PasswordReset);
+
+  app.use(await i18n());
+
+  app.mount('#app');
+})();
