diff --git a/cms/static/cms/sass/components/_reset.scss b/cms/static/cms/sass/components/_reset.scss
index 5b2a1a1f202..329cbeb3e1b 100644
--- a/cms/static/cms/sass/components/_reset.scss
+++ b/cms/static/cms/sass/components/_reset.scss
@@ -21,7 +21,7 @@
     h3 {
         color: var(--dca-black);
         font: normal #{$font-size-normal}/#{$line-height-normal} Helvetica,Arial,sans-serif;
-        text-align: left;
+        text-align: start;
         text-decoration: none;
         box-sizing: border-box;
         height: auto;
diff --git a/cms/static/cms/sass/components/_toolbar.scss b/cms/static/cms/sass/components/_toolbar.scss
index 3795a6216d7..c397af0d631 100644
--- a/cms/static/cms/sass/components/_toolbar.scss
+++ b/cms/static/cms/sass/components/_toolbar.scss
@@ -25,40 +25,44 @@
         clip: rect(0, auto, 10px, 0);
         background: $toolbar-border !important;
         @at-root .cms-structure-mode-structure & {
-            right: $toolbar-height - 1px;
+            inset-inline-end: $toolbar-height - 1px;
         }
     }
 
     .cms-toolbar-left {
         position: absolute;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
-        z-index: z(toolbar, left);
+        z-index: z(toolbar, inset-inline-start);
     }
     .cms-toolbar-right {
         position: absolute;
-        right: 0;
+        inset-inline-end: 0;
         top: 0;
-        z-index: z(toolbar, right);
-        padding-right: $toolbar-height;
+        z-index: z(toolbar, inset-inline-end);
+        padding-inline-end:$toolbar-height;
     }
 
     .cms-toolbar-left .cms-toolbar-item {
-        margin-right: $toolbar-left-space;
+        margin-inline-end: $toolbar-left-space;
         &:last-child {
-            margin-right: 0;
+            margin-inline-end: 0;
         }
     }
     .cms-toolbar-right .cms-toolbar-item {
-        margin-right: $toolbar-right-space;
+        margin-inline-end: $toolbar-right-space;
     }
 
     // items
     .cms-toolbar-item {
         float: left;
+        [dir="rtl"] & {
+            float: right;
+        }
     }
 }
 
