diff --git a/dashboard/src/components/PublicPageLayout.vue b/dashboard/src/components/PublicPageLayout.vue
index 25995eabc..235b53f23 100644
--- a/dashboard/src/components/PublicPageLayout.vue
+++ b/dashboard/src/components/PublicPageLayout.vue
@@ -16,7 +16,7 @@ const props = defineProps({
   <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')` }">
-        <img width="128" height="128" style="margin-bottom: 20%;" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
+        <img width="128" height="128" :src="`${API_ORIGIN}/api/v1/cloudron/avatar`"/>
       </div>
 
       <div class="public-page-layout-right">
@@ -24,6 +24,14 @@ 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>
@@ -53,6 +61,11 @@ const props = defineProps({
   align-items: center;
 }
 
+.public-page-layout-left img {
+  margin-bottom: 20%;
+  border-radius: 10px;
+}
+
 .public-page-layout-right {
   padding-left: 20px;
   flex-basis: 70%;
@@ -62,4 +75,47 @@ 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 {
+    display: flex;
+    background-color: rgba(0,0,0,0.1);
+    background-size: cover;
+    background-position: center;
+    flex-direction: column;
+    height: 100%;
+    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>