diff --git a/package-lock.json b/package-lock.json
index 5239388d9b1..ee6ec8c99ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,7 +75,7 @@
         "vue": "^2.7.14",
         "vue-clickaway": "~2.2.2",
         "vue-countable": "^1.0.9",
-        "vue-draggable-nested-tree": "^2.2.20",
+        "vue-draggable-nested-tree": "^2.3.0-beta.1",
         "vue-js-modal": "^2.0.1",
         "vue-select": "^3.10.1",
         "vue-toasted": "^1.1.27",
@@ -9901,9 +9901,9 @@
       }
     },
     "node_modules/vue-draggable-nested-tree": {
-      "version": "2.2.20",
-      "resolved": "https://registry.npmjs.org/vue-draggable-nested-tree/-/vue-draggable-nested-tree-2.2.20.tgz",
-      "integrity": "sha512-IrhJpPV31O54iJKH/WN0zDS4QOZJMkE8gygxKp4Jok52qCQ5p4ArGTaPGr5tZgljx5Hbpl+rwXtMYoMEsL64sA==",
+      "version": "2.3.0-beta.1",
+      "resolved": "https://registry.npmjs.org/vue-draggable-nested-tree/-/vue-draggable-nested-tree-2.3.0-beta.1.tgz",
+      "integrity": "sha512-SuxWl6TJOBGSRAllYRZG4oiVnz5+QtpzyF7b4KidS3MzbrkjjsMDxy+hylksG++XCSn0heclVml0xriH2K0vug==",
       "hasInstallScript": true,
       "dependencies": {
         "draggable-helper": "1.0.20",
diff --git a/package.json b/package.json
index 64c33a91093..21d937e9096 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
     "vue": "^2.7.14",
     "vue-clickaway": "~2.2.2",
     "vue-countable": "^1.0.9",
-    "vue-draggable-nested-tree": "^2.2.20",
+    "vue-draggable-nested-tree": "^2.3.0-beta.1",
     "vue-js-modal": "^2.0.1",
     "vue-select": "^3.10.1",
     "vue-toasted": "^1.1.27",
diff --git a/resources/css/components/array.css b/resources/css/components/array.css
index d4364adb738..1266e738a21 100644
--- a/resources/css/components/array.css
+++ b/resources/css/components/array.css
@@ -13,7 +13,7 @@
     }
 }
 .array-table {
-    @apply rounded text-sm text-left w-full;
+    @apply rounded text-sm rtl:text-right ltr:text-left w-full;
     &:focus {
         @apply outline-none;
     }
@@ -25,7 +25,7 @@
     }
 
     th {
-        @apply border-r p-2 bg-gray-300;
+        @apply rtl:border-l ltr:border-r p-2 bg-gray-300;
     }
 
     td {
@@ -33,20 +33,20 @@
     }
 
     tr:first-child th {
-        @apply rounded-tl;
+        @apply rtl:rounded-tr ltr:rounded-tl;
     }
 
     tr:first-child td,
     tr:first-child .input-text-minimal {
-        @apply rounded-tr;
+        @apply rtl:rounded-tl ltr:rounded-tr;
     }
 
     tr:last-child th {
-        @apply rounded-bl;
+        @apply rtl:rounded-br ltr:rounded-bl;
     }
     tr:last-child td:last-child,
     tr:last-child .input-minimal {
-        @apply rounded-br;
+        @apply rtl:rounded-bl ltr:rounded-br;
     }
 
     &:focus-within {
diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index ff60b973a04..a59e3cf64be 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -16,7 +16,7 @@
 		i {
 			position: relative;
 			top: -1px;
-			margin-right: 10px;
+			margin-right: 10px ; [dir="rtl"] & { margin-left: 10px ; margin-right: 0 ; }
 		}
 	}
 }
@@ -60,12 +60,12 @@
 
     .search {
         flex: 1;
-        margin-right: 15px;
-        margin-left: 0;
+        margin-right: 15px ; [dir="rtl"] & { margin-left: 15px ; margin-right: 0 ; }
+        margin-left: 0 ; [dir="rtl"] & { margin-right: 0 ; margin-left: 0 ; }
     }
 
     > .btn {
-        margin-right: 15px;
+        margin-right: 15px ; [dir="rtl"] & { margin-left: 15px ; margin-right: 0 ; }
     }
 }
 
@@ -148,9 +148,9 @@
 
             > * {
                 @apply absolute w-auto h-auto max-w-full max-h-full;
-                left: 50%;
+                left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
                 top: 50%;
-                transform: translate(-50%, -50%);
+                transform: translate(-50%, -50%) ; [dir="rtl"] & { transform: translate(50%, -50%); }
                 box-shadow: 0 0 32px rgba(0, 0, 0, .35);
             }
         }
diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css
index 6778b6e0114..be798ec8281 100644
--- a/resources/css/components/blueprints.css
+++ b/resources/css/components/blueprints.css
@@ -41,7 +41,9 @@
     &:before {
         content: '';
         @apply border rounded absolute bg-gray-200 shadow-sm;
-        top: -3px; left: 6px; right: 0; bottom: 3px; z-index: 1;
+        top: -3px; left: 6px ; right: 0 ; bottom: 3px; z-index: 1;
+
+        [dir="rtl"] & { left: 0 ; right: 6px ; }
     }
 }
 
diff --git a/resources/css/components/configure.css b/resources/css/components/configure.css
index 420decaf6b5..a338b4a92e9 100644
--- a/resources/css/components/configure.css
+++ b/resources/css/components/configure.css
@@ -11,6 +11,6 @@
        > .publish-fields > .toggle-fieldtype {
            @apply flex justify-between items-center flex-wrap;
            .help-block, .help-block p { @apply mb-0; }
-           .field-inner { @apply pr-8; }
+           .field-inner { @apply rtl:pl-8 ltr:pr-8; }
        }
    }
diff --git a/resources/css/components/fieldtypes/array.css b/resources/css/components/fieldtypes/array.css
index a1053d00c5b..603a2cbf37e 100644
--- a/resources/css/components/fieldtypes/array.css
+++ b/resources/css/components/fieldtypes/array.css
@@ -24,13 +24,13 @@
         tr:last-child {
             td, th { border-radius: 0; }
         }
-        tr > :first-child { border-left: 0; }
-        tr > :last-child { border-right: 0; }
+        tr > :first-child { border-left: 0 ; [dir="rtl"] & { border-left: 0 ; border-right: 0 ; } }
+        tr > :last-child { border-right: 0 ; [dir="rtl"] & { border-right: 0 ; border-left: 0 ; } }
     }
 
     /*  Dynamic Mode */
     .array-dynamic .btn {
-        @apply text-blue block w-full h-auto border-0 text-left shadow-none;
+        @apply text-blue block w-full h-auto border-0 rtl:text-right ltr:text-left shadow-none;
         background: #f4f4f4;
         padding: 10px 10px 11px;
         margin: 15px 0 0;
diff --git a/resources/css/components/fieldtypes/assets.css b/resources/css/components/fieldtypes/assets.css
index 5302970491b..a2d38bba6f2 100644
--- a/resources/css/components/fieldtypes/assets.css
+++ b/resources/css/components/fieldtypes/assets.css
@@ -14,7 +14,7 @@
     }
 
     .asset-upload-control {
-      @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
+      @apply mt-2 @sm:rtl:mr-4 @sm:ltr:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
     }
 
     .upload-text-button {
@@ -26,7 +26,7 @@
 }
 
 .assets-fieldtype .drag-drop-text {
-    @apply ml-1 text-gray-700;
+    @apply rtl:mr-1 ltr:ml-1 text-gray-700;
 }
 
 .assets-fieldtype .asset-upload-control {
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 9a4291b95dc..f464f55b431 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -125,7 +125,7 @@
         border-top-color: black;
         position: absolute;
         top: 100%;
-        left: 50%;
+        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
         margin-left: -3px
     }
 
@@ -163,7 +163,7 @@
 }
 
 .bard-add-set-button {
-    @apply flex items-center justify-center absolute -left-4 top-[-6px] z-1;
+    @apply flex items-center justify-center absolute rtl:-right-4 ltr:-left-4 top-[-6px] z-1;
 }
 
 .bard-footer-toolbar {
@@ -192,8 +192,8 @@
     /*  transition: all .15s ease-in-out; */
 
     .dropdown-menu {
-        left: -5px;
-        right: auto;
+        left: -5px ; [dir="rtl"] & { left: auto ; right: -5px ; }
+        right: auto ; [dir="rtl"] & { right: auto ; left: auto ; }
     }
 }
 
@@ -240,16 +240,16 @@
     }
 
     .bard-set-selector {
-        @apply ml-6;
+        @apply rtl:mr-6 ltr:ml-6;
     }
 
     .bard-field-options {
         @apply fixed top-0 inset-x-0 bg-gray-700 p-4 w-full;
-        text-align: right;
+        @apply ltr:text-right rtl:text-left;
         z-index: 1; /*  to appear over the top of .bard-editor */
 
         .icon { font-size: 24px; }
-        a { margin-left: 16px; color: #fff; opacity: 1; }
+        a { margin-left: 16px ; [dir="rtl"] & { margin-right: 16px ; margin-left: 0 ; } color: #fff; opacity: 1; }
     }
 }
 
@@ -382,14 +382,14 @@
         padding: 0;
         margin: 0;
         margin-bottom: .85em;
-        padding-left: 2em;
+        padding-left: 2em ; [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
     }
 
     .tableWrapper table ol,
     .tableWrapper table ul {
         padding: 0;
         margin: 0;
-        padding-left: 2em;
+        padding-left: 2em ; [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
     }
 
     ol ol,
@@ -398,7 +398,7 @@
     ul ul {
         margin-top: 0;
         margin-bottom: 0;
-        padding-left: 2em;
+        padding-left: 2em ; [dir="rtl"] & { padding-right: 2em ; padding-left: 0 ; }
     }
 
     ul ul {
@@ -418,7 +418,7 @@
     }
 
     blockquote {
-        @apply text-gray-800 border-l-4 border-blue px-4;
+        @apply text-gray-800 rtl:border-r-4 ltr:border-l-4 border-blue px-4;
         margin: 0 0 .85em;
     }
 
@@ -439,7 +439,7 @@
         table-layout: fixed;
 
         th {
-            @apply font-bold text-left bg-gray-200;
+            @apply font-bold rtl:text-right ltr:text-left bg-gray-200;
         }
 
         td, th {
@@ -490,7 +490,7 @@
 .bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before {
     @apply text-gray-600;
     content: attr(data-placeholder);
-    float: left;
+    float: left ; [dir="rtl"] & { float: right ; }
     height: 0;
     pointer-events: none;
 }
@@ -538,6 +538,6 @@
     table .column-resize-handle {
         @apply absolute top-0 bottom-0 pointer-events-none bg-blue-200;
         width: 3px;
-        right: -2px;
+        right: -2px ; [dir="rtl"] & { right: auto ; left: -2px ; }
     }
 }
diff --git a/resources/css/components/fieldtypes/checkboxes.css b/resources/css/components/fieldtypes/checkboxes.css
index ea48181c1db..0dbbd38e1d8 100644
--- a/resources/css/components/fieldtypes/checkboxes.css
+++ b/resources/css/components/fieldtypes/checkboxes.css
@@ -8,6 +8,6 @@
     }
 
     .option + label {
-        @apply ml-2;
+        @apply rtl:mr-2 ltr:ml-2;
     }
 }
