diff --git a/dashboard/src/components/PublicPageLayout.vue b/dashboard/src/components/PublicPageLayout.vue
index 235b53f23..b8e2936b9 100644
--- a/dashboard/src/components/PublicPageLayout.vue
+++ b/dashboard/src/components/PublicPageLayout.vue
@@ -12,10 +12,9 @@ const props = defineProps({
 </script>
 
 <template>
-  <!-- TODO mobile layout -->
   <div class="public-page-layout">
     <div class="public-page-layout-root">
-      <div class="public-page-layout-left" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
+      <div class="public-page-layout-left pankow-no-mobile" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
         <img width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
       </div>
 
@@ -24,18 +23,28 @@ const props = defineProps({
       </div>
     </div>
 
-    <div class="public-page-layout-root-mobile" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
-      <img width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
-
-      <div class="public-page-layout-content">
-        <slot></slot>
-      </div>
-    </div>
-
     <footer v-show="footerHtml" v-html="footerHtml"></footer>
   </div>
 </template>
 
+<style>
+
+.public-page-layout-button-bar {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  align-items: center;
+}
+
+@media (max-width: 576px) {
+  .public-page-layout-button-bar {
+    flex-direction: column;
+  }
+}
+
+</style>
+
 <style scoped>
 
 .public-page-layout {
@@ -75,47 +84,20 @@ const props = defineProps({
   justify-content: center;
 }
 
-.public-page-layout-root-mobile {
-  display: none;
-}
-
 @media (max-width: 576px) {
-  .public-page-layout-root {
-    display: none;
-  }
-
-  .public-page-layout-root-mobile {
+  .public-page-layout-right {
+    text-align: center;
     display: flex;
-    background-color: rgba(0,0,0,0.1);
-    background-size: cover;
-    background-position: center;
     flex-direction: column;
     height: 100%;
+    width: 100%;
+    padding-left: 10px;
+    padding-right: 10px;
+    flex-basis: unset;
     align-items: center;
     justify-content: center;
     gap: 20px;
   }
-
-  .public-page-layout-root-mobile > img {
-    border-radius: 10px;
-  }
-
-  .public-page-layout-content {
-    display: flex;
-    text-align: center;
-    padding: 20px;
-    background-color: rgba(255,255,255,0.3);
-    filter: drop-shadow(0px 0px 14px white);
-    border-radius: 10px;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .public-page-layout-content {
-      background-color: rgba(0,0,0,0.3);
-      filter: drop-shadow(0px 0px 14px black);
-      border-radius: 10px;
-    }
-  }
 }
 
 </style>
diff --git a/dashboard/src/views/LoginView.vue b/dashboard/src/views/LoginView.vue
index b6780401d..4c5665e80 100644
--- a/dashboard/src/views/LoginView.vue
+++ b/dashboard/src/views/LoginView.vue
@@ -109,8 +109,10 @@ onMounted(async () => {
           <PasswordInput id="inputPassword" v-model="password" required/>
         </FormGroup>
 
-        <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>
+        <div class="public-page-layout-button-bar">
+          <Button id="loginSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
+          <a href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
+        </div>
       </form>
 
       <form @submit.prevent="onSubmit" v-if="totpTokenRequired" autocomplete="off">
diff --git a/dashboard/src/views/PasswordResetView.vue b/dashboard/src/views/PasswordResetView.vue
index 74102b8dc..baaa6a74d 100644
--- a/dashboard/src/views/PasswordResetView.vue
+++ b/dashboard/src/views/PasswordResetView.vue
@@ -123,8 +123,10 @@ onMounted(async () => {
             <TextInput id="inputPasswordResetIdentifier" name="passwordResetIdentifier" v-model="passwordResetIdentifier" :disabled="busy" autofocus required />
           </FormGroup>
 
-          <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>
+          <div class="public-page-layout-button-bar">
+            <Button @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
+            <a href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
+          </div>
         </form>
       </div>
 
@@ -161,8 +163,10 @@ onMounted(async () => {
             <p class="has-error" v-if="error.totpToken">{{ error.totpToken }}</p>
           </FormGroup>
 
-          <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>
+          <div class="public-page-layout-button-bar">
+            <Button @click="onNewPassword()" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
+            <a href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
+          </div>
         </form>
       </div>