diff --git a/src/common/util/compute_rtl.ts b/src/common/util/compute_rtl.ts
index b5bebfbc7d..723878e7ed 100644
--- a/src/common/util/compute_rtl.ts
+++ b/src/common/util/compute_rtl.ts
@@ -34,10 +34,6 @@ export function setDirectionStyles(direction: string, element: LitElement) {
     "--float-end",
     direction === "ltr" ? "right" : "left"
   );
-  element.style.setProperty(
-    "--margin-title",
-    direction === "ltr" ? "var(--margin-title-ltr)" : "var(--margin-title-rtl)"
-  );
   element.style.setProperty(
     "--scale-direction",
     direction === "ltr" ? "1" : "-1"
diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts
index 9cf9214e70..4481c42f54 100644
--- a/src/components/ha-top-app-bar-fixed.ts
+++ b/src/components/ha-top-app-bar-fixed.ts
@@ -42,9 +42,12 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
       }
       .mdc-top-app-bar__title {
         font-size: var(--ha-font-size-xl);
-        padding-inline-start: 24px;
+        padding-inline-start: var(--ha-space-6);
         padding-inline-end: initial;
       }
+      :host([narrow]) .mdc-top-app-bar__title {
+        padding-inline-start: var(--ha-space-2);
+      }
     `,
   ];
 }
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index a7ac562877..d70abda6f4 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -1,6 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
@@ -27,7 +28,7 @@ class HassSubpage extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="toolbar">
+      <div class="toolbar ${classMap({ narrow: this.narrow })}">
         <div class="toolbar-content">
           ${this.mainPage || history.state?.root
             ? html`
