diff --git a/src/components/Controls/Attachment.vue b/src/components/Controls/Attachment.vue
index 405edb4c..c03ad11c 100644
--- a/src/components/Controls/Attachment.vue
+++ b/src/components/Controls/Attachment.vue
@@ -17,7 +17,7 @@
     />
 
     <!-- Buttons -->
-    <div class="mr-2 flex gap-2">
+    <div class="me-2 flex gap-2">
       <!-- Upload Button -->
       <button v-if="!value" class="bg-gray-300 p-0.5 rounded" @click="upload">
         <FeatherIcon name="upload" class="h-4 w-4 text-gray-600" />
diff --git a/src/components/Controls/AutoComplete.vue b/src/components/Controls/AutoComplete.vue
index d186a95c..321289fb 100644
--- a/src/components/Controls/AutoComplete.vue
+++ b/src/components/Controls/AutoComplete.vue
@@ -12,7 +12,7 @@
         {{ df.label }}
       </div>
       <div
-        class="flex items-center justify-between pr-2 rounded"
+        class="flex items-center justify-between pe-2 rounded"
         :class="containerClasses"
       >
         <input
diff --git a/src/components/Controls/Check.vue b/src/components/Controls/Check.vue
index 6d5603eb..83c2fce7 100644
--- a/src/components/Controls/Check.vue
+++ b/src/components/Controls/Check.vue
@@ -4,7 +4,7 @@
       class="flex items-center"
       :class="spaceBetween ? 'justify-between' : ''"
     >
-      <div class="mr-3" :class="labelClasses" v-if="showLabel && !labelRight">
+      <div class="me-3" :class="labelClasses" v-if="showLabel && !labelRight">
         {{ df.label }}
       </div>
       <div
@@ -66,7 +66,7 @@
           @focus="(e) => $emit('focus', e)"
         />
       </div>
-      <div class="ml-3" :class="labelClasses" v-if="showLabel && labelRight">
+      <div class="ms-3" :class="labelClasses" v-if="showLabel && labelRight">
         {{ df.label }}
       </div>
     </label>
diff --git a/src/components/Controls/Color.vue b/src/components/Controls/Color.vue
index bf01e335..4d5ac6c0 100644
--- a/src/components/Controls/Color.vue
+++ b/src/components/Controls/Color.vue
@@ -13,7 +13,7 @@
           <div class="flex items-center">
             <div
               v-if="value"
-              class="w-3 h-3 rounded mr-1"
+              class="w-3 h-3 rounded me-1"
               :style="{ backgroundColor: value }"
             ></div>
             <span v-if="value">
diff --git a/src/components/Controls/Datetime.vue b/src/components/Controls/Datetime.vue
index f7d24526..b783ae88 100644
--- a/src/components/Controls/Datetime.vue
+++ b/src/components/Controls/Datetime.vue
@@ -23,7 +23,7 @@
 
         <button
           v-if="!isReadOnly"
-          class="p-0.5 rounded -mr-1 ml-1"
+          class="p-0.5 rounded -mr-1 ms-1"
           :class="showMandatory ? 'bg-red-300' : 'bg-gray-300'"
           @click="togglePopover"
         >
diff --git a/src/components/Controls/DatetimePicker.vue b/src/components/Controls/DatetimePicker.vue
index 8d3c9d98..c32e9fc8 100644
--- a/src/components/Controls/DatetimePicker.vue
+++ b/src/components/Controls/DatetimePicker.vue
@@ -171,7 +171,7 @@
 
       <button
         v-if="showClear"
-        class="text-xs text-gray-600 hover:text-gray-600 ml-auto"
+        class="text-xs text-gray-600 hover:text-gray-600 ms-auto"
         @click="clearClicked"
       >
         {{ t`Clear` }}
diff --git a/src/components/Controls/ExchangeRate.vue b/src/components/Controls/ExchangeRate.vue
index 47f484dd..0be7fd05 100644
--- a/src/components/Controls/ExchangeRate.vue
+++ b/src/components/Controls/ExchangeRate.vue
@@ -26,7 +26,7 @@
     </div>
 
     <button
