diff --git a/src/components/ha-drawer.ts b/src/components/ha-drawer.ts
index 45a54623d5..8887d722af 100644
--- a/src/components/ha-drawer.ts
+++ b/src/components/ha-drawer.ts
@@ -3,7 +3,6 @@ import { styles } from "@material/mwc-drawer/mwc-drawer.css";
 import { css, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { mainWindow } from "../common/dom/get_main_window";
 
 const blockingElements = (document as any).$blockingElements;
 
@@ -34,7 +33,8 @@ export class HaDrawer extends DrawerBase {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (changedProps.has("direction")) {
-      if (mainWindow.document.dir === "rtl") {
+      this.mdcRoot.dir = this.direction;
+      if (this.direction === "rtl") {
         this._rtlStyle = document.createElement("style");
         this._rtlStyle.innerHTML = `
           .mdc-drawer--animate {
diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts
index a1a15f8130..6a77edb730 100644
--- a/src/dialogs/notifications/notification-drawer.ts
+++ b/src/dialogs/notifications/notification-drawer.ts
@@ -14,6 +14,7 @@ import "./notification-item";
 import "../../components/ha-header-bar";
 import "../../components/ha-drawer";
 import type { HaDrawer } from "../../components/ha-drawer";
+import { computeRTLDirection } from "../../common/util/compute_rtl";
 
 @customElement("notification-drawer")
 export class HuiNotificationDrawer extends LitElement {
@@ -92,7 +93,12 @@ export class HuiNotificationDrawer extends LitElement {
     });
 
     return html`
-      <ha-drawer type="modal" open @MDCDrawer:closed=${this._dialogClosed}>
+      <ha-drawer
+        type="modal"
+        open
+        @MDCDrawer:closed=${this._dialogClosed}
+        .direction=${computeRTLDirection(this.hass)}
+      >
         <ha-header-bar>
           <div slot="title">
             ${this.hass.localize("ui.notification_drawer.title")}
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index 29963ac45d..b984910c50 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -15,6 +15,7 @@ import "../components/ha-drawer";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
+import { computeRTLDirection } from "../common/util/compute_rtl";
 
 declare global {
   // for fire event
@@ -61,6 +62,7 @@ export class HomeAssistantMain extends LitElement {
       <ha-drawer
         .type=${sidebarNarrow ? "modal" : ""}
         .open=${sidebarNarrow ? this._drawerOpen : undefined}
+        .direction=${computeRTLDirection(this.hass)}
         @MDCDrawer:closed=${this._drawerClosed}
       >
         <ha-sidebar