diff --git a/dashboard/login.html b/dashboard/login.html
index 45b91a28e..657a166c0 100644
--- a/dashboard/login.html
+++ b/dashboard/login.html
@@ -18,9 +18,6 @@
       }
     </style>
 
-    <!-- Theme CSS -->
-    <link type="text/css" rel="stylesheet" href="/theme.css">
-
     <script>
       window.cloudron = {};
       window.cloudron.name = '##NAME##';
@@ -29,6 +26,7 @@
       window.cloudron.iconUrl = '##ICON_URL##';
       window.cloudron.footer = `##FOOTER##`;
     </script>
+
   </head>
   <body>
     <div id="app"></div>
diff --git a/dashboard/src/components/Login.vue b/dashboard/src/components/Login.vue
index 13a3fd8f6..348443fab 100644
--- a/dashboard/src/components/Login.vue
+++ b/dashboard/src/components/Login.vue
@@ -1,67 +1,71 @@
 <template>
-  <div class="layout-root hide">
-    <div class="layout-content">
-      <div class="card">
-        <div class="row">
-          <div class="col-md-12" style="text-align: center;">
-            <img width="128" height="128" class="avatar" :src="iconUrl"/>
-            <br/>
-            <small>{{ $t('login.loginTo') }}</small>
-            <h1>{{ name }}</h1>
-          </div>
-        </div>
-        <br/>
-        <div class="row">
-          <div class="col-md-12">
-            <div :html="note"></div>
-            <form @submit.prevent="onSubmit">
-              <button type="submit" style="display: none;"></button>
-              <div class="form-group">
-                <label class="control-label" for="inputUsername">{{ $t('login.username') }}</label>
-                <input type="text" class="form-control" id="inputUsername" :model="username" autofocus required>
-              </div>
-              <div class="form-group">
-                <label class="control-label" for="inputPassword">{{ $t('login.password') }}</label>
-                <input type="password" class="form-control" :model="password" id="inputPassword" required password-reveal>
-                <p class="has-error" v-show="passwordError">{{ $t('login.errorIncorrectCredentials') }}</p>
-                <p class="has-error" v-show="internalError">{{ $t('login.errorInternal') }}</p>
-              </div>
-              <div class="form-group">
-                <label class="control-label" for="inputTotpToken">{{ $t('login.2faToken') }}</label>
-                <input type="text" class="form-control" :model="totpToken" id="inputTotpToken">
-                <p class="has-error" v-show="totpError">{{ $t('login.errorIncorrect2FAToken') }}</p>
-              </div>
-              <div class="card-form-bottom-bar">
-                <a href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
-                <Button id="loginSubmitButton" type="submit" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
+  <div class="layout-root" v-show="ready">
+    <div class="layout-left">
+      <img width="128" height="128" class="icon" :src="iconUrl"/>
     </div>
+    <div class="layout-right">
+      <small>{{ $t('login.loginTo') }}</small>
+      <h1>{{ name }}</h1>
+      <br/>
+      <div :html="note"></div>
 
-    <footer class="text-center">
-      <span class="text-muted" :html="footer"></span>
-    </footer>
+      <form @submit.prevent="onSubmit" v-show="!totpTokenRequired">
+        <button type="submit" style="display: none;"></button>
+
+        <div class="form-element">
+          <label for="inputUsername">{{ $t('login.username') }}</label>
+          <TextInput id="inputUsername" v-model="username" autofocus required/>
+        </div>
+
+        <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>
+        <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>
+
+        <div class="form-element">
+          <label for="inputTotpToken">{{ $t('login.2faToken') }}</label>
+          <TextInput id="inputTotpToken" v-model="totpToken"/>
+          <p class="has-error" v-show="totpError">{{ $t('login.errorIncorrect2FAToken') }}</p>
+        </div>
+
+        <Button id="totpTokenSubmitButton" style="margin-top: 12px" type="submit" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
+      </form>
+    </div>
   </div>
+
+  <footer v-show="footer">
+    <span v-html="footer"></span>
+  </footer>
 </template>
 
 <script>
 
