diff --git a/src/common/navigate.ts b/src/common/navigate.ts
index 657bbbf528..e8505ca3d4 100644
--- a/src/common/navigate.ts
+++ b/src/common/navigate.ts
@@ -12,12 +12,16 @@ declare global {
 export const navigate = (_node: any, path: string, replace = false) => {
   if (__DEMO__) {
     if (replace) {
-      history.replaceState(null, "", `${location.pathname}#${path}`);
+      history.replaceState(
+        history.state?.root ? { root: true } : null,
+        "",
+        `${location.pathname}#${path}`
+      );
     } else {
       window.location.hash = path;
     }
   } else if (replace) {
-    history.replaceState(null, "", path);
+    history.replaceState(history.state?.root ? { root: true } : null, "", path);
   } else {
     history.pushState(null, "", path);
   }
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 9b6d0406a6..780fdb068b 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -89,15 +89,12 @@ class HassSubpage extends LitElement {
         box-sizing: border-box;
       }
 
+      ha-menu-button,
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {
         pointer-events: auto;
       }
 
-      ha-icon-button-arrow-prev.hidden {
-        visibility: hidden;
-      }
-
       .main-title {
         margin: 0 0 0 24px;
         line-height: 20px;
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index fa0f873966..23c599e613 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -140,7 +140,7 @@ class HassTabsSubpage extends LitElement {
     const showTabs = tabs.length > 1 || !this.narrow;
     return html`
       <div class="toolbar">
-        ${this.mainPage || history.state?.root
+        ${this.mainPage || (!this.backPath && history.state?.root)
           ? html`
               <ha-menu-button
                 .hassio=${this.supervisor}
@@ -289,8 +289,10 @@ class HassTabsSubpage extends LitElement {
       }
 
       :host([narrow]) .content.tabs {
-        height: calc(100% - 128px);
-        height: calc(100% - 128px - env(safe-area-inset-bottom));
+        height: calc(100% - 2 * var(--header-height));
+        height: calc(
+          100% - 2 * var(--header-height) - env(safe-area-inset-bottom)
+        );
       }
 
       #fab {
diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js
index cbe717df16..ae3d8823ca 100644
--- a/src/panels/config/cloud/account/cloud-account.js
+++ b/src/panels/config/cloud/account/cloud-account.js
@@ -62,7 +62,11 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
           color: var(--primary-color);
         }
       </style>
-      <hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
+      <hass-subpage
+        hass="[[hass]]"
+        narrow="[[narrow]]"
+        header="Home Assistant Cloud"
+      >
         <div class="content">
           <ha-config-section is-wide="[[isWide]]">
             <span slot="header">Home Assistant Cloud</span>
@@ -167,6 +171,7 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
     return {
       hass: Object,
       isWide: Boolean,
+      narrow: Boolean,
       cloudStatus: Object,
       _subscription: {
         type: Object,
diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
index d6e39ed4c7..46b45c9022 100644
--- a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
+++ b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
@@ -47,6 +47,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </style>
       <hass-subpage
         hass="[[hass]]"
+        narrow="[[narrow]]"
         header="[[localize('ui.panel.config.cloud.forgot_password.title')]]"
       >
         <div class="content">
@@ -84,6 +85,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get properties() {
     return {
       hass: Object,
+      narrow: Boolean,
       email: {
         type: String,
         notify: true,
diff --git a/src/panels/config/cloud/ha-config-cloud.ts b/src/panels/config/cloud/ha-config-cloud.ts
index c62aa80cb3..f3ad9778a6 100644
--- a/src/panels/config/cloud/ha-config-cloud.ts
+++ b/src/panels/config/cloud/ha-config-cloud.ts
@@ -128,6 +128,7 @@ class HaConfigCloud extends HassRouterPage {
         hass: this.hass,
         email: this._loginEmail,
         isWide: this.isWide,
+        narrow: this.narrow,
         cloudStatus: this.cloudStatus,
         flashMessage: this._flashMessage,
       });
diff --git a/src/panels/config/cloud/login/cloud-login.js b/src/panels/config/cloud/login/cloud-login.js
index e1ad4aceee..19c06f6d51 100644
--- a/src/panels/config/cloud/login/cloud-login.js
+++ b/src/panels/config/cloud/login/cloud-login.js
@@ -85,7 +85,11 @@ class CloudLogin extends LocalizeMixin(
           align-self: flex-end;
         }
       </style>
-      <hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
+      <hass-subpage
+        hass="[[hass]]"
+        narrow="[[narrow]]"
+        header="Home Assistant Cloud"
+      >
         <div class="content">
           <ha-config-section is-wide="[[isWide]]">
             <span slot="header">Home Assistant Cloud</span>
@@ -186,6 +190,7 @@ class CloudLogin extends LocalizeMixin(
     return {
       hass: Object,
       isWide: Boolean,
+      narrow: Boolean,
       email: {
         type: String,
         notify: true,
diff --git a/src/panels/config/cloud/register/cloud-register.js b/src/panels/config/cloud/register/cloud-register.js
index 8071ec8058..b07a19d2f5 100644
--- a/src/panels/config/cloud/register/cloud-register.js
+++ b/src/panels/config/cloud/register/cloud-register.js
@@ -47,7 +47,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
         display: none;
       }
     </style>
-    <hass-subpage hass="[[hass]]" header="[[localize('ui.panel.config.cloud.register.title')]]">
+    <hass-subpage hass="[[hass]]" narrow="[[narrow]]" header="[[localize('ui.panel.config.cloud.register.title')]]">
       <div class="content">
         <ha-config-section is-wide="[[isWide]]">
           <span slot="header">[[localize('ui.panel.config.cloud.register.headline')]]</span>
@@ -100,6 +100,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return {
       hass: Object,
       isWide: Boolean,
+      narrow: Boolean,
       email: {
         type: String,
         notify: true,
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
index 37dd1d6bbc..81765c1810 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@@ -68,6 +68,7 @@ export class ZHAAddGroupPage extends LitElement {
     return html`
       <hass-subpage
         .hass=${this.hass}
+        .narrow=${this.narrow}
         .header=${this.hass.localize("ui.panel.config.zha.groups.create_group")}
       >
         <ha-config-section .isWide=${!this.narrow}>
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
index ae6b89f928..7bf78650ea 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
@@ -103,7 +103,11 @@ export class ZHAGroupPage extends LitElement {
     }
 
     return html`
-      <hass-subpage .hass=${this.hass} .header=${this.group.name}>
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .header=${this.group.name}
+      >
         <ha-icon-button
           slot="toolbar-icon"
           icon="hass:delete"
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
index 6cbe4e77be..382f53e0c4 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
@@ -135,6 +135,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
     return html`
       <hass-subpage
         .hass=${this.hass}
+        .narrow=${this.narrow}
         .header=${this.hass.localize(
           "ui.panel.config.zha.visualization.header"
         )}