diff --git a/dashboard/src/components/PublicPageLayout.vue b/dashboard/src/components/PublicPageLayout.vue
index 4e0f0e0ab..aca93107e 100644
--- a/dashboard/src/components/PublicPageLayout.vue
+++ b/dashboard/src/components/PublicPageLayout.vue
@@ -2,7 +2,7 @@
 
 import { API_ORIGIN } from '../constants.js';
 
-const props = defineProps({
+defineProps({
   footerHtml: {
     type: String,
     default: '',
@@ -15,47 +15,62 @@ const props = defineProps({
   <div class="public-page-layout">
     <div class="public-page-layout-root">
       <div class="public-page-layout-left pankow-no-mobile" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
-        <img width="128" height="128" class="cloudron-avatar" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
+        <img class="cloudron-avatar" width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
       </div>
 
       <div class="public-page-layout-right">
-        <img class="public-page-layout-mobile-logo cloudron-avatar" width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
-        <slot></slot>
+        <div class="public-page-layout-mobile-logo">
+          <img class="cloudron-avatar" width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
+        </div>
+        <div class="public-page-layout-right-slot">
+          <slot></slot>
+        </div>
       </div>
     </div>
 
-    <footer v-show="footerHtml" v-html="footerHtml"></footer>
+    <div class="footer" v-show="footerHtml" v-html="footerHtml"></div>
   </div>
 </template>
 
-<style>
+<style scoped>
 
-.public-page-layout-button-bar {
-  margin-top: 12px;
-  display: flex;
-  flex-direction: row;
-  gap: 6px;
-  align-items: center;
+.footer {
+  display: block;
+  width: 100%;
+  font-size: 10px;
+  text-align: left;
+  position: fixed;
+  bottom: 0;
+  color: var(--pankow-text-color);
+  background-color: transparent;
+  padding-left: 20px;
+  text-shadow: var(--pankow-text-color) 0px 0 5px;
 }
 
 @media (max-width: 576px) {
-  .public-page-layout-button-bar {
-    flex-direction: column;
+  .footer {
+    background-color: white;
+    text-align: center;
+    text-shadow: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .footer {
+      background-color: black;
+    }
   }
 }
 
-</style>
-
-<style scoped>
+.footer > .p {
+  margin: 4px;
+}
 
 .public-page-layout {
   height: 100%;
-  overflow: hidden;
 }
 
 .public-page-layout-root {
   display: flex;
-  flex-grow: 1;
   overflow: hidden;
   height: 100%;
 }
@@ -77,16 +92,24 @@ const props = defineProps({
 }
 
 .public-page-layout-right {
-  padding-left: 20px;
   flex-basis: 70%;
   display: flex;
   flex-direction: column;
   overflow: auto;
-  justify-content: center;
+  justify-content: space-around;
+  padding-left: 20px;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.public-page-layout-right-slot {
+  max-width: 400px;
 }
 
 .cloudron-avatar {
   border-radius: 10px;
+  width: 128px;
+  height: 128px;
 }
 
 .public-page-layout-mobile-logo {
@@ -99,18 +122,21 @@ const props = defineProps({
   }
 
   .public-page-layout-right {
-    text-align: center;
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
-    padding-left: 10px;
-    padding-right: 10px;
+    max-width: unset;
+    padding-left: 20px;
+    padding-right: 20px;
+    justify-content: start;
     flex-basis: unset;
-    align-items: center;
-    justify-content: center;
     gap: 20px;
   }
+
+  .public-page-layout-right-slot {
+    max-width: unset;
+  }
 }
 
 </style>
diff --git a/dashboard/src/components/SetupAccount.vue b/dashboard/src/components/SetupAccount.vue
index 39956868e..bd59139eb 100644
--- a/dashboard/src/components/SetupAccount.vue
+++ b/dashboard/src/components/SetupAccount.vue
@@ -4,6 +4,7 @@ import { ref, onMounted } from 'vue';
 import { marked } from 'marked';
 import { Button, PasswordInput, FormGroup, TextInput, fetcher } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
+import PublicPageLayout from '../components/PublicPageLayout.vue';
 import ProfileModel from '../models/ProfileModel.js';
 
 const profileModel = ProfileModel.create();
@@ -103,14 +104,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <!-- TODO mobile layout -->
-  <div class="layout-root" v-if="ready">
-    <div class="layout-left" :style="{ 'background-image': `url('${API_ORIGIN}/api/v1/cloudron/background')` }">
-      <img width="128" height="128" class="icon" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
-    </div>
-
-    <div class="layout-right">
-
+  <PublicPageLayout :footerHtml="footer">
+    <div>
       <div v-if="mode === MODE.SETUP">
         <small>{{ $t('setupAccount.welcomeTo') }}</small>
         <h1>{{ cloudronName }}</h1>
@@ -185,9 +180,7 @@ onMounted(async () => {
         <Button :href="dashboardUrl">{{ $t('setupAccount.success.openDashboardAction') }}</Button>
       </div>
     </div>
-  </div>
-
-  <footer v-show="footer" v-html="footer"></footer>
+  </PublicPageLayout>
 </template>
 
 <style>
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index acde0357e..892daca23 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -73,19 +73,6 @@ hr {
   border-top: 1px solid rgb(238.425,238.425,238.425);
 }
 
-footer {
-  display: block;
-  width: 100%;
-  font-size: 10px;
-  text-align: center;
-  position: fixed;
-  bottom: 0;
-}
-
-footer > .p {
-  margin: 4px;
-}
-
 .content {
   max-width: 1280px;
   width: 100%;
diff --git a/dashboard/src/views/LoginView.vue b/dashboard/src/views/LoginView.vue
index e9f6e7bfb..6bff6ffb7 100644
--- a/dashboard/src/views/LoginView.vue
+++ b/dashboard/src/views/LoginView.vue
@@ -2,7 +2,6 @@
 
 import { ref, onMounted } from 'vue';
 import { Button, PasswordInput, TextInput, fetcher, FormGroup } from 'pankow';
-import { API_ORIGIN } from '../constants.js';
 import PublicPageLayout from '../components/PublicPageLayout.vue';
 
 const ready = ref(false);
@@ -87,7 +86,7 @@ onMounted(async () => {
 
 <template>
   <PublicPageLayout :footerHtml="footer">
-    <div v-if="ready" style="max-width: 300px;">
+    <div v-if="ready">
       <small>{{ $t('login.loginTo') }}</small>
       <h1>{{ name }}</h1>
       <br/>
@@ -110,8 +109,8 @@ onMounted(async () => {
           <div class="has-error" v-if="passwordError">{{ $t('login.errorIncorrectCredentials') }}</div>
           <div class="has-error" v-if="internalError">{{ $t('login.errorInternal') }}</div>
 
-          <div class="public-page-layout-button-bar">
-            <Button id="loginSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
+          <div style="margin-top: 20px">
+            <Button style="margin-right: 6px" id="loginSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
             <a href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
           </div>
         </fieldset>
diff --git a/dashboard/src/views/PasswordResetView.vue b/dashboard/src/views/PasswordResetView.vue
index baaa6a74d..cecb60eb5 100644
--- a/dashboard/src/views/PasswordResetView.vue
+++ b/dashboard/src/views/PasswordResetView.vue
@@ -109,7 +109,7 @@ onMounted(async () => {
 
 <template>
   <PublicPageLayout :footerHtml="footer">
-    <div v-if="ready" style="max-width: 300px;">
+    <div v-if="ready">
 
       <div v-if="mode === MODE.RESET_PASSWORD">
         <small>{{ $t('passwordReset.title') }}</small>
@@ -123,8 +123,8 @@ onMounted(async () => {
             <TextInput id="inputPasswordResetIdentifier" name="passwordResetIdentifier" v-model="passwordResetIdentifier" :disabled="busy" autofocus required />
           </FormGroup>
 
-          <div class="public-page-layout-button-bar">
-            <Button @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
+          <div style="margin-top: 20px">
+            <Button style="margin-right: 6px" @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
             <a href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
           </div>
         </form>