diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 3baef7c22e..40e5d0d1d7 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -140,6 +140,9 @@ export class HaDateRangePicker extends LitElement {
     return css`
       ha-svg-icon {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
+        direction: var(--direction);
       }
 
       .date-range-inputs {
@@ -166,6 +169,9 @@ export class HaDateRangePicker extends LitElement {
 
       ha-textfield:last-child {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
+        direction: var(--direction);
       }
 
       @media only screen and (max-width: 800px) {
diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts
index b3dc414f1e..a4f3817508 100644
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -133,6 +133,9 @@ class HaExpansionPanel extends LitElement {
       .summary-icon {
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
         margin-left: auto;
+        margin-inline-start: auto;
+        margin-inline-end: initial;
+        direction: var(--direction);
       }
 
       .summary-icon.expanded {
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index d279ba1f28..8b2b2ad4b5 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -336,6 +336,9 @@ export class HAFullCalendar extends LitElement {
 
         .today {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
 
         .prev,
diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts
index ac3862380c..e757705acd 100644
--- a/src/panels/calendar/ha-panel-calendar.ts
+++ b/src/panels/calendar/ha-panel-calendar.ts
@@ -194,10 +194,13 @@ class PanelCalendar extends LitElement {
 
         .calendar-list {
           padding-right: 16px;
+          padding-inline-end: 16px;
+          padding-inline-start: initial;
           min-width: 170px;
           flex: 0 0 15%;
           overflow: hidden;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
+          direction: var(--direction);
         }
 
         .calendar-list > div {
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index a0c91ec175..8f88903446 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -248,7 +248,6 @@ class HaPanelDevTemplate extends LitElement {
 
         .content {
           padding: 16px;
-          direction: ltr;
         }
 
         .edit-pane {
@@ -280,6 +279,7 @@ class HaPanelDevTemplate extends LitElement {
           white-space: pre-wrap;
           background-color: var(--secondary-background-color);
           padding: 8px;
+          direction: ltr;
         }
 
         .all_listeners {
diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts
index 88e9dda30d..a1c4554990 100644
--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@@ -259,11 +259,17 @@ class HaPanelHistory extends LitElement {
 
         ha-date-range-picker {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
           max-width: 100%;
+          direction: var(--direction);
         }
 
         :host([narrow]) ha-date-range-picker {
           margin-right: 0;
+          margin-inline-end: 0;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
 
         ha-circular-progress {
diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts
index f3cce456ba..7a64a8dbe8 100644
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@@ -252,11 +252,17 @@ export class HaPanelLogbook extends LitElement {
 
         ha-date-range-picker {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
           max-width: 100%;
+          direction: var(--direction);
         }
 
         :host([narrow]) ha-date-range-picker {
           margin-right: 0;
+          margin-inline-end: 0;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
 
         .filters {
diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts
index bc2ea2169d..f4aab0b5ea 100644
--- a/src/panels/media-browser/ha-bar-media-player.ts
+++ b/src/panels/media-browser/ha-bar-media-player.ts
@@ -595,6 +595,7 @@ export class BarMediaPlayer extends LitElement {
         align-items: center;
         justify-content: center;
         flex-direction: column;
+        direction: ltr;
       }
 
       .progress {