@@ -132,7 +133,7 @@ class HassSubpage extends LitElement {
         }
 
         .main-title {
-          margin: var(--margin-title);
+          margin-inline-start: var(--ha-space-6);
           line-height: var(--ha-line-height-normal);
           min-width: 0;
           flex-grow: 1;
@@ -143,6 +144,9 @@ class HassSubpage extends LitElement {
           overflow: hidden;
           text-overflow: ellipsis;
         }
+        .narrow .main-title {
+          margin-inline-start: var(--ha-space-2);
+        }
 
         .content {
           position: relative;
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 0951fedff2..9c6a913353 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -131,7 +131,7 @@ class HassTabsSubpage extends LitElement {
     );
     const showTabs = tabs.length > 1;
     return html`
-      <div class="toolbar">
+      <div class="toolbar ${classMap({ narrow: this.narrow })}">
         <slot name="toolbar">
           <div class="toolbar-content">
             ${this.mainPage || (!this.backPath && history.state?.root)
@@ -320,7 +320,10 @@ class HassTabsSubpage extends LitElement {
           max-height: var(--header-height);
           line-height: var(--ha-line-height-normal);
           color: var(--sidebar-text-color);
-          margin: var(--main-title-margin, var(--margin-title));
+          margin-inline-start: var(--main-title-margin, var(--ha-space-6));
+        }
+        .narrow .main-title {
+          margin-inline-start: var(--main-title-margin, var(--ha-space-2));
         }
 
         .content {
diff --git a/src/panels/app/ha-panel-app.ts b/src/panels/app/ha-panel-app.ts
index 2410c24f70..6a1cd7a2fb 100644
--- a/src/panels/app/ha-panel-app.ts
+++ b/src/panels/app/ha-panel-app.ts
@@ -3,6 +3,7 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
@@ -116,7 +117,7 @@ class HaPanelApp extends LitElement {
       ${!this._kioskMode &&
       (this.narrow || this.hass.dockedSidebar === "always_hidden")
         ? html`
-            <div class="header">
+            <div class="header ${classMap({ narrow: this.narrow })}">
               <ha-icon-button
                 .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
                 .path=${mdiMenu}
@@ -452,10 +453,13 @@ class HaPanelApp extends LitElement {
     }
 
     .main-title {
-      margin: var(--margin-title);
+      margin-inline-start: var(--ha-space-6);
       line-height: var(--ha-line-height-condensed);
       flex-grow: 1;
     }
+    .narrow .main-title {
+      margin-inline-start: var(--ha-space-2);
+    }
 
     ha-icon-button {
       pointer-events: auto;
diff --git a/src/panels/climate/ha-panel-climate.ts b/src/panels/climate/ha-panel-climate.ts
index d74eeda58f..9b162239a2 100644
--- a/src/panels/climate/ha-panel-climate.ts
+++ b/src/panels/climate/ha-panel-climate.ts
@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -12,8 +13,8 @@ import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
-import "../lovelace/views/hui-view-container";
 import "../lovelace/views/hui-view-background";
+import "../lovelace/views/hui-view-container";
 
 const CLIMATE_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
   strategy: {
@@ -95,7 +96,7 @@ class PanelClimate extends LitElement {
 
   protected render() {
     return html`
-      <div class="header">
+      <div class="header ${classMap({ narrow: this.narrow })}">
         <div class="toolbar">
           ${
             this._searchParms.has("historyBack")
@@ -225,10 +226,13 @@ class PanelClimate extends LitElement {
           padding: 0 4px;
         }
         .main-title {
-          margin: var(--margin-title);
+          margin-inline-start: var(--ha-space-6);
           line-height: var(--ha-line-height-normal);
           flex-grow: 1;
         }
+        .narrow .main-title {
+          margin-inline-start: var(--ha-space-2);
+        }
         hui-view-container {
           position: relative;
           display: flex;
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index c80cb163c5..c248ed6864 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -2,6 +2,7 @@ import { mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { goBack, navigate } from "../../common/navigate";
 import "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
@@ -30,7 +31,7 @@ class PanelDeveloperTools extends LitElement {
   protected render(): TemplateResult {
     const page = this._page;
     return html`
-      <div class="header">
+      <div class="header ${classMap({ narrow: this.narrow })}">
         <div class="toolbar">
           <ha-icon-button-arrow-prev
             slot="navigationIcon"
@@ -188,10 +189,13 @@ class PanelDeveloperTools extends LitElement {
           padding: var(--ha-space-1);
         }
         .main-title {
-          margin: var(--margin-title);
+          margin-inline-start: var(--ha-space-6);
           line-height: var(--ha-line-height-normal);
           flex-grow: 1;
         }
+        .narrow .main-title {
+          margin-inline-start: var(--ha-space-2);
+        }
         developer-tools-router {
           display: block;
           padding-top: calc(
diff --git a/src/panels/light/ha-panel-light.ts b/src/panels/light/ha-panel-light.ts
index 46b279729a..58dfe00424 100644
--- a/src/panels/light/ha-panel-light.ts
+++ b/src/panels/light/ha-panel-light.ts
@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -95,7 +96,7 @@ class PanelLight extends LitElement {
 
   protected render() {
     return html`
-      <div class="header">
+      <div class="header ${classMap({ narrow: this.narrow })}">
         <div class="toolbar">
           ${
             this._searchParms.has("historyBack")
@@ -225,10 +226,13 @@ class PanelLight extends LitElement {
           padding: 0 4px;
         }
         .main-title {
-          margin: var(--margin-title);
+          margin-inline-start: var(--ha-space-6);
           line-height: var(--ha-line-height-normal);
           flex-grow: 1;
         }
+        .narrow .main-title {
+          margin-inline-start: var(--ha-space-2);
+        }
         hui-view-container {
           position: relative;
           display: flex;
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 5b9e035c70..1b74de0d78 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -1364,7 +1364,7 @@ class HUIRoot extends LitElement {
           padding: 0 4px;
         }
         .main-title {
-          margin: var(--margin-title);
+          margin-inline-start: var(--ha-space-6);
           line-height: var(--ha-line-height-normal);
           flex-grow: 1;
           text-overflow: ellipsis;
@@ -1373,8 +1373,7 @@ class HUIRoot extends LitElement {
           min-width: 0;
         }
         .narrow .main-title {
-          margin: 0;
-          margin-inline-start: 8px;
+          margin-inline-start: var(--ha-space-2);
         }
         .action-items {
           white-space: nowrap;
diff --git a/src/panels/security/ha-panel-security.ts b/src/panels/security/ha-panel-security.ts
index a9421083cf..0d071374ff 100644
--- a/src/panels/security/ha-panel-security.ts
+++ b/src/panels/security/ha-panel-security.ts
@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -95,7 +96,7 @@ class PanelSecurity extends LitElement {
 
   protected render() {
     return html`
-      <div class="header">
+      <div class="header ${classMap({ narrow: this.narrow })}">
         <div class="toolbar">
           ${
             this._searchParms.has("historyBack")
@@ -225,10 +226,13 @@ class PanelSecurity extends LitElement {
           padding: 0 4px;
         }
         .main-title {
-          margin: var(--margin-title);
+          margin-inline-start: var(--ha-space-6);
           line-height: var(--ha-line-height-normal);
           flex-grow: 1;
         }
+        .narrow .main-title {
+          margin-inline-start: var(--ha-space-2);
+        }
         hui-view-container {
           position: relative;
           display: flex;