-import { Button } from 'pankow';
+import { Button, PasswordInput, TextInput, fetcher } from 'pankow';
 
 export default {
   name: 'Login',
   components: {
-    Button
+    Button,
+    PasswordInput,
+    TextInput
   },
   data() {
     return {
+      ready: false,
       busy: false,
       username: '',
       password: '',
       totpToken: '',
+      totpTokenRequired: false,
       // coming from login.html template
       name: window.cloudron.name,
       note: window.cloudron.note,
@@ -70,12 +74,27 @@ export default {
       submitUrl: window.cloudron.submitUrl
     };
   },
+  async mounted() {
+    // placed optionally in local storage by setupaccount.js
+    const autoLoginToken = localStorage.cloudronFirstTimeToken;
+    if (autoLoginToken) {
+      try {
+        const res = await fetch.post(this.submitUrl, { autoLoginToken });
+        localStorage.removeItem('cloudronFirstTimeToken');
+
+        if (res.body.redirectTo) window.location.href = res.body.redirectTo;
+        else console.log('login success but missing redirectTo in data:', res.body);
+      } catch (error) {
+        console.error('Failed to use autologin token', error);
+      }
+    }
+
+    this.ready = true;
+  },
   methods: {
     async onSubmit() {
       this.busy = true;
 
-      console.log('-----submit')
-
       this.passwordError = false;
       this.totpError = false;
       this.internalError = false;
@@ -86,98 +105,32 @@ export default {
         totpToken: this.totpToken
       };
 
-      let res;
-      fetch(this.submitUrl, {
-        method: 'POST',
-        body: JSON.stringify(body),
-        headers: { 'Content-type': 'application/json; charset=UTF-8' }
-      }).then(function (response) {
-        res = response;
-        return res.json(); // we always return objects
-      }).then((data) => {
+      try {
+        const res = await fetcher.post(this.submitUrl, body);
         if (res.status === 410) {
           // the oidc login session is old
           window.location.reload();
         } else if (res.status === 401) {
-          if (data.message.indexOf('totpToken') !== -1) {
+          if (res.body.message.indexOf('totpToken') !== -1) {
+            this.totpError = this.totpTokenRequired; // only set on second try coming from login
+            this.totpTokenRequired = true;
             this.totpToken = '';
-            this.totpError = true;
-            document.getElementById('inputTotpToken').focus();
+            setTimeout(() => document.getElementById('inputTotpToken').focus(), 0);
           } else {
-            this.password.value = '';
+            this.password = '';
             this.passwordError = true;
             document.getElementById('inputPassword').focus();
           }
-
-          return;
-        } else if (res.status !== 200) {
-          throw new Error('Something went wrong');
         }
 
-        if (data.redirectTo) window.location.href = data.redirectTo;
-        else console.log('login success but missing redirectTo in data:', data);
-      }).catch((error) => {
+        if (res.body.redirectTo) window.location.href = res.body.redirectTo;
+        else console.log('login success but missing redirectTo in data:', res.body);
+      } catch (error) {
         this.internalError = true;
-        console.warn(error, res);
-      }).finally(() => {
-        this.busy = false;
-      });
-    }
-  },
-  async mounted() {
-    var svgEye = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" class="svg-inline--fa fa-eye fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg>';
-    var svgEyeSlash = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye-slash" class="svg-inline--fa fa-eye-slash fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path></svg>';
+        console.error('Login failed:', error);
+      }
 
-    document.querySelectorAll('[password-reveal]').forEach(function (element) {
-        var eye = document.createElement('i');
-        eye.innerHTML = svgEyeSlash;
-        eye.style.width = '18px';
-        eye.style.height = '18px';
-        eye.style.position = 'relative';
-        eye.style.float = 'right';
-        eye.style.marginTop = '-24px';
-        eye.style.marginRight = '10px';
-        eye.style.cursor = 'pointer';
-
-        eye.addEventListener('click', function () {
-            if (element.type === 'password') {
-                element.type = 'text';
-                eye.innerHTML = svgEye;
-            } else {
-                element.type = 'password';
-                eye.innerHTML = svgEyeSlash;
-            }
-        });
-
-        element.parentNode.style.position = 'relative';
-        element.parentNode.insertBefore(eye, element.nextSibling);
-    });
-
-    // placed in local storage by setupaccount.js
-    const autoLoginToken = localStorage.cloudronFirstTimeToken;
-    if (autoLoginToken) {
-        const apiUrl = this.submitUrl;
-
-        let res;
-        fetch(apiUrl, {
-            method: 'POST',
-            body: JSON.stringify({ autoLoginToken }),
-            headers: { 'Content-type': 'application/json; charset=UTF-8' }
-        }).then(function (res) {
-            localStorage.removeItem('cloudronFirstTimeToken');
-            return res.json(); // we always return objects
-        }).then(function (data) {
-            if (data.redirectTo) window.location.href = data.redirectTo;
-            else console.log('login success but missing redirectTo in data:', data);
-        }).catch(function (error) {
-            document.getElementsByClassName('layout-root')[0].classList.remove('hide');
-            localStorage.removeItem('cloudronFirstTimeToken');
-            document.getElementById('internalError').classList.remove('hide');
-            document.getElementById('busyIndicator').classList.add('hide');
-            console.warn(error, res);
-        });
-    } else {
-      document.getElementsByClassName('layout-root')[0].classList.remove('hide');
+      this.busy = false;
     }
   }
 };
@@ -186,74 +139,54 @@ export default {
 
 <style>
 
-  body {
-    background-image: url('/api/v1/cloudron/background');
-    background-size: cover;
-    background-position: center;
-  }
+#app {
+  display: flex;
+  flex-direction: column;
+}
 
-  .card {
-    padding: 20px;
-    margin-bottom: 0;
-    max-width: 620px;
-    min-height: 100%;
-  }
+.icon {
+  margin-bottom: 20%;
+}
 
-  .avatar {
-    margin-top: 20px;
-  }
+.layout-root {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+}
 
-  @media(min-width:620px) {
-    .card {
-      margin-bottom: 15px;
-      margin-top: 100px;
-      min-height: auto;
-    }
+.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;
+}
 
-    .avatar {
-      margin-top: -84px
-    }
-  }
+.layout-right {
+  padding-left: 20px;
+  flex-basis: 70%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  justify-content: center;
+}
 
-  .hide {
-    display: none;
-  }
+.form-element {
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+}
 
-  #busyIndicator {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    border: 1px solid rgba(255,255,255,.3);
-    border-radius: 50%;
-    border-top-color: #fff;
-    animation: spin 1s ease-in-out infinite;
-    margin-right: 5px;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-
-  .btn {
-    display: flex;
-    align-items: center;
-  }
-
-  h1 {
-    padding: 0;
-    margin-top: 10px;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    line-height: 1.5;
-  }
-
-  small {
-    display: block;
-    margin-top: 25px;
-    color: #777777;
-    font-size: 20px;
-    font-family: "Noto Sans Light", Helvetica, Arial, sans-serif;
-  }
+footer {
+  display: block;
+  width: 100%;
+  font-size: 10px;
+  text-align: center;
+}
 
 </style>
 
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 9fb0ceb76..2ffa39556 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -5,7 +5,7 @@ html, body {
   width: 100%;
   padding: 0;
   margin: 0;
-  background-color: #e5e5e5;
+  background-color: white;
   color: var(--pankow-text-color);
 }
 