diff --git a/resources/css/components/fieldtypes/code.css b/resources/css/components/fieldtypes/code.css
index b1c71f78166..2f9dcf276b6 100644
--- a/resources/css/components/fieldtypes/code.css
+++ b/resources/css/components/fieldtypes/code.css
@@ -1,6 +1,14 @@
+.code-fieldtype-container {
+    direction: ltr;
+}
+
 .code-fieldtype-toolbar {
     @apply bg-white shadow-none rounded-t border border-b-0 text-sm flex flex-wrap items-center justify-end gap-2;
     padding: 4px 8px;
+
+    [dir='rtl'] & {
+        direction: rtl;
+    }
 }
 
 .code-fieldtype-toolbar select {
diff --git a/resources/css/components/fieldtypes/datetime.css b/resources/css/components/fieldtypes/datetime.css
index 1e962bb339a..3264ba2d2f5 100644
--- a/resources/css/components/fieldtypes/datetime.css
+++ b/resources/css/components/fieldtypes/datetime.css
@@ -5,7 +5,7 @@
 .daterange {
 	outline: none;
 	width: 100%;
-	.icon-remove { right: 32px; }
+	.icon-remove { right: 32px ; [dir="rtl"] & { right: auto ; left: 32px ; } }
 
     .dr-calendar { max-width: 250px; }
 
@@ -24,7 +24,7 @@
 	color: #777;
     height: 18px;
     width: 18px;
-    margin-right: 8px;
+    margin-right: 8px ; [dir="rtl"] & { margin-left: 8px ; margin-right: 0 ; }
 	text-shadow: 0 1px 1px #FFF;
 }
 
diff --git a/resources/css/components/fieldtypes/environment.css b/resources/css/components/fieldtypes/environment.css
index 085bd35a51b..12ce34710f7 100644
--- a/resources/css/components/fieldtypes/environment.css
+++ b/resources/css/components/fieldtypes/environment.css
@@ -8,7 +8,7 @@
     .icon {
         display: inline-block;
         vertical-align: middle;
-        margin-right: 5px;
+        margin-right: 5px ; [dir="rtl"] & { margin-left: 5px ; margin-right: 0 ; }
         &:before {
             top: 1px;
         }
diff --git a/resources/css/components/fieldtypes/grid.css b/resources/css/components/fieldtypes/grid.css
index f29eaf6c28a..460556d1c55 100644
--- a/resources/css/components/fieldtypes/grid.css
+++ b/resources/css/components/fieldtypes/grid.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .grid-table {
-    @apply w-full text-left border text-gray relative mb-4 outline-none shadow-sm rounded;
+    @apply w-full rtl:text-right ltr:text-left border text-gray relative mb-4 outline-none shadow-sm rounded;
     border-collapse: separate;
     border-spacing: 0;
     table-layout: auto;
@@ -17,8 +17,8 @@
         top: -1px;
         z-index: auto;
 
-        &:first-child { @apply rounded-tl pl-3; }
-        &:last-child { @apply rounded-tr; }
+        &:first-child { @apply rtl:rounded-tr ltr:rounded-tl rtl:pr-3 ltr:pl-3; }
+        &:last-child { @apply rtl:rounded-tl ltr:rounded-tr; }
         &.grid-drag-handle-header {
             @apply w-3;
         }
@@ -40,11 +40,11 @@
         @apply border-b px-2 py-3 align-top;
 
         &:first-child.grid-cell {
-            @apply pl-3;
+            @apply rtl:pr-3 ltr:pl-3;
         }
 
         &.drag-handle {
-            @apply border-r h-full p-2;
+            @apply rtl:border-l ltr:border-r h-full p-2;
             width: 1%;
             cursor: grab;
             background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
@@ -55,8 +55,8 @@
 
     tr:last-child td {
         @apply border-b-0;
-        &:first-child { @apply rounded-bl; }
-        &:last-child { @apply rounded-br; }
+        &:first-child { @apply rtl:rounded-br ltr:rounded-bl; }
+        &:last-child { @apply rtl:rounded-bl ltr:rounded-br; }
     }
 
     tr.draggable-source--is-dragging td {
@@ -65,7 +65,7 @@
 }
 
 .grid-table tbody .row-controls {
-    @apply pl-0 text-center;
+    @apply rtl:pr-0 ltr:pl-0 text-center;
     width: 1%;
     padding-top: 21px; /*  pseudo-center for text/select fields */
 }
diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index 3b8d019db1d..c0ee9176a8f 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -37,7 +37,7 @@
         @apply flex items-center;
 
         button {
-            @apply text-gray-700 inline-block focus:outline-none px-2 py-1 mr-1;
+            @apply text-gray-700 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1;
 
             &:hover {
                 @apply text-blue;
@@ -154,7 +154,7 @@
     }
 
     .markdown-preview {
-        @apply border-none p-2 text-left;
+        @apply border-none p-2 rtl:text-right ltr:text-left;
         p { line-height: 1.2; }
     }
 }
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 90a1b9bea10..55b54cc677e 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -11,14 +11,14 @@
 }
 
 .replicator-set-header {
-    @apply bg-gray-300 border-b rounded-t pr-3 flex select-none;
+    @apply bg-gray-300 border-b rounded-t rtl:pl-3 ltr:pr-3 flex select-none;
 
     &.collapsed {
         @apply rounded border-b-0;
     }
 
     .sortable-handle {
-        @apply w-4 border-r rounded-tl p-2;
+        @apply w-4 rtl:border-l ltr:border-r rtl:rounded-tr ltr:rounded-tl p-2;
         cursor: grab;
         background: transparent url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
         background-size: 7px 17px;
diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index bdaa4a29a8d..95f1b235e4d 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .table-fieldtype-table {
-    @apply w-full text-left border text-gray relative mb-4 outline-none shadow-sm rounded;
+    @apply w-full rtl:text-right ltr:text-left border text-gray relative mb-4 outline-none shadow-sm rounded;
     border-collapse: separate;
     border-spacing: 0;
     table-layout: fixed;
@@ -11,13 +11,13 @@
 
 .table-fieldtype-table thead {
     th {
-        @apply font-medium border-r p-2 border-b z-10 bg-gray-200 text-gray-900 text-sm;
+        @apply font-medium rtl:border-l ltr:border-r p-2 border-b z-10 bg-gray-200 text-gray-900 text-sm;
         display: table-cell;
         position: sticky;
         top: -1px;
 
-        &:first-child { @apply rounded-tl pl-3; }
-        &:last-child { @apply rounded-tr border-r-0; }
+        &:first-child { @apply rtl:rounded-tr ltr:rounded-tl rtl:pr-3 ltr:pl-3; }
+        &:last-child { @apply rtl:rounded-tl ltr:rounded-tr rtl:border-l-0 ltr:border-r-0; }
         &.grid-drag-handle-header {
             @apply w-3;
         }
@@ -39,18 +39,18 @@
     }
 
     td {
-        @apply border-b border-r p-0;
+        @apply border-b rtl:border-l ltr:border-r p-0;
 
         &:first-child.grid-cell {
-            @apply pl-3;
+            @apply rtl:pr-3 ltr:pl-3;
         }
 
         &:last-child {
-            @apply border-r-0;
+            @apply rtl:border-l-0 ltr:border-r-0;
         }
 
         &.table-drag-handle {
-            @apply w-3 border-r h-full p-2;
+            @apply w-3 rtl:border-l ltr:border-r h-full p-2;
             cursor: grab;
             background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
             background-size: 7px 17px;
@@ -60,8 +60,8 @@
 
     tr:last-child td {
         @apply border-b-0;
-        &:first-child { @apply rounded-bl; }
-        &:last-child { @apply rounded-br; }
+        &:first-child { @apply rtl:rounded-br ltr:rounded-bl; }
+        &:last-child { @apply rtl:rounded-bl ltr:rounded-br; }
     }
 
     tr.draggable-source--is-dragging td {
@@ -70,7 +70,7 @@
 }
 
 .table-fieldtype-table .row-controls {
-    @apply w-8 pl-0 text-center;
+    @apply w-8 rtl:pr-0 ltr:pl-0 text-center;
     vertical-align: middle;
     &:focus-within {
         @apply bg-gray-200;
diff --git a/resources/css/components/fieldtypes/video.css b/resources/css/components/fieldtypes/video.css
index c34d8452d69..3261716751d 100644
--- a/resources/css/components/fieldtypes/video.css
+++ b/resources/css/components/fieldtypes/video.css
@@ -18,7 +18,7 @@
     @apply rounded;
     position: absolute;
     top: 0;
-    left: 0;
+    left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
     width: 100%;
     height: 100%;
 }
diff --git a/resources/css/components/fieldtypes/width.css b/resources/css/components/fieldtypes/width.css
index 7f053f04717..7219724d0e2 100644
--- a/resources/css/components/fieldtypes/width.css
+++ b/resources/css/components/fieldtypes/width.css
@@ -9,18 +9,18 @@
     }
 
     .field-width-notch {
-        @apply relative border border-gray-400 border-l-0 flex-1;
+        @apply relative border border-gray-400 rtl:border-r-0 ltr:border-l-0 flex-1;
 
         &:first-of-type {
-            @apply border-l rounded-l-sm;
+            @apply rtl:border-r ltr:border-l rtl:rounded-r-sm ltr:rounded-l-sm;
         }
 
         &.filled {
-            @apply border-gray-400 border-r-0 pr-px bg-white -my-px;
+            @apply border-gray-400 rtl:border-l-0 ltr:border-r-0 rtl:pl-px ltr:pr-px bg-white -my-px;
         }
 
         &.selected {
-            @apply border-r rounded-r-sm;
+            @apply rtl:border-l ltr:border-r rtl:rounded-l-sm ltr:rounded-r-sm;
         }
     }
 }
@@ -34,7 +34,7 @@
     .field-width-notch {
         @apply bg-gray-200 border-r-gray-400 border-y-gray-500;
         &:last-child {
-            @apply border-r-gray-500 rounded-r-sm;
+            @apply border-r-gray-500 rtl:rounded-l-sm ltr:rounded-r-sm;
         }
 
         &.filled {
diff --git a/resources/css/components/fieldtypes/yaml.css b/resources/css/components/fieldtypes/yaml.css
index 921eb14e692..8d6423bc572 100644
--- a/resources/css/components/fieldtypes/yaml.css
+++ b/resources/css/components/fieldtypes/yaml.css
@@ -10,7 +10,7 @@
 .grid-fieldtype .yaml-fieldtype-wrapper {
     > span {
         border-top: 0;
-        border-right: 0;
+        border-right: 0 ; [dir="rtl"] & { border-right: 0 ; border-left: 0 ; }
     }
 
     .editor {
diff --git a/resources/css/components/filters.css b/resources/css/components/filters.css
index 30658159474..c42cb959339 100644
--- a/resources/css/components/filters.css
+++ b/resources/css/components/filters.css
@@ -22,8 +22,8 @@
         border-radius: 50%;
         opacity: .9;
         position: absolute;
-        left: 50%;
-        margin-left: -1px;
+        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
+        margin-left: -1px ; [dir="rtl"] & { margin-right: -1px ; margin-left: 0 ; }
         bottom: 1px;
     }
 
diff --git a/resources/css/components/focal-point.css b/resources/css/components/focal-point.css
index ac21cb98ac1..33210a531be 100644
--- a/resources/css/components/focal-point.css
+++ b/resources/css/components/focal-point.css
@@ -10,7 +10,7 @@
 .focal-point-toolbox {
     position: absolute;
     top: 20px;
-    left: 20px;
+    left: 20px ; [dir="rtl"] & { left: auto ; right: 20px ; }
     z-index: 120;
     width: 380px;
     overflow-y: auto;
@@ -48,15 +48,15 @@
         background: white;
         border-radius: 50%;
         top: 50%;
-        left: 50%;
-        margin: -4px 0 0 -4px;
+        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
+        margin: -4px 0 0 -4px ; [dir="rtl"] & { margin: -4px -4px 0 0 ; }
         box-shadow: 0 0 4px rgba(0,0,0,.75);
     }
 }
 
 .focal-point .frame {
     position: absolute;
-    margin: -5px 0 0 -5px;
+    margin: -5px 0 0 -5px ; [dir="rtl"] & { margin: -5px -5px 0 0 ; }
     border: 10px solid #394045;
     box-sizing: content-box;
     overflow: hidden;
@@ -70,9 +70,9 @@
 }
 
 .focal-point {
-    .frame-1, .frame-4, .frame-7 { left: 0; width: 66.6666667%; }
-    .frame-2, .frame-5, .frame-8 { left: 66.6666667%; width: 22.2222222%; }
-    .frame-3, .frame-6, .frame-9 { left: 88.8888889%; width: 11.1111111%; }
+    .frame-1, .frame-4, .frame-7 { left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; } width: 66.6666667%; }
+    .frame-2, .frame-5, .frame-8 { left: 66.6666667% ; [dir="rtl"] & { left: auto ; right: 66.6666667% ; } width: 22.2222222%; }
+    .frame-3, .frame-6, .frame-9 { left: 88.8888889% ; [dir="rtl"] & { left: auto ; right: 88.8888889% ; } width: 11.1111111%; }
     .frame-1, .frame-2, .frame-3 { top: 0; height: 66.6666667%; }
     .frame-4, .frame-5, .frame-6 { top: 66.6666667%; height: 22.2222222%; }
     .frame-7, .frame-8, .frame-9 { top: 88.8888889%; height: 11.1111111%; }
diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css
index 604bc826781..7a7c1f405e8 100644
--- a/resources/css/components/global-header.css
+++ b/resources/css/components/global-header.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .global-header {
-    @apply bg-white shadow pr-4 h-13 items-center flex relative w-full;
+    @apply bg-white shadow rtl:pl-4 ltr:pr-4 h-13 items-center flex relative w-full;
     z-index: 3; /* The search focus overlay sits underneath using z-index 2. */
 }
 
@@ -22,8 +22,8 @@
 
     .search-input {
         @apply text-sm w-full max-w-full;
-        padding-left: 5px;
-        padding-right: 20px;
+        padding-left: 5px ;
+        padding-right: 20px ; [dir="rtl"] & { padding-left: 20px ; padding-right: 5px ; }
         height: 32px;
 		&:focus {
 			outline: 0;
@@ -33,13 +33,13 @@
     .global-search-results {
         @apply shadow-lg absolute p-0 w-full bg-white rounded border border-gray-500;
         top: 36px;
-        left: -1px; /*  border offset */
+        left: -1px ; [dir="rtl"] & { left: auto ; right: -1px ; } /*  border offset */
         z-index: 999;
     }
 
     .global-search-loading-indicator {
         position: absolute;
-        right: 8px;
+        right: 8px ; [dir="rtl"] & { right: auto ; left: 8px ; }
     }
 
     .global-search-result-item {
@@ -67,7 +67,7 @@
     }
 
     .status {
-        float: right;
+        float: right ; [dir="rtl"] & { float: left ; }
         background: #ddd;
         border-radius: 2px;
         padding: 2px 4px;
@@ -87,7 +87,7 @@
 
     .reset {
         font-size: 21px;
-        left: -3px;
+        left: -3px ; [dir="rtl"] & { left: auto ; right: -3px ; }
         position: relative;
     }
 
@@ -108,7 +108,7 @@
     .v-select { @apply h-full }
     .vs__dropdown-toggle { @apply border-none bg-none }
     .vs__actions { @apply hidden }
-    .vs__search { @apply p-0 }
+    .vs__search { @apply p-0; [dir="rtl"] & { @apply p-0; } [dir="ltr"] & { @apply p-0; } }
     .vs__selected-options { @apply border-none shadow-none p-0 bg-none }
     .vs__selected { @apply flex }
     .vs__dropdown-toggle {
diff --git a/resources/css/components/items.css b/resources/css/components/items.css
index c1cffcce6ae..8940523217c 100644
--- a/resources/css/components/items.css
+++ b/resources/css/components/items.css
@@ -2,7 +2,7 @@
     @apply text-sm outline-none flex w-full justify-between rounded border bg-white shadow-sm items-center;
 
     .item-move {
-        @apply w-4 self-stretch border-r rounded-l p-2;
+        @apply w-4 self-stretch rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l p-2;
         cursor: grab;
         background: theme('colors.gray.200') url('../../svg/icons/light/drag-dots.svg') center center no-repeat;
         background-size: 7px 17px;
diff --git a/resources/css/components/modal.css b/resources/css/components/modal.css
index bfec7eab807..378f36598f8 100644
--- a/resources/css/components/modal.css
+++ b/resources/css/components/modal.css
@@ -1,9 +1,16 @@
 /* ==========================================================================
    MODALS
    ========================================================================== */
+.vm--container {
+    direction: ltr;
+}
 
 .vm--modal {
     @apply rounded-lg !important;
+
+    [dir='rtl'] & {
+        direction: rtl;
+    }
 }
 
 .vm--overlay {
diff --git a/resources/css/components/nav-main.css b/resources/css/components/nav-main.css
index b9a30d3ed01..85dfbada931 100644
--- a/resources/css/components/nav-main.css
+++ b/resources/css/components/nav-main.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .nav-main {
-    @apply hidden select-none bg-white shadow h-screen absolute left-0 overflow-scroll w-56;
+    @apply hidden select-none bg-white shadow h-screen absolute rtl:right-0 ltr:left-0 overflow-scroll w-56;
     transition: all .3s;
 
     h6 { @apply mt-6; }
@@ -26,7 +26,7 @@
         }
 
         i {
-            @apply block h-7 p-1 w-7 mr-2 rounded-full;
+            @apply block h-7 p-1 w-7 rtl:ml-2 ltr:mr-2 rounded-full;
         }
     }
 
@@ -40,11 +40,11 @@
 
     li ul {
         @apply mb-2;
-        margin-left: 1.5rem;
+        margin-left: 1.5rem ; [dir="rtl"] & { margin-right: 1.5rem ; margin-left: 0 ; }
 
         li {
             @apply text-xs;
-            margin-left: 12px;
+            margin-left: 12px ; [dir="rtl"] & { margin-right: 12px ; margin-left: 0 ; }
         }
 
         li a {
@@ -53,7 +53,7 @@
     }
 
     .nav-closed & {
-        left: -110%;
+        left: -110% ; [dir="rtl"] & { left: auto ; right: -110% ; }
     }
 
     .nav-section-top-level {
@@ -63,7 +63,7 @@
 
 @screen md {
     .nav-main {
-        @apply fixed flex bg-transparent shadow-none overflow-auto border-r;
+        @apply fixed flex bg-transparent shadow-none overflow-auto rtl:border-l ltr:border-r;
         height: calc(100% - 52px);
         .showing-license-banner & {
             height: calc(100% - 120px);
@@ -72,11 +72,11 @@
 }
 
 .nav-main-inner {
-    @apply pl-6 pr-4 pt-2;
+    @apply rtl:pr-6 ltr:pl-6 rtl:pl-4 ltr:pr-4 pt-2;
 }
 
 .nav-toggle {
-    @apply flex items-center justify-center h-6 p-1 w-6 mr-3 rounded;
+    @apply flex items-center justify-center h-6 p-1 w-6 rtl:ml-3 ltr:mr-3 rounded;
     outline: none !important;
 
     &:hover {
diff --git a/resources/css/components/nav-mobile.css b/resources/css/components/nav-mobile.css
index 53d6f3a8427..122f05d5fbb 100644
--- a/resources/css/components/nav-mobile.css
+++ b/resources/css/components/nav-mobile.css
@@ -3,17 +3,17 @@
    ========================================================================== */
 
 .nav-main.nav-mobile {
-    left: -110%;
+    left: -110% ; [dir="rtl"] & { left: auto ; right: -110% ; }
     display: block;
     z-index: 996;
     .nav-main-inner {
-        padding-left: 12px;
+        padding-left: 12px ; [dir="rtl"] & { padding-right: 12px ; padding-left: 0 ; }
     }
 }
 
 .nav-mobile-open {
     .nav-main.nav-mobile {
-        left: 0;
+        left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
     }
 }
 
diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css
index 3838fb7043f..631db9fa9ab 100644
--- a/resources/css/components/notifications.css
+++ b/resources/css/components/notifications.css
@@ -17,7 +17,7 @@
     height: 48px;
 
     i {
-        @apply flex items-center rounded-l mr-4 h-full px-4 text-white;
+        @apply flex items-center rtl:rounded-r ltr:rounded-l rtl:ml-4 ltr:mr-4 h-full px-4 text-white;
     }
 
     &.success i {
@@ -33,7 +33,7 @@
     }
 
     .action {
-        @apply font-normal text-xl px-4 h-full text-gray-600 m-0 ml-2 flex items-center;
+        @apply font-normal text-xl px-4 h-full text-gray-600 m-0 rtl:mr-2 ltr:ml-2 flex items-center;
         &:hover {
             @apply no-underline text-gray-900;
         }
diff --git a/resources/css/components/page-tree.css b/resources/css/components/page-tree.css
index e001141588e..254dae356bf 100644
--- a/resources/css/components/page-tree.css
+++ b/resources/css/components/page-tree.css
@@ -16,7 +16,7 @@
     }
 
 .page-move {
-        @apply w-6 border-r rounded-l;
+        @apply w-6 rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l;
         cursor: grab;
         background-color: hsla(210, 30%, 95%, .5);
         background-image: url('../../svg/icons/light/drag-dots.svg');
@@ -28,7 +28,7 @@
 
     .page-root {
         background-color: hsla(210, 30%, 95%, .5);
-        @apply flex w-6 rounded-l items-center border-r;
+        @apply flex w-6 rtl:rounded-r ltr:rounded-l items-center rtl:border-l ltr:border-r;
     }
 }
 
diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css
index 570caa1ffce..cc1ec453fff 100644
--- a/resources/css/components/pagination.css
+++ b/resources/css/components/pagination.css
@@ -6,7 +6,7 @@
 	@apply flex justify-center shadow items-center list-none p-0 rounded overflow-hidden;
 
 	li a {
-		@apply h-full px-3 py-2 border-r bg-white block text-gray-800;
+		@apply h-full px-3 py-2 rtl:border-l ltr:border-r bg-white block text-gray-800;
 
 		&:hover {
 			@apply bg-gray-100 text-gray-800;
@@ -14,7 +14,7 @@
 	}
 
 	li > .unclickable {
-		@apply h-full px-3 py-2 border-r bg-white block text-gray-500;
+		@apply h-full px-3 py-2 rtl:border-l ltr:border-r bg-white block text-gray-500;
 
 		&:hover {
       cursor: text;
@@ -22,7 +22,7 @@
 	}
 
 	li:last-child a {
-		@apply border-r-0;
+		@apply rtl:border-l-0 ltr:border-r-0;
 	}
 
 	li.current a {
diff --git a/resources/css/components/preview.css b/resources/css/components/preview.css
index 1b1e685cb89..20f01526459 100644
--- a/resources/css/components/preview.css
+++ b/resources/css/components/preview.css
@@ -3,7 +3,7 @@
 }
 
 .live-preview-header {
-    @apply relative pr-4 pl-6 py-2 h-13 shadow-md flex items-center justify-between;
+    @apply relative rtl:pl-4 ltr:pr-4 rtl:pr-6 ltr:pl-6 py-2 h-13 shadow-md flex items-center justify-between;
     background: linear-gradient(180deg, #fff, #f9fafb);
     border-bottom: 1px solid #c4cdd6;
     z-index: 2;
@@ -40,7 +40,7 @@
 }
 
 .live-preview .publish-tabs {
-    @apply pl-4 @4xl/live-preview:pl-6;
+    @apply rtl:pr-4 ltr:pl-4 rtl:@4xl/live-preview:pr-6 ltr:@4xl/live-preview:pl-6;
 }
 
 .live-preview .publish-sections-section {
@@ -66,7 +66,7 @@
 }
 
 .live-preview-resizer {
-    @apply w-4 border-l border-r border-gray-400 shadow-sm;
+    @apply w-4 rtl:border-r ltr:border-l rtl:border-l ltr:border-r border-gray-400 shadow-sm;
     z-index: 1;
     cursor: ew-resize;
     background: theme('colors.gray.100') url('../../svg/icons/light/drag-dots.svg') center center no-repeat;
diff --git a/resources/css/components/progress.css b/resources/css/components/progress.css
index 389d7d8e188..21b032fb0d1 100644
--- a/resources/css/components/progress.css
+++ b/resources/css/components/progress.css
@@ -4,14 +4,14 @@
 }
 
 #nprogress .bar {
-    @apply bg-blue fixed top-0 left-0 w-full;;
+    @apply bg-blue fixed top-0 rtl:right-0 ltr:left-0 w-full;;
     height: 2px;
     z-index: 10000; /*  above global-header */
 }
 
 /* Fancy blur effect */
 #nprogress .peg {
-    @apply block absolute right-0 w-full h-full opacity-100;
+    @apply block absolute rtl:left-0 ltr:right-0 w-full h-full opacity-100;
     box-shadow: 0 0 5px theme('colors.blue.DEFAULT'), 0 0 2px theme('colors.blue.DEFAULT');
 }
 
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 06a1a83f4e8..98b427dabf4 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -27,7 +27,7 @@
 .head .status {
     display: inline-block;
     label {
-        margin: 0 6px 0 0;
+        margin: 0 6px 0 0 ; [dir="rtl"] & { margin: 0 0 0 6px ; }
         position: relative;
         top: 3px;
     }
@@ -41,7 +41,7 @@
 
 code.parent-url {
     @apply block text-3xs bg-none text-gray-700;
-    padding: 0 0 3px 0;
+    padding: 0 0 3px 0 ; [dir="rtl"] & { padding: 0 0 3px 0 ; }
 }
 
 .publish-fields {
@@ -95,7 +95,7 @@ code.parent-url {
 
 .publish-sidebar {
     @apply shrink-0;
-    margin-left: 20px;
+    margin-left: 20px ; [dir="rtl"] & { margin-right: 20px ; margin-left: 0 ; }
     width: 300px;
 
     .publish-fields .form-group {
diff --git a/resources/css/components/revisions.css b/resources/css/components/revisions.css
index 39ada720f7b..bba44f0df25 100644
--- a/resources/css/components/revisions.css
+++ b/resources/css/components/revisions.css
@@ -34,7 +34,7 @@
 }
 
 .revision-item .badge {
-    @apply uppercase text-4xs ml-2 text-white rounded-sm;
+    @apply uppercase text-4xs rtl:mr-2 ltr:ml-2 text-white rounded-sm;
     height: 16px;
 
     &.publish { @apply bg-green-600; }
diff --git a/resources/css/components/roles.css b/resources/css/components/roles.css
index 5064ffe3d58..d726dbf1d52 100644
--- a/resources/css/components/roles.css
+++ b/resources/css/components/roles.css
@@ -4,7 +4,7 @@
 
 .roles {
     li li {
-        margin-left: 30px;
+        margin-left: 30px ; [dir="rtl"] & { margin-right: 30px ; margin-left: 0 ; }
     }
 
     .disabled {
diff --git a/resources/css/components/settings.css b/resources/css/components/settings.css
index 173135ee739..7670aa566d9 100644
--- a/resources/css/components/settings.css
+++ b/resources/css/components/settings.css
@@ -3,7 +3,7 @@
     @apply p-3 @sm:p-4 m-0;
 
     .field-inner {
-        @apply w-full md:w-1/2 md:pr-8;
+        @apply w-full md:w-1/2 rtl:md:pl-8 ltr:md:pr-8;
     }
 
     .field-inner + div {
diff --git a/resources/css/components/shortcuts.css b/resources/css/components/shortcuts.css
index 575f189a9d6..5aa475a3b16 100644
--- a/resources/css/components/shortcuts.css
+++ b/resources/css/components/shortcuts.css
@@ -18,7 +18,7 @@
     min-width: 18px;
     height: 18px;
     margin: 0 .25em;
-    padding: 0 2px 2px 2px;
+    padding: 0 2px 2px 2px ; [dir="rtl"] & { padding: 0 2px 2px 2px ; }
 }
 
 .shortcut-combo {
diff --git a/resources/css/components/stacks.css b/resources/css/components/stacks.css
index 58f4b04f64b..c2280b86e85 100644
--- a/resources/css/components/stacks.css
+++ b/resources/css/components/stacks.css
@@ -17,6 +17,10 @@
     .stack-container {
         @apply absolute inset-0;
         transition: left .3s ease;
+
+        [dir='rtl'] & {
+            transition: right .3s ease;
+        }
     }
 
     .stack-overlay {
@@ -44,12 +48,20 @@
         &.stack-slide-leave-to {
             transform: translateX(10px);
             opacity: 0;
+
+            [dir='rtl'] & {
+                transform: translateX(-10px);
+            }
         }
     }
 
 
     .hovering .stack-content {
         transform: translateX(-16px);
+
+        [dir='rtl'] & {
+            transform: translateX(16px);
+        }
     }
 
     .breadcrumb svg {
@@ -60,5 +72,10 @@
 @media all and (max-width: 980px) {
     .stacks-on-stacks .stack-container {
         left: 0 !important;
+
+        [dir='rtl'] & {
+            left: unset !important;
+            right: 0 !important;
+        }
     }
 }
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 7763a2f2afb..bcd44c46d98 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -10,11 +10,11 @@
     }
 
     .fade-left {
-        @apply left-0 bg-gradient-to-r;
+        @apply rtl:right-0 ltr:left-0 rtl:bg-gradient-to-l ltr:bg-gradient-to-r;
     }
 
     .fade-right {
-        @apply right-0 bg-gradient-to-l;
+        @apply rtl:left-0 ltr:right-0 rtl:bg-gradient-to-r ltr:bg-gradient-to-l;
     }
 }
 
@@ -25,7 +25,7 @@
 .tabs {
     @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
     &-scrolled {
-        @apply pl-0 ml-0;
+        @apply rtl:pr-0 ltr:pl-0 rtl:mr-0 ltr:ml-0;
     }
 }
 
@@ -66,7 +66,7 @@
 }
 
 .button-tab {
-    @apply text-gray-700 inline-block focus:outline-none px-2 py-1 mr-1;
+    @apply text-gray-700 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1;
 
     &:hover {
         @apply text-blue;
diff --git a/resources/css/components/toggle.css b/resources/css/components/toggle.css
index cfa101240ab..193ddcd05f8 100644
--- a/resources/css/components/toggle.css
+++ b/resources/css/components/toggle.css
@@ -11,7 +11,7 @@
     }
 
     .inline-label {
-        @apply ml-2 font-normal text-gray-700;
+        @apply rtl:mr-2 ltr:ml-2 font-normal text-gray-700;
         a {
             @apply text-gray-800 underline;
             &:hover {
@@ -53,7 +53,7 @@
 .toggle-knob {
     position: absolute;
     top: 1px;
-    right: 0;
+    right: 0 ; [dir="rtl"] & { right: auto ; left: 0 ; }
     width: 20px;
     height: 20px;
     border-radius: 50%;
@@ -117,7 +117,7 @@
 .publish-sidebar .toggle-fieldtype {
     @apply flex items-center justify-between flex-wrap;
     .field-inner > label { margin: 0; }
-    .toggle-fieldtype-wrapper { margin-left: 8px; }
+    .toggle-fieldtype-wrapper { margin-left: 8px ; [dir="rtl"] & { margin-right: 8px ; margin-left: 0 ; } }
     .help-block { margin-top: 4px !important; }
 }
 
diff --git a/resources/css/components/updater.css b/resources/css/components/updater.css
index af16092212b..a616c18fd55 100644
--- a/resources/css/components/updater.css
+++ b/resources/css/components/updater.css
@@ -8,7 +8,7 @@
 	h2 {
 		font-weight: 400;
 		font-size: 30px;
-		margin: 0 0 25px 0;
+		margin: 0 0 25px 0 ; [dir="rtl"] & { margin: 0 0 25px 0 ; }
 		-webkit-font-smoothing: antialiased;
 	}
 
@@ -23,24 +23,24 @@
 		margin-top: 50px;
 
 		dt {
-			margin: 30px 0 15px 0;
+			margin: 30px 0 15px 0 ; [dir="rtl"] & { margin: 30px 0 15px 0 ; }
 		}
 
 		dd {
-			padding-left: 30px;
+			padding-left: 30px ; [dir="rtl"] & { padding-right: 30px ; padding-left: 0 ; }
 			position: relative;
 			font-size: 16px;
 			margin-bottom: 15px;
 
 			&.no-icon {
-				padding-left: 0;
+				padding-left: 0 ; [dir="rtl"] & { padding-right: 0 ; padding-left: 0 ; }
 			}
 		}
 
 		.icon {
 			position: absolute;
 			top: 0;
-			left: 0;
+		 left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
 		}
 	}
 }
@@ -69,7 +69,7 @@
 		@apply p-0;
 
 		li {
-			@apply my-2 pb-2 relative text-base pl-6;
+			@apply my-2 pb-2 relative text-base rtl:pr-6 ltr:pl-6;
 		}
 
 		li:before {
@@ -78,12 +78,12 @@
 			width: 6px;
 			content: "";
 			top: 7px;
-			left: 4px;
+		 left: 4px ; [dir="rtl"] & { left: auto ; right: 4px ; }
 
 		}
 
 		.label {
-			@apply text-3xs relative inline-block mr-2 uppercase text-center text-white rounded;
+			@apply text-3xs relative inline-block rtl:ml-2 ltr:mr-2 uppercase text-center text-white rounded;
 			padding: 2px;
 			width: 54px;
 			top: -2px;
diff --git a/resources/css/components/wizard.css b/resources/css/components/wizard.css
index ffa26305def..87b49540c45 100644
--- a/resources/css/components/wizard.css
+++ b/resources/css/components/wizard.css
@@ -8,14 +8,14 @@
     .step:not(:first-child):before {
         @apply absolute h-1 w-1/2 bg-gray-300;
         content: '';
-        left: 0;
+        left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
         top: 18px;
     }
 
     .step:not(:last-child):after {
         @apply absolute h-1 w-1/2 bg-gray-300;
         content: '';
-        left: 50%;
+        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
         top: 18px;
     }
 
diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css
index b2c6c3734b3..723d52489b9 100644
--- a/resources/css/core/layout.css
+++ b/resources/css/core/layout.css
@@ -28,6 +28,11 @@ a {
     cursor: pointer;
 }
 
+.break-all {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 @screen md {
 
     #main {
@@ -35,16 +40,16 @@ a {
     }
 
     #main .workspace {
-        padding-left: 14rem;
+        padding-left: 14rem ; [dir="rtl"] & { padding-right: 14rem ; padding-left: 0 ; }
     }
 
     #main.nav-closed {
         .nav-main {
-            left: -14rem;
+            left: -14rem ; [dir="rtl"] & { left: auto ; right: -14rem ; }
         }
 
         .workspace {
-            padding-left: 0;
+            padding-left: 0 ; [dir="rtl"] & { padding-right: 0 ; padding-left: 0 ; }
         }
     }
 }
diff --git a/resources/css/core/typography.css b/resources/css/core/typography.css
index c60e2560878..bc6edeffc3a 100644
--- a/resources/css/core/typography.css
+++ b/resources/css/core/typography.css
@@ -110,7 +110,7 @@ sup {
 .little-heading {
     font-size: 11px;
     font-weight: bold;
-    padding: 15px 0 0 20px;
+    padding: 15px 0 0 20px ; [dir="rtl"] & { padding: 15px 20px 0 0 ; }
     letter-spacing: 1px;
     text-transform: uppercase;
 }
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index c2845dacee1..6d7405a7f29 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -34,12 +34,12 @@
     }
 
     &.loading-basic {
-        text-align: left;
+        @apply ltr:text-left rtl:text-right;
         padding: 0;
 
         .icon {
             display: inline-block;
-            margin: -2px 5px 0 0;
+            margin: -2px 5px 0 0 ; [dir="rtl"] & { margin: -2px 0 0 5px ; }
         }
     }
 }
@@ -67,7 +67,7 @@
     i {
         position: relative;
         top: -1px;
-        margin-right: 10px;
+        margin-right: 10px ; [dir="rtl"] & { margin-left: 10px ; margin-right: 0 ; }
     }
 }
 
diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css
index e9c978e7133..9c87f4de6dd 100644
--- a/resources/css/elements/badges.css
+++ b/resources/css/elements/badges.css
@@ -29,7 +29,7 @@
 .filter-badge {
     @apply text-2xs text-gray-800 bg-white border border-dashed border-gray-600 flex items-center rounded-full;
     height: 1.625rem;
-    padding-left: 10px;
+    padding-left: 10px ; [dir="rtl"] & { padding-right: 10px ; padding-left: 0 ; }
 
     button {
         @apply px-2 text-base text-gray-600 flex items-center rounded;
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index fea10da5dd9..e190f872e1b 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -166,15 +166,15 @@ button {
     }
 
     button:not(:last-child):not(.active) {
-        @apply border-r-0;
+        @apply rtl:border-l-0 ltr:border-r-0;
     }
 
     button.active + button {
-        @apply border-l-0;
+        @apply rtl:border-r-0 ltr:border-l-0;
     }
 
     button:first-child {
-        @apply rounded-l;
+        @apply rtl:rounded-r ltr:rounded-l;
     }
 
     button.disabled {
@@ -182,9 +182,9 @@ button {
     }
 
     button:last-child {
-        @apply rounded-r border-l;
+        @apply rtl:rounded-l ltr:rounded-r rtl:border-r ltr:border-l;
         padding: .475rem .5rem;
-        &.btn-flat { @apply border-r-0; }
+        &.btn-flat { @apply rtl:border-l-0 ltr:border-r-0; }
     }
     .btn:focus {
         @apply ring-inset;
@@ -215,7 +215,7 @@ td .btn-icon {
 }
 
 .btn-with-icon .icon {
-    margin: -5px 7px 0 -3px;
+    margin: -5px 7px 0 -3px ; [dir="rtl"] & { margin: -5px -3px 0 7px ; }
     position: relative;
     top: 1px;
 }
@@ -224,7 +224,7 @@ td .btn-icon {
     @apply flex items-center;
 
     svg {
-        margin: 0 8px 0 -4px;
+        margin: 0 8px 0 -4px ; [dir="rtl"] & { margin: 0 -4px 0 8px ; }
         height: 16px;
         width: 16px;
 
@@ -247,7 +247,7 @@ td .btn-icon {
   ========================================================================== */
 
 .btn-close {
-    @apply ml-4 text-center p-0 text-xl text-gray-600 rounded-full w-8 h-8 outline-none shrink-0 leading-none inline-flex items-center justify-center;
+    @apply rtl:mr-4 ltr:ml-4 text-center p-0 text-xl text-gray-600 rounded-full w-8 h-8 outline-none shrink-0 leading-none inline-flex items-center justify-center;
 
     &:hover {
         @apply bg-gray-400;
diff --git a/resources/css/elements/dropdowns.css b/resources/css/elements/dropdowns.css
index b7bd59899d1..f7d51f7aefd 100644
--- a/resources/css/elements/dropdowns.css
+++ b/resources/css/elements/dropdowns.css
@@ -6,7 +6,7 @@
     @apply p-2;
 
     button, a {
-        @apply block w-full text-left rounded-sm text-xs font-normal px-2 py-1 text-gray-800;
+        @apply block w-full rtl:text-right ltr:text-left rounded-sm text-xs font-normal px-2 py-1 text-gray-800;
         line-height: 1.4;
         white-space: nowrap;
 
@@ -16,12 +16,12 @@
 
         .icon {
             color: #d0d4d7 !important;
-            margin-right: 6px;
-            margin-left: -4px;
+            margin-right: 6px ; [dir="rtl"] & { margin-left: 6px ; margin-right: 0 ; }
+            margin-left: -4px ; [dir="rtl"] & { margin-right: -4px ; margin-left: 0 ; }
             font-size: 12px;
             width: 20px;
             display: block;
-            float: left;
+            float: left ; [dir="rtl"] & { float: right ; }
             position: relative;
             top: 2px;
             line-height: inherit;
@@ -43,6 +43,6 @@
     }
 
     .align-left & {
-        right: auto;
+        right: auto ; [dir="rtl"] & { right: auto ; left: auto ; }
     }
 }
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index fdedd8ed8f5..b615e32a444 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -76,15 +76,19 @@ input.input-text-minimal:read-only,
     }
 
     .input-text:not(:first-child) {
-        @apply rounded-l-none border-l-0;
+        @apply rtl:rounded-r-none ltr:rounded-l-none rtl:border-r-0 ltr:border-l-0;
     }
 
     .input-text:not(:last-child) {
-        @apply rounded-r-none border-r-0;
+        @apply rtl:rounded-l-none ltr:rounded-r-none rtl:border-l-0 ltr:border-r-0;
+    }
+
+    .input-text[dir='ltr']:not(:last-child) {
+        @apply rtl:rounded-r rtl:border-r;
     }
 
     .input-group-prepend, .input-group-append, .input-group-item {
-        @apply rounded-l px-2 border text-sm text-gray-800 select-none;
+        @apply rtl:rounded-r ltr:rounded-l px-2 border text-sm text-gray-800 select-none;
         background: linear-gradient(180deg, #fff, #f9fafb);
         border: 1px solid #c4cdd6;
         box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
@@ -104,7 +108,7 @@ input.input-text-minimal:read-only,
     }
 
     .input-group-item {
-        @apply rounded-l-none -mx-px;
+        @apply rtl:rounded-r-none ltr:rounded-l-none -mx-px;
     }
 
     button.input-group-item:hover:not(:disabled),
@@ -118,13 +122,13 @@ input.input-text-minimal:read-only,
     }
 
     .input-group-append {
-        @apply rounded-l-none border-r-0; /*  Rounded on the right side */
-        &:last-child { @apply rounded-r border-r; }
+        @apply rtl:rounded-r-none ltr:rounded-l-none rtl:border-l-0 ltr:border-r-0; /*  Rounded on the right side */
+        &:last-child { @apply rtl:rounded-l ltr:rounded-r rtl:border-l ltr:border-r; }
     }
 
     > *:last-child[class*="input-group-"],
     > *:last-child [class*="input-group-"] {
-        @apply rounded-r;
+        @apply rtl:rounded-l ltr:rounded-r;
     }
 
 }
@@ -151,7 +155,7 @@ input.input-text-minimal:read-only,
     }
 
     input {
-        @apply leading-normal mr-1;
+        @apply leading-normal rtl:ml-1 ltr:mr-1;
     }
 
     label {
@@ -164,7 +168,7 @@ input.input-text-minimal:read-only,
     @apply flex items-center flex-wrap;
 
     .option {
-        @apply mr-4 mb-3;
+        @apply rtl:ml-4 ltr:mr-4 mb-3;
         &:first-child {
             @apply mt-3;
         }
@@ -185,14 +189,14 @@ input.input-text-minimal:read-only,
     @apply rounded relative;
 
     select {
-        @apply text-sm text-gray-800 shadow-button cursor-pointer block w-full h-full text-left relative max-w-full;
+        @apply text-sm text-gray-800 shadow-button cursor-pointer block w-full h-full rtl:text-right ltr:text-left relative max-w-full;
         @apply select-none rounded leading-normal align-middle whitespace-nowrap appearance-none subpixel-antialiased;
 
         background: linear-gradient(180deg, #fff, #f9fafb);
         border: 1px solid #c4cdd6;
         height: 2.375rem; /*  38px */
         letter-spacing: -0.01em;
-        padding: .475rem 1.75rem .475rem .75rem;
+        padding: .475rem 1.75rem .475rem .75rem ; [dir="rtl"] & { padding: .475rem .75rem .475rem 1.75rem ; }
 
         &:hover:not(:disabled), &:active:not(:disabled) {
             background: linear-gradient(180deg, #f9fafb, #f4f6f8);
@@ -201,7 +205,7 @@ input.input-text-minimal:read-only,
     }
 
     .select-input-toggle {
-        @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-900;
+        @apply pointer-events-none absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center px-2 text-gray-900;
 
         svg {
             @apply fill-current h-4 w-4;
@@ -215,7 +219,7 @@ label .required {
     font-style: normal;
 
     + .localizable-icon {
-        margin-left: 5px;
+        margin-left: 5px ; [dir="rtl"] & { margin-right: 5px ; margin-left: 0 ; }
     }
 }
 
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index d0637f9cbab..d7fc2cc07b0 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -17,11 +17,11 @@
 
 .data-list-bulk-actions {
 	@apply bg-white absolute w-full py-2 z-1;
-	padding-left: 56px;
+	padding-left: 56px ; [dir="rtl"] & { padding-right: 56px ; padding-left: 0 ; }
 }
 
 .mode-grid .data-list-bulk-actions {
-	@apply bg-white w-full pt-3 pb-1 z-10 pl-4 static;
+	@apply bg-white w-full pt-3 pb-1 z-10 rtl:pr-4 ltr:pl-4 static;
 }
 
 .mode-grid .rotating-dots-button {
@@ -29,11 +29,11 @@
 }
 
 .data-list-footer {
-    @apply py-3 pr-4 flex items-center border-t;
+    @apply py-3 rtl:pl-4 ltr:pr-4 flex items-center border-t;
 }
 
 .data-table {
-	@apply text-left text-gray-700 outline-none max-w-full w-full;
+	@apply rtl:text-right ltr:text-left text-gray-700 outline-none max-w-full w-full;
 	overflow-x: auto;
 
     thead {
@@ -45,8 +45,8 @@
 
         th {
             @apply font-medium px-4 py-3 whitespace-nowrap;
-            &:first-child { @apply rounded-tl-lg; }
-			&:last-child { @apply rounded-tr-lg; }
+            &:first-child { @apply rtl:rounded-tr-lg ltr:rounded-tl-lg; }
+			&:last-child { @apply rtl:rounded-tl-lg ltr:rounded-tr-lg; }
 			&:hover {
 				@apply text-gray-900;
 			}
@@ -55,7 +55,7 @@
             @apply p-0 w-4;
         }
 		.type-column {
-			text-align: right;
+			@apply ltr:text-right rtl:text-left;
 		}
 	}
 
@@ -70,11 +70,11 @@
 
 			&:first-child {
 				td:first-child, th:first-child {
-				    @apply rounded-tl-md;
+				    @apply rtl:rounded-tr-md ltr:rounded-tl-md;
 				}
 
 				td:last-child, th:last-child {
-				    @apply rounded-tr-md;
+				    @apply rtl:rounded-tl-md ltr:rounded-tr-md;
 				}
 			}
 
@@ -82,11 +82,11 @@
 				@apply border-none;
 
                 td:first-child, th:first-child {
-				    @apply rounded-bl-md;
+				    @apply rtl:rounded-br-md ltr:rounded-bl-md;
 				}
 
 				td:last-child, th:last-child {
-				    @apply rounded-br-md;
+				    @apply rtl:rounded-bl-md ltr:rounded-br-md;
 				}
 			}
 
@@ -95,7 +95,7 @@
             }
 
             th {
-                @apply py-2 pr-4;
+                @apply py-2 rtl:pl-4 ltr:pr-4;
             }
 
             td {
@@ -103,12 +103,12 @@
             }
 
             td.table-drag-handle {
-                @apply w-1 border-r h-full py-2 px-0;
+                @apply w-1 rtl:border-l ltr:border-r h-full py-2 px-0;
             }
 		}
 
         .type-column {
-			text-align: right;
+			@apply ltr:text-right rtl:text-left;
 		}
     }
 
@@ -141,42 +141,42 @@
 /* Sticky Meta Columns */
 .data-table {
     thead th.checkbox-column {
-        @apply p-0 pr-2 sticky z-1 -left-px;
+        @apply p-0 rtl:pl-2 ltr:pr-2 sticky z-1 rtl:-right-px ltr:-left-px;
         width: 45px;
         min-width: 45px;
         &:after {
-            @apply absolute left-0 right-0 top-0 bottom-0 -z-1 ;
+            @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1 ;
             content: '';
             background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
         }
     }
 
     thead th.actions-column {
-        @apply p-0 pl-2 text-right sticky -right-px;
+        @apply p-0 rtl:pr-2 ltr:pl-2 rtl:text-left ltr:text-right sticky rtl:-left-px ltr:-right-px;
         width: 45px;
         min-width: 45px;
         &:after {
-            @apply absolute left-0 right-0 top-0 bottom-0 -z-1;
+            @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1;
             content: '';
             background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
         }
     }
 
     tbody th.checkbox-column {
-        @apply px-3 sticky -left-px;
+        @apply px-3 sticky rtl:-right-px ltr:-left-px;
         &:after {
-            @apply absolute left-0 right-0 top-0 bottom-0 -z-1;
+            @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1;
             content: '';
             background-image: linear-gradient(to right, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
         }
     }
 
     tbody th.actions-column {
-        @apply p-0 pl-2 text-right sticky -right-px;
+        @apply p-0 rtl:pr-2 ltr:pl-2 rtl:text-left ltr:text-right sticky rtl:-left-px ltr:-right-px;
         min-width: 45px;
         width: 45px;
         &:after {
-            @apply absolute left-0 right-0 top-0 bottom-0 -z-1;
+            @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1;
             content: '';
             background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
         }
@@ -223,7 +223,7 @@
 }
 
 .data-list-filter-link {
-	@apply border-gray-400 text-gray-600 mr-2 p-3 pb-2;
+	@apply border-gray-400 text-gray-600 rtl:ml-2 ltr:mr-2 p-3 pb-2;
 
 	&:hover {
 		@apply border-b-3 text-gray-700;
@@ -241,7 +241,7 @@
 }
 
 td.table-drag-handle {
-	@apply w-3 border-r h-full p-2;
+	@apply w-3 rtl:border-l ltr:border-r h-full p-2;
     min-width: 16px;
 	cursor: grab;
 	background: theme('colors.gray.200') url('../../svg/icons/light/drag-dots.svg') center center no-repeat;
@@ -263,7 +263,7 @@ td.table-drag-handle {
 	text-align: center;
 	height: 22px;
 	width: 22px;
-	float: right;
+	float: right ; [dir="rtl"] & { float: left ; }
 	cursor: pointer;
 
 	&:hover {
@@ -280,8 +280,8 @@ td.table-drag-handle {
 		content: "";
 		position: absolute;
 		bottom: -1px;
-		left: 0;
-		right: 0;
+	 left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
+	 right: 0 ; [dir="rtl"] & { right: auto ; left: 0 ; }
 		height: 2px;
 	}
 
@@ -293,9 +293,9 @@ td.table-drag-handle {
     }
 	.icon {
         position: relative;
-        float: right;
+        float: right ; [dir="rtl"] & { float: left ; }
         top: 6px;
-        right: 5px;
+        right: 5px ; [dir="rtl"] & { right: auto ; left: 5px ; }
 	}
 
 	.icon, .icon:before {
@@ -309,7 +309,7 @@ td.table-drag-handle {
 }
 
 .column-actions {
-	text-align: right;
+	@apply ltr:text-right rtl:text-left;
 	width: 30px;
 }
 
@@ -319,7 +319,7 @@ table.control {
 
 .flush table.control {
     tr th:first-child {
-        padding-left: 30px;
+        padding-left: 30px ; [dir="rtl"] & { padding-right: 30px ; padding-left: 0 ; }
     }
 }
 
@@ -343,7 +343,7 @@ table.control {
 .relationship-index-field {
     min-width: 10vw;
     .relationship-index-field-item {
-        @apply rounded bg-gray-100 border px-1 flex items-center text-2xs mr-1;
+        @apply rounded bg-gray-100 border px-1 flex items-center text-2xs rtl:ml-1 ltr:mr-1;
         a {
             @apply line-clamp-1;
         }
diff --git a/resources/css/rtl.css b/resources/css/rtl.css
new file mode 100644
index 00000000000..56eab3a7028
--- /dev/null
+++ b/resources/css/rtl.css
@@ -0,0 +1,30 @@
+[dir='rtl'] {
+    .space-x-1>:not([hidden])~:not([hidden]) {
+        margin-left: calc(.25rem * var(--tw-space-x-reverse)) !important;
+        margin-right: calc(.25rem * calc(1 - var(--tw-space-x-reverse))) !important;
+    }
+    .space-x-2>:not([hidden])~:not([hidden]) {
+        margin-left: calc(.5rem * var(--tw-space-x-reverse)) !important;
+        margin-right: calc(.5rem * calc(1 - var(--tw-space-x-reverse))) !important;
+    }
+    .space-x-3>:not([hidden])~:not([hidden]) {
+        margin-left: calc(.75rem * var(--tw-space-x-reverse))!important;
+        margin-right: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))!important;
+    }
+
+    input[name='url'] {
+        direction: ltr;
+    }
+
+    .vc-arrow {
+        transform: rotate(180deg);
+    }
+}
+@media (min-width: 576px) {
+    [dir='rtl'] {
+        .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
+            margin-left: calc(.75rem * var(--tw-space-x-reverse)) !important;
+            margin-right: calc(.75rem * calc(1 - var(--tw-space-x-reverse))) !important;
+        }
+    }
+}
diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
index dfeb0ff22ba..86aa4b63044 100644
--- a/resources/css/tailwind.css
+++ b/resources/css/tailwind.css
@@ -3,3 +3,4 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import "core/utilities";
+@import "rtl";
diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css
index e5fd8737dae..bace7523671 100644
--- a/resources/css/vendors/codemirror.css
+++ b/resources/css/vendors/codemirror.css
@@ -36,7 +36,7 @@
   .CodeMirror-linenumber {
     padding: 0 3px 0 5px;
     min-width: 20px;
-    text-align: right;
+    @apply text-right;
     color: #999;
     white-space: nowrap;
   }
@@ -270,7 +270,7 @@
 
   .CodeMirror-widget {}
 
-  .CodeMirror-rtl pre { direction: rtl; }
+  .CodeMirror-rtl pre { direction: ltr; }
 
   .CodeMirror-code {
     outline: none;
diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css
index d232af064f8..a279b3159f5 100644
--- a/resources/css/vendors/vue-select.css
+++ b/resources/css/vendors/vue-select.css
@@ -1,5 +1,9 @@
 .v-select {
 	@apply rounded min-w-0 relative font-sans;
+
+    [dir='rtl'] & {
+        direction: rtl;
+    }
 }
 
 .vs__fade-enter-active,
@@ -68,7 +72,7 @@
 
 .v-select .vs__selected-options {
 	@apply appearance-none text-gray-800 text-sm;
-	@apply flex basis-1 grow rounded-l relative h-full py-1 pl-2 leading-normal;
+    @apply flex basis-1 grow rounded-s relative h-full py-1 rtl:pr-2 ltr:pl-2 leading-normal;
 	width: calc(100% - 32px);
 
     transition: border-color .15s ease-in-out,
@@ -81,12 +85,12 @@
 
 .vs--single.vs--unsearchable .vs__selected-options {
 	@apply clickable;
-	@apply flex flex-1 rounded-l relative h-full border-0;
+    @apply flex flex-1 rounded-s relative h-full border-0;
 	width: calc(100% - 34px);
 }
 
 .vs__actions {
-	@apply flex items-center rounded-r;
+    @apply flex items-center rounded-e;
     height: 2.375rem;
 }
 
@@ -100,7 +104,7 @@
 
 .vs__open-indicator {
 	@apply clickable;
-	@apply flex items-center rounded-r px-2 text-sm shrink-0 h-full border-r-0;
+    @apply flex items-center rounded-e px-2 text-sm shrink-0 h-full border-e-0;
 	/* height: 2.375rem; */
 }
 
@@ -123,7 +127,7 @@
 }
 
 .vs__clear {
-	@apply text-gray-900 pr-2 pl-px @xs:pl-2 cursor-pointer text-base bg-transparent shadow-none;
+	@apply text-gray-900 rtl:pl-2 ltr:pr-2 rtl:pr-px ltr:pl-px rtl:@xs:pr-2 ltr:@xs:pl-2 cursor-pointer text-base bg-transparent shadow-none;
 	&:hover {
 		@apply text-blue;
 	}
@@ -131,15 +135,18 @@
 
 .vs__dropdown-menu {
 	@apply block absolute z-top m-0 w-full;
-	@apply bg-white flex flex-col shadow-popover block p-4 rounded-md text-left;
+	@apply bg-white flex flex-col shadow-popover block p-4 rounded-md rtl:text-right ltr:text-left;
 	top: 46px;
-	left: 0;
 	padding: 0;
 	max-height: 350px;
 	min-width: 160px;
 	overflow-y: auto;
-	text-align: left;
+	@apply ltr:text-left rtl:text-right;
 	list-style: none;
+
+    .v-select & {
+        @apply ltr:left-0 rtl:right-0;
+    }
 }
 
 .vs__no-options {
@@ -162,13 +169,13 @@
 
 .v-select:not(.vs--single) .vs__selected {
 	@apply clickable;
-	@apply flex items-center text-sm rounded py-0 px-2 mr-2;
+	@apply flex items-center text-sm rounded py-0 px-2 rtl:ml-2 ltr:mr-2;
 
     &.sortable-item { @apply cursor-grab; }
 }
 
 .vs__deselect {
-	@apply flex items-center cursor-pointer text-gray-600 ml-1 p-0 outline-none;
+	@apply flex items-center cursor-pointer text-gray-600 rtl:mr-1 ltr:ml-1 p-0 outline-none;
 
 	&:hover {
 		@apply text-gray-700;
@@ -212,7 +219,7 @@
 
 .vs__search,
 .vs__search:focus {
-	@apply appearance-none text-sm text-gray-800 pr-2 border-transparent outline-none m-0 p-0 bg-transparent max-w-full;
+	@apply appearance-none text-sm text-gray-800 rtl:pl-2 ltr:pr-2 border-transparent outline-none m-0 p-0 bg-transparent max-w-full;
 	line-height: 1.4;
 	border-left: none;
 	box-shadow: none;
diff --git a/resources/js/components/AddonDetails.vue b/resources/js/components/AddonDetails.vue
index 5149f516845..9d56a4775b1 100644
--- a/resources/js/components/AddonDetails.vue
+++ b/resources/js/components/AddonDetails.vue
@@ -2,7 +2,7 @@
     <div>
         <div class="flex items-center mb-6">
             <h1 class="flex-1" v-text="addon.name" />
-            <a :href="addon.url" target="_blank" class="btn mr-4" v-text="__('View on Marketplace')" />
+            <a :href="addon.url" target="_blank" class="btn rtl:ml-4 ltr:mr-4" v-text="__('View on Marketplace')" />
             <button v-if="addon.installed" class="btn" @click="showComposerInstructions" v-text="__('Uninstall')" />
             <button v-else class="btn btn-primary" @click="showComposerInstructions" v-text="__('Install')" />
         </div>
@@ -33,7 +33,7 @@
                 <div class="flex-1 text-lg">
                     <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Seller')" />
                     <a :href="addon.seller.website" class="relative flex items-center">
-                        <img :src="addon.seller.avatar" :alt="addon.seller.name" class="rounded-full w-6 mr-2">
+                        <img :src="addon.seller.avatar" :alt="addon.seller.name" class="rounded-full w-6 rtl:ml-2 ltr:mr-2">
                         <span class="font-bold">{{ addon.seller.name }}</span>
                     </a>
                 </div>
diff --git a/resources/js/components/AddonList.vue b/resources/js/components/AddonList.vue
index 09658a2c2c4..bb03a468f1c 100644
--- a/resources/js/components/AddonList.vue
+++ b/resources/js/components/AddonList.vue
@@ -51,7 +51,7 @@
 
                 <div class="addon-grid my-8" :class="{ 'opacity-50': loading }">
                     <div class="addon-card bg-white text-gray-800 h-full shadow rounded cursor-pointer relative" v-for="addon in addons" :key="addon.id" @click="showAddon(addon)">
-                        <span class="badge absolute top-0 left-0 mt-2 ml-2" v-if="addon.installed">Installed</span>
+                        <span class="badge absolute top-0 rtl:right-0 ltr:left-0 mt-2 rtl:mr-2 ltr:ml-2" v-if="addon.installed">Installed</span>
                         <div class="h-48 rounded-t bg-cover bg-center" :style="'background-image: url(\''+getCover(addon)+'\')'"></div>
                         <div class="px-6 mb-4 relative text-center">
                             <a :href="addon.seller.website" class="relative">
diff --git a/resources/js/components/FavoriteCreator.vue b/resources/js/components/FavoriteCreator.vue
index d132c3ee599..29c85e8e1ec 100644
--- a/resources/js/components/FavoriteCreator.vue
+++ b/resources/js/components/FavoriteCreator.vue
@@ -10,9 +10,9 @@
                 <h6 class="mb-2">{{ __('Pin to Favorites') }}</h6>
                 <div class="flex items-center">
                     <input type="text" class="input-text w-auto" ref="fave" v-model="name" @keydown.enter="save" />
-                    <button @click="save" class="btn-primary ml-2">{{ __('Save') }}</button>
+                    <button @click="save" class="btn-primary rtl:mr-2 ltr:ml-2">{{ __('Save') }}</button>
                 </div>
-                <button @click="makeStartPage" class="mt-2 text-xs text-blue outline-none hover:text-blue-800">{{ __('Set as start page') }} &rarr;</button>
+                <button @click="makeStartPage" class="mt-2 text-xs text-blue outline-none hover:text-blue-800">{{ __('Set as start page') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></button>
             </div>
         </popover>
         <div v-else>
@@ -50,7 +50,11 @@ export default {
 
         isNotYetFavorited() {
             return this.persistedFavorite === undefined;
-        }
+        },
+
+        direction() {
+            return this.$config.get('direction', 'rtl');
+        },
     },
 
     methods: {
diff --git a/resources/js/components/GlobalSearch.vue b/resources/js/components/GlobalSearch.vue
index 9b475bc7955..84b86d5da51 100644
--- a/resources/js/components/GlobalSearch.vue
+++ b/resources/js/components/GlobalSearch.vue
@@ -27,7 +27,7 @@
 
             <div v-if="hasResults" v-for="(result, index) in results" class="global-search-result-item p-2 flex items-center" :class="{ 'active': current == index }" @click="hit" @mousemove="setActive(index)">
                 <svg-icon :name="`light/${getResultIcon(result)}`" class="icon"></svg-icon>
-                <div class="flex-1 ml-2 title" v-html="result.title"></div>
+                <div class="flex-1 rtl:mr-2 ltr:ml-2 title" v-html="result.title"></div>
                 <span class="rounded px-1 text-2xs border bg-gray-200 text-gray" v-text="result.badge" />
             </div>
 
@@ -37,7 +37,7 @@
                 <div v-for="(favorite, index) in favorites" class="global-search-result-item flex items-center" :class="{ 'active': current == index }" @mousemove="setActive(index)">
                     <div class="flex items-center flex-1 p-2" @click="hit">
                         <svg-icon name="light/pin" class="w-4 h-4"></svg-icon>
-                        <div class="ml-2 title" v-text="favorite.name"></div>
+                        <div class="rtl:mr-2 ltr:ml-2 title" v-text="favorite.name"></div>
                     </div>
                     <div class="p-2 text-gray-600 hover:text-gray-800" @click="removeFavorite(favorite)">&times;</div>
                 </div>
diff --git a/resources/js/components/GlobalSiteSelector.vue b/resources/js/components/GlobalSiteSelector.vue
index b4c8e9dc08d..ac2626ed1e9 100644
--- a/resources/js/components/GlobalSiteSelector.vue
+++ b/resources/js/components/GlobalSiteSelector.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="site-selector flex items-center mr-4 h-full border-l border-r">
+    <div class="site-selector flex items-center rtl:ml-4 ltr:mr-4 h-full border-l border-r">
         <v-select
             :options="sites"
             label="name"
@@ -12,7 +12,7 @@
         >
             <template #selected-option="option">
                 <div class="flex items-center px-2 text-sm text-gray hover:text-gray-800 anti">
-                    <svg-icon name="light/sites" class="mr-2 h-4 w-4" />
+                    <svg-icon name="light/sites" class="rtl:ml-2 ltr:mr-2 h-4 w-4" />
                     <div class="whitespace-nowrap">{{ __(option.name) }}</div>
                 </div>
             </template>
diff --git a/resources/js/components/SessionExpiry.vue b/resources/js/components/SessionExpiry.vue
index e40cda9a46e..b8d82202eee 100644
--- a/resources/js/components/SessionExpiry.vue
+++ b/resources/js/components/SessionExpiry.vue
@@ -39,7 +39,7 @@
                             tabindex="1"
                             autofocus
                             @keydown.enter.prevent="submit" />
-                        <button @click="submit" class="btn-primary ml-2" v-text="__('Log in')" />
+                        <button @click="submit" class="btn-primary rtl:mr-2 ltr:ml-2" v-text="__('Log in')" />
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/addons/Editions.vue b/resources/js/components/addons/Editions.vue
index aecf13564db..619822152c0 100644
--- a/resources/js/components/addons/Editions.vue
+++ b/resources/js/components/addons/Editions.vue
@@ -15,7 +15,7 @@
                 />
             </div>
 
-            <loading-graphic inline v-if="saving" text="" class="ml-4" />
+            <loading-graphic inline v-if="saving" text="" class="rtl:mr-4 ltr:ml-4" />
         </div>
     </div>
 </template>
diff --git a/resources/js/components/assets/AssetManager.vue b/resources/js/components/assets/AssetManager.vue
index a272e26519d..b6e77d50af6 100644
--- a/resources/js/components/assets/AssetManager.vue
+++ b/resources/js/components/assets/AssetManager.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center mb-6">
             <h1 class="flex-1">{{ __(container.title) }}</h1>
 
-            <dropdown-list v-if="container.can_edit || container.can_delete" class="ml-4">
+            <dropdown-list v-if="container.can_edit || container.can_delete" class="rtl:mr-4 ltr:ml-4">
                 <dropdown-item
                     v-if="container.can_edit"
                     v-text="__('Edit Container')"
@@ -29,7 +29,7 @@
                 </dropdown-item>
             </dropdown-list>
 
-            <a :href="createContainerUrl" class="btn ml-4" v-if="canCreateContainers">{{ __('Create Container') }}</a>
+            <a :href="createContainerUrl" class="btn rtl:mr-4 ltr:ml-4" v-if="canCreateContainers">{{ __('Create Container') }}</a>
         </div>
 
         <asset-browser
diff --git a/resources/js/components/assets/Browser/Breadcrumbs.vue b/resources/js/components/assets/Browser/Breadcrumbs.vue
index 2919e132ed6..9fe65a1ed78 100644
--- a/resources/js/components/assets/Browser/Breadcrumbs.vue
+++ b/resources/js/components/assets/Browser/Breadcrumbs.vue
@@ -7,9 +7,9 @@
             @click="selectFolder(index)"
             class="group flex items-center"
         >
-            <svg-icon name="micro/chevron-right" class="text-gray-700 h-4 w-4 mr-1" v-if="index !== 0" />
-            <svg-icon name="folder-home" class="mr-2 h-5 w-5 text-blue-400 group-hover:text-blue-600" v-if="part === '/'" />
-            <svg-icon name="folder" class="mr-2 h-5 w-5 text-blue-400 group-hover:text-blue-600" v-else />
+            <svg-icon name="micro/chevron-right" class="text-gray-700 h-4 w-4 rtl:ml-1 ltr:mr-1 rtl:rotate-180" v-if="index !== 0" />
+            <svg-icon name="folder-home" class="rtl:ml-2 ltr:mr-2 h-5 w-5 text-blue-400 group-hover:text-blue-600" v-if="part === '/'" />
+            <svg-icon name="folder" class="rtl:ml-2 ltr:mr-2 h-5 w-5 text-blue-400 group-hover:text-blue-600" v-else />
             <span class="text-gray-700 text-2xs group-hover:text-gray-800" v-if="part !== '/'" v-text="part" />
         </a>
     </div>
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index c513dccc3f1..6e5ee08a5c0 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -50,17 +50,17 @@
                                 <div class="flex items-center justify-between p-2 text-sm">
                                     <data-list-search class="h-8" ref="search" v-model="searchQuery" />
 
-                                    <button v-if="canCreateFolders" class="btn btn-sm ml-3" @click="creatingFolder = true">
-                                        <svg-icon name="folder-add" class="h-4 w-4 mr-2" />
+                                    <button v-if="canCreateFolders" class="btn btn-sm rtl:mr-3 ltr:ml-3" @click="creatingFolder = true">
+                                        <svg-icon name="folder-add" class="h-4 w-4 rtl:ml-2 ltr:mr-2" />
                                         <span>{{ __('Create Folder') }}</span>
                                     </button>
 
-                                    <button v-if="canUpload" class="btn btn-sm ml-3" @click="openFileBrowser">
-                                        <svg-icon name="upload" class="h-4 w-4 mr-2 text-current" />
+                                    <button v-if="canUpload" class="btn btn-sm rtl:mr-3 ltr:ml-3" @click="openFileBrowser">
+                                        <svg-icon name="upload" class="h-4 w-4 rtl:ml-2 ltr:mr-2 text-current" />
                                         <span>{{ __('Upload') }}</span>
                                     </button>
 
-                                    <div class="btn-group ml-3">
+                                    <div class="btn-group rtl:mr-3 ltr:ml-3">
                                         <button class="btn btn-sm" @click="setMode('grid')" :class="{'active': mode === 'grid'}">
                                             <svg-icon name="assets-mode-grid" class="h-4 w-4"/>
                                         </button>
@@ -103,7 +103,7 @@
                                         <td />
                                         <td @click="selectFolder(folder.parent_path)">
                                             <a class="flex items-center cursor-pointer group">
-                                                <file-icon extension="folder" class="w-8 h-8 mr-2 inline-block text-blue-400 group-hover:text-blue" />
+                                                <file-icon extension="folder" class="w-8 h-8 rtl:ml-2 ltr:mr-2 inline-block text-blue-400 group-hover:text-blue" />
                                                 ..
                                             </a>
                                         </td>
@@ -113,7 +113,7 @@
                                         <td />
                                         <td @click="selectFolder(folder.path)">
                                             <a class="flex items-center cursor-pointer group">
-                                                <file-icon extension="folder" class="w-8 h-8 mr-2 inline-block text-blue-400 group-hover:text-blue" />
+                                                <file-icon extension="folder" class="w-8 h-8 rtl:ml-2 ltr:mr-2 inline-block text-blue-400 group-hover:text-blue" />
                                                 {{ folder.basename }}
                                             </a>
                                         </td>
@@ -136,7 +136,7 @@
 
                                 <template slot="cell-basename" slot-scope="{ row: asset, checkboxId }">
                                     <div class="flex items-center w-fit-content group">
-                                        <asset-thumbnail :asset="asset" :square="true" class="w-8 h-8 mr-2 cursor-pointer" @click.native.stop="$emit('edit-asset', asset)" />
+                                        <asset-thumbnail :asset="asset" :square="true" class="w-8 h-8 rtl:ml-2 ltr:mr-2 cursor-pointer" @click.native.stop="$emit('edit-asset', asset)" />
                                         <label :for="checkboxId" class="cursor-pointer select-none group-hover:text-blue normal-nums" @click.stop="$emit('edit-asset', asset)">
                                             {{ asset.basename }}
                                         </label>
@@ -189,7 +189,7 @@
                                             <div class="asset-filename text-center w-full px-2 py-1" v-text="folder.basename" :title="folder.basename" />
                                         </div>
                                         <dropdown-list v-if="folderActions(folder).length"
-                                            class="absolute top-1 right-2 opacity-0 group-hover:opacity-100"
+                                            class="absolute top-1 rtl:left-2 ltr:right-2 opacity-0 group-hover:opacity-100"
                                             :class="{ 'opacity-100': actionOpened === folder.path }"
                                             @opened="actionOpened = folder.path"
                                             @closed="actionOpened = null"
@@ -230,7 +230,7 @@
                                             </div>
                                         </div>
                                         <dropdown-list
-                                            class="absolute top-1 right-2 opacity-0 group-hover:opacity-100"
+                                            class="absolute top-1 rtl:left-2 ltr:right-2 opacity-0 group-hover:opacity-100"
                                             :class="{ 'opacity-100': actionOpened === asset.id }"
                                             @opened="actionOpened = asset.id"
                                             @closed="actionOpened = null"
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index a04e9473aa7..bdc5bdc38b9 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -17,52 +17,52 @@
             <div id="asset-editor-header" class="flex justify-between w-full px-2 relative">
                 <button class="flex items-center p-4 group" @click="open" v-tooltip.right="__('Open in a new window')" :aria-label="__('Open in a new window')">
                     <svg-icon name="folder-image" class="text-gray-700 h-5 w-5" />
-                    <span class="ml-2 text-sm text-gray-800 group-hover:text-blue">{{ asset.path }}</span>
-                    <svg-icon name="micro/chevron-right" class="text-gray-700 h-5 w-5 group-hover:text-blue" />
+                    <span class="rtl:mr-2 ltr:ml-2 text-sm text-gray-800 group-hover:text-blue">{{ asset.path }}</span>
+                    <svg-icon name="micro/chevron-right" class="text-gray-700 h-5 w-5 group-hover:text-blue rtl:rotate-180" />
                 </button>
-                <button class="btn-close absolute top-2 right-2.5" @click="close" :aria-label="__('Close Editor')">&times;</button>
+                <button class="btn-close absolute top-2 rtl:left-2.5 ltr:right-2.5" @click="close" :aria-label="__('Close Editor')">&times;</button>
             </div>
 
             <div class="flex flex-1 flex-col md:flex-row md:justify-between grow overflow-scroll">
 
                 <!-- Visual Area -->
-                <div class="editor-preview bg-gray-800 md:rounded-tr-md flex flex-col justify-between flex-1 min-h-[45vh] md:min-h-auto md:flex-auto md:grow w-full md:w-1/2 lg:w-2/3 shadow-[inset_0px_4px_3px_0px_black]">
+                <div class="editor-preview bg-gray-800 rtl:md:rounded-tl-md ltr:md:rounded-tr-md flex flex-col justify-between flex-1 min-h-[45vh] md:min-h-auto md:flex-auto md:grow w-full md:w-1/2 lg:w-2/3 shadow-[inset_0px_4px_3px_0px_black]">
 
                     <!-- Toolbar -->
                     <div id="asset-editor-toolbar" class="@container/toolbar flex items-center justify-center py-4 px-2 text-2xs text-white text-center space-x-1 sm:space-x-3" v-if="isToolbarVisible">
                         <button v-if="isImage && isFocalPointEditorEnabled" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center justify-center px-3 py-1.5" @click.prevent="openFocalPointEditor">
                             <svg-icon name="focal-point" class="h-4" />
-                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Focal Point') }}</span>
+                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Focal Point') }}</span>
                         </button>
 
                         <button v-if="canRunAction('rename_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('rename_asset')">
                             <svg-icon name="rename-file" class="h-4" />
-                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Rename') }}</span>
+                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Rename') }}</span>
                         </button>
 
                         <button v-if="canRunAction('move_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('move_asset')">
                             <svg-icon name="move-file" class="h-4" />
-                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Move') }}</span>
+                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Move') }}</span>
                         </button>
 
                         <button v-if="canRunAction('replace_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('replace_asset')">
                             <svg-icon name="swap" class="h-4" />
-                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Replace') }}</span>
+                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Replace') }}</span>
                         </button>
 
                         <button v-if="canRunAction('reupload_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('reupload_asset')">
                             <svg-icon name="upload-cloud" class="h-4" />
-                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Reupload') }}</span>
+                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Reupload') }}</span>
                         </button>
 
                         <button v-if="asset.allowDownloading" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click="download" :aria-label="__('Download file')">
                             <svg-icon name="download-desktop" class="h-4"/>
-                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Download') }}</span>
+                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Download') }}</span>
                         </button>
 
                         <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-red-400 rounded items-center text-center px-3 py-1.5">
                             <svg-icon name="trash" class="h-4" />
-                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Delete') }}</span>
+                            <span class="rtl:mr-2 ltr:ml-2 hidden @3xl/toolbar:inline-block">{{ __('Delete') }}</span>
                         </button>
                     </div>
 
@@ -81,10 +81,10 @@
                                     <div class="flex-1 order-r p-4 border-gray-900 flex items-center justify-center">
                                         <img :src="asset.url" class="asset-thumb w-4 h-4" />
                                     </div>
-                                    <div class="flex-1 border-l border-r p-4 border-gray-900 flex items-center justify-center">
+                                    <div class="flex-1 rtl:border-r ltr:border-l rtl:border-l ltr:border-r p-4 border-gray-900 flex items-center justify-center">
                                         <img :src="asset.url" class="asset-thumb w-12 h-12" />
                                     </div>
-                                    <div class="flex-1 border-l p-4 border-gray-900 flex items-center justify-center">
+                                    <div class="flex-1 rtl:border-r ltr:border-l p-4 border-gray-900 flex items-center justify-center">
                                         <img :src="asset.url" class="asset-thumb w-24 h-24" />
                                     </div>
                                 </div>
@@ -141,16 +141,16 @@
 
             <div class="bg-gray-200 w-full border-t flex items-center justify-end py-3 px-4 rounded-b">
                 <div id="asset-meta-data" class="flex-1 hidden sm:flex space-x-3 py-1 h-full text-xs text-gray-800">
-                    <div class="flex items-center bg-gray-400 rounded py-1 pl-2 pr-3" v-if="isImage">
-                        <svg-icon name="image-picture" class="h-3 mr-2" />
+                    <div class="flex items-center bg-gray-400 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3" v-if="isImage">
+                        <svg-icon name="image-picture" class="h-3 rtl:ml-2 ltr:mr-2" />
                         <div class="">{{ __('messages.width_x_height', { width: asset.width, height: asset.height }) }}</div>
                     </div>
-                    <div class="flex items-center bg-gray-400 rounded py-1 pl-2 pr-3">
-                        <svg-icon name="sd-card" class="h-3 mr-2" />
+                    <div class="flex items-center bg-gray-400 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3">
+                        <svg-icon name="sd-card" class="h-3 rtl:ml-2 ltr:mr-2" />
                         <div class="">{{ asset.size }}</div>
                     </div>
-                    <div class="flex items-center bg-gray-400 rounded py-1 pl-2 pr-3">
-                        <svg-icon name="thumbprint" class="h-3 mr-2" />
+                    <div class="flex items-center bg-gray-400 rounded py-1 rtl:pr-2 ltr:pl-2 rtl:pl-3 ltr:pr-3">
+                        <svg-icon name="thumbprint" class="h-3 rtl:ml-2 ltr:mr-2" />
                         <div class="" :title="asset.lastModified">{{ asset.lastModifiedRelative }}</div>
                     </div>
                 </div>
diff --git a/resources/js/components/assets/Editor/FocalPointEditor.vue b/resources/js/components/assets/Editor/FocalPointEditor.vue
index b3ef4881577..ac35dbb9550 100644
--- a/resources/js/components/assets/Editor/FocalPointEditor.vue
+++ b/resources/js/components/assets/Editor/FocalPointEditor.vue
@@ -20,15 +20,15 @@
             </div>
             <div class="flex items-center text-sm justify-center mb-4">
                 <div class="flex items-center mx-4">
-                    <div class="mr-1">X</div>
+                    <div class="rtl:ml-1 ltr:mr-1">X</div>
                     <div class="value">{{ x }}<sup>%</sup></div>
                 </div>
                 <div class="flex items-center mx-4">
-                    <div class="mr-1">Y</div>
+                    <div class="rtl:ml-1 ltr:mr-1">Y</div>
                     <div class="value">{{ y }}<sup>%</sup></div>
                 </div>
                 <div class="flex items-center mx-4">
-                    <div class="mr-1">Z</div>
+                    <div class="rtl:ml-1 ltr:mr-1">Z</div>
                     <div class="value">{{ z }}</div>
                 </div>
             </div>
diff --git a/resources/js/components/assets/Selector.vue b/resources/js/components/assets/Selector.vue
index f8437966b49..b5cad5ac271 100644
--- a/resources/js/components/assets/Selector.vue
+++ b/resources/js/components/assets/Selector.vue
@@ -40,7 +40,7 @@
 
                     <button
                         type="button"
-                        class="btn-primary ml-2"
+                        class="btn-primary rtl:mr-2 ltr:ml-2"
                         @click="select">
                         {{ __('Select') }}
                     </button>
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
index f8912cf3ee6..4a4845695a6 100644
--- a/resources/js/components/blueprints/Fields.vue
+++ b/resources/js/components/blueprints/Fields.vue
@@ -34,7 +34,7 @@
             </div>
             <div class="px-1">
                 <button class="btn w-full flex justify-center items-center" @click="isSelectingNewFieldtype = true;">
-                    <svg-icon name="light/wireframe" class="mr-2 w-4 h-4" />
+                    <svg-icon name="light/wireframe" class="rtl:ml-2 ltr:mr-2 w-4 h-4" />
                     {{ __('Create Field') }}
                 </button>
             </div>
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index a63d91b28d2..7463ea7d1d4 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -2,16 +2,16 @@
 
     <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
         <div class="blueprint-section-field-inner">
-            <div class="blueprint-drag-handle w-4 border-r"></div>
+            <div class="blueprint-drag-handle w-4 ltr:border-r rtl:border-l"></div>
             <div class="flex flex-1 items-center justify-between">
-                <div class="flex items-center flex-1 pr-4 py-2 pl-2">
-                    <svg-icon class="flex-none text-gray-700 h-4 w-4 mr-2" name="paperclip" v-tooltip="__('Linked fieldset')" />
+                <div class="flex items-center flex-1 rtl:pl-4 ltr:pr-4 py-2 rtl:pr-2 ltr:pl-2">
+                    <svg-icon class="flex-none text-gray-700 h-4 w-4 rtl:ml-2 ltr:mr-2" name="paperclip" v-tooltip="__('Linked fieldset')" />
                     <a class="break-all" @click="$emit('edit')">
                         <span v-text="__('Fieldset')" />
-                        <span class="font-mono text-3xs text-gray-600 ml-2">{{ field.fieldset }}</span>
+                        <span class="font-mono text-3xs text-gray-600 rtl:mr-2 ltr:ml-2">{{ field.fieldset }}</span>
                     </a>
                 </div>
-                <div class="flex-none pr-2 flex">
+                <div class="flex-none rtl:pl-2 ltr:pr-2 flex">
                     <button @click.prevent="$emit('deleted')" class="text-gray-600 hover:text-gray-950"><svg-icon name="micro/trash" class="w-4 h-4" /></button>
                     <stack name="field-settings" v-if="isEditing" @closed="editorClosed">
                         <field-settings
diff --git a/resources/js/components/blueprints/LinkFields.vue b/resources/js/components/blueprints/LinkFields.vue
index dea83e6a436..5a2a93e7156 100644
--- a/resources/js/components/blueprints/LinkFields.vue
+++ b/resources/js/components/blueprints/LinkFields.vue
@@ -3,7 +3,7 @@
     <div>
 
         <button class="btn flex w-full justify-center items-center" @click="open = true">
-            <svg-icon name="light/hyperlink" class="mr-2 w-4 h-4" />
+            <svg-icon name="light/hyperlink" class="rtl:ml-2 ltr:mr-2 w-4 h-4" />
             <span>{{ __('Link Existing') }}</span>
         </button>
 
@@ -34,12 +34,12 @@
                             v-model="reference">
                             <template slot="option" slot-scope="option">
                                 <div class="flex items-center">
-                                    <span v-text="option.fieldset" class="text-2xs text-gray-500 mr-2" />
+                                    <span v-text="option.fieldset" class="text-2xs text-gray-500 rtl:ml-2 ltr:mr-2" />
                                     <span v-text="option.label" />
                                 </div>
                             </template>
                             <template v-slot:no-options>
-                               <div class="text-sm text-gray-700 text-left py-2 px-4" v-text="__('No options to choose from.')" />
+                               <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
                            </template>
                         </v-select>
                         <button
@@ -67,7 +67,7 @@
                             v-model="fieldset"
                         >
                             <template v-slot:no-options>
-                                <div class="text-sm text-gray-700 text-left py-2 px-4" v-text="__('No options to choose from.')" />
+                                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
                             </template>
                         </v-select>
                         <p class="text-sm font-medium mt-6 mb-2" v-text="__('Prefix')" />
diff --git a/resources/js/components/blueprints/Listing.vue b/resources/js/components/blueprints/Listing.vue
index 84f2f8b14fd..dccc78b1a18 100644
--- a/resources/js/components/blueprints/Listing.vue
+++ b/resources/js/components/blueprints/Listing.vue
@@ -7,7 +7,7 @@
             >
                 <template slot="cell-title" slot-scope="{ row: blueprint }">
                     <div class="flex items-center">
-                        <div class="little-dot mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green-600']" />
+                        <div class="little-dot rtl:ml-2 ltr:mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green-600']" />
                         <a :href="blueprint.edit_url">{{ __(blueprint.title) }}</a>
                     </div>
                 </template>
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index 204664b2fa9..ed14b65eddf 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -2,29 +2,29 @@
 
     <div class="blueprint-section-field" :class="widthClass">
         <div class="blueprint-section-field-inner">
-            <div class="blueprint-drag-handle w-4 border-r"></div>
+            <div class="blueprint-drag-handle w-4 ltr:border-r rtl:border-l"></div>
             <div class="flex flex-1 items-center justify-between">
-                <div class="flex items-center flex-1 pr-4 py-2 pl-2">
-                    <svg-icon class="text-gray-800 mr-2 h-4 w-4 flex-none" :name="field.icon.startsWith('<svg') ? field.icon : `light/${field.icon}`" v-tooltip="tooltipText" default="light/generic-field" />
+                <div class="flex items-center flex-1 rtl:pl-4 ltr:pr-4 py-2 rtl:pr-2 ltr:pl-2">
+                    <svg-icon class="text-gray-800 rtl:ml-2 ltr:mr-2 h-4 w-4 flex-none" :name="field.icon.startsWith('<svg') ? field.icon : `light/${field.icon}`" v-tooltip="tooltipText" default="light/generic-field" />
                     <a class="break-all" v-text="__(labelText)" @click="$emit('edit')" />
-                    <svg-icon name="light/hyperlink" v-if="isReferenceField" class="text-gray-600 text-3xs ml-2 h-4 w-4" v-tooltip="__('Imported from fieldset') + ': ' + field.field_reference" />
+                    <svg-icon name="light/hyperlink" v-if="isReferenceField" class="text-gray-600 text-3xs rtl:mr-2 ltr:ml-2 h-4 w-4" v-tooltip="__('Imported from fieldset') + ': ' + field.field_reference" />
                 </div>
-                <div class="flex-none pr-2 flex">
-                    <width-selector v-if="!isHidden" v-model="width" class="mr-2" />
+                <div class="flex-none rtl:pl-2 ltr:pr-2 flex">
+                    <width-selector v-if="!isHidden" v-model="width" class="rtl:ml-2 ltr:mr-2" />
 
-                    <div v-else class="relative border border-gray-400 opacity-50 w-12 flex items-center justify-center mr-2">
+                    <div v-else class="relative border border-gray-400 opacity-50 w-12 flex items-center justify-center rtl:ml-2 ltr:mr-2">
                         <svg-icon name="regular/hidden" class="h-4 w-4 opacity-50"></svg-icon>
                     </div>
 
                     <button v-if="canDefineLocalizable"
-                        class="hover:text-gray-950 mr-2 flex items-center"
+                        class="hover:text-gray-950 rtl:ml-2 ltr:mr-2 flex items-center"
                         :class="{ 'text-gray-950': localizable, 'text-gray-600': !localizable }"
                         v-tooltip="__('Localizable')"
                         @click="localizable = !localizable"
                     >
                         <svg-icon name="light/earth" class="h-4 w-4" />
                     </button>
-                    <button @click.prevent="$emit('duplicate')" class="text-gray-600 hover:text-gray-950 flex items-center mr-2" v-tooltip="__('Duplicate')">
+                    <button @click.prevent="$emit('duplicate')" class="text-gray-600 hover:text-gray-950 flex items-center rtl:ml-2 ltr:mr-2" v-tooltip="__('Duplicate')">
                         <svg-icon name="light/duplicate" class="h-4 w-4" />
                     </button>
                     <button @click.prevent="$emit('deleted')" class="text-gray-600 hover:text-gray-950 flex items-center" v-tooltip="__('Remove')">
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 61bb5396ecb..d0e4c16e073 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -4,13 +4,13 @@
         <div class="blueprint-section-card card p-0 h-full flex rounded-t flex-col">
 
             <div class="bg-gray-200 border-b text-sm flex rounded-t">
-                <div class="blueprint-drag-handle blueprint-section-drag-handle w-4 border-r"></div>
+                <div class="blueprint-drag-handle blueprint-section-drag-handle w-4 ltr:border-r rtl:border-l"></div>
                 <div class="p-2 flex-1 flex items-center">
                     <a class="flex items-center flex-1 group" @click="edit">
-                        <svg-icon :name="iconName(section.icon)" :directory="iconBaseDirectory" class="h-4 w-4 mr-2 text-gray-700 group-hover:text-blue-500" />
-                        <div class="mr-2" v-text="__(section.display)" />
+                        <svg-icon :name="iconName(section.icon)" :directory="iconBaseDirectory" class="h-4 w-4 rtl:ml-2 ltr:mr-2 text-gray-700 group-hover:text-blue-500" />
+                        <div class="rtl:ml-2 ltr:mr-2" v-text="__(section.display)" />
                     </a>
-                    <button class="flex items-center text-gray-700 hover:text-gray-950 mr-3" @click="edit">
+                    <button class="flex items-center text-gray-700 hover:text-gray-950 rtl:ml-3 ltr:mr-3" @click="edit">
                         <svg-icon class="h-4 w-4" name="pencil" />
                     </button>
                     <button @click.prevent="$emit('deleted')" class="flex items-center text-gray-700 hover:text-gray-950">
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index ca14c7c34b4..f943e8c76a0 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -24,7 +24,7 @@
             <div class="blueprint-add-section-container w-full">
                 <button class="blueprint-add-section-button outline-none" @click="addAndEditSection">
                     <div class="text-center flex items-center leading-none">
-                        <svg-icon name="micro/plus" class="h-3 w-3 mr-2" />
+                        <svg-icon name="micro/plus" class="h-3 w-3 rtl:ml-2 ltr:mr-2" />
                         <div v-text="addSectionText" />
                     </div>
 
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 6c2cfdd3d6b..532b77776a8 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -11,13 +11,13 @@
         @click="$emit('selected')"
         @mouseenter="$emit('mouseenter')"
     >
-        <svg-icon v-if="tab.icon" :name="iconName(tab.icon)" :directory="iconBaseDirectory" class="w-4 h-4 mr-1" />
+        <svg-icon v-if="tab.icon" :name="iconName(tab.icon)" :directory="iconBaseDirectory" class="w-4 h-4 rtl:ml-1 ltr:mr-1" />
 
         {{ __(tab.display) }}
 
-        <dropdown-list v-if="isActive" ref="dropdown" placement="bottom-start" class="text-left">
+        <dropdown-list v-if="isActive" ref="dropdown" placement="bottom-start" class="rtl:text-right ltr:text-left">
             <template #trigger>
-                <button class="ml-2 hover:text-gray-900 active:text-gray-900" :aria-label="__('Open Dropdown')">
+                <button class="rtl:mr-2 ltr:ml-2 hover:text-gray-900 active:text-gray-900" :aria-label="__('Open Dropdown')">
                     <svg-icon name="micro/chevron-down-xs" class="w-2" />
                 </button>
             </template>
diff --git a/resources/js/components/blueprints/TabSettings.vue b/resources/js/components/blueprints/TabSettings.vue
index e01bfe7060d..0839054a99a 100644
--- a/resources/js/components/blueprints/TabSettings.vue
+++ b/resources/js/components/blueprints/TabSettings.vue
@@ -16,7 +16,7 @@
                         class="blueprint-tab-field"
                     >
                         <div class="blueprint-tab-field-inner">
-                            <div class="blueprint-drag-handle w-4 border-r"></div>
+                            <div class="blueprint-drag-handle w-4 ltr:border-r rtl:border-l"></div>
 
                             <label class="block">{{ field.display }}</label>
                             <div v-if="field.instructions" class="help-block">{{ field.instructions }}</div>
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 6bf42ff1a1e..e92adc342b5 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div v-if="!singleTab && tabs.length > 0" class="tabs-container relative">
-            <div ref="tabs" class="tabs flex-1 flex space-x-3 overflow-auto pr-6" role="tablist">
+            <div ref="tabs" class="tabs flex-1 flex space-x-3 overflow-auto rtl:pl-6 ltr:pr-6" role="tablist">
                 <tab
                     ref="tab"
                     v-for="tab in tabs"
@@ -17,8 +17,8 @@
                 />
                 <div class="fade-left" v-if="canScrollLeft" />
             </div>
-            <div class="fade-right right-10" />
-            <button class="btn-round ml-2 flex items-center justify-center relative top-1" @click="addAndEditTab" v-tooltip="addTabText">
+            <div class="fade-right rtl:left-10 ltr:right-10" />
+            <button class="btn-round rtl:mr-2 ltr:ml-2 flex items-center justify-center relative top-1" @click="addAndEditTab" v-tooltip="addTabText">
                 <svg-icon name="add" class="w-3 h-3" />
             </button>
         </div>
diff --git a/resources/js/components/collections/DeleteEntryConfirmation.vue b/resources/js/components/collections/DeleteEntryConfirmation.vue
index 8012cee572e..1cf7db3dec1 100644
--- a/resources/js/components/collections/DeleteEntryConfirmation.vue
+++ b/resources/js/components/collections/DeleteEntryConfirmation.vue
@@ -8,7 +8,7 @@
             <div class="flex-1 px-4 py-6 text-gray">
                 <p class="mb-4" v-text="__('Are you sure you want to delete this entry?')" />
                 <label class="flex items-center" v-if="children">
-                    <input type="checkbox" class="mr-2" v-model="shouldDeleteChildren" />
+                    <input type="checkbox" class="rtl:ml-2 ltr:mr-2" v-model="shouldDeleteChildren" />
                     {{ __n('Delete child entry|Delete :count child entries', children) }}
                 </label>
             </div>
@@ -16,7 +16,7 @@
                 <button class="text-gray hover:text-gray-900"
                     @click="$emit('cancel')"
                     v-text="__('Cancel')" />
-                <button class="btn ml-4 btn-danger"
+                <button class="btn rtl:mr-4 ltr:ml-4 btn-danger"
                     @click="$emit('confirm', shouldDeleteChildren)"
                     v-text="__('Delete')" />
             </div>
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 90b9d3f6eeb..183366cacaf 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -11,7 +11,7 @@
                         <div class="field-inner">
                             <label class="publish-field-label" for="field_behavior">
                                 <span v-text="__('Localizations')" />
-                                <i class="required ml-1">*</i>
+                                <i class="required rtl:mr-1 ltr:ml-1">*</i>
                             </label>
                             <div class="help-block -mt-2"><p v-html="instructions" /></div>
                         </div>
@@ -31,7 +31,7 @@
                 <button class="text-gray hover:text-gray-900"
                     @click="$emit('cancel')"
                     v-text="__('Cancel')" />
-                <button class="btn ml-4 btn-danger"
+                <button class="btn rtl:mr-4 ltr:ml-4 btn-danger"
                     @click="confirm"
                     v-text="__('Confirm')" />
             </div>
diff --git a/resources/js/components/collections/OneOrManySitesField.vue b/resources/js/components/collections/OneOrManySitesField.vue
index 72ac1b40d6d..a3960b70817 100644
--- a/resources/js/components/collections/OneOrManySitesField.vue
+++ b/resources/js/components/collections/OneOrManySitesField.vue
@@ -23,6 +23,7 @@
                         <td class="align-middle" v-text="__(site.name)" />
                         <td>
                             <text-input
+                                dir="ltr"
                                 class="slug-field"
                                 :value="value[site.handle]"
                                 @input="updateSiteValue(site.handle, $event)" />
@@ -33,7 +34,7 @@
         </div>
 
         <div v-if="!hasMultipleSites || !inMultipleMode">
-            <text-input :value="value" @input="update" class="slug-field" />
+            <text-input :value="value" @input="update" class="slug-field" dir="ltr" />
         </div>
     </div>
 
diff --git a/resources/js/components/collections/Scaffolder.vue b/resources/js/components/collections/Scaffolder.vue
index d055a3bb8e5..ba13d96c5ba 100644
--- a/resources/js/components/collections/Scaffolder.vue
+++ b/resources/js/components/collections/Scaffolder.vue
@@ -9,27 +9,27 @@
                     <tr>
                         <td class="checkbox-column border-r" @click="selected.index = ! selected.index">
                             <div class="flex items-center h-full">
-                                <input type="checkbox" v-model="selected.index" class="mr-4" id="field_index" />
+                                <input type="checkbox" v-model="selected.index" class="rtl:ml-4 ltr:mr-4" id="field_index" />
                             </div>
                         </td>
                         <td class="border-r">
                             <label for="field_index" v-text="__('Index Template')" />
                         </td>
                         <td :class="{'opacity-25': ! selected.index }">
-                            <input type="text" v-model="index" class="input-text font-mono">
+                            <input type="text" v-model="index" class="input-text font-mono" dir="ltr">
                         </td>
                     </tr>
                     <tr>
                         <td class="checkbox-column border-r" @click="selected.show = ! selected.show">
                             <div class="flex items-center h-full">
-                                <input type="checkbox" v-model="selected.show" class="mr-4" id="field_template" />
+                                <input type="checkbox" v-model="selected.show" class="rtl:ml-4 ltr:mr-4" id="field_template" />
                             </div>
                         </td>
                         <td class="border-r">
                             <label for="field_template" v-text="__('Show Template')" />
                         </td>
                         <td :class="{'opacity-25': ! selected.show }">
-                            <input type="text" v-model="show" class="input-text font-mono">
+                            <input type="text" v-model="show" class="input-text font-mono" dir="ltr">
                         </td>
                     </tr>
                 </tbody>
diff --git a/resources/js/components/collections/View.vue b/resources/js/components/collections/View.vue
index 50847b2458f..1d873e18623 100644
--- a/resources/js/components/collections/View.vue
+++ b/resources/js/components/collections/View.vue
@@ -9,11 +9,11 @@
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="__(title)" />
 
-                <dropdown-list class="mr-2" v-if="!!this.$scopedSlots.twirldown">
+                <dropdown-list class="rtl:ml-2 ltr:mr-2" v-if="!!this.$scopedSlots.twirldown">
                     <slot name="twirldown" />
                 </dropdown-list>
 
-                <div class="btn-group mr-4" v-if="canUseStructureTree && !treeIsDirty">
+                <div class="btn-group rtl:ml-4 ltr:mr-4" v-if="canUseStructureTree && !treeIsDirty">
                     <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
                         <svg-icon name="light/structures" class="h-4 w-4"/>
                     </button>
@@ -25,7 +25,7 @@
                 <template v-if="view === 'tree'">
 
                     <a
-                        class="text-2xs text-blue mr-4 underline"
+                        class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline"
                         v-if="treeIsDirty"
                         v-text="__('Discard changes')"
                         @click="cancelTreeProgress"
@@ -33,14 +33,14 @@
 
                     <site-selector
                         v-if="sites.length > 1"
-                        class="mr-4"
+                        class="rtl:ml-4 ltr:mr-4"
                         :sites="sites"
                         :value="site"
                         @input="site = $event.handle"
                     />
 
                     <button
-                        class="btn mr-4"
+                        class="btn rtl:ml-4 ltr:mr-4"
                         :class="{ 'disabled': !treeIsDirty, 'btn-danger': deletedEntries.length }"
                         :disabled="!treeIsDirty"
                         @click="saveTree"
@@ -52,23 +52,23 @@
                 <template v-if="view === 'list' && reorderable">
                     <site-selector
                         v-if="sites.length > 1 && reordering && site"
-                        class="mr-4"
+                        class="rtl:ml-4 ltr:mr-4"
                         :sites="sites"
                         :value="site"
                         @input="site = $event.handle"
                     />
 
-                    <button class="btn mr-4"
+                    <button class="btn rtl:ml-4 ltr:mr-4"
                         v-if="!reordering"
                         @click="reordering = true"
                         v-text="__('Reorder')" />
 
                     <template v-if="reordering">
-                        <button class="btn ml-2"
+                        <button class="btn rtl:mr-2 ltr:ml-2"
                             @click="reordering = false"
                             v-text="__('Cancel')" />
 
-                        <button class="btn-primary ml-2"
+                        <button class="btn-primary rtl:mr-2 ltr:ml-2"
                             @click="$refs.list.saveOrder"
                             v-text="__('Save Order')" />
                     </template>
diff --git a/resources/js/components/data-list/BulkActions.vue b/resources/js/components/data-list/BulkActions.vue
index 1cb83763c6d..86e978d6777 100644
--- a/resources/js/components/data-list/BulkActions.vue
+++ b/resources/js/components/data-list/BulkActions.vue
@@ -20,7 +20,7 @@
                 <button
                     slot-scope="{ action, select }"
                     class="input-group-item"
-                    :class="{'text-red-500': action.dangerous, 'rounded-r': index + 1 === sortedActions.length }"
+                    :class="{'text-red-500': action.dangerous, 'ltr:rounded-r rtl:rounded-l': index + 1 === sortedActions.length }"
                     @click="select"
                     v-text="__(action.title)" />
             </data-list-action>
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index a7200ab6687..817ee13570f 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -18,12 +18,12 @@
 
                 <div class="flex grow min-h-0 rounded-t-md bg-gray-100">
                     <!-- Available Columns -->
-                    <div class="outline-none text-left w-1/2 border-r flex flex-col">
+                    <div class="outline-none rtl:text-right ltr:text-left w-1/2 rtl:border-l ltr:border-r flex flex-col">
                         <header v-text="__('Available Columns')" class="border-b py-2 px-3 text-sm bg-white font-medium"/>
                         <div class="flex flex-1 flex-col space-y-1 py-2 px-3 select-none shadow-inner overflow-y-scroll">
                             <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field" v-if="hiddenColumns.length">
                                 <label class="flex items-center cursor-pointer">
-                                    <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
+                                    <input type="checkbox" class="rtl:ml-2 ltr:mr-2" v-model="column.visible" @change="columnToggled(column) "/>
                                     {{ __(column.label) }}
                                 </label>
                             </div>
@@ -32,7 +32,7 @@
 
                     <!-- Displayed Columns -->
                     <div class="w-1/2 flex flex-col">
-                        <header v-text="__('Displayed Columns')" class="border-b px-3 py-2 text-sm bg-white rounded-tl-md font-medium flex-none"/>
+                        <header v-text="__('Displayed Columns')" class="border-b px-3 py-2 text-sm bg-white rtl:rounded-tr-md ltr:rounded-tl-md font-medium flex-none"/>
                         <div class="grow overflow-y-scroll shadow-inner">
                             <sortable-list
                                 v-model="selectedColumns"
@@ -46,8 +46,8 @@
                                 <div class="space-y-1 px-3 p-3 select-none">
                                     <div class="item sortable cursor-grab" v-for="column in selectedColumns" :key="column.field" tabindex="-1">
                                         <div class="item-move py-1">&nbsp;</div>
-                                        <div class="flex flex-1 ml-2 items-center p-0">
-                                            <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column)" :disabled="selectedColumns.length === 1" />
+                                        <div class="flex flex-1 rtl:mr-2 ltr:ml-2 items-center p-0">
+                                            <input type="checkbox" class="rtl:ml-2 ltr:mr-2" v-model="column.visible" @change="columnToggled(column)" :disabled="selectedColumns.length === 1" />
                                             {{ __(column.label) }}
                                         </div>
                                     </div>
@@ -59,7 +59,7 @@
 
                 <footer class="px-3 py-2 border-t flex items-center justify-end" v-if="preferencesKey">
                     <button class="btn" v-text="__('Reset')" @click="reset" :disabled="saving" />
-                    <button class="ml-3 btn-primary" v-text="__('Save')" @click="save" :disabled="saving" />
+                    <button class="rtl:mr-3 ltr:ml-3 btn-primary" v-text="__('Save')" @click="save" :disabled="saving" />
                 </footer>
 
             </div>
diff --git a/resources/js/components/data-list/FieldFilter.vue b/resources/js/components/data-list/FieldFilter.vue
index 340e286a008..693b31f7c9f 100644
--- a/resources/js/components/data-list/FieldFilter.vue
+++ b/resources/js/components/data-list/FieldFilter.vue
@@ -36,12 +36,12 @@
 
             <div class="flex border-t text-gray-800">
                 <button
-                    class="p-2 hover:bg-gray-100 rounded-bl text-xs flex-1"
+                    class="p-2 hover:bg-gray-100 rtl:rounded-br ltr:rounded-bl text-xs flex-1"
                     v-text="__('Clear')"
                     @click="resetAll"
                 />
                 <button
-                    class="p-2 hover:bg-gray-100 flex-1 rounded-br border-l text-xs"
+                    class="p-2 hover:bg-gray-100 flex-1 rtl:rounded-bl ltr:rounded-br rtl:border-r ltr:border-l text-xs"
                     v-text="__('Close')"
                     @click="$emit('closed')"
                 />
diff --git a/resources/js/components/data-list/Filter.vue b/resources/js/components/data-list/Filter.vue
index f64f0415cb0..f378427e53e 100644
--- a/resources/js/components/data-list/Filter.vue
+++ b/resources/js/components/data-list/Filter.vue
@@ -20,12 +20,12 @@
 
         <div class="flex border-t">
             <button
-                class="p-2 hover:bg-gray-100 rounded-bl text-xs flex-1"
+                class="p-2 hover:bg-gray-100 rtl:rounded-br ltr:rounded-bl text-xs flex-1"
                 v-text="__('Clear')"
                 @click="resetAll"
             />
             <button
-                class="p-2 hover:bg-gray-100 flex-1 rounded-br border-l text-xs"
+                class="p-2 hover:bg-gray-100 flex-1 rtl:rounded-bl ltr:rounded-br rtl:border-r ltr:border-l text-xs"
                 v-text="__('Close')"
                 @click="$emit('closed')"
             />
diff --git a/resources/js/components/data-list/FilterPresets.vue b/resources/js/components/data-list/FilterPresets.vue
index 7442dcd00ce..75016f78578 100644
--- a/resources/js/components/data-list/FilterPresets.vue
+++ b/resources/js/components/data-list/FilterPresets.vue
@@ -1,13 +1,13 @@
 <template>
-    <div class="pt-2 pr-2">
+    <div class="pt-2 rtl:pl-2 ltr:pr-2">
         <div class="flex flex-wrap items-center">
 
-            <button class="pill-tab mr-1" :class="{ 'active': ! activePreset }" @click="viewAll" v-text="__('All')" />
+            <button class="pill-tab rtl:ml-1 ltr:mr-1" :class="{ 'active': ! activePreset }" @click="viewAll" v-text="__('All')" />
 
             <template v-for="(preset, handle) in presets">
-                <button class="pill-tab active mr-1" v-if="handle === activePreset">
+                <button class="pill-tab active rtl:ml-1 ltr:mr-1" v-if="handle === activePreset">
                     {{ preset.display }}
-                    <dropdown-list class="ml-2" placement="bottom-start">
+                    <dropdown-list class="rtl:mr-2 ltr:ml-2" placement="bottom-start">
                         <template v-slot:trigger>
                             <button class="opacity-50 hover:opacity-100">
                                 <svg-icon name="micro/chevron-down-xs" class="w-2 h-2" />
@@ -19,7 +19,7 @@
                         <dropdown-item :text="__('Delete')" class="warning" @click="deletePreset" />
                     </dropdown-list>
                 </button>
-                <button class="pill-tab mr-1" v-else @click="viewPreset(handle)">
+                <button class="pill-tab rtl:ml-1 ltr:mr-1" v-else @click="viewPreset(handle)">
                     {{ preset.display }}
                 </button>
             </template>
diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue
index 4e0e38d9011..d6f8d5f4872 100644
--- a/resources/js/components/data-list/Filters.vue
+++ b/resources/js/components/data-list/Filters.vue
@@ -5,13 +5,13 @@
             <!-- Field filter (requires custom selection UI) -->
             <popover v-if="fieldFilter" placement="bottom-start" @closed="fieldFilterClosed">
                 <template slot="trigger">
-                    <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
+                    <button class="filter-badge filter-badge-control rtl:ml-2 ltr:mr-2 mb-2" @click="resetFilterPopover">
                         {{ fieldFilter.title }}
                         <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover }">
-                    <div class="flex flex-col text-left min-w-[18rem]">
+                    <div class="flex flex-col rtl:text-right ltr:text-left min-w-[18rem]">
                         <div class="filter-fields text-sm">
                             <field-filter
                                 ref="fieldFilter"
@@ -30,7 +30,7 @@
             <!-- Standard pinned filters -->
             <popover v-if="pinnedFilters.length" v-for="filter in pinnedFilters" :key="filter.handle" placement="bottom-start" :stop-propagation="false">
                 <template slot="trigger">
-                    <button class="filter-badge filter-badge-control mr-2 mb-2">
+                    <button class="filter-badge filter-badge-control rtl:ml-2 ltr:mr-2 mb-2">
                         {{ filter.title }}
                         <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
@@ -51,7 +51,7 @@
             <!-- Standard unpinned filters -->
             <popover v-if="unpinnedFilters.length" placement="bottom-start" :stop-propagation="false">
                 <template slot="trigger">
-                    <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
+                    <button class="filter-badge filter-badge-control rtl:ml-2 ltr:mr-2 mb-2" @click="resetFilterPopover">
                         {{ __('Filter') }}
                         <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
@@ -85,11 +85,11 @@
             </popover>
 
             <!-- Active filter badges -->
-            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in fieldFilterBadges">
+            <div class="filter-badge rtl:ml-2 ltr:mr-2 mb-2" v-for="(badge, handle) in fieldFilterBadges">
                 <span>{{ badge }}</span>
                 <button @click="removeFieldFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
-            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in standardBadges">
+            <div class="filter-badge rtl:ml-2 ltr:mr-2 mb-2" v-for="(badge, handle) in standardBadges">
                 <span>{{ badge }}</span>
                 <button @click="removeStandardFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
diff --git a/resources/js/components/data-list/Pagination.vue b/resources/js/components/data-list/Pagination.vue
index 9d7f681dbce..7f0cd5c78e7 100644
--- a/resources/js/components/data-list/Pagination.vue
+++ b/resources/js/components/data-list/Pagination.vue
@@ -11,7 +11,7 @@
         <ul v-if="hasMultiplePages" class="pagination" :class="{'pagination-inline': inline}">
 
             <li v-if="hasPrevious">
-                <a @click="selectPreviousPage"><span class="text-xs">&larr;</span></a>
+                <a @click="selectPreviousPage"><span class="text-xs" v-html="direction === 'ltr' ? '&larr;' : '&rarr;'"></span></a>
             </li>
 
             <li
@@ -24,7 +24,7 @@
             </li>
 
             <li v-if="hasNext">
-                <a @click="selectNextPage"><span class="text-xs">&rarr;</span></a>
+                <a @click="selectNextPage"><span class="text-xs" v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></a>
             </li>
         </ul>
 
@@ -33,7 +33,7 @@
 
             <select-input
                 v-if="perPage && isPerPageEvenUseful"
-                class="ml-6"
+                class="rtl:mr-6 ltr:ml-6"
                 name="perPage"
                 :placeholder="__('Per Page')"
                 :options="perPageOptions"
@@ -166,6 +166,10 @@ export default {
             return this.resourceMeta.total;
         },
 
+        direction() {
+            return this.$config.get('direction', 'rtl');
+        },
+
     },
 
     methods: {
diff --git a/resources/js/components/data-list/Table.vue b/resources/js/components/data-list/Table.vue
index 58cb7ddb6fc..95d4d3ea531 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -12,13 +12,13 @@
                         'current-column': sharedState.sortColumn === column.field,
                         'sortable-column': column.sortable === true,
                         'cursor-not-allowed': !sortable,
-                        'text-right pr-8': column.numeric,
+                        'rtl:text-left ltr:text-right rtl:pl-8 ltr:pr-8': column.numeric,
                     }"
                     class="group"
                     @click.prevent="changeSortColumn(column.field)"
                 >
                     <span v-text="__(column.label)" />
-                    <svg v-if="column.sortable" :class="[sharedState.sortDirection, {'opacity-100 pointer-events-none': sharedState.sortColumn === column.field}]" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1 opacity-0 group-hover:opacity-100">
+                    <svg v-if="column.sortable" :class="[sharedState.sortDirection, {'opacity-100 pointer-events-none': sharedState.sortColumn === column.field}]" height="8" width="8" viewBox="0 0 10 6.5" class="rtl:mr-1 ltr:ml-1 opacity-0 group-hover:opacity-100">
                         <path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor"/>
                     </svg>
                 </th>
@@ -52,7 +52,7 @@
                         @click="checkboxClicked(row, index, $event)"
                     />
                 </th>
-                <td v-for="column in visibleColumns" :key="column.field" @click="rowClicked(row, index, $event)" :width="column.width" :class="{'text-right pr-8': column.numeric}">
+                <td v-for="column in visibleColumns" :key="column.field" @click="rowClicked(row, index, $event)" :width="column.width" :class="{'rtl:text-left ltr:text-right rtl:pl-8 ltr:pr-8': column.numeric}">
                     <slot
                         :name="`cell-${column.field}`"
                         :value="row[column.value || column.field]"
diff --git a/resources/js/components/entries/CreateEntryButton.vue b/resources/js/components/entries/CreateEntryButton.vue
index ceabac7e2e8..b8a2f64d021 100644
--- a/resources/js/components/entries/CreateEntryButton.vue
+++ b/resources/js/components/entries/CreateEntryButton.vue
@@ -3,11 +3,11 @@
     <dropdown-list class="inline-block" :disabled="!hasMultipleBlueprints">
         <template v-slot:trigger>
             <button
-                :class="[buttonClass, {'flex items-center pr-4': hasMultipleBlueprints }]"
+                :class="[buttonClass, {'flex items-center rtl:pl-4 ltr:pr-4': hasMultipleBlueprints }]"
                 @click="create"
             >
                 {{ text }}
-                <svg-icon name="micro/chevron-down-xs" class="w-2 ml-2" v-if="hasMultipleBlueprints" />
+                <svg-icon name="micro/chevron-down-xs" class="w-2 rtl:mr-2 ltr:ml-2" v-if="hasMultipleBlueprints" />
             </button>
         </template>
         <h6 v-text="__('Choose Blueprint')" class="p-2" />
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 3c110fb5af6..dc0921eecbf 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -33,8 +33,8 @@
                         <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
                         <div class="flex space-x-2 mt-2">
-                            <button class="btn btn-sm ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
-                            <button class="btn btn-sm ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
+                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />
                         </div>
                     </div>
@@ -78,7 +78,7 @@
                         >
                             <template slot="cell-title" slot-scope="{ row: entry }">
                                 <a class="title-index-field inline-flex items-center" :href="entry.edit_url" @click.stop>
-                                    <span class="little-dot mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="! columnShowing('status')" />
+                                    <span class="little-dot rtl:ml-2 ltr:mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="! columnShowing('status')" />
                                     <span v-text="entry.title" />
                                 </a>
                             </template>
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 77c9d8b5895..2d0014a8008 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -48,14 +48,14 @@
                         />
 
                         <div class="text-gray text-xs flex mb-6">
-                            <div class="pt-px w-4 mr-2">
+                            <div class="pt-px w-4 rtl:ml-2 ltr:mr-2">
                                 <svg-icon name="info-circle" class="pt-px" />
                             </div>
                             <div class="flex-1" v-text="actionInfoText" />
                         </div>
 
                         <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
-                            <div class="pt-px w-4 mr-2">
+                            <div class="pt-px w-4 rtl:ml-2 ltr:mr-2">
                                 <svg-icon name="info-circle" class="pt-px" />
                             </div>
                             <div class="flex-1" v-text="__('messages.publish_actions_current_becomes_draft_because_scheduled')" />
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 0cfdba70efd..9c9419a9ca3 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -6,17 +6,17 @@
         <div class="flex items-center mb-6">
             <h1 class="flex-1">
                 <div class="flex items-center">
-                    <span v-if="! isCreating" class="little-dot mr-2" :class="activeLocalization.status" v-tooltip="__(activeLocalization.status)" />
+                    <span v-if="! isCreating" class="little-dot rtl:ml-2 ltr:mr-2" :class="activeLocalization.status" v-tooltip="__(activeLocalization.status)" />
                     <span v-html="$options.filters.striptags(__(title))" />
                 </div>
             </h1>
 
-            <dropdown-list class="mr-4" v-if="canEditBlueprint">
+            <dropdown-list class="rtl:ml-4 ltr:mr-4" v-if="canEditBlueprint">
                 <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
             </dropdown-list>
 
-            <div class="pt-px text-2xs text-gray-600 flex mr-4" v-if="readOnly">
-                <svg-icon name="light/lock" class="w-4 mr-1 -mt-1" /> {{ __('Read Only') }}
+            <div class="pt-px text-2xs text-gray-600 flex rtl:ml-4 ltr:mr-4" v-if="readOnly">
+                <svg-icon name="light/lock" class="w-4 rtl:ml-1 ltr:mr-1 -mt-1" /> {{ __('Read Only') }}
             </div>
 
             <div class="hidden md:flex items-center">
@@ -37,7 +37,7 @@
 
                 <button
                     v-if="revisionsEnabled && !isCreating"
-                    class="ml-4 btn-primary flex items-center"
+                    class="rtl:mr-4 ltr:ml-4 btn-primary flex items-center"
                     :disabled="!canPublish"
                     @click="confirmingPublish = true">
                     <span>{{ __('Publish') }}…</span>
@@ -107,7 +107,7 @@
                                             class="flex items-center justify-center btn w-full"
                                             v-if="showLivePreviewButton"
                                             @click="openLivePreview">
-                                            <svg-icon name="light/synchronize" class="h-4 w-4 mr-2 shrink-0" />
+                                            <svg-icon name="light/synchronize" class="h-4 w-4 rtl:ml-2 ltr:mr-2 shrink-0" />
                                             <span>{{ __('Live Preview') }}</span>
                                         </button>
                                         <a
@@ -115,7 +115,7 @@
                                             v-if="showVisitUrlButton"
                                             :href="permalink"
                                             target="_blank">
-                                            <svg-icon name="light/external-link" class="w-4 h-4 mr-2 shrink-0" />
+                                            <svg-icon name="light/external-link" class="w-4 h-4 rtl:ml-2 ltr:mr-2 shrink-0" />
                                             <span>{{ __('Visit URL') }}</span>
                                         </a>
                                     </div>
@@ -156,7 +156,7 @@
                                             class="flex items-center justify-center mt-4 btn-flat px-2 w-full"
                                             v-if="!isCreating && revisionsEnabled"
                                             @click="showRevisionHistory = true">
-                                            <svg-icon name="light/history" class="h-4 w-4 mr-2" />
+                                            <svg-icon name="light/history" class="h-4 w-4 rtl:ml-2 ltr:mr-2" />
                                             <span>{{ __('View History') }}</span>
                                         </button>
                                 </div>
@@ -174,7 +174,7 @@
                                         @click="localizationSelected(option)"
                                     >
                                         <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
-                                            <span class="little-dot mr-2" :class="{
+                                            <span class="little-dot rtl:ml-2 ltr:mr-2" :class="{
                                                 'bg-green-600': option.published,
                                                 'bg-gray-500': !option.published,
                                                 'bg-red-500': !option.exists
@@ -183,7 +183,7 @@
                                             <loading-graphic
                                                 :size="14"
                                                 text=""
-                                                class="ml-2"
+                                                class="rtl:mr-2 ltr:ml-2"
                                                 v-if="localizing && localizing.handle === option.handle" />
                                         </div>
                                         <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
@@ -199,7 +199,7 @@
                 <template v-slot:buttons>
                    <button
                         v-if="!readOnly"
-                        class="ml-4"
+                        class="rtl:mr-4 ltr:ml-4"
                         :class="{
                             'btn': revisionsEnabled,
                             'btn-primary': isCreating || !revisionsEnabled,
@@ -211,11 +211,11 @@
 
                     <button
                         v-if="revisionsEnabled && !isCreating"
-                        class="ml-4 btn-primary flex items-center"
+                        class="rtl:mr-4 ltr:ml-4 btn-primary flex items-center"
                         :disabled="!canPublish"
                         @click="confirmingPublish = true">
                         <span v-text="__('Publish')" />
-                        <svg-icon name="micro/chevron-down-xs" class="ml-2 w-2" />
+                        <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 w-2" />
                     </button>
                 </template>
             </live-preview>
@@ -227,7 +227,7 @@
                 class="btn-lg"
                 :class="{
                     'btn-primary w-full': ! revisionsEnabled,
-                    'btn w-1/2 mr-4': revisionsEnabled,
+                    'btn w-1/2 rtl:ml-4 ltr:mr-4': revisionsEnabled,
                 }"
                 :disabled="!canSave"
                 @click.prevent="save"
@@ -235,11 +235,11 @@
 
             <button
                 v-if="revisionsEnabled"
-                class="ml-2 btn btn-lg justify-center btn-primary flex items-center w-1/2"
+                class="rtl:mr-2 ltr:ml-2 btn btn-lg justify-center btn-primary flex items-center w-1/2"
                 :disabled="!canPublish"
                 @click="confirmingPublish = true">
                 <span v-text="__('Publish')" />
-                <svg-icon name="micro/chevron-down-xs" class="ml-2 w-2" />
+                <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 w-2" />
             </button>
         </div>
 
diff --git a/resources/js/components/entries/Widget.vue b/resources/js/components/entries/Widget.vue
index e98b3cb5983..eeac6c7615d 100644
--- a/resources/js/components/entries/Widget.vue
+++ b/resources/js/components/entries/Widget.vue
@@ -16,7 +16,7 @@
                 <data-list-table :loading="loading">
                     <template slot="cell-title" slot-scope="{ row: entry }">
                         <div class="flex items-center">
-                            <div class="little-dot mr-2" :class="[entry.published ? 'bg-green-600' : 'bg-gray-400']" />
+                            <div class="little-dot rtl:ml-2 ltr:mr-2" :class="[entry.published ? 'bg-green-600' : 'bg-gray-400']" />
                             <a :href="entry.edit_url">{{ entry.title }}</a>
                         </div>
                     </template>
diff --git a/resources/js/components/field-conditions/Builder.vue b/resources/js/components/field-conditions/Builder.vue
index 91a45d49f1d..95e75da164f 100644
--- a/resources/js/components/field-conditions/Builder.vue
+++ b/resources/js/components/field-conditions/Builder.vue
@@ -17,12 +17,12 @@
                     v-model="type"
                     :options="typeOptions"
                     :placeholder="false"
-                    class="ml-4" />
+                    class="rtl:mr-4 ltr:ml-4" />
 
                 <text-input
                     v-if="hasConditions && isCustom"
                     v-model="customMethod"
-                    class="ml-4 flex-1" />
+                    class="rtl:mr-4 ltr:ml-4 flex-1" />
             </div>
 
             <condition
diff --git a/resources/js/components/field-conditions/Condition.vue b/resources/js/components/field-conditions/Condition.vue
index 195f1e34edd..34460c111c0 100644
--- a/resources/js/components/field-conditions/Condition.vue
+++ b/resources/js/components/field-conditions/Condition.vue
@@ -28,12 +28,12 @@
             :value="condition.operator"
             :options="operatorOptions"
             :placeholder="false"
-            class="md:ml-4"
+            class="rtl:md:mr-4 ltr:md:ml-4"
             @input="operatorSelected" />
 
         <toggle-input
             v-if="showValueToggle"
-            class="ml-4"
+            class="rtl:mr-4 ltr:ml-4"
             :value="condition.value === 'true'"
             @input="valueUpdated" />
 
@@ -41,7 +41,7 @@
             v-else-if="showValueDropdown"
             ref="valueSelect"
             :value="condition.value"
-            class="ml-4 w-full md:w-52 mb-2 md:mb-0"
+            class="rtl:mr-4 ltr:ml-4 w-full md:w-52 mb-2 md:mb-0"
             :options="valueOptions"
             :placeholder="__('Option')"
             :taggable="false"
@@ -57,10 +57,10 @@
         <text-input
             v-else
             :value="condition.value"
-            class="ml-4"
+            class="rtl:mr-4 ltr:ml-4"
             @input="valueUpdated" />
 
-        <button @click="remove" class="btn-close ml-2 group">
+        <button @click="remove" class="btn-close rtl:mr-2 ltr:ml-2 group">
             <svg-icon name="micro/trash" class="w-4 h-4 group-hover:text-red-500" />
         </button>
     </div>
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index 9f81ddc062c..278b1100f2f 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -28,7 +28,7 @@
                 <p>
                     {{ __('messages.field_validation_advanced_instructions') }}
                     <a :href="laravelDocsLink" target="_blank">{{ __('Learn more') }}</a>
-                    <span v-if="helpBlock" class="italic text-gray-500 float-right">
+                    <span v-if="helpBlock" class="italic text-gray-500 ltr:float-right rtl:float-left">
                         {{ __('Example') }}:
                         <span class="italic text-blue-400">{{ helpBlock }}</span>
                     </span>
@@ -59,10 +59,10 @@
                     />
                 </template>
                 <template #option="{ value, display }">
-                    {{ __(display) }} <code class="ml-2">{{ valueWithoutTrailingColon(value) }}</code>
+                    {{ __(display) }} <code class="rtl:mr-2 ltr:ml-2">{{ valueWithoutTrailingColon(value) }}</code>
                 </template>
                 <template #no-options="{ search }">
-                    <div class="vs__dropdown-option text-left">{{ __('Add') }} <code class="ml-2">{{ search }}</code></div>
+                    <div class="vs__dropdown-option rtl:text-right ltr:text-left">{{ __('Add') }} <code class="rtl:mr-2 ltr:ml-2">{{ search }}</code></div>
                 </template>
             </v-select>
 
diff --git a/resources/js/components/fields/FieldtypeSelector.vue b/resources/js/components/fields/FieldtypeSelector.vue
index f1abde1dc4d..98bbf713fe4 100644
--- a/resources/js/components/fields/FieldtypeSelector.vue
+++ b/resources/js/components/fields/FieldtypeSelector.vue
@@ -21,12 +21,12 @@
                 <div class="fieldtype-selector">
                     <div class="fieldtype-list">
                         <div class="p-2" v-for="fieldtype in group.fieldtypes" :key="fieldtype.handle">
-                            <button class="bg-white border border-gray-500 flex items-center group w-full rounded hover:border-gray-600 shadow-sm hover:shadow-md pr-3"
+                            <button class="bg-white border border-gray-500 flex items-center group w-full rounded hover:border-gray-600 shadow-sm hover:shadow-md rtl:pl-3 ltr:pr-3"
                                 @click="select(fieldtype)">
-                                <div class="p-2 flex items-center border-r border-gray-500 group-hover:border-gray-600 bg-gray-200 rounded-l">
+                                <div class="p-2 flex items-center rtl:border-l ltr:border-r border-gray-500 group-hover:border-gray-600 bg-gray-200 rtl:rounded-r ltr:rounded-l">
                                     <svg-icon class="h-5 w-5 text-gray-800" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`" default="light/generic-field"></svg-icon>
                                 </div>
-                                <span class="pl-3 text-gray-800 text-md group-hover:text-gray-900">{{ fieldtype.text }}</span>
+                                <span class="rtl:pr-3 ltr:pl-3 text-gray-800 text-md group-hover:text-gray-900">{{ fieldtype.text }}</span>
                             </button>
                         </div>
                     </div>
diff --git a/resources/js/components/fields/ImportSettings.vue b/resources/js/components/fields/ImportSettings.vue
index d5e06d8a1a7..f07a9e55f9b 100644
--- a/resources/js/components/fields/ImportSettings.vue
+++ b/resources/js/components/fields/ImportSettings.vue
@@ -5,12 +5,12 @@
         <div class="flex items-center mb-6 -mt-2">
             <h1 class="flex-1">
                 <small class="block text-xs text-gray-700 font-medium leading-none mt-2 flex items-center">
-                    <svg-icon class="h-4 w-4 mr-2 inline-block text-gray-700" name="paperclip"/>{{ __('Linked fieldset') }}
+                    <svg-icon class="h-4 w-4 rtl:ml-2 ltr:mr-2 inline-block text-gray-700" name="paperclip"/>{{ __('Linked fieldset') }}
                 </small>
                 {{ __('Fieldset') }}
             </h1>
             <button
-                class="text-gray-700 hover:text-gray-800 mr-6 text-sm"
+                class="text-gray-700 hover:text-gray-800 rtl:ml-6 ltr:mr-6 text-sm"
                 @click.prevent="close"
                 v-text="__('Cancel')"
             ></button>
diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
index bda0f071578..23d1dcc97a8 100644
--- a/resources/js/components/fields/Settings.vue
+++ b/resources/js/components/fields/Settings.vue
@@ -9,13 +9,13 @@
         <header v-if="!loading" class="flex items-center sticky top-0 inset-x-0 bg-white shadow px-8 py-2 z-1 h-13">
             <h1 class="flex-1 flex items-center text-xl">
                 {{ __(values.display) || __(config.display) || config.handle }}
-                <small class="badge-pill bg-gray-100 ml-4 border text-xs text-gray-700 font-medium leading-none flex items-center">
-                    <svg-icon class="h-4 w-4 mr-2 inline-block text-gray-700" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`"></svg-icon>
+                <small class="badge-pill bg-gray-100 rtl:mr-4 ltr:ml-4 border text-xs text-gray-700 font-medium leading-none flex items-center">
+                    <svg-icon class="h-4 w-4 rtl:ml-2 ltr:mr-2 inline-block text-gray-700" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`"></svg-icon>
                     {{ fieldtype.title }}
                 </small>
             </h1>
             <button
-                class="text-gray-700 hover:text-gray-800 mr-6 text-sm"
+                class="text-gray-700 hover:text-gray-800 rtl:ml-6 ltr:mr-6 text-sm"
                 @click.prevent="close"
                 v-text="__('Cancel')"
             ></button>
diff --git a/resources/js/components/fieldsets/FieldsetDeleter.vue b/resources/js/components/fieldsets/FieldsetDeleter.vue
index 6c0ce293540..675d15c7a34 100644
--- a/resources/js/components/fieldsets/FieldsetDeleter.vue
+++ b/resources/js/components/fieldsets/FieldsetDeleter.vue
@@ -13,9 +13,9 @@
                 <p class="mb-2">{{ __(`Before you can delete this fieldset, you need to remove references to it in blueprints and fieldsets:`) }}</p>
 
                 <div v-for="(items, group) in resource.imported_by">
-                    <h3 class="little-heading pl-0 mb-2">{{ group }}</h3>
+                    <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ group }}</h3>
 
-                    <ul class="list-disc pl-4">
+                    <ul class="list-disc rtl:pr-4 ltr:pl-4">
                         <li
                             v-for="item in items"
                             :key="item.handle"
diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 37ede3db493..b74a63f8be3 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -12,7 +12,7 @@
                             :value="element.key"
                             :selected="element.key === selectedKey" />
                     </select>
-                    <svg-icon name="micro/chevron-down-xs" class="w-2 ml-2" />
+                    <svg-icon name="micro/chevron-down-xs" class="w-2 rtl:mr-2 ltr:ml-2" />
                 </div>
                     <input
                         type="text"
diff --git a/resources/js/components/fieldtypes/ColorFieldtype.vue b/resources/js/components/fieldtypes/ColorFieldtype.vue
index 2804b634184..4ef9eaec4cb 100644
--- a/resources/js/components/fieldtypes/ColorFieldtype.vue
+++ b/resources/js/components/fieldtypes/ColorFieldtype.vue
@@ -44,7 +44,7 @@
                             :class="{ 'mt-5': config.swatches.length }"
                         >
                             <input
-                                class="h-10 w-full cursor-pointer input-text w-full rounded p-[2px] mr-2"
+                                class="h-10 w-full cursor-pointer input-text w-full rounded p-[2px] rtl:ml-2 ltr:mr-2"
                                 type="color"
                                 :value="customColor"
                                 @input="customColorSelected"
@@ -70,7 +70,7 @@
             />
         </div>
 
-        <button v-if="value" class="btn-close ml-1" :aria-label="__('Reset')" @click="resetColor">&times;</button>
+        <button v-if="value" class="btn-close rtl:mr-1 ltr:ml-1" :aria-label="__('Reset')" @click="resetColor">&times;</button>
     </div>
 </template>
 
diff --git a/resources/js/components/fieldtypes/DateFieldtype.vue b/resources/js/components/fieldtypes/DateFieldtype.vue
index 720042907b1..ed50b9a1d00 100644
--- a/resources/js/components/fieldtypes/DateFieldtype.vue
+++ b/resources/js/components/fieldtypes/DateFieldtype.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="datetime min-w-[145px]">
 
-        <button type="button" class="btn flex mb-2 md:mb-0 items-center pl-3" v-if="!isReadOnly && config.inline === false && !hasDate" @click="addDate" tabindex="0">
-            <svg-icon name="light/calendar" class="w-4 h-4 mr-2"></svg-icon>
+        <button type="button" class="btn flex mb-2 md:mb-0 items-center rtl:pr-3 ltr:pl-3" v-if="!isReadOnly && config.inline === false && !hasDate" @click="addDate" tabindex="0">
+            <svg-icon name="light/calendar" class="w-4 h-4 rtl:ml-2 ltr:mr-2"></svg-icon>
     		{{ __('Add Date') }}
     	</button>
 
@@ -18,7 +18,7 @@
                 @blur="focusedField = null"
             />
 
-            <div v-if="config.time_enabled && !isRange" class="time-container @xs:ml-2 @xs:mt-0 time-fieldtype">
+            <div v-if="config.time_enabled && !isRange" class="time-container rtl:@xs:mr-2 ltr:@xs:ml-2 @xs:mt-0 time-fieldtype">
 				<time-fieldtype
                     v-if="hasTime"
                     ref="time"
diff --git a/resources/js/components/fieldtypes/FilesFieldtype.vue b/resources/js/components/fieldtypes/FilesFieldtype.vue
index 044c3853336..1212b41789c 100644
--- a/resources/js/components/fieldtypes/FilesFieldtype.vue
+++ b/resources/js/components/fieldtypes/FilesFieldtype.vue
@@ -13,12 +13,12 @@
             <div slot-scope="{ dragging }" class="assets-fieldtype-drag-container">
 
                 <div class="drag-notification" v-show="dragging">
-                    <svg-icon name="upload" class="h-8 w-8 mr-6" />
+                    <svg-icon name="upload" class="h-8 w-8 rtl:ml-6 ltr:mr-6" />
                     <span>{{ __('Drop File to Upload') }}</span>
                 </div>
 
                 <div class="assets-fieldtype-picker py-4" :class="{ 'is-expanded': value.length }">
-                    <p class="asset-upload-control text-xs text-gray-600 ml-0">
+                    <p class="asset-upload-control text-xs text-gray-600 rtl:mr-0 ltr:ml-0">
                         <button type="button" class="upload-text-button" @click.prevent="uploadFile">
                             {{ __('Upload file') }}
                         </button>
@@ -46,11 +46,11 @@
                                         <file-icon :extension="getExtension(file)" />
                                     </div>
                                     <div
-                                        class="flex items-center flex-1 ml-2 text-xs text-left truncate"
+                                        class="flex items-center flex-1 rtl:mr-2 ltr:ml-2 text-xs rtl:text-right ltr:text-left truncate"
                                         v-text="file.slice(11)"
                                     />
                                 </td>
-                                <td class="p-0 w-8 text-right align-middle">
+                                <td class="p-0 w-8 rtl:text-left ltr:text-right align-middle">
                                     <button
                                         @click="remove(i)"
                                         class="flex items-center p-2 w-full h-full text-gray-600 hover:text-gray-900"
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index c40b6d3687f..892de73b42d 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -11,12 +11,12 @@
             >
                 <header
                     v-if="fullScreenMode"
-                    class="relative flex items-center justify-between py-3 pl-3 bg-gray-200 border-b"
+                    class="relative flex items-center justify-between py-3 rtl:pr-3 ltr:pl-3 bg-gray-200 border-b"
                 >
                     <h2 v-text="__(config.display)" />
                     <button
                         @click="fullScreenMode = false"
-                        class="absolute btn-close top-2 right-5"
+                        class="absolute btn-close top-2 rtl:left-5 ltr:right-5"
                         :aria-label="__('Exit Fullscreen Mode')"
                     >&times;</button>
                 </header>
@@ -67,11 +67,11 @@
 
 <style>
     .group-fieldtype-button-wrapper {
-        @apply flex justify-end absolute top-5 sm:top-7 right-0 @md:right-4 @lg:right-6;
+        @apply flex justify-end absolute top-5 sm:top-7 rtl:left-0 ltr:right-0 @md:right-4 @lg:right-6;
     }
 
     .replicator-set .group-fieldtype-button-wrapper {
-        @apply top-5 right-4;
+        @apply top-5 rtl:left-4 ltr:right-4;
     }
 </style>
 
diff --git a/resources/js/components/fieldtypes/IconFieldtype.vue b/resources/js/components/fieldtypes/IconFieldtype.vue
index 2adaf76dda3..42f9b800035 100644
--- a/resources/js/components/fieldtypes/IconFieldtype.vue
+++ b/resources/js/components/fieldtypes/IconFieldtype.vue
@@ -22,14 +22,14 @@
                 <div class="flex items-center">
                     <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="w-5 h-5" />
                     <div v-if="option.html" v-html="option.html" class="w-5 h-5" />
-                    <span class="text-xs ml-4 text-gray-800 truncate">{{ __(option.label) }}</span>
+                    <span class="text-xs rtl:mr-4 ltr:ml-4 text-gray-800 truncate">{{ __(option.label) }}</span>
                 </div>
             </template>
             <template slot="selected-option" slot-scope="option">
                 <div class="flex items-center">
                     <svg-icon v-if="!option.html" :name="`${meta.set}/${option.label}`" class="w-5 h-5 flex items-center" />
                     <div v-if="option.html" v-html="option.html" class="w-5 h-5" />
-                    <span class="text-xs ml-4 text-gray-800 truncate">{{ __(option.label) }}</span>
+                    <span class="text-xs rtl:mr-4 ltr:ml-4 text-gray-800 truncate">{{ __(option.label) }}</span>
                 </div>
             </template>
         </v-select>
diff --git a/resources/js/components/fieldtypes/LinkFieldtype.vue b/resources/js/components/fieldtypes/LinkFieldtype.vue
index 3f9102686df..cc873cbc447 100644
--- a/resources/js/components/fieldtypes/LinkFieldtype.vue
+++ b/resources/js/components/fieldtypes/LinkFieldtype.vue
@@ -2,7 +2,7 @@
     <div class="flex items-center">
 
         <!-- Link type selector -->
-        <div class="w-28 mr-4">
+        <div class="w-28 rtl:ml-4 ltr:mr-4">
             <v-select
                 v-model="option"
                 append-to-body
diff --git a/resources/js/components/fieldtypes/RangeFieldtype.vue b/resources/js/components/fieldtypes/RangeFieldtype.vue
index 7a7d7533a88..6f3e885e3ad 100644
--- a/resources/js/components/fieldtypes/RangeFieldtype.vue
+++ b/resources/js/components/fieldtypes/RangeFieldtype.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="range-fieldtype-wrapper bg-gray-200 rounded py-2 px-4 border">
         <div class="flex items-center">
-            <div v-if="config.prepend" v-text="__(config.prepend)" class="mr-2" />
+            <div v-if="config.prepend" v-text="__(config.prepend)" class="rtl:ml-2 ltr:mr-2" />
             <input
                 type="range"
                 v-model="val"
diff --git a/resources/js/components/fieldtypes/RevealerFieldtype.vue b/resources/js/components/fieldtypes/RevealerFieldtype.vue
index 830c1a4cc42..859b5d590ef 100644
--- a/resources/js/components/fieldtypes/RevealerFieldtype.vue
+++ b/resources/js/components/fieldtypes/RevealerFieldtype.vue
@@ -4,7 +4,7 @@
         <template v-if="isToggleMode">
             <div class="toggle-fieldtype-wrapper">
                 <toggle-input :value="isRevealed" @input="update" :read-only="isReadOnly" />
-                <label v-if="config.input_label" class="ml-2 font-normal">{{ __(config.input_label) }}</label>
+                <label v-if="config.input_label" class="rtl:mr-2 ltr:ml-2 font-normal">{{ __(config.input_label) }}</label>
             </div>
         </template>
 
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index a1c0e43c48e..c2e5319fec6 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -42,7 +42,7 @@
                     <template v-else v-text="label"></template>
                 </template>
                 <template #no-options>
-                    <div class="text-sm text-gray-700 text-left py-2 px-4" v-text="__('No options to choose from.')" />
+                    <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
                 </template>
                 <template #footer="{ deselect }" v-if="config.multiple">
                     <sortable-list
@@ -68,7 +68,7 @@
                     </sortable-list>
                 </template>
         </v-select>
-        <div class="text-xs ml-2 mt-3" :class="limitIndicatorColor" v-if="config.max_items">
+        <div class="text-xs rtl:mr-2 ltr:ml-2 mt-3" :class="limitIndicatorColor" v-if="config.max_items">
             <span v-text="currentLength"></span>/<span v-text="config.max_items"></span>
         </div>
     </div>
diff --git a/resources/js/components/fieldtypes/SlugFieldtype.vue b/resources/js/components/fieldtypes/SlugFieldtype.vue
index 2edf0bf7f88..fba85f3a933 100644
--- a/resources/js/components/fieldtypes/SlugFieldtype.vue
+++ b/resources/js/components/fieldtypes/SlugFieldtype.vue
@@ -17,6 +17,7 @@
                 :id="fieldId"
                 @focus="$emit('focus')"
                 @blur="$emit('blur')"
+                direction="ltr"
             >
                 <template v-slot:append v-if="config.show_regenerate">
                     <button class="input-group-append items-center flex" @click="sync" v-tooltip="__('Regenerate from: :field', { 'field': config.from })">
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 147e0256908..23be0bbe88d 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -1,9 +1,9 @@
 <template>
     <portal name="table-fullscreen" :disabled="!fullScreenMode" target-class="table-fieldtype">
         <div class="table-fieldtype-container" :class="{'table-fullscreen bg-white': fullScreenMode }">
-            <header class="bg-gray-200 border-b py-3 pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
+            <header class="bg-gray-200 border-b py-3 rtl:pr-3 ltr:pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
                 <h2 v-text="__(config.display)" />
-                <button class="btn-close absolute top-2 right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
+                <button class="btn-close absolute top-2 rtl:left-5 ltr:right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
             </header>
             <section :class="{'p-4': fullScreenMode}">
                 <table class="table-fieldtype-table" v-if="rowCount">
@@ -18,7 +18,7 @@
                                     </a>
                                 </div>
                             </th>
-                            <th class="row-controls pr-0">
+                            <th class="row-controls rtl:pl-0 ltr:pr-0">
                                 <button @click="fullScreenMode = !fullScreenMode" class="flex items-center w-full h-full justify-center text-gray-600 hover:text-gray-800">
                                     <svg-icon name="expand-bold" class="h-3.5 w-3.5" v-show="! fullScreenMode" />
                                     <svg-icon name="shrink-all" class="h-3.5 w-3.5" v-show="fullScreenMode" />
@@ -54,7 +54,7 @@
                     {{ __('Add Row') }}
                 </button>
 
-                <button class="btn ml-2" @click="addColumn" :disabled="atColumnMax" v-if="canAddColumns">
+                <button class="btn rtl:mr-2 ltr:ml-2" @click="addColumn" :disabled="atColumnMax" v-if="canAddColumns">
                     {{ __('Add Column') }}
                 </button>
             </section>
diff --git a/resources/js/components/fieldtypes/TagsFieldtype.vue b/resources/js/components/fieldtypes/TagsFieldtype.vue
index 1338677fbca..b3c0c3151d5 100644
--- a/resources/js/components/fieldtypes/TagsFieldtype.vue
+++ b/resources/js/components/fieldtypes/TagsFieldtype.vue
@@ -27,7 +27,7 @@
                 >
             </template>
              <template #no-options>
-                <div class="text-sm text-gray-700 text-left py-2 px-4" v-text="__('No options to choose from.')" />
+                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
             </template>
             <template #footer="{ deselect }">
                 <sortable-list
diff --git a/resources/js/components/fieldtypes/TemplateFieldtype.vue b/resources/js/components/fieldtypes/TemplateFieldtype.vue
index 2f91f53e74f..7af0416d95c 100644
--- a/resources/js/components/fieldtypes/TemplateFieldtype.vue
+++ b/resources/js/components/fieldtypes/TemplateFieldtype.vue
@@ -16,7 +16,7 @@
             :multiple="false"
             :value="value">
             <template #no-options>
-                <div class="text-sm text-gray-700 text-left py-2 px-4" v-text="__('No templates to choose from.')" />
+                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No templates to choose from.')" />
             </template>
         </v-select>
     </div>
diff --git a/resources/js/components/fieldtypes/assets/AssetRow.vue b/resources/js/components/fieldtypes/assets/AssetRow.vue
index 203f4251564..73b2e8b2a85 100644
--- a/resources/js/components/fieldtypes/assets/AssetRow.vue
+++ b/resources/js/components/fieldtypes/assets/AssetRow.vue
@@ -23,7 +23,7 @@
             <button
                 v-if="showFilename"
                 @click="editOrOpen"
-                class="flex items-center flex-1 ml-3 text-xs text-left truncate w-full"
+                class="flex items-center flex-1 rtl:mr-3 ltr:ml-3 text-xs rtl:text-right ltr:text-left truncate w-full"
                 :aria-label="__('Edit Asset')"
             >
                 {{ asset.basename }}
@@ -39,7 +39,7 @@
                 {{ asset.values.alt ? "✅" : __("Set Alt") }}
             </button>
         </td>
-        <td class="p-0 w-8 text-right align-middle" v-if="!readOnly">
+        <td class="p-0 w-8 rtl:text-left ltr:text-right align-middle" v-if="!readOnly">
             <button
                 class="flex items-center p-1 w-6 h-8 text-lg antialiased text-gray-600 hover:text-gray-900"
                 @click="remove"
diff --git a/resources/js/components/fieldtypes/assets/AssetTile.vue b/resources/js/components/fieldtypes/assets/AssetTile.vue
index df0a4cc602f..24d6bc88811 100644
--- a/resources/js/components/fieldtypes/assets/AssetTile.vue
+++ b/resources/js/components/fieldtypes/assets/AssetTile.vue
@@ -81,7 +81,7 @@
                 {{ label }}
             </div>
             <button
-                class="text-blue border-l px-2 py-1 hover:bg-gray-200"
+                class="text-blue rtl:border-r ltr:border-l px-2 py-1 hover:bg-gray-200"
                 @click="edit"
                 v-if="showSetAlt && needsAlt"
             >
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 91a7b2c9b85..4f1f1a1d633 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -13,7 +13,7 @@
             <div slot-scope="{ dragging }" class="assets-fieldtype-drag-container">
 
                 <div class="drag-notification" v-if="config.allow_uploads" v-show="dragging && !showSelector">
-                    <svg-icon name="upload" class="h-6 @md:h-8 w-6 @md:w-8 mr-2 @md:mr-6" />
+                    <svg-icon name="upload" class="h-6 @md:h-8 w-6 @md:w-8 rtl:ml-2 ltr:mr-2 @md:mr-6" />
                     <span>{{ __('Drop to Upload') }}</span>
                 </div>
 
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index 50a20cb03e4..2603d11b267 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -15,23 +15,23 @@
             <div class="@container/toolbar flex items-center border-t justify-center py-2 px-2 text-2xs text-white text-center space-x-1 sm:space-x-3">
                 <button v-if="!src" @click="openSelector" type="button" class="flex btn btn-sm px-3 py-1.5">
                     <svg-icon name="folder-image" class="h-4" />
-                    <span class="ml-2 hidden @md/toolbar:inline-block">{{ __('Choose Image') }}</span>
+                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Choose Image') }}</span>
                 </button>
                 <button v-if="src" @click="edit" type="button" class="flex btn btn-sm px-3 py-1.5">
                     <svg-icon name="pencil" class="h-4" />
-                    <span class="ml-2 hidden @md/toolbar:inline-block">{{ __('Edit Image') }}</span>
+                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Edit Image') }}</span>
                 </button>
                 <button v-if="src" @click="toggleAltEditor" type="button" class="flex btn btn-sm px-3 py-1.5" :class="{ active: showingAltEdit }">
                     <svg-icon name="rename-file" class="h-4" />
-                    <span class="ml-2 hidden @md/toolbar:inline-block">{{ __('Override Alt') }}</span>
+                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Override Alt') }}</span>
                 </button>
                 <button v-if="src" @click="openSelector" type="button" class="flex btn btn-sm px-3 py-1.5">
                     <svg-icon name="swap" class="h-4" />
-                    <span class="ml-2 hidden @md/toolbar:inline-block">{{ __('Replace') }}</span>
+                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Replace') }}</span>
                 </button>
                 <button @click="deleteNode" class="flex btn btn-sm text-red-500 px-3 py-1.5">
                     <svg-icon name="trash" class="h-4" />
-                    <span class="ml-2 hidden @md/toolbar:inline-block">{{ __('Delete') }}</span>
+                    <span class="rtl:mr-2 ltr:ml-2 hidden @md/toolbar:inline-block">{{ __('Delete') }}</span>
                 </button>
             </div>
 
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 51dda0e6f77..dcc61e3f884 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -6,7 +6,7 @@
 
                 <div class="flex">
 
-                    <div class="h-8 mb-4 bg-gray-100 text-gray-800 border rounded shadow-inner flex items-center mr-1">
+                    <div class="h-8 mb-4 bg-gray-100 text-gray-800 border rounded shadow-inner flex items-center rtl:ml-1 ltr:mr-1">
                         <select
                             class="input w-auto text-sm px-1"
                             v-model="linkType">
@@ -20,7 +20,7 @@
                     </div>
 
                     <div class="h-8 mb-4 p-2 bg-gray-100 text-gray-800 w-full border rounded shadow-inner placeholder:text-gray-600 flex items-center">
-    
+
                         <!-- URL input -->
                         <input
                             v-if="linkType === 'url'"
@@ -31,7 +31,7 @@
                             :placeholder="__('URL')"
                             @keydown.enter.prevent="commit"
                         />
-    
+
                         <!-- Email input -->
                         <input
                             v-else-if="linkType === 'mailto'"
@@ -42,7 +42,7 @@
                             :placeholder="__('Email Address')"
                             @keydown.enter.prevent="commit"
                         />
-    
+
                         <!-- Phone input -->
                         <input
                             v-else-if="linkType === 'tel'"
@@ -53,25 +53,25 @@
                             placeholder="Phone Number"
                             @keydown.enter.prevent="commit"
                         />
-    
+
                         <!-- Data input -->
                         <div
                             v-else
                             class="w-full flex items-center justify-between cursor-pointer"
                             @click="openSelector"
                         >
-    
+
                             <loading-graphic v-if="isLoading" :inline="true" />
-    
-                            <div v-else class="flex-1 flex items-center mr-2 truncate">
+
+                            <div v-else class="flex-1 flex items-center rtl:ml-2 ltr:mr-2 truncate">
                                 <img
                                     v-if="linkType === 'asset' && itemData.asset && itemData.isImage"
                                     :src="itemData.asset.thumbnail || itemData.asset.url"
-                                    class="asset-thumbnail max-h-full max-w-full rounded w-6 h-6 mr-2 object-cover lazyloaded"
+                                    class="asset-thumbnail max-h-full max-w-full rounded w-6 h-6 rtl:ml-2 ltr:mr-2 object-cover lazyloaded"
                                 >
                                 {{ displayValue }}
                             </div>
-    
+
                             <button
                             class="flex items-center"
                                 v-tooltip="`${__('Browse')}...`"
@@ -81,11 +81,11 @@
                                 <svg-icon v-show="linkType === 'asset'" name="folder-image" class="h-4 w-4" />
                                 <svg-icon v-show="linkType !== 'asset'" name="folder-generic" class="h-4 w-4" />
                             </button>
-    
+
                         </div>
-    
+
                     </div>
-                    
+
                 </div>
 
 
@@ -112,7 +112,7 @@
                 </div>
 
                 <label for="target-blank" class="mt-4 flex items-center font-normal cursor-pointer text-gray-800 hover:text-black" v-if="canHaveTarget">
-                    <input class="checkbox mr-2" type="checkbox" v-model="targetBlank" id="target-blank">
+                    <input class="checkbox rtl:ml-2 ltr:mr-2" type="checkbox" v-model="targetBlank" id="target-blank">
                     {{ __('Open in new window') }}
                 </label>
             </div>
@@ -349,7 +349,7 @@ export default {
             this.itemData = { [this.linkType]: this.getItemDataForUrl(attrs.href) };
 
             this.title = attrs.title;
-            this.rel = attrs.href 
+            this.rel = attrs.href
                 ? attrs.rel
                 : this.defaultRel;
             this.targetBlank = attrs.href
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 2cd54bf922b..ca36e65529c 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -9,7 +9,7 @@
             <div class="replicator-set-header" :class="{'collapsed': collapsed, 'invalid': isInvalid }">
                 <div class="item-move sortable-handle" data-drag-handle />
                 <div class="flex items-center flex-1 p-2 replicator-set-header-inner cursor-pointer" :class="{'flex items-center': collapsed}" @click="toggleCollapsedState">
-                    <label class="text-xs whitespace-nowrap mr-2">
+                    <label class="text-xs whitespace-nowrap rtl:ml-2 ltr:mr-2">
                         <template v-if="bardSets.length > 1">
                             {{ setGroup.display }}
                             <svg-icon name="micro/chevron-right" class="w-4" />
@@ -19,7 +19,7 @@
                     <div class="flex items-center" v-if="config.instructions && !collapsed">
                         <svg-icon name="micro/circle-help" class="text-gray-700 hover:text-gray-800 h-3 w-3 text-xs" v-tooltip="{ content: $options.filters.markdown(__(config.instructions)), html:true }" />
                     </div>
-                    <div v-show="collapsed" class="flex-1 min-w-0 w-1 pr-8">
+                    <div v-show="collapsed" class="flex-1 min-w-0 w-1 rtl:pl-8 ltr:pr-8">
                         <div
                             v-html="previewText"
                             class="help-block mb-0 whitespace-nowrap overflow-hidden text-ellipsis" />
@@ -28,7 +28,7 @@
                 <div class="replicator-set-controls">
                     <toggle-fieldtype
                         handle="set-enabled"
-                        class="toggle-sm mr-4"
+                        class="toggle-sm rtl:ml-4 ltr:mr-4"
                         v-model="enabled"
                         v-tooltip.top="(enabled) ? __('Included in output') : __('Hidden from output')" />
                     <dropdown-list class="-mt-1">
diff --git a/resources/js/components/fieldtypes/date/RangePopover.vue b/resources/js/components/fieldtypes/date/RangePopover.vue
index 7f9c3cc36c0..79379fa8288 100644
--- a/resources/js/components/fieldtypes/date/RangePopover.vue
+++ b/resources/js/components/fieldtypes/date/RangePopover.vue
@@ -28,7 +28,7 @@
                         <div class="input-group-prepend flex items-center">
                             <svg-icon name="light/calendar" class="w-4 h-4" />
                         </div>
-                        <div class="input-text border border-gray-500 border-l-0 flex items-center pr-0" :class="{ 'read-only': isReadOnly }">
+                        <div class="input-text border border-gray-500 rtl:border-r-0 ltr:border-l-0 flex items-center rtl:pl-0 ltr:pr-0" :class="{ 'read-only': isReadOnly }">
                             <input
                                 class="input-text-minimal p-0 bg-transparent leading-none"
                                 :readonly="isReadOnly"
@@ -63,7 +63,7 @@
                         <div class="input-group-prepend flex items-center">
                             <svg-icon name="light/calendar" class="w-4 h-4" />
                         </div>
-                        <div class="input-text border border-gray-500 border-l-0" :class="{ 'read-only': isReadOnly }">
+                        <div class="input-text border border-gray-500 rtl:border-r-0 ltr:border-l-0" :class="{ 'read-only': isReadOnly }">
                             <input
                                 class="input-text-minimal p-0 bg-transparent leading-none"
                                 :readonly="isReadOnly"
diff --git a/resources/js/components/fieldtypes/date/SinglePopover.vue b/resources/js/components/fieldtypes/date/SinglePopover.vue
index 587649977c6..b5c9f6800bb 100644
--- a/resources/js/components/fieldtypes/date/SinglePopover.vue
+++ b/resources/js/components/fieldtypes/date/SinglePopover.vue
@@ -23,7 +23,7 @@
                     <div class="input-group-prepend flex items-center">
                         <svg-icon name="light/calendar" class="w-4 h-4" />
                     </div>
-                    <div class="input-text border border-gray-500 border-l-0 flex items-center pr-0" :class="{ 'read-only': isReadOnly }">
+                    <div class="input-text border border-gray-500 rtl:border-r-0 ltr:border-l-0 flex items-center rtl:pl-0 ltr:pr-0" :class="{ 'read-only': isReadOnly }">
                         <input
                             class="input-text-minimal p-0 bg-transparent leading-none"
                             :readonly="isReadOnly"
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index c38b32e40a8..a4215522d7d 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -5,9 +5,9 @@
     <element-container @resized="containerWidth = $event.width">
     <div class="grid-fieldtype-container" :class="{'grid-fullscreen bg-white': fullScreenMode }">
 
-        <header class="bg-gray-200 border-b py-3 pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
+        <header class="bg-gray-200 border-b py-3 rtl:pr-3 ltr:pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
             <h2 v-text="__(config.display)" />
-            <button class="btn-close absolute top-2 right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
+            <button class="btn-close absolute top-2 rtl:left-5 ltr:right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
         </header>
 
         <section :class="{'p-4': fullScreenMode}">
diff --git a/resources/js/components/fieldtypes/grid/Stacked.vue b/resources/js/components/fieldtypes/grid/Stacked.vue
index d7024d62fcb..f381666ee11 100644
--- a/resources/js/components/fieldtypes/grid/Stacked.vue
+++ b/resources/js/components/fieldtypes/grid/Stacked.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-    <div class="flex justify-end absolute top-3 right-3 @md:right-6" v-if="! grid.fullScreenMode">
+    <div class="flex justify-end absolute top-3 rtl:left-3 ltr:right-3 @md:rtl:left-6 @md:ltr:right-6" v-if="! grid.fullScreenMode">
         <button v-if="allowFullscreen" @click="grid.toggleFullScreen" class="btn btn-icon flex items-center" v-tooltip="__('Toggle Fullscreen Mode')">
             <svg-icon name="expand-bold" class="h-3.5 px-0.5 text-gray-750" v-show="! grid.fullScreenMode" />
             <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750" v-show="grid.fullScreenMode" />
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
index 0fe0eacd10e..d549764c92b 100644
--- a/resources/js/components/fieldtypes/grid/StackedRow.vue
+++ b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -7,7 +7,7 @@
 
         <div class="replicator-set-header">
             <div class="item-move cursor-grab sortable-handle" :class="{ [sortableHandleClass]: grid.isReorderable }" />
-            <div class="py-2 pl-2 replicator-set-header-inner flex justify-end items-end w-full">
+            <div class="py-2 rtl:pr-2 ltr:pl-2 replicator-set-header-inner flex justify-end items-end w-full">
                 <button v-if="canDelete" class="flex self-end group items-center" @click="$emit('removed', index)" :aria-label="__('Delete Row')">
                     <svg-icon name="micro/trash" class="w-4 h-4 text-gray-600 group-hover:text-gray-900" />
                 </button>
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 4fd8dcd46d6..9daeedd789d 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -62,13 +62,13 @@
                             <div class="flex w-full">
                                 <div class="markdown-cheatsheet-helper">
                                     <button class="text-link flex items-center" @click="showCheatsheet = true" :aria-label="__('Show Markdown Cheatsheet')">
-                                        <svg-icon name="markdown-icon" class="w-6 h-4 items-start mr-2" />
+                                        <svg-icon name="markdown-icon" class="w-6 h-4 items-start rtl:ml-2 ltr:mr-2" />
                                         <span>{{ __('Markdown Cheatsheet') }}</span>
                                     </button>
                                 </div>
                             </div>
-                            <div v-if="fullScreenMode" class="flex items-center pr-2">
-                                <div class="whitespace-nowrap mr-4"><span v-text="count.words" /> {{ __('Words') }}</div>
+                            <div v-if="fullScreenMode" class="flex items-center rtl:pl-2 ltr:pr-2">
+                                <div class="whitespace-nowrap rtl:ml-4 ltr:mr-4"><span v-text="count.words" /> {{ __('Words') }}</div>
                                 <div class="whitespace-nowrap"><span v-text="count.characters" /> {{ __('Characters') }}</div>
                             </div>
                         </div>
@@ -98,7 +98,7 @@
 
         <stack name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
             <div class="h-full overflow-auto p-6 bg-white relative">
-                <button class="btn-close absolute top-0 right-0 mt-4 mr-8" @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;</button>
+                <button class="btn-close absolute top-0 rtl:left-0 ltr:right-0 mt-4 rtl:ml-8 ltr:mr-8" @click="showCheatsheet = false" :aria-label="__('Close Markdown Cheatsheet')">&times;</button>
                 <div class="max-w-md mx-auto my-8 prose">
                     <h2 v-text="__('Markdown Cheatsheet')"></h2>
                     <div v-html="__('markdown.cheatsheet')"></div>
diff --git a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
index da6f9f635e5..f3354ec8a9f 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
@@ -9,7 +9,7 @@
             >
                 <div class="flex items-center shrink">
                     <div v-if="item.hasOwnProperty('published') && item.published !== null"
-                        class="little-dot h-1 w-1 mr-1" :class="[item.published ? 'bg-green-600' : 'bg-gray-400']" />
+                        class="little-dot h-1 w-1 rtl:ml-1 ltr:mr-1" :class="[item.published ? 'bg-green-600' : 'bg-gray-400']" />
                     <a :href="item.edit_url" :title="item.title" v-text="item.title" />
                 </div>
             </div>
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 6fd9996fef6..3f7d4cb216c 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -8,7 +8,7 @@
 <div :class="{ wrapperClasses: fullScreenMode }">
 <div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-gray-200': fullScreenMode }">
 
-    <header class="bg-white fixed top-0 inset-x-0 border-b p-3 pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
+    <header class="bg-white fixed top-0 inset-x-0 border-b p-3 rtl:pr-4 ltr:pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
         <h2 v-text="__(config.display)" class="flex-1" />
             <div class="flex items-center">
                 <div class="btn-group">
@@ -19,13 +19,13 @@
                         <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-1 text-gray-750" />
                     </button>
                 </div>
-                <button class="btn-close ml-2" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
+                <button class="btn-close rtl:mr-2 ltr:ml-2" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
             </div>
     </header>
 
     <section :class="{'mt-12 p-4 bg-gray-200': fullScreenMode}">
 
-        <div class="flex justify-end" :class="{'absolute top-3 right-3 @md:right-6': !config.hide_display}" v-if="! fullScreenMode">
+        <div class="flex justify-end" :class="{'absolute top-3 rtl:left-3 ltr:right-3 @md:right-6': !config.hide_display}" v-if="! fullScreenMode">
             <div class="btn-group">
                 <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
                     <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-750" />
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index e2408799b44..b513046bc32 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -7,7 +7,7 @@
             <div class="replicator-set-header" :class="{ 'p-2': isReadOnly, 'collapsed': collapsed, 'invalid': isInvalid }">
                 <div class="item-move sortable-handle" :class="sortableHandleClass" v-if="!isReadOnly"></div>
                 <div class="flex items-center flex-1 p-2 replicator-set-header-inner cursor-pointer" :class="{'flex items-center': collapsed}" @click="toggleCollapsedState">
-                    <label class="text-xs whitespace-nowrap mr-2 cursor-pointer">
+                    <label class="text-xs whitespace-nowrap rtl:ml-2 ltr:mr-2 cursor-pointer">
                         <template v-if="replicatorSets.length > 1">
                             {{ setGroup.display }}
                             <svg-icon name="micro/chevron-right" class="w-4" />
@@ -17,7 +17,7 @@
                     <div class="flex items-center" v-if="config.instructions && !collapsed">
                         <svg-icon name="micro/circle-help" class="text-gray-700 hover:text-gray-800 h-3 w-3 text-xs" v-tooltip="{ content: $options.filters.markdown(__(config.instructions)), html:true }" />
                     </div>
-                    <div v-show="collapsed" class="flex-1 min-w-0 w-1 pr-8">
+                    <div v-show="collapsed" class="flex-1 min-w-0 w-1 rtl:pl-8 ltr:pr-8">
                         <div
                             v-html="previewText"
                             class="help-block mb-0 whitespace-nowrap overflow-hidden text-ellipsis" />
@@ -26,7 +26,7 @@
                 <div class="replicator-set-controls" v-if="!isReadOnly">
                     <toggle-fieldtype
                         handle="set-enabled"
-                        class="toggle-sm mr-2"
+                        class="toggle-sm rtl:ml-2 ltr:mr-2"
                         @input="toggleEnabledState"
                         :value="values.enabled"
                         v-tooltip.top="(values.enabled) ? __('Included in output') : __('Hidden from output')" />
diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index c0e00007b27..3f95ca0b956 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -17,7 +17,7 @@
             <div class="set-picker-header p-3 border-b text-xs flex items-center">
                 <input ref="search" type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" v-model="search" />
                 <div v-if="showGroupBreadcrumb" class="flex items-center text-gray-700 font-medium">
-                    <button @click="unselectGroup" class=" hover:text-gray-900 ml-2.5 rounded">
+                    <button @click="unselectGroup" class=" hover:text-gray-900 rtl:mr-2.5 ltr:ml-2.5 rounded">
                         {{ __('Groups') }}
                     </button>
                     <svg-icon name="micro/chevron-right" class="w-4 h-4" />
@@ -27,7 +27,7 @@
             <div class="p-1 max-h-[21rem] overflow-auto">
                 <div v-for="(item, i) in items" :key="item.handle" class="cursor-pointer rounded" :class="{ 'bg-gray-200': selectionIndex === i }" @mouseover="selectionIndex = i">
                     <div v-if="item.type === 'group'" @click="selectGroup(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
-                        <svg-icon :name="groupIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white border border-gray-600 mr-2 p-2 text-gray-800" />
+                        <svg-icon :name="groupIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white border border-gray-600 rtl:ml-2 ltr:mr-2 p-2 text-gray-800" />
                         <div class="flex-1">
                             <div class="text-md font-medium text-gray-800 truncate w-52">{{ __(item.display || item.handle) }}</div>
                             <div v-if="item.instructions" class="text-2xs text-gray-700 truncate w-52">{{ __(item.instructions) }}</div>
@@ -35,7 +35,7 @@
                         <svg-icon name="micro/chevron-right-thin" class="text-gray-600 group-hover:text-gray-800" />
                     </div>
                     <div v-if="item.type === 'set'" @click="addSet(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
-                        <svg-icon :name="setIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white border border-gray-600 mr-2 p-2 text-gray-800" />
+                        <svg-icon :name="setIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white border border-gray-600 rtl:ml-2 ltr:mr-2 p-2 text-gray-800" />
                         <div class="flex-1">
                             <div class="text-md font-medium text-gray-800 truncate w-52">{{ __(item.display || item.handle) }}</div>
                             <div v-if="item.instructions" class="text-2xs text-gray-700 truncate w-52">{{ __(item.instructions) }}</div>
diff --git a/resources/js/components/forms/SubmissionListing.vue b/resources/js/components/forms/SubmissionListing.vue
index 10e9cac0687..6ace7860c0d 100644
--- a/resources/js/components/forms/SubmissionListing.vue
+++ b/resources/js/components/forms/SubmissionListing.vue
@@ -20,7 +20,7 @@
                 <div class="card overflow-hidden p-0 relative">
                     <div class="flex flex-wrap items-center justify-between p-2 text-sm border-b">
                         <data-list-search class="h-8 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
-                        <data-list-column-picker class="ml-2" :preferences-key="preferencesKey('columns')" />
+                        <data-list-column-picker class="rtl:mr-2 ltr:ml-2" :preferences-key="preferencesKey('columns')" />
                     </div>
 
                     <div v-show="items.length === 0" class="p-6 text-center text-gray-500" v-text="__('No results')" />
diff --git a/resources/js/components/globals/PublishForm.vue b/resources/js/components/globals/PublishForm.vue
index fb2bb9e4622..dce795d73ca 100644
--- a/resources/js/components/globals/PublishForm.vue
+++ b/resources/js/components/globals/PublishForm.vue
@@ -7,18 +7,18 @@
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="__(title)" />
 
-                <div class="pt-px text-2xs text-gray-600 ml-4 flex" v-if="! canEdit">
-                    <svg-icon name="light/lock" class="w-4 mr-1 -mt-1" /> {{ __('Read Only') }}
+                <div class="pt-px text-2xs text-gray-600 rtl:mr-4 ltr:ml-4 flex" v-if="! canEdit">
+                    <svg-icon name="light/lock" class="w-4 rtl:ml-1 ltr:mr-1 -mt-1" /> {{ __('Read Only') }}
                 </div>
 
-                <dropdown-list v-if="canConfigure || canEditBlueprint" class="mr-2">
+                <dropdown-list v-if="canConfigure || canEditBlueprint" class="rtl:ml-2 ltr:mr-2">
                     <dropdown-item v-if="canConfigure" v-text="__('Configure')" :redirect="configureUrl" />
                     <dropdown-item v-if="canEditBlueprint" :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
                 </dropdown-list>
 
                 <site-selector
                     v-if="localizations.length > 1"
-                    class="mr-4"
+                    class="rtl:ml-4 ltr:mr-4"
                     :sites="localizations"
                     :value="site"
                     @input="localizationSelected"
diff --git a/resources/js/components/globals/Sites.vue b/resources/js/components/globals/Sites.vue
index 04ed120fe39..a3b6cf32af3 100644
--- a/resources/js/components/globals/Sites.vue
+++ b/resources/js/components/globals/Sites.vue
@@ -12,7 +12,7 @@
                 <tr v-for="site in sites" :key="site.handle">
                     <td>
                         <div class="flex items-center text-sm">
-                            <toggle-input v-model="site.enabled" class="mr-4" />
+                            <toggle-input v-model="site.enabled" class="rtl:ml-4 ltr:mr-4" />
                             {{ __(site.name) }}
                         </div>
                     </td>
diff --git a/resources/js/components/inputs/Text.vue b/resources/js/components/inputs/Text.vue
index 002e35ea8df..69fc84ba75a 100644
--- a/resources/js/components/inputs/Text.vue
+++ b/resources/js/components/inputs/Text.vue
@@ -21,6 +21,7 @@
                 :autocomplete="autocomplete"
                 :autofocus="focus"
                 :min="min"
+                :dir="direction"
                 @input="$emit('input', $event.target.value)"
                 @keydown="$emit('keydown', $event)"
                 @focus="$emit('focus')"
@@ -32,7 +33,7 @@
                 </div>
             </slot>
         </div>
-        <div class="text-xs ml-2" :class="limitIndicatorColor" v-if="limit">
+        <div class="text-xs rtl:mr-2 ltr:ml-2" :class="limitIndicatorColor" v-if="limit">
             <span v-text="currentLength"></span>/<span v-text="limit"></span>
         </div>
     </div>
@@ -58,7 +59,8 @@ export default {
         focus: { type: Boolean },
         autocomplete: { default: null },
         autoselect: { type: Boolean },
-        min: { type: Number, default: undefined }
+        min: { type: Number, default: undefined },
+        direction: { type: String }
     },
     mounted() {
         if (this.autoselect) {
diff --git a/resources/js/components/inputs/Textarea.vue b/resources/js/components/inputs/Textarea.vue
index 9d45d769a9f..3a5364f39e0 100644
--- a/resources/js/components/inputs/Textarea.vue
+++ b/resources/js/components/inputs/Textarea.vue
@@ -13,7 +13,7 @@
             @focus="$emit('focus')"
             @blur="$emit('blur')"
         />
-        <div class="text-right text-xs" :class="limitIndicatorColor" v-if="limit">
+        <div class="rtl:text-left ltr:text-right text-xs" :class="limitIndicatorColor" v-if="limit">
             <span v-text="currentLength"></span>/<span v-text="limit"></span>
         </div>
     </div>
diff --git a/resources/js/components/inputs/relationship/CreateButton.vue b/resources/js/components/inputs/relationship/CreateButton.vue
index 193bc3b3b62..e3588e69fbb 100644
--- a/resources/js/components/inputs/relationship/CreateButton.vue
+++ b/resources/js/components/inputs/relationship/CreateButton.vue
@@ -4,10 +4,10 @@
         <dropdown-list :disabled="creatables.length === 1">
             <template #trigger>
                 <button
-                    class="text-button text-blue hover:text-gray-800 mr-6 flex items-center outline-none"
+                    class="text-button text-blue hover:text-gray-800 rtl:ml-6 ltr:mr-6 flex items-center outline-none"
                     @click="create"
                 >
-                    <svg-icon name="light/content-writing" class="mr-1 h-4 w-4 flex items-center"></svg-icon>
+                    <svg-icon name="light/content-writing" class="rtl:ml-1 ltr:mr-1 h-4 w-4 flex items-center"></svg-icon>
                     <span class="hidden @sm:block" v-text="__('Create & Link Item')" />
                     <span class="@sm:hidden" v-text="__('Create')" />
                 </button>
diff --git a/resources/js/components/inputs/relationship/Item.vue b/resources/js/components/inputs/relationship/Item.vue
index 121ad381898..d0b6b3f9b40 100644
--- a/resources/js/components/inputs/relationship/Item.vue
+++ b/resources/js/components/inputs/relationship/Item.vue
@@ -6,7 +6,7 @@
     >
         <div class="item-move" v-if="sortable">&nbsp;</div>
         <div class="item-inner">
-            <div v-if="statusIcon" class="little-dot mr-2 hidden@sm:block" :class="item.status" />
+            <div v-if="statusIcon" class="little-dot rtl:ml-2 ltr:mr-2 hidden@sm:block" :class="item.status" />
 
             <div
                 v-if="item.invalid"
@@ -28,7 +28,7 @@
             />
 
             <div class="flex items-center flex-1 justify-end">
-                <div v-if="item.collection" v-text="__(item.collection.title)" class="text-4xs text-gray-600 uppercase whitespace-nowrap mr-2 hidden @sm:block" />
+                <div v-if="item.collection" v-text="__(item.collection.title)" class="text-4xs text-gray-600 uppercase whitespace-nowrap rtl:ml-2 ltr:mr-2 hidden @sm:block" />
 
                 <div class="flex items-center" v-if="!readOnly">
                     <dropdown-list>
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index 3ba22ab8ee6..22366d1bd22 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -55,7 +55,7 @@
                         />
                     </div>
                     <button ref="existing" class="text-blue hover:text-gray-800 flex items-center mb-2 outline-none" @click.prevent="isSelecting = true">
-                        <svg-icon name="light/hyperlink" class="mr-1 h-4 w-4 flex items-center"></svg-icon>
+                        <svg-icon name="light/hyperlink" class="rtl:ml-1 ltr:mr-1 h-4 w-4 flex items-center"></svg-icon>
                         <span class="hidden @sm:block" v-text="__('Link Existing Item')" />
                         <span class="@sm:hidden" v-text="__('Link')" />
                     </button>
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 5e6a57d07ba..cfb11ff52a7 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -33,7 +33,7 @@
                 >
             </template>
              <template #no-options>
-                <div class="text-sm text-gray-700 text-left py-2 px-4" v-text="__('No options to choose from.')" />
+                <div class="text-sm text-gray-700 rtl:text-right ltr:text-left py-2 px-4" v-text="__('No options to choose from.')" />
             </template>
             <template #footer="{ deselect }" v-if="multiple">
                 <sortable-list
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 01394f18f8c..1ce65f3d3ca 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -22,7 +22,7 @@
                 <div class="bg-white z-1">
                     <div class="py-2 px-4 flex items-center justify-between">
                         <data-list-search class="h-8 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
-                        <div class="btn-group ml-4" v-if="canUseTree">
+                        <div class="btn-group rtl:mr-4 ltr:ml-4" v-if="canUseTree">
                             <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
                                 <svg-icon name="light/structures" class="h-4 w-4"/>
                             </button>
@@ -57,7 +57,7 @@
                             >
                                 <template slot="cell-title" slot-scope="{ row: entry }">
                                     <div class="flex items-center">
-                                        <div class="little-dot mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="entry.status && ! columnShowing('status')" />
+                                        <div class="little-dot rtl:ml-2 ltr:mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="entry.status && ! columnShowing('status')" />
                                         {{ entry.title }}
                                     </div>
                                 </template>
@@ -95,7 +95,7 @@
                                 <button
                                     v-if="! hasMaxSelections || maxSelections > 1"
                                     type="button"
-                                    class="btn-primary ml-2"
+                                    class="btn-primary rtl:mr-2 ltr:ml-2"
                                     @click="select">
                                     {{ __('Select') }}
                                 </button>
@@ -111,7 +111,7 @@
             <div class="flex flex-col h-full">
                 <div class="bg-white bg-gray-200 shadow px-4 py-2 z-1 h-13 flex items-center justify-end">
                     <h1 class="flex-1 flex items-center text-xl">{{ tree.title }}</h1>
-                    <div class="btn-group ml-4">
+                    <div class="btn-group rtl:mr-4 ltr:ml-4">
                         <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
                             <svg-icon name="light/structures" class="h-4 w-4"/>
                         </button>
@@ -140,7 +140,7 @@
                                         <input
                                             :ref="`tree-branch-${branch.id}`"
                                             type="checkbox"
-                                            class="mt-3 ml-3"
+                                            class="mt-3 rtl:mr-3 ltr:ml-3"
                                             :value="branch.id"
                                             :checked="isSelected(branch.id)"
                                             :disabled="reachedSelectionLimit && !singleSelect && !isSelected(branch.id)"
@@ -176,7 +176,7 @@
                                 <button
                                     v-if="! hasMaxSelections || maxSelections > 1"
                                     type="button"
-                                    class="btn-primary ml-2"
+                                    class="btn-primary rtl:mr-2 ltr:ml-2"
                                     @click="select">
                                     {{ __('Select') }}
                                 </button>
diff --git a/resources/js/components/live-preview/LivePreview.vue b/resources/js/components/live-preview/LivePreview.vue
index 1d5b53f909a..6b3f462b93b 100644
--- a/resources/js/components/live-preview/LivePreview.vue
+++ b/resources/js/components/live-preview/LivePreview.vue
@@ -12,12 +12,12 @@
 
                 <transition name="live-preview-header-slide">
                     <div v-show="headerVisible" class="live-preview-header">
-                        <div class="text-base text-gray-700 font-medium mr-4">{{ __('Live Preview') }}</div>
+                        <div class="text-base text-gray-700 font-medium rtl:ml-4 ltr:mr-4">{{ __('Live Preview') }}</div>
                         <div class="flex items-center">
                             <button v-if="canPopOut && !poppedOut" class="btn" @click="popout">{{ __('Pop out') }}</button>
                             <button v-if="poppedOut" class="btn" @click="closePopout">{{ __('Pop in') }}</button>
-                            <select-input :options="deviceSelectOptions" v-model="previewDevice" v-show="!poppedOut" class="ml-4" />
-                            <select-input :options="targetSelectOptions" v-model="target" class="ml-4" v-if="targets.length > 1" />
+                            <select-input :options="deviceSelectOptions" v-model="previewDevice" v-show="!poppedOut" class="rtl:mr-4 ltr:ml-4" />
+                            <select-input :options="targetSelectOptions" v-model="target" class="rtl:mr-4 ltr:ml-4" v-if="targets.length > 1" />
 
                             <component
                                 v-for="(component, handle) in inputs"
@@ -26,7 +26,7 @@
                                 :value="extras[handle]"
                                 :loading="loading"
                                 @input="componentUpdated(handle, $event)"
-                                class="ml-4" />
+                                class="rtl:mr-4 ltr:ml-4" />
 
                             <slot name="buttons" />
 
diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue
index 38b34a8c616..68043ab7a43 100644
--- a/resources/js/components/modals/ConfirmationModal.vue
+++ b/resources/js/components/modals/ConfirmationModal.vue
@@ -14,7 +14,7 @@
             </div>
             <div class="px-5 py-3 bg-gray-200 rounded-b-lg border-t flex items-center justify-end text-sm">
                 <button class="text-gray hover:text-gray-900" @click="$emit('cancel')" v-text="__(cancelText)" v-if="cancellable" />
-                <button class="ml-4" :class="buttonClass" :disabled="disabled" v-text="__(buttonText)" @click="$emit('confirm')" />
+                <button class="rtl:mr-4 ltr:ml-4" :class="buttonClass" :disabled="disabled" v-text="__(buttonText)" @click="$emit('confirm')" />
             </div>
         </div>
     </modal>
diff --git a/resources/js/components/nav/Branch.vue b/resources/js/components/nav/Branch.vue
index 8f954661171..c47c36683cf 100644
--- a/resources/js/components/nav/Branch.vue
+++ b/resources/js/components/nav/Branch.vue
@@ -2,11 +2,11 @@
 
     <div class="flex">
         <div class="page-move w-6" />
-        <div class="flex items-center flex-1 p-2 ml-2 text-xs leading-normal">
+        <div class="flex items-center flex-1 p-2 rtl:mr-2 ltr:ml-2 text-xs leading-normal">
             <div class="flex items-center flex-1" :class="{ 'opacity-50': isHidden || isInHiddenSection }">
                 <template v-if="! isSection">
-                    <i v-if="isAlreadySvg" class="w-4 h-4 mr-2" v-html="icon"></i>
-                    <svg-icon v-else class="w-4 h-4 mr-2" :name="icon" />
+                    <i v-if="isAlreadySvg" class="w-4 h-4 rtl:ml-2 ltr:mr-2" v-html="icon"></i>
+                    <svg-icon v-else class="w-4 h-4 rtl:ml-2 ltr:mr-2" :name="icon" />
                 </template>
 
                 <a
@@ -23,9 +23,9 @@
                     <svg-icon name="micro/chevron-down-xs" class="h-1.5" />
                 </button>
 
-                <div v-if="item.collection" class="ml-4 flex items-center">
+                <div v-if="item.collection" class="rtl:mr-4 ltr:ml-4 flex items-center">
                     <svg-icon name="light/content-writing" class="w-4 h-4" />
-                    <div class="ml-1">
+                    <div class="rtl:mr-1 ltr:ml-1">
                         <a :href="item.collection.create_url" v-text="__('Add')" />
                         <span class="text-gray">/</span>
                         <a :href="item.collection.edit_url" v-text="__('Edit')" />
@@ -33,7 +33,7 @@
                 </div>
             </div>
 
-            <div class="pr-2 flex items-center">
+            <div class="rtl:pl-2 ltr:pr-2 flex items-center">
                 <slot name="branch-icon" :branch="item" />
 
                 <svg-icon v-if="isRenamedSection" class="inline-block w-4 h-4 text-gray-500" name="light/content-writing" v-tooltip="__('Renamed Section')" />
@@ -44,7 +44,7 @@
                 <svg-icon v-else-if="isModified" class="inline-block w-4 h-4 text-gray-500" name="light/content-writing" v-tooltip="__('Modified Item')" />
                 <svg-icon v-else-if="isCustom" class="inline-block w-4 text-gray-500" name="light/user-edit" v-tooltip="isSection ? __('Custom Section') : __('Custom Item')" />
 
-                <dropdown-list class="ml-4">
+                <dropdown-list class="rtl:mr-4 ltr:ml-4">
                     <slot name="branch-options"
                         :item="item"
                         :depth="depth"
diff --git a/resources/js/components/nav/Builder.vue b/resources/js/components/nav/Builder.vue
index 53312055170..8cf30df52ed 100644
--- a/resources/js/components/nav/Builder.vue
+++ b/resources/js/components/nav/Builder.vue
@@ -8,41 +8,41 @@
             <div class="flex items-center">
                 <h1 class="flex-1">{{ __(title) }}</h1>
 
-                <dropdown-list class="mr-2">
+                <dropdown-list class="rtl:ml-2 ltr:mr-2">
                     <dropdown-item :text="__('Reset Nav Customizations')" class="warning" @click="confirmingReset = true"></dropdown-item>
                 </dropdown-list>
 
-                <a @click="discardChanges" class="text-2xs text-blue mr-4 underline" v-if="isDirty" v-text="__('Discard changes')" />
+                <a @click="discardChanges" class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline" v-if="isDirty" v-text="__('Discard changes')" />
 
                 <dropdown-list>
                     <template #trigger>
-                        <button class="btn flex items-center pr-4">
+                        <button class="btn flex items-center rtl:pl-4 ltr:pr-4">
                             {{ __('Add Item') }}
-                            <svg-icon name="micro/chevron-down-xs" class="w-2 ml-4" />
+                            <svg-icon name="micro/chevron-down-xs" class="w-2 rtl:mr-4 ltr:ml-4" />
                         </button>
                     </template>
                     <dropdown-item :text="__('Add Nav Item')" @click="addItem(topLevelTreeData)" />
                     <dropdown-item :text="__('Add Section')" @click="addSection" />
                 </dropdown-list>
 
-                <div class="ml-4 text-left" :class="{ 'btn-group': hasSaveAsOptions }">
+                <div class="rtl:mr-4 ltr:ml-4 rtl:text-right ltr:text-left" :class="{ 'btn-group': hasSaveAsOptions }">
                     <button
-                        class="btn-primary pl-4"
+                        class="btn-primary rtl:pr-4 ltr:pl-4"
                         :class="{ 'disabled': !changed }"
                         :disabled="!changed"
                         @click="save"
                         v-text="__('Save Changes')" />
 
-                    <dropdown-list v-if="hasSaveAsOptions" class="ml-0">
+                    <dropdown-list v-if="hasSaveAsOptions" class="rtl:mr-0 ltr:ml-0">
                         <template #trigger>
-                            <button class="btn-primary rounded-l-none flex items-center">
+                            <button class="btn-primary rtl:rounded-r-none ltr:rounded-l-none flex items-center">
                                 <svg-icon name="micro/chevron-down-xs" class="w-2" />
                             </button>
                         </template>
                         <h6 class="p-2">{{ __('Save to') }}...</h6>
                         <dropdown-item v-for="option in saveAsOptions" :key="option.url" @click="saveAs(option.url)" class="group">
-                            <div class="flex items-start pr-4">
-                                <svg-icon :name="option.icon" class="text-gray shrink-0 mr-2 w-4 group-hover:text-white" />
+                            <div class="flex items-start rtl:pl-4 ltr:pr-4">
+                                <svg-icon :name="option.icon" class="text-gray shrink-0 rtl:ml-2 ltr:mr-2 w-4 group-hover:text-white" />
                                 <span class="whitespace-normal">{{ __(option.label) }}</span>
                             </div>
                         </dropdown-item>
@@ -53,12 +53,12 @@
 
         <div class="mb-2 flex justify-end">
             <a
-                class="text-2xs text-blue mr-4 underline"
+                class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline"
                 v-text="__('Expand All')"
                 @click="expandAll"
             />
             <a
-                class="text-2xs text-blue mr-2 underline"
+                class="text-2xs text-blue rtl:ml-2 ltr:mr-2 underline"
                 v-text="__('Collapse All')"
                 @click="collapseAll"
             />
@@ -74,6 +74,7 @@
                 :data="topLevelTreeData"
                 :space="1"
                 :indent="24"
+                :dir="direction"
                 @change="changed = true"
                 @drag="treeDrag"
                 @drop="treeDrop"
@@ -123,6 +124,7 @@
                 :data="mainTreeData"
                 :space="1"
                 :indent="24"
+                :dir="direction"
                 @change="changed = true"
                 @drag="treeDrag"
                 @drop="treeDrop"
@@ -314,6 +316,10 @@ export default {
                 && this.topLevelTreeData[0]._id === this.draggingNode._id;
         },
 
+        direction() {
+            return this.$config.get('direction', 'rtl');
+        },
+
     },
 
     methods: {
diff --git a/resources/js/components/navigation/RemovePageConfirmation.vue b/resources/js/components/navigation/RemovePageConfirmation.vue
index 4e07195c7d4..3372c78376f 100644
--- a/resources/js/components/navigation/RemovePageConfirmation.vue
+++ b/resources/js/components/navigation/RemovePageConfirmation.vue
@@ -9,7 +9,7 @@
                 <p class="mb-4" v-text="__('Are you sure you want to remove this page?')" />
                 <p class="mb-4" v-text="__('Only the references will be removed. Entries will not be deleted.')" />
                 <label class="flex items-center" v-if="children">
-                    <input type="checkbox" class="mr-2" v-model="shouldDeleteChildren" />
+                    <input type="checkbox" class="rtl:ml-2 ltr:mr-2" v-model="shouldDeleteChildren" />
                     {{ __n('Remove child page|Remove :count child pages', children) }}
                 </label>
             </div>
@@ -17,7 +17,7 @@
                 <button class="text-gray hover:text-gray-900"
                     @click="$emit('cancel')"
                     v-text="__('Cancel')" />
-                <button class="btn ml-4 btn-danger"
+                <button class="btn rtl:mr-4 ltr:ml-4 btn-danger"
                     @click="$emit('confirm', shouldDeleteChildren)"
                     v-text="__('Remove')" />
             </div>
diff --git a/resources/js/components/navigation/View.vue b/resources/js/components/navigation/View.vue
index dac761c7f13..f3a9ffd096f 100644
--- a/resources/js/components/navigation/View.vue
+++ b/resources/js/components/navigation/View.vue
@@ -8,15 +8,15 @@
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="__(title)" />
 
-                <dropdown-list v-if="editable" class="mr-2">
+                <dropdown-list v-if="editable" class="rtl:ml-2 ltr:mr-2">
                     <slot name="twirldown" />
                 </dropdown-list>
 
-                <a @click="$refs.tree.cancel" class="text-2xs text-blue mr-4 underline" v-if="isDirty" v-text="__('Discard changes')" />
+                <a @click="$refs.tree.cancel" class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline" v-if="isDirty" v-text="__('Discard changes')" />
 
                 <site-selector
                     v-if="sites.length > 1"
-                    class="mr-4"
+                    class="rtl:ml-4 ltr:mr-4"
                     :sites="sites"
                     :value="site"
                     @input="siteSelected"
@@ -26,11 +26,11 @@
                     <template #trigger>
                         <button
                             class="btn"
-                            :class="{ 'flex items-center pr-4': hasCollections }"
+                            :class="{ 'flex items-center rtl:pl-4 ltr:pr-4': hasCollections }"
                             @click="addLink"
                         >
                             {{ __('Add Nav Item') }}
-                            <svg-icon name="micro/chevron-down-xs" class="w-2 ml-4" v-if="hasCollections" />
+                            <svg-icon name="micro/chevron-down-xs" class="w-2 rtl:mr-4 ltr:ml-4" v-if="hasCollections" />
                         </button>
                     </template>
                     <dropdown-item :text="__('Add Nav Item')" @click="linkPage()" />
@@ -39,7 +39,7 @@
 
                 <button
                     v-if="canEdit"
-                    class="btn-primary ml-4"
+                    class="btn-primary rtl:mr-4 ltr:ml-4"
                     :class="{ 'disabled': !changed }"
                     :disabled="!changed"
                     @click="$refs.tree.save"
@@ -66,30 +66,30 @@
                 <div class="card p-4 content w-full">
                     <div class="flex flex-wrap w-full">
                         <a :href="editUrl" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-                            <svg-icon name="light/hammer-wrench" class="h-8 w-8 mr-4 text-gray-800" />
-                            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
-                                <h3 class="mb-2 text-blue">{{ __('Configure Navigation') }} &rarr;</h3>
+                            <svg-icon name="light/hammer-wrench" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800" />
+                            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
+                                <h3 class="mb-2 text-blue">{{ __('Configure Navigation') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
                                 <p>{{ __('messages.navigation_configure_settings_intro') }}</p>
                             </div>
                         </a>
                         <a @click="linkPage()" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-                            <svg-icon name="paperclip" class="h-8 w-8 mr-4 text-gray-800" />
-                            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
-                                <h3 class="mb-2 text-blue">{{ __('Link to URL') }} &rarr;</h3>
+                            <svg-icon name="paperclip" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800" />
+                            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
+                                <h3 class="mb-2 text-blue">{{ __('Link to URL') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
                                  <p>{{ __('messages.navigation_link_to_url_instructions') }}</p>
                             </div>
                         </a>
                         <a @click="linkEntries()" v-if="hasCollections" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-                            <svg-icon name="light/hierarchy-files" class="h-8 w-8 mr-4 text-gray-800" />
-                            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
-                                <h3 class="mb-2 text-blue">{{ __('Link to Entry') }} &rarr;</h3>
+                            <svg-icon name="light/hierarchy-files" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800" />
+                            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
+                                <h3 class="mb-2 text-blue">{{ __('Link to Entry') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
                                  <p>{{ __('messages.navigation_link_to_entry_instructions') }}</p>
                             </div>
                         </a>
                         <a :href="docs_url('navigation')" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-                            <svg-icon name="light/book-pages" class="h-8 w-8 mr-4 text-gray-800" />
-                            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
-                                <h3 class="mb-2 text-blue">{{ __('Read the Documentation') }} &rarr;</h3>
+                            <svg-icon name="light/book-pages" class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800" />
+                            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
+                                <h3 class="mb-2 text-blue">{{ __('Read the Documentation') }} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span></h3>
                                  <p>{{ __('messages.navigation_documentation_instructions') }}</p>
                             </div>
                         </a>
@@ -246,7 +246,11 @@ export default {
             return _.mapObject(this.publishInfo, value => {
                 return _.pick(value, ['entry', 'values', 'localizedFields', 'new']);
             });
-        }
+        },
+
+        direction() {
+            return this.$config.get('direction', 'rtl');
+        },
 
     },
 
diff --git a/resources/js/components/preferences/EditForm.vue b/resources/js/components/preferences/EditForm.vue
index 18b830e80da..3c60acf67e4 100644
--- a/resources/js/components/preferences/EditForm.vue
+++ b/resources/js/components/preferences/EditForm.vue
@@ -16,24 +16,24 @@
             <div class="flex items-center mb-6">
                 <h1 class="flex-1">{{ title }}</h1>
 
-                <div class="ml-4 text-left" :class="{ 'btn-group': hasSaveAsOptions }">
+                <div class="rtl:mr-4 ltr:ml-4 rtl:text-right ltr:text-left" :class="{ 'btn-group': hasSaveAsOptions }">
                     <button
-                        class="btn-primary pl-4"
+                        class="btn-primary rtl:pr-4 ltr:pl-4"
                         :class="{ 'disabled': !isDirty }"
                         :disabled="!isDirty"
                         @click="save"
                         v-text="__('Save')" />
 
-                    <dropdown-list v-if="hasSaveAsOptions" class="ml-0">
+                    <dropdown-list v-if="hasSaveAsOptions" class="rtl:mr-0 ltr:ml-0">
                         <template #trigger>
-                            <button class="btn-primary rounded-l-none flex items-center">
+                            <button class="btn-primary rtl:rounded-r-none ltr:rounded-l-none flex items-center">
                                 <svg-icon name="micro/chevron-down-xs" class="w-2" />
                             </button>
                         </template>
                         <h6 class="p-2">{{ __('Save to') }}...</h6>
                         <dropdown-item v-for="option in saveAsOptions" :key="option.url" @click="saveAs(option.url)">
-                            <div class="flex items-start pr-4">
-                                <svg-icon :name="option.icon" class="text-gray shrink-0 mr-2 w-4 group-hover:text-white" />
+                            <div class="flex items-start rtl:pl-4 ltr:pr-4">
+                                <svg-icon :name="option.icon" class="text-gray shrink-0 rtl:ml-2 ltr:mr-2 w-4 group-hover:text-white" />
                                 <span class="whitespace-normal">{{ option.label }}</span>
                             </div>
                         </dropdown-item>
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index f8582718a54..7f222e4c53b 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -10,17 +10,17 @@
             <label v-if="showLabel" class="publish-field-label" :class="{'font-bold': config.bold}" :for="fieldId">
                 <span
                     v-if="showLabelText"
-                    class="mr-1"
+                    class="rtl:ml-1 ltr:mr-1"
                     :class="{ 'text-gray-600': syncable && isSynced }"
                     v-text="__(labelText)"
                     v-tooltip="{content: config.handle, delay: 500, autoHide: false}"
                 />
-                <i class="required mr-1" v-if="config.required">*</i>
-                <avatar v-if="isLocked" :user="lockingUser" class="w-4 rounded-full -mt-px ml-2 mr-2" v-tooltip="lockingUser.name" />
-                <span v-if="isReadOnly && !isTab && !isSection" class="text-gray-500 font-normal text-2xs mr-1">
+                <i class="required rtl:ml-1 ltr:mr-1" v-if="config.required">*</i>
+                <avatar v-if="isLocked" :user="lockingUser" class="w-4 rounded-full -mt-px rtl:mr-2 ltr:ml-2 rtl:ml-2 ltr:mr-2" v-tooltip="lockingUser.name" />
+                <span v-if="isReadOnly && !isTab && !isSection" class="text-gray-500 font-normal text-2xs rtl:ml-1 ltr:mr-1">
                     {{ isLocked ? __('Locked') : __('Read Only') }}
                 </span>
-                <svg-icon name="translate" class="h-4 mr-1 w-4 text-gray-600" v-if="isLocalizable && !isTab" v-tooltip.top="__('Localizable field')" />
+                <svg-icon name="translate" class="h-4 rtl:ml-1 ltr:mr-1 w-4 text-gray-600" v-if="isLocalizable && !isTab" v-tooltip.top="__('Localizable field')" />
 
                 <button
                     v-if="!isReadOnly && !isTab"
@@ -29,7 +29,7 @@
                     :class="{ flex: syncable && isSynced }"
                     @click="$emit('desynced')"
                 >
-                    <svg-icon name="light/hyperlink" class="h-4 w-4 mr-1.5 mb-1 text-gray-600"
+                    <svg-icon name="light/hyperlink" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
                         v-tooltip.top="__('messages.field_synced_with_origin')" />
                 </button>
 
@@ -40,7 +40,7 @@
                     :class="{ flex: syncable && !isSynced }"
                     @click="$emit('synced')"
                 >
-                    <svg-icon name="light/hyperlink-broken" class="h-4 w-4 mr-1.5 mb-1 text-gray-600"
+                    <svg-icon name="light/hyperlink-broken" class="h-4 w-4 rtl:ml-1.5 ltr:mr-1.5 mb-1 text-gray-600"
                         v-tooltip.top="__('messages.field_desynced_from_origin')" />
                 </button>
             </label>
diff --git a/resources/js/components/publish/SaveButtonOptions.vue b/resources/js/components/publish/SaveButtonOptions.vue
index 04705d94d6f..06674919859 100644
--- a/resources/js/components/publish/SaveButtonOptions.vue
+++ b/resources/js/components/publish/SaveButtonOptions.vue
@@ -6,9 +6,9 @@
         <slot></slot>
 
         <!-- Save and continue options dropdown -->
-        <dropdown-list v-if="showOptions" class="text-left">
+        <dropdown-list v-if="showOptions" class="rtl:text-right ltr:text-left">
             <template v-slot:trigger>
-                <button :class="buttonClass" class="rounded-l-none">
+                <button :class="buttonClass" class="rtl:rounded-r-none ltr:rounded-l-none">
                     <svg-icon v-if="buttonIcon" :name="buttonIcon.name" :class="buttonIcon.class" />
                 </button>
             </template>
@@ -106,6 +106,6 @@ export default {
         margin-bottom: 9px;
     }
     .save-and-continue-options input {
-        margin-right: 5px;
+        margin-right: 5px ; [dir="rtl"] & { margin-left: 5px ; margin-right: 0 ; }
     }
 </style>
diff --git a/resources/js/components/publish/Tabs.vue b/resources/js/components/publish/Tabs.vue
index da4f427b15d..44c113baf96 100644
--- a/resources/js/components/publish/Tabs.vue
+++ b/resources/js/components/publish/Tabs.vue
@@ -41,7 +41,7 @@
             <div class="fade-right" :class="{ 'mr-8': showHiddenTabsDropdown }" v-if="canScrollRight" />
 
 
-            <dropdown-list class="ml-2" v-cloak v-if="showHiddenTabsDropdown">
+            <dropdown-list class="rtl:mr-2 ltr:ml-2" v-cloak v-if="showHiddenTabsDropdown">
                 <dropdown-item
                     v-for="(tab, index) in mainTabs"
                     v-show="shouldShowInDropdown(index)"
diff --git a/resources/js/components/revision-history/Revision.vue b/resources/js/components/revision-history/Revision.vue
index 416e92d0794..dfbda9932de 100644
--- a/resources/js/components/revision-history/Revision.vue
+++ b/resources/js/components/revision-history/Revision.vue
@@ -10,7 +10,7 @@
         <div v-if="revision.message" class="revision-item-note truncate" v-text="revision.message" />
 
         <div class="flex items-center">
-            <avatar v-if="revision.user" :user="revision.user" class="shrink-0 mr-2 w-6" />
+            <avatar v-if="revision.user" :user="revision.user" class="shrink-0 rtl:ml-2 ltr:mr-2 w-6" />
 
             <div class="revision-item-content w-full flex">
                 <div class="flex-1">
@@ -36,7 +36,7 @@
                             :revision="revision"
                             :url="restoreUrl"
                             :reference="reference"
-                            class="ml-4" />
+                            class="rtl:mr-4 ltr:ml-4" />
                     </template>
                 </revision-preview>
             </div>
diff --git a/resources/js/components/roles/PermissionTree.vue b/resources/js/components/roles/PermissionTree.vue
index d976afa2d63..dee6880a6fd 100644
--- a/resources/js/components/roles/PermissionTree.vue
+++ b/resources/js/components/roles/PermissionTree.vue
@@ -3,8 +3,8 @@
     <div>
         <div v-for="permission in permissions" :key="permission.value">
             <label
-                class="flex items-center justify-between py-2 pr-4 border-b group hover:bg-gray-100"
-                :style="{ paddingLeft: `${16*depth}px` }"
+                class="flex items-center justify-between py-2 rtl:pl-4 ltr:pr-4 border-b group hover:bg-gray-100"
+                :style="direction === 'ltr' ? { paddingLeft: `${16*depth}px` } : { paddingRight: `${16*depth}px` }"
             >
                 <div class="flex">
                     <div class="leading-normal">
@@ -14,7 +14,7 @@
                             name="permissions[]"
                         />
                     </div>
-                    <div class="pl-2">
+                    <div class="rtl:pr-2 ltr:pl-2">
                         {{ permission.label }}
                     </div>
                 </div>
@@ -43,6 +43,12 @@ export default {
         return {
             permissions: this.initialPermissions
         }
+    },
+
+    computed: {
+        direction() {
+            return this.$config.get('direction', 'rtl');
+        }
     }
 
 }
diff --git a/resources/js/components/stacks/Stack.vue b/resources/js/components/stacks/Stack.vue
index a0105c77eb5..0559a48c1b0 100644
--- a/resources/js/components/stacks/Stack.vue
+++ b/resources/js/components/stacks/Stack.vue
@@ -3,13 +3,13 @@
     <v-portal :to="portal" :order="depth" target-class="stack">
         <div class="stack-container"
             :class="{ 'stack-is-current': isTopStack, 'hovering': isHovering, 'p-2 shadow-lg': full }"
-            :style="{ left: `${leftOffset}px` }"
+            :style="direction === 'ltr' ? { left: `${leftOffset}px` } : { right: `${leftOffset}px` }"
         >
             <transition name="stack-overlay-fade">
-                <div class="stack-overlay" v-if="visible" :style="{ left: `-${leftOffset}px` }" />
+                <div class="stack-overlay" v-if="visible" :style="direction === 'ltr' ? { left: `-${leftOffset}px` } : { right: `-${leftOffset}px` }" />
             </transition>
 
-            <div class="stack-hit-area" :style="{ left: `-${offset}px` }" @click="clickedHitArea" @mouseenter="mouseEnterHitArea" @mouseout="mouseOutHitArea" />
+            <div class="stack-hit-area" :style="direction === 'ltr' ? { left: `-${offset}px` } : { right: `-${offset}px` }" @click="clickedHitArea" @mouseenter="mouseEnterHitArea" @mouseout="mouseOutHitArea" />
 
             <transition name="stack-slide">
                 <div class="stack-content" v-if="visible">
@@ -96,6 +96,10 @@ export default {
 
         isTopStack() {
             return this.$stacks.count() === this.depth;
+        },
+
+        direction() {
+            return this.$config.get('direction', 'rtl');
         }
 
     },
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index 030b14fc2f6..e20ab41e608 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -4,16 +4,16 @@
         <slot name="branch-action" :branch="page">
             <div v-if="editable" class="page-move w-6" />
         </slot>
-        <div class="flex items-center flex-1 p-2 ml-2 text-xs leading-normal">
+        <div class="flex items-center flex-1 p-2 rtl:mr-2 ltr:ml-2 text-xs leading-normal">
             <div class="flex items-center grow" @click="$emit('branch-clicked', page)">
-                <div class="little-dot mr-2" :class="getStatusClass()" v-tooltip="getStatusTooltip()" />
-                <svg-icon name="home-page" class="mr-2 h-4 w-4 text-gray-800" v-if="isRoot" v-tooltip="__('This is the root page')" />
+                <div class="little-dot rtl:ml-2 ltr:mr-2" :class="getStatusClass()" v-tooltip="getStatusTooltip()" />
+                <svg-icon name="home-page" class="rtl:ml-2 ltr:mr-2 h-4 w-4 text-gray-800" v-if="isRoot" v-tooltip="__('This is the root page')" />
                 <a
                     @click="$emit('edit', $event)"
                     :class="{ 'text-sm font-medium': isTopLevel }"
                     v-text="title" />
 
-                <span v-if="showSlugs" class="ml-2 font-mono text-gray-700 text-2xs pt-px">
+                <span v-if="showSlugs" class="rtl:mr-2 ltr:ml-2 font-mono text-gray-700 text-2xs pt-px">
                     {{ isRoot ? '/' : page.slug }}
                 </span>
 
@@ -26,9 +26,9 @@
                     <svg-icon name="micro/chevron-down-xs" class="h-1.5" />
                 </button>
 
-                <div v-if="page.collection && editable" class="ml-4 flex items-center">
+                <div v-if="page.collection && editable" class="rtl:mr-4 ltr:ml-4 flex items-center">
                     <svg-icon name="light/content-writing" class="w-4 h-4" />
-                    <div class="ml-1">
+                    <div class="rtl:mr-1 ltr:ml-1">
                         <a :href="page.collection.create_url" v-text="__('Add')" />
                         <span class="text-gray">/</span>
                         <a :href="page.collection.edit_url" v-text="__('Edit')" />
@@ -36,12 +36,12 @@
                 </div>
             </div>
 
-            <div class="pr-2 flex items-center">
+            <div class="rtl:pl-2 ltr:pr-2 flex items-center">
                 <div v-if="showBlueprint && page.entry_blueprint" v-text="__(page.entry_blueprint.title)" class="shrink text-4xs text-gray-600 uppercase ml-4" />
 
                 <slot name="branch-icon" :branch="page" />
 
-                <dropdown-list class="ml-4" :class="{'invisible': isRoot, 'hidden': !editable}">
+                <dropdown-list class="rtl:mr-4 ltr:ml-4" :class="{'invisible': isRoot, 'hidden': !editable}">
                     <slot name="branch-options"
                         :branch="page"
                         :depth="depth"
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index 428fc1f2353..64be0a3a526 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -3,7 +3,7 @@
     <stack narrow name="page-tree-linker" :before-close="shouldClose" @closed="$emit('closed')">
         <div slot-scope="{ close }" class="bg-gray-100 h-full flex flex-col">
 
-            <header class="bg-white pl-6 pr-3 py-2 mb-4 border-b shadow-md text-lg font-medium flex items-center justify-between">
+            <header class="bg-white rtl:pr-6 ltr:pl-6 rtl:pl-3 ltr:pr-3 py-2 mb-4 border-b shadow-md text-lg font-medium flex items-center justify-between">
                 {{ headerText }}
                 <button
                     type="button"
@@ -56,12 +56,12 @@
 
             <div v-if="!loading && (!readOnly || type === 'entry')" class="bg-gray-200 p-4 border-t flex items-center justify-between flex-row-reverse">
                 <div v-if="!readOnly">
-                    <button @click="confirmClose(close)" class="btn mr-2">{{ __('Cancel') }}</button>
+                    <button @click="confirmClose(close)" class="btn rtl:ml-2 ltr:mr-2">{{ __('Cancel') }}</button>
                     <button @click="submit" class="btn-primary">{{ __('Submit') }}</button>
                 </div>
                 <div v-if="type === 'entry'">
-                    <a :href="editEntryUrl" target="_blank" class="text-xs flex items-center justify-center text-blue hover:text-blue underline mr-4">
-                        <svg-icon name="light/external-link" class="w-4 h-4 mr-2" />
+                    <a :href="editEntryUrl" target="_blank" class="text-xs flex items-center justify-center text-blue hover:text-blue underline rtl:ml-4 ltr:mr-4">
+                        <svg-icon name="light/external-link" class="w-4 h-4 rtl:ml-2 ltr:mr-2" />
                         {{ __('Edit Entry') }}
                     </a>
                 </div>
diff --git a/resources/js/components/structures/PageTree.vue b/resources/js/components/structures/PageTree.vue
index 240c586a706..1c319e3b8db 100644
--- a/resources/js/components/structures/PageTree.vue
+++ b/resources/js/components/structures/PageTree.vue
@@ -3,12 +3,12 @@
 
         <div class="mb-2 flex justify-end">
             <a
-                class="text-2xs text-blue mr-4 underline"
+                class="text-2xs text-blue rtl:ml-4 ltr:mr-4 underline"
                 v-text="__('Expand All')"
                 @click="expandAll"
             />
             <a
-                class="text-2xs text-blue mr-2 underline"
+                class="text-2xs text-blue rtl:ml-2 ltr:mr-2 underline"
                 v-text="__('Collapse All')"
                 @click="collapseAll"
             />
@@ -29,6 +29,7 @@
                 :data="treeData"
                 :space="1"
                 :indent="24"
+                :dir="direction"
                 @change="treeChanged"
                 @drag="treeDragstart"
                 @nodeOpenChanged="saveTreeState"
@@ -116,6 +117,10 @@ export default {
             return this.preferencesPrefix ? `${this.preferencesPrefix}.${this.site}.pagetree` : null;
         },
 
+        direction() {
+            return this.$config.get('direction', 'rtl');
+        },
+
     },
 
     watch: {
diff --git a/resources/js/components/terms/CreateTermButton.vue b/resources/js/components/terms/CreateTermButton.vue
index 6e3cc586979..a019e03d02c 100644
--- a/resources/js/components/terms/CreateTermButton.vue
+++ b/resources/js/components/terms/CreateTermButton.vue
@@ -7,7 +7,7 @@
                 @click="create"
             >
                 <span v-text="__('Create Term')" />
-                <svg-icon name="micro/chevron-down-xs" class="ml-2 -mr-2 w-2" v-if="blueprints.length > 1" />
+                <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 -mr-2 w-2" v-if="blueprints.length > 1" />
             </button>
         </template>
 
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index 6073c437b69..d321257161f 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -34,8 +34,8 @@
                         <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
                         <div class="flex space-x-2 mt-2">
-                            <button class="btn btn-sm ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
-                            <button class="btn btn-sm ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
+                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="isDirty" @click="$refs.presets.savePreset()" />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />
                         </div>
                     </div>
diff --git a/resources/js/components/terms/PublishActions.vue b/resources/js/components/terms/PublishActions.vue
index 867a7abcce5..61361d9ad53 100644
--- a/resources/js/components/terms/PublishActions.vue
+++ b/resources/js/components/terms/PublishActions.vue
@@ -46,14 +46,14 @@
                     />
 
                     <div class="text-gray text-xs flex mb-6">
-                        <div class="pt-px w-4 mr-2">
+                        <div class="pt-px w-4 rtl:ml-2 ltr:mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
                     <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
-                        <div class="pt-px w-4 mr-2">
+                        <div class="pt-px w-4 rtl:ml-2 ltr:mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
                         <div class="flex-1">
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index 4b9b6eb11ae..02e42f05c3f 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -7,18 +7,18 @@
             <h1 class="flex-1">
                 <div class="flex items-center">
                     <span v-if="! isCreating"
-                        class="little-dot mr-2"
+                        class="little-dot rtl:ml-2 ltr:mr-2"
                         :class="{ 'bg-green-600': published, 'bg-gray-600': !published }" />
                     <span v-html="$options.filters.striptags(title)" />
                 </div>
             </h1>
 
-            <dropdown-list class="mr-4" v-if="canEditBlueprint">
+            <dropdown-list class="rtl:ml-4 ltr:mr-4" v-if="canEditBlueprint">
                 <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
             </dropdown-list>
 
-            <div class="pt-px text-2xs text-gray-600 flex mr-4" v-if="readOnly">
-                <svg-icon name="light/lock" class="w-4 mr-1 -mt-1" /> {{ __('Read Only') }}
+            <div class="pt-px text-2xs text-gray-600 flex rtl:ml-4 ltr:mr-4" v-if="readOnly">
+                <svg-icon name="light/lock" class="w-4 rtl:ml-1 ltr:mr-1 -mt-1" /> {{ __('Read Only') }}
             </div>
 
             <div class="hidden md:flex items-center">
@@ -39,11 +39,11 @@
 
                 <button
                     v-if="revisionsEnabled"
-                    class="ml-4 btn-primary flex items-center"
+                    class="rtl:mr-4 ltr:ml-4 btn-primary flex items-center"
                     :disabled="!canPublish"
                     @click="confirmingPublish = true">
                     <span v-text="__('Publish')" />
-                    <svg-icon name="micro/chevron-down-xs" class="ml-2 w-2" />
+                    <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 w-2" />
                 </button>
             </div>
 
@@ -107,7 +107,7 @@
                                             class="flex items-center justify-center btn-flat w-full mx-2 px-2"
                                             v-if="showLivePreviewButton"
                                             @click="openLivePreview">
-                                            <svg-icon name="light/synchronize" class="h-4 w-4 mr-2" />
+                                            <svg-icon name="light/synchronize" class="h-4 w-4 rtl:ml-2 ltr:mr-2" />
                                             <span>{{ __('Live Preview') }}</span>
                                         </button>
                                         <a
@@ -115,7 +115,7 @@
                                             v-if="showVisitUrlButton"
                                             :href="permalink"
                                             target="_blank">
-                                            <svg-icon name="light/external-link" class="w-4 h-4 mr-2" />
+                                            <svg-icon name="light/external-link" class="w-4 h-4 rtl:ml-2 ltr:mr-2" />
                                             <span>{{ __('Visit URL') }}</span>
                                         </a>
                                     </div>
@@ -154,7 +154,7 @@
                                             class="flex items-center justify-center mt-4 btn-flat px-2 w-full"
                                             v-if="!isCreating && revisionsEnabled"
                                             @click="showRevisionHistory = true">
-                                            <svg-icon name="history" class="h-4 w-4 mr-2" />
+                                            <svg-icon name="history" class="h-4 w-4 rtl:ml-2 ltr:mr-2" />
                                             <span>{{ __('View History') }}</span>
                                         </button>
                                 </div>
@@ -170,13 +170,13 @@
                                         @click="localizationSelected(option)"
                                     >
                                         <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
-                                            <span class="little-dot mr-2" :class="{
+                                            <span class="little-dot rtl:ml-2 ltr:mr-2" :class="{
                                                 'bg-green-600': option.published,
                                                 'bg-gray-500': !option.published,
                                                 'bg-red-500': !option.exists
                                             }" />
                                             {{ __(option.name) }}
-                                            <loading-graphic :size="14" text="" class="ml-2" v-if="localizing === option.handle" />
+                                            <loading-graphic :size="14" text="" class="rtl:mr-2 ltr:ml-2" v-if="localizing === option.handle" />
                                         </div>
                                         <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
                                         <div class="badge-sm bg-blue" v-if="option.active" v-text="__('Active')" />
@@ -198,7 +198,7 @@
                 class="btn-lg"
                 :class="{
                     'btn-primary w-full': ! revisionsEnabled,
-                    'btn w-1/2 mr-4': revisionsEnabled,
+                    'btn w-1/2 rtl:ml-4 ltr:mr-4': revisionsEnabled,
                 }"
                 :disabled="!canSave"
                 @click.prevent="save"
@@ -206,11 +206,11 @@
 
             <button
                 v-if="revisionsEnabled"
-                class="ml-2 btn-primary btn-lg justify-center flex items-center w-1/2"
+                class="rtl:mr-2 ltr:ml-2 btn-primary btn-lg justify-center flex items-center w-1/2"
                 :disabled="!canPublish"
                 @click="confirmingPublish = true">
                 <span v-text="__('Publish')" />
-                <svg-icon name="micro/chevron-down-xs" class="ml-2 w-2" />
+                <svg-icon name="micro/chevron-down-xs" class="rtl:mr-2 ltr:ml-2 w-2" />
             </button>
         </div>
 
diff --git a/resources/js/components/updater/Updater.vue b/resources/js/components/updater/Updater.vue
index 307f279a55e..2c032fbd95c 100644
--- a/resources/js/components/updater/Updater.vue
+++ b/resources/js/components/updater/Updater.vue
@@ -3,9 +3,9 @@
         <div class="flex items-center mb-6">
             <h1 class="flex-1">
                 <span v-text="name" />
-                <span v-if="currentVersion" class="font-normal text-gray-700 ml-2">{{ currentVersion }}</span>
+                <span v-if="currentVersion" class="font-normal text-gray-700 rtl:mr-2 ltr:ml-2">{{ currentVersion }}</span>
             </h1>
-            <button v-if="!onLatestVersion" class="btn-primary ml-4" @click="modalOpen = true">{{ __('Update') }}</button>
+            <button v-if="!onLatestVersion" class="btn-primary rtl:mr-4 ltr:ml-4" @click="modalOpen = true">{{ __('Update') }}</button>
             <div v-if="onLatestVersion" v-text="__('Up to date')" />
         </div>
 
diff --git a/resources/js/components/user-groups/PublishForm.vue b/resources/js/components/user-groups/PublishForm.vue
index c379187de2e..38ce2f78bcc 100644
--- a/resources/js/components/user-groups/PublishForm.vue
+++ b/resources/js/components/user-groups/PublishForm.vue
@@ -6,7 +6,7 @@
             <breadcrumb :url="cp_url('user-groups')" :title="__('User Groups')" />
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="__(title)" />
-                    <dropdown-list class="mr-2" v-if="canEditBlueprint">
+                    <dropdown-list class="rtl:ml-2 ltr:mr-2" v-if="canEditBlueprint">
                         <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
                     </dropdown-list>
 
diff --git a/resources/js/components/users/ChangePassword.vue b/resources/js/components/users/ChangePassword.vue
index b30eafb39ea..e5d4ab0a14d 100644
--- a/resources/js/components/users/ChangePassword.vue
+++ b/resources/js/components/users/ChangePassword.vue
@@ -36,7 +36,7 @@
         </div>
         <div class="flex items-center bg-gray-21 border-t rounded-b px-4 py-2">
             <button class="btn-primary" @click.prevent="save">{{ __('Change Password') }}</button>
-            <label class="ml-4">
+            <label class="rtl:mr-4 ltr:ml-4">
                 <input type="checkbox" v-model="reveal" />
                 {{ __('Reveal Password') }}
             </label>
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 303bd8cd0bf..a61d533f2ac 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -34,8 +34,8 @@
                         <data-list-search class="h-8 mt-2 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
 
                         <div class="flex space-x-2 mt-2">
-                            <button class="btn btn-sm ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
-                            <button class="btn btn-sm ml-2" v-text="__('Save')" v-show="allowFilterPresets && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Reset')" v-show="isDirty" @click="$refs.presets.refreshPreset()" />
+                            <button class="btn btn-sm rtl:mr-2 ltr:ml-2" v-text="__('Save')" v-show="allowFilterPresets && isDirty" @click="$refs.presets.savePreset()" />
                             <data-list-column-picker :preferences-key="preferencesKey('columns')" />
                         </div>
                     </div>
@@ -75,20 +75,20 @@
                         >
                             <template slot="cell-email" slot-scope="{ row: user, value }">
                                 <a :href="user.edit_url" class="flex items-center">
-                                    <avatar :user="user" class="w-8 h-8 rounded-full mr-2" />
+                                    <avatar :user="user" class="w-8 h-8 rounded-full rtl:ml-2 ltr:mr-2" />
                                     {{ value }}
                                 </a>
                             </template>
                             <template slot="cell-roles" slot-scope="{ row: user, value: roles }">
                                 <div class="role-index-field">
-                                    <div v-if="user.super" class="role-index-field-item mr-1 mb-1.5">{{ __('Super Admin') }}</div>
+                                    <div v-if="user.super" class="role-index-field-item rtl:ml-1 ltr:mr-1 mb-1.5">{{ __('Super Admin') }}</div>
                                     <div v-if="!roles || roles.length === 0" />
-                                    <div v-for="(role, i) in (roles || [])" class="role-index-field-item mr-1 mb-1.5">{{ __(role.title) }}</div>
+                                    <div v-for="(role, i) in (roles || [])" class="role-index-field-item rtl:ml-1 ltr:mr-1 mb-1.5">{{ __(role.title) }}</div>
                                 </div>
                             </template>
                             <template slot="cell-groups" slot-scope="{ row: user, value: groups }">
                                 <div class="groups-index-field">
-                                    <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ __(group.title) }}</div>
+                                    <div v-for="group in (groups || [])" class="groups-index-field-item rtl:ml-1 ltr:mr-1 mb-1.5">{{ __(group.title) }}</div>
                                 </div>
                             </template>
                             <template slot="actions" slot-scope="{ row: user, index }">
diff --git a/resources/js/components/users/PublishForm.vue b/resources/js/components/users/PublishForm.vue
index 15e0822e579..31c941a7755 100644
--- a/resources/js/components/users/PublishForm.vue
+++ b/resources/js/components/users/PublishForm.vue
@@ -6,7 +6,7 @@
             <breadcrumb :url="cp_url('users')" :title="__('Users')" />
             <div class="flex items-center">
                 <h1 class="flex-1" v-text="title" />
-                    <dropdown-list class="mr-4" v-if="canEditBlueprint">
+                    <dropdown-list class="rtl:ml-4 ltr:mr-4" v-if="canEditBlueprint">
                         <dropdown-item :text="__('Edit Blueprint')" :redirect="actions.editBlueprint" />
                     </dropdown-list>
 
@@ -14,7 +14,7 @@
                         v-if="canEditPassword"
                         :save-url="actions.password"
                         :requires-current-password="requiresCurrentPassword"
-                        class="mr-4"
+                        class="rtl:ml-4 ltr:mr-4"
                     />
 
                     <button
diff --git a/resources/js/components/users/Wizard.vue b/resources/js/components/users/Wizard.vue
index 1c94ba91224..b7dfca5b50a 100644
--- a/resources/js/components/users/Wizard.vue
+++ b/resources/js/components/users/Wizard.vue
@@ -48,10 +48,10 @@
              <div class="pb-10" v-if="canCreateSupers">
                 <div class="flex items-center">
                     <toggle-input v-model="user.super" />
-                    <label class="font-bold ml-2">{{ __('Super Admin') }}</label>
+                    <label class="font-bold rtl:mr-2 ltr:ml-2">{{ __('Super Admin') }}</label>
                 </div>
                 <div class="text-2xs text-gray-600 mt-2 flex items-center">
-                    <svg-icon name="info-circle" class="h-4 w-4 mr-1 flex items-center mb-px"></svg-icon>
+                    <svg-icon name="info-circle" class="h-4 w-4 rtl:ml-1 ltr:mr-1 flex items-center mb-px"></svg-icon>
                     {{ __('messages.user_wizard_super_admin_instructions') }}
                 </div>
             </div>
@@ -103,7 +103,7 @@
             <!-- Send Email? -->
             <div class="max-w-md mx-auto px-4 mb-6 flex items-center">
                 <toggle-input v-model="invitation.send" />
-                <label class="font-bold ml-2">{{ __('Send Email Invitation') }}</label>
+                <label class="font-bold rtl:mr-2 ltr:ml-2">{{ __('Send Email Invitation') }}</label>
             </div>
 
             <div class="max-w-lg mx-auto bg-gray-100 py-10 mb-20 border rounded-lg " v-if="invitation.send">
@@ -154,13 +154,13 @@
         <div class="border-t p-4">
             <div class="max-w-md mx-auto flex items-center justify-center">
                 <button tabindex="3" class="btn mx-4 w-32" @click="previous" v-if="! completed && ! onFirstStep">
-                    &larr; {{ __('Previous')}}
+                    <span v-html="direction === 'ltr' ? '&larr;' : '&rarr;'"></span> {{ __('Previous')}}
                 </button>
                 <button tabindex="4" class="btn mx-4 w-32" @click="nextStep" v-if="onUserInfoStep">
-                    {{ __('Next')}} &rarr;
+                    {{ __('Next')}} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
                 </button>
                 <button tabindex="4" class="btn mx-4 w-32" :disabled="! canContinue" @click="nextStep" v-if="!onUserInfoStep && ! completed && ! onLastStep">
-                    {{ __('Next')}} &rarr;
+                    {{ __('Next')}} <span v-html="direction === 'ltr' ? '&rarr;' : '&larr;'"></span>
                 </button>
                 <button tabindex="4" class="btn-primary mx-4" @click="submit" v-if="! completed && onLastStep">
                     {{ finishButtonText }}
@@ -255,7 +255,10 @@ export default {
         },
         finishButtonText() {
             return this.invitation.send ? __('Create and Send Email') : __('Create User');
-        }
+        },
+        direction() {
+            return this.$config.get('direction', 'rtl');
+        },
     },
 
     methods: {
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 21647d0700d..10faef7448b 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -52,7 +52,7 @@
             <div class="flex justify-between items-center">
                 <label for="remember-me" class="flex items-center cursor-pointer">
                     <input type="checkbox" name="remember" id="remember-me">
-                    <span class="ml-2">{{ __('Remember me') }}</span>
+                    <span class="rtl:mr-2 ltr:ml-2">{{ __('Remember me') }}</span>
                 </label>
                 <button type="submit" class="btn-primary">{{ __('Log in') }}</button>
             </div>
diff --git a/resources/views/blueprints/index.blade.php b/resources/views/blueprints/index.blade.php
index a479d0db462..1a6e9e50bd0 100644
--- a/resources/views/blueprints/index.blade.php
+++ b/resources/views/blueprints/index.blade.php
@@ -10,9 +10,9 @@
         <div v-cloak>
         <dropdown-list class="inline-block">
             <template v-slot:trigger>
-                <button class="button btn-primary flex items-center pr-4">
+                <button class="button btn-primary flex items-center rtl:pl-4 ltr:pr-4">
                     {{ __('Create Blueprint') }}
-                    <svg-icon name="micro/chevron-down-xs" class="w-2 ml-2" />
+                    <svg-icon name="micro/chevron-down-xs" class="w-2 rtl:mr-2 ltr:ml-2" />
                 </button>
             </template>
 
@@ -31,7 +31,7 @@
 
     @foreach (Statamic\Facades\Collection::all() as $collection)
         @if ($loop->first)
-        <h3 class="little-heading pl-0 mb-2">{{ __('Collections') }}</h3>
+        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Collections') }}</h3>
         <div class="card p-0 mb-4">
             <table class="data-table">
         @endif
@@ -39,12 +39,12 @@
                     <tr>
                         <td>
                             <div class="flex items-center">
-                                <div class="w-4 h-4 mr-4">@cp_svg('icons/light/content-writing')</div>
-                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
+                                <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/content-writing')</div>
+                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} rtl:ml-2 ltr:mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
                                 <a href="{{ cp_route('collections.blueprints.edit', [$collection, $blueprint]) }}" v-pre>{{ __($blueprint->title()) }}</a>
                             </div>
                         </td>
-                        <td class="text-right text-2xs" v-pre>{{ __($collection->title()) }}</td>
+                        <td class="rtl:text-left ltr:text-right text-2xs" v-pre>{{ __($collection->title()) }}</td>
                     </tr>
                 @endforeach
         @if ($loop->last)
@@ -55,7 +55,7 @@
 
     @foreach (Statamic\Facades\Taxonomy::all() as $taxonomy)
         @if ($loop->first)
-        <h3 class="little-heading pl-0 mb-2">{{ __('Taxonomies') }}</h3>
+        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Taxonomies') }}</h3>
         <div class="card p-0 mb-4">
             <table class="data-table">
         @endif
@@ -63,12 +63,12 @@
                     <tr>
                         <td>
                             <div class="flex items-center">
-                                <div class="w-4 h-4 mr-4">@cp_svg('icons/light/tags')</div>
-                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
+                                <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/tags')</div>
+                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} rtl:ml-2 ltr:mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
                                 <a href="{{ cp_route('taxonomies.blueprints.edit', [$taxonomy, $blueprint]) }}" v-pre>{{ __($blueprint->title()) }}</a>
                             </div>
                         </td>
-                        <td class="text-right text-2xs" v-pre>{{ __($taxonomy->title()) }}</td>
+                        <td class="rtl:text-left ltr:text-right text-2xs" v-pre>{{ __($taxonomy->title()) }}</td>
                     </tr>
                 @endforeach
         @if ($loop->last)
@@ -79,14 +79,14 @@
 
     @foreach (Statamic\Facades\Nav::all() as $nav)
         @if ($loop->first)
-        <h3 class="little-heading pl-0 mb-2">{{ __('Navigation') }}</h3>
+        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Navigation') }}</h3>
         <div class="card p-0 mb-4">
             <table class="data-table">
         @endif
                 <tr>
                     <td>
                         <div class="flex items-center">
-                            <div class="w-4 h-4 mr-4">@cp_svg('icons/light/hierarchy-files')</div>
+                            <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/hierarchy-files')</div>
                             <a href="{{ cp_route('navigation.blueprint.edit', $nav->handle()) }}" v-pre>{{ __($nav->title()) }}</a>
                         </div>
                     </td>
@@ -99,14 +99,14 @@
 
     @foreach (Statamic\Facades\GlobalSet::all() as $set)
         @if ($loop->first)
-        <h3 class="little-heading pl-0 mb-2">{{ __('Globals') }}</h3>
+        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Globals') }}</h3>
         <div class="card p-0 mb-4">
             <table class="data-table">
         @endif
                 <tr>
                     <td>
                         <div class="flex items-center">
-                            <div class="w-4 h-4 mr-4">@cp_svg('icons/light/earth')</div>
+                            <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/earth')</div>
                             <a href="{{ cp_route('globals.blueprint.edit', $set->handle()) }}" v-pre>{{ __($set->title()) }}</a>
                         </div>
                     </td>
@@ -119,14 +119,14 @@
 
     @foreach (Statamic\Facades\AssetContainer::all() as $container)
         @if ($loop->first)
-        <h3 class="little-heading pl-0 mb-2">{{ __('Asset Containers') }}</h3>
+        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Asset Containers') }}</h3>
         <div class="card p-0 mb-4">
             <table class="data-table">
         @endif
                 <tr>
                     <td>
                         <div class="flex items-center">
-                            <div class="w-4 h-4 mr-4">@cp_svg('icons/light/assets')</div>
+                            <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/assets')</div>
                             <a href="{{ cp_route('asset-containers.blueprint.edit', $container->handle()) }}" v-pre>{{ __($container->title()) }}</a>
                         </div>
                     </td>
@@ -140,14 +140,14 @@
     @if (Statamic\Facades\User::current()->can('configure form fields'))
         @foreach (Statamic\Facades\Form::all() as $form)
             @if ($loop->first)
-        <h3 class="little-heading pl-0 mb-2">{{ __('Forms') }}</h3>
+        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Forms') }}</h3>
         <div class="card p-0 mb-2">
             <table class="data-table">
             @endif
                 <tr>
                     <td>
                         <div class="flex items-center">
-                            <div class="w-4 h-4 mr-4">@cp_svg('icons/light/drawer-file')</div>
+                            <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/drawer-file')</div>
                             <a href="{{ cp_route('forms.blueprint.edit', $form->handle()) }}" v-pre>{{ __($form->title()) }}</a>
                         </div>
                     </td>
@@ -159,13 +159,13 @@
         @endforeach
     @endif
 
-    <h3 class="little-heading pl-0 mb-2">{{ __('Users') }}</h3>
+    <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Users') }}</h3>
     <div class="card p-0 mb-4">
         <table class="data-table">
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 mr-4">@cp_svg('icons/light/users')</div>
+                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/users')</div>
                         <a href="{{ cp_route('users.blueprint.edit') }}">{{ __('User') }}</a>
                     </div>
                 </td>
@@ -173,7 +173,7 @@
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 mr-4">@cp_svg('icons/light/user_groups')</div>
+                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/user_groups')</div>
                         <a href="{{ cp_route('user-groups.blueprint.edit') }}">{{ __('Group') }}</a>
                     </div>
                 </td>
@@ -182,14 +182,14 @@
     </div>
 
     @foreach ($additional as $namespace)
-    <h3 class="little-heading pl-0 mb-2">{{ $namespace['title'] }}</h3>
+    <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ $namespace['title'] }}</h3>
     <div class="card p-0 mb-4">
         <table class="data-table">
         @foreach ($namespace['blueprints'] as $blueprint)
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 mr-4">@cp_svg('icons/light/blueprint')</div>
+                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/blueprint')</div>
                         <a href="{{ cp_route('blueprints.edit', [$blueprint['namespace'], $blueprint['handle']]) }}">{{ $blueprint['title'] }}</a>
                     </div>
                 </td>
diff --git a/resources/views/collections/blueprints/index.blade.php b/resources/views/collections/blueprints/index.blade.php
index 99f786adf5b..9faef7b0a8c 100644
--- a/resources/views/collections/blueprints/index.blade.php
+++ b/resources/views/collections/blueprints/index.blade.php
@@ -29,7 +29,7 @@ class="btn"
                         >{{ __('Save Order') }}</button>
                     @endif
 
-                    <a href="{{ cp_route('collections.blueprints.create', $collection) }}" class="btn-primary ml-2">{{ __('Create Blueprint') }}</a>
+                    <a href="{{ cp_route('collections.blueprints.create', $collection) }}" class="btn-primary rtl:mr-2 ltr:ml-2">{{ __('Create Blueprint') }}</a>
                 </div>
             </div>
 
diff --git a/resources/views/collections/empty.blade.php b/resources/views/collections/empty.blade.php
index b1f9bdb30d5..d84e96bd6e7 100644
--- a/resources/views/collections/empty.blade.php
+++ b/resources/views/collections/empty.blade.php
@@ -16,10 +16,10 @@
 <div class="card p-4 content">
     <div class="flex flex-wrap">
         <a href="{{ cp_route('collections.edit', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/hammer-wrench')
             </div>
-            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
+            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
                 <h3 class="mb-2 text-blue">{{ __('Configure Collection') }} &rarr;</h3>
                 <p>{{ __('statamic::messages.collection_next_steps_configure_description') }}</p>
             </div>
@@ -30,34 +30,34 @@
         @endif
             class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group"
         >
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/content-writing')
             </div>
-            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
+            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
                 <h3 class="mb-2 text-blue">{{ $collection->createLabel() }} @if (!$multipleBlueprints)&rarr;@endif</h3>
                 <p>{{ __('statamic::messages.collection_next_steps_create_entry_description') }}</p>
                 @if ($multipleBlueprints)
                     @foreach ($collection->entryBlueprints() as $blueprint)
                         <a href="{{ cp_route('collections.entries.create', [$collection->handle(), $site, 'blueprint' => $blueprint->handle()]) }}"
-                           class="text-blue text-sm mr-2">{{ $blueprint->title() }} &rarr;</a>
+                           class="text-blue text-sm rtl:ml-2 ltr:mr-2">{{ $blueprint->title() }} &rarr;</a>
                     @endforeach
                 @endif
             </div>
         @if ($multipleBlueprints)</div>@else</a>@endif
         <a href="{{ cp_route('collections.blueprints.index', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/blueprint')
             </div>
-            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
+            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
                 <h3 class="mb-2 text-blue">{{ __('Configure Blueprints') }} &rarr;</h3>
                 <p>{{ __('statamic::messages.collection_next_steps_blueprints_description') }}</p>
             </div>
         </a>
         <a href="{{ cp_route('collections.scaffold', $collection->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/crane')
             </div>
-            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
+            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
                 <h3 class="mb-2 text-blue">{{ __('Scaffold Views') }} &rarr;</h3>
                 <p>{{ __('statamic::messages.collection_next_steps_scaffold_description') }}</p>
             </div>
diff --git a/resources/views/duplicates.blade.php b/resources/views/duplicates.blade.php
index f5ced94f0ec..2e33d35956a 100644
--- a/resources/views/duplicates.blade.php
+++ b/resources/views/duplicates.blade.php
@@ -27,7 +27,7 @@
                         <td class="font-mono text-xs">
                             {{ $path }}
                         </td>
-                        <td class="text-right text-2xs">
+                        <td class="rtl:text-left ltr:text-right text-2xs">
                             <form method="POST" action="{{ cp_route('duplicates.regenerate') }}">
                                 @csrf
                                 <input type="hidden" name="path" value="{{ $path }}" />
diff --git a/resources/views/fields/index.blade.php b/resources/views/fields/index.blade.php
index 646236a1367..6aba5b476ba 100644
--- a/resources/views/fields/index.blade.php
+++ b/resources/views/fields/index.blade.php
@@ -15,10 +15,10 @@
                     <div class="p-6">
                         <h2><a href="{{ cp_route('blueprints.index') }}" class="text-gray-900 hover:text-blue">{{ __('Blueprints') }}</a></h2>
                         <p>{{ __('statamic::messages.fields_blueprints_description') }}</p>
-                        <p><a href="{{ Statamic::docsUrl('blueprints') }}" class="font-bold text-blue">{{ __('Read the Docs') }}</a><span class="inline-block text-blue w-4 h-4 ml-2">@cp_svg('icons/light/external-link')</span></p>
+                        <p><a href="{{ Statamic::docsUrl('blueprints') }}" class="font-bold text-blue">{{ __('Read the Docs') }}</a><span class="inline-block text-blue w-4 h-4 rtl:mr-2 ltr:ml-2">@cp_svg('icons/light/external-link')</span></p>
                     </div>
                     <div class="flex p-6 border-t items-center">
-                        <a href="{{ cp_route('blueprints.create') }}" class="btn-primary mr-4">{{ __('Create Blueprint') }}</a>
+                        <a href="{{ cp_route('blueprints.create') }}" class="btn-primary rtl:ml-4 ltr:mr-4">{{ __('Create Blueprint') }}</a>
                         @unless($blueprints->isEmpty())
                             <a href="{{ cp_route('blueprints.index') }}" class="font-bold text-blue text-sm hover:text-gray-900">
                                 {{ __('View All') }} <span class="font-normal">({{ $blueprints->count() }})</span> &rarr;
@@ -32,10 +32,10 @@
                     <div class="p-6">
                         <h2>{{ __('Fieldsets') }}</h2>
                         <p>{{ __('statamic::messages.fields_fieldsets_description') }}</p>
-                        <p><a href="{{ Statamic::docsUrl('fieldsets') }}" class="font-bold text-blue">{{ __('Read the Docs') }}</a><span class="inline-block text-blue w-4 h-4 ml-2">@cp_svg('icons/light/external-link')</span></p>
+                        <p><a href="{{ Statamic::docsUrl('fieldsets') }}" class="font-bold text-blue">{{ __('Read the Docs') }}</a><span class="inline-block text-blue w-4 h-4 rtl:mr-2 ltr:ml-2">@cp_svg('icons/light/external-link')</span></p>
                     </div>
                     <div class="flex p-6 border-t items-center">
-                        <a href="{{ cp_route('fieldsets.create') }}" class="btn-primary mr-4">{{ __('Create Fieldset') }}</a>
+                        <a href="{{ cp_route('fieldsets.create') }}" class="btn-primary rtl:ml-4 ltr:mr-4">{{ __('Create Fieldset') }}</a>
                         @unless($fieldsets->isEmpty())
                             <a href="{{ cp_route('fieldsets.index') }}" class="font-bold text-blue text-sm hover:text-gray-900">
                                 {{ __('View All') }} <span class="font-normal">({{ $fieldsets->count() }})</span> &rarr;
diff --git a/resources/views/fieldsets/index.blade.php b/resources/views/fieldsets/index.blade.php
index 9c6ccb1c00e..eeb2fccd21c 100644
--- a/resources/views/fieldsets/index.blade.php
+++ b/resources/views/fieldsets/index.blade.php
@@ -14,7 +14,7 @@
 
         @foreach ($fieldsets as $key => $f)
             <div class="mb-4">
-                @if ($fieldsets->count() > 1)<h3 class="pl-0 mb-2 little-heading">{{ $key }}</h3>@endif
+                @if ($fieldsets->count() > 1)<h3 class="rtl:pr-0 ltr:pl-0 mb-2 little-heading">{{ $key }}</h3>@endif
                 <fieldset-listing :initial-rows="{{ json_encode($f) }}"></fieldset-listing>
             </div>
         @endforeach
diff --git a/resources/views/forms/show.blade.php b/resources/views/forms/show.blade.php
index 5da84e66f5a..85e5d69a8f1 100644
--- a/resources/views/forms/show.blade.php
+++ b/resources/views/forms/show.blade.php
@@ -17,7 +17,7 @@
             </h1>
 
             @if(\Statamic\Facades\User::current()->can('edit', $form) || \Statamic\Facades\User::current()->can('delete', $form))
-                <dropdown-list class="mr-2">
+                <dropdown-list class="rtl:ml-2 ltr:mr-2">
                     @can('edit', $form)
                         <dropdown-item :text="__('Edit Form')" redirect="{{ $form->editUrl() }}"></dropdown-item>
                     @endcan
diff --git a/resources/views/forms/widget.blade.php b/resources/views/forms/widget.blade.php
index cb0554df833..e21169c8335 100644
--- a/resources/views/forms/widget.blade.php
+++ b/resources/views/forms/widget.blade.php
@@ -4,7 +4,7 @@
     <div class="flex justify-between items-center p-4">
         <h2>
             <a class="flex items-center" href="{{ $form->showUrl() }}">
-                <div class="h-6 w-6 mr-2 text-gray-800">
+                <div class="h-6 w-6 rtl:ml-2 ltr:mr-2 text-gray-800">
                     @cp_svg('icons/light/drawer-file')
                 </div>
                 <span v-pre>{{ $title }}</span>
@@ -21,7 +21,7 @@
                         @foreach($fields as $key => $field)
                         <td><a href="{{ cp_route('forms.submissions.show', [$form->handle(), $submission['id']]) }}">{{ array_get($submission, $field) }}</a></td>
                         @endforeach
-                        <td class="text-right">
+                        <td class="rtl:text-left ltr:text-right">
                             {{ ($submission['date']->diffInDays() <= 14) ? $submission['date']->diffForHumans() : $submission['date']->format($format) }}
                         </td>
                     </tr>
diff --git a/resources/views/impersonator/terminate.blade.php b/resources/views/impersonator/terminate.blade.php
index 6ad42b2bafe..c4ce6390dcf 100644
--- a/resources/views/impersonator/terminate.blade.php
+++ b/resources/views/impersonator/terminate.blade.php
@@ -7,7 +7,7 @@
     z-index: 100;
     align-items: center;
     bottom: 0;
-    right: 0;
+    right: 0 ; [dir="rtl"] & { right: auto ; left: 0 ; }
     padding: 6px 10px;
     color: #726e23;
     font-size: 14px;
@@ -24,7 +24,7 @@
     transform: translateX(0);
   }
   #__impersonator-link__ svg {
-    margin-right: 10px;
+    margin-right: 10px ; [dir="rtl"] & { margin-left: 10px ; margin-right: 0 ; }
   }
 </style>
 
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index 076264a4973..0ff376f96db 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ config('app.locale') }}" dir="{{ Statamic\Facades\Site::selected()->direction() }}">
+<html lang="{{ Statamic::cpLocale() }}" dir="{{ Statamic::cpDirection() }}">
 <head>
     @include('statamic::partials.head')
 </head>
diff --git a/resources/views/licensing.blade.php b/resources/views/licensing.blade.php
index 1734be7b43a..70a2cfd65d7 100644
--- a/resources/views/licensing.blade.php
+++ b/resources/views/licensing.blade.php
@@ -21,7 +21,7 @@
                     </p>
                     <a href="{{ cp_route('utilities.licensing.refresh') }}" class="btn-primary btn-lg">{{ __('Try again') }}</a>
                 </div>
-                <div class="hidden md:block w-1/2 pl-16">
+                <div class="hidden md:block w-1/2 rtl:pr-16 ltr:pl-16">
                     @cp_svg('empty/navigation')
                 </div>
             </div>
@@ -52,7 +52,7 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
+                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-red-500' }} rtl:ml-2 ltr:mr-2"></span>
                         {{ $site->key() ?? __('No license key') }}
                     </td>
                     <td class="relative">
@@ -61,7 +61,7 @@
                             <span class="text-2xs">({{ trans_choice('and :count more', $site->additionalDomainCount()) }})</span>
                         @endif
                     </td>
-                    <td class="text-right text-red-500">{{ $site->invalidReason() }}</td>
+                    <td class="rtl:text-left ltr:text-right text-red-500">{{ $site->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -71,11 +71,11 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
+                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-red-500' }} rtl:ml-2 ltr:mr-2"></span>
                         Statamic @if ($statamic->pro())<span class="text-pink">Pro</span>@else Free @endif
                     </td>
                     <td>{{ $statamic->version() }}</td>
-                    <td class="text-right text-red-500">{{ $statamic->invalidReason() }}</td>
+                    <td class="rtl:text-left ltr:text-right text-red-500">{{ $statamic->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -88,13 +88,13 @@
             <table class="data-table">
                 @foreach ($addons as $addon)
                     <tr>
-                        <td class="w-64 mr-2">
-                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
+                        <td class="w-64 rtl:ml-2 ltr:mr-2">
+                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red-500' }} rtl:ml-2 ltr:mr-2"></span>
                             <span class="font-bold"><a href="{{ $addon->addon()->marketplaceUrl() }}" class="text-gray hover:text-blue">{{ $addon->name() }}</a></span>
                             @if ($addon->edition())<span class="badge uppercase font-bold text-gray-600">{{ $addon->edition() ?? '' }}</span>@endif
                         </td>
                         <td>{{ $addon->version() }}</td>
-                        <td class="text-right text-red-500">{{ $addon->invalidReason() }}</td>
+                        <td class="rtl:text-left ltr:text-right text-red-500">{{ $addon->invalidReason() }}</td>
                     </tr>
                 @endforeach
             </table>
@@ -107,8 +107,8 @@
             <table class="data-table">
                 @foreach ($unlistedAddons as $addon)
                     <tr>
-                        <td class="w-64 font-bold mr-2">
-                            <span class="little-dot bg-green-600 mr-2"></span>
+                        <td class="w-64 font-bold rtl:ml-2 ltr:mr-2">
+                            <span class="little-dot bg-green-600 rtl:ml-2 ltr:mr-2"></span>
                             {{ $addon->name() }}
                         </td>
                         <td>{{ $addon->version() }}</td>
@@ -119,10 +119,10 @@
         @endif
 
         <div class="mt-10 py-4 border-t flex items-center">
-            <a href="{{ $site->url() }}" target="_blank" class="btn btn-primary mr-4">{{ __('Edit Site') }}</a>
-            @if ($addToCartUrl) <a href="{{ $addToCartUrl }}" target="_blank" class="btn mr-4">{{ __('Buy Licenses') }}</a> @endif
+            <a href="{{ $site->url() }}" target="_blank" class="btn btn-primary rtl:ml-4 ltr:mr-4">{{ __('Edit Site') }}</a>
+            @if ($addToCartUrl) <a href="{{ $addToCartUrl }}" target="_blank" class="btn rtl:ml-4 ltr:mr-4">{{ __('Buy Licenses') }}</a> @endif
             <a href="{{ cp_route('utilities.licensing.refresh') }}" class="btn">{{ __('Sync') }}</a>
-            <p class="ml-4 text-2xs text-gray">{{ __('statamic::messages.licensing_sync_instructions') }}</p>
+            <p class="rtl:mr-4 ltr:ml-4 text-2xs text-gray">{{ __('statamic::messages.licensing_sync_instructions') }}</p>
         </div>
 
     @endif
diff --git a/resources/views/nav/duplicates.blade.php b/resources/views/nav/duplicates.blade.php
index bc753f5ebf3..5491b721edd 100644
--- a/resources/views/nav/duplicates.blade.php
+++ b/resources/views/nav/duplicates.blade.php
@@ -1,6 +1,6 @@
 <li class="{{ $item->isActive() ? 'current' : '' }}">
     <a href="{{ $item->url() }}">
         <i>{!! $item->icon() !!}</i><span>{{ __($item->name()) }}</span>
-        <span class="badge-sm bg-red-500 ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
+        <span class="badge-sm bg-red-500 rtl:mr-2 ltr:ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
     </a>
 </li>
diff --git a/resources/views/nav/index.blade.php b/resources/views/nav/index.blade.php
index b52015c7d2e..ee5de3c3fc8 100644
--- a/resources/views/nav/index.blade.php
+++ b/resources/views/nav/index.blade.php
@@ -14,11 +14,11 @@
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 mr-4">@cp_svg('icons/light/earth')</div>
+                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/earth')</div>
                         <a href="{{ cp_route('preferences.nav.default.edit') }}">{{ __('Default') }}</a>
                     </div>
                 </td>
-                <td class="text-right text-2xs text-gray-500">
+                <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
                     @if (Statamic\Facades\Preference::default()->hasPreference('nav'))
                         {{ __('Modified') }}
                     @endif
@@ -28,18 +28,18 @@
     </div>
 
     @if (Statamic\Facades\Role::all()->isNotEmpty())
-        <h3 class="little-heading pl-0 mb-2">{{ __('Override For Role') }}</h3>
+        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Override For Role') }}</h3>
         <div class="card p-0 mb-4">
             <table class="data-table">
                 @foreach (Statamic\Facades\Role::all() as $role)
                     <tr>
                         <td>
                             <div class="flex items-center">
-                                <div class="w-4 h-4 mr-4">@cp_svg('icons/light/shield-key')</div>
+                                <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/shield-key')</div>
                                 <a href="{{ cp_route('preferences.nav.role.edit', [$role->handle()]) }}">{{ __($role->title()) }}</a>
                             </div>
                         </td>
-                        <td class="text-right text-2xs text-gray-500">
+                        <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
                             @if ($role->hasPreference('nav'))
                                 {{ __('Modified') }}
                             @endif
@@ -50,17 +50,17 @@
         </div>
     @endif
 
-    <h3 class="little-heading pl-0 mb-2">{{ __('Override For User') }}</h3>
+    <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Override For User') }}</h3>
     <div class="card p-0 mb-4">
         <table class="data-table">
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 mr-4">@cp_svg('icons/light/user')</div>
+                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/user')</div>
                     <a href="{{ cp_route('preferences.nav.user.edit') }}">{{ __('My Nav') }}</a>
                     </div>
                 </td>
-                <td class="text-right text-2xs text-gray-500">
+                <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
                     @if (Statamic\Facades\User::current()->hasPreference('nav'))
                         {{ __('Modified') }}
                     @endif
diff --git a/resources/views/nav/updates.blade.php b/resources/views/nav/updates.blade.php
index 8569c1ecbe5..9016f11c710 100644
--- a/resources/views/nav/updates.blade.php
+++ b/resources/views/nav/updates.blade.php
@@ -1,6 +1,6 @@
 <li class="{{ $item->isActive() ? 'current' : '' }}">
     <a href="{{ $item->url() }}">
         <i>{!! $item->icon() !!}</i><span v-pre>{{ __($item->name()) }}</span>
-        <updates-badge class="ml-2"></updates-badge>
+        <updates-badge class="rtl:mr-2 ltr:ml-2"></updates-badge>
     </a>
 </li>
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index e1b340d8d36..29e7acec6fd 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -1,10 +1,10 @@
 @php use function Statamic\trans as __; @endphp
 
 <div class="global-header">
-    <div class="lg:min-w-xl pl-2 md:pl-6 h-full flex items-center">
-        <button class="nav-toggle hidden md:flex ml-1 shrink-0" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}">@cp_svg('icons/light/burger', 'h-4 w-4')</button>
-        <button class="nav-toggle md:hidden ml-1 shrink-0" @click="toggleMobileNav" v-if="! mobileNavOpen" aria-label="{{ __('Toggle Mobile Nav') }}">@cp_svg('icons/light/burger', 'h-4 w-4')</button>
-        <button class="nav-toggle md:hidden ml-1 shrink-0" @click="toggleMobileNav" v-else v-cloak aria-label="{{ __('Toggle Mobile Nav') }}">@cp_svg('icons/light/close', 'h-3 w-3')</button>
+    <div class="lg:min-w-xl rtl:pr-2 ltr:pl-2 rtl:md:pr-6 ltr:md:pl-6 h-full flex items-center">
+        <button class="nav-toggle hidden md:flex rtl:mr-1 ltr:ml-1 shrink-0" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}">@cp_svg('icons/light/burger', 'h-4 w-4')</button>
+        <button class="nav-toggle md:hidden rtl:mr-1 ltr:ml-1 shrink-0" @click="toggleMobileNav" v-if="! mobileNavOpen" aria-label="{{ __('Toggle Mobile Nav') }}">@cp_svg('icons/light/burger', 'h-4 w-4')</button>
+        <button class="nav-toggle md:hidden rtl:mr-1 ltr:ml-1 shrink-0" @click="toggleMobileNav" v-else v-cloak aria-label="{{ __('Toggle Mobile Nav') }}">@cp_svg('icons/light/close', 'h-3 w-3')</button>
         <a href="{{ route('statamic.cp.index') }}" class="flex items-end">
             <div v-tooltip="version" class="hidden md:block shrink-0">
                 @if ($customLogo)
@@ -22,7 +22,7 @@
         </global-search>
     </div>
 
-    <div class="head-link h-full md:pr-6 flex items-center justify-end">
+    <div class="head-link h-full rtl:md:pl-6 ltr:md:pr-6 flex items-center justify-end">
 
         @if (Statamic\Facades\Site::authorized()->count() > 1)
             <global-site-selector>
@@ -33,32 +33,32 @@
         <favorite-creator class="hidden md:block"></favorite-creator>
 
         @if (Route::has('horizon.index') && \Laravel\Horizon\Horizon::check(request()))
-            <a class="hidden md:block h-6 w-6 p-1 text-gray ml-4 hover:text-gray-800" href="{{ route('horizon.index') }}" target="_blank" v-tooltip="'Laravel Horizon'">
+            <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="{{ route('horizon.index') }}" target="_blank" v-tooltip="'Laravel Horizon'">
                 @cp_svg('icons/regular/horizon')
             </a>
         @endif
 
         @if (Route::has('pulse') && (app()->environment('local') || $user->can('viewPulse')))
-            <a class="hidden md:block h-6 w-6 p-1 text-gray ml-4 hover:text-gray-800" href="{{ route('pulse') }}" target="_blank" v-tooltip="'Laravel Pulse'">
+            <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="{{ route('pulse') }}" target="_blank" v-tooltip="'Laravel Pulse'">
                 @cp_svg('icons/regular/pulse')
             </a>
         @endif
 
         @if (config('nova.path') && (app()->environment('local') || $user->can('viewNova')))
-            <a class="hidden md:block h-6 w-6 p-1 text-gray ml-4 hover:text-gray-800" href="/{{ trim(config('nova.path'), '/') }}/dashboards/main" target="_blank" v-tooltip="'Laravel Nova'">
+            <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="/{{ trim(config('nova.path'), '/') }}/dashboards/main" target="_blank" v-tooltip="'Laravel Nova'">
                 @cp_svg('icons/regular/nova')
             </a>
         @endif
 
         @if (Route::has('telescope') && \Laravel\Telescope\Telescope::check(request()))
-            <a class="hidden md:block h-6 w-6 p-1 text-gray ml-4 hover:text-gray-800" href="{{ route('telescope') }}" target="_blank" v-tooltip="'Laravel Telescope'">
+            <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="{{ route('telescope') }}" target="_blank" v-tooltip="'Laravel Telescope'">
                 @cp_svg('icons/regular/telescope')
             </a>
         @endif
 
         <dropdown-list v-cloak>
             <template v-slot:trigger>
-                <button class="hidden md:block h-6 w-6 ml-4 p-1 text-gray hover:text-gray-800" v-tooltip="__('Preferences')" aria-label="{{ __('Manage Preferences') }}">
+                <button class="hidden md:block h-6 w-6 rtl:mr-4 ltr:ml-4 p-1 text-gray hover:text-gray-800" v-tooltip="__('Preferences')" aria-label="{{ __('Manage Preferences') }}">
                     @cp_svg('icons/light/cog')
                 </button>
             </template>
@@ -68,7 +68,7 @@
 
         <dropdown-list v-cloak>
             <template v-slot:trigger>
-                <button class="hidden md:block h-6 w-6 ml-4 p-1 text-gray hover:text-gray-800" v-tooltip="__('Useful Links')" aria-label="{{ __('View Useful Links') }}">
+                <button class="hidden md:block h-6 w-6 rtl:mr-4 ltr:ml-4 p-1 text-gray hover:text-gray-800" v-tooltip="__('Useful Links')" aria-label="{{ __('View Useful Links') }}">
                     @cp_svg('icons/light/book-open')
                 </button>
             </template>
@@ -76,14 +76,14 @@
             @if (config('statamic.cp.link_to_docs'))
             <dropdown-item external-link="https://statamic.dev" class="flex items-center">
                 <span>{{ __('Documentation') }}</span>
-                <i class="w-3 block ml-2">@cp_svg('icons/light/external-link')</i>
+                <i class="w-3 block rtl:mr-2 ltr:ml-2">@cp_svg('icons/light/external-link')</i>
             </dropdown-item>
             @endif
 
             @if (config('statamic.cp.support_url'))
             <dropdown-item external-link="{{ config('statamic.cp.support_url') }}" class="flex items-center">
                 <span>{{ __('Support') }}</span>
-                <i class="w-3 block ml-2">@cp_svg('icons/light/external-link')</i>
+                <i class="w-3 block rtl:mr-2 ltr:ml-2">@cp_svg('icons/light/external-link')</i>
             </dropdown-item>
             @endif
 
@@ -92,12 +92,12 @@
             </dropdown-item>
         </dropdown-list>
 
-        <a class="hidden md:block h-6 w-6 p-1 text-gray ml-4 hover:text-gray-800" href="{{ Statamic\Facades\Site::selected()->url() }}" target="_blank" v-tooltip="'{{ __('View Site') }}'" aria-label="{{ __('View Site') }}">
+        <a class="hidden md:block h-6 w-6 p-1 text-gray rtl:mr-4 ltr:ml-4 hover:text-gray-800" href="{{ Statamic\Facades\Site::selected()->url() }}" target="_blank" v-tooltip="'{{ __('View Site') }}'" aria-label="{{ __('View Site') }}">
             @cp_svg('icons/light/browser-com')
         </a>
         <dropdown-list v-cloak>
             <template v-slot:trigger>
-                <a class="dropdown-toggle items-center ml-4 h-full hide flex relative group">
+                <a class="dropdown-toggle items-center rtl:mr-4 ltr:ml-4 h-full hide flex relative group">
                     @if ($user->avatar())
                         <div class="icon-header-avatar {{ session()->get('statamic_impersonated_by') ? 'animate-radar' : '' }}"><img src="{{ $user->avatar() }}" /></div>
                     @else
diff --git a/resources/views/partials/licensing-alerts.blade.php b/resources/views/partials/licensing-alerts.blade.php
index a2f056d0400..956a8155a46 100644
--- a/resources/views/partials/licensing-alerts.blade.php
+++ b/resources/views/partials/licensing-alerts.blade.php
@@ -26,7 +26,7 @@
                 @if ($licenses->isOnTestDomain())
                     <div class="flex items-center justify-between">
                         <span>
-                            <b class="mr-2">{{ __('Trial Mode') }}:</b>
+                            <b class="rtl:ml-2 ltr:mr-2">{{ __('Trial Mode') }}:</b>
                             @if ($licenses->onlyAddonsAreInvalid())
                                 {{ __('statamic::messages.licensing_trial_mode_alert_addons') }}
                             @elseif ($licenses->onlyStatamicIsInvalid())
@@ -36,7 +36,7 @@
                             @endif
                         </span>
                         <div class="flex">
-                            <button @click="hideBanner" class="mr-4 text-2xs opacity-50 hover:opacity-75">{{ __('Dismiss') }}</button>
+                            <button @click="hideBanner" class="rtl:ml-4 ltr:mr-4 text-2xs opacity-50 hover:opacity-75">{{ __('Dismiss') }}</button>
                             @can('access licensing utility')
                             <a href="{{ cp_route('utilities.licensing') }}" class="text-2xs text-white hover:text-yellow flex items-center" aria-label="{{ __('Manage Licenses') }}">
                                 {{ __('Manage Licenses') }} &rarr;
@@ -58,7 +58,7 @@
                             {{ __('statamic::messages.licensing_production_alert') }}
                         @endif
                         <div class="flex">
-                            <button @click="hideBanner" class="mr-4 text-2xs opacity-50 hover:opacity-75">{{ __('Dismiss') }}</button>
+                            <button @click="hideBanner" class="rtl:ml-4 ltr:mr-4 text-2xs opacity-50 hover:opacity-75">{{ __('Dismiss') }}</button>
                             @can('access licensing utility')
                                 <a href="{{ cp_route('utilities.licensing') }}" class="text-2xs text-white hover:text-yellow flex items-center" aria-label="{{ __('Manage Licenses') }}">
                                     {{ __('Manage Licenses') }} &rarr;
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index 54b472ab09c..220d66cc90d 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -26,14 +26,14 @@
         </div>
         <div class="mb-4 flex">
             <input type="text" class="input-text" placeholder="v3 style">
-            <select class="ml-2" name="" id="">
+            <select class="rtl:mr-2 ltr:ml-2" name="" id="">
                 <option value="">Oh hai Mark</option>
             </select>
         </div>
         <div class="mb-4 flex">
             <input type="text" class="input-text" placeholder="v3 style">
-            <button class="btn ml-2">Default Button</button>
-            <button class="btn-primary ml-2">Primary Button</button>
+            <button class="btn rtl:mr-2 ltr:ml-2">Default Button</button>
+            <button class="btn-primary rtl:mr-2 ltr:ml-2">Primary Button</button>
         </div>
         <div class="mb-4">
             <textarea name="" class="input-text" placeholder="v3 style"></textarea>
@@ -69,14 +69,14 @@
     <div class="shadow bg-white p-8 rounded-lg mb-16">
         <h6 class="mb-4">Flavors</h6>
         <div class="mb-8 flex">
-            <button class="mr-4 btn">Default Button</button>
-            <button class="mr-4 btn-primary">Primary Button</button>
-            <button class="mr-4 btn-danger">Danger Button</button>
+            <button class="rtl:ml-4 ltr:mr-4 btn">Default Button</button>
+            <button class="rtl:ml-4 ltr:mr-4 btn-primary">Primary Button</button>
+            <button class="rtl:ml-4 ltr:mr-4 btn-danger">Danger Button</button>
             <button class="btn-flat">Flat Button</button>
         </div>
         <h6 class="mb-4">With Dropdowns</h6>
         <div class="mb-8 flex">
-            <div class="btn-group mr-4">
+            <div class="btn-group rtl:ml-4 ltr:mr-4">
                 <button class="btn">Default Button</button>
                 <dropdown-list>
                     <template v-slot:trigger>
@@ -90,7 +90,7 @@
                     </li>
                 </dropdown-list>
             </div>
-            <div class="btn-group mr-4">
+            <div class="btn-group rtl:ml-4 ltr:mr-4">
                 <button class="btn-primary">Default Button</button>
                 <dropdown-list>
                     <template v-slot:trigger>
@@ -104,7 +104,7 @@
                     </li>
                 </dropdown-list>
             </div>
-            <div class="btn-group mr-4">
+            <div class="btn-group rtl:ml-4 ltr:mr-4">
                 <button class="btn-danger">Default Button</button>
                 <dropdown-list>
                     <template v-slot:trigger>
@@ -118,7 +118,7 @@
                     </li>
                 </dropdown-list>
             </div>
-            <div class="btn-group mr-4">
+            <div class="btn-group rtl:ml-4 ltr:mr-4">
                 <button class="btn-flat">Default Button</button>
                 <dropdown-list>
                     <template v-slot:trigger>
@@ -135,25 +135,25 @@
         </div>
         <h6 class="mb-4">Disabled States</h6>
         <div class="mb-8 flex">
-            <button disabled class="mr-4 btn disabled">Default Button</button>
-            <button disabled class="mr-4 btn-primary disabled">Primary Button</button>
-            <button disabled class="mr-4 btn-danger disabled">Danger Button</button>
+            <button disabled class="rtl:ml-4 ltr:mr-4 btn disabled">Default Button</button>
+            <button disabled class="rtl:ml-4 ltr:mr-4 btn-primary disabled">Primary Button</button>
+            <button disabled class="rtl:ml-4 ltr:mr-4 btn-danger disabled">Danger Button</button>
             <button disabled class="btn-flat disabled">Flat Button</button>
         </div>
 
         <h6 class="mb-4">Large</h6>
         <div class="mb-8 flex">
-            <button class="mr-4 btn btn-lg">Default Button</button>
-            <button class="mr-4 btn-primary btn-lg">Primary Button</button>
-            <button class="mr-4 btn-danger btn-lg">Danger Button</button>
+            <button class="rtl:ml-4 ltr:mr-4 btn btn-lg">Default Button</button>
+            <button class="rtl:ml-4 ltr:mr-4 btn-primary btn-lg">Primary Button</button>
+            <button class="rtl:ml-4 ltr:mr-4 btn-danger btn-lg">Danger Button</button>
             <button class="btn-flat btn-lg">Flat Button</button>
         </div>
 
         <h6 class="mb-4">Small</h6>
         <div class="flex">
-            <button class="mr-4 btn btn-xs">Default Button</button>
-            <button class="mr-4 btn-primary btn-xs">Primary Button</button>
-            <button class="mr-4 btn-danger btn-xs">Danger Button</button>
+            <button class="rtl:ml-4 ltr:mr-4 btn btn-xs">Default Button</button>
+            <button class="rtl:ml-4 ltr:mr-4 btn-primary btn-xs">Primary Button</button>
+            <button class="rtl:ml-4 ltr:mr-4 btn-danger btn-xs">Danger Button</button>
             <button class="btn-flat btn-xs">Flat Button</button>
         </div>
     </div>
@@ -236,7 +236,7 @@
                 </div>
                 <div class="text-4xl mb-4">89</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('icons/light/performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 rtl:ml-2 ltr:mr-2">@cp_svg('icons/light/performance-increase')</span>
                     <span class="leading-none text-sm">8.54% Increase</span>
                 </div>
             </div>
@@ -251,7 +251,7 @@
                 </div>
                 <div class="text-4xl mb-4">35</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('icons/light/performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 rtl:ml-2 ltr:mr-2">@cp_svg('icons/light/performance-increase')</span>
                     <span class="leading-none text-sm">2.15% Increase</span>
                 </div>
             </div>
@@ -266,7 +266,7 @@
                 </div>
                 <div class="text-4xl mb-4 text-gray-400">251</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('icons/light/performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 rtl:ml-2 ltr:mr-2">@cp_svg('icons/light/performance-increase')</span>
                     <span class="leading-none text-gray-400 text-sm">8.54% Increase</span>
                 </div>
             </div>
diff --git a/resources/views/preferences/index.blade.php b/resources/views/preferences/index.blade.php
index d4d66df7b74..7c7ba413365 100644
--- a/resources/views/preferences/index.blade.php
+++ b/resources/views/preferences/index.blade.php
@@ -14,11 +14,11 @@
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 mr-4">@cp_svg('icons/light/earth')</div>
+                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/earth')</div>
                         <a href="{{ cp_route('preferences.default.edit') }}">{{ __('Default') }}</a>
                     </div>
                 </td>
-                <td class="text-right text-2xs text-gray-500">
+                <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
                     @if (!empty(Statamic\Facades\Preference::default()->all()))
                         {{ __('Modified') }}
                     @endif
@@ -28,18 +28,18 @@
     </div>
 
     @if (Statamic\Facades\Role::all()->isNotEmpty())
-        <h3 class="little-heading pl-0 mb-2">{{ __('Override For Role') }}</h3>
+        <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Override For Role') }}</h3>
         <div class="card p-0 mb-4">
             <table class="data-table">
                 @foreach (Statamic\Facades\Role::all() as $role)
                     <tr>
                         <td>
                             <div class="flex items-center">
-                                <div class="w-4 h-4 mr-4">@cp_svg('icons/light/shield-key')</div>
+                                <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/shield-key')</div>
                                 <a href="{{ cp_route('preferences.role.edit', [$role->handle()]) }}">{{ __($role->title()) }}</a>
                             </div>
                         </td>
-                        <td class="text-right text-2xs text-gray-500">
+                        <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
                             @if (!empty($role->preferences()))
                                 {{ __('Modified') }}
                             @endif
@@ -50,17 +50,17 @@
         </div>
     @endif
 
-    <h3 class="little-heading pl-0 mb-2">{{ __('Override For User') }}</h3>
+    <h3 class="little-heading rtl:pr-0 ltr:pl-0 mb-2">{{ __('Override For User') }}</h3>
     <div class="card p-0 mb-4">
         <table class="data-table">
             <tr>
                 <td>
                     <div class="flex items-center">
-                        <div class="w-4 h-4 mr-4">@cp_svg('icons/light/user')</div>
+                        <div class="w-4 h-4 rtl:ml-4 ltr:mr-4">@cp_svg('icons/light/user')</div>
                         <a href="{{ cp_route('preferences.user.edit') }}">{{ __('My Preferences') }}</a>
                     </div>
                 </td>
-                <td class="text-right text-2xs text-gray-500">
+                <td class="rtl:text-left ltr:text-right text-2xs text-gray-500">
                     @if (!empty(Statamic\Facades\User::current()->preferences()))
                         {{ __('Modified') }}
                     @endif
diff --git a/resources/views/snippets.blade.php b/resources/views/snippets.blade.php
index 17ddbe62377..9ed231b9cf8 100644
--- a/resources/views/snippets.blade.php
+++ b/resources/views/snippets.blade.php
@@ -9,9 +9,9 @@
 			<div class="panel-body">
 				<h1>Put teh snipples up in hurr.</h1>
 			</div>
-			
+
 		</div>
 	</div>
 </div>
 
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/taxonomies/blueprints/index.blade.php b/resources/views/taxonomies/blueprints/index.blade.php
index d4656e70fe5..c1c487e906e 100644
--- a/resources/views/taxonomies/blueprints/index.blade.php
+++ b/resources/views/taxonomies/blueprints/index.blade.php
@@ -29,7 +29,7 @@ class="btn"
                         >{{ __('Save Order') }}</button>
                     @endif
 
-                    <a href="{{ cp_route('taxonomies.blueprints.create', $taxonomy) }}" class="btn-primary ml-2">{{ __('Create Blueprint') }}</a>
+                    <a href="{{ cp_route('taxonomies.blueprints.create', $taxonomy) }}" class="btn-primary rtl:mr-2 ltr:ml-2">{{ __('Create Blueprint') }}</a>
                 </div>
             </div>
 
diff --git a/resources/views/taxonomies/empty.blade.php b/resources/views/taxonomies/empty.blade.php
index 345c1d81161..e0f393fadc0 100644
--- a/resources/views/taxonomies/empty.blade.php
+++ b/resources/views/taxonomies/empty.blade.php
@@ -16,28 +16,28 @@
 <div class="card p-4 content">
     <div class="flex flex-wrap">
         <a href="{{ cp_route('taxonomies.edit', $taxonomy->handle()) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/hammer-wrench')
             </div>
-            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
+            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
                 <h3 class="mb-2 text-blue">{{ __('Configure Taxonomy') }} &rarr;</h3>
                 <p>{{ __('statamic::messages.taxonomy_next_steps_configure_description') }}</p>
             </div>
         </a>
         <a href="{{ cp_route('taxonomies.terms.create', [$taxonomy->handle(), $site]) }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/content-writing')
             </div>
-            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
+            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
                 <h3 class="mb-2 text-blue">{{ __('Create Term') }} &rarr;</h3>
                 <p>{{ __('statamic::messages.taxonomy_next_steps_create_term_description') }}</p>
             </div>
         </a>
         <a href="{{ Statamic::docsUrl('taxonomies') }}" target="_blank" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/book-pages')
             </div>
-            <div class="flex-1 mb-4 md:mb-0 md:mr-6">
+            <div class="flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
                 <h3 class="mb-2 text-blue">{{ __('Read the Documentation') }} &rarr;</h3>
                 <p>{{ __('statamic::messages.taxonomy_next_steps_documentation_description') }}</p>
             </div>
diff --git a/resources/views/taxonomies/show.blade.php b/resources/views/taxonomies/show.blade.php
index f0f983efe4b..0386eb60a83 100644
--- a/resources/views/taxonomies/show.blade.php
+++ b/resources/views/taxonomies/show.blade.php
@@ -14,7 +14,7 @@
         <div class="flex items-center">
             <h1 class="flex-1">{{ __($taxonomy->title()) }}</h1>
 
-            <dropdown-list class="mr-2">
+            <dropdown-list class="rtl:ml-2 ltr:mr-2">
                 @can('edit', $taxonomy)
                     <dropdown-item :text="__('Edit Taxonomy')" redirect="{{ $taxonomy->editUrl() }}"></dropdown-item>
                 @endcan
diff --git a/resources/views/updater/index.blade.php b/resources/views/updater/index.blade.php
index 56fda6c5d92..049c4d361a2 100644
--- a/resources/views/updater/index.blade.php
+++ b/resources/views/updater/index.blade.php
@@ -17,7 +17,7 @@
                     <a href="{{ cp_route('updater') }}"
                         class="btn-primary btn-lg">{{ __('Try again') }}</a>
                 </div>
-                <div class="hidden md:block w-1/2 pl-16">
+                <div class="hidden md:block w-1/2 rtl:pr-16 ltr:pl-16">
                     @cp_svg('empty/navigation')
                 </div>
             </div>
@@ -36,9 +36,9 @@ class="btn-primary btn-lg">{{ __('Try again') }}</a>
                     <td class="w-64"><a href="{{ route('statamic.cp.updater.product', 'statamic') }}" class="text-blue font-bold">Statamic</a></td>
                     <td>{{ $statamic->currentVersion() }}</td>
                     @if ($count = $statamic->availableUpdatesCount())
-                        <td class="text-right"><span class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                        <td class="rtl:text-left ltr:text-right"><span class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
-                        <td class="text-right">{{ __('Up to date') }}</td>
+                        <td class="rtl:text-left ltr:text-right">{{ __('Up to date') }}</td>
                     @endif
                 </tr>
             </table>
@@ -50,13 +50,13 @@ class="btn-primary btn-lg">{{ __('Try again') }}</a>
                 @foreach ($addons as $addon)
                 <tr>
                     <td class="w-64"><a href="{{ route('statamic.cp.updater.product', $addon -> slug()) }}"
-                            class="text-blue font-bold mr-2">{{ $addon -> name() }}</a>
+                            class="text-blue font-bold rtl:ml-2 ltr:mr-2">{{ $addon -> name() }}</a>
                     <td>{{ $addon -> version() }}</td>
                     @if ($count = $addon->changelog()->availableUpdatesCount())
-                    <td class="text-right"><span
+                    <td class="rtl:text-left ltr:text-right"><span
                             class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
-                    <td class="text-right">{{ __('Up to date') }}</td>
+                    <td class="rtl:text-left ltr:text-right">{{ __('Up to date') }}</td>
                     @endif
                 </tr>
                 @endforeach
diff --git a/resources/views/usergroups/show.blade.php b/resources/views/usergroups/show.blade.php
index 8aa906d1ba9..ea22d4d7f1c 100644
--- a/resources/views/usergroups/show.blade.php
+++ b/resources/views/usergroups/show.blade.php
@@ -13,7 +13,7 @@
         ])
         <div class="flex items-center">
             <h1 class="flex-1">{{ __($group->title()) }}</h1>
-            <dropdown-list class="mr-2">
+            <dropdown-list class="rtl:ml-2 ltr:mr-2">
                 @can('edit', $group)
                     <dropdown-item :text="__('Edit User Group')" redirect="{{ $group->editUrl() }}"></dropdown-item>
                 @endcan
diff --git a/resources/views/users/index.blade.php b/resources/views/users/index.blade.php
index 670ff325ca5..0c99181ecd6 100644
--- a/resources/views/users/index.blade.php
+++ b/resources/views/users/index.blade.php
@@ -12,13 +12,13 @@
         </h1>
 
         @can('configure fields')
-            <dropdown-list class="mr-2">
+            <dropdown-list class="rtl:ml-2 ltr:mr-2">
                 <dropdown-item :text="__('Edit Blueprint')" redirect="{{ cp_route('users.blueprint.edit') }}"></dropdown-item>
             </dropdown-list>
         @endcan
 
         @if (Statamic::pro() && $user->can('create', 'Statamic\Contracts\Auth\User'))
-            <a href="{{ cp_route('users.create') }}" class="btn-primary ml-4">{{ __('Create User') }}</a>
+            <a href="{{ cp_route('users.create') }}" class="btn-primary rtl:mr-4 ltr:ml-4">{{ __('Create User') }}</a>
         @endif
     </header>
 
diff --git a/resources/views/utilities/cache.blade.php b/resources/views/utilities/cache.blade.php
index 5df2e72db5c..51cd9dcabad 100644
--- a/resources/views/utilities/cache.blade.php
+++ b/resources/views/utilities/cache.blade.php
@@ -24,12 +24,12 @@
     <div class="card p-0">
         <div class="p-4">
             <div class="flex justify-between items-center">
-                <div class="pr-8">
+                <div class="rtl:pl-8 ltr:pr-8">
                     <h2 class="font-bold">{{ __('Content Stache') }}</h2>
                     <p class="text-gray text-sm my-2">{{ __('statamic::messages.cache_utility_stache_description') }}</p>
                 </div>
                 <div class="flex">
-                    <form method="POST" action="{{ cp_route('utilities.cache.warm', 'stache') }}" class="mr-2">
+                    <form method="POST" action="{{ cp_route('utilities.cache.warm', 'stache') }}" class="rtl:ml-2 ltr:mr-2">
                         @csrf
                         <button class="btn">{{ __('Warm') }}</button>
                     </form>
@@ -40,12 +40,12 @@
                 </div>
             </div>
             <div class="text-sm text-gray flex">
-                <div class="mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Records') }}:</span> {{ $stache['records'] }}</div>
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Records') }}:</span> {{ $stache['records'] }}</div>
                 @if($stache['size'])
-                    <div class="mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Size') }}:</span> {{ $stache['size'] }}</div>
+                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Size') }}:</span> {{ $stache['size'] }}</div>
                 @endif
                 @if ($stache['time'])
-                    <div class="mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Build time') }}:</span> {{ $stache['time'] }}</div>
+                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Build time') }}:</span> {{ $stache['time'] }}</div>
                 @endif
                 @if ($stache['rebuilt'])
                     <div class="badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Last rebuild') }}:</span> {{ $stache['rebuilt'] }}</div>
@@ -54,7 +54,7 @@
         </div>
         <div class="p-4 bg-gray-200 border-t">
             <div class="flex justify-between items-center">
-                <div class="pr-8">
+                <div class="rtl:pl-8 ltr:pr-8">
                     <h2 class="font-bold">{{ __('Static Page Cache') }}</h2>
                     <p class="text-gray text-sm my-2">{{ __('statamic::messages.cache_utility_static_cache_description') }}</p>
                 </div>
@@ -66,16 +66,16 @@
                 @endunless
             </div>
             <div class="text-sm text-gray flex">
-                <div class="mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Strategy') }}:</span> {{ $static['strategy'] }}</div>
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Strategy') }}:</span> {{ $static['strategy'] }}</div>
                 @if ($static['enabled'])
-                    <div class="mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Pages') }}:</span> {{ $static['count'] }}</div>
+                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Pages') }}:</span> {{ $static['count'] }}</div>
                 @endif
             </div>
         </div>
 
         <div class="p-4 border-t">
             <div class="flex justify-between items-center">
-                <div class="pr-8">
+                <div class="rtl:pl-8 ltr:pr-8">
                     <h2 class="font-bold">{{ __('Application Cache') }}</h2>
                     <p class="text-gray text-sm my-2">{{ __('statamic::messages.cache_utility_application_cache_description') }}</p>
                 </div>
@@ -85,13 +85,13 @@
                 </form>
             </div>
             <div class="text-sm text-gray flex">
-                <div class="mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Driver') }}:</span> {{ $cache['driver'] }}</div>
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Driver') }}:</span> {{ $cache['driver'] }}</div>
             </div>
         </div>
 
         <div class="p-4 border-t bg-gray-200 rounded-b">
             <div class="flex justify-between items-center">
-                <div class="pr-8">
+                <div class="rtl:pl-8 ltr:pr-8">
                     <h2 class="font-bold">{{ __('Image Cache') }}</h2>
                     <p class="text-gray text-sm my-2">{{ __('statamic::messages.cache_utility_image_cache_description') }}</p>
                 </div>
@@ -101,8 +101,8 @@
                 </form>
             </div>
             <div class="text-sm text-gray flex">
-                <div class="mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Cached images') }}:</span> {{ $images['count'] }}</div>
-                <div class="mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Size') }}:</span> {{ $images['size'] }}</div>
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Cached images') }}:</span> {{ $images['count'] }}</div>
+                <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm bg-white border"><span class="text-gray-800 font-medium">{{ __('Size') }}:</span> {{ $images['size'] }}</div>
             </div>
         </div>
     </div>
diff --git a/resources/views/utilities/email.blade.php b/resources/views/utilities/email.blade.php
index a8ec55dcab0..2ad57f97023 100644
--- a/resources/views/utilities/email.blade.php
+++ b/resources/views/utilities/email.blade.php
@@ -18,7 +18,7 @@
             @csrf
 
             <div class="flex items-center">
-                <input class="input-text mr-4" type="text" name="email" value="{{ old('email', $user->email()) }}" />
+                <input class="input-text rtl:ml-4 ltr:mr-4" type="text" name="email" value="{{ old('email', $user->email()) }}" />
                 <button type="submit" class="btn-primary">{{ __('Send Test Email') }}</button>
             </div>
             @if ($errors->has('email'))
@@ -32,20 +32,20 @@
     <div class="card p-0">
         <table class="data-table">
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Default Mailer') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Default Mailer') }}</th>
                 <td><code>{{ config('mail.default') }}</code></td>
             </tr>
             @if (config('mail.default') == 'smtp')
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Host') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Host') }}</th>
                 <td><code>{{ config('mail.mailers.smtp.host') }}</code></td>
             </tr>
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Port') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Port') }}</th>
                 <td><code>{{ config('mail.mailers.smtp.port') }}</code></td>
             </tr>
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Encryption') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Encryption') }}</th>
                 <td>
                     @if (config('mail.mailers.smtp.encryption'))
                         <code>{{ config('mail.mailers.smtp.encryption') }}</code>
@@ -53,7 +53,7 @@
                 </td>
             </tr>
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Username') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Username') }}</th>
                 <td>
                     @if (config('mail.mailers.smtp.username'))
                         <code>{{ config('mail.mailers.smtp.username') }}</code>
@@ -61,7 +61,7 @@
                 </td>
             </tr>
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Password') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Password') }}</th>
                 <td>
                     @if (config('mail.mailers.smtp.password'))
                         <code>{{ config('mail.mailers.smtp.password') }}</code>
@@ -71,12 +71,12 @@
             @endif
             @if (config('mail.default') == 'sendmail')
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Sendmail') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Sendmail') }}</th>
                 <td><code>{{ config('mail.mailers.sendmail.path') }}</code></td>
             </tr>
             @endif
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Default From Address') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Default From Address') }}</th>
                 <td>
                     @if (config('mail.from.address'))
                         <code>{{ config('mail.from.address') }}</code>
@@ -84,7 +84,7 @@
                 </td>
             </tr>
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Default From Name') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Default From Name') }}</th>
                 <td>
                     @if (config('mail.from.name'))
                         <code>{{ config('mail.from.name') }}</code>
@@ -92,7 +92,7 @@
                 </td>
             </tr>
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Markdown theme') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Markdown theme') }}</th>
                 <td>
                     @if (config('mail.markdown.theme'))
                         <code>{{ config('mail.markdown.theme') }}</code>
@@ -100,7 +100,7 @@
                 </td>
             </tr>
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('Markdown paths') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('Markdown paths') }}</th>
                 <td>
                     @foreach (config('mail.markdown.paths') as $path)
                         <code>{{ $path }}</code><br>
diff --git a/resources/views/utilities/git.blade.php b/resources/views/utilities/git.blade.php
index 2d082b71b2d..50a685de798 100644
--- a/resources/views/utilities/git.blade.php
+++ b/resources/views/utilities/git.blade.php
@@ -30,15 +30,15 @@
                 <h2>{{ __('Repository path') }}: <code class="font-normal">{{ $path }}</code></h2>
                 <pre class="mt-4 p-4 rounded text-sm font-mono bg-gray-300 text-gray-700">{{ $status->status }}</pre>
                 <div class="mt-4 text-sm text-gray flex">
-                    <div class="mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Affected files') }}:</span> {{ $status->totalCount }}</div>
+                    <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Affected files') }}:</span> {{ $status->totalCount }}</div>
                     @if ($status->addedCount)
-                        <div class="mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Added') }}:</span> {{ $status->addedCount }}</div>
+                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Added') }}:</span> {{ $status->addedCount }}</div>
                     @endif
                     @if ($status->modifiedCount)
-                        <div class="mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Modified') }}:</span> {{ $status->modifiedCount }}</div>
+                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Modified') }}:</span> {{ $status->modifiedCount }}</div>
                     @endif
                     @if ($status->deletedCount)
-                        <div class="mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Deleted') }}:</span> {{ $status->deletedCount }}</div>
+                        <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Deleted') }}:</span> {{ $status->deletedCount }}</div>
                     @endif
                 </div>
             </div>
diff --git a/resources/views/utilities/index.blade.php b/resources/views/utilities/index.blade.php
index 1d267c6aefd..2e110cc3909 100644
--- a/resources/views/utilities/index.blade.php
+++ b/resources/views/utilities/index.blade.php
@@ -13,10 +13,10 @@
         <div class="flex flex-wrap">
         @foreach ($utilities as $utility)
             <a href="{{ $utility->url() }}" class="w-full lg:w-1/2 p-4 md:flex items-start hover:bg-gray-200 rounded-md group">
-                <div class="h-8 w-8 mr-4 text-gray-800">
+                <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                     {!! $utility->icon() !!}
                 </div>
-                <div class="text-blue flex-1 mb-4 md:mb-0 md:mr-6">
+                <div class="text-blue flex-1 mb-4 md:mb-0 rtl:md:ml-6 ltr:md:mr-6">
                     <h3>{{ $utility->title() }}</h3>
                     <p class="text-xs">{{ $utility->description() }}</p>
                 </div>
diff --git a/resources/views/utilities/phpinfo.blade.php b/resources/views/utilities/phpinfo.blade.php
index 2dab6292c53..937ab357ca6 100644
--- a/resources/views/utilities/phpinfo.blade.php
+++ b/resources/views/utilities/phpinfo.blade.php
@@ -16,7 +16,7 @@
     <div class="card p-0">
         <table class="data-table">
             <tr>
-                <th class="pl-4 py-2 w-1/4">{{ __('PHP Version') }}</th>
+                <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('PHP Version') }}</th>
                 <td>{{ PHP_VERSION }}</td>
             </tr>
         </table>
@@ -28,7 +28,7 @@
             <table class="data-table">
                 @foreach ($items as $name => $value)
                 <tr>
-                    <th class="pl-4 py-2 w-1/4">{{ $name }}</th>
+                    <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ $name }}</th>
                     <td class="break-all">{{ is_array($value) ? join(', ', $value) : $value }}</td>
                 </tr>
                 @endforeach
diff --git a/resources/views/utilities/search.blade.php b/resources/views/utilities/search.blade.php
index 01e2b09c229..e1a9f189156 100644
--- a/resources/views/utilities/search.blade.php
+++ b/resources/views/utilities/search.blade.php
@@ -42,7 +42,7 @@
                 @foreach (\Statamic\Facades\Search::indexes() as $index)
                     <tr>
                         <td class="flex items-center">
-                            @cp_svg('search-drivers/' . $index->config()['driver'], 'w-6 h-6 mr-2')
+                            @cp_svg('search-drivers/' . $index->config()['driver'], 'w-6 h-6 rtl:ml-2 ltr:mr-2')
                             <div class="text-gray-800 leading-none">{{ $index->title() }}</div>
                         </td>
                         <td>
@@ -54,7 +54,7 @@
                             @else
                                 <div class="text-sm text-gray flex flex-wrap">
                                     @foreach($index->config()['searchables'] as $searchable)
-                                        <div class="mr-2 badge-pill-sm">
+                                        <div class="rtl:ml-2 ltr:mr-2 badge-pill-sm">
                                             {{ $searchable }}
                                         </div>
                                     @endforeach
@@ -64,13 +64,13 @@
                         <td>
                             <div class="text-sm text-gray flex flex-wrap">
                                 @foreach($index->config()['fields'] as $field)
-                                    <div class="mr-2 badge-pill-sm">
+                                    <div class="rtl:ml-2 ltr:mr-2 badge-pill-sm">
                                         {{ $field }}
                                     </div>
                                 @endforeach
                             </div>
                         </td>
-                        <td class="text-right">
+                        <td class="rtl:text-left ltr:text-right">
                             <form method="POST" action="{{ cp_route('utilities.search') }}">
                                 @csrf
                                 <input type="hidden" name="indexes[]" value="{{ $index->name() }}::{{ $index->locale() }}">
diff --git a/resources/views/widgets/collection.blade.php b/resources/views/widgets/collection.blade.php
index 59bc7be0e0d..c7495e43036 100644
--- a/resources/views/widgets/collection.blade.php
+++ b/resources/views/widgets/collection.blade.php
@@ -2,7 +2,7 @@
     <div class="flex justify-between items-center p-4">
         <h2>
             <a class="flex items-center" href="{{ $collection->showUrl() }}">
-                <div class="h-6 w-6 mr-2 text-gray-800">
+                <div class="h-6 w-6 rtl:ml-2 ltr:mr-2 text-gray-800">
                     @cp_svg('icons/light/content-writing')
                 </div>
                 <span v-pre>{{ __($title) }}</span>
diff --git a/resources/views/widgets/getting-started.blade.php b/resources/views/widgets/getting-started.blade.php
index f6fdd9aaba6..6c30c9b5a46 100644
--- a/resources/views/widgets/getting-started.blade.php
+++ b/resources/views/widgets/getting-started.blade.php
@@ -7,7 +7,7 @@
     </div>
     <div class="flex flex-wrap p-4">
         <a href="https://statamic.dev" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/book-pages')
             </div>
             <div class="flex-1">
@@ -17,7 +17,7 @@
         </a>
         @if (!Statamic::pro())
         <a href="https://statamic.dev/licensing" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/pro-ribbon')
             </div>
             <div class="flex-1">
@@ -27,7 +27,7 @@
         </a>
         @endif
         <a href="{{ cp_route('collections.create') }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/content-writing')
             </div>
             <div class="flex-1">
@@ -36,7 +36,7 @@
             </div>
         </a>
         <a href="{{ cp_route('blueprints.index') }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/blueprints')
             </div>
             <div class="flex-1">
@@ -45,7 +45,7 @@
             </div>
         </a>
         <a href="{{ cp_route('navigation.create') }}" class="w-full lg:w-1/2 p-4 flex items-start hover:bg-gray-200 rounded-md group">
-            <div class="h-8 w-8 mr-4 text-gray-800">
+            <div class="h-8 w-8 rtl:ml-4 ltr:mr-4 text-gray-800">
                 @cp_svg('icons/light/hierarchy-files')
             </div>
             <div class="flex-1">
diff --git a/resources/views/widgets/updater.blade.php b/resources/views/widgets/updater.blade.php
index 8926c024a98..0d9a206a575 100644
--- a/resources/views/widgets/updater.blade.php
+++ b/resources/views/widgets/updater.blade.php
@@ -3,7 +3,7 @@
 <div class="card p-0 h-full">
     <header class="flex justify-between items-center p-4 border-b">
         <h2 class="flex items-center">
-            <div class="h-6 w-6 mr-2 text-gray-800">
+            <div class="h-6 w-6 rtl:ml-2 ltr:mr-2 text-gray-800">
                 @cp_svg('icons/light/loading-bar')
             </div>
             <span>{{ __('Updates') }}</span>
diff --git a/src/Http/Controllers/CP/Collections/CollectionsController.php b/src/Http/Controllers/CP/Collections/CollectionsController.php
index a17eda29cee..eca280b85a0 100644
--- a/src/Http/Controllers/CP/Collections/CollectionsController.php
+++ b/src/Http/Controllers/CP/Collections/CollectionsController.php
@@ -410,7 +410,7 @@ protected function editFormBlueprint($collection)
                         'type' => 'html',
                         'html' => ''.
                             '<div class="text-xs">'.
-                            '   <span class="mr-4">'.$collection->entryBlueprints()->map->title()->join(', ').'</span>'.
+                            '   <span class="rtl:ml-4 ltr:mr-4">'.$collection->entryBlueprints()->map->title()->join(', ').'</span>'.
                             '   <a href="'.cp_route('collections.blueprints.index', $collection).'" class="text-blue">'.__('Edit').'</a>'.
                             '</div>',
                     ],
@@ -534,6 +534,7 @@ protected function editFormBlueprint($collection)
                                 'field' => [
                                     'display' => __('Format'),
                                     'type' => 'text',
+                                    'dir' => 'ltr',
                                 ],
                             ],
                             [
diff --git a/src/Http/Controllers/CP/Taxonomies/TaxonomiesController.php b/src/Http/Controllers/CP/Taxonomies/TaxonomiesController.php
index e3c19a43b7a..b0e315ee68e 100644
--- a/src/Http/Controllers/CP/Taxonomies/TaxonomiesController.php
+++ b/src/Http/Controllers/CP/Taxonomies/TaxonomiesController.php
@@ -251,7 +251,7 @@ protected function editFormBlueprint($taxonomy)
                         'type' => 'html',
                         'html' => ''.
                             '<div class="text-xs">'.
-                            '   <span class="mr-4">'.$taxonomy->termBlueprints()->map->title()->join(', ').'</span>'.
+                            '   <span class="rtl:ml-4 ltr:mr-4">'.$taxonomy->termBlueprints()->map->title()->join(', ').'</span>'.
                             '   <a href="'.cp_route('taxonomies.blueprints.index', $taxonomy).'" class="text-blue">'.__('Edit').'</a>'.
                             '</div>',
                     ],
diff --git a/src/Http/View/Composers/JavascriptComposer.php b/src/Http/View/Composers/JavascriptComposer.php
index 665559a4d1c..738d6d45406 100644
--- a/src/Http/View/Composers/JavascriptComposer.php
+++ b/src/Http/View/Composers/JavascriptComposer.php
@@ -41,7 +41,8 @@ private function commonVariables()
             'toasts' => Toast::toArray(),
             'translationLocale' => app('translator')->locale(),
             'translations' => $this->translations(),
-            'locale' => config('app.locale'),
+            'locale' => Statamic::cpLocale(),
+            'direction' => Statamic::cpDirection(),
             'asciiReplaceExtraSymbols' => $replaceSymbols = config('statamic.system.ascii_replace_extra_symbols'),
             'charmap' => ASCII::charsArray($replaceSymbols),
         ];
diff --git a/src/Statamic.php b/src/Statamic.php
index 24d5a968529..44085ea41ff 100644
--- a/src/Statamic.php
+++ b/src/Statamic.php
@@ -461,4 +461,16 @@ private static function createVersionedAssetPath($name, $path, $extension)
             return $path;
         });
     }
+
+    public static function cpLocale(): string
+    {
+        return config('app.locale');
+    }
+
+    public static function cpDirection()
+    {
+        $rtl = ['ar', 'fa', 'he', 'ps', 'ur'];
+
+        return in_array(static::cpLocale(), $rtl) ? 'rtl' : 'ltr';
+    }
 }