diff --git a/src/platform/core/steps/step-header/step-header.component.scss b/src/platform/core/steps/step-header/step-header.component.scss
index d573185628..8f2414752c 100644
--- a/src/platform/core/steps/step-header/step-header.component.scss
+++ b/src/platform/core/steps/step-header/step-header.component.scss
@@ -53,12 +53,24 @@ $step-circle: 24px;
     font-size: 0;
   }
   .td-circle,
+  .td-triangle,
   .td-complete {
-    margin-inline-start: 8px;
-    font-size: 14px;
+    /deep/ :not([dir='rtl']) & {
+      margin: {
+        left: 8px;
+        right: 0px;
+      }
+    }
+    /deep/ [dir='rtl'] & {
+      margin: {
+        left: 0px;
+        right: 8px;
+      }
+    }
   }
-  .td-triangle {
-    margin-inline-start: 8px;
+  .td-circle,
+  .td-complete {
+    font-size: 14px;
   }
   .td-step-label-wrapper {
     padding-left: 8px;
diff --git a/src/platform/core/steps/steps.component.scss b/src/platform/core/steps/steps.component.scss
index ce2eaa2907..5299be6d3d 100644
--- a/src/platform/core/steps/steps.component.scss
+++ b/src/platform/core/steps/steps.component.scss
@@ -14,14 +14,27 @@
   height: 1px;
   position: relative;
   top: 36px;
-  margin-inline-start: -6px;
-  margin-inline-end: -3px;
+  /deep/ :not([dir='rtl']) & {
+    left: -6px;
+    right: -3px;
+  }
+  /deep/ [dir='rtl'] & {
+    left: -3px;
+    right: -6px;
+  }
   min-width: 15px;
 }
 
 .td-vertical-line {
   position: absolute;
-  margin-inline-start: 20px;
+  /deep/ :not([dir='rtl']) & {
+    left: 20px;
+    right: auto;
+  }
+  /deep/ [dir='rtl'] & {
+    left: auto;
+    right: 20px;
+  }
   bottom: -16px;
   top: -16px;
   border-left-width: 1px;