diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index e809d1510f..f9904646e4 100644
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
diff --git a/landing-page/src/html/index.html.template b/landing-page/src/html/index.html.template
index 2f2211c490..11c5e19a18 100644
--- a/landing-page/src/html/index.html.template
+++ b/landing-page/src/html/index.html.template
@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;
diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template
index 657e23e548..37d955f7bd 100644
--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@@ -35,6 +35,7 @@
         align-items: center;
         justify-content: center;
         margin-bottom: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {
diff --git a/src/html/index.html.template b/src/html/index.html.template
index 86031ce67b..de2609563b 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -44,7 +44,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index 8cd8ac0540..cc9855b9eb 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;
@@ -32,6 +33,7 @@
         justify-content: flex-start;
         margin-bottom: 32px;
         margin-left: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index 16656921c8..bb63275b84 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -146,6 +146,8 @@ export class HomeAssistantMain extends LitElement {
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       --mdc-drawer-width: 56px;
       --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
+      --safe-area-content-inset-left: 0px;
+      --safe-area-content-inset-right: var(--safe-area-inset-right);
     }
     :host([expanded]) {
       --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
@@ -153,6 +155,7 @@ export class HomeAssistantMain extends LitElement {
     :host([modal]) {
       --mdc-drawer-width: unset;
       --mdc-top-app-bar-width: unset;
+      --safe-area-content-inset-left: var(--safe-area-inset-left);
     }
     partial-panel-resolver,
     ha-sidebar {