diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 10859151c8..2dd0979543 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -1,6 +1,15 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
 import { restoreScroll } from "../common/decorators/restore-scroll";
+import { toggleAttribute } from "../common/dom/toggle_attribute";
+import { computeRTL } from "../common/util/compute_rtl";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import { HomeAssistant } from "../types";
@@ -24,6 +33,14 @@ class HassSubpage extends LitElement {
   // @ts-ignore
   @restoreScroll(".content") private _savedScrollPos?: number;
 
+  protected willUpdate(changedProps: PropertyValues): void {
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.locale !== this.hass.locale) {
+      toggleAttribute(this, "rtl", computeRTL(this.hass));
+    }
+    super.willUpdate(changedProps);
+  }
+
   protected render(): TemplateResult {
     return html`
       <div class="toolbar">