+
 @at-root .cms-toolbar-non-sticky {
     position: static !important;
     .cms .cms-toolbar {
@@ -103,9 +107,15 @@
     li {
         position: relative;
         float: left;
+        [dir=rtl] & {
+            float: right;
+        }
     }
     li a {
         float: left;
+        [dir=rtl] & {
+            float: right;
+        }
         color: $toolbar-menu-item-color;
         padding: $toolbar-menu-item-padding;
         line-height: $toolbar-height;
@@ -122,7 +132,7 @@
         display: none;
         position: absolute;
         top: 50%;
-        right: 7px;
+        inset-inline-end: 7px;
         margin-top: math.div(-$toolbar-dropdown-item-icon-size, 2);
         font-size: $toolbar-dropdown-item-icon-size;
         transform: rotate(180deg);
@@ -134,7 +144,7 @@
             display: block;
             position: absolute;
             top: $toolbar-height;
-            left: 0;
+            inset-inline-start: 0;
             min-width: $toolbar-dropdown-min-width;
             padding: $toolbar-dropdown-padding;
             border: 1px solid $white;
@@ -165,7 +175,7 @@
             ul {
                 display: none;
                 top: -(nth($toolbar-dropdown-padding, 1) + 1px);
-                left: 100%;
+                inset-inline-start: 100%;
             }
             > a {
                 cursor: default;
@@ -234,6 +244,9 @@
     }
     .cms-toolbar-item-cms-mode-switcher a {
         float: left !important;
+        [dir=rtl] & {
+            float: right !important;
+        }
         width: 50%;
     }
     .cms-toolbar-item-buttons {
@@ -295,27 +308,24 @@
         border: none;
         box-shadow: none;
         position: relative;
-        left: 0;
+        inset-inline-start: 0;
         top: 0;
         border-radius: 0;
-        margin-left: 20px;
+        margin-inline-start:20px;
     }
 }
 .cms-toolbar-item-cms-mode-switcher {
     // display: none;
     position: absolute;
-    right: 0;
-    top: 0;
-    position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     top: 0;
     width: $toolbar-height;
     height: $toolbar-height;
-    margin-right: 0 !important;
+    margin-inline-end:0 !important;
 
     .cms-btn {
         position: absolute;
-        right: 0;
+        inset-inline-end: 0;
         top: 0;
         border-top: 0 !important;
         border-right: 0 !important;
@@ -327,9 +337,9 @@
         clip: rect(0, $toolbar-height, $toolbar-height, 0px);
         .cms-icon {
             position: absolute;
-            left: math.div($toolbar-height, 2);
+            inset-inline-start: math.div($toolbar-height, 2);
             top: math.div($toolbar-height, 2);
-            margin-left: -10px;
+            margin-inline-start:-10px;
             margin-top: -9px;
             font-size: 20px !important;
         }
@@ -395,10 +405,13 @@
         cursor: pointer;
         display: none;
         float: right;
+        [dir=rtl] & {
+            float: left;
+        }
         position: relative;
         width: $messages-close-area-size;
         height: $messages-line-height;
-        text-align: right;
+        text-align: end;
         span {
             font-size: $messages-close-icon-size;
         }
@@ -414,7 +427,7 @@
 //###########################################################
 // #TOOLBAR/elements/logo#
 .cms-toolbar-item-logo {
-    margin-right: 0 !important;
+    margin-inline-end:0 !important;
 
     a {
         @extend .cms-icon;
@@ -424,8 +437,8 @@
         line-height: $toolbar-height;
         height: $toolbar-height;
         transition: color $speed-base;
-        padding-left: $toolbar-left-space;
-        padding-right: $toolbar-left-space;
+        padding-inline-start:$toolbar-left-space;
+        padding-inline-end:$toolbar-left-space;
 
         span {
             display: none;
@@ -445,7 +458,7 @@
         display: inline-block;
         vertical-align: middle;
         line-height: $toolbar-height;
-        padding-left: $toolbar-left-space;
+        padding-inline-start:$toolbar-left-space;
         margin: 0;
         cursor: pointer;
     }
@@ -494,7 +507,7 @@
 
     // overlap with logo when it gets too small
     @media (max-width: $screen-tablet - 280px) {
-        margin-left: -110px;
+        margin-inline-start:-110px;
     }
     // mobile only
     @media (max-width: $screen-tablet) {
@@ -506,12 +519,12 @@
         label {
             position: relative;
             padding: 0;
-            margin-right: -1px;
+            margin-inline-end:-1px;
             margin-bottom: -1px;
         }
         label span {
             position: absolute;
-            left: 5px;
+            inset-inline-start: 5px;
             top: 0;
             z-index: 1;
             color: $gray-light;
@@ -547,6 +560,9 @@
 
     a {
         float: left;
+        [dir=rtl] & {
+            float: right;
+        }
         line-height: $toolbar-button-height;
         height: $toolbar-button-height;
         font-size: $toolbar-button-font-size;
@@ -556,7 +572,7 @@
         border-radius: $toolbar-button-border-radius 0 0 $toolbar-button-border-radius;
     }
     a:last-child {
-        margin-left: -1px;
+        margin-inline-start:-1px;
         border-radius: 0 $toolbar-button-border-radius $toolbar-button-border-radius 0;
     }
     a:only-child {
@@ -570,7 +586,7 @@
 .cms-screenblock {
     position: fixed;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     z-index: z(screenblock);
     color: $screenblock-color;
     text-align: center;
@@ -612,7 +628,7 @@
     position: fixed;
     z-index: 99999999;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
 
     width: 100%;
     height: 3px;
@@ -621,7 +637,7 @@
 .cms-loading-peg {
     display: block;
     position: absolute;
-    right: 0px;
+    inset-inline-end: 0px;
     width: 100px;
     height: 100%;
     box-shadow: 0 0 10px #29d, 0 0 5px $color-primary;
diff --git a/cms/templates/cms/toolbar/toolbar.html b/cms/templates/cms/toolbar/toolbar.html
index 22e1e3deb8b..dac191103ca 100644
--- a/cms/templates/cms/toolbar/toolbar.html
+++ b/cms/templates/cms/toolbar/toolbar.html
@@ -4,7 +4,7 @@
      class="cms cms-reset
      {% if not user.is_authenticated %} cms-toolbar-auth{% endif %}
      {% if debug %} cms-toolbar-debug{% endif %}"
-     dir="ltr" data-touch-action="none">
+     data-touch-action="none">
 
     {% block toolbar_top %}
     {% endblock toolbar_top %}