-      class="bg-green100 px-2 ml-1 -mr-0.5 h-full border-l"
+      class="bg-green100 px-2 ms-1 -mr-0.5 h-full border-l"
       @click="swap"
       v-if="!disabled"
     >
diff --git a/src/components/Controls/Link.vue b/src/components/Controls/Link.vue
index 6790b2d3..a6c73231 100644
--- a/src/components/Controls/Link.vue
+++ b/src/components/Controls/Link.vue
@@ -101,7 +101,7 @@ export default {
         component: markRaw({
           template:
             '<div class="flex items-center font-semibold">{{ t`Create` }}' +
-            '<Badge color="blue" class="ml-2" v-if="isNewValue">{{ linkValue }}</Badge>' +
+            '<Badge color="blue" class="ms-2" v-if="isNewValue">{{ linkValue }}</Badge>' +
             '</div>',
           computed: {
             linkValue: () => this.linkValue,
diff --git a/src/components/Controls/Table.vue b/src/components/Controls/Table.vue
index f1ba178a..ed483a06 100644
--- a/src/components/Controls/Table.vue
+++ b/src/components/Controls/Table.vue
@@ -9,7 +9,7 @@
       :ratio="ratio"
       class="border-b px-2 text-gray-600 w-full flex items-center"
     >
-      <div class="flex items-center pl-2">#</div>
+      <div class="flex items-center ps-2">#</div>
       <div
         class="items-center flex px-2 h-row-mid"
         :class="{
@@ -58,7 +58,7 @@
       v-if="!isReadOnly"
       @click="addRow"
     >
-      <div class="flex items-center pl-1">
+      <div class="flex items-center ps-1">
         <feather-icon name="plus" class="w-4 h-4 text-gray-500" />
       </div>
       <div class="flex justify-between px-2" :style="`grid-column: 2 / ${ratio.length + 1}`">
diff --git a/src/components/Controls/TableRow.vue b/src/components/Controls/TableRow.vue
index c48e7cde..07e43ba9 100644
--- a/src/components/Controls/TableRow.vue
+++ b/src/components/Controls/TableRow.vue
@@ -14,7 +14,7 @@
     "
   >
     <!-- Index or Remove button -->
-    <div class="flex items-center pl-2 text-gray-600">
+    <div class="flex items-center ps-2 text-gray-600">
       <span class="hidden" :class="{ 'group-hover:inline-block': !readOnly }">
         <feather-icon
           name="x"
@@ -50,7 +50,7 @@
 
     <!-- Error Display -->
     <div
-      class="text-xs text-red-600 pl-2 col-span-full relative"
+      class="text-xs text-red-600 ps-2 col-span-full relative"
       style="bottom: 0.75rem; height: 0px"
       v-if="hasErrors"
     >
diff --git a/src/components/FilterDropdown.vue b/src/components/FilterDropdown.vue
index abf1638e..8edaa597 100644
--- a/src/components/FilterDropdown.vue
+++ b/src/components/FilterDropdown.vue
@@ -8,7 +8,7 @@
       <Button :icon="true" @click="togglePopover()">
         <span class="flex items-center">
           <Icon name="filter" size="12" class="stroke-current text-gray-700" />
-          <span class="ml-1">
+          <span class="ms-1">
             <template v-if="activeFilterCount > 0">
               {{ filterAppliedMessage }}
             </template>
@@ -116,7 +116,7 @@
           @click="addNewFilter"
         >
           <feather-icon name="plus" class="w-4 h-4" />
-          <span class="ml-2">{{ t`Add a filter` }}</span>
+          <span class="ms-2">{{ t`Add a filter` }}</span>
         </div>
       </div>
     </template>
diff --git a/src/components/HowTo.vue b/src/components/HowTo.vue
index bc368681..5a8cd840 100644
--- a/src/components/HowTo.vue
+++ b/src/components/HowTo.vue
@@ -1,8 +1,8 @@
 <template>
   <button @click="openHelpLink" class="flex items-center z-10">
-    <p class="mr-1"><slot></slot></p>
+    <p class="me-1"><slot></slot></p>
     <FeatherIcon
-      class="h-5 w-5 ml-3 text-blue-400"
+      class="h-5 w-5 ms-3 text-blue-400"
       name="help-circle"
       v-if="icon"
     />
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index 135fec9d..4b59c7ef 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="absolute bottom-0 flex justify-end pb-6 pr-6"
+    class="absolute bottom-0 flex justify-end pb-6 pe-6"
     :style="{ width: fullWidth ? '100%' : 'calc(100% - 12rem)' }"
     v-if="open && !close"
   >
@@ -27,7 +27,7 @@
       <div class="w-full flex flex-row items-center">
         <!-- Loading Bar BG -->
         <div
-          class="w-full h-3 mr-2 rounded"
+          class="w-full h-3 me-2 rounded"
           :class="percent >= 0 ? 'bg-gray-200' : 'bg-gray-300'"
         >
           <!-- Loading Bar -->
@@ -45,7 +45,7 @@
           class="
             w-4
             h-4
-            ml-auto
+            ms-auto
             text-gray-600
             cursor-pointer
             hover:text-gray-800
diff --git a/src/components/MessageDialog.vue b/src/components/MessageDialog.vue
index 66dd26ff..cb252fd4 100644
--- a/src/components/MessageDialog.vue
+++ b/src/components/MessageDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-3 d-flex align-items-center">
-    <indicator :color="indicatorColor" class="mr-2 ml-1" />
+    <indicator :color="indicatorColor" class="me-2 ms-1" />
     {{ message }}
   </div>
 </template>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 36c14574..12588cdf 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -10,16 +10,16 @@
       <div
         v-if="!sidebar && platform === 'Mac'"
         class="h-full"
-        :class="sidebar ? '' : 'w-tl mr-4 border-r'"
+        :class="sidebar ? '' : 'w-tl me-4 border-r'"
       />
     </Transition>
     <h1 class="text-xl font-semibold select-none" v-if="title">
       {{ title }}
     </h1>
-    <div class="flex items-stretch window-no-drag gap-2 ml-auto">
+    <div class="flex items-stretch window-no-drag gap-2 ms-auto">
       <slot />
       <div class="border-r" v-if="showBorder" />
-      <BackLink v-if="backLink" class="window-no-drag" />
+      <BackLink v-if="backLink" class="window-no-drag rtl-rotate-180" />
       <SearchBar v-if="!hideSearch" />
     </div>
   </div>
diff --git a/src/components/SalesInvoice/Templates/Basic.vue b/src/components/SalesInvoice/Templates/Basic.vue
index 1c93ee0c..c0d6b3f9 100644
--- a/src/components/SalesInvoice/Templates/Basic.vue
+++ b/src/components/SalesInvoice/Templates/Basic.vue
@@ -104,19 +104,19 @@
         </div>
       </div>
       <div class="w-1/2">
-        <div class="flex pl-2 justify-between py-3 border-b">
+        <div class="flex ps-2 justify-between py-3 border-b">
           <div>{{ t`Subtotal` }}</div>
           <div>{{ printObject.netTotal }}</div>
         </div>
         <div
-          class="flex pl-2 justify-between py-3 border-b"
+          class="flex ps-2 justify-between py-3 border-b"
           v-if="printObject.totalDiscount && !printObject.discountAfterTax"
         >
           <div>{{ t`Discount` }}</div>
           <div>{{ printObject.totalDiscount }}</div>
         </div>
         <div
-          class="flex pl-2 justify-between py-3"
+          class="flex ps-2 justify-between py-3"
           v-for="tax in printObject.taxes"
           :key="tax.name"
         >
@@ -124,7 +124,7 @@
           <div>{{ tax.amount }}</div>
         </div>
         <div
-          class="flex pl-2 justify-between py-3 border-t"
+          class="flex ps-2 justify-between py-3 border-t"
           v-if="printObject.totalDiscount && printObject.discountAfterTax"
         >
           <div>{{ t`Discount` }}</div>
@@ -133,7 +133,7 @@
         <div
           class="
             flex
-            pl-2
+            ps-2
             justify-between
             py-3
             border-t
diff --git a/src/components/SalesInvoice/Templates/Business.vue b/src/components/SalesInvoice/Templates/Business.vue
index c7a4a0a1..4901933f 100644
--- a/src/components/SalesInvoice/Templates/Business.vue
+++ b/src/components/SalesInvoice/Templates/Business.vue
@@ -12,7 +12,7 @@
       </h2>
       <div class="flex items-center">
         <div class="flex items-center rounded h-16">
-          <div class="mr-4" v-if="printObject.displayLogo">
+          <div class="me-4" v-if="printObject.displayLogo">
             <img class="h-12 max-w-32 object-contain" :src="printObject.logo" />
           </div>
         </div>
@@ -86,7 +86,7 @@
       </div>
       <div class="mt-12">
         <div class="flex -mx-3">
-          <div class="flex justify-end flex-1 py-3 bg-gray-100 gap-8 pr-6">
+          <div class="flex justify-end flex-1 py-3 bg-gray-100 gap-8 pe-6">
             <div class="text-right">
               <div class="text-gray-800">{{ t`Subtotal` }}</div>
               <div class="text-xl mt-2">
diff --git a/src/components/SalesInvoice/Templates/Minimal.vue b/src/components/SalesInvoice/Templates/Minimal.vue
index eb2a6b5f..ded9aceb 100644
--- a/src/components/SalesInvoice/Templates/Minimal.vue
+++ b/src/components/SalesInvoice/Templates/Minimal.vue
@@ -19,7 +19,7 @@
       <div class="flex items-center justify-between w-full">
         <div class="flex items-center">
           <div class="flex items-center rounded h-16">
-            <div class="mr-4" v-if="printObject.displayLogo">
+            <div class="me-4" v-if="printObject.displayLogo">
               <img
                 class="h-12 max-w-32 object-contain"
                 :src="printObject.logo"
@@ -81,16 +81,16 @@
             font-semibold
             tracking-widest
             text-gray-800
-            ml-8
+            ms-8
           "
         >
           {{ printObject.isSalesInvoice ? 'From' : 'To' }}
         </div>
-        <div class="mt-4 ml-8 text-black leading-relaxed text-lg">
+        <div class="mt-4 ms-8 text-black leading-relaxed text-lg">
           {{ printObject.address }}
         </div>
         <div
-          class="mt-4 ml-8 text-black leading-relaxed text-lg"
+          class="mt-4 ms-8 text-black leading-relaxed text-lg"
           v-if="printObject.gstin"
         >
           GSTIN: {{ printObject.gstin }}
@@ -141,19 +141,19 @@
         </div>
       </div>
       <div class="w-1/2 text-lg">
-        <div class="flex pl-2 justify-between py-1">
+        <div class="flex ps-2 justify-between py-1">
           <div>{{ t`Subtotal` }}</div>
           <div>{{ printObject.netTotal }}</div>
         </div>
         <div
-          class="flex pl-2 justify-between py-1"
+          class="flex ps-2 justify-between py-1"
           v-if="printObject.totalDiscount && !printObject.discountAfterTax"
         >
           <div>{{ t`Discount` }}</div>
           <div>{{ printObject.totalDiscount }}</div>
         </div>
         <div
-          class="flex pl-2 justify-between py-1"
+          class="flex ps-2 justify-between py-1"
           v-for="tax in printObject.taxes"
           :key="tax.name"
         >
@@ -161,14 +161,14 @@
           <div>{{ tax.amount }}</div>
         </div>
         <div
-          class="flex pl-2 justify-between py-1"
+          class="flex ps-2 justify-between py-1"
           v-if="printObject.totalDiscount && printObject.discountAfterTax"
         >
           <div>{{ t`Discount` }}</div>
           <div>{{ printObject.totalDiscount }}</div>
         </div>
         <div
-          class="flex pl-2 justify-between py-1 font-semibold"
+          class="flex ps-2 justify-between py-1 font-semibold"
           :style="{ color: printObject.color }"
         >
           <div>{{ t`Grand Total` }}</div>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 3d3ff267..b7461e8f 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -2,9 +2,9 @@
   <div>
     <!-- Search Bar Button -->
     <Button @click="open" class="px-2" :padding="false">
-      <feather-icon name="search" class="w-4 h-4 mr-1 text-gray-800" />
+      <feather-icon name="search" class="w-4 h-4 me-1 text-gray-800" />
       <p>{{ t`Search` }}</p>
-      <div class="text-gray-500 px-1 ml-4 text-sm">
+      <div class="text-gray-500 px-1 ms-4 text-sm">
         {{ modKey('k') }}
       </div>
     </Button>
@@ -67,7 +67,7 @@
             >
               {{ si.label }}
             </p>
-            <p class="text-gray-600 text-sm ml-3" v-if="si.group === 'Docs'">
+            <p class="text-gray-600 text-sm ms-3" v-if="si.group === 'Docs'">
               {{ si.more.filter(Boolean).join(', ') }}
             </p>
           </div>
@@ -157,17 +157,17 @@
             class="flex items-center hover:text-gray-800"
             @click="openDocs"
           >
-            <feather-icon name="help-circle" class="w-4 h-4 mr-1" />
+            <feather-icon name="help-circle" class="w-4 h-4 me-1" />
             {{ t`Help` }}
           </button>
         </div>
 
-        <p v-if="searcher?.numSearches" class="ml-auto">
+        <p v-if="searcher?.numSearches" class="ms-auto">
           {{ t`${suggestions.length} out of ${searcher.numSearches}` }}
         </p>
 
         <div
-          class="border border-gray-100 rounded flex justify-self-end ml-2"
+          class="border border-gray-100 rounded flex justify-self-end ms-2"
           v-if="(searcher?.numSearches ?? 0) > 50"
         >
           <template
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 2ef26155..2fd299dd 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -44,7 +44,7 @@
             :class="isGroupActive(group) && !group.items ? '-ml-1' : ''"
           />
           <div
-            class="ml-2 text-lg text-gray-900"
+            class="ms-2 text-lg text-gray-900"
             :class="isGroupActive(group) && !group.items && 'text-blue-600'"
           >
             {{ group.label }}
@@ -59,7 +59,7 @@
             class="
               text-base text-gray-800
               h-10
-              pl-10
+              ps-10
               cursor-pointer
               flex
               items-center
@@ -141,12 +141,13 @@
       class="
         absolute
         bottom-0
-        right-0
+        end-0
         text-gray-600
         hover:bg-gray-100
         rounded
         p-1
         m-4
+        rtl-rotate-180
       "
       @click="$emit('toggle-sidebar')"
     >
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index fad5e8fc..92d22283 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -17,7 +17,7 @@
     :style="{ opacity }"
     v-if="show"
   >
-    <feather-icon :name="iconName" class="w-6 h-6 mr-3" :class="iconColor" />
+    <feather-icon :name="iconName" class="w-6 h-6 me-3" :class="iconColor" />
     <div @click="actionClicked" :class="actionText ? 'cursor-pointer' : ''">
       <p class="text-base">{{ message }}</p>
       <button
@@ -29,7 +29,7 @@
     </div>
     <feather-icon
       name="x"
-      class="w-4 h-4 ml-auto text-gray-600 cursor-pointer hover:text-gray-800"
+      class="w-4 h-4 ms-auto text-gray-600 cursor-pointer hover:text-gray-800"
       @click="closeToast"
     />
   </div>
diff --git a/src/components/TwoColumnForm.vue b/src/components/TwoColumnForm.vue
index f7de358c..62f91fdc 100644
--- a/src/components/TwoColumnForm.vue
+++ b/src/components/TwoColumnForm.vue
@@ -63,12 +63,12 @@
           height: getFieldHeight(df),
         }"
       >
-        <div class="pl-4 flex text-gray-600">
+        <div class="ps-4 flex text-gray-600">
           {{ df.label }}
         </div>
 
         <div
-          class="py-2 pr-4"
+          class="py-2 pe-4"
           @click="activateInlineEditing(df)"
           :class="{
             'pl-2': df.fieldtype === 'AttachImage',
@@ -87,7 +87,7 @@
             @new-doc="async (newdoc) => await onChange(df, newdoc.name)"
           />
           <div
-            class="text-sm text-red-600 mt-2 pl-2"
+            class="text-sm text-red-600 mt-2 ps-2"
             v-if="errors[df.fieldname]"
           >
             {{ errors[df.fieldname] }}
diff --git a/src/components/WindowsTitleBar.vue b/src/components/WindowsTitleBar.vue
index 809945b7..f758ed1c 100644
--- a/src/components/WindowsTitleBar.vue
+++ b/src/components/WindowsTitleBar.vue
@@ -3,7 +3,7 @@
     class="window-drag flex items-center border-b text-gray-900 border-gray-100"
     style="height: 28px"
   >
-    <Fb class="ml-2" />
+    <Fb class="ms-2" />
     <p class="mx-auto text-sm" v-if="companyName && dbPath">
       {{ companyName }} - {{ dbPath }}
     </p>
diff --git a/src/pages/ChartOfAccounts.vue b/src/pages/ChartOfAccounts.vue
index 3912df70..7dd9d502 100644
--- a/src/pages/ChartOfAccounts.vue
+++ b/src/pages/ChartOfAccounts.vue
@@ -25,7 +25,7 @@
             items-center
             border-b
             flex-shrink-0
-            pr-4
+            pe-4
           "
           :class="[
             account.level !== 0 ? 'text-base' : 'text-lg',
@@ -37,14 +37,14 @@
           <component :is="getIconComponent(account)" />
           <div class="flex items-baseline">
             <div
-              class="ml-4"
+              class="ms-4"
               :class="[!account.parentAccount && 'font-semibold']"
             >
               {{ account.name }}
             </div>
 
             <!-- Add Account Buttons on Group Hover -->
-            <div v-if="account.isGroup" class="ml-6 hidden group-hover:block">
+            <div v-if="account.isGroup" class="ms-6 hidden group-hover:block">
               <button
                 class="
                   text-xs text-gray-800
@@ -57,7 +57,7 @@
               </button>
               <button
                 class="
-                  ml-3
+                  ms-3
                   text-xs text-gray-800
                   hover:text-gray-900
                   focus:outline-none
@@ -70,7 +70,7 @@
           </div>
 
           <!-- Account Balance String -->
-          <p class="ml-auto text-base text-gray-800" v-if="!account.isGroup">
+          <p class="ms-auto text-base text-gray-800" v-if="!account.isGroup">
             {{ getBalanceString(account) }}
           </p>
         </div>
@@ -96,7 +96,7 @@
           <component
             :is="getIconComponent({ isGroup: account.addingGroupAccount })"
           />
-          <div class="flex ml-4 h-row-mid items-center">
+          <div class="flex ms-4 h-row-mid items-center">
             <input
               class="focus:outline-none bg-transparent"
               :class="{ 'text-gray-600': insertingAccount }"
@@ -113,7 +113,7 @@
             <button
               v-if="!insertingAccount"
               class="
-                ml-4
+                ms-4
                 text-xs text-gray-800
                 hover:text-gray-900
                 focus:outline-none
@@ -127,7 +127,7 @@
             <button
               v-if="!insertingAccount"
               class="
-                ml-4
+                ms-4
                 text-xs text-gray-800
                 hover:text-gray-900
                 focus:outline-none
diff --git a/src/pages/Dashboard/Expenses.vue b/src/pages/Dashboard/Expenses.vue
index 7a4bdb1d..5aba701e 100644
--- a/src/pages/Dashboard/Expenses.vue
+++ b/src/pages/Dashboard/Expenses.vue
@@ -19,10 +19,10 @@
           @mouseleave="active = null"
         >
           <div class="w-3 h-3 rounded-sm flex-shrink-0" :class="d.class" />
-          <p class="ml-2 overflow-x-auto whitespace-nowrap no-scrollbar w-28">
+          <p class="ms-2 overflow-x-auto whitespace-nowrap no-scrollbar w-28">
             {{ d.account }}
           </p>
-          <p class="whitespace-nowrap flex-shrink-0 ml-auto">
+          <p class="whitespace-nowrap flex-shrink-0 ms-auto">
             {{ fyo.format(d?.total ?? 0, 'Currency') }}
           </p>
         </div>
diff --git a/src/pages/Dashboard/PeriodSelector.vue b/src/pages/Dashboard/PeriodSelector.vue
index 774f1035..2ef7b356 100644
--- a/src/pages/Dashboard/PeriodSelector.vue
+++ b/src/pages/Dashboard/PeriodSelector.vue
@@ -29,7 +29,7 @@
         @keydown.enter="selectHighlightedItem"
       >
         {{ periodSelectorMap?.[value] ?? value }}
-        <feather-icon name="chevron-down" class="ml-1 w-3 h-3" />
+        <feather-icon name="chevron-down" class="ms-1 w-3 h-3" />
       </div>
     </template>
   </Dropdown>
diff --git a/src/pages/DataImport.vue b/src/pages/DataImport.vue
index 5101ff73..a45518cd 100644
--- a/src/pages/DataImport.vue
+++ b/src/pages/DataImport.vue
@@ -38,7 +38,7 @@
         />
 
         <p
-          class="text-base ml-2"
+          class="text-base ms-2"
           :class="fileName ? 'text-gray-900 font-semibold' : 'text-gray-700'"
         >
           <span v-if="fileName" class="font-normal"
@@ -88,7 +88,7 @@
               items-center
               gap-2
               bg-gray-100
-              pl-2
+              ps-2
               rounded
               text-gray-900
               w-40
@@ -277,7 +277,7 @@
               "
             >
               <FeatherIcon name="plus" class="w-4 h-4" />
-              <p class="pl-4">
+              <p class="ps-4">
                 {{ t`Add Row` }}
               </p>
             </button>
@@ -306,7 +306,7 @@
           <div
             v-for="(n, i) in names"
             :key="'name-' + i"
-            class="grid grid-cols-2 gap-2 border-b pb-2 mb-2 pr-4 text-lg w-60"
+            class="grid grid-cols-2 gap-2 border-b pb-2 mb-2 pe-4 text-lg w-60"
             style="grid-template-columns: 2rem auto"
           >
             <p class="text-right">{{ i + 1 }}.</p>
diff --git a/src/pages/DatabaseSelector.vue b/src/pages/DatabaseSelector.vue
index dc75c43e..95fd210b 100644
--- a/src/pages/DatabaseSelector.vue
+++ b/src/pages/DatabaseSelector.vue
@@ -107,7 +107,7 @@
           </div>
           <button
             class="
-              ml-auto
+              ms-auto
               p-2
               hover:bg-red-200
               rounded-full
diff --git a/src/pages/GetStarted.vue b/src/pages/GetStarted.vue
index 0b0e1839..c5636bed 100644
--- a/src/pages/GetStarted.vue
+++ b/src/pages/GetStarted.vue
@@ -53,7 +53,7 @@
                 <Button
                   v-if="item.documentation"
                   class="leading-tight"
-                  :class="{ 'ml-4': item.action }"
+                  :class="{ 'ms-4': item.action }"
                   @click="handleDocumentation(item)"
                 >
                   <span class="text-base">
diff --git a/src/pages/InvoiceForm.vue b/src/pages/InvoiceForm.vue
index 6f6c0d69..3b84ee8e 100644
--- a/src/pages/InvoiceForm.vue
+++ b/src/pages/InvoiceForm.vue
@@ -145,7 +145,7 @@
           </div>
 
           <!-- Totals -->
-          <div class="w-1/2 gap-2 flex flex-col self-end ml-auto">
+          <div class="w-1/2 gap-2 flex flex-col self-end ms-auto">
             <!-- Subtotal -->
             <div class="flex justify-between">
               <div>{{ t`Subtotal` }}</div>
diff --git a/src/pages/JournalEntryForm.vue b/src/pages/JournalEntryForm.vue
index ceda75a5..c346e603 100644
--- a/src/pages/JournalEntryForm.vue
+++ b/src/pages/JournalEntryForm.vue
@@ -119,7 +119,7 @@
           />
 
           <!-- Debit and Credit -->
-          <div class="w-1/2 gap-2 flex flex-col self-end font-semibold ml-auto">
+          <div class="w-1/2 gap-2 flex flex-col self-end font-semibold ms-auto">
             <div class="flex justify-between text-green-600">
               <div>{{ t`Total Debit` }}</div>
               <div>{{ totalDebit }}</div>
diff --git a/src/pages/ListView/List.vue b/src/pages/ListView/List.vue
index 2635379b..c3300afc 100644
--- a/src/pages/ListView/List.vue
+++ b/src/pages/ListView/List.vue
@@ -25,7 +25,7 @@
             flex
           "
           :class="{
-            'ml-auto': isNumeric(column.fieldtype),
+            'ms-auto': isNumeric(column.fieldtype),
             'pr-4': i === columns.length - 1,
           }"
         >
diff --git a/src/pages/QuickEditForm.vue b/src/pages/QuickEditForm.vue
index e5a0ac5b..c3b9c068 100644
--- a/src/pages/QuickEditForm.vue
+++ b/src/pages/QuickEditForm.vue
@@ -13,7 +13,7 @@
         <Button :icon="true" @click="routeToPrevious">
           <feather-icon name="x" class="w-4 h-4" />
         </Button>
-        <span v-if="statusText" class="ml-2 text-base text-gray-600">{{
+        <span v-if="statusText" class="ms-2 text-base text-gray-600">{{
           statusText
         }}</span>
       </div>
@@ -55,7 +55,7 @@
     >
       <FormControl
         v-if="imageField"
-        class="ml-4"
+        class="ms-4"
         :df="imageField"
         :value="doc[imageField.fieldname]"
         @change="(value) => valueChange(imageField, value)"
@@ -63,7 +63,7 @@
       />
       <FormControl
         v-if="titleField"
-        :class="!!imageField ? 'mr-4' : 'w-full mx-4'"
+        :class="!!imageField ? 'me-4' : 'w-full mx-4'"
         :input-class="[
           'font-semibold text-xl',
           !!imageField ? '' : 'text-center',
diff --git a/src/styles/index.css b/src/styles/index.css
index 9668ea02..3c9776d2 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -168,3 +168,11 @@ input[type='number']::-webkit-inner-spin-button {
 .quickedit-leave-active {
   transition: all 150ms ease-out;
 }
+
+/* 
+  RTL
+ */
+ 
+[dir="rtl"] .rtl-rotate-180{
+  transform: rotate(180deg);
+}
diff --git a/yarn.lock b/yarn.lock
index 864aa719..f6643407 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11754,6 +11754,11 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+tailwindcss-rtl@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-rtl/-/tailwindcss-rtl-0.9.0.tgz#270da04492081620478ebf73819fc285fe724a54"
+  integrity sha512-y7yC8QXjluDBEFMSX33tV6xMYrf0B3sa+tOB5JSQb6/G6laBU313a+Z+qxu55M1Qyn8tDMttjomsA8IsJD+k+w==
+
 "tailwindcss@npm:@tailwindcss/postcss7-compat":
   version "2.2.17"
   resolved "https://registry.yarnpkg.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.17.tgz#dc78f3880a2af84163150ff426a39e42b9ae8922"