diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index c0166ddfa8..fb28ab211c 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -250,6 +250,18 @@ export class HaComboBox extends LitElement {
         top: -7px;
         right: 36px;
       }
+
+      :host-context([style*="direction: rtl;"]) .toggle-button {
+        left: 12px;
+        right: auto;
+        top: -10px;
+      }
+      :host-context([style*="direction: rtl;"]) .clear-button {
+        --mdc-icon-size: 20px;
+        top: -7px;
+        left: 36px;
+        right: auto;
+      }
     `;
   }
 }
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 693bae6367..3f33a4e349 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -98,6 +98,10 @@ export class HaDialog extends DialogBase {
         margin-left: 40px;
         margin-right: 0px;
       }
+      :host-context([style*="direction: rtl;"]) .dialog-actions {
+        left: 0px !important;
+        right: auto !important;
+      }
     `,
   ];
 }
diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index c2f58b8f0f..563ee32e32 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -1,5 +1,6 @@
 import { Fab } from "@material/mwc-fab";
 import { customElement } from "lit/decorators";
+import { css } from "lit";
 
 @customElement("ha-fab")
 export class HaFab extends Fab {
@@ -7,6 +8,17 @@ export class HaFab extends Fab {
     super.firstUpdated(changedProperties);
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }
+
+  static override styles = Fab.styles.concat([
+    css`
+      :host-context([style*="direction: rtl;"])
+        .mdc-fab--extended
+        .mdc-fab__icon {
+        margin-left: 12px !important;
+        margin-right: calc(12px - 20px) !important;
+      }
+    `,
+  ]);
 }
 
 declare global {
diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts
index 9c81a3f17a..6e90308ee4 100644
--- a/src/components/ha-file-upload.ts
+++ b/src/components/ha-file-upload.ts
@@ -176,10 +176,24 @@ export class HaFileUpload extends LitElement {
         .mdc-text-field__icon--leading {
           margin-bottom: 12px;
         }
+        :host-context([style*="direction: rtl;"])
+          .mdc-text-field__icon--leading {
+          margin-right: 0px;
+        }
         .mdc-text-field--filled .mdc-floating-label--float-above {
           transform: scale(0.75);
           top: 8px;
         }
+        :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+          left: initial;
+          right: 16px;
+        }
+        :host-context([style*="direction: rtl;"])
+          .mdc-text-field--filled
+          .mdc-floating-label {
+          left: initial;
+          right: 48px;
+        }
         .dragged:before {
           position: var(--layout-fit_-_position);
           top: var(--layout-fit_-_top);
diff --git a/src/components/ha-select.ts b/src/components/ha-select.ts
index b90133b8eb..148ffcd21d 100644
--- a/src/components/ha-select.ts
+++ b/src/components/ha-select.ts
@@ -47,6 +47,10 @@ export class HaSelect extends SelectBase {
       .mdc-select__anchor {
         width: var(--ha-select-min-width, 200px);
       }
+      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        right: 16px !important;
+        left: initial !important;
+      }
     `,
   ];
 }
diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts
index b1182779bb..825b828cd2 100644
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -616,6 +616,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         opacity: var(--light-disabled-opacity);
         pointer-events: none;
       }
+      :host-context([style*="direction: rtl;"]) .mdc-chip__icon {
+        margin-right: -14px !important;
+        margin-left: 4px !important;
+      }
     `;
   }
 }
diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index 3da39e1647..0e2c5a8cf8 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -91,6 +91,19 @@ export class HaTextField extends TextFieldBase {
       .mdc-text-field {
         overflow: var(--text-field-overflow);
       }
+
+      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        right: 10px !important;
+        left: initial !important;
+      }
+
+      :host-context([style*="direction: rtl;"])
+        .mdc-text-field--with-leading-icon.mdc-text-field--filled
+        .mdc-floating-label {
+        max-width: calc(100% - 48px);
+        right: 48px !important;
+        left: initial !important;
+      }
     `,
   ];
 }
diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index 18de3e81d9..023807a439 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -11,7 +11,6 @@ import {
 } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
-import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
 import "../../components/ha-icon-button";
@@ -261,7 +260,6 @@ class DataEntryFlowDialog extends LitElement {
                           <ha-icon-button
                             .label=${this.hass.localize("ui.common.help")}
                             .path=${mdiHelpCircle}
-                            ?rtl=${computeRTL(this.hass)}
                           >
                           </ha-icon-button
                         ></a>
@@ -273,7 +271,6 @@ class DataEntryFlowDialog extends LitElement {
                     )}
                     .path=${mdiClose}
                     dialogAction="close"
-                    ?rtl=${computeRTL(this.hass)}
                   ></ha-icon-button>
                 </div>
                 ${this._step === null
@@ -521,7 +518,7 @@ class DataEntryFlowDialog extends LitElement {
           top: 0;
           right: 0;
         }
-        .dialog-actions[rtl] {
+        :host-context([style*="direction: rtl;"]) .dialog-actions {
           right: auto;
           left: 0;
         }
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index 5ec2e499d8..1b0c8b4c1b 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -194,6 +194,10 @@ class StepFlowForm extends LitElement {
           word-break: break-word;
           padding-right: 72px;
         }
+        :host-context([style*="direction: rtl;"]) h2 {
+          padding-right: auto !important;
+          padding-left: 72px !important;
+        }
       `,
     ];
   }
diff --git a/src/dialogs/config-flow/step-flow-pick-flow.ts b/src/dialogs/config-flow/step-flow-pick-flow.ts
index 2296d465a0..1b7d401e8e 100644
--- a/src/dialogs/config-flow/step-flow-pick-flow.ts
+++ b/src/dialogs/config-flow/step-flow-pick-flow.ts
@@ -106,6 +106,10 @@ class StepFlowPickFlow extends LitElement {
         h2 {
           padding-right: 66px;
         }
+        :host-context([style*="direction: rtl;"]) h2 {
+          padding-right: auto !important;
+          padding-left: 66px !important;
+        }
         @media all and (max-height: 900px) {
           div {
             max-height: calc(100vh - 134px);
diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts
index e40158dd97..c71ccb338f 100644
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -313,6 +313,10 @@ class StepFlowPickHandler extends LitElement {
         h2 {
           padding-right: 66px;
         }
+        :host-context([style*="direction: rtl;"]) h2 {
+          padding-right: auto !important;
+          padding-left: 66px !important;
+        }
         @media all and (max-height: 900px) {
           mwc-list {
             max-height: calc(100vh - 134px);
diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
index 40e9b4764f..2b45d064f9 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -414,7 +414,7 @@ export default class HaAutomationActionRow extends LitElement {
           z-index: 3;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
         }
-        .rtl .card-menu {
+        :host-context([style*="direction: rtl;"]) .card-menu {
           right: initial;
           left: 16px;
         }
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index 8585e232e9..7024771aec 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -245,7 +245,7 @@ export default class HaAutomationConditionRow extends LitElement {
           display: flex;
           align-items: center;
         }
-        .rtl .card-menu {
+        :host-context([style*="direction: rtl;"]) .card-menu {
           float: left;
         }
         mwc-list-item[disabled] {
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index 13254779b1..b10e3a63ee 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -442,7 +442,7 @@ export default class HaAutomationTriggerRow extends LitElement {
           z-index: 3;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
         }
-        .rtl .card-menu {
+        :host-context([style*="direction: rtl;"]) .card-menu {
           float: left;
         }
         .triggered {
diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts
index 72d40619be..05506898cc 100644
--- a/src/panels/config/integrations/ha-integration-header.ts
+++ b/src/panels/config/integrations/ha-integration-header.ts
@@ -143,6 +143,10 @@ export class HaIntegrationHeader extends LitElement {
       width: 40px;
       height: 40px;
     }
+    :host-context([style*="direction: rtl;"]) .header img {
+      margin-right: auto !important;
+      margin-left: 16px;
+    }
     .header .info {
       flex: 1;
       align-self: center;
diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts
index 2765ffa532..f73f0b8f43 100644
--- a/src/panels/config/logs/dialog-system-log-detail.ts
+++ b/src/panels/config/logs/dialog-system-log-detail.ts
@@ -228,6 +228,7 @@ class DialogSystemLogDetail extends LitElement {
         .contents {
           padding: 16px;
           outline: none;
+          direction: ltr;
         }
         .error {
           color: var(--error-color);