From f13ff35f4956eaf187117505b44a8afef3c02ab7 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 12:36:24 +0200
Subject: [PATCH 01/14] feat: support rtl languages

---
 resources/js/Components/Breadcrumb.vue        |   4 +-
 resources/js/Components/Jetstream/Banner.vue  |   2 +-
 .../Jetstream/ConfirmationModal.vue           |   2 +-
 .../Components/Jetstream/ConfirmsPassword.vue |   2 +-
 .../js/Components/Jetstream/SectionTitle.vue  |   4 +-
 resources/js/Components/Jetstream/Select.vue  |   5 +-
 resources/js/Components/Pagination.vue        |   6 +-
 resources/js/Components/ResponsiveNavLink.vue |   4 +-
 resources/js/Layouts/AppLayout.vue            |   6 +-
 resources/js/Pages/API/Index.vue              |   6 +-
 .../js/Pages/API/Partials/ApiTokenManager.vue |  18 +-
 resources/js/Pages/Auth/AcceptInvitation.vue  |   4 +-
 resources/js/Pages/Auth/ConfirmPassword.vue   |   2 +-
 resources/js/Pages/Auth/Login.vue             |  25 +-
 resources/js/Pages/Auth/Register.vue          |   7 +-
 .../js/Pages/Auth/TwoFactorChallenge.vue      |   2 +-
 .../Pages/Profile/Partials/DeleteUserForm.vue |   4 +-
 .../LogoutOtherBrowserSessionsForm.vue        |   6 +-
 .../Partials/TwoFactorAuthenticationForm.vue  |   6 +-
 .../Profile/Partials/UpdatePasswordForm.vue   |   2 +-
 .../Partials/UpdateProfileInformationForm.vue |   4 +-
 .../Profile/Partials/UpdateProviders.vue      |  13 +-
 .../js/Pages/Settings/CancelAccount/Index.vue |   6 +-
 resources/js/Pages/Settings/Index.vue         |  18 +-
 .../js/Pages/Settings/Notifications/Index.vue |   8 +-
 .../Settings/Notifications/Logs/Index.vue     |  14 +-
 .../Notifications/Partials/Emails.vue         |  77 +++---
 .../Notifications/Partials/Telegram.vue       |  71 +++---
 .../Personalize/AddressTypes/Index.vue        |  14 +-
 .../Personalize/CallReasons/Index.vue         |  16 +-
 .../ContactInformationTypes/Index.vue         |  16 +-
 .../Settings/Personalize/Currencies/Index.vue |  23 +-
 .../Settings/Personalize/Genders/Index.vue    |  14 +-
 .../Personalize/GiftOccasions/Index.vue       |  20 +-
 .../Settings/Personalize/GiftStates/Index.vue |  22 +-
 .../Settings/Personalize/GroupTypes/Index.vue |  28 ++-
 .../js/Pages/Settings/Personalize/Index.vue   |  36 +--
 .../Settings/Personalize/Modules/Index.vue    |  30 +--
 .../Personalize/PetCategories/Index.vue       |  14 +-
 .../Personalize/PostTemplates/Index.vue       |  26 +-
 .../Settings/Personalize/Pronouns/Index.vue   |  14 +-
 .../Personalize/Relationships/Index.vue       |  16 +-
 .../Settings/Personalize/Religions/Index.vue  |  20 +-
 .../Settings/Personalize/Templates/Index.vue  |  14 +-
 .../Templates/Partials/Modules.vue            |   4 +-
 .../Personalize/Templates/Partials/Pages.vue  |   4 +-
 .../Settings/Personalize/Templates/Show.vue   |  14 +-
 .../js/Pages/Settings/Preferences/Index.vue   |   6 +-
 .../Preferences/Partials/DateFormat.vue       |   6 +-
 .../Preferences/Partials/DistanceFormat.vue   |   8 +-
 .../Preferences/Partials/HelpPreference.vue   |   8 +-
 .../Settings/Preferences/Partials/Locale.vue  |  30 +--
 .../Settings/Preferences/Partials/Maps.vue    |   6 +-
 .../Preferences/Partials/NameOrder.vue        |  30 ++-
 .../Preferences/Partials/NumberFormat.vue     |   6 +-
 .../Preferences/Partials/Timezone.vue         |  12 +-
 resources/js/Pages/Settings/Storage/Index.vue |  12 +-
 resources/js/Pages/Settings/Users/Create.vue  |  16 +-
 resources/js/Pages/Settings/Users/Index.vue   |  20 +-
 resources/js/Pages/Vault/Calendar/Index.vue   |  49 ++--
 resources/js/Pages/Vault/Companies/Index.vue  |   2 +-
 resources/js/Pages/Vault/Contact/Blank.vue    |   6 +-
 resources/js/Pages/Vault/Contact/Create.vue   |  22 +-
 .../js/Pages/Vault/Contact/Goals/Show.vue     |  20 +-
 .../Vault/Contact/ImportantDates/Index.vue    |  52 ++--
 resources/js/Pages/Vault/Contact/Index.vue    |  10 +-
 resources/js/Pages/Vault/Contact/Move.vue     |   6 +-
 .../js/Pages/Vault/Contact/Names/Edit.vue     |  10 +-
 .../js/Pages/Vault/Contact/Notes/Index.vue    |  10 +-
 .../js/Pages/Vault/Contact/Photos/Index.vue   |  12 +-
 .../js/Pages/Vault/Contact/Photos/Show.vue    |  14 +-
 .../Vault/Contact/Relationships/Create.vue    |  72 +++---
 resources/js/Pages/Vault/Contact/Show.vue     |  22 +-
 resources/js/Pages/Vault/Create.vue           |   6 +-
 resources/js/Pages/Vault/Dashboard/Index.vue  |  12 +-
 .../Vault/Dashboard/Partials/DueTasks.vue     |   8 +-
 .../Vault/Dashboard/Partials/LastUpdated.vue  |   4 +-
 .../Vault/Dashboard/Partials/LifeMetrics.vue  |   4 +-
 .../Dashboard/Partials/MoodTrackingEvents.vue |  16 +-
 .../Dashboard/Partials/UpcomingReminders.vue  |   4 +-
 .../Pages/Vault/Dashboard/Reminder/Index.vue  |  14 +-
 .../js/Pages/Vault/Dashboard/Task/Index.vue   |   6 +-
 resources/js/Pages/Vault/Files/Index.vue      |  22 +-
 resources/js/Pages/Vault/Group/Edit.vue       |  10 +-
 resources/js/Pages/Vault/Group/Index.vue      |   2 +-
 resources/js/Pages/Vault/Group/Show.vue       |  22 +-
 resources/js/Pages/Vault/Index.vue            |   9 +-
 resources/js/Pages/Vault/Journal/Create.vue   |   6 +-
 resources/js/Pages/Vault/Journal/Edit.vue     |  10 +-
 resources/js/Pages/Vault/Journal/Index.vue    |   4 +-
 .../js/Pages/Vault/Journal/Metrics/Index.vue  |  12 +-
 .../js/Pages/Vault/Journal/Photo/Index.vue    |  16 +-
 .../js/Pages/Vault/Journal/Post/Edit.vue      |  38 +--
 .../Journal/Post/Partials/PostMetrics.vue     |   4 +-
 .../Vault/Journal/Post/Partials/Tags.vue      |   4 +-
 .../js/Pages/Vault/Journal/Post/Show.vue      |  45 +++-
 .../js/Pages/Vault/Journal/Post/Template.vue  |   8 +-
 resources/js/Pages/Vault/Journal/Show.vue     |  24 +-
 .../js/Pages/Vault/Journal/Slices/Edit.vue    |  18 +-
 .../js/Pages/Vault/Journal/Slices/Index.vue   |  12 +-
 .../js/Pages/Vault/Journal/Slices/Show.vue    |  27 ++-
 .../Vault/Reports/Address/Cities/Index.vue    |  19 +-
 .../Vault/Reports/Address/Countries/Index.vue |  19 +-
 .../js/Pages/Vault/Reports/Address/Index.vue  |  10 +-
 .../Vault/Reports/ImportantDate/Index.vue     |  10 +-
 .../Reports/MoodTrackingEvents/Index.vue      |  17 +-
 .../js/Pages/Vault/Search/Partials/Note.vue   |   6 +-
 .../Partials/ContactImportantDateTypes.vue    |   6 +-
 .../Settings/Partials/DefaultTemplate.vue     |   2 +-
 .../Pages/Vault/Settings/Partials/Delete.vue  |   2 +-
 .../Pages/Vault/Settings/Partials/Labels.vue  |  12 +-
 .../Partials/LifeEventTypesAndCategories.vue  |  18 +-
 .../Partials/MoodTrackingParameters.vue       |  18 +-
 .../Settings/Partials/QuickFactTemplate.vue   |  10 +-
 .../Vault/Settings/Partials/TabVisibility.vue |  30 +--
 .../js/Pages/Vault/Settings/Partials/Tags.vue |   6 +-
 .../Pages/Vault/Settings/Partials/Users.vue   |  34 +--
 .../Webauthn/Partials/DeleteKeyModal.vue      |   2 +-
 .../Pages/Webauthn/Partials/RegisterKey.vue   |   2 +-
 .../js/Pages/Webauthn/Partials/UpdateKey.vue  |   2 +-
 .../js/Pages/Webauthn/Partials/WaitForKey.vue |   4 +-
 resources/js/Pages/Webauthn/WebauthnKeys.vue  |   6 +-
 resources/js/Pages/Webauthn/WebauthnLogin.vue |   2 +-
 resources/js/Shared/ContactCard.vue           |   6 +-
 resources/js/Shared/Form/ContactSelector.vue  |   9 +-
 resources/js/Shared/Form/Dropdown.vue         |  41 +++-
 resources/js/Shared/Form/PrettyButton.vue     |   8 +-
 resources/js/Shared/Form/PrettyLink.vue       |   2 +-
 resources/js/Shared/Form/TextArea.vue         |  12 +-
 resources/js/Shared/Form/TextInput.vue        |  12 +-
 resources/js/Shared/Layout.vue                | 224 +++++++++---------
 resources/js/Shared/Modules/Addresses.vue     |  66 +++---
 resources/js/Shared/Modules/Calls.vue         |  68 +++---
 .../js/Shared/Modules/ContactInformation.vue  |  12 +-
 resources/js/Shared/Modules/ContactName.vue   |   2 +-
 .../js/Shared/Modules/CreateLifeEvent.vue     |  16 +-
 resources/js/Shared/Modules/Documents.vue     |  15 +-
 resources/js/Shared/Modules/FamilySummary.vue |  12 +-
 resources/js/Shared/Modules/Feed.vue          |  19 +-
 .../js/Shared/Modules/FeedItems/Address.vue   |   9 +-
 .../Modules/FeedItems/ContactInformation.vue  |   9 +-
 .../Modules/FeedItems/GenericAction.vue       |   9 +-
 .../js/Shared/Modules/FeedItems/Goal.vue      |   6 +-
 .../Modules/FeedItems/LabelAssigned.vue       |  13 +-
 .../Modules/FeedItems/MoodTrackingEvent.vue   |  10 +-
 .../js/Shared/Modules/FeedItems/Note.vue      |  11 +-
 resources/js/Shared/Modules/FeedItems/Pet.vue |   8 +-
 resources/js/Shared/Modules/Goals.vue         |  18 +-
 resources/js/Shared/Modules/Groups.vue        |   4 +-
 resources/js/Shared/Modules/Labels.vue        |   4 +-
 resources/js/Shared/Modules/LifeEvent.vue     |  33 +--
 resources/js/Shared/Modules/Loans.vue         |  55 +++--
 resources/js/Shared/Modules/Notes.vue         |  16 +-
 resources/js/Shared/Modules/Pets.vue          |  16 +-
 resources/js/Shared/Modules/Photos.vue        |  10 +-
 resources/js/Shared/Modules/Posts.vue         |   6 +-
 resources/js/Shared/Modules/QuickFacts.vue    |  14 +-
 resources/js/Shared/Modules/Relationships.vue |   8 +-
 resources/js/Shared/Modules/Reminders.vue     | 116 ++++-----
 resources/js/Shared/Modules/Tasks.vue         |  22 +-
 resources/js/Shared/Toaster.vue               | 128 ++++------
 161 files changed, 1487 insertions(+), 1306 deletions(-)

diff --git a/resources/js/Components/Breadcrumb.vue b/resources/js/Components/Breadcrumb.vue
index a78c6a76e..ce3ed7199 100644
--- a/resources/js/Components/Breadcrumb.vue
+++ b/resources/js/Components/Breadcrumb.vue
@@ -7,11 +7,11 @@ defineProps({
 <template>
   <div class="flex items-baseline justify-between space-x-6">
     <ul class="text-sm">
-      <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+      <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
         {{ $t('You are here:') }}
       </li>
       <template v-for="(item, index) in items" :key="index">
-        <li v-if="index > 0" class="relative ml-2 inline">
+        <li v-if="index > 0" class="relative inline ltr:ml-2 rtl:mr-2">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Components/Jetstream/Banner.vue b/resources/js/Components/Jetstream/Banner.vue
index 0f470055c..c6fa2c196 100644
--- a/resources/js/Components/Jetstream/Banner.vue
+++ b/resources/js/Components/Jetstream/Banner.vue
@@ -49,7 +49,7 @@ watch(message, async () => {
               </svg>
             </span>
 
-            <p class="ml-3 truncate text-sm font-medium text-white">
+            <p class="truncate text-sm font-medium text-white ltr:ml-3 rtl:mr-3">
               {{ message }}
             </p>
           </div>
diff --git a/resources/js/Components/Jetstream/ConfirmationModal.vue b/resources/js/Components/Jetstream/ConfirmationModal.vue
index 443a6d2ba..4b3c6ae3d 100644
--- a/resources/js/Components/Jetstream/ConfirmationModal.vue
+++ b/resources/js/Components/Jetstream/ConfirmationModal.vue
@@ -40,7 +40,7 @@ const close = () => {
             </svg>
           </div>
 
-          <h3 class="ml-3 text-lg">
+          <h3 class="text-lg ltr:ml-3 rtl:mr-3">
             <slot name="title" />
           </h3>
         </div>
diff --git a/resources/js/Components/Jetstream/ConfirmsPassword.vue b/resources/js/Components/Jetstream/ConfirmsPassword.vue
index 00eb56f12..4c0bbd4b0 100644
--- a/resources/js/Components/Jetstream/ConfirmsPassword.vue
+++ b/resources/js/Components/Jetstream/ConfirmsPassword.vue
@@ -106,7 +106,7 @@ const closeModal = () => {
         </JetSecondaryButton>
 
         <Button
-          class="ml-3"
+          class="ltr:ml-3 rtl:mr-3"
           :class="{ 'opacity-25': form.processing }"
           :disabled="form.processing"
           @click="confirmPassword">
diff --git a/resources/js/Components/Jetstream/SectionTitle.vue b/resources/js/Components/Jetstream/SectionTitle.vue
index 86cd777e4..0f1af80e6 100644
--- a/resources/js/Components/Jetstream/SectionTitle.vue
+++ b/resources/js/Components/Jetstream/SectionTitle.vue
@@ -15,10 +15,10 @@ defineProps({
   <div>
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span v-if="$slots.icon" class="mr-1">
+        <span v-if="$slots.icon" class="ltr:mr-1 rtl:ml-1">
           <slot name="icon" />
         </span>
-        <span class="mr-2">
+        <span class="ltr:mr-2 rtl:ml-2">
           <slot name="title" />
         </span>
 
diff --git a/resources/js/Components/Jetstream/Select.vue b/resources/js/Components/Jetstream/Select.vue
index 7e65ecb75..dc30db423 100644
--- a/resources/js/Components/Jetstream/Select.vue
+++ b/resources/js/Components/Jetstream/Select.vue
@@ -157,7 +157,8 @@ const alignmentClasses = computed(() => {
           </svg>
         </button>
       </div>
-      <div class="flex w-8 items-center border-l border-gray-200 py-1 pl-2 pr-1 text-gray-300 dark:border-gray-600">
+      <div
+        class="flex w-8 items-center border-gray-200 py-1 pl-2 pr-1 text-gray-300 ltr:border-l rtl:border-r dark:border-gray-600">
         <button
           @click.prevent="
             open = !open;
@@ -208,7 +209,7 @@ const alignmentClasses = computed(() => {
               close();
             ">
             <div
-              class="relative flex w-full items-center border-l-2 border-transparent bg-white p-2 pl-2 hover:border-teal-600 hover:bg-teal-600 hover:text-teal-100 dark:bg-gray-800 hover:dark:border-teal-400 hover:dark:bg-teal-400 hover:dark:text-teal-900">
+              class="relative flex w-full items-center border-transparent bg-white p-2 pl-2 hover:border-teal-600 hover:bg-teal-600 hover:text-teal-100 ltr:border-l-2 rtl:border-r-2 dark:bg-gray-800 hover:dark:border-teal-400 hover:dark:bg-teal-400 hover:dark:text-teal-900">
               <div class="flex w-full items-center">
                 <div class="mx-2 leading-6">
                   {{ option.name }}
diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue
index a34f6db67..2326a7491 100644
--- a/resources/js/Components/Pagination.vue
+++ b/resources/js/Components/Pagination.vue
@@ -86,7 +86,8 @@ const linkClasses =
           :class="[
             commonClasses,
             'px-2',
-            'rounded-l-md',
+            'ltr:rounded-l-md',
+            'rtl:rounded-r-md',
             'text-gray-500',
             'focus:z-10',
             'cursor-default',
@@ -107,7 +108,8 @@ const linkClasses =
             commonClasses,
             linkClasses,
             'px-2',
-            'rounded-l-md',
+            'ltr:rounded-l-md',
+            'rtl:rounded-r-md',
             'text-gray-500',
             'dark:bg-gray-900',
             'hover:text-gray-400',
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index 3c3641efe..30ef44a97 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -10,8 +10,8 @@ const props = defineProps({
 
 const classes = computed(() => {
   return props.active
-    ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition'
-    : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition';
+    ? 'block pl-3 pr-4 py-2 ltr:border-l-4 rtl:border-r-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition'
+    : 'block pl-3 pr-4 py-2 ltr:border-l-4 rtl:border-r-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition';
 });
 </script>
 
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index dcd345c92..657cfbcd5 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -42,7 +42,7 @@ const logout = () => {
 
             <div class="hidden sm:ml-6 sm:flex sm:items-center">
               <!-- Settings Dropdown -->
-              <div class="relative ml-3">
+              <div class="relative ltr:ml-3 rtl:mr-3">
                 <JetDropdown align="right" width="48">
                   <template #trigger>
                     <button
@@ -61,7 +61,7 @@ const logout = () => {
                         {{ $page.props.user.name }}
 
                         <svg
-                          class="-mr-0.5 ml-2 h-4 w-4"
+                          class="-mr-0.5 h-4 w-4 ltr:ml-2 rtl:mr-2"
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 20 20"
                           fill="currentColor">
@@ -144,7 +144,7 @@ const logout = () => {
           <!-- Responsive Settings Options -->
           <div class="border-t border-gray-200 pb-1 pt-4 dark:border-gray-800">
             <div class="flex items-center px-4">
-              <div v-if="$page.props.jetstream.managesProfilePhotos" class="mr-3 shrink-0">
+              <div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 ltr:mr-3 rtl:ml-3">
                 <img
                   class="h-10 w-10 rounded-full object-cover"
                   :src="$page.props.user.profile_photo_url"
diff --git a/resources/js/Pages/API/Index.vue b/resources/js/Pages/API/Index.vue
index 54ed15b3d..21c2c4490 100644
--- a/resources/js/Pages/API/Index.vue
+++ b/resources/js/Pages/API/Index.vue
@@ -18,15 +18,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <Link :href="route('settings.index')" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </Link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/API/Partials/ApiTokenManager.vue b/resources/js/Pages/API/Partials/ApiTokenManager.vue
index 0c61ee4fe..609017b54 100644
--- a/resources/js/Pages/API/Partials/ApiTokenManager.vue
+++ b/resources/js/Pages/API/Partials/ApiTokenManager.vue
@@ -121,7 +121,7 @@ const copyToClipboard = (token) => {
             <div v-for="permission in availablePermissions" :key="permission">
               <label class="flex items-center">
                 <JetCheckbox v-model:checked="createApiTokenForm.permissions" :value="permission" />
-                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">
+                <span class="text-sm text-gray-600 ltr:ml-2 rtl:mr-2 dark:text-gray-400">
                   {{ permission }}
                 </span>
               </label>
@@ -131,7 +131,7 @@ const copyToClipboard = (token) => {
       </template>
 
       <template #actions>
-        <JetActionMessage :on="createApiTokenForm.recentlySuccessful" class="mr-3">
+        <JetActionMessage :on="createApiTokenForm.recentlySuccessful" class="ltr:mr-3 rtl:ml-3">
           {{ $t('Created.') }}
         </JetActionMessage>
 
@@ -168,12 +168,14 @@ const copyToClipboard = (token) => {
 
                   <button
                     v-if="availablePermissions.length > 0"
-                    class="ml-6 cursor-pointer text-sm text-gray-400 underline"
+                    class="cursor-pointer text-sm text-gray-400 underline ltr:ml-6 rtl:mr-6"
                     @click="manageApiTokenPermissions(token)">
                     {{ $t('Permissions') }}
                   </button>
 
-                  <button class="ml-6 cursor-pointer text-sm text-red-500" @click="confirmApiTokenDeletion(token)">
+                  <button
+                    class="cursor-pointer text-sm text-red-500 ltr:ml-6 rtl:mr-6"
+                    @click="confirmApiTokenDeletion(token)">
                     {{ $t('Delete') }}
                   </button>
                 </div>
@@ -203,7 +205,7 @@ const copyToClipboard = (token) => {
           </div>
 
           <JetButton
-            class="ml-3"
+            class="ltr:ml-3 rtl:mr-3"
             :title="$t('Copy value into the clipboard')"
             @click.prevent="copyToClipboard($page.props.jetstream.flash.token)">
             {{ $t('Copy') }}
@@ -233,7 +235,7 @@ const copyToClipboard = (token) => {
           <div v-for="permission in availablePermissions" :key="permission">
             <label class="flex items-center">
               <JetCheckbox v-model:checked="updateApiTokenForm.permissions" :value="permission" />
-              <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">
+              <span class="text-sm text-gray-600 ltr:ml-2 rtl:mr-2 dark:text-gray-400">
                 {{ permission }}
               </span>
             </label>
@@ -247,7 +249,7 @@ const copyToClipboard = (token) => {
         </JetSecondaryButton>
 
         <JetButton
-          class="ml-3"
+          class="ltr:ml-3 rtl:mr-3"
           :class="{ 'opacity-25': updateApiTokenForm.processing }"
           :disabled="updateApiTokenForm.processing"
           @click="updateApiToken">
@@ -272,7 +274,7 @@ const copyToClipboard = (token) => {
         </JetSecondaryButton>
 
         <JetDangerButton
-          class="ml-3"
+          class="ltr:ml-3 rtl:mr-3"
           :class="{ 'opacity-25': deleteApiTokenForm.processing }"
           :disabled="deleteApiTokenForm.processing"
           @click="deleteApiToken">
diff --git a/resources/js/Pages/Auth/AcceptInvitation.vue b/resources/js/Pages/Auth/AcceptInvitation.vue
index 0b898eb30..d55db23c1 100644
--- a/resources/js/Pages/Auth/AcceptInvitation.vue
+++ b/resources/js/Pages/Auth/AcceptInvitation.vue
@@ -36,7 +36,7 @@ const submit = () => {
 
     <form @submit.prevent="submit">
       <h1 class="mb-3 text-center text-xl">
-        <span class="mr-2"> 👋 </span>
+        <span class="ltr:mr-2 rtl:ml-2"> 👋 </span>
         {{ $t('Welcome to Monica.') }}
       </h1>
       <p class="mb-4 text-center">{{ $t('Please complete this form to finalize your account.') }}'</p>
@@ -87,7 +87,7 @@ const submit = () => {
       </div>
 
       <div class="mt-4 flex items-center justify-end">
-        <JetButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+        <JetButton class="ltr:ml-4 rtl:mr-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
           {{ $t('Create account') }}
         </JetButton>
       </div>
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index 5698c2df9..7f6ab6a61 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -39,7 +39,7 @@ const submit = () => {
       </div>
 
       <div class="mt-4 flex justify-end">
-        <JetButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+        <JetButton class="ltr:ml-4 rtl:mr-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
           {{ $t('Confirm') }}
         </JetButton>
       </div>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 81a669358..de0cdd31f 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -78,8 +78,13 @@ const reload = () => {
 .auth-provider {
   width: 15px;
   height: 15px;
+}
+.ltr .auth-provider {
   margin-right: 8px;
 }
+.rtl .auth-provider {
+  margin-left: 8px;
+}
 .w-43 {
   width: 43%;
 }
@@ -94,7 +99,8 @@ const reload = () => {
     <!-- beta mode-->
     <div class="mb-4 rounded-lg border bg-amber-50 p-6">
       <p class="mb-2 text-center font-bold">
-        <span class="mr-2">🚧</span> {{ $t('Chandler is in beta.') }} <span class="ml-2">🚧</span>
+        <span class="ltr:mr-2 rtl:ml-2">🚧</span> {{ $t('Chandler is in beta.') }}
+        <span class="ltr:ml-2 rtl:mr-2">🚧</span>
       </p>
       <p class="mb-2">{{ $t('Compared to Monica:') }}</p>
       <ul class="list mb-2 pl-3">
@@ -114,7 +120,7 @@ const reload = () => {
       <div class="w-full">
         <div class="border-b border-gray-200 px-6 pb-6 pt-8 dark:border-gray-700">
           <h1 class="mb-4 text-center text-xl text-gray-800 dark:text-gray-200">
-            <span class="mr-2"> 👋 </span>
+            <span class="ltr:mr-2 rtl:ml-2"> 👋 </span>
             {{ $t('Sign in to your account') }}
           </h1>
 
@@ -134,7 +140,7 @@ const reload = () => {
 
             <WebauthnLogin :remember="true" :public-key="publicKeyRef" />
 
-            <JetSecondaryButton class="mr-2 mt-4" @click.prevent="webauthn = false">
+            <JetSecondaryButton class="mt-4 ltr:mr-2 rtl:ml-2" @click.prevent="webauthn = false">
               {{ $t('Use your password') }}
             </JetSecondaryButton>
           </div>
@@ -167,7 +173,7 @@ const reload = () => {
             <div class="mb-3 block">
               <label class="flex items-center">
                 <JetCheckbox v-model:checked="form.remember" name="remember" />
-                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">
+                <span class="text-sm text-gray-600 ltr:ml-2 rtl:mr-2 dark:text-gray-400">
                   {{ $t('Remember me') }}
                 </span>
               </label>
@@ -181,7 +187,7 @@ const reload = () => {
                 {{ $t('Forgot password?') }}
               </Link>
 
-              <PrettyButton :text="$t('Log in')" :state="loadingState" :classes="'save ml-4'" />
+              <PrettyButton :text="$t('Log in')" :state="loadingState" :classes="'save ltr:ml-4 rtl:mr-4'" />
             </div>
 
             <div class="mt-3 block">
@@ -192,10 +198,13 @@ const reload = () => {
                 <JetSecondaryButton
                   v-for="(provider, id) in providers"
                   :key="id"
-                  class="mb-2 mr-2 inline w-32 align-middle"
+                  class="mb-2 inline w-32 align-middle ltr:mr-2 rtl:ml-2"
                   :href="route('login.provider', { driver: id })"
                   @click.prevent="open(id)">
-                  <img :src="provider.logo" :alt="provider.name" class="relative mr-2 h-4 w-4 align-middle" />
+                  <img
+                    :src="provider.logo"
+                    :alt="provider.name"
+                    class="relative h-4 w-4 align-middle ltr:mr-2 rtl:ml-2" />
                   <span class="align-middle">
                     {{ provider.name }}
                   </span>
@@ -204,7 +213,7 @@ const reload = () => {
             </div>
 
             <div v-if="publicKeyRef" class="mt-3 block">
-              <JetSecondaryButton class="mr-2" @click.prevent="reload">
+              <JetSecondaryButton class="ltr:mr-2 rtl:ml-2" @click.prevent="reload">
                 {{ $t('Use your security key') }}
               </JetSecondaryButton>
             </div>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index f8221ca38..3a29f824d 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -109,7 +109,7 @@ const policy = () => {
             <JetCheckbox id="terms" v-model:checked="form.terms" name="terms" />
 
             <div
-              class="ml-2"
+              class="ltr:ml-2 rtl:mr-2"
               v-html="$t('I agree to the :terms and :policy', { terms: terms(), policy: policy() })"></div>
           </div>
         </JetLabel>
@@ -118,7 +118,8 @@ const policy = () => {
       <!-- beta mode-->
       <div class="mb-4 rounded-lg border bg-amber-50 p-6">
         <p class="mb-2 text-center font-bold">
-          <span class="mr-2">🚧</span> {{ $t('Chandler is in beta.') }} <span class="ml-2">🚧</span>
+          <span class="ltr:mr-2 rtl:ml-2">🚧</span> {{ $t('Chandler is in beta.') }}
+          <span class="ltr:ml-2 rtl:mr-2">🚧</span>
         </p>
         <p class="mb-2">{{ $t('Compared to Monica:') }}</p>
         <ul class="list mb-2 pl-3">
@@ -133,7 +134,7 @@ const policy = () => {
       </div>
 
       <div class="mt-4 flex items-center justify-end">
-        <Link :href="route('login')" class="mr-4 text-sm text-blue-500 hover:underline dark:text-gray-400">
+        <Link :href="route('login')" class="text-sm text-blue-500 hover:underline ltr:mr-4 rtl:ml-4 dark:text-gray-400">
           {{ $t('Already registered?') }}
         </Link>
 
diff --git a/resources/js/Pages/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue
index 09800395e..f8c14001b 100644
--- a/resources/js/Pages/Auth/TwoFactorChallenge.vue
+++ b/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -116,7 +116,7 @@ defineProps({
             </template>
           </button>
 
-          <JetButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+          <JetButton class="ltr:ml-4 rtl:mr-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
             {{ $t('Log in') }}
           </JetButton>
         </div>
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index 4e92e17dc..791125c75 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -60,7 +60,7 @@ const closeModal = () => {
         </p>
 
         <p class="pt-5">{{ $t('This will immediately:') }}</p>
-        <ul class="mb-2 ml-5">
+        <ul class="mb-2 ltr:ml-5 rtl:mr-5">
           <li>- {{ $t('Cancel all your active subscriptions') }},</li>
           <li>- {{ $t('Delete your account on https://customers.monicahq.com.') }}</li>
         </ul>
@@ -108,7 +108,7 @@ const closeModal = () => {
           </JetSecondaryButton>
 
           <JetDangerButton
-            class="ml-3"
+            class="ltr:ml-3 rtl:mr-3"
             :class="{ 'opacity-25': form.processing }"
             :disabled="form.processing"
             @click="deleteUser">
diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
index 2a892346a..8676eb251 100644
--- a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -94,7 +94,7 @@ const closeModal = () => {
             </svg>
           </div>
 
-          <div class="ml-3">
+          <div class="ltr:ml-3 rtl:mr-3">
             <div class="text-sm text-gray-600 dark:text-gray-400">
               {{ session.agent.platform ? session.agent.platform : $t('Unknown') }} -
               {{ session.agent.browser ? session.agent.browser : $t('Unknown') }}
@@ -121,7 +121,7 @@ const closeModal = () => {
           {{ $t('Log Out Other Browser Sessions') }}
         </JetButton>
 
-        <JetActionMessage :on="form.recentlySuccessful" class="ml-3">
+        <JetActionMessage :on="form.recentlySuccessful" class="ltr:ml-3 rtl:mr-3">
           {{ $t('Done.') }}
         </JetActionMessage>
       </div>
@@ -158,7 +158,7 @@ const closeModal = () => {
           </JetSecondaryButton>
 
           <JetButton
-            class="ml-3"
+            class="ltr:ml-3 rtl:mr-3"
             :class="{ 'opacity-25': form.processing }"
             :disabled="form.processing"
             @click="logoutOtherBrowserSessions">
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index 788f80ec9..654fa0aae 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -210,7 +210,7 @@ const disableTwoFactorAuthentication = () => {
             <JetButton
               v-if="confirming"
               type="button"
-              class="mr-3"
+              class="ltr:mr-3 rtl:ml-3"
               :class="{ 'opacity-25': enabling }"
               :disabled="enabling">
               {{ $t('Confirm') }}
@@ -218,13 +218,13 @@ const disableTwoFactorAuthentication = () => {
           </JetConfirmsPassword>
 
           <JetConfirmsPassword @confirmed="regenerateRecoveryCodes">
-            <JetSecondaryButton v-if="recoveryCodes.length > 0 && !confirming" class="mr-3">
+            <JetSecondaryButton v-if="recoveryCodes.length > 0 && !confirming" class="ltr:mr-3 rtl:ml-3">
               {{ $t('Regenerate Recovery Codes') }}
             </JetSecondaryButton>
           </JetConfirmsPassword>
 
           <JetConfirmsPassword @confirmed="showRecoveryCodes">
-            <JetSecondaryButton v-if="recoveryCodes.length === 0 && !confirming" class="mr-3">
+            <JetSecondaryButton v-if="recoveryCodes.length === 0 && !confirming" class="ltr:mr-3 rtl:ml-3">
               {{ $t('Show Recovery Codes') }}
             </JetSecondaryButton>
           </JetConfirmsPassword>
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
index 50cca5a03..68ce2cc30 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -85,7 +85,7 @@ const updatePassword = () => {
     </template>
 
     <template #actions>
-      <JetActionMessage :on="form.recentlySuccessful" class="mr-3">
+      <JetActionMessage :on="form.recentlySuccessful" class="ltr:mr-3 rtl:ml-3">
         {{ $t('Saved.') }}
       </JetActionMessage>
 
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index db4c35680..668fa79f2 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -104,7 +104,7 @@ const clearPhotoFileInput = () => {
             :style="'background-image: url(\'' + photoPreview + '\');'" />
         </div>
 
-        <JetSecondaryButton class="mr-2 mt-2" type="button" @click.prevent="selectNewPhoto">
+        <JetSecondaryButton class="mt-2 ltr:mr-2 rtl:ml-2" type="button" @click.prevent="selectNewPhoto">
           {{ $t('Select A New Photo') }}
         </JetSecondaryButton>
 
@@ -148,7 +148,7 @@ const clearPhotoFileInput = () => {
     </template>
 
     <template #actions>
-      <JetActionMessage :on="form.recentlySuccessful" class="mr-3">
+      <JetActionMessage :on="form.recentlySuccessful" class="ltr:mr-3 rtl:ml-3">
         {{ $t('Saved.') }}
       </JetActionMessage>
 
diff --git a/resources/js/Pages/Profile/Partials/UpdateProviders.vue b/resources/js/Pages/Profile/Partials/UpdateProviders.vue
index 3c6e50843..95dae655a 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProviders.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProviders.vue
@@ -41,9 +41,14 @@ defineProps({
 .auth-provider {
   width: 15px;
   height: 15px;
-  margin-right: 8px;
   top: 2px;
 }
+.ltr .auth-provider {
+  margin-right: 8px;
+}
+.rtl .auth-provider {
+  margin-left: 8px;
+}
 </style>
 
 <template>
@@ -64,7 +69,7 @@ defineProps({
       <div class="mt-5 space-y-6">
         <div v-for="(provider, id) in providers" :key="id" class="flex items-center">
           <img :src="provider.logo" :alt="provider.name" class="auth-provider relative" />
-          <span class="mr-3 text-sm text-gray-600 dark:text-gray-400">
+          <span class="text-sm text-gray-600 ltr:mr-3 rtl:ml-3 dark:text-gray-400">
             {{ provider.name }}
           </span>
 
@@ -72,7 +77,7 @@ defineProps({
             <span class="text-sm text-green-600 dark:text-green-400">
               {{ $t('Connected') }}
             </span>
-            <JetSecondaryButton class="ml-3" @click.prevent="deleteProvider(id)">
+            <JetSecondaryButton class="ltr:ml-3 rtl:mr-3" @click.prevent="deleteProvider(id)">
               {{ $t('Disconnect') }}
             </JetSecondaryButton>
 
@@ -80,7 +85,7 @@ defineProps({
           </template>
 
           <template v-else>
-            <JetButton class="ml-3" @click.prevent="open(id)">
+            <JetButton class="ltr:ml-3 rtl:mr-3" @click.prevent="open(id)">
               {{ $t('Connect') }}
             </JetButton>
 
diff --git a/resources/js/Pages/Settings/CancelAccount/Index.vue b/resources/js/Pages/Settings/CancelAccount/Index.vue
index 08edc3a4d..b60e6ddd2 100644
--- a/resources/js/Pages/Settings/CancelAccount/Index.vue
+++ b/resources/js/Pages/Settings/CancelAccount/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Settings/Index.vue b/resources/js/Pages/Settings/Index.vue
index 843cd187f..ece6f31c3 100644
--- a/resources/js/Pages/Settings/Index.vue
+++ b/resources/js/Pages/Settings/Index.vue
@@ -14,7 +14,7 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               {{ $t('You are here:') }}
             </li>
             <li class="inline">
@@ -35,25 +35,25 @@ defineProps({
         <div class="mb-12 rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
           <ul>
             <li class="mb-2 flex justify-start">
-              <span class="mr-2">🥳</span>
+              <span class="ltr:mr-2 rtl:ml-2">🥳</span>
               <Link :href="data.url.preferences.index" class="text-blue-500 hover:underline">
                 {{ $t('User preferences') }}
               </Link>
             </li>
             <li class="mb-2 flex justify-start">
-              <span class="mr-2">📡</span>
+              <span class="ltr:mr-2 rtl:ml-2">📡</span>
               <Link :href="data.url.notifications.index" class="text-blue-500 hover:underline">
                 {{ $t('Notification channels') }}
               </Link>
             </li>
             <li class="mb-2 flex justify-start">
-              <span class="mr-2">🔐</span>
+              <span class="ltr:mr-2 rtl:ml-2">🔐</span>
               <Link :href="route('profile.show')" class="text-blue-500 hover:underline">
                 {{ $t('Profile and security') }}
               </Link>
             </li>
             <li class="flex justify-start">
-              <span class="mr-2">⚓</span>
+              <span class="ltr:mr-2 rtl:ml-2">⚓</span>
               <Link :href="route('api-tokens.index')" class="text-blue-500 hover:underline">
                 {{ $t('API Tokens') }}
               </Link>
@@ -69,25 +69,25 @@ defineProps({
           <div class="mb-6 rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
             <ul>
               <li class="mb-2 flex justify-start">
-                <span class="mr-2">😀</span>
+                <span class="ltr:mr-2 rtl:ml-2">😀</span>
                 <Link :href="data.url.users.index" class="text-blue-500 hover:underline">
                   {{ $t('Manage users') }}
                 </Link>
               </li>
               <li class="mb-2 flex justify-start">
-                <span class="mr-2">🎃</span>
+                <span class="ltr:mr-2 rtl:ml-2">🎃</span>
                 <Link :href="data.url.personalize.index" class="text-blue-500 hover:underline">
                   {{ $t('Personalize your account') }}
                 </Link>
               </li>
               <li class="mb-2 flex justify-start">
-                <span class="mr-2">📸</span>
+                <span class="ltr:mr-2 rtl:ml-2">📸</span>
                 <Link :href="data.url.storage.index" class="text-blue-500 hover:underline">
                   {{ $t('Manage storage') }}
                 </Link>
               </li>
               <li class="flex justify-start">
-                <span class="mr-2">💩</span>
+                <span class="ltr:mr-2 rtl:ml-2">💩</span>
                 <Link :href="data.url.cancel.index" class="text-blue-500 hover:underline">
                   {{ $t('Cancel your account') }}
                 </Link>
diff --git a/resources/js/Pages/Settings/Notifications/Index.vue b/resources/js/Pages/Settings/Notifications/Index.vue
index 1712ae0ce..2639c0e95 100644
--- a/resources/js/Pages/Settings/Notifications/Index.vue
+++ b/resources/js/Pages/Settings/Notifications/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -36,7 +36,7 @@
         <!-- title + cta -->
         <div class="mb-3 mt-8 sm:mt-0">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 🛰️ </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🛰️ </span>
             {{ $t('Configure how we should notify you') }}
           </h3>
         </div>
diff --git a/resources/js/Pages/Settings/Notifications/Logs/Index.vue b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
index cc3588c3d..e471ba8ea 100644
--- a/resources/js/Pages/Settings/Notifications/Logs/Index.vue
+++ b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.channels" class="text-blue-500 hover:underline">
                 {{ $t('Notification channels') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -54,7 +54,7 @@
             {{ $t('History of the notification sent') }}
           </h3>
           <ul class="bulleted-list text-center">
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <span class="text-gray-500">{{ $t('Type:') }}</span>
               {{ data.channel.type }}
             </li>
@@ -98,7 +98,7 @@
             v-for="notification in data.notifications"
             :key="notification.id"
             class="item-list border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
-            <span class="mr-2 text-sm text-gray-500">{{ notification.sent_at }}</span>
+            <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ notification.sent_at }}</span>
             <span>{{ notification.subject_line }}</span>
           </li>
         </ul>
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
index 4c49657ea..abd2cb7f1 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
@@ -52,37 +52,23 @@
           {{ $t('At which time should we send the notification, when the reminder occurs?') }}
         </p>
         <div class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
-          <span class="mr-2">
+          <span class="ltr:mr-2 rtl:ml-2">
             {{ $t('At') }}
           </span>
 
-          <select
-            v-model="form.hours"
-            class="mr-1 rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
-            :required="required">
-            <option v-for="n in 24" :key="n" :value="n - 1">
-              {{ String(n - 1).padStart(2, '0') }}
-            </option>
-          </select>
-
-          <span class="mr-2"> h: </span>
-
-          <select
-            v-model="form.minutes"
-            class="mr-1 rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
-            :required="required">
-            <option v-for="n in 12" :key="n" :value="(n - 1) * 5">
-              {{ String((n - 1) * 5).padStart(2, '0') }}
-            </option>
-          </select>
-
-          <span>m</span>
+          <Dropdown v-model="form.hours" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="hours" />
+
+          <span class="ltr:mr-2 rtl:ml-2">{{ $t('h:') }}</span>
+
+          <Dropdown v-model="form.minutes" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="minutes" />
+
+          <span>{{ $t('m') }}</span>
         </div>
       </div>
 
       <div class="border-b border-gray-200 p-5 dark:border-gray-700">
         <p class="flex">
-          <span class="mr-2">⚠️</span>
+          <span class="ltr:mr-2 rtl:ml-2">⚠️</span>
           {{
             $t(
               'We’ll send an email to this email address that you will need to confirm before we can send notifications to this address.',
@@ -109,7 +95,7 @@
           <a-tooltip v-if="email.verified_at" placement="topLeft" title="Verified" arrow-point-at-center>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="mr-2 inline h-4 w-4 text-green-600"
+              class="inline h-4 w-4 text-green-600 ltr:mr-2 rtl:ml-2"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
@@ -124,8 +110,8 @@
           <!-- email address + label -->
           <div>
             <span class="mb-0 block">{{ email.content }}</span>
-            <ul class="bulleted-list mr-2 text-sm text-gray-500">
-              <li v-if="email.label" class="mr-1 inline">
+            <ul class="bulleted-list text-sm text-gray-500 ltr:mr-2 rtl:ml-2">
+              <li v-if="email.label" class="inline ltr:mr-1 rtl:ml-1">
                 {{ email.label }}
               </li>
               <li class="inline">
@@ -140,13 +126,13 @@
           <!-- activate/deactivate -->
           <li
             v-if="email.active"
-            class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+            class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
             @click="toggle(email)">
             {{ $t('Deactivate') }}
           </li>
           <li
             v-if="!email.active"
-            class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+            class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
             @click="toggle(email)">
             {{ $t('Activate') }}
           </li>
@@ -154,18 +140,18 @@
           <!-- link to send a test email, if not already sent -->
           <li
             v-if="testEmailSentId != email.id"
-            class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+            class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
             @click="sendTest(email)">
             {{ $t('Send test') }}
           </li>
 
           <!-- text saying that the email has been sent -->
-          <li v-if="testEmailSentId == email.id" class="mr-4 inline">
+          <li v-if="testEmailSentId == email.id" class="inline ltr:mr-4 rtl:ml-4">
             {{ $t('Test email sent!') }}
           </li>
 
           <!-- view log -->
-          <li class="mr-4 inline cursor-pointer text-blue-500 hover:underline">
+          <li class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4">
             <inertia-link :href="email.url.logs" class="text-blue-500 hover:underline">
               {{ $t('View log') }}
             </inertia-link>
@@ -179,7 +165,7 @@
 
         <!-- actions when the email has NOT been verified -->
         <ul v-else class="text-sm">
-          <li class="mr-4 inline">
+          <li class="inline ltr:mr-4 rtl:ml-4">
             {{ $t('Verification email sent') }}
           </li>
 
@@ -206,6 +192,7 @@ import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import Errors from '@/Shared/Form/Errors.vue';
+import Dropdown from '@/Shared/Form/Dropdown.vue';
 
 export default {
   components: {
@@ -214,6 +201,7 @@ export default {
     PrettySpan,
     TextInput,
     Errors,
+    Dropdown,
   },
 
   props: {
@@ -245,6 +233,25 @@ export default {
     this.form.minutes = '00';
   },
 
+  computed: {
+    hours() {
+      let result = [];
+      for (let i = 0; i < 24; i++) {
+        let name = i.toString().padStart(2, '0');
+        result.push({ id: i, name: name });
+      }
+      return result;
+    },
+    minutes() {
+      let result = [];
+      for (let i = 0; i < 60; i += 5) {
+        let name = i.toString().padStart(2, '0');
+        result.push({ id: i, name: name });
+      }
+      return result;
+    },
+  },
+
   methods: {
     showAddEmailModal() {
       this.form.label = '';
@@ -332,10 +339,4 @@ export default {
     border-bottom-right-radius: 8px;
   }
 }
-
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
 </style>
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
index 8e873941d..81b7b5e7c 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
@@ -25,37 +25,23 @@
           {{ $t('At which time should we send the notification, when the reminder occurs?') }}
         </p>
         <div class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
-          <span class="mr-2">
+          <span class="ltr:mr-2 rtl:ml-2">
             {{ $t('At') }}
           </span>
 
-          <select
-            v-model="form.hours"
-            class="mr-1 rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
-            :required="required">
-            <option v-for="n in 24" :key="n" :value="n - 1">
-              {{ String(n - 1).padStart(2, '0') }}
-            </option>
-          </select>
-
-          <span class="mr-2"> h: </span>
-
-          <select
-            v-model="form.minutes"
-            class="mr-1 rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
-            :required="required">
-            <option v-for="n in 12" :key="n" :value="(n - 1) * 5">
-              {{ String((n - 1) * 5).padStart(2, '0') }}
-            </option>
-          </select>
-
-          <span>m</span>
+          <Dropdown v-model="form.hours" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="hours" />
+
+          <span class="ltr:mr-2 rtl:ml-2">{{ $t('h:') }}</span>
+
+          <Dropdown v-model="form.minutes" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="minutes" />
+
+          <span>{{ $t('m') }}</span>
         </div>
       </div>
 
       <div class="border-b border-gray-200 p-5 dark:border-gray-700">
-        <p class="mb-4 font-semibold"><span class="mr-1">👋</span> {{ $t('What happens now?') }}</p>
-        <ol class="ml-4 list-decimal">
+        <p class="mb-4 font-semibold"><span class="ltr:mr-1 rtl:ml-1">👋</span> {{ $t('What happens now?') }}</p>
+        <ol class="list-decimal ltr:ml-4 rtl:mr-4">
           <li class="mb-2">
             {{
               $t(
@@ -99,7 +85,7 @@
             <a-tooltip v-if="localTelegram.active" placement="topLeft" title="Verified" arrow-point-at-center>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="mr-2 inline h-4 w-4 text-green-600"
+                class="inline h-4 w-4 text-green-600 ltr:mr-2 rtl:ml-2"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor">
@@ -119,7 +105,7 @@
 
           <!-- actions when Telegram is not active -->
           <ul v-if="!localTelegram.active" class="text-sm">
-            <li class="mr-4 inline">
+            <li class="inline ltr:mr-4 rtl:ml-4">
               <a :href="localTelegram.url.open" target="_blank" class="text-blue-500 hover:underline">{{
                 $t('Open Telegram to validate your identity')
               }}</a>
@@ -135,16 +121,16 @@
             <!-- link to send a test notification, if not already sent -->
             <li
               v-if="!notificationSent"
-              class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+              class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
               @click="sendTest">
               {{ $t('Send test') }}
             </li>
-            <li v-if="notificationSent" class="mr-4 inline">
+            <li v-if="notificationSent" class="inline ltr:mr-4 rtl:ml-4">
               {{ $t('Notification sent') }}
             </li>
 
             <!-- view log -->
-            <li class="mr-4 inline cursor-pointer text-blue-500 hover:underline">
+            <li class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4">
               <inertia-link :href="localTelegram.url.logs" class="text-blue-500 hover:underline">
                 {{ $t('View log') }}
               </inertia-link>
@@ -173,6 +159,7 @@ import { Tooltip as ATooltip } from 'ant-design-vue';
 import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import Errors from '@/Shared/Form/Errors.vue';
+import Dropdown from '@/Shared/Form/Dropdown.vue';
 
 export default {
   components: {
@@ -180,6 +167,7 @@ export default {
     PrettyButton,
     PrettySpan,
     Errors,
+    Dropdown,
   },
 
   props: {
@@ -214,6 +202,25 @@ export default {
     this.form.minutes = '00';
   },
 
+  computed: {
+    hours() {
+      let result = [];
+      for (let i = 0; i < 24; i++) {
+        let name = i.toString().padStart(2, '0');
+        result.push({ id: i, name: name });
+      }
+      return result;
+    },
+    minutes() {
+      let result = [];
+      for (let i = 0; i < 60; i += 5) {
+        let name = i.toString().padStart(2, '0');
+        result.push({ id: i, name: name });
+      }
+      return result;
+    },
+  },
+
   methods: {
     showSetupTelegramModal() {
       this.form.label = '';
@@ -295,10 +302,4 @@ export default {
     border-bottom-right-radius: 8px;
   }
 }
-
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
 </style>
diff --git a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
index fefb6c5b0..b764d7b66 100644
--- a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 🏖 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🏖 </span>
             {{ $t('All the address types') }}
           </h3>
           <pretty-button
@@ -102,7 +102,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @click="updateAdressTypeModal(addressType)">
+                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateAdressTypeModal(addressType)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(addressType)">
diff --git a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
index 5bf17979d..452d5b45e 100644
--- a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 📲 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 📲 </span>
             {{ $t('All the call reasons') }}
           </h3>
           <pretty-button
@@ -123,7 +123,7 @@
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li
-                  class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                   @click="destroyCallReasonType(callReasonType)">
                   {{ $t('Delete') }}
                 </li>
@@ -175,7 +175,7 @@
                     <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                   </li>
                   <li
-                    class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                     @click="destroyReason(callReasonType, reason)">
                     {{ $t('Delete') }}
                   </li>
diff --git a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
index 36e084e49..b6bb87265 100644
--- a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -51,7 +51,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> ☎️ </span>
+            <span class="ltr:mr-1 rtl:ml-1"> ☎️ </span>
             {{ $t('All the contact information types') }}
           </h3>
           <pretty-button
@@ -121,7 +121,7 @@
               class="flex items-center justify-between px-5 py-2">
               <div>
                 <span class="text-base">{{ contactInformationType.name }}</span>
-                <code v-if="contactInformationType.protocol" class="code ml-3 text-xs"
+                <code v-if="contactInformationType.protocol" class="code text-xs ltr:ml-3 rtl:mr-3"
                   >[{{
                     $t('Protocol: :name', {
                       name: contactInformationType.protocol,
@@ -139,7 +139,7 @@
                 </li>
                 <li
                   v-if="contactInformationType.can_be_deleted"
-                  class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                   @click="destroy(contactInformationType)">
                   {{ $t('Delete') }}
                 </li>
diff --git a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
index 56cda1e68..bc2a88fab 100644
--- a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 💵 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 💵 </span>
             {{ $t('All the currencies') }}
           </h3>
         </div>
@@ -79,7 +79,7 @@
 
         <div class="mb-3 text-right">
           <ul>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <span class="inline cursor-pointer text-blue-500 hover:underline" @click="enableAll">
                 {{ $t('Enable all') }}
               </span>
@@ -102,20 +102,23 @@
             class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <div class="flex justify-between px-3 py-2" :class="!currency.active ? 'bg-slate-200' : ''">
               <div>
-                <span class="mr-2 text-sm text-gray-500">{{ currency.code }}</span>
+                <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ currency.code }}</span>
                 <span>{{ currency.name }}</span>
               </div>
 
               <!-- enable -->
               <span
                 v-if="!currency.active"
-                class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
                 @click="update(currency)">
                 {{ $t('Enable') }}
               </span>
 
               <!-- disable -->
-              <span v-else class="mr-4 inline cursor-pointer text-blue-500 hover:underline" @click="update(currency)">
+              <span
+                v-else
+                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+                @click="update(currency)">
                 {{ $t('Disable') }}
               </span>
             </div>
diff --git a/resources/js/Pages/Settings/Personalize/Genders/Index.vue b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
index 9737de612..eb3b5cf82 100644
--- a/resources/js/Pages/Settings/Personalize/Genders/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 🚻 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🚻 </span>
             {{ $t('All the genders') }}
           </h3>
           <pretty-button
@@ -100,7 +100,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @click="updateGenderModal(gender)">
+                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateGenderModal(gender)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(gender)">
diff --git a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
index 8e4f236a0..be1b00e67 100644
--- a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 🎁 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🎁 </span>
             {{ $t('All the gift occasions') }}
           </h3>
           <pretty-button
@@ -101,9 +101,9 @@
                 v-if="editGiftOccasionId != element.id"
                 class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- icon to move position -->
-                <div class="mr-2 flex">
+                <div class="flex ltr:mr-2 rtl:ml-2">
                   <svg
-                    class="handle mr-2 cursor-move"
+                    class="handle cursor-move ltr:mr-2 rtl:ml-2"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -128,7 +128,9 @@
                   <li class="inline cursor-pointer" @click="renameGiftOccasionModal(element)">
                     <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                   </li>
-                  <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
+                  <li
+                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                    @click="destroy(element)">
                     {{ $t('Delete') }}
                   </li>
                 </ul>
diff --git a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
index 5e253d450..3ca1709a0 100644
--- a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 🎁 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🎁 </span>
             {{ $t('All the gift states') }}
           </h3>
           <pretty-button
@@ -99,9 +99,9 @@
                 <div
                   class="item-list mb-2 flex items-center justify-between rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                   <!-- icon to move position -->
-                  <div class="mr-2 flex">
+                  <div class="flex ltr:mr-2 rtl:ml-2">
                     <svg
-                      class="handle mr-2 cursor-move"
+                      class="handle cursor-move ltr:mr-2 rtl:ml-2"
                       width="24"
                       height="24"
                       viewBox="0 0 24 24"
@@ -126,13 +126,15 @@
                     <li class="inline cursor-pointer" @click="renameGiftStateModal(element)">
                       <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                     </li>
-                    <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
+                    <li
+                      class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                      @click="destroy(element)">
                       {{ $t('Delete') }}
                     </li>
                   </ul>
                 </div>
 
-                <div class="state-list-icon mb-3 ml-3">👇</div>
+                <div class="state-list-icon mb-3 ltr:ml-3 rtl:mr-3">👇</div>
               </div>
 
               <form
diff --git a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
index 2770dab31..0a42e77c5 100644
--- a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 👥 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 👥 </span>
             {{ $t('All the group types') }}
           </h3>
           <pretty-button
@@ -126,9 +126,9 @@
                   class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                   <div class="mb-3 flex items-center justify-between">
                     <!-- icon to move position -->
-                    <div class="mr-2 flex">
+                    <div class="flex ltr:mr-2 rtl:ml-2">
                       <svg
-                        class="handle mr-2 cursor-move"
+                        class="handle cursor-move ltr:mr-2 rtl:ml-2"
                         width="24"
                         height="24"
                         viewBox="0 0 24 24"
@@ -153,14 +153,16 @@
                       <li class="inline cursor-pointer" @click="renameGroupTypeModal(element)">
                         <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                       </li>
-                      <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
+                      <li
+                        class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                        @click="destroy(element)">
                         {{ $t('Delete') }}
                       </li>
                     </ul>
                   </div>
 
                   <!-- available roles -->
-                  <div class="ml-8">
+                  <div class="ltr:ml-8 rtl:mr-8">
                     <p class="mb-1 text-sm text-gray-500">{{ $t('Roles:') }}</p>
 
                     <draggable
@@ -175,9 +177,9 @@
                             class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                             <div class="flex items-center justify-between">
                               <!-- icon to move position -->
-                              <div class="mr-2 flex">
+                              <div class="flex ltr:mr-2 rtl:ml-2">
                                 <svg
-                                  class="handle mr-2 cursor-move"
+                                  class="handle cursor-move ltr:mr-2 rtl:ml-2"
                                   width="24"
                                   height="24"
                                   viewBox="0 0 24 24"
@@ -203,7 +205,7 @@
                                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                                 </li>
                                 <li
-                                  class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                                   @click="destroyRole(element)">
                                   {{ $t('Delete') }}
                                 </li>
diff --git a/resources/js/Pages/Settings/Personalize/Index.vue b/resources/js/Pages/Settings/Personalize/Index.vue
index 36cf73b00..0db5fd80e 100644
--- a/resources/js/Pages/Settings/Personalize/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -39,91 +39,91 @@
         <div class="rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
           <ul>
             <li class="mb-2 flex">
-              <span class="mr-2">📐</span>
+              <span class="ltr:mr-2 rtl:ml-2">📐</span>
               <inertia-link :href="data.url.manage_templates" class="text-blue-500 hover:underline">
                 {{ $t('Manage templates') }}
               </inertia-link>
             </li>
             <!-- <li class="mb-2 flex">
-              <span class="mr-2">🥪</span>
+              <span class="ltr:mr-2 rtl:ml-2">🥪</span>
               <inertia-link :href="data.url.manage_modules" class="text-blue-500 hover:underline">
                 {{ $t('Manage modules') }}
               </inertia-link>
             </li> -->
             <li class="mb-2 flex">
-              <span class="mr-2">👥</span>
+              <span class="ltr:mr-2 rtl:ml-2">👥</span>
               <inertia-link :href="data.url.manage_relationships" class="text-blue-500 hover:underline">
                 {{ $t('Manage relationship types') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">👥</span>
+              <span class="ltr:mr-2 rtl:ml-2">👥</span>
               <inertia-link :href="data.url.manage_group_types" class="text-blue-500 hover:underline">
                 {{ $t('Manage group types') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">👩‍🔬</span>
+              <span class="ltr:mr-2 rtl:ml-2">👩‍🔬</span>
               <inertia-link :href="data.url.manage_pronouns" class="text-blue-500 hover:underline">
                 {{ $t('Manage pronouns') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">🚻</span>
+              <span class="ltr:mr-2 rtl:ml-2">🚻</span>
               <inertia-link :href="data.url.manage_genders" class="text-blue-500 hover:underline">
                 {{ $t('Manage genders') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">🏖</span>
+              <span class="ltr:mr-2 rtl:ml-2">🏖</span>
               <inertia-link :href="data.url.manage_address_types" class="text-blue-500 hover:underline">
                 {{ $t('Manage address types') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">☎️</span>
+              <span class="ltr:mr-2 rtl:ml-2">☎️</span>
               <inertia-link :href="data.url.manage_contact_information_types" class="text-blue-500 hover:underline">
                 {{ $t('Manage contact information types') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">📲</span>
+              <span class="ltr:mr-2 rtl:ml-2">📲</span>
               <inertia-link :href="data.url.manage_call_reasons" class="text-blue-500 hover:underline">
                 {{ $t('Manage call reasons') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">🐱</span>
+              <span class="ltr:mr-2 rtl:ml-2">🐱</span>
               <inertia-link :href="data.url.manage_pet_categories" class="text-blue-500 hover:underline">
                 {{ $t('Manage pet categories') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">🎁</span>
+              <span class="ltr:mr-2 rtl:ml-2">🎁</span>
               <inertia-link :href="data.url.manage_gift_occasions" class="text-blue-500 hover:underline">
                 {{ $t('Manage gift occasions') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">🎁</span>
+              <span class="ltr:mr-2 rtl:ml-2">🎁</span>
               <inertia-link :href="data.url.manage_gift_states" class="text-blue-500 hover:underline">
                 {{ $t('Manage gift states') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">📮</span>
+              <span class="ltr:mr-2 rtl:ml-2">📮</span>
               <inertia-link :href="data.url.manage_post_templates" class="text-blue-500 hover:underline">
                 {{ $t('Manage post templates') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="mr-2">💵</span>
+              <span class="ltr:mr-2 rtl:ml-2">💵</span>
               <inertia-link :href="data.url.manage_currencies" class="text-blue-500 hover:underline">
                 {{ $t('Manage currencies') }}
               </inertia-link>
             </li>
             <li class="flex">
-              <span class="mr-2">⛪</span>
+              <span class="ltr:mr-2 rtl:ml-2">⛪</span>
               <inertia-link :href="data.url.manage_religions" class="text-blue-500 hover:underline">
                 {{ $t('Manage religions') }}
               </inertia-link>
diff --git a/resources/js/Pages/Settings/Personalize/Modules/Index.vue b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
index 87674e259..77edce083 100644
--- a/resources/js/Pages/Settings/Personalize/Modules/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -87,7 +87,7 @@
             <div>
               <!-- search a module -->
               <div
-                class="module-list rounded-t-md border-l border-r border-t border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+                class="module-list rounded-t-md border-t border-gray-200 px-3 py-2 hover:bg-slate-50 ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <text-input
                   v-model="form.search"
                   :type="'text'"
@@ -144,9 +144,9 @@
                   <!-- row options -->
                   <div class="flex justify-between border-b border-gray-200 px-3 py-1 text-xs dark:border-gray-700">
                     <div>
-                      <div class="relative mr-3 inline cursor-pointer">
+                      <div class="relative inline cursor-pointer ltr:mr-3 rtl:ml-3">
                         <svg
-                          class="mr-1 inline h-3 w-3"
+                          class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
                           viewBox="0 0 24 24"
                           fill="none"
                           xmlns="http://www.w3.org/2000/svg">
@@ -162,9 +162,9 @@
                         <span>Add a field to the left</span>
                       </div>
 
-                      <div class="relative mr-2 inline cursor-pointer" @click="addFieldToRight(row)">
+                      <div class="relative inline cursor-pointer ltr:mr-2 rtl:ml-2" @click="addFieldToRight(row)">
                         <svg
-                          class="mr-1 inline h-3 w-3"
+                          class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
                           viewBox="0 0 24 24"
                           fill="none"
                           xmlns="http://www.w3.org/2000/svg">
@@ -183,7 +183,7 @@
 
                     <div class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroyRow(row)">
                       <svg
-                        class="mr-1 inline h-3 w-3"
+                        class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
                         viewBox="0 0 24 24"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg">
@@ -205,13 +205,13 @@
                     <div
                       v-for="field in row.fields"
                       :key="field.id"
-                      class="border-r border-gray-200 last:border-r-0 dark:border-gray-700">
+                      class="border-gray-200 last:border-r-0 ltr:border-r rtl:border-l dark:border-gray-700">
                       <!-- row options -->
                       <div class="flex justify-between border-b border-gray-200 px-3 py-1 text-xs dark:border-gray-700">
                         <div>
-                          <div class="relative mr-3 inline cursor-pointer">
+                          <div class="relative inline cursor-pointer ltr:mr-3 rtl:ml-3">
                             <svg
-                              class="mr-1 inline h-3 w-3"
+                              class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
                               viewBox="0 0 24 24"
                               fill="none"
                               xmlns="http://www.w3.org/2000/svg">
@@ -230,7 +230,7 @@
 
                         <div class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroyRow(row)">
                           <svg
-                            class="mr-1 inline h-3 w-3"
+                            class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
                             viewBox="0 0 24 24"
                             fill="none"
                             xmlns="http://www.w3.org/2000/svg">
diff --git a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
index ae0abb2ef..d1d6b81bd 100644
--- a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 🐱 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🐱 </span>
             {{ $t('All the pet categories') }}
           </h3>
           <pretty-button
@@ -102,7 +102,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @click="updatePetCategoryModal(petCategory)">
+                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updatePetCategoryModal(petCategory)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(petCategory)">
diff --git a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
index 6ff586523..667b4b998 100644
--- a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 📮 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 📮 </span>
             {{ $t('Post templates') }}
           </h3>
           <pretty-button
@@ -126,9 +126,9 @@
                   class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                   <div class="mb-3 flex items-center justify-between">
                     <!-- icon to move position -->
-                    <div class="mr-2 flex">
+                    <div class="flex ltr:mr-2 rtl:ml-2">
                       <svg
-                        class="handle mr-2 cursor-move"
+                        class="handle cursor-move ltr:mr-2 rtl:ml-2"
                         width="24"
                         height="24"
                         viewBox="0 0 24 24"
@@ -155,7 +155,7 @@
                       </li>
                       <li
                         v-if="element.can_be_deleted"
-                        class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                        class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                         @click="destroy(element)">
                         {{ $t('Delete') }}
                       </li>
@@ -163,7 +163,7 @@
                   </div>
 
                   <!-- available sections -->
-                  <div class="ml-8">
+                  <div class="ltr:ml-8 rtl:mr-8">
                     <p class="mb-1 text-sm text-gray-500">Sections:</p>
 
                     <draggable
@@ -178,9 +178,9 @@
                             class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                             <div class="flex items-center justify-between">
                               <!-- icon to move position -->
-                              <div class="mr-2 flex">
+                              <div class="flex ltr:mr-2 rtl:ml-2">
                                 <svg
-                                  class="handle mr-2 cursor-move"
+                                  class="handle cursor-move ltr:mr-2 rtl:ml-2"
                                   width="24"
                                   height="24"
                                   viewBox="0 0 24 24"
@@ -209,7 +209,7 @@
                                 </li>
                                 <li
                                   v-if="element.can_be_deleted"
-                                  class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                                   @click="destroySection(element)">
                                   {{ $t('Delete') }}
                                 </li>
diff --git a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
index 9aad01a27..4cecb58dd 100644
--- a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 🚻 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🚻 </span>
             {{ $t('All the pronouns') }}
           </h3>
           <pretty-button
@@ -100,7 +100,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @click="updatePronounModal(pronoun)">
+                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updatePronounModal(pronoun)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(pronoun)">
diff --git a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
index d4d0d2366..365c95d53 100644
--- a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -51,7 +51,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 🥸 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🥸 </span>
             {{ $t('All the relationship types') }}
           </h3>
           <pretty-button
@@ -146,7 +146,7 @@
                 </li>
                 <li
                   v-if="groupType.can_be_deleted"
-                  class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                   @click="destroyGroupType(groupType)">
                   {{ $t('Delete') }}
                 </li>
@@ -218,7 +218,7 @@
                   </li>
                   <li
                     v-if="type.can_be_deleted"
-                    class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                     @click="destroyRelationshipType(groupType, type)">
                     {{ $t('Delete') }}
                   </li>
diff --git a/resources/js/Pages/Settings/Personalize/Religions/Index.vue b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
index c4042f7d4..533c7069a 100644
--- a/resources/js/Pages/Settings/Personalize/Religions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> ⛪ </span>
+            <span class="ltr:mr-1 rtl:ml-1"> ⛪ </span>
             {{ $t('All the religions') }}
           </h3>
           <pretty-button
@@ -101,9 +101,9 @@
                 v-if="editReligionId != element.id"
                 class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- icon to move position -->
-                <div class="mr-2 flex">
+                <div class="flex ltr:mr-2 rtl:ml-2">
                   <svg
-                    class="handle mr-2 cursor-move"
+                    class="handle cursor-move ltr:mr-2 rtl:ml-2"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -128,7 +128,9 @@
                   <li class="inline cursor-pointer" @click="renameReligionModal(element)">
                     <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                   </li>
-                  <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
+                  <li
+                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                    @click="destroy(element)">
                     {{ $t('Delete') }}
                   </li>
                 </ul>
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Index.vue b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
index ded70212a..399d67225 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -51,7 +51,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 📐 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 📐 </span>
             {{ $t('All the templates') }}
           </h3>
           <pretty-button
@@ -137,7 +137,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @click="showUpdateTemplateModal(template)">
+                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="showUpdateTemplateModal(template)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(template)">
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
index a2019b2fb..239b52fb4 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
@@ -37,7 +37,7 @@
           >{{ $t('Add') }}</span
         >
         <span v-if="module.already_used" class="text-xs"
-          ><span class="mr-1">✅</span> {{ $t('Already used on this page') }}</span
+          ><span class="ltr:mr-1 rtl:ml-1">✅</span> {{ $t('Already used on this page') }}</span
         >
       </li>
     </ul>
@@ -56,7 +56,7 @@
           <div
             class="item-list flex items-center border-b border-gray-200 py-2 pl-2 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- anchor to move module -->
-            <div class="mr-2">
+            <div class="ltr:mr-2 rtl:ml-2">
               <svg
                 class="handle cursor-move"
                 width="24"
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
index 2e2dab54f..f7875fcb1 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -45,7 +45,7 @@
           class="mb-2 flex items-center rounded-lg border border-gray-200 bg-white py-2 pl-2 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800"
           @click="selectPage(element)">
           <!-- icon to move position -->
-          <div class="mr-2">
+          <div class="ltr:mr-2 rtl:ml-2">
             <svg
               class="handle cursor-move"
               width="24"
@@ -72,7 +72,7 @@
             </div>
 
             <ul class="text-xs">
-              <li class="mr-4 inline cursor-pointer" @click="renamePageModal(element)">
+              <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="renamePageModal(element)">
                 <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
               </li>
               <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Show.vue b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
index 5b55d17d7..fea66f834 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Show.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -38,12 +38,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.templates" class="text-blue-500 hover:underline">
                 {{ $t('Templates') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Settings/Preferences/Index.vue b/resources/js/Pages/Settings/Preferences/Index.vue
index db24cf5a9..da9fefd7a 100644
--- a/resources/js/Pages/Settings/Preferences/Index.vue
+++ b/resources/js/Pages/Settings/Preferences/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
index f5a8f8704..8c7ff1ea5 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="mr-1"> 🗓 </span>
-        <span class="mr-2">
+        <span class="ltr:mr-1 rtl:ml-1"> 🗓 </span>
+        <span class="ltr:mr-2 rtl:ml-2">
           {{ $t('How should we display dates') }}
         </span>
 
@@ -61,7 +61,7 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             :for="'input' + date.id"
-            class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
             {{ date.value }}
           </label>
         </div>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
index d007da06f..9de75a973 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="mr-1"> ✈️ </span>
-        <span class="mr-2">
+        <span class="ltr:mr-1 rtl:ml-1"> ✈️ </span>
+        <span class="ltr:mr-2 rtl:ml-2">
           {{ $t('How should we display distance values') }}
         </span>
 
@@ -41,7 +41,9 @@
             name="distance-format"
             type="radio"
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-          <label :for="d" class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+          <label
+            :for="d"
+            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
             {{ localeDistance(d) }}
           </label>
         </div>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue b/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
index 9ffe677d6..39a308850 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="mr-1"> ⁉️ </span>
-        <span class="mr-2">
+        <span class="ltr:mr-1 rtl:ml-1"> ⁉️ </span>
+        <span class="ltr:mr-2 rtl:ml-2">
           {{ $t('Help') }}
         </span>
 
@@ -16,8 +16,8 @@
       <label for="default-toggle" class="relative inline-flex cursor-pointer items-center">
         <input id="default-toggle" v-model="form.checked" type="checkbox" class="peer sr-only" @click="submit" />
         <div
-          class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-        <span class="ml-3 dark:text-gray-300">
+          class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+        <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300">
           {{ $t('Display help links in the interface to help you (English only)') }}
         </span>
       </label>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Locale.vue b/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
index 100e6d096..ed8a04b6f 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, computed, ref } from 'vue';
 import { useForm } from '@inertiajs/inertia-vue3';
 import { loadLanguageAsync, getActiveLanguage, trans } from 'laravel-vue-i18n';
 import { flash } from '@/methods.js';
@@ -7,6 +7,7 @@ import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import PrettyLink from '@/Shared/Form/PrettyLink.vue';
 import Errors from '@/Shared/Form/Errors.vue';
 import Help from '@/Shared/Help.vue';
+import Dropdown from '@/Shared/Form/Dropdown.vue';
 
 const props = defineProps({
   data: Object,
@@ -29,6 +30,12 @@ const enableEditMode = () => {
   editMode.value = true;
 };
 
+const locales = computed(() => {
+  return _.map(props.data.languages, (value, key) => {
+    return { id: key, name: value };
+  });
+});
+
 const submit = () => {
   loadingState.value = 'loading';
 
@@ -56,8 +63,8 @@ const submit = () => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="mr-1"> 🗓 </span>
-        <span class="mr-2">
+        <span class="ltr:mr-1 rtl:ml-1"> 🗓 </span>
+        <span class="ltr:mr-2 rtl:ml-2">
           {{ $t('Language of the application') }}
         </span>
 
@@ -82,14 +89,7 @@ const submit = () => {
       <div class="border-b border-gray-200 px-5 py-2 dark:border-gray-700">
         <errors :errors="form.errors" />
 
-        <select
-          v-model="form.locale"
-          name="locale"
-          class="rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm">
-          <option v-for="(value, key) in props.data.languages" :key="key" :value="key">
-            {{ value }}
-          </option>
-        </select>
+        <Dropdown v-model="form.locale" name="locale" :data="locales" />
       </div>
 
       <!-- actions -->
@@ -100,11 +100,3 @@ const submit = () => {
     </form>
   </div>
 </template>
-
-<style lang="scss" scoped>
-select {
-  padding-left: 8px;
-  padding-right: 30px;
-  background-position: right 3px center;
-}
-</style>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Maps.vue b/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
index 3eb4c4c87..a01148376 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="mr-1"> 🗺️ </span>
-        <span class="mr-2">
+        <span class="ltr:mr-1 rtl:ml-1"> 🗺️ </span>
+        <span class="ltr:mr-2 rtl:ml-2">
           {{ $t('What should we use to display maps?') }}
         </span>
 
@@ -36,7 +36,7 @@
             :value="mapType.value"
             name="date-format"
             type="radio"
-            class="relative mr-3 h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
+            class="relative h-4 w-4 border-gray-300 text-sky-500 ltr:mr-3 rtl:ml-3 dark:border-gray-700" />
           <div>
             <label
               :for="'input' + mapType.id"
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
index 00e879247..989db716e 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="mr-1"> 👉 </span>
-        <span class="mr-2">
+        <span class="ltr:mr-1 rtl:ml-1"> 👉 </span>
+        <span class="ltr:mr-2 rtl:ml-2">
           {{ $t('Customize how contacts should be displayed') }}
         </span>
 
@@ -68,9 +68,9 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             for="first_name_last_name"
-            class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
             {{ $t('First name Last name') }}
-            <span class="ml-4 font-normal text-gray-500"> James Bond </span>
+            <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4"> James Bond </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -83,10 +83,10 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             for="last_name_first_name"
-            class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
             {{ $t('Last name First name') }}
 
-            <span class="ml-4 font-normal text-gray-500"> Bond James </span>
+            <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4"> Bond James </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -99,9 +99,9 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             for="first_name_last_name_nickname"
-            class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
             {{ $t('First name Last name (nickname)') }}
-            <span class="ml-4 font-normal text-gray-500"> James Bond (007) </span>
+            <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4"> James Bond (007) </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -112,9 +112,11 @@
             name="name-order"
             type="radio"
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-          <label for="nickname" class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+          <label
+            for="nickname"
+            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
             {{ $t('nickname') }}
-            <span class="ml-4 font-normal text-gray-500"> 007 </span>
+            <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4"> 007 </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -124,11 +126,13 @@
             type="radio"
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700"
             @click="focusNameOrder" />
-          <label for="custom" class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+          <label
+            for="custom"
+            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
             {{ $t('Custom name order') }}
           </label>
         </div>
-        <div class="ml-8">
+        <div class="ltr:ml-8 rtl:mr-8">
           <text-input
             :ref="'nameOrder'"
             v-model="form.nameOrder"
@@ -141,7 +145,7 @@
             :maxlength="255" />
 
           <p class="mb-4 text-sm">
-            <span class="mr-1">{{
+            <span class="ltr:mr-1 rtl:ml-1">{{
               $t(
                 'Please read our documentation to know more about this feature, and which variables you have access to',
               )
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
index b46bba3cb..a1e386a48 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="mr-1"> 💵 </span>
-        <span class="mr-2">
+        <span class="ltr:mr-1 rtl:ml-1"> 💵 </span>
+        <span class="ltr:mr-2 rtl:ml-2">
           {{ $t('How should we display numerical values') }}
         </span>
 
@@ -39,7 +39,7 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             :for="'input' + numberFormat.id"
-            class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
             {{ numberFormat.value }}
           </label>
         </div>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
index e6e276e54..9da8d9c47 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="mr-1"> 🗓 </span>
-        <span class="mr-2">
+        <span class="ltr:mr-1 rtl:ml-1"> 🗓 </span>
+        <span class="ltr:mr-2 rtl:ml-2">
           {{ $t('Timezone') }}
         </span>
 
@@ -573,8 +573,14 @@ export default {
 
 <style lang="scss" scoped>
 select {
+  background-position: right 3px center;
+}
+.ltr select {
   padding-left: 8px;
   padding-right: 20px;
-  background-position: right 3px center;
+}
+.rtl select {
+  padding-right: 8px;
+  padding-left: 20px;
 }
 </style>
diff --git a/resources/js/Pages/Settings/Storage/Index.vue b/resources/js/Pages/Settings/Storage/Index.vue
index 872bfcdbf..ac2b32ced 100644
--- a/resources/js/Pages/Settings/Storage/Index.vue
+++ b/resources/js/Pages/Settings/Storage/Index.vue
@@ -8,10 +8,10 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="ltr:mr-2 rtl:ml-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="ltr:mr-2 rtl:ml-2 inline">
               <inertia-link
                 :href="data.url.settings.index"
                 class="text-blue-500 hover:underline"
@@ -21,7 +21,7 @@
                 }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative ltr:mr-2 rtl:ml-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -50,7 +50,7 @@
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="mr-1">
+            <span class="ltr:mr-1 rtl:ml-1">
               📸
             </span>
             {{ $t('Storage') }}
@@ -60,7 +60,7 @@
         <!-- stats -->
         <div class="border border-gray-200 dark:border-gray-700 rounded-lg grid grid-cols-2 mb-8">
           <!-- account limit -->
-          <div class="flex justify-between p-3 border-r border-gray-200 dark:border-gray-700">
+          <div class="flex justify-between p-3 ltr:border-r rtl:border-l border-gray-200 dark:border-gray-700">
             <p>{{ $t('Your account limits') }}</p>
             <p class="font-bold">
               {{ data.account_limit }}
@@ -78,7 +78,7 @@
 
         <!-- detail breakdown -->
         <p class="mb-2">
-          <span class="mr-1">🔽</span> {{ $t('Breakdown of the current usage') }}
+          <span class="ltr:mr-1 rtl:ml-1">🔽</span> {{ $t('Breakdown of the current usage') }}
         </p>
         <ul class="user-list mb-6 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
           <li class="border-b border-gray-200 dark:border-gray-700 hover:bg-slate-50 hover:dark:bg-slate-800 dark:bg-slate-900 flex justify-between p-3">
diff --git a/resources/js/Pages/Settings/Users/Create.vue b/resources/js/Pages/Settings/Users/Create.vue
index 646924122..cb221a26c 100644
--- a/resources/js/Pages/Settings/Users/Create.vue
+++ b/resources/js/Pages/Settings/Users/Create.vue
@@ -6,15 +6,15 @@ k
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -24,12 +24,12 @@ k
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Users') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -100,7 +100,7 @@ k
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="viewer"
-                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                   {{ $t('Regular user') }}
                 </label>
               </div>
@@ -116,9 +116,9 @@ k
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="manager"
-                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                   {{ $t('Administrator') }}
-                  <span class="ml-4 font-normal text-gray-500">
+                  <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
                     {{
                       $t(
                         'Can do everything, including adding or removing other users, managing billing and closing the account.',
diff --git a/resources/js/Pages/Settings/Users/Index.vue b/resources/js/Pages/Settings/Users/Index.vue
index 3c534f604..d4f401cdc 100644
--- a/resources/js/Pages/Settings/Users/Index.vue
+++ b/resources/js/Pages/Settings/Users/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.settings.index" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -36,7 +36,7 @@
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="mr-1"> 🥸 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🥸 </span>
             {{ $t('All users in this account') }}
           </h3>
           <pretty-link :href="data.url.users.create" :text="$t('Invite a new user')" :icon="'plus'" />
@@ -58,7 +58,7 @@
                   <!-- is administrator -->
                   <span
                     v-if="user.is_account_administrator"
-                    class="ml-2 rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500"
+                    class="rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500 ltr:ml-2 rtl:mr-2"
                     >{{ $t('Administrator') }}</span
                   >
                 </span>
@@ -91,7 +91,7 @@
                   <!-- is administrator -->
                   <span
                     v-if="user.is_account_administrator"
-                    class="ml-2 rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500"
+                    class="rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500 ltr:ml-2 rtl:mr-2"
                     >{{ $t('Administrator') }}</span
                   >
                 </span>
@@ -101,7 +101,7 @@
 
               <!-- actions -->
               <ul v-if="!user.is_logged_user" class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @click="showEditModal(user)">
+                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="showEditModal(user)">
                   <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(user)">
@@ -128,7 +128,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="viewer"
-                    class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                     {{ $t('Regular user') }}
                   </label>
                 </div>
@@ -144,9 +144,9 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="manager"
-                    class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                     {{ $t('Administrator') }}
-                    <span class="ml-4 font-normal text-gray-500">
+                    <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
                       {{
                         $t(
                           'Can do everything, including adding or removing other users, managing billing and closing the account.',
diff --git a/resources/js/Pages/Vault/Calendar/Index.vue b/resources/js/Pages/Vault/Calendar/Index.vue
index 30619bb14..1bd2c1587 100644
--- a/resources/js/Pages/Vault/Calendar/Index.vue
+++ b/resources/js/Pages/Vault/Calendar/Index.vue
@@ -41,14 +41,14 @@ const get = (day) => {
                 <div class="inline-flex rounded-md shadow-sm">
                   <inertia-link
                     :href="data.url.previous"
-                    class="inline-flex items-center rounded-l-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                    class="inline-flex items-center border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-l-lg rtl:rounded-r-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="mr-2 h-4 w-4">
+                      class="h-4 w-4 ltr:mr-2 rtl:ml-2">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                     </svg>
 
@@ -57,7 +57,7 @@ const get = (day) => {
 
                   <inertia-link
                     :href="data.url.next"
-                    class="inline-flex items-center rounded-r-md border-b border-r border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                    class="inline-flex items-center rounded-r-md border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:border-r rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                     {{ data.next_month }}
 
                     <svg
@@ -66,7 +66,7 @@ const get = (day) => {
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="ml-2 h-4 w-4">
+                      class="h-4 w-4 ltr:ml-2 rtl:mr-2">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                     </svg>
                   </inertia-link>
@@ -75,13 +75,26 @@ const get = (day) => {
             </div>
 
             <!-- days -->
-            <div class="grid grid-cols-7 rounded-t-lg border-l border-r border-t last:border-b dark:border-gray-700">
-              <div class="border-r p-2 text-center text-xs dark:border-gray-700">{{ $t('Monday') }}</div>
-              <div class="border-r p-2 text-center text-xs dark:border-gray-700">{{ $t('Tuesday') }}</div>
-              <div class="border-r p-2 text-center text-xs dark:border-gray-700">{{ $t('Wednesday') }}</div>
-              <div class="border-r p-2 text-center text-xs dark:border-gray-700">{{ $t('Thursday') }}</div>
-              <div class="border-r p-2 text-center text-xs dark:border-gray-700">{{ $t('Friday') }}</div>
-              <div class="border-r p-2 text-center text-xs dark:border-gray-700">{{ $t('Saturday') }}</div>
+            <div
+              class="grid grid-cols-7 rounded-t-lg border-t last:border-b ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700">
+              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+                {{ $t('Monday') }}
+              </div>
+              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+                {{ $t('Tuesday') }}
+              </div>
+              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+                {{ $t('Wednesday') }}
+              </div>
+              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+                {{ $t('Thursday') }}
+              </div>
+              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+                {{ $t('Friday') }}
+              </div>
+              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+                {{ $t('Saturday') }}
+              </div>
               <div class="p-2 text-center text-xs">{{ $t('Sunday') }}</div>
             </div>
 
@@ -89,12 +102,12 @@ const get = (day) => {
             <div
               v-for="week in data.weeks"
               :key="week.id"
-              class="grid grid-cols-7 border-l border-r border-t last:rounded-b-lg last:border-b dark:border-gray-700">
+              class="grid grid-cols-7 border-t last:rounded-b-lg last:border-b ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700">
               <div
                 v-for="day in week"
                 :key="day.id"
                 @click="get(day)"
-                class="h-32 border-r p-2 last:border-r-0 dark:border-gray-700"
+                class="h-32 p-2 last:border-r-0 ltr:border-r rtl:border-l dark:border-gray-700"
                 :class="day.is_in_month ? 'cursor-pointer' : 'bg-slate-50 dark:bg-slate-900'">
                 <!-- date of the day -->
                 <div class="flex items-center justify-between">
@@ -109,7 +122,7 @@ const get = (day) => {
                     <div v-for="mood in day.mood_events" :key="mood.id">
                       <a-tooltip placement="topLeft" :title="mood.mood_tracking_parameter.label" arrow-point-at-center>
                         <div
-                          class="mr-2 inline-block h-4 w-4 rounded-full"
+                          class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2"
                           :class="mood.mood_tracking_parameter.hex_color" />
                       </a-tooltip>
                     </div>
@@ -124,7 +137,7 @@ const get = (day) => {
                   <div v-for="date in day.important_dates" :key="date.id">
                     <contact-card
                       :contact="date.contact"
-                      :avatarClasses="'h-5 w-5 rounded-full mr-2'"
+                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
                       :displayName="false" />
                   </div>
                 </div>
@@ -155,7 +168,7 @@ const get = (day) => {
                   <!-- mood tracking parameter -->
                   <div class="flex items-center">
                     <div
-                      class="mr-2 inline-block h-4 w-4 rounded-full"
+                      class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2"
                       :class="mood.mood_tracking_parameter.hex_color" />
                     <span>{{ mood.mood_tracking_parameter.label }}</span>
                   </div>
@@ -172,7 +185,7 @@ const get = (day) => {
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor"
-                        class="mr-1 h-4 w-4 text-gray-400">
+                        class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
                         <path
                           stroke-linecap="round"
                           stroke-linejoin="round"
@@ -210,7 +223,7 @@ const get = (day) => {
                   <span
                     ><contact-card
                       :contact="importantDate.contact"
-                      :avatarClasses="'h-5 w-5 rounded-full mr-2'"
+                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
                       :displayName="false"
                   /></span>
                 </li>
diff --git a/resources/js/Pages/Vault/Companies/Index.vue b/resources/js/Pages/Vault/Companies/Index.vue
index fe3f45163..b27716c19 100644
--- a/resources/js/Pages/Vault/Companies/Index.vue
+++ b/resources/js/Pages/Vault/Companies/Index.vue
@@ -13,7 +13,7 @@ defineProps({
     <main class="relative sm:mt-24">
       <div class="mx-auto max-w-4xl px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <h3 class="mb-6 font-semibold">
-          <span class="mr-1"> 🏭 </span>
+          <span class="ltr:mr-1 rtl:ml-1"> 🏭 </span>
           {{ $t('All the companies') }}
         </h3>
 
diff --git a/resources/js/Pages/Vault/Contact/Blank.vue b/resources/js/Pages/Vault/Contact/Blank.vue
index 83d1edbe9..182100de0 100644
--- a/resources/js/Pages/Vault/Contact/Blank.vue
+++ b/resources/js/Pages/Vault/Contact/Blank.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Contact/Create.vue b/resources/js/Pages/Vault/Contact/Create.vue
index c94617510..71f737407 100644
--- a/resources/js/Pages/Vault/Contact/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Create.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -156,49 +156,49 @@
             <div class="flex flex-wrap text-xs">
               <span
                 v-if="!showMiddleNameField"
-                class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayMiddleNameField">
                 {{ $t('+ middle name') }}
               </span>
               <span
                 v-if="!showPrefixField"
-                class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayPrefixField">
                 {{ $t('+ prefix') }}
               </span>
               <span
                 v-if="!showSuffixField"
-                class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displaySuffixField">
                 {{ $t('+ suffix') }}
               </span>
               <span
                 v-if="!showNicknameField"
-                class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayNicknameField">
                 {{ $t('+ nickname') }}
               </span>
               <span
                 v-if="!showMaidenNameField"
-                class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayMaidenNameField">
                 {{ $t('+ maiden name') }}
               </span>
               <span
                 v-if="data.genders.length > 0 && !showGenderField"
-                class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayGenderField">
                 {{ $t('+ gender') }}
               </span>
               <span
                 v-if="data.pronouns.length > 0 && !showPronounField"
-                class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayPronounField">
                 {{ $t('+ pronoun') }}
               </span>
               <span
                 v-if="data.templates.length > 0 && !showTemplateField"
-                class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayTemplateField">
                 {{ $t('+ change template') }}
               </span>
diff --git a/resources/js/Pages/Vault/Contact/Goals/Show.vue b/resources/js/Pages/Vault/Contact/Goals/Show.vue
index 06d28b3f0..8aaac1d1c 100644
--- a/resources/js/Pages/Vault/Contact/Goals/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Goals/Show.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.contact" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -90,20 +90,20 @@
 
             <!-- stats -->
             <div class="mb-6 flex justify-between rounded border border-gray-200 p-3 dark:border-gray-700">
-              <div class="mr-6 flex items-center">
-                <div class="mr-3 w-14 text-right text-sm text-gray-500">{{ $t('Total streaks') }}</div>
+              <div class="flex items-center ltr:mr-6 rtl:ml-6">
+                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Total streaks') }}</div>
                 <div class="text-4xl">
                   {{ localGoal.count }}
                 </div>
               </div>
-              <div class="mr-6 flex items-center">
-                <div class="mr-3 w-14 text-right text-sm text-gray-500">{{ $t('Current streak') }}</div>
+              <div class="flex items-center ltr:mr-6 rtl:ml-6">
+                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Current streak') }}</div>
                 <div class="text-4xl">
                   {{ localGoal.streaks_statistics.current_streak }}
                 </div>
               </div>
               <div class="flex items-center">
-                <div class="mr-3 w-14 text-right text-sm text-gray-500">{{ $t('Longest streak') }}</div>
+                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Longest streak') }}</div>
                 <div class="text-4xl">
                   {{ localGoal.streaks_statistics.max_streak }}
                 </div>
diff --git a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
index c939c6f3c..2cf73a80b 100644
--- a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
+++ b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.contact" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="mr-1"> 🗓 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🗓 </span>
             {{ $t('All the important dates') }}
           </h3>
           <pretty-button
@@ -108,11 +108,11 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="full_date"
-                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                   {{ $t('I know the exact date, including the year') }}
                 </label>
               </div>
-              <div v-if="form.choice == 'full_date'" class="mb-4 ml-6">
+              <div v-if="form.choice == 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
                 <DatePicker v-model.string="form.date" class="inline-block h-full" :masks="masks" :isDark="isDark">
                   <template #default="{ inputValue, inputEvents }">
                     <input
@@ -134,16 +134,16 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="month_day"
-                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                   {{ $t('I only know the day and month, not the year') }}
                 </label>
               </div>
-              <div v-if="form.choice == 'month_day'" class="ml-6 flex">
+              <div v-if="form.choice == 'month_day'" class="flex ltr:ml-6 rtl:mr-6">
                 <dropdown
                   v-model="form.month"
                   :data="data.months"
                   :required="true"
-                  :div-outer-class="'mb-5 mr-2'"
+                  :div-outer-class="'mb-5 ltr:mr-2 rtl:ml-2'"
                   :placeholder="$t('Choose a value')"
                   :dropdown-class="'block w-full'"
                   :label="$t('Month')" />
@@ -170,11 +170,11 @@
                   @selected="showyear" />
                 <label
                   for="year"
-                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                   {{ $t('I only know a number of years (an age, for example)') }}
                 </label>
               </div>
-              <div v-if="form.choice == 'year'" class="ml-6">
+              <div v-if="form.choice == 'year'" class="ltr:ml-6 rtl:mr-6">
                 <text-input
                   :ref="'age'"
                   v-model="form.age"
@@ -198,13 +198,13 @@
                   type="checkbox"
                   class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
                   @click="showReminderOptions" />
-                <label for="reminder" class="ml-2 block cursor-pointer text-sm text-gray-900">
+                <label for="reminder" class="block cursor-pointer text-sm text-gray-900 ltr:ml-2 rtl:mr-2">
                   {{ $t('Create a reminder') }}
                 </label>
               </div>
 
               <!-- reminder options -->
-              <div v-if="form.reminder" class="ml-4 mt-4">
+              <div v-if="form.reminder" class="mt-4 ltr:ml-4 rtl:mr-4">
                 <div class="mb-2 flex items-center">
                   <input
                     id="recurring_year"
@@ -215,7 +215,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="recurring_year"
-                    class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                     {{ $t('Remind me about this date every year') }}
                   </label>
                 </div>
@@ -230,7 +230,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="one_time"
-                    class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                     {{ $t('Remind me about this date just once, in one year from now') }}
                   </label>
                 </div>
@@ -259,14 +259,14 @@
 
                 <span
                   v-if="date.type"
-                  class="ml-2 inline-block rounded bg-neutral-200 px-1 py-0 text-xs text-neutral-500 last:mr-0">
+                  class="inline-block rounded bg-neutral-200 px-1 py-0 text-xs text-neutral-500 last:mr-0 ltr:ml-2 rtl:mr-2">
                   {{ date.type.label }}
                 </span>
               </span>
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @click="updateDateModal(date)">
+                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateDateModal(date)">
                   <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(date)">
@@ -321,11 +321,11 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="full_date"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                       {{ $t('I know the exact date, including the year') }}
                     </label>
                   </div>
-                  <div v-if="form.choice == 'full_date'" class="mb-4 ml-6">
+                  <div v-if="form.choice == 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
                     <DatePicker
                       v-model.string="form.date"
                       class="inline-block h-full"
@@ -352,16 +352,16 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="month_day"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                       {{ $t('I only know the day and month, not the year') }}
                     </label>
                   </div>
-                  <div v-if="form.choice == 'month_day'" class="ml-6 flex">
+                  <div v-if="form.choice == 'month_day'" class="flex ltr:ml-6 rtl:mr-6">
                     <dropdown
                       v-model="form.month"
                       :data="data.months"
                       :required="true"
-                      :div-outer-class="'mb-5 mr-2'"
+                      :div-outer-class="'mb-5 ltr:mr-2 rtl:ml-2'"
                       :placeholder="$t('Choose a value')"
                       :dropdown-class="'block w-full'"
                       :label="$t('Month')" />
@@ -388,11 +388,11 @@
                       @selected="showAge" />
                     <label
                       for="year"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                       {{ $t('I only know a number of years (an age, for example)') }}
                     </label>
                   </div>
-                  <div v-if="form.choice == 'year'" class="ml-6">
+                  <div v-if="form.choice == 'year'" class="ltr:ml-6 rtl:mr-6">
                     <text-input
                       :ref="'age'"
                       v-model="form.age"
diff --git a/resources/js/Pages/Vault/Contact/Index.vue b/resources/js/Pages/Vault/Contact/Index.vue
index 42b7bee4b..fa0c860d6 100644
--- a/resources/js/Pages/Vault/Contact/Index.vue
+++ b/resources/js/Pages/Vault/Contact/Index.vue
@@ -41,7 +41,7 @@ const update = () => {
             <!-- labels -->
             <div class="mb-8">
               <div class="mb-3 border-b border-gray-200 dark:border-gray-700">
-                <span class="mr-1"> 🏷️ </span>
+                <span class="ltr:mr-1 rtl:ml-1"> 🏷️ </span>
                 {{ $t('Labels') }}
               </div>
               <ul v-if="data.labels.length > 0">
@@ -79,7 +79,7 @@ const update = () => {
             <!-- title + cta -->
             <div class="mb-3 flex items-center justify-between">
               <h3>
-                <span class="mr-1"> 🥸 </span>
+                <span class="ltr:mr-1 rtl:ml-1"> 🥸 </span>
                 {{ $t('All contacts in the vault') }}
               </h3>
 
@@ -88,14 +88,14 @@ const update = () => {
                   v-model="form.sort_order"
                   :data="props.data.contact_sort_orders"
                   :required="false"
-                  :dropdown-class="'block w-full mr-2'"
+                  :dropdown-class="'block w-full ltr:mr-2 rtl:ml-2'"
                   @change="update()" />
 
                 <pretty-link
                   v-if="layoutData.vault.permission.at_least_editor"
                   :href="props.data.url.contact.create"
                   :text="$t('Add a contact')"
-                  class="ml-3"
+                  class="ltr:ml-3 rtl:mr-3"
                   :icon="'plus'" />
               </div>
             </div>
@@ -107,7 +107,7 @@ const update = () => {
                 v-for="contact in data.contacts"
                 :key="contact.id"
                 class="flex items-center border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
-                <avatar :data="contact.avatar" :classes="'rounded-full mr-2 h-5 w-5'" />
+                <avatar :data="contact.avatar" :classes="'rounded-full ltr:mr-2 rtl:ml-2 h-5 w-5'" />
 
                 <inertia-link :href="contact.url.show" class="text-blue-500 hover:underline">
                   {{ contact.name }}
diff --git a/resources/js/Pages/Vault/Contact/Move.vue b/resources/js/Pages/Vault/Contact/Move.vue
index 1e8e98548..f52eccdd3 100644
--- a/resources/js/Pages/Vault/Contact/Move.vue
+++ b/resources/js/Pages/Vault/Contact/Move.vue
@@ -25,15 +25,15 @@ const move = (vault) => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Contact/Names/Edit.vue b/resources/js/Pages/Vault/Contact/Names/Edit.vue
index 90c2d74e7..447c71b1c 100644
--- a/resources/js/Pages/Vault/Contact/Names/Edit.vue
+++ b/resources/js/Pages/Vault/Contact/Names/Edit.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.show" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Contact/Notes/Index.vue b/resources/js/Pages/Vault/Contact/Notes/Index.vue
index 1e81b6a01..889f33e81 100644
--- a/resources/js/Pages/Vault/Contact/Notes/Index.vue
+++ b/resources/js/Pages/Vault/Contact/Notes/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.contact" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Contact/Photos/Index.vue b/resources/js/Pages/Vault/Contact/Photos/Index.vue
index d237eeaa6..6203c3ecf 100644
--- a/resources/js/Pages/Vault/Contact/Photos/Index.vue
+++ b/resources/js/Pages/Vault/Contact/Photos/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.show" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -51,7 +51,7 @@
         <!-- title + cta -->
         <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
           <div class="mb-2 sm:mb-0">
-            <span class="relative mr-1">
+            <span class="relative ltr:mr-1 rtl:ml-1">
               <svg
                 class="icon-sidebar relative inline h-4 w-4"
                 viewBox="0 0 24 24"
diff --git a/resources/js/Pages/Vault/Contact/Photos/Show.vue b/resources/js/Pages/Vault/Contact/Photos/Show.vue
index c0b44b72b..2bd7a9e3e 100644
--- a/resources/js/Pages/Vault/Contact/Photos/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Photos/Show.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.show" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -43,7 +43,7 @@
                 {{ $t('All the photos') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -66,7 +66,7 @@
         <!-- title + cta -->
         <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
           <div class="mb-2 sm:mb-0">
-            <span class="relative mr-1">
+            <span class="relative ltr:mr-1 rtl:ml-1">
               <svg
                 class="icon-sidebar relative inline h-4 w-4"
                 viewBox="0 0 24 24"
diff --git a/resources/js/Pages/Vault/Contact/Relationships/Create.vue b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
index 74c53dfef..476befcff 100644
--- a/resources/js/Pages/Vault/Contact/Relationships/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.contact" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -59,18 +59,13 @@
 
             <!-- relationship type -->
             <label for="types" class="mb-2 block text-sm"> {{ $t('Select a relationship type') }} </label>
-            <select
+            <Dropdown
               id="types"
               v-model="form.relationship_type_id"
               name="types"
               class="w-full rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
-              @change="load()">
-              <optgroup v-for="group in data.relationship_group_types" :key="group.id" :label="group.name">
-                <option v-for="type in group.types" :key="type.id" :value="type.id">
-                  {{ type.name }}
-                </option>
-              </optgroup>
-            </select>
+              @update:modelValue="load"
+              :data="fromRelationshipOptions" />
           </div>
 
           <!-- data once the relatonship type has been selected -->
@@ -96,7 +91,7 @@
                 <div class="flex">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    class="mr-2 h-5 w-5"
+                    class="h-5 w-5 ltr:mr-2 rtl:ml-2"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -128,7 +123,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="unknown"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                       {{ $t('I don’t know the name') }}
                     </label>
                   </div>
@@ -145,7 +140,7 @@
                       @click="displayContactNameField" />
                     <label
                       for="name"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                       {{ $t('I know the name') }}
                     </label>
                   </div>
@@ -174,25 +169,25 @@
                     <div class="mb-4 flex flex-wrap text-xs">
                       <span
                         v-if="!showLastNameField"
-                        class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
+                        class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
                         @click="displayLastNameField">
                         {{ $t('+ last name') }}
                       </span>
                       <span
                         v-if="!showMiddleNameField"
-                        class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
+                        class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
                         @click="displayMiddleNameField">
                         {{ $t('+ middle name') }}
                       </span>
                       <span
                         v-if="!showNicknameField"
-                        class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
+                        class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
                         @click="displayNicknameField">
                         {{ $t('+ nickname') }}
                       </span>
                       <span
                         v-if="!showMaidenNameField"
-                        class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
+                        class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
                         @click="displayMaidenNameField">
                         {{ $t('+ maiden name') }}
                       </span>
@@ -211,7 +206,7 @@
                       @click="displayContactSelector" />
                     <label
                       for="contact"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                       {{ $t('Choose an existing contact') }}
                     </label>
                   </div>
@@ -290,13 +285,13 @@
               <div class="flex flex-wrap text-xs">
                 <span
                   v-if="data.genders.length > 0 && !showGenderField"
-                  class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
+                  class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
                   @click="displayGenderField">
                   {{ $t('+ gender') }}
                 </span>
                 <span
                   v-if="data.pronouns.length > 0 && !showPronounField"
-                  class="mb-2 mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
+                  class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
                   @click="displayPronounField">
                   {{ $t('+ pronoun') }}
                 </span>
@@ -312,7 +307,9 @@
                   name="create-contact"
                   type="checkbox"
                   class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600" />
-                <label for="create-contact" class="ml-2 block cursor-pointer text-sm text-gray-900 dark:text-white">
+                <label
+                  for="create-contact"
+                  class="block cursor-pointer text-sm text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-white">
                   {{ $t('Create a contact entry for this person') }}
                 </label>
               </div>
@@ -405,6 +402,23 @@ export default {
     this.toRelationship = 'Child';
   },
 
+  computed: {
+    fromRelationshipOptions() {
+      return _.map(this.data.relationship_group_types, (group) => {
+        return {
+          id: group.id,
+          optgroup: group.name,
+          options: _.map(group.types, (type) => {
+            return {
+              id: type.id,
+              name: type.name,
+            };
+          }),
+        };
+      });
+    },
+  },
+
   methods: {
     displayContactNameField() {
       this.form.choice = 'name';
@@ -458,8 +472,8 @@ export default {
       }
     },
 
-    load() {
-      var id = this.data.relationship_types.findIndex((x) => x.id === this.form.relationship_type_id);
+    load(target) {
+      var id = this.data.relationship_types.findIndex((x) => x.id === parseInt(target));
       this.fromRelationship = this.data.relationship_types[id].name;
       this.toRelationship = this.data.relationship_types[id].name_reverse_relationship;
       this.showRelationshipTypeDetails = true;
@@ -492,10 +506,4 @@ export default {
 input[type='checkbox'] {
   top: 3px;
 }
-
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
 </style>
diff --git a/resources/js/Pages/Vault/Contact/Show.vue b/resources/js/Pages/Vault/Contact/Show.vue
index 662ea728d..5f95e1b13 100644
--- a/resources/js/Pages/Vault/Contact/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Show.vue
@@ -156,15 +156,15 @@ const destroyAvatar = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <Link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </Link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -187,9 +187,9 @@ const destroyAvatar = () => {
         <!-- banner if contact is archived -->
         <!-- this is based on the `listed` boolean on the contact object -->
         <div v-if="!data.listed" class="mb-8 rounded-lg border border-gray-300 px-3 py-2 text-center">
-          <span class="mr-4"> 🕸️ </span>
+          <span class="ltr:mr-4 rtl:ml-4"> 🕸️ </span>
           {{ $t('The contact is archived') }}
-          <span class="ml-4"> 🕷️ </span>
+          <span class="ltr:ml-4 rtl:mr-4"> 🕷️ </span>
         </div>
 
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
@@ -278,13 +278,13 @@ const destroyAvatar = () => {
             <!-- family summary -->
             <div v-if="data.group_summary_information.length > 0">
               <div class="mb-6 flex rounded border border-gray-200 p-3 dark:border-gray-700">
-                <img src="/img/group.svg" class="mr-2 h-6 w-6" />
+                <img src="/img/group.svg" class="h-6 w-6 ltr:mr-2 rtl:ml-2" />
                 <ul>
-                  <li class="mr-2 inline">{{ $t('Part of') }}</li>
+                  <li class="inline ltr:mr-2 rtl:ml-2">{{ $t('Part of') }}</li>
                   <li
                     v-for="group in data.group_summary_information"
                     :key="group.id"
-                    class="group-list-item mr-2 inline">
+                    class="group-list-item inline ltr:mr-2 rtl:ml-2">
                     <Link :href="group.url.show" class="text-blue-500 hover:underline">
                       {{ group.name }}
                     </Link>
@@ -296,7 +296,7 @@ const destroyAvatar = () => {
             <!-- all the pages -->
             <div class="mb-8 w-full border-b border-gray-200 dark:border-gray-700">
               <div class="flex overflow-x-auto">
-                <div v-for="page in data.template_pages" :key="page.id" class="mr-2 flex-none">
+                <div v-for="page in data.template_pages" :key="page.id" class="flex-none ltr:mr-2 rtl:ml-2">
                   <Link
                     :href="page.url.show"
                     :class="{ 'border-orange-500 hover:border-orange-500': page.selected }"
@@ -369,7 +369,7 @@ const destroyAvatar = () => {
           </JetSecondaryButton>
 
           <JetDangerButton
-            class="ml-3"
+            class="ltr:ml-3 rtl:mr-3"
             :class="{ 'opacity-25': deleteContactForm.processing }"
             :disabled="deleteContactForm.processing"
             @click="destroy">
@@ -394,7 +394,7 @@ const destroyAvatar = () => {
           </JetSecondaryButton>
 
           <JetButton
-            class="ml-3"
+            class="ltr:ml-3 rtl:mr-3"
             :class="{ 'opacity-25': toggleArchiveForm.processing }"
             :disabled="toggleArchiveForm.processing"
             @click="toggleArchive">
diff --git a/resources/js/Pages/Vault/Create.vue b/resources/js/Pages/Vault/Create.vue
index 0e66e1b67..4c84f4c09 100644
--- a/resources/js/Pages/Vault/Create.vue
+++ b/resources/js/Pages/Vault/Create.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('All the vaults') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3 dark:text-slate-200"
diff --git a/resources/js/Pages/Vault/Dashboard/Index.vue b/resources/js/Pages/Vault/Dashboard/Index.vue
index e27040a04..a28966372 100644
--- a/resources/js/Pages/Vault/Dashboard/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Index.vue
@@ -67,14 +67,14 @@ const changeTab = (tab) => {
                   @click="changeTab('activity')"
                   type="button"
                   :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': currentTab === 'activity' }"
-                  class="inline-flex items-center rounded-l-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                  class="inline-flex items-center border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-l-lg rtl:rounded-r-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="mr-2 h-4 w-4 fill-current">
+                    class="h-4 w-4 fill-current ltr:mr-2 rtl:ml-2">
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
@@ -89,14 +89,14 @@ const changeTab = (tab) => {
                   @click="changeTab('life_events')"
                   type="button"
                   :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': currentTab === 'life_events' }"
-                  class="inline-flex items-center border-b border-r border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                  class="inline-flex items-center border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:border-r rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="mr-2 h-4 w-4">
+                    class="h-4 w-4 ltr:mr-2 rtl:ml-2">
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
@@ -116,14 +116,14 @@ const changeTab = (tab) => {
                   :class="{
                     'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': currentTab === 'life_metrics',
                   }"
-                  class="inline-flex items-center rounded-r-md border-b border-r border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                  class="inline-flex items-center border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-r-lg ltr:border-r rtl:rounded-l-lg rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="mr-2 h-4 w-4">
+                    class="h-4 w-4 ltr:mr-2 rtl:ml-2">
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
index bc809488b..6a6cc69c7 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
@@ -35,7 +35,7 @@
             @change="toggle(task)" />
 
           <div>
-            <label :for="task.id" class="mb-2 ml-2 flex cursor-pointer text-gray-900 dark:text-gray-300">
+            <label :for="task.id" class="mb-2 flex cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
               {{ task.label }}
             </label>
 
@@ -48,10 +48,10 @@
                     ? 'bg-red-400/10 text-red-600 dark:bg-red-600/10 dark:text-red-400'
                     : 'bg-sky-400/10 text-sky-600 dark:bg-sky-600/10 dark:text-sky-400'
                 "
-                class="ml-2 mr-4 flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 dark:text-sky-400">
+                class="flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 ltr:ml-2 ltr:mr-4 rtl:ml-4 rtl:mr-2 dark:text-sky-400">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="mr-1 h-3 w-3"
+                  class="h-3 w-3 ltr:mr-1 rtl:ml-1"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -82,7 +82,7 @@
     <div
       v-if="data.tasks.length == 0"
       class="mb-2 flex items-center rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900">
-      <img src="/img/dashboard_blank_tasks.svg" :alt="$t('Tasks')" class="mr-2 h-14 w-14" />
+      <img src="/img/dashboard_blank_tasks.svg" :alt="$t('Tasks')" class="h-14 w-14 ltr:mr-2 rtl:ml-2" />
       <p class="px-5 text-center">
         {{ $t('No tasks.') }}
       </p>
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue b/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
index 28bce27fe..0bffdfc3a 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h3 class="mb-3 flex border-b border-gray-200 pb-1 font-medium dark:border-gray-700">
-      <span class="relative mr-2">
+      <span class="relative ltr:mr-2 rtl:ml-2">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="icon-sidebar relative inline h-4 w-4 text-gray-300 hover:text-gray-600 dark:text-gray-400"
@@ -13,7 +13,7 @@
         </svg>
       </span>
 
-      <span class="mr-2 inline">
+      <span class="inline ltr:mr-2 rtl:ml-2">
         {{ $t('Last updated') }}
       </span>
 
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
index 50d8c3bf1..328a7f90d 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
@@ -118,7 +118,7 @@ const destroy = (lifeMetric) => {
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -181,7 +181,7 @@ const destroy = (lifeMetric) => {
           :key="lifeMetric.id"
           class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
           <div v-if="editedLifeMetricId !== lifeMetric.id" class="flex items-center justify-between p-3">
-            <div class="mr-8 flex w-full items-center justify-between">
+            <div class="flex w-full items-center justify-between ltr:mr-8 rtl:ml-8">
               <div>
                 <p class="mb-1 text-lg font-semibold">{{ lifeMetric.label }}</p>
                 <ul @click="toggleGraph(lifeMetric)">
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
index b234aff8b..af41c987c 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
@@ -97,7 +97,7 @@ const submit = () => {
     <div
       v-if="!createMoodEventModalShown && !successShown"
       class="mb-4 flex items-center rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-900">
-      <img src="/img/dashboard_blank_how_are_you.svg" :alt="$t('Reminders')" class="mr-2 h-14 w-14" />
+      <img src="/img/dashboard_blank_how_are_you.svg" :alt="$t('Reminders')" class="h-14 w-14 ltr:mr-2 rtl:ml-2" />
       <div class="mb-2 flex flex-col px-5">
         <p class="mb-2">{{ $t('How are you?') }}</p>
         <pretty-button :text="$t('Record your mood')" @click="showMoodEventModal" />
@@ -124,12 +124,12 @@ const submit = () => {
               :value="parameter.id"
               name="date-format"
               type="radio"
-              class="relative mr-3 h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
+              class="relative h-4 w-4 border-gray-300 text-sky-500 ltr:mr-3 rtl:ml-3 dark:border-gray-700" />
 
             <label
               :for="'input' + parameter.id"
               class="block cursor-pointer font-medium text-gray-700 dark:text-gray-300">
-              <div class="mr-2 inline-block h-4 w-4 rounded-full" :class="parameter.hex_color" />
+              <div class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="parameter.hex_color" />
               {{ parameter.label }}
             </label>
           </li>
@@ -138,21 +138,21 @@ const submit = () => {
         <div class="flex">
           <span
             v-if="!datePickerFieldShown"
-            class="mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:bg-slate-500 dark:text-white"
+            class="flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-white"
             @click="showDatePickerField">
             {{ $t('+ change date') }}
           </span>
 
           <span
             v-if="!noteFieldShown"
-            class="mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:bg-slate-500 dark:text-white"
+            class="flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-white"
             @click="showNoteField">
             {{ $t('+ note') }}
           </span>
 
           <span
             v-if="!hoursSleptFieldShown"
-            class="mr-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:bg-slate-500 dark:text-white"
+            class="flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-white"
             @click="showHoursSleptField">
             {{ $t('+ number of hours slept') }}
           </span>
@@ -206,9 +206,9 @@ const submit = () => {
     <div
       v-if="successShown"
       class="mb-4 flex items-center rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-900">
-      <img src="/img/dashboard_blank_how_are_you.svg" :alt="$t('Reminders')" class="mr-2 h-14 w-14" />
+      <img src="/img/dashboard_blank_how_are_you.svg" :alt="$t('Reminders')" class="h-14 w-14 ltr:mr-2 rtl:ml-2" />
       <div class="flex flex-col px-5">
-        <p class="mb-2"><span class="mr-1">🎉</span> {{ $t('Your mood has been recorded!') }}</p>
+        <p class="mb-2"><span class="ltr:mr-1 rtl:ml-1">🎉</span> {{ $t('Your mood has been recorded!') }}</p>
         <inertia-link :href="data.url.history" class="text-center text-blue-500 hover:underline">{{
           $t('View history')
         }}</inertia-link>
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
index 095d9b705..08f42b24e 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
@@ -27,7 +27,7 @@
           :key="reminder.id"
           class="item-list border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800 hover:dark:bg-slate-900">
           <div class="flex items-center">
-            <p class="mr-3 text-xs text-gray-400">
+            <p class="text-xs text-gray-400 ltr:mr-3 rtl:ml-3">
               {{ reminder.scheduled_at }}
             </p>
             <div class="flex items-center text-sm">
@@ -49,7 +49,7 @@
     <div
       v-if="data.reminders.length == 0"
       class="mb-4 flex items-center rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-900">
-      <img src="/img/dashboard_blank_reminders.svg" :alt="$t('Reminders')" class="mr-2 h-14 w-14" />
+      <img src="/img/dashboard_blank_reminders.svg" :alt="$t('Reminders')" class="h-14 w-14 ltr:mr-2 rtl:ml-2" />
       <p class="px-5 text-center">
         {{ $t('No upcoming reminders.') }}
       </p>
diff --git a/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue b/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue
index 08f1cb119..568edf3f2 100644
--- a/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.dashboard" class="text-blue-500 hover:underline">
                 {{ $t('Dashboard') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -36,7 +36,7 @@
         <!-- title -->
         <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
           <div class="mb-2 sm:mb-0">
-            <span class="relative mr-1">
+            <span class="relative ltr:mr-1 rtl:ml-1">
               <svg
                 class="icon-sidebar relative inline h-4 w-4"
                 viewBox="0 0 24 24"
@@ -84,13 +84,13 @@
               :key="reminder.id"
               class="item-list border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <div class="items-center sm:flex">
-                <p class="mr-3 text-gray-400">
+                <p class="text-gray-400 ltr:mr-3 rtl:ml-3">
                   {{ reminder.scheduled_at }}
                 </p>
-                <div class="mr-2 flex items-center">
+                <div class="flex items-center ltr:mr-2 rtl:ml-2">
                   <avatar
                     :data="reminder.contact.avatar"
-                    :classes="'h-4 w-4 mr-2 rounded-full ring-2 ring-white dark:ring-gray-900'" />
+                    :classes="'h-4 w-4 ltr:mr-2 rtl:ml-2 rounded-full ring-2 ring-white dark:ring-gray-900'" />
 
                   <inertia-link :href="reminder.contact.url.show" class="text-blue-500 hover:underline">
                     {{ reminder.contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Task/Index.vue b/resources/js/Pages/Vault/Dashboard/Task/Index.vue
index 43c04ce43..52f7288fe 100644
--- a/resources/js/Pages/Vault/Dashboard/Task/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Task/Index.vue
@@ -51,7 +51,7 @@
 
                 <label
                   :for="currentTask.id"
-                  class="ml-2 flex cursor-pointer items-center text-gray-900 dark:text-gray-100">
+                  class="flex cursor-pointer items-center text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-100">
                   {{ currentTask.label }}
 
                   <!-- due date -->
@@ -62,10 +62,10 @@
                         ? 'bg-red-400/10 text-red-600 dark:bg-red-600/10 dark:text-red-400'
                         : 'bg-sky-400/10 text-sky-600 dark:bg-sky-600/10 dark:text-sky-400'
                     "
-                    class="ml-2 flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5">
+                    class="flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 ltr:ml-2 rtl:mr-2">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      class="mr-1 h-3 w-3"
+                      class="h-3 w-3 ltr:mr-1 rtl:ml-1"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
diff --git a/resources/js/Pages/Vault/Files/Index.vue b/resources/js/Pages/Vault/Files/Index.vue
index 020b4599a..1b08b6183 100644
--- a/resources/js/Pages/Vault/Files/Index.vue
+++ b/resources/js/Pages/Vault/Files/Index.vue
@@ -8,7 +8,7 @@
             <!-- filters -->
             <div>
               <ul class="mb-4">
-                <li class="border-l-2 pl-2" :class="{ 'border-orange-500': tab === 'index' }">
+                <li class="pl-2 ltr:border-l-2 rtl:border-r-2" :class="{ 'border-orange-500': tab === 'index' }">
                   <inertia-link :href="data.statistics.url.index">
                     {{ $t('All files') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.all }})</span>
@@ -20,19 +20,21 @@
                 {{ $t('Or filter by type') }}
               </p>
               <ul>
-                <li class="mb-2 border-l-2 pl-2" :class="{ 'border-orange-500': tab === 'documents' }">
+                <li
+                  class="mb-2 pl-2 ltr:border-l-2 rtl:border-r-2"
+                  :class="{ 'border-orange-500': tab === 'documents' }">
                   <inertia-link :href="data.statistics.url.documents">
                     {{ $t('Documents') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.documents }})</span>
                   </inertia-link>
                 </li>
-                <li class="mb-2 border-l-2 pl-2" :class="{ 'border-orange-500': tab === 'photos' }">
+                <li class="mb-2 pl-2 ltr:border-l-2 rtl:border-r-2" :class="{ 'border-orange-500': tab === 'photos' }">
                   <inertia-link :href="data.statistics.url.photos">
                     {{ $t('Photos') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.photos }})</span>
                   </inertia-link>
                 </li>
-                <li class="mb-2 border-l-2 pl-2" :class="{ 'border-orange-500': tab === 'avatars' }">
+                <li class="mb-2 pl-2 ltr:border-l-2 rtl:border-r-2" :class="{ 'border-orange-500': tab === 'avatars' }">
                   <inertia-link :href="data.statistics.url.avatars">
                     {{ $t('Avatars') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.avatars }})</span>
@@ -49,7 +51,7 @@
             <!-- title + cta -->
             <div class="mb-6 flex items-center justify-between">
               <h3>
-                <span class="mr-1"> 📸 </span>
+                <span class="ltr:mr-1 rtl:ml-1"> 📸 </span>
                 {{ $t('All the files') }}
               </h3>
             </div>
@@ -65,15 +67,15 @@
                 <!-- left part -->
                 <div class="mb-4 block items-center sm:mb-0 sm:flex">
                   <!-- created at -->
-                  <p class="mr-2 text-sm text-gray-400">
+                  <p class="text-sm text-gray-400 ltr:mr-2 rtl:ml-2">
                     {{ file.created_at }}
                   </p>
 
                   <!-- file name -->
-                  <p class="mr-4 flex max-w-none sm:max-w-sm">
+                  <p class="flex max-w-none ltr:mr-4 rtl:ml-4 sm:max-w-sm">
                     <span class="block truncate">{{ file.name }}</span>
 
-                    <span class="ml-2">
+                    <span class="ltr:ml-2 rtl:mr-2">
                       <span class="rounded border bg-blue-50 px-1 py-0 font-mono text-xs text-blue-500">
                         {{ file.size }}
                       </span>
@@ -82,7 +84,7 @@
 
                   <!-- avatar -->
                   <div v-if="file.object.type == 'contact'" class="flex items-center">
-                    <avatar :data="file.object.avatar" :classes="'rounded-full mr-2 h-4 w-4'" />
+                    <avatar :data="file.object.avatar" :classes="'rounded-full ltr:mr-2 rtl:ml-2 h-4 w-4'" />
                     <inertia-link :href="file.object.url.show" class="text-sm text-blue-500 hover:underline">
                       {{ file.object.name }}
                     </inertia-link>
@@ -91,7 +93,7 @@
 
                 <!-- right part -->
                 <ul class="text-sm">
-                  <li class="mr-4 inline">
+                  <li class="inline ltr:mr-4 rtl:ml-4">
                     <a :href="file.url.download" class="text-blue-500 hover:underline">{{ $t('Download') }}</a>
                   </li>
                   <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(file)">
diff --git a/resources/js/Pages/Vault/Group/Edit.vue b/resources/js/Pages/Vault/Group/Edit.vue
index eaa357435..98585fd48 100644
--- a/resources/js/Pages/Vault/Group/Edit.vue
+++ b/resources/js/Pages/Vault/Group/Edit.vue
@@ -57,15 +57,15 @@ const update = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Groups') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -75,10 +75,10 @@ const update = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">{{ data.name }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Group/Index.vue b/resources/js/Pages/Vault/Group/Index.vue
index ba5fac196..05826b1e6 100644
--- a/resources/js/Pages/Vault/Group/Index.vue
+++ b/resources/js/Pages/Vault/Group/Index.vue
@@ -13,7 +13,7 @@ defineProps({
     <main class="relative sm:mt-24">
       <div class="mx-auto max-w-4xl px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <h3 class="mb-6 font-semibold">
-          <span class="mr-1"> 👥 </span>
+          <span class="ltr:mr-1 rtl:ml-1"> 👥 </span>
           {{ $t('All groups in the vault') }}
         </h3>
 
diff --git a/resources/js/Pages/Vault/Group/Show.vue b/resources/js/Pages/Vault/Group/Show.vue
index f2a6bff3e..2e9c64d2e 100644
--- a/resources/js/Pages/Vault/Group/Show.vue
+++ b/resources/js/Pages/Vault/Group/Show.vue
@@ -43,15 +43,15 @@ const destroy = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.groups" class="text-blue-500 hover:underline">
                 {{ $t('Groups') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -77,14 +77,14 @@ const destroy = () => {
         <!-- group information -->
         <div class="mb-8 flex justify-center">
           <!-- number of contacts -->
-          <div class="mr-8 flex items-center">
+          <div class="flex items-center ltr:mr-8 rtl:ml-8">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
-              class="mr-1 h-4 w-4">
+              class="h-4 w-4 ltr:mr-1 rtl:ml-1">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -97,14 +97,14 @@ const destroy = () => {
           </div>
 
           <!-- type -->
-          <div class="mr-8 flex items-center">
+          <div class="flex items-center ltr:mr-8 rtl:ml-8">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
-              class="mr-1 h-4 w-4">
+              class="h-4 w-4 ltr:mr-1 rtl:ml-1">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -117,7 +117,7 @@ const destroy = () => {
           <!-- actions -->
           <div class="flex items-center">
             <ul class="list">
-              <li class="mr-4 inline">
+              <li class="inline ltr:mr-4 rtl:ml-4">
                 <inertia-link :href="props.data.url.edit" class="text-blue-500 hover:underline">{{
                   $t('Edit')
                 }}</inertia-link>
@@ -133,7 +133,7 @@ const destroy = () => {
         <div v-for="role in data.roles" :key="role.id" class="mb-8">
           <p
             v-if="role.contacts.length > 0"
-            class="mb-2 mr-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0">
+            class="mb-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0 ltr:mr-2 rtl:ml-2">
             {{ role.label }}
           </p>
 
@@ -146,7 +146,7 @@ const destroy = () => {
 
               <inertia-link :href="contact.url" class="text-blue-500 hover:underline">{{ contact.name }}</inertia-link>
 
-              <span v-if="contact.age" class="ml-1 text-xs text-gray-500">({{ contact.age }})</span>
+              <span v-if="contact.age" class="text-xs text-gray-500 ltr:ml-1 rtl:mr-1">({{ contact.age }})</span>
             </div>
           </div>
         </div>
@@ -167,7 +167,7 @@ const destroy = () => {
             </JetSecondaryButton>
 
             <JetDangerButton
-              class="ml-3"
+              class="ltr:ml-3 rtl:mr-3"
               :class="{ 'opacity-25': deleteGroupForm.processing }"
               :disabled="deleteGroupForm.processing"
               @click="destroy">
diff --git a/resources/js/Pages/Vault/Index.vue b/resources/js/Pages/Vault/Index.vue
index d24205b6a..2f633577a 100644
--- a/resources/js/Pages/Vault/Index.vue
+++ b/resources/js/Pages/Vault/Index.vue
@@ -4,7 +4,7 @@
       <!-- blank state -->
       <div v-if="data.vaults.length == 0" class="mx-auto mb-6 max-w-md px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <div
-          class="dark:bg-ghray-900 rounded-t-lg border-l border-r border-t border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
+          class="dark:bg-ghray-900 rounded-t-lg border-t border-gray-200 bg-white p-5 ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700 dark:bg-gray-900">
           <p class="mb-2 text-center text-xl">👋</p>
           <h2 class="mb-6 text-center text-lg font-semibold">
             {{ $t('Thanks for giving Monica a try') }}
@@ -174,11 +174,16 @@ export default {
   grid-template-rows: auto 1fr auto;
 }
 
-.remaining-contact {
+.ltr .remaining-contact {
   top: -1px;
   left: -5px;
 }
 
+.rtl .remaining-contact {
+  top: -1px;
+  right: -5px;
+}
+
 @media (max-width: 480px) {
   .vault-list {
     grid-template-columns: 1fr;
diff --git a/resources/js/Pages/Vault/Journal/Create.vue b/resources/js/Pages/Vault/Journal/Create.vue
index 8d2da8aec..e4caf4fce 100644
--- a/resources/js/Pages/Vault/Journal/Create.vue
+++ b/resources/js/Pages/Vault/Journal/Create.vue
@@ -40,15 +40,15 @@ const submit = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Journal/Edit.vue b/resources/js/Pages/Vault/Journal/Edit.vue
index ea77dde18..b7dd63897 100644
--- a/resources/js/Pages/Vault/Journal/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Edit.vue
@@ -43,15 +43,15 @@ const submit = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -61,10 +61,10 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">{{ data.name }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Journal/Index.vue b/resources/js/Pages/Vault/Journal/Index.vue
index ba8eaa320..030162661 100644
--- a/resources/js/Pages/Vault/Journal/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Index.vue
@@ -15,7 +15,7 @@ defineProps({
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="mr-1"> ✍️ </span>
+            <span class="ltr:mr-1 rtl:ml-1"> ✍️ </span>
             {{ $t('All the journals') }}
           </h3>
 
@@ -40,7 +40,7 @@ defineProps({
                 }}</inertia-link>
 
                 <div v-if="journal.last_updated" class="mb-2 flex items-center text-sm sm:mb-0">
-                  <span class="mr-1">
+                  <span class="ltr:mr-1 rtl:ml-1">
                     <svg
                       class="h-4 w-4 text-gray-500"
                       xmlns="http://www.w3.org/2000/svg"
diff --git a/resources/js/Pages/Vault/Journal/Metrics/Index.vue b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
index 595a3b5bc..4c812e8c9 100644
--- a/resources/js/Pages/Vault/Journal/Metrics/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
@@ -73,15 +73,15 @@ const destroy = (metric) => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -91,12 +91,12 @@ const destroy = (metric) => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.journal.url.show" class="text-blue-500 hover:underline">{{
                 data.journal.name
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -117,7 +117,7 @@ const destroy = (metric) => {
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="mr-1"> 📊 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 📊 </span>
             {{ $t('All journal metrics in :name', { name: data.journal.name }) }}
           </h3>
 
diff --git a/resources/js/Pages/Vault/Journal/Photo/Index.vue b/resources/js/Pages/Vault/Journal/Photo/Index.vue
index 7bd6d78c8..28eaf8710 100644
--- a/resources/js/Pages/Vault/Journal/Photo/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Photo/Index.vue
@@ -14,15 +14,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -52,14 +52,14 @@ defineProps({
             <inertia-link
               :href="data.url.show"
               :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': defaultTab === 'activity' }"
-              class="inline-flex items-center rounded-l-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-l-lg rtl:rounded-r-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-2 h-4 w-4">
+                class="h-4 w-4 ltr:mr-2 rtl:ml-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -70,14 +70,14 @@ defineProps({
             </inertia-link>
 
             <inertia-link
-              class="inline-flex items-center rounded-r-md border-b border-r border-t border-gray-200 bg-gray-100 bg-white px-4 py-2 text-sm font-medium text-blue-700 text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-400 dark:bg-gray-700 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center rounded-r-md border-b border-t border-gray-200 bg-gray-100 bg-white px-4 py-2 text-sm font-medium text-blue-700 text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:border-r rtl:border-l dark:border-gray-600 dark:bg-gray-400 dark:bg-gray-700 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-2 h-4 w-4">
+                class="h-4 w-4 ltr:mr-2 rtl:ml-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -93,7 +93,7 @@ defineProps({
           <div
             v-for="photo in data.photos"
             :key="photo.id"
-            class="mr-2 cursor-pointer rounded-md border border-gray-200 p-2 shadow-sm hover:bg-slate-50 hover:shadow-lg dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+            class="cursor-pointer rounded-md border border-gray-200 p-2 shadow-sm hover:bg-slate-50 hover:shadow-lg ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <img :src="photo.url.display" :alt="photo.name" />
           </div>
         </div>
diff --git a/resources/js/Pages/Vault/Journal/Post/Edit.vue b/resources/js/Pages/Vault/Journal/Post/Edit.vue
index 6f734ae0d..582f582c5 100644
--- a/resources/js/Pages/Vault/Journal/Post/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Edit.vue
@@ -172,15 +172,15 @@ const destroy = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -195,7 +195,7 @@ const destroy = () => {
                 {{ data.journal.name }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -205,12 +205,12 @@ const destroy = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.show" class="text-blue-500 hover:underline">
                 {{ data.title }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -244,7 +244,7 @@ const destroy = () => {
                   :key="photo.id"
                   class="item-list flex items-center justify-between border-b border-gray-200 p-3 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                   <div class="flex">
-                    <img :src="photo.url.show" class="mr-4" width="75" height="75" />
+                    <img :src="photo.url.show" class="ltr:mr-4 rtl:ml-4" width="75" height="75" />
 
                     <ul>
                       <li class="mb-2 text-sm">{{ photo.name }}</li>
@@ -312,7 +312,8 @@ const destroy = () => {
                 v-if="!data.canUploadFile"
                 class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
                 <p class="bg-gray-100 p-3 text-center">
-                  <span class="mr-1">⚠️</span> {{ $t('You don’t have enough space left in your account.') }}
+                  <span class="ltr:mr-1 rtl:ml-1">⚠️</span>
+                  {{ $t('You don’t have enough space left in your account.') }}
                 </p>
               </div>
             </div>
@@ -359,7 +360,7 @@ const destroy = () => {
             <div class="mb-6 text-sm">
               <div v-if="!saveInProgress" class="flex items-center justify-center">
                 <svg
-                  class="mr-2 h-4 w-4 text-green-700"
+                  class="h-4 w-4 text-green-700 ltr:mr-2 rtl:ml-2"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -375,7 +376,7 @@ const destroy = () => {
               </div>
 
               <div v-if="saveInProgress" class="flex items-center justify-center">
-                <div class="saving-spinner mr-3">
+                <div class="saving-spinner ltr:mr-3 rtl:ml-3">
                   <div class="dot"></div>
                   <div class="dot"></div>
                   <div class="dot"></div>
@@ -425,7 +426,7 @@ const destroy = () => {
             <ul class="mb-6 text-sm">
               <li class="mb-2 flex items-center">
                 <svg
-                  class="mr-2 h-4 w-4"
+                  class="h-4 w-4 ltr:mr-2 rtl:ml-2"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -443,7 +444,7 @@ const destroy = () => {
               </li>
               <li class="mb-2 flex items-center">
                 <svg
-                  class="mr-2 h-4 w-4"
+                  class="h-4 w-4 ltr:mr-2 rtl:ml-2"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -463,7 +464,7 @@ const destroy = () => {
               </li>
               <li class="flex items-center">
                 <svg
-                  class="mr-2 h-4 w-4"
+                  class="h-4 w-4 ltr:mr-2 rtl:ml-2"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -507,7 +508,7 @@ const destroy = () => {
         </JetSecondaryButton>
 
         <JetDangerButton
-          class="ml-3"
+          class="ltr:ml-3 rtl:mr-3"
           :class="{ 'opacity-25': processPhotoDeletion }"
           :disabled="processPhotoDeletion"
           @click="destroyPhoto(file)">
@@ -560,7 +561,6 @@ const destroy = () => {
   height: 10px;
   width: 10px;
   background-color: #88d772;
-  left: calc(15px * 4);
   position: absolute;
   margin: 0 auto;
   border-radius: 2px;
@@ -568,6 +568,14 @@ const destroy = () => {
   animation: saving-spinner-animation 2500ms linear infinite;
 }
 
+.ltr .saving-spinner .dot {
+  left: calc(15px * 4);
+}
+
+.rtl .saving-spinner .dot {
+  right: calc(15px * 4);
+}
+
 .saving-spinner .dot:nth-child(1) {
   animation-delay: calc(2500ms * 1 / -1.5);
 }
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
index 805ff4786..de066c9b8 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
@@ -90,7 +90,7 @@ const destroy = (journalMetric, postMetric) => {
             <span
               @click="destroy(journalMetric, postMetric)"
               v-if="editModeJournalMetricId === journalMetric.id"
-              class="ml-2">
+              class="ltr:ml-2 rtl:mr-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -108,7 +108,7 @@ const destroy = (journalMetric, postMetric) => {
         <li
           @click="showAddMetricModal(journalMetric)"
           v-if="!addModalShown && editModeJournalMetricId != journalMetric.id"
-          class="mb-6 mr-3 inline cursor-pointer text-sm text-blue-500 hover:underline">
+          class="mb-6 inline cursor-pointer text-sm text-blue-500 hover:underline ltr:mr-3 rtl:ml-3">
           {{ $t('add a new metric') }}
         </li>
         <li
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue b/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
index 3542bd960..9e1b88b37 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
@@ -47,7 +47,7 @@
           class="flex cursor-pointer items-center justify-between border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
           @click="set(tag)">
           <div>
-            <span class="mr-2 inline-block h-4 w-4 rounded-full" :class="tag.bg_color" />
+            <span class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="tag.bg_color" />
             <span>{{ tag.name }}</span>
           </div>
 
@@ -84,7 +84,7 @@
       <span
         v-for="tag in localTags"
         :key="tag.id"
-        class="mr-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0">
+        class="inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0 ltr:mr-2 rtl:ml-2">
         <inertia-link :href="tag.url.show">{{ tag.name }}</inertia-link>
       </span>
     </div>
diff --git a/resources/js/Pages/Vault/Journal/Post/Show.vue b/resources/js/Pages/Vault/Journal/Post/Show.vue
index 6a61d55e1..32c48ae2f 100644
--- a/resources/js/Pages/Vault/Journal/Post/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Show.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -38,7 +38,7 @@ defineProps({
                 {{ data.journal.name }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -60,7 +60,7 @@ defineProps({
       <div class="mx-auto max-w-6xl px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
           <!-- left -->
-          <div class="mr-8">
+          <div class="ltr:mr-8 rtl:ml-8">
             <!-- post previous/next -->
             <div class="mb-4 flex justify-between">
               <!-- previous post -->
@@ -71,7 +71,7 @@ defineProps({
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke="currentColor"
-                  class="mr-1 h-4 w-4 text-gray-400">
+                  class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
                 </svg>
 
@@ -99,7 +99,7 @@ defineProps({
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke="currentColor"
-                  class="ml-1 h-4 w-4 text-gray-400">
+                  class="h-4 w-4 text-gray-400 ltr:ml-1 rtl:mr-1">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
                 </svg>
               </div>
@@ -115,7 +115,7 @@ defineProps({
                 <li
                   v-for="tag in data.tags"
                   :key="tag.id"
-                  class="mr-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0 dark:bg-neutral-800">
+                  class="inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0 ltr:mr-2 rtl:ml-2 dark:bg-neutral-800">
                   {{ tag.name }}
                 </li>
               </ul>
@@ -128,7 +128,7 @@ defineProps({
                 <div
                   v-for="photo in data.photos"
                   :key="photo.id"
-                  class="mr-2 rounded-md border border-gray-200 p-2 shadow-sm hover:bg-slate-50 hover:shadow-lg dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+                  class="rounded-md border border-gray-200 p-2 shadow-sm hover:bg-slate-50 hover:shadow-lg ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                   <img :src="photo.url.display" :alt="photo.name" />
                 </div>
               </div>
@@ -156,7 +156,10 @@ defineProps({
               <p class="mb-2 text-sm font-semibold">{{ $t('Contacts in this post') }}</p>
 
               <div v-for="contact in data.contacts" :key="contact.id" class="mb-2 block">
-                <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full mr-2'" :displayName="true" />
+                <contact-card
+                  :contact="contact"
+                  :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
+                  :displayName="true" />
               </div>
             </div>
 
@@ -165,7 +168,7 @@ defineProps({
               <p class="mb-2 text-sm font-semibold">{{ $t('Slice of life') }}</p>
               <div class="mb-6 last:mb-0">
                 <div
-                  class="rounded border-b border-l border-r border-t border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
+                  class="rounded border-b border-t border-gray-200 px-3 py-2 hover:bg-slate-50 ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
                   :class="data.sliceOfLife.cover_image ? '' : 'border-t'">
                   <inertia-link :href="data.sliceOfLife.url.show" class="font-semibold">{{
                     data.sliceOfLife.name
@@ -262,7 +265,9 @@ defineProps({
     width: 100%;
     z-index: -1;
   }
+}
 
+.ltr .post {
   &:before {
     background: #fafafa;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@@ -280,6 +285,24 @@ defineProps({
   }
 }
 
+.rtl .post {
+  &:before {
+    background: #fafafa;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    right: -5px;
+    top: 4px;
+    transform: rotate(-2.5deg);
+  }
+
+  &:after {
+    background: #f6f6f6;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+    left: -3px;
+    top: 1px;
+    transform: rotate(1.4deg);
+  }
+}
+
 .dark .dark\:post {
   box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
 
diff --git a/resources/js/Pages/Vault/Journal/Post/Template.vue b/resources/js/Pages/Vault/Journal/Post/Template.vue
index 7136e7f83..b42228549 100644
--- a/resources/js/Pages/Vault/Journal/Post/Template.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Template.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -38,7 +38,7 @@ defineProps({
                 {{ data.journal.name }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Journal/Show.vue b/resources/js/Pages/Vault/Journal/Show.vue
index 2f9357fc5..f8373dc27 100644
--- a/resources/js/Pages/Vault/Journal/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Show.vue
@@ -29,15 +29,15 @@ const destroy = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -66,14 +66,14 @@ const destroy = () => {
           <div class="mb-8 inline-flex rounded-md shadow-sm">
             <inertia-link
               :href="data.url.show"
-              class="inline-flex items-center rounded-l-lg border border-gray-200 bg-gray-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-400 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center border border-gray-200 bg-gray-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-l-lg rtl:rounded-r-lg dark:border-gray-600 dark:bg-gray-400 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-2 h-4 w-4">
+                class="h-4 w-4 ltr:mr-2 rtl:ml-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -86,14 +86,14 @@ const destroy = () => {
             <inertia-link
               :href="data.url.photo_index"
               :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': defaultTab === 'life_events' }"
-              class="inline-flex items-center rounded-r-md border-b border-r border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center rounded-r-md border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:border-r rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-2 h-4 w-4">
+                class="h-4 w-4 ltr:mr-2 rtl:ml-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -110,7 +110,7 @@ const destroy = () => {
           <div class="p-3 sm:p-0">
             <!-- years -->
             <p v-if="data.years.length > 0" class="mb-2 font-medium">
-              <span class="mr-1"> 📆 </span> {{ $t('Years') }}
+              <span class="ltr:mr-1 rtl:ml-1"> 📆 </span> {{ $t('Years') }}
             </p>
             <ul v-if="data.years.length > 0" class="mb-8">
               <li v-for="year in data.years" :key="year.year" class="mb-2 flex items-center justify-between last:mb-0">
@@ -121,7 +121,7 @@ const destroy = () => {
 
             <!-- tags -->
             <p v-if="data.tags.length > 0" class="mb-2 font-medium">
-              <span class="mr-1"> ⚡ </span> {{ $t('All tags') }}
+              <span class="ltr:mr-1 rtl:ml-1"> ⚡ </span> {{ $t('All tags') }}
             </p>
             <ul v-if="data.tags.length > 0" class="">
               <li v-for="tag in data.tags" :key="tag.id" class="mb-2 flex items-center justify-between">
@@ -172,7 +172,7 @@ const destroy = () => {
                       :key="post.id"
                       class="flex items-center border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                       <!-- written at -->
-                      <div class="mr-4 rounded-lg border border-gray-200 p-2 text-center leading-tight">
+                      <div class="rounded-lg border border-gray-200 p-2 text-center leading-tight ltr:mr-4 rtl:ml-4">
                         <span class="block text-xs uppercase">{{ post.written_at_day }}</span>
                         <span class="text-xl">{{ post.written_at_day_number }}</span>
                       </div>
@@ -214,12 +214,12 @@ const destroy = () => {
             </div>
 
             <!-- slices of life -->
-            <p class="mb-2 font-medium"><span class="mr-1"> 🍕 </span> {{ $t('Slices of life') }}</p>
+            <p class="mb-2 font-medium"><span class="ltr:mr-1 rtl:ml-1"> 🍕 </span> {{ $t('Slices of life') }}</p>
             <div v-if="data.slices.length > 0" class="mb-2">
               <div v-for="slice in data.slices" :key="slice.id" class="mb-6 last:mb-0">
                 <img v-if="slice.cover_image" class="h-32 w-full rounded-t" :src="slice.cover_image" alt="" />
                 <div
-                  class="rounded-b border-b border-l border-r border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
+                  class="rounded-b border-b border-gray-200 px-3 py-2 hover:bg-slate-50 ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
                   :class="slice.cover_image ? '' : 'border-t'">
                   <inertia-link :href="slice.url.show" class="font-semibold">{{ slice.name }}</inertia-link>
                   <p class="text-xs text-gray-600">{{ slice.date_range }}</p>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Edit.vue b/resources/js/Pages/Vault/Journal/Slices/Edit.vue
index fa9a08f8f..8275b7a35 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Edit.vue
@@ -41,15 +41,15 @@ const submit = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -59,12 +59,12 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.journal.url.show" class="text-blue-500 hover:underline">{{
                 data.journal.name
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -74,12 +74,12 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.slices_index" class="text-blue-500 hover:underline">{{
                 $t('Slices of life')
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -89,12 +89,12 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.slice.url.show" class="text-blue-500 hover:underline">{{
                 data.slice.name
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Journal/Slices/Index.vue b/resources/js/Pages/Vault/Journal/Slices/Index.vue
index 867319f06..b58ef6dfb 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Index.vue
@@ -52,15 +52,15 @@ const submit = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -70,12 +70,12 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.journal.url.show" class="text-blue-500 hover:underline">{{
                 data.journal.name
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -96,7 +96,7 @@ const submit = () => {
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="mr-1"> 🍕 </span>
+            <span class="ltr:mr-1 rtl:ml-1"> 🍕 </span>
 
             {{ $t('All the slices of life in :name', { name: data.journal.name }) }}
           </h3>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Show.vue b/resources/js/Pages/Vault/Journal/Slices/Show.vue
index 88cbe7afa..79369eb59 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Show.vue
@@ -66,15 +66,15 @@ const destroy = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -84,12 +84,12 @@ const destroy = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.journal.url.show" class="text-blue-500 hover:underline">{{
                 data.journal.name
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -99,12 +99,12 @@ const destroy = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.slices_index" class="text-blue-500 hover:underline">{{
                 $t('Slices of life')
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -167,7 +167,7 @@ const destroy = () => {
             v-if="!data.canUploadFile"
             class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <p class="bg-gray-100 p-3 text-center">
-              <span class="mr-1">⚠️</span> {{ $t('You don’t have enough space left in your account.') }}
+              <span class="ltr:mr-1 rtl:ml-1">⚠️</span> {{ $t('You don’t have enough space left in your account.') }}
             </p>
           </div>
 
@@ -191,7 +191,7 @@ const destroy = () => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-0 h-4 pr-2">
+                class="h-4 pr-2 ltr:mr-0 rtl:ml-0">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -209,7 +209,7 @@ const destroy = () => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-0 h-4 pr-2">
+                class="h-4 pr-2 ltr:mr-0 rtl:ml-0">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -224,7 +224,10 @@ const destroy = () => {
               <p class="mb-2 text-sm font-bold">{{ $t('Contacts in this slice') }}</p>
               <ul class="mb-6">
                 <li v-for="contact in data.contacts" :key="contact.id">
-                  <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full mr-2'" :displayName="true" />
+                  <contact-card
+                    :contact="contact"
+                    :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
+                    :displayName="true" />
                 </li>
               </ul>
             </div>
@@ -262,7 +265,7 @@ const destroy = () => {
                 :key="post.id"
                 class="flex items-center border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- written at -->
-                <div class="mr-4 rounded-lg border border-gray-200 p-2 text-center leading-tight">
+                <div class="rounded-lg border border-gray-200 p-2 text-center leading-tight ltr:mr-4 rtl:ml-4">
                   <span class="block text-xs uppercase">{{ post.written_at_day }}</span>
                   <span class="text-xl">{{ post.written_at_day_number }}</span>
                 </div>
diff --git a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
index 04bb74b8f..e13a0cb6f 100644
--- a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -33,12 +33,12 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline">{{
                 $t('List of addresses')
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -48,7 +48,7 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">{{ data.city }}</li>
+            <li class="inline ltr:mr-2 rtl:ml-2">{{ data.city }}</li>
           </ul>
         </div>
       </div>
@@ -83,8 +83,11 @@ defineProps({
                 class="item-list border-b border-gray-200 px-3 pb-2 pt-3 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <span class="mb-1 block">{{ address.address }}</span>
                 <ul class="list">
-                  <li v-for="contact in address.contacts" :key="contact.id" class="mr-3 inline">
-                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full mr-2'" :displayName="true" />
+                  <li v-for="contact in address.contacts" :key="contact.id" class="inline ltr:mr-3 rtl:ml-3">
+                    <contact-card
+                      :contact="contact"
+                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
+                      :displayName="true" />
                   </li>
                 </ul>
               </li>
diff --git a/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
index fdf62239e..ae1f73fd7 100644
--- a/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -33,12 +33,12 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline">{{
                 $t('List of addresses')
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -48,7 +48,7 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="mr-2 inline">{{ data.country }}</li>
+            <li class="inline ltr:mr-2 rtl:ml-2">{{ data.country }}</li>
           </ul>
         </div>
       </div>
@@ -83,8 +83,11 @@ defineProps({
                 class="item-list border-b border-gray-200 px-3 pb-2 pt-3 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <span class="mb-1 block">{{ address.address }}</span>
                 <ul class="list">
-                  <li v-for="contact in address.contacts" :key="contact.id" class="mr-3 inline">
-                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full mr-2'" :displayName="true" />
+                  <li v-for="contact in address.contacts" :key="contact.id" class="inline ltr:mr-3 rtl:ml-3">
+                    <contact-card
+                      :contact="contact"
+                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
+                      :displayName="true" />
                   </li>
                 </ul>
               </li>
diff --git a/resources/js/Pages/Vault/Reports/Address/Index.vue b/resources/js/Pages/Vault/Reports/Address/Index.vue
index 27394494b..fd7570a22 100644
--- a/resources/js/Pages/Vault/Reports/Address/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Index.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -44,7 +44,7 @@ defineProps({
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
           <!-- left -->
           <div>
-            <p class="mb-2 font-semibold"><span class="mr-1">🌍</span> {{ $t('All the countries') }}</p>
+            <p class="mb-2 font-semibold"><span class="ltr:mr-1 rtl:ml-1">🌍</span> {{ $t('All the countries') }}</p>
 
             <!-- list of countries -->
             <ul v-if="data.countries.length > 0">
@@ -65,7 +65,7 @@ defineProps({
 
           <!-- right -->
           <div class="p-3 sm:px-3 sm:py-0">
-            <p class="mb-2 font-semibold"><span class="mr-1">🏙️</span> {{ $t('All the cities') }}</p>
+            <p class="mb-2 font-semibold"><span class="ltr:mr-1 rtl:ml-1">🏙️</span> {{ $t('All the cities') }}</p>
 
             <!-- list of cities -->
             <ul v-if="data.cities.length > 0">
diff --git a/resources/js/Pages/Vault/Reports/ImportantDate/Index.vue b/resources/js/Pages/Vault/Reports/ImportantDate/Index.vue
index 25a1d8f5d..002151de5 100644
--- a/resources/js/Pages/Vault/Reports/ImportantDate/Index.vue
+++ b/resources/js/Pages/Vault/Reports/ImportantDate/Index.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -76,14 +76,14 @@ defineProps({
               :key="date.id"
               class="item-list flex items-center justify-between border-b border-gray-200 p-3 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <div>
-                <span class="mr-3 font-mono text-xs text-gray-600">{{ date.happened_at }}</span>
+                <span class="font-mono text-xs text-gray-600 ltr:mr-3 rtl:ml-3">{{ date.happened_at }}</span>
                 <span>{{ date.label }}</span>
               </div>
 
               <div>
                 <contact-card
                   :contact="date.contact"
-                  :avatarClasses="'h-5 w-5 rounded-full mr-2'"
+                  :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
                   :displayName="true" />
               </div>
             </li>
diff --git a/resources/js/Pages/Vault/Reports/MoodTrackingEvents/Index.vue b/resources/js/Pages/Vault/Reports/MoodTrackingEvents/Index.vue
index 867709849..1776c50af 100644
--- a/resources/js/Pages/Vault/Reports/MoodTrackingEvents/Index.vue
+++ b/resources/js/Pages/Vault/Reports/MoodTrackingEvents/Index.vue
@@ -14,15 +14,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="mr-2 inline text-gray-600 dark:text-gray-400">
+            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="inline ltr:mr-2 rtl:ml-2">
               <inertia-link :href="data.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative mr-2 inline">
+            <li class="relative inline ltr:mr-2 rtl:ml-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -65,12 +65,15 @@ defineProps({
         <!-- iteration over the month -->
         <div class="flex justify-center">
           <div v-for="month in data.months" :key="month.id" class="mb-6 flex flex-col text-center">
-            <h2 class="mb-1 mr-2 font-mono text-sm font-bold">{{ month.month_word }}</h2>
+            <h2 class="mb-1 font-mono text-sm font-bold ltr:mr-2 rtl:ml-2">{{ month.month_word }}</h2>
 
             <div v-for="day in month.days" :key="day.id">
-              <div v-if="day.event" class="mr-2 inline-block h-4 w-4 rounded-full" :class="day.event.hex_color" />
-              <div v-else class="mr-2 inline-block h-4 w-4 rounded-full">
-                <div class="mr-2 inline-block h-4 w-4 rounded-full bg-slate-100" />
+              <div
+                v-if="day.event"
+                class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2"
+                :class="day.event.hex_color" />
+              <div v-else class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2">
+                <div class="inline-block h-4 w-4 rounded-full bg-slate-100 ltr:mr-2 rtl:ml-2" />
               </div>
             </div>
           </div>
diff --git a/resources/js/Pages/Vault/Search/Partials/Note.vue b/resources/js/Pages/Vault/Search/Partials/Note.vue
index c02ba8cb2..80b6c763f 100644
--- a/resources/js/Pages/Vault/Search/Partials/Note.vue
+++ b/resources/js/Pages/Vault/Search/Partials/Note.vue
@@ -49,7 +49,7 @@
         <div
           class="flex border-t border-gray-200 px-3 py-2 text-xs text-gray-600 hover:rounded-b hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 dark:text-gray-400 hover:dark:bg-slate-800">
           <!-- date -->
-          <div class="relative mr-3 inline">
+          <div class="relative inline ltr:mr-3 rtl:ml-3">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               class="icon-note relative inline h-4 w-4 text-gray-400"
@@ -66,10 +66,10 @@
           </div>
 
           <!-- contact -->
-          <div class="relative mr-3 inline">
+          <div class="relative inline ltr:mr-3 rtl:ml-3">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="icon-note relative mr-1 inline h-4 w-4 text-gray-400"
+              class="icon-note relative inline h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
diff --git a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
index ea8b39be1..36ee88b8f 100644
--- a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> 📁 </span>
+        <span class="ltr:mr-1 rtl:ml-1"> 📁 </span>
         {{ $t('All the important date types used in the vault') }}
       </h3>
       <pretty-button v-if="!createTypeModalShown" :text="$t('Add a type')" :icon="'plus'" @click="showTypeModal" />
@@ -51,7 +51,7 @@
             {{ type.label }}
             <span
               v-if="type.internal_type"
-              class="mr-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0"
+              class="inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0 ltr:mr-2 rtl:ml-2"
               >{{ type.internal_type }}</span
             >
           </span>
@@ -63,7 +63,7 @@
             </li>
             <li
               v-if="type.can_be_deleted"
-              class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900 hover:dark:text-red-100"
+              class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4 hover:dark:text-red-100"
               @click="destroy(type)">
               {{ $t('Delete') }}
             </li>
diff --git a/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
index c4edfa48a..e855c8465 100644
--- a/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> 📐 </span>
+        <span class="ltr:mr-1 rtl:ml-1"> 📐 </span>
         {{ $t('Default template to display contacts') }}
       </h3>
     </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Delete.vue b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
index fd18f2d80..91a63c065 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Delete.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> 🗑 </span>
+        <span class="ltr:mr-1 rtl:ml-1"> 🗑 </span>
         {{ $t('Delete the vault') }}
       </h3>
     </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Labels.vue b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
index f40f57288..37a3887fb 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Labels.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> 🏷 </span>
+        <span class="ltr:mr-1 rtl:ml-1"> 🏷 </span>
         {{ $t('All the labels used in the vault') }}
       </h3>
       <pretty-button v-if="!createlabelModalShown" :text="$t('Add a label')" :icon="'plus'" @click="showLabelModal" />
@@ -45,7 +45,7 @@
               @click="form.text_color = color.text_color" />
             <label
               :for="color.bg_color"
-              class="ml-2 inline-block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              class="inline-block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
               <div class="rounded p-4" :class="color.bg_color" />
             </label>
           </div>
@@ -69,8 +69,8 @@
         <!-- detail of the label -->
         <div v-if="editLabelModalShownId != label.id" class="flex items-center justify-between px-5 py-2">
           <span class="flex items-center text-base">
-            <div class="mr-2 inline-block h-4 w-4 rounded-full" :class="label.bg_color" />
-            <span class="mr-2">{{ label.name }}</span>
+            <div class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="label.bg_color" />
+            <span class="ltr:mr-2 rtl:ml-2">{{ label.name }}</span>
             <span v-if="label.count > 0" class="text-xs text-gray-500"
               >({{ $tChoice(':count contact|:count contacts', label.count, { count: label.count }) }})</span
             >
@@ -78,7 +78,7 @@
 
           <!-- actions -->
           <ul class="text-sm">
-            <li class="mr-4 inline cursor-pointer" @click="updateLabelModal(label)">
+            <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateLabelModal(label)">
               <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
             </li>
             <li
@@ -125,7 +125,7 @@
                   @click="form.text_color = color.text_color" />
                 <label
                   :for="color.bg_color"
-                  class="ml-2 inline-block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="inline-block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                   <div class="rounded p-4" :class="color.bg_color" />
                 </label>
               </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
index 855fd08ed..9bcbec081 100644
--- a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
@@ -200,7 +200,7 @@ const destroyLifeEventType = (lifeEventType) => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> 👩‍🍼 </span>
+        <span class="ltr:mr-1 rtl:ml-1"> 👩‍🍼 </span>
         {{ $t('Life event types and categories') }}
       </h3>
       <pretty-button
@@ -251,9 +251,9 @@ const destroyLifeEventType = (lifeEventType) => {
               class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
               <div class="mb-3 flex items-center justify-between">
                 <!-- icon to move position -->
-                <div class="mr-2 flex">
+                <div class="flex ltr:mr-2 rtl:ml-2">
                   <svg
-                    class="handle mr-2 cursor-move"
+                    class="handle cursor-move ltr:mr-2 rtl:ml-2"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -278,14 +278,16 @@ const destroyLifeEventType = (lifeEventType) => {
                   <li class="inline cursor-pointer" @click="renameLifeEventCategoryModal(element)">
                     <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                   </li>
-                  <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
+                  <li
+                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                    @click="destroy(element)">
                     {{ $t('Delete') }}
                   </li>
                 </ul>
               </div>
 
               <!-- available life event types -->
-              <div class="ml-8">
+              <div class="ltr:ml-8 rtl:mr-8">
                 <p class="mb-1 text-sm text-gray-500">{{ $t('Life event types:') }}</p>
 
                 <draggable
@@ -300,9 +302,9 @@ const destroyLifeEventType = (lifeEventType) => {
                         class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                         <div class="flex items-center justify-between">
                           <!-- icon to move position -->
-                          <div class="mr-2 flex">
+                          <div class="flex ltr:mr-2 rtl:ml-2">
                             <svg
-                              class="handle mr-2 cursor-move"
+                              class="handle cursor-move ltr:mr-2 rtl:ml-2"
                               width="24"
                               height="24"
                               viewBox="0 0 24 24"
@@ -328,7 +330,7 @@ const destroyLifeEventType = (lifeEventType) => {
                               <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                             </li>
                             <li
-                              class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                              class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                               @click="destroyLifeEventType(element)">
                               {{ $t('Delete') }}
                             </li>
diff --git a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
index 9a457b2df..e6df61628 100644
--- a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
@@ -114,7 +114,7 @@ const updatePosition = (event) => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> 🤭 </span>
+        <span class="ltr:mr-1 rtl:ml-1"> 🤭 </span>
         {{ $t('Mood tracking parameters') }}
       </h3>
       <pretty-button
@@ -159,7 +159,7 @@ const updatePosition = (event) => {
               @click="form.hex_color = color.hex_color" />
             <label
               :for="color.hex_color"
-              class="ml-2 inline-block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              class="inline-block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
               <div class="rounded p-4" :class="color.hex_color" />
             </label>
           </div>
@@ -202,9 +202,9 @@ const updatePosition = (event) => {
             v-if="editMoodTrackingParameterId != element.id"
             class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- icon to move position -->
-            <div class="mr-2 flex items-center">
+            <div class="flex items-center ltr:mr-2 rtl:ml-2">
               <svg
-                class="handle mr-2 cursor-move"
+                class="handle cursor-move ltr:mr-2 rtl:ml-2"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
@@ -221,8 +221,8 @@ const updatePosition = (event) => {
                 <path d="M17 15H15V17H17V15Z" fill="currentColor" />
               </svg>
 
-              <div class="mr-2 inline-block h-4 w-4 rounded-full" :class="element.hex_color" />
-              <span class="mr-2">{{ element.label }}</span>
+              <div class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="element.hex_color" />
+              <span class="ltr:mr-2 rtl:ml-2">{{ element.label }}</span>
             </div>
 
             <!-- actions -->
@@ -232,7 +232,9 @@ const updatePosition = (event) => {
                 @click="renameMoodTrackingParameterModal(element)">
                 {{ $t('Rename') }}
               </li>
-              <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
+              <li
+                class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                @click="destroy(element)">
                 {{ $t('Delete') }}
               </li>
             </ul>
@@ -275,7 +277,7 @@ const updatePosition = (event) => {
                     @click="form.hex_color = color.hex_color" />
                   <label
                     :for="color.hex_color"
-                    class="ml-2 inline-block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="inline-block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                     <div class="rounded p-4" :class="color.hex_color" />
                   </label>
                 </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
index 2823c815d..632950b6c 100644
--- a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
@@ -107,7 +107,7 @@ const updatePosition = (event) => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> 🧑‍🏭 </span>
+        <span class="ltr:mr-1 rtl:ml-1"> 🧑‍🏭 </span>
         {{ $t('Quick facts template') }}
       </h3>
       <pretty-button
@@ -159,9 +159,9 @@ const updatePosition = (event) => {
             v-if="editEntryId != element.id"
             class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- icon to move position -->
-            <div class="mr-2 flex">
+            <div class="flex ltr:mr-2 rtl:ml-2">
               <svg
-                class="handle mr-2 cursor-move"
+                class="handle cursor-move ltr:mr-2 rtl:ml-2"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
@@ -186,7 +186,9 @@ const updatePosition = (event) => {
               <li class="inline cursor-pointer" @click="renameEntryModal(element)">
                 <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
               </li>
-              <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
+              <li
+                class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                @click="destroy(element)">
                 {{ $t('Delete') }}
               </li>
             </ul>
diff --git a/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue b/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
index 7bfed2123..5f836a63f 100644
--- a/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
@@ -36,7 +36,7 @@ const update = () => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> 🎟️ </span>
+        <span class="ltr:mr-1 rtl:ml-1"> 🎟️ </span>
 
         {{ $t('Tabs visibility') }}
       </h3>
@@ -68,8 +68,8 @@ const update = () => {
               class="peer sr-only"
               @change="update" />
             <div
-              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ml-3 dark:text-gray-300"> {{ $t('Show Calendar tab') }} </span>
+              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Calendar tab') }} </span>
           </label>
         </li>
         <li
@@ -82,8 +82,8 @@ const update = () => {
               class="peer sr-only"
               @change="update" />
             <div
-              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ml-3 dark:text-gray-300"> {{ $t('Show Journals tab') }} </span>
+              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Journals tab') }} </span>
           </label>
         </li>
         <li
@@ -96,8 +96,8 @@ const update = () => {
               class="peer sr-only"
               @change="update" />
             <div
-              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ml-3 dark:text-gray-300"> {{ $t('Show Groups tab') }} </span>
+              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Groups tab') }} </span>
           </label>
         </li>
         <li
@@ -110,8 +110,8 @@ const update = () => {
               class="peer sr-only"
               @change="update" />
             <div
-              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ml-3 dark:text-gray-300"> {{ $t('Show Companies tab') }} </span>
+              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Companies tab') }} </span>
           </label>
         </li>
         <li
@@ -124,8 +124,8 @@ const update = () => {
               class="peer sr-only"
               @change="update" />
             <div
-              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ml-3 dark:text-gray-300"> {{ $t('Show Tasks tab') }} </span>
+              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Tasks tab') }} </span>
           </label>
         </li>
         <li
@@ -138,8 +138,8 @@ const update = () => {
               class="peer sr-only"
               @change="update" />
             <div
-              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ml-3 dark:text-gray-300"> {{ $t('Show Reports tab') }} </span>
+              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Reports tab') }} </span>
           </label>
         </li>
         <li
@@ -152,8 +152,8 @@ const update = () => {
               class="peer sr-only"
               @change="update" />
             <div
-              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ml-3 dark:text-gray-300"> {{ $t('Show Files tab') }} </span>
+              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Files tab') }} </span>
           </label>
         </li>
       </ul>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Tags.vue b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
index 948618d95..e0c93a66e 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Tags.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> ⚡ </span>
+        <span class="ltr:mr-1 rtl:ml-1"> ⚡ </span>
         {{ $t('All the tags used in the vault') }}
       </h3>
       <pretty-button v-if="!createTagModalShown" :text="$t('Add a tag')" :icon="'plus'" @click="showLabelModal" />
@@ -48,7 +48,7 @@
         <!-- detail of the tag -->
         <div v-if="editTagModalShownId != tag.id" class="flex items-center justify-between px-5 py-2">
           <span class="flex items-center text-base">
-            <span class="mr-2">{{ tag.name }}</span>
+            <span class="ltr:mr-2 rtl:ml-2">{{ tag.name }}</span>
             <span v-if="tag.count > 0" class="text-xs text-gray-500"
               >({{ $tChoice(':count post|:count posts', tag.count, { count: tag.count }) }})</span
             >
@@ -56,7 +56,7 @@
 
           <!-- actions -->
           <ul class="text-sm">
-            <li class="mr-4 inline cursor-pointer" @click="updateTagModal(tag)">
+            <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateTagModal(tag)">
               <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
             </li>
             <li
diff --git a/resources/js/Pages/Vault/Settings/Partials/Users.vue b/resources/js/Pages/Vault/Settings/Partials/Users.vue
index 47bc480cb..810b411de 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Users.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Users.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="mr-1"> 🐱 </span>
+        <span class="ltr:mr-1 rtl:ml-1"> 🐱 </span>
         {{ $t('Users') }}
       </h3>
       <pretty-span v-if="!addUserModalShown" :text="$t('Add a user')" :icon="'plus'" @click="showAddUserModal" />
@@ -36,7 +36,7 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             :for="'user' + user.id"
-            class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
             {{ user.name }}
           </label>
         </div>
@@ -59,9 +59,11 @@
               name="permission"
               type="radio"
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-            <label for="viewer" class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label
+              for="viewer"
+              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
               {{ $t('Viewer') }}
-              <span class="ml-4 font-normal text-gray-500">
+              <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
                 {{ $t('Can view data, but can’t edit it.') }}
               </span>
             </label>
@@ -76,9 +78,11 @@
               name="permission"
               type="radio"
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-            <label for="editor" class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label
+              for="editor"
+              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
               {{ $t('Editor') }}
-              <span class="ml-4 font-normal text-gray-500">
+              <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
                 {{ $t('Can edit data, but can’t manage the vault.') }}
               </span>
             </label>
@@ -93,9 +97,11 @@
               name="permission"
               type="radio"
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-            <label for="manager" class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label
+              for="manager"
+              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
               {{ $t('Manager') }}
-              <span class="ml-4 font-normal text-gray-500">
+              <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
                 {{ $t('Can do everything, including adding or removing other users.') }}
               </span>
             </label>
@@ -128,7 +134,7 @@
 
             <!-- actions -->
             <ul v-if="user.id != layoutData.user.id" class="text-sm">
-              <li class="mr-4 inline cursor-pointer" @click="showChangePermissionModal(user)">
+              <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="showChangePermissionModal(user)">
                 <span class="text-blue-500 hover:underline">{{ $t('Change permission') }}</span>
               </li>
               <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(user)">
@@ -156,7 +162,7 @@
                   type="radio"
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 {{ $t('Viewer') }}
-                <span class="ml-4 font-normal text-gray-500">
+                <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
                   {{ $t('Can view data, but can’t edit it.') }}
                 </span>
               </div>
@@ -172,9 +178,9 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="editor"
-                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                   {{ $t('Editor') }}
-                  <span class="ml-4 font-normal text-gray-500">
+                  <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
                     {{ $t('Can edit data, but can’t manage the vault.') }}
                   </span>
                 </label>
@@ -191,9 +197,9 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="manager"
-                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                   {{ $t('Manager') }}
-                  <span class="ml-4 font-normal text-gray-500">
+                  <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
                     {{ $t('Can do everything, including adding or removing other users.') }}
                   </span>
                 </label>
diff --git a/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue b/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue
index 03b88439f..847f99f9b 100644
--- a/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue
+++ b/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue
@@ -37,7 +37,7 @@ const deleteKey = () => {
       </JetSecondaryButton>
 
       <JetDangerButton
-        class="ml-2"
+        class="ltr:ml-2 rtl:mr-2"
         @click="deleteKey"
         :class="{ 'opacity-25': form.processing }"
         :disabled="form.processing">
diff --git a/resources/js/Pages/Webauthn/Partials/RegisterKey.vue b/resources/js/Pages/Webauthn/Partials/RegisterKey.vue
index 92404163e..e8c796763 100644
--- a/resources/js/Pages/Webauthn/Partials/RegisterKey.vue
+++ b/resources/js/Pages/Webauthn/Partials/RegisterKey.vue
@@ -94,7 +94,7 @@ const stop = () => {
         {{ $t('Cancel') }}
       </JetSecondaryButton>
 
-      <JetButton class="ml-2" :class="{ 'opacity-25': processing }" :disabled="processing">
+      <JetButton class="ltr:ml-2 rtl:mr-2" :class="{ 'opacity-25': processing }" :disabled="processing">
         {{ $t('Submit') }}
       </JetButton>
     </div>
diff --git a/resources/js/Pages/Webauthn/Partials/UpdateKey.vue b/resources/js/Pages/Webauthn/Partials/UpdateKey.vue
index e63a5f8dd..d94fa35da 100644
--- a/resources/js/Pages/Webauthn/Partials/UpdateKey.vue
+++ b/resources/js/Pages/Webauthn/Partials/UpdateKey.vue
@@ -64,7 +64,7 @@ watch(
         {{ $t('Cancel') }}
       </JetSecondaryButton>
 
-      <JetButton class="ml-2" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+      <JetButton class="ltr:ml-2 rtl:mr-2" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
         {{ $t('Update') }}
       </JetButton>
     </div>
diff --git a/resources/js/Pages/Webauthn/Partials/WaitForKey.vue b/resources/js/Pages/Webauthn/Partials/WaitForKey.vue
index d28f2c5f3..c893682b6 100644
--- a/resources/js/Pages/Webauthn/Partials/WaitForKey.vue
+++ b/resources/js/Pages/Webauthn/Partials/WaitForKey.vue
@@ -28,7 +28,7 @@ defineEmits(['retry']);
         v-if="form.processing"
         class="mb-4 flex rounded-b border-t-4 border-teal-500 bg-teal-100 px-4 py-8 shadow-md dark:bg-teal-900 dark:shadow-gray-700"
         role="alert">
-        <div class="mr-2 text-teal-800 dark:text-teal-200">
+        <div class="text-teal-800 ltr:mr-2 rtl:ml-2 dark:text-teal-200">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -54,7 +54,7 @@ defineEmits(['retry']);
       <div
         v-else-if="!form.hasErrors"
         class="mb-4 flex rounded-b border-t-4 border-indigo-500 bg-indigo-100 px-4 py-8 shadow-md dark:bg-indigo-900 dark:shadow-gray-700">
-        <div class="mr-2 text-indigo-800 dark:text-indigo-200">
+        <div class="text-indigo-800 ltr:mr-2 rtl:ml-2 dark:text-indigo-200">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
diff --git a/resources/js/Pages/Webauthn/WebauthnKeys.vue b/resources/js/Pages/Webauthn/WebauthnKeys.vue
index b460dc192..e5516f61e 100644
--- a/resources/js/Pages/Webauthn/WebauthnKeys.vue
+++ b/resources/js/Pages/Webauthn/WebauthnKeys.vue
@@ -173,7 +173,7 @@ const webauthnRegisterCallback = (data) => {
             </svg>
           </div>
 
-          <div class="ml-3 w-48">
+          <div class="w-48 ltr:ml-3 rtl:mr-3">
             <div class="text-sm text-gray-600 dark:text-gray-400">
               {{ key.name }}
             </div>
@@ -185,7 +185,7 @@ const webauthnRegisterCallback = (data) => {
             </div>
           </div>
 
-          <div class="ml-3 text-sm">
+          <div class="text-sm ltr:ml-3 rtl:mr-3">
             <JetSecondaryButton
               class="pointer text-indigo-400 hover:text-indigo-600"
               href=""
@@ -193,7 +193,7 @@ const webauthnRegisterCallback = (data) => {
               {{ $t('Update') }}
             </JetSecondaryButton>
             <JetConfirmsPassword @confirmed="keyBeingDeleted = key.id">
-              <JetSecondaryButton class="pointer ml-2 text-indigo-400 hover:text-indigo-600" href="">
+              <JetSecondaryButton class="pointer text-indigo-400 hover:text-indigo-600 ltr:ml-2 rtl:mr-2" href="">
                 {{ $t('Delete') }}
               </JetSecondaryButton>
             </JetConfirmsPassword>
diff --git a/resources/js/Pages/Webauthn/WebauthnLogin.vue b/resources/js/Pages/Webauthn/WebauthnLogin.vue
index b4cd22fb2..76060143e 100644
--- a/resources/js/Pages/Webauthn/WebauthnLogin.vue
+++ b/resources/js/Pages/Webauthn/WebauthnLogin.vue
@@ -114,7 +114,7 @@ const webauthnLoginCallback = (data) => {
 
       <JetInputError :message="authForm.errors.data" class="mt-2" />
 
-      <JetButton class="ml-2" @click="start()" v-show="!processing">
+      <JetButton class="ltr:ml-2 rtl:mr-2" @click="start()" v-show="!processing">
         {{ $t('Retry') }}
       </JetButton>
     </div>
diff --git a/resources/js/Shared/ContactCard.vue b/resources/js/Shared/ContactCard.vue
index f4d988f25..55e8e2be8 100644
--- a/resources/js/Shared/ContactCard.vue
+++ b/resources/js/Shared/ContactCard.vue
@@ -5,7 +5,7 @@
       <template #content>
         <div class="flex">
           <!-- avatar -->
-          <div class="mr-2">
+          <div class="ltr:mr-2 rtl:ml-2">
             <div v-if="contact.avatar.type === 'svg'" class="h-16 w-16 rounded-full" v-html="contact.avatar.content" />
             <img v-else class="h-16 w-16 rounded-full" :src="contact.avatar.content" alt="avatar" />
           </div>
@@ -21,7 +21,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-1 h-4 w-4 text-gray-400">
+                class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -40,7 +40,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-2 h-4 w-4 text-gray-400">
+                class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
diff --git a/resources/js/Shared/Form/ContactSelector.vue b/resources/js/Shared/Form/ContactSelector.vue
index 6c686d0e0..3c282aa8f 100644
--- a/resources/js/Shared/Form/ContactSelector.vue
+++ b/resources/js/Shared/Form/ContactSelector.vue
@@ -324,10 +324,17 @@ export default {
 }
 
 .icon-search {
-  left: 8px;
   top: 13px;
 }
 
+.ltr .icon-search {
+  left: 8px;
+}
+
+.rtl .icon-search {
+  right: 8px;
+}
+
 .item-list {
   &:hover:first-child {
     border-top-left-radius: 8px;
diff --git a/resources/js/Shared/Form/Dropdown.vue b/resources/js/Shared/Form/Dropdown.vue
index 17b1fae18..572e10ee8 100644
--- a/resources/js/Shared/Form/Dropdown.vue
+++ b/resources/js/Shared/Form/Dropdown.vue
@@ -14,9 +14,16 @@
         :disabled="disabled"
         :placeholder="placeholder"
         @change="change">
-        <option v-for="item in data" :key="item.id" :value="item.id">
-          {{ item.name }}
-        </option>
+        <template v-for="item in localData" :key="item.id">
+          <optgroup v-if="item.optgroup" :label="item.optgroup">
+            <option v-for="option in item.options" :key="option.id" :value="option.id">
+              {{ option.name }}
+            </option>
+          </optgroup>
+          <option v-else :value="item.id">
+            {{ item.name }}
+          </option>
+        </template>
       </select>
     </div>
 
@@ -89,6 +96,18 @@ export default {
         this.dropdownClass,
       ];
     },
+    localData() {
+      return _.map(this.data, (value) => {
+        if (_.isObject(value)) {
+          return value;
+        } else {
+          return {
+            id: value,
+            name: value,
+          };
+        }
+      });
+    },
   },
 
   methods: {
@@ -120,13 +139,25 @@ export default {
   background-color: #2f3031;
 }
 
-.counter {
+.ltr .counter {
   padding-right: 64px;
 }
 
+.rtl .counter {
+  padding-left: 64px;
+}
+
 select {
+  background-position: right 3px center;
+}
+
+.ltr select {
   padding-left: 8px;
   padding-right: 20px;
-  background-position: right 3px center;
+}
+
+.rtl select {
+  padding-right: 8px;
+  padding-left: 20px;
 }
 </style>
diff --git a/resources/js/Shared/Form/PrettyButton.vue b/resources/js/Shared/Form/PrettyButton.vue
index 4c7d2400b..e908eb632 100644
--- a/resources/js/Shared/Form/PrettyButton.vue
+++ b/resources/js/Shared/Form/PrettyButton.vue
@@ -6,7 +6,7 @@
     <svg
       v-if="icon === 'plus' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative mr-1 inline h-5 w-5"
+      class="icon relative inline h-5 w-5 ltr:mr-1 rtl:ml-1"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor">
@@ -17,7 +17,7 @@
     <svg
       v-if="icon === 'check' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative mr-1 inline h-5 w-5"
+      class="icon relative inline h-5 w-5 ltr:mr-1 rtl:ml-1"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor">
@@ -28,7 +28,7 @@
     <svg
       v-if="icon === 'minus' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative ml-1 mr-1 inline h-5 w-5"
+      class="icon relative inline h-5 w-5 ltr:ml-1 ltr:mr-1 rtl:ml-1 rtl:mr-1"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
@@ -44,7 +44,7 @@
     <svg
       v-if="icon === 'arrow' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative ml-1 mr-1 inline h-5 w-5"
+      class="icon relative inline h-5 w-5 ltr:ml-1 ltr:mr-1 rtl:ml-1 rtl:mr-1"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor">
diff --git a/resources/js/Shared/Form/PrettyLink.vue b/resources/js/Shared/Form/PrettyLink.vue
index 0bb1bcdce..c3c828a2b 100644
--- a/resources/js/Shared/Form/PrettyLink.vue
+++ b/resources/js/Shared/Form/PrettyLink.vue
@@ -25,7 +25,7 @@
     <!-- door icon -->
     <svg
       v-else-if="icon === 'exit'"
-      class="icon relative mr-1 inline h-5 w-5"
+      class="icon relative inline h-5 w-5 ltr:mr-1 rtl:ml-1"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
diff --git a/resources/js/Shared/Form/TextArea.vue b/resources/js/Shared/Form/TextArea.vue
index 5e5babb39..684a7186a 100644
--- a/resources/js/Shared/Form/TextArea.vue
+++ b/resources/js/Shared/Form/TextArea.vue
@@ -158,10 +158,15 @@ export default {
 
 .length {
   top: 10px;
-  right: 10px;
   background-color: #e5eeff;
   padding: 3px 4px;
 }
+.ltr .length {
+  right: 10px;
+}
+.rtl .length {
+  left: 10px;
+}
 
 .dark .dark\:optional-badge {
   color: #d4d8dd;
@@ -171,7 +176,10 @@ export default {
   background-color: #2d2f33;
 }
 
-.counter {
+.ltr .counter {
   padding-right: 64px;
 }
+.rtl .counter {
+  padding-left: 64px;
+}
 </style>
diff --git a/resources/js/Shared/Form/TextInput.vue b/resources/js/Shared/Form/TextInput.vue
index 5e85321c0..ae222ea9e 100644
--- a/resources/js/Shared/Form/TextInput.vue
+++ b/resources/js/Shared/Form/TextInput.vue
@@ -156,10 +156,15 @@ defineExpose({
 
 .length {
   top: 10px;
-  right: 10px;
   background-color: #e5eeff;
   padding: 3px 4px;
 }
+.ltr .length {
+  right: 10px;
+}
+.rtl .length {
+  left: 10px;
+}
 
 .dark .dark\:optional-badge {
   color: #d4d8dd;
@@ -169,7 +174,10 @@ defineExpose({
   background-color: #2d2f33;
 }
 
-.counter {
+.ltr .counter {
   padding-right: 64px;
 }
+.rtl .counter {
+  padding-left: 64px;
+}
 </style>
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 42687ec36..b6883c04d 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -50,7 +50,7 @@
         <!-- icons -->
         <div class="flew-grow">
           <ul class="relative">
-            <li class="icon-dark-mode relative mr-4 inline">
+            <li class="icon-dark-mode relative inline ltr:mr-4 rtl:ml-4">
               <label for="dark-mode-toggle" class="relative inline-flex cursor-pointer">
                 <input
                   id="dark-mode-toggle"
@@ -59,7 +59,7 @@
                   class="peer sr-only"
                   @click="toggleStyle" />
                 <div
-                  class="peer mr-2 h-4 w-7 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-3 after:w-3 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+                  class="peer h-4 w-7 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[14px] after:top-[2px] after:h-3 after:w-3 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 ltr:mr-2 rtl:ml-2 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
                 <svg
                   v-if="!style.checked"
                   xmlns="http://www.w3.org/2000/svg"
@@ -159,11 +159,11 @@
                 </svg>
               </label>
             </li>
-            <li class="mr-4 inline">
+            <li class="inline ltr:mr-4 rtl:ml-4">
               <inertia-link :href="layoutData.url.settings" class="relative inline">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="icon-cog relative mr-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-300 sm:h-4 sm:w-4"
+                  class="icon-cog relative inline-block h-4 w-4 cursor-pointer text-gray-600 ltr:mr-1 rtl:ml-1 dark:text-gray-300 sm:h-4 sm:w-4"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor">
@@ -186,7 +186,7 @@
               <inertia-link class="inline" method="post" :href="route('logout')" as="button">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="mr-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-300 sm:h-4 sm:w-4"
+                  class="inline-block h-4 w-4 cursor-pointer text-gray-600 ltr:mr-1 rtl:ml-1 dark:text-gray-300 sm:h-4 sm:w-4"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor">
@@ -208,112 +208,105 @@
       <nav v-if="insideVault" class="bg-white dark:border-slate-300/10 dark:bg-gray-900 sm:border-b">
         <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
           <div class="flex items-baseline justify-between space-x-6">
-            <div>
-              <inertia-link
-                :href="layoutData.vault.url.dashboard"
-                :class="{
-                  'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
-                    $page.component === 'Vault/Dashboard/Index',
-                }"
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Dashboard') }}
-              </inertia-link>
-
-              <!-- <inertia-link
-                href=""
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Reports') }}
-              </inertia-link> -->
-
-              <inertia-link
-                :href="layoutData.vault.url.contacts"
-                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Contact') }"
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Contacts') }}
-              </inertia-link>
-
-              <inertia-link
-                :href="layoutData.vault.url.calendar"
-                v-if="layoutData.vault.visibility.show_calendar_tab"
-                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Calendar') }"
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Calendar') }}
-              </inertia-link>
-
-              <inertia-link
-                :href="layoutData.vault.url.journals"
-                v-if="layoutData.vault.visibility.show_journal_tab"
-                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Journal') }"
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Journals') }}
-              </inertia-link>
-
-              <inertia-link
-                :href="layoutData.vault.url.groups"
-                v-if="layoutData.vault.visibility.show_group_tab"
-                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Group') }"
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Groups') }}
-              </inertia-link>
-
-              <inertia-link
-                :href="layoutData.vault.url.companies"
-                v-if="layoutData.vault.visibility.show_companies_tab"
-                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Companies') }"
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Companies') }}
-              </inertia-link>
-
-              <inertia-link
-                :href="layoutData.vault.url.tasks"
-                v-if="layoutData.vault.visibility.show_tasks_tab"
-                :class="{
-                  'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
-                    $page.component.startsWith('Vault/Dashboard/Task'),
-                }"
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Tasks') }}
-              </inertia-link>
-
-              <inertia-link
-                :href="layoutData.vault.url.reports"
-                v-if="layoutData.vault.visibility.show_reports_tab"
-                :class="{
-                  'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
-                    $page.component.startsWith('Vault/Reports'),
-                }"
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Reports') }}
-              </inertia-link>
-
-              <!-- <inertia-link
-                href=""
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Gift center') }}
-              </inertia-link> -->
-
-              <!-- <inertia-link
-                href=""
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Loans') }}
-              </inertia-link> -->
-
-              <inertia-link
-                :href="layoutData.vault.url.files"
-                v-if="layoutData.vault.visibility.show_files_tab"
-                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Files') }"
-                class="mr-2 rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                {{ $t('Files') }}
-              </inertia-link>
-
-              <inertia-link
-                v-if="layoutData.vault.permission.at_least_editor"
-                :href="layoutData.vault.url.settings"
-                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Settings') }"
-                class="rounded-md px-2 py-1 text-sm font-medium hover:bg-gray-700 hover:text-white">
-                {{ $t('Vault settings') }}
-              </inertia-link>
-            </div>
+            <ul class="list-none text-sm font-medium">
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.dashboard"
+                  :class="{
+                    'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
+                      $page.component === 'Vault/Dashboard/Index',
+                  }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  {{ $t('Dashboard') }}
+                </inertia-link>
+              </li>
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.contacts"
+                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Contact') }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  {{ $t('Contacts') }}
+                </inertia-link>
+              </li>
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.calendar"
+                  v-if="layoutData.vault.visibility.show_calendar_tab"
+                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Calendar') }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  {{ $t('Calendar') }}
+                </inertia-link>
+              </li>
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.journals"
+                  v-if="layoutData.vault.visibility.show_journal_tab"
+                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Journal') }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  {{ $t('Journals') }}
+                </inertia-link>
+              </li>
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.groups"
+                  v-if="layoutData.vault.visibility.show_group_tab"
+                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Group') }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  {{ $t('Groups') }}
+                </inertia-link>
+              </li>
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.companies"
+                  v-if="layoutData.vault.visibility.show_companies_tab"
+                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Companies') }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  {{ $t('Companies') }}
+                </inertia-link>
+              </li>
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.tasks"
+                  v-if="layoutData.vault.visibility.show_tasks_tab"
+                  :class="{
+                    'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
+                      $page.component.startsWith('Vault/Dashboard/Task'),
+                  }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  {{ $t('Tasks') }}
+                </inertia-link>
+              </li>
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.reports"
+                  v-if="layoutData.vault.visibility.show_reports_tab"
+                  :class="{
+                    'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
+                      $page.component.startsWith('Vault/Reports'),
+                  }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  {{ $t('Reports') }}
+                </inertia-link>
+              </li>
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.files"
+                  v-if="layoutData.vault.visibility.show_files_tab"
+                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Files') }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  {{ $t('Files') }}
+                </inertia-link>
+              </li>
+              <li class="inline">
+                <inertia-link
+                  v-if="layoutData.vault.permission.at_least_editor"
+                  :href="layoutData.vault.url.settings"
+                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Settings') }"
+                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white">
+                  {{ $t('Vault settings') }}
+                </inertia-link>
+              </li>
+            </ul>
           </div>
         </div>
       </nav>
@@ -400,10 +393,17 @@ export default {
 
 <style lang="scss" scoped>
 .icon-search {
-  left: 8px;
   top: 8px;
 }
 
+.ltr .icon-search {
+  left: 8px;
+}
+
+.rtl .icon-search {
+  right: 8px;
+}
+
 .icon-cog {
   top: -1px;
 }
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index e67a6a443..9b8b12a49 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -159,7 +159,7 @@ const destroy = () => {
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -206,7 +206,7 @@ const destroy = () => {
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
             <label
               for="chooseExisting"
-              class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
               {{ $t('Choose an existing address') }}
             </label>
           </div>
@@ -221,7 +221,7 @@ const destroy = () => {
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
             <label
               for="createNew"
-              class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
               {{ $t('Create a new address') }}
             </label>
           </div>
@@ -247,7 +247,7 @@ const destroy = () => {
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   :for="'address-' + address.id"
-                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                   {{ address.address }}
                 </label>
               </div>
@@ -281,7 +281,7 @@ const destroy = () => {
               :label="$t('Address')"
               :type="'text'"
               :autofocus="true"
-              :input-class="'w-full mr-2'"
+              :input-class="'w-full ltr:mr-2 rtl:ml-2'"
               :required="false"
               :autocomplete="false"
               :maxlength="255"
@@ -296,7 +296,7 @@ const destroy = () => {
               :label="$t('Apartment, suite, etc…')"
               :type="'text'"
               :autofocus="true"
-              :input-class="'w-full mr-2'"
+              :input-class="'w-full ltr:mr-2 rtl:ml-2'"
               :required="false"
               :autocomplete="false"
               :maxlength="255"
@@ -321,7 +321,7 @@ const destroy = () => {
               :label="$t('Province')"
               :type="'text'"
               :autofocus="true"
-              :input-class="'w-full mr-2'"
+              :input-class="'w-full ltr:mr-2 rtl:ml-2'"
               :required="false"
               :autocomplete="false"
               :maxlength="255"
@@ -358,7 +358,9 @@ const destroy = () => {
               :name="form.is_past_address"
               type="checkbox"
               class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600" />
-            <label :for="form.is_past_address" class="ml-2 cursor-pointer text-gray-900 dark:text-gray-100">
+            <label
+              :for="form.is_past_address"
+              class="cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-100">
               {{ $t('This address is not active anymore') }}
             </label>
           </div>
@@ -398,16 +400,19 @@ const destroy = () => {
 
             <!-- actions -->
             <ul class="text-sm">
-              <li class="mr-2 inline">
-                <a :href="address.url.show" target="_blank" class="mr-2 text-sm text-blue-500 hover:underline">{{
-                  $t('View on map')
-                }}</a>
+              <li class="inline ltr:mr-2 rtl:ml-2">
+                <a
+                  :href="address.url.show"
+                  target="_blank"
+                  class="text-sm text-blue-500 hover:underline ltr:mr-2 rtl:ml-2"
+                  >{{ $t('View on map') }}</a
+                >
               </li>
               <li class="inline cursor-pointer text-blue-500 hover:underline" @click="showEditAddressModal(address)">
                 {{ $t('Edit') }}
               </li>
               <li
-                class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
                 @click="showDeleteAddressModal(address)">
                 {{ $t('Delete') }}
               </li>
@@ -442,7 +447,7 @@ const destroy = () => {
                   :label="$t('Address')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -457,7 +462,7 @@ const destroy = () => {
                   :label="$t('Apartment, suite, etc…')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -482,7 +487,7 @@ const destroy = () => {
                   :label="$t('Province')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -519,7 +524,9 @@ const destroy = () => {
                   :name="form.is_past_address"
                   type="checkbox"
                   class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600" />
-                <label :for="form.is_past_address" class="ml-2 cursor-pointer text-gray-900 dark:text-gray-100">
+                <label
+                  :for="form.is_past_address"
+                  class="cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-100">
                   {{ $t('This address is not active anymore') }}
                 </label>
               </div>
@@ -581,15 +588,20 @@ const destroy = () => {
 
             <!-- actions -->
             <ul class="text-sm">
-              <li class="mr-2 inline">
-                <a :href="address.url.show" target="_blank" class="mr-2 text-sm text-blue-500 hover:underline">{{
-                  $t('View on map')
-                }}</a>
+              <li class="inline ltr:mr-2 rtl:ml-2">
+                <a
+                  :href="address.url.show"
+                  target="_blank"
+                  class="text-sm text-blue-500 hover:underline ltr:mr-2 rtl:ml-2"
+                  >{{ $t('View on map') }}</a
+                >
               </li>
               <li class="inline cursor-pointer text-blue-500 hover:underline" @click="showEditAddressModal(address)">
                 {{ $t('Edit') }}
               </li>
-              <li class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(address)">
+              <li
+                class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                @click="destroy(address)">
                 {{ $t('Delete') }}
               </li>
             </ul>
@@ -623,7 +635,7 @@ const destroy = () => {
                   :label="$t('Address')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -638,7 +650,7 @@ const destroy = () => {
                   :label="$t('Apartment, suite, etc…')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -663,7 +675,7 @@ const destroy = () => {
                   :label="$t('Province')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -700,7 +712,7 @@ const destroy = () => {
                   name="is_past_address"
                   type="checkbox"
                   class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600" />
-                <label for="is_past_address" class="ml-2 cursor-pointer text-gray-900 dark:text-gray-100">
+                <label for="is_past_address" class="cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-100">
                   {{ $t('This address is not active anymore') }}
                 </label>
               </div>
@@ -731,7 +743,7 @@ const destroy = () => {
         </JetSecondaryButton>
 
         <JetDangerButton
-          class="ml-3"
+          class="ltr:ml-3 rtl:mr-3"
           :class="{ 'opacity-25': processAddressDeletion }"
           :disabled="processAddressDeletion"
           @click="destroy()">
diff --git a/resources/js/Shared/Modules/Calls.vue b/resources/js/Shared/Modules/Calls.vue
index a8241cdac..c01446a43 100644
--- a/resources/js/Shared/Modules/Calls.vue
+++ b/resources/js/Shared/Modules/Calls.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -52,11 +52,11 @@
           </div>
 
           <!-- audio or video -->
-          <div class="border-l border-gray-200 p-5 dark:border-gray-700">
+          <div class="border-gray-200 p-5 ltr:border-l rtl:border-r dark:border-gray-700">
             <p class="mb-2 block text-sm">{{ $t('Nature of the call') }}</p>
 
             <div class="flex">
-              <div class="mr-6 flex items-center">
+              <div class="flex items-center ltr:mr-6 rtl:ml-6">
                 <input
                   id="audio"
                   v-model="form.type"
@@ -66,7 +66,7 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="audio"
-                  class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                   {{ $t('Audio-only call') }}
                 </label>
               </div>
@@ -81,7 +81,7 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="video"
-                  class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                   {{ $t('Video call') }}
                 </label>
               </div>
@@ -94,7 +94,7 @@
           <p class="mb-2 block text-sm">{{ $t('Who called?') }}</p>
 
           <div class="mb-4 flex">
-            <div class="mr-6 flex items-center">
+            <div class="flex items-center ltr:mr-6 rtl:ml-6">
               <input
                 id="me"
                 v-model="form.who_initiated"
@@ -102,7 +102,9 @@
                 name="who_initiated"
                 type="radio"
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-              <label for="me" class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              <label
+                for="me"
+                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                 {{ $t('I called') }}
               </label>
             </div>
@@ -117,14 +119,14 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="me_not_answered"
-                class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                 {{ $t('I called, but :name didn’t answer', { name: data.contact_name }) }}
               </label>
             </div>
           </div>
 
           <div class="flex">
-            <div class="mr-6 flex items-center">
+            <div class="flex items-center ltr:mr-6 rtl:ml-6">
               <input
                 id="contact"
                 v-model="form.who_initiated"
@@ -134,7 +136,7 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="contact"
-                class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                 {{ $t(':name called', { name: data.contact_name }) }}
               </label>
             </div>
@@ -149,7 +151,7 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="contact_not_answered"
-                class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                 {{ $t(':name called, but I didn’t answer', { name: data.contact_name }) }}
               </label>
             </div>
@@ -197,7 +199,9 @@
               name="emotion"
               type="radio"
               class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500" />
-            <label :for="emotion.type" class="ml-2 block cursor-pointer font-medium text-gray-700 dark:text-gray-300">
+            <label
+              :for="emotion.type"
+              class="block cursor-pointer font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
               {{ emotion.name }}
             </label>
           </div>
@@ -208,7 +212,7 @@
           <!-- cta to add a description -->
           <span
             v-if="!descriptionFieldShown"
-            class="mr-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300"
+            class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2"
             @click="showDescriptionField">
             {{ $t('+ add description') }}
           </span>
@@ -216,7 +220,7 @@
           <!-- cta to add a reason -->
           <span
             v-if="!reasonFieldShown"
-            class="mr-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300"
+            class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2"
             @click="showReasonField">
             {{ $t('+ add reason') }}
           </span>
@@ -252,7 +256,7 @@
               <svg
                 v-if="!call.answered"
                 xmlns="http://www.w3.org/2000/svg"
-                class="mr-2 h-4 w-4 text-red-500"
+                class="h-4 w-4 text-red-500 ltr:mr-2 rtl:ml-2"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -267,7 +271,7 @@
               <svg
                 v-if="call.answered"
                 xmlns="http://www.w3.org/2000/svg"
-                class="mr-2 h-4 w-4 text-green-600"
+                class="h-4 w-4 text-green-600 ltr:mr-2 rtl:ml-2"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -279,17 +283,17 @@
               </svg>
             </div>
 
-            <span class="mr-2 text-sm text-gray-500">{{ call.called_at }}</span>
+            <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ call.called_at }}</span>
 
             <!-- who called -->
             <span
               v-if="call.who_initiated == 'me'"
-              class="mr-2 rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800">
+              class="rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 ltr:mr-2 rtl:ml-2">
               {{ $t('I called') }}
             </span>
             <span
               v-else
-              class="mr-2 rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800">
+              class="rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 ltr:mr-2 rtl:ml-2">
               {{ $t(':name called', { name: data.contact_name }) }}
             </span>
 
@@ -329,11 +333,11 @@
               </div>
 
               <!-- audio or video -->
-              <div class="border-l border-gray-200 p-5 dark:border-gray-700">
+              <div class="border-gray-200 p-5 ltr:border-l rtl:border-r dark:border-gray-700">
                 <p class="mb-2 block text-sm">{{ $t('Nature of the call') }}</p>
 
                 <div class="flex">
-                  <div class="mr-6 flex items-center">
+                  <div class="flex items-center ltr:mr-6 rtl:ml-6">
                     <input
                       id="audio"
                       v-model="form.type"
@@ -343,7 +347,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="audio"
-                      class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                       {{ $t('Audio-only call') }}
                     </label>
                   </div>
@@ -358,7 +362,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="video"
-                      class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                       {{ $t('Video call') }}
                     </label>
                   </div>
@@ -371,7 +375,7 @@
               <p class="mb-2 block text-sm">{{ $t('Who called?') }}</p>
 
               <div class="mb-4 flex">
-                <div class="mr-6 flex items-center">
+                <div class="flex items-center ltr:mr-6 rtl:ml-6">
                   <input
                     id="me"
                     v-model="form.who_initiated"
@@ -381,7 +385,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="me"
-                    class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                     {{ $t('I called') }}
                   </label>
                 </div>
@@ -396,14 +400,14 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="me_not_answered"
-                    class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                     {{ $t('I called, but :name didn’t answer', { name: data.contact_name }) }}
                   </label>
                 </div>
               </div>
 
               <div class="flex">
-                <div class="mr-6 flex items-center">
+                <div class="flex items-center ltr:mr-6 rtl:ml-6">
                   <input
                     id="contact"
                     v-model="form.who_initiated"
@@ -413,7 +417,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="contact"
-                    class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                     {{ $t(':name called', { name: data.contact_name }) }}
                   </label>
                 </div>
@@ -428,7 +432,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="contact_not_answered"
-                    class="ml-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                     {{ $t(':name called, but I didn’t answer', { name: data.contact_name }) }}
                   </label>
                 </div>
@@ -478,7 +482,7 @@
                   class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                 <label
                   :for="emotion.type"
-                  class="ml-2 block cursor-pointer font-medium text-gray-700 dark:text-gray-300">
+                  class="block cursor-pointer font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                   {{ emotion.name }}
                 </label>
               </div>
@@ -489,7 +493,7 @@
               <!-- cta to add a description -->
               <span
                 v-if="!descriptionFieldShown"
-                class="mr-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300"
+                class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2"
                 @click="showDescriptionField">
                 {{ $t('+ add description') }}
               </span>
@@ -497,7 +501,7 @@
               <!-- cta to add a reason -->
               <span
                 v-if="!reasonFieldShown"
-                class="mr-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300"
+                class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2"
                 @click="showReasonField">
                 {{ $t('+ add reason') }}
               </span>
diff --git a/resources/js/Shared/Modules/ContactInformation.vue b/resources/js/Shared/Modules/ContactInformation.vue
index c173b0b4f..b08119b68 100644
--- a/resources/js/Shared/Modules/ContactInformation.vue
+++ b/resources/js/Shared/Modules/ContactInformation.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -83,13 +83,13 @@
           <div v-if="editedContactInformationId != info.id" class="flex items-center justify-between px-3 py-2">
             <div>
               <a :href="info.data_with_protocol" class="text-blue-500 hover:underline">{{ info.data }}</a>
-              <span class="ml-2 text-xs text-gray-500">({{ info.label }})</span>
+              <span class="text-xs text-gray-500 ltr:ml-2 rtl:mr-2">({{ info.label }})</span>
             </div>
 
             <!-- actions -->
             <ul class="text-sm">
               <li
-                class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
                 @click="showEditContactInformationModal(info)">
                 {{ $t('Edit') }}
               </li>
@@ -292,10 +292,4 @@ export default {
     border-bottom-right-radius: 8px;
   }
 }
-
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
 </style>
diff --git a/resources/js/Shared/Modules/ContactName.vue b/resources/js/Shared/Modules/ContactName.vue
index a64daa886..b5fbefc2d 100644
--- a/resources/js/Shared/Modules/ContactName.vue
+++ b/resources/js/Shared/Modules/ContactName.vue
@@ -19,7 +19,7 @@
     </div>
 
     <h1 class="flex items-center justify-between text-xl font-bold">
-      <span class="mr-2">
+      <span class="ltr:mr-2 rtl:ml-2">
         {{ data.name }}
       </span>
 
diff --git a/resources/js/Shared/Modules/CreateLifeEvent.vue b/resources/js/Shared/Modules/CreateLifeEvent.vue
index c32997535..af8aa95e3 100644
--- a/resources/js/Shared/Modules/CreateLifeEvent.vue
+++ b/resources/js/Shared/Modules/CreateLifeEvent.vue
@@ -356,7 +356,7 @@ const store = () => {
           @esc-key-pressed="addDistanceFieldShown = false" />
 
         <ul>
-          <li class="mr-5 inline-block">
+          <li class="inline-block ltr:mr-5 rtl:ml-5">
             <div class="flex items-center">
               <input
                 id="km"
@@ -365,7 +365,9 @@ const store = () => {
                 name="distance_unit"
                 type="radio"
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-              <label for="km" class="ml-1 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              <label
+                for="km"
+                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-1 rtl:mr-1 dark:text-gray-300">
                 {{ $t('km') }}
               </label>
             </div>
@@ -380,7 +382,9 @@ const store = () => {
                 name="distance_unit"
                 type="radio"
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-              <label for="miles" class="ml-1 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              <label
+                for="miles"
+                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-1 rtl:mr-1 dark:text-gray-300">
                 {{ $t('miles') }}
               </label>
             </div>
@@ -393,7 +397,7 @@ const store = () => {
         <!-- summary -->
         <div v-if="!addSummaryFieldShown">
           <span
-            class="mb-2 mr-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
+            class="mb-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
             @click="showAddSummaryField"
             >{{ $t('+ add summary') }}
           </span>
@@ -402,7 +406,7 @@ const store = () => {
         <!-- description -->
         <div v-if="!addDescriptionFieldShown">
           <span
-            class="mb-2 mr-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
+            class="mb-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
             @click="showAddDescriptionField"
             >{{ $t('+ add description') }}
           </span>
@@ -411,7 +415,7 @@ const store = () => {
         <!-- distance -->
         <div v-if="!addDistanceFieldShown">
           <span
-            class="mb-2 mr-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
+            class="mb-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
             @click="showAddDistanceField"
             >{{ $t('+ add distance') }}
           </span>
diff --git a/resources/js/Shared/Modules/Documents.vue b/resources/js/Shared/Modules/Documents.vue
index 9f25f03b8..a2e68db7f 100644
--- a/resources/js/Shared/Modules/Documents.vue
+++ b/resources/js/Shared/Modules/Documents.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -39,7 +39,8 @@
       v-if="!data.canUploadFile"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <p class="bg-gray-100 p-3 text-center">
-        <span class="mr-1">⚠️</span> {{ $t('You don’t have enough space left in your account. Please upgrade.') }}
+        <span class="ltr:mr-1 rtl:ml-1">⚠️</span>
+        {{ $t('You don’t have enough space left in your account. Please upgrade.') }}
       </p>
     </div>
 
@@ -55,14 +56,14 @@
             <span class="flex items-center">
               <span class="max-w-sm truncate">{{ document.name }}</span>
 
-              <span class="ml-2 rounded border bg-blue-50 px-1 py-0 font-mono text-xs text-blue-500">
+              <span class="rounded border bg-blue-50 px-1 py-0 font-mono text-xs text-blue-500 ltr:ml-2 rtl:mr-2">
                 {{ document.size }}
               </span>
             </span>
 
             <!-- actions -->
             <ul class="text-sm">
-              <li class="mr-4 inline">
+              <li class="inline ltr:mr-4 rtl:ml-4">
                 <a :href="document.url.download" class="text-blue-500 hover:underline">{{ $t('Download') }}</a>
               </li>
               <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(document)">
@@ -194,10 +195,4 @@ export default {
     border-bottom-right-radius: 8px;
   }
 }
-
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
 </style>
diff --git a/resources/js/Shared/Modules/FamilySummary.vue b/resources/js/Shared/Modules/FamilySummary.vue
index 7d63dc250..aa5005c7b 100644
--- a/resources/js/Shared/Modules/FamilySummary.vue
+++ b/resources/js/Shared/Modules/FamilySummary.vue
@@ -6,9 +6,9 @@
 
     <!-- love relationships -->
     <div v-if="data.love_relationships.length > 0" class="flex">
-      <span class="mr-2 inline text-sm"> ❤️ </span>
+      <span class="inline text-sm ltr:mr-2 rtl:ml-2"> ❤️ </span>
       <ul>
-        <li v-for="relationship in data.love_relationships" :key="relationship.id" class="mr-2 inline">
+        <li v-for="relationship in data.love_relationships" :key="relationship.id" class="inline ltr:mr-2 rtl:ml-2">
           <!-- name -->
           <inertia-link
             v-if="relationship.contact.url.show"
@@ -19,7 +19,7 @@
           <span v-else>{{ relationship.contact.name }}</span>
 
           <!-- age -->
-          <span v-if="relationship.contact.age" class="ml-2 text-xs text-gray-400"
+          <span v-if="relationship.contact.age" class="text-xs text-gray-400 ltr:ml-2 rtl:mr-2"
             >({{ relationship.contact.age }})</span
           >
         </li>
@@ -28,9 +28,9 @@
 
     <!-- family relationships -->
     <div v-if="data.family_relationships.length > 0" class="flex">
-      <span class="mr-2 inline text-sm"> 👪 </span>
+      <span class="inline text-sm ltr:mr-2 rtl:ml-2"> 👪 </span>
       <ul>
-        <li v-for="relationship in data.family_relationships" :key="relationship.id" class="mr-2 inline">
+        <li v-for="relationship in data.family_relationships" :key="relationship.id" class="inline ltr:mr-2 rtl:ml-2">
           <!-- name -->
           <inertia-link
             v-if="relationship.contact.url.show"
@@ -41,7 +41,7 @@
           <span v-else>{{ relationship.contact.name }}</span>
 
           <!-- age -->
-          <span v-if="relationship.contact.age" class="ml-2 text-xs text-gray-400"
+          <span v-if="relationship.contact.age" class="text-xs text-gray-400 ltr:ml-2 rtl:mr-2"
             >({{ relationship.contact.age }})</span
           >
         </li>
diff --git a/resources/js/Shared/Modules/Feed.vue b/resources/js/Shared/Modules/Feed.vue
index ef02e6d06..cc9818900 100644
--- a/resources/js/Shared/Modules/Feed.vue
+++ b/resources/js/Shared/Modules/Feed.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4">
-    <div class="ml-4 border-l border-gray-200 dark:border-gray-700">
+    <div class="border-gray-200 ltr:ml-4 ltr:border-l rtl:mr-4 rtl:border-r dark:border-gray-700">
       <div v-for="feedItem in feed" :key="feedItem.id" class="mb-8">
         <!-- action & user -->
         <div class="mb-2 flex">
@@ -11,7 +11,7 @@
           </div>
 
           <div class="flex w-full items-center justify-between">
-            <p class="mr-2 text-gray-400">
+            <p class="text-gray-400 ltr:mr-2 rtl:ml-2">
               <!-- author name + link to profile -->
               <inertia-link
                 v-if="feedItem.author.url"
@@ -22,14 +22,14 @@
               <span v-else class="font-medium text-gray-800 dark:text-gray-200">{{ feedItem.author.name }}</span>
 
               <!-- action done -->
-              <span class="ml-2">{{ feedItem.sentence }}</span>
+              <span class="ltr:ml-2 rtl:mr-2">{{ feedItem.sentence }}</span>
             </p>
 
             <p class="flex items-center text-sm text-gray-400">
               <span>{{ feedItem.created_at }}</span>
 
               <svg
-                class="ml-2 h-4 w-4"
+                class="h-4 w-4 ltr:ml-2 rtl:mr-2"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
@@ -45,7 +45,7 @@
         </div>
 
         <!-- feed object -->
-        <div v-if="feedItem.data" class="ml-6">
+        <div v-if="feedItem.data" class="ltr:ml-6 rtl:mr-6">
           <generic-action
             v-if="feedItem.action === 'contact_created'"
             :data="feedItem.data"
@@ -152,7 +152,7 @@
         </div>
 
         <!-- details -->
-        <div v-if="feedItem.description" class="ml-6">
+        <div v-if="feedItem.description" class="ltr:ml-6 rtl:mr-6">
           <div class="rounded-lg border border-gray-300 px-3 py-2">
             <span class="text-sm">
               {{ feedItem.description }}
@@ -266,6 +266,13 @@ export default {
 <style lang="scss" scoped>
 .icon-avatar {
   top: 3px;
+}
+
+.ltr .icon-avatar {
   left: -11px;
 }
+
+.rtl .icon-avatar {
+  right: -11px;
+}
 </style>
diff --git a/resources/js/Shared/Modules/FeedItems/Address.vue b/resources/js/Shared/Modules/FeedItems/Address.vue
index 364bda96e..a09145b5c 100644
--- a/resources/js/Shared/Modules/FeedItems/Address.vue
+++ b/resources/js/Shared/Modules/FeedItems/Address.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 mr-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -75,6 +75,13 @@ export default {
 <style lang="scss" scoped>
 .icon-avatar {
   top: 3px;
+}
+
+.ltr .icon-avatar {
   left: -11px;
 }
+
+.rtl .icon-avatar {
+  right: -11px;
+}
 </style>
diff --git a/resources/js/Shared/Modules/FeedItems/ContactInformation.vue b/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
index 49b48bf78..6c9073ade 100644
--- a/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
+++ b/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 mr-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -55,6 +55,13 @@ export default {
 <style lang="scss" scoped>
 .icon-avatar {
   top: 3px;
+}
+
+.ltr .icon-avatar {
   left: -11px;
 }
+
+.rtl .icon-avatar {
+  right: -11px;
+}
 </style>
diff --git a/resources/js/Shared/Modules/FeedItems/GenericAction.vue b/resources/js/Shared/Modules/FeedItems/GenericAction.vue
index 6413d5d29..74452bd01 100644
--- a/resources/js/Shared/Modules/FeedItems/GenericAction.vue
+++ b/resources/js/Shared/Modules/FeedItems/GenericAction.vue
@@ -4,7 +4,7 @@
     class="flex items-center rounded-lg border border-gray-300 px-3 py-2 dark:border-gray-700">
     <avatar
       :data="data.avatar"
-      :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-8 w-8 mr-2'" />
+      :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-8 w-8 ltr:mr-2 rtl:ml-2'" />
 
     <div class="flex flex-col">
       <inertia-link :href="data.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -40,6 +40,13 @@ export default {
 <style lang="scss" scoped>
 .icon-avatar {
   top: 3px;
+}
+
+.ltr .icon-avatar {
   left: -11px;
 }
+
+.rtl .icon-avatar {
+  right: -11px;
+}
 </style>
diff --git a/resources/js/Shared/Modules/FeedItems/Goal.vue b/resources/js/Shared/Modules/FeedItems/Goal.vue
index 4b45c91b1..63b879a4e 100644
--- a/resources/js/Shared/Modules/FeedItems/Goal.vue
+++ b/resources/js/Shared/Modules/FeedItems/Goal.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 mr-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -18,11 +18,11 @@
     <div class="px-3 py-2">
       <!-- the goal still exists in the system -->
       <div v-if="data.goal.object" class="flex items-center">
-        <span class="mr-2">{{ data.goal.object.name }}</span>
+        <span class="ltr:mr-2 rtl:ml-2">{{ data.goal.object.name }}</span>
       </div>
 
       <!-- the goal was deleted -->
-      <span v-else class="mb-2 mr-2">
+      <span v-else class="mb-2 ltr:mr-2 rtl:ml-2">
         <span>{{ data.goal.description }}</span>
       </span>
     </div>
diff --git a/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue b/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue
index a47dbc0c6..b84cbf823 100644
--- a/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue
+++ b/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 mr-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -19,7 +19,7 @@
       <!-- the label still exists in the system -->
       <span
         v-if="data.label.object"
-        class="mb-2 mr-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0"
+        class="mb-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0 ltr:mr-2 rtl:ml-2"
         :class="data.label.object.bg_color + ' ' + data.label.object.text_color">
         <inertia-link :href="data.label.object.url">{{ data.label.object.name }}</inertia-link>
       </span>
@@ -27,7 +27,7 @@
       <!-- the label was deleted -->
       <span
         v-else
-        class="mb-2 mr-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0">
+        class="mb-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0 ltr:mr-2 rtl:ml-2">
         <span>{{ data.label.description }}</span>
       </span>
     </div>
@@ -58,6 +58,13 @@ export default {
 <style lang="scss" scoped>
 .icon-avatar {
   top: 3px;
+}
+
+.ltr .icon-avatar {
   left: -11px;
 }
+
+.rtl .icon-avatar {
+  right: -11px;
+}
 </style>
diff --git a/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue b/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
index 02379c23a..d3f2b6989 100644
--- a/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
+++ b/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 mr-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -19,7 +19,7 @@
       <!-- the mood tracking event still exists in the system -->
       <div v-if="data.mood_tracking_event.object">
         <div class="mb-2 flex">
-          <div class="mr-2">
+          <div class="ltr:mr-2 rtl:ml-2">
             {{ data.mood_tracking_event.description }}
           </div>
 
@@ -31,7 +31,7 @@
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
-              class="mr-1 h-4 w-4 text-gray-400">
+              class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -58,7 +58,7 @@
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
-            class="mr-1 h-4 w-4 text-gray-400">
+            class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -69,7 +69,7 @@
       </div>
 
       <!-- the mood tracking event was deleted -->
-      <span v-else class="mb-2 mr-2">
+      <span v-else class="mb-2 ltr:mr-2 rtl:ml-2">
         <span>{{ data.mood_tracking_event.description }}</span>
       </span>
     </div>
diff --git a/resources/js/Shared/Modules/FeedItems/Note.vue b/resources/js/Shared/Modules/FeedItems/Note.vue
index 5dee18ca3..821af08a4 100644
--- a/resources/js/Shared/Modules/FeedItems/Note.vue
+++ b/resources/js/Shared/Modules/FeedItems/Note.vue
@@ -15,7 +15,7 @@ const props = defineProps({
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <Avatar
         :data="props.data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 mr-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="props.data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -34,7 +34,7 @@ const props = defineProps({
       <!-- the note was deleted -->
       <span
         v-else
-        class="mb-2 mr-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0">
+        class="mb-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0 ltr:mr-2 rtl:ml-2">
         <span>{{ props.data.note.description }}</span>
       </span>
     </div>
@@ -44,6 +44,13 @@ const props = defineProps({
 <style lang="scss" scoped>
 .icon-avatar {
   top: 3px;
+}
+
+.ltr .icon-avatar {
   left: -11px;
 }
+
+.rtl .icon-avatar {
+  right: -11px;
+}
 </style>
diff --git a/resources/js/Shared/Modules/FeedItems/Pet.vue b/resources/js/Shared/Modules/FeedItems/Pet.vue
index 004196e8a..f07f97154 100644
--- a/resources/js/Shared/Modules/FeedItems/Pet.vue
+++ b/resources/js/Shared/Modules/FeedItems/Pet.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 mr-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -18,12 +18,12 @@
     <div class="px-3 py-2">
       <!-- the pet still exists in the system -->
       <div v-if="data.pet.object" class="flex items-center">
-        <span class="mr-2 text-sm text-gray-500">{{ data.pet.object.pet_category.name }}</span>
-        <span class="mr-2">{{ data.pet.object.name }}</span>
+        <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ data.pet.object.pet_category.name }}</span>
+        <span class="ltr:mr-2 rtl:ml-2">{{ data.pet.object.name }}</span>
       </div>
 
       <!-- the pet was deleted -->
-      <span v-else class="mb-2 mr-2">
+      <span v-else class="mb-2 ltr:mr-2 rtl:ml-2">
         <span>{{ data.pet.description }}</span>
       </span>
     </div>
diff --git a/resources/js/Shared/Modules/Goals.vue b/resources/js/Shared/Modules/Goals.vue
index 581afc59b..52d96b096 100644
--- a/resources/js/Shared/Modules/Goals.vue
+++ b/resources/js/Shared/Modules/Goals.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -78,13 +78,13 @@
               <div
                 v-for="streak in goal.last_7_days"
                 :key="streak.id"
-                class="mr-0 flex flex-row items-center justify-between border-b border-gray-200 p-3 text-center dark:border-gray-700 sm:mb-0 sm:mr-7 sm:w-9 sm:flex-col sm:border-0 sm:p-0"
+                class="flex flex-row items-center justify-between border-b border-gray-200 p-3 text-center ltr:mr-0 rtl:ml-0 dark:border-gray-700 sm:mb-0 sm:mr-7 sm:w-9 sm:flex-col sm:border-0 sm:p-0"
                 :class="{ 'text-gray-500': !streak.active }">
                 <div>
-                  <span class="mb-0 mr-2 block text-xs font-semibold sm:mr-0">
+                  <span class="mb-0 block text-xs font-semibold ltr:mr-2 rtl:ml-2 sm:mr-0">
                     {{ streak.day }}
                   </span>
-                  <span class="mr-2 sm:mr-0">
+                  <span class="ltr:mr-2 rtl:ml-2 sm:mr-0">
                     {{ streak.day_number }}
                   </span>
                 </div>
@@ -92,7 +92,7 @@
                 <!-- active streak -->
                 <span
                   v-if="streak.active"
-                  class="mr-2 cursor-pointer text-2xl sm:mr-0"
+                  class="cursor-pointer text-2xl ltr:mr-2 rtl:ml-2 sm:mr-0"
                   @click="toggleStreak(goal, streak)"
                   >👍</span
                 >
@@ -100,7 +100,7 @@
                 <!-- inactive streak -->
                 <span
                   v-else
-                  class="mr-2 cursor-pointer text-center text-2xl sm:mr-0"
+                  class="cursor-pointer text-center text-2xl ltr:mr-2 rtl:ml-2 sm:mr-0"
                   @click="toggleStreak(goal, streak)">
                   <div
                     class="rounded-md border border-gray-200 bg-slate-100 px-2 py-1 dark:border-gray-700 dark:bg-slate-900">
@@ -131,14 +131,14 @@
 
             <!-- stats -->
             <div class="flex justify-between p-3">
-              <div class="mr-6 flex items-center">
-                <div class="mr-3 w-14 text-right text-sm text-gray-500">{{ $t('Current streak') }}</div>
+              <div class="flex items-center ltr:mr-6 rtl:ml-6">
+                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Current streak') }}</div>
                 <div class="text-4xl">
                   {{ goal.streaks_statistics.current_streak }}
                 </div>
               </div>
               <div class="flex items-center">
-                <div class="mr-3 w-14 text-right text-sm text-gray-500">{{ $t('Longest streak') }}</div>
+                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Longest streak') }}</div>
                 <div class="text-4xl">
                   {{ goal.streaks_statistics.max_streak }}
                 </div>
diff --git a/resources/js/Shared/Modules/Groups.vue b/resources/js/Shared/Modules/Groups.vue
index 81f481b36..df3ae53a5 100644
--- a/resources/js/Shared/Modules/Groups.vue
+++ b/resources/js/Shared/Modules/Groups.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -113,7 +113,7 @@
 
         <!-- actions -->
         <ul class="text-sm">
-          <li class="mr-4 inline cursor-pointer">
+          <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4">
             <inertia-link :href="group.url.show" class="text-blue-500 hover:underline">{{ $t('View') }}</inertia-link>
           </li>
           <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(group)">
diff --git a/resources/js/Shared/Modules/Labels.vue b/resources/js/Shared/Modules/Labels.vue
index 7adb465d6..3dc6070c3 100644
--- a/resources/js/Shared/Modules/Labels.vue
+++ b/resources/js/Shared/Modules/Labels.vue
@@ -54,7 +54,7 @@
           class="flex cursor-pointer items-center justify-between border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
           @click="set(label)">
           <div>
-            <span class="mr-2 inline-block h-4 w-4 rounded-full" :class="label.bg_color" />
+            <span class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="label.bg_color" />
             <span>{{ label.name }}</span>
           </div>
 
@@ -91,7 +91,7 @@
       <span
         v-for="label in localLabels"
         :key="label.id"
-        class="mb-2 mr-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0"
+        class="mb-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0 ltr:mr-2 rtl:ml-2"
         :class="label.bg_color + ' ' + label.text_color">
         <inertia-link :href="label.url.show">{{ label.name }}</inertia-link>
       </span>
diff --git a/resources/js/Shared/Modules/LifeEvent.vue b/resources/js/Shared/Modules/LifeEvent.vue
index 3116eff3e..0defd99c9 100644
--- a/resources/js/Shared/Modules/LifeEvent.vue
+++ b/resources/js/Shared/Modules/LifeEvent.vue
@@ -112,7 +112,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -159,10 +159,10 @@ const toggleLifeEventVisibility = (lifeEvent) => {
             @click="toggleTimelineEventVisibility(timelineEvent)">
             <!-- timeline date / label / number of events -->
             <div>
-              <span class="mr-2 text-gray-500">{{ timelineEvent.happened_at }}</span>
+              <span class="text-gray-500 ltr:mr-2 rtl:ml-2">{{ timelineEvent.happened_at }}</span>
 
               <span
-                class="ml-3 whitespace-nowrap rounded-lg bg-slate-100 px-2 py-0.5 text-sm text-slate-400 dark:bg-slate-900">
+                class="whitespace-nowrap rounded-lg bg-slate-100 px-2 py-0.5 text-sm text-slate-400 ltr:ml-3 rtl:mr-3 dark:bg-slate-900">
                 {{ timelineEvent.life_events.length }}
               </span>
             </div>
@@ -177,7 +177,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-2 h-4 w-4 text-gray-400">
+                class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
               </svg>
 
@@ -188,7 +188,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-2 h-4 w-4 text-gray-400">
+                class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
               </svg>
 
@@ -203,7 +203,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
               v-for="lifeEvent in timelineEvent.life_events"
               :key="lifeEvent.id"
               :class="!lifeEvent.collapsed ? 'border' : ''"
-              class="mb-2 ml-6 rounded-lg border-gray-200 dark:border-gray-700">
+              class="mb-2 rounded-lg border-gray-200 ltr:ml-6 rtl:mr-6 dark:border-gray-700">
               <template v-if="lifeEvent.edit">
                 <create-life-event
                   :data="props.data"
@@ -220,7 +220,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                   class="flex cursor-pointer items-center justify-between rounded-t-lg border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 hover:dark:bg-slate-900">
                   <!-- title -->
                   <div @click="toggleLifeEventVisibility(lifeEvent)" class="flex items-center">
-                    <p v-if="lifeEvent.summary" class="mr-4 text-sm font-bold">{{ lifeEvent.summary }}</p>
+                    <p v-if="lifeEvent.summary" class="text-sm font-bold ltr:mr-4 rtl:ml-4">{{ lifeEvent.summary }}</p>
                     <div>
                       <span
                         class="rounded border bg-white px-2 py-1 font-mono text-sm dark:border-gray-700 dark:bg-gray-800">
@@ -245,7 +245,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="mr-2 h-4 w-4 text-gray-400">
+                      class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                     </svg>
 
@@ -257,7 +257,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="mr-2 h-4 w-4 text-gray-400">
+                      class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
                     </svg>
 
@@ -282,14 +282,14 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                   v-if="!lifeEvent.collapsed"
                   class="flex items-center border-b border-gray-200 px-3 py-2 text-sm dark:border-gray-700">
                   <!-- date -->
-                  <div class="mr-4 flex items-center">
+                  <div class="flex items-center ltr:mr-4 rtl:ml-4">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="mr-2 h-4 w-4 text-gray-500">
+                      class="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2">
                       <path
                         stroke-linecap="round"
                         stroke-linejoin="round"
@@ -302,7 +302,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                   <!-- distance -->
                   <div v-if="lifeEvent.distance" class="flex items-center">
                     <svg
-                      class="mr-2 h-6 w-6 text-gray-500"
+                      class="h-6 w-6 text-gray-500 ltr:mr-2 rtl:ml-2"
                       viewBox="0 0 64 64"
                       xmlns="http://www.w3.org/2000/svg"
                       stroke-width="3"
@@ -327,15 +327,18 @@ const toggleLifeEventVisibility = (lifeEvent) => {
 
                 <!-- participants -->
                 <div v-if="!lifeEvent.collapsed" class="flex p-3 pb-1">
-                  <div v-for="contact in lifeEvent.participants" :key="contact.id" class="mr-4">
-                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full mr-2'" :displayName="true" />
+                  <div v-for="contact in lifeEvent.participants" :key="contact.id" class="ltr:mr-4 rtl:ml-4">
+                    <contact-card
+                      :contact="contact"
+                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
+                      :displayName="true" />
                   </div>
                 </div>
               </template>
             </div>
 
             <!-- add a new life event to the timeline -->
-            <div class="mb-2 ml-6">
+            <div class="mb-2 ltr:ml-6 rtl:mr-6">
               <span
                 @click="showAddLifeEventModalForTimelineEventId = timelineEvent.id"
                 v-if="showAddLifeEventModalForTimelineEventId != timelineEvent.id"
diff --git a/resources/js/Shared/Modules/Loans.vue b/resources/js/Shared/Modules/Loans.vue
index 8e70bb0ee..b3b114503 100644
--- a/resources/js/Shared/Modules/Loans.vue
+++ b/resources/js/Shared/Modules/Loans.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -37,7 +37,7 @@
           <!-- loan options -->
           <div class="border-b border-gray-200 px-5 pb-3 pt-5 dark:border-gray-700">
             <ul class="">
-              <li class="mr-5 inline-block">
+              <li class="inline-block ltr:mr-5 rtl:ml-5">
                 <div class="flex items-center">
                   <input
                     id="object"
@@ -48,13 +48,13 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="object"
-                    class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                     {{ $t('The loan is an object') }}
                   </label>
                 </div>
               </li>
 
-              <li class="mr-5 inline-block">
+              <li class="inline-block ltr:mr-5 rtl:ml-5">
                 <div class="flex items-center">
                   <input
                     id="monetary"
@@ -65,7 +65,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="monetary"
-                    class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                     {{ $t('The loan is monetary') }}
                   </label>
                 </div>
@@ -138,7 +138,7 @@
               :label="$t('Who makes the loan?')"
               :add-multiple-contacts="true"
               :required="true"
-              :div-outer-class="'p-5 flex-1 border-r border-gray-200 dark:border-gray-700'" />
+              :div-outer-class="'p-5 flex-1 ltr:border-r rtl:border-l border-gray-200 dark:border-gray-700'" />
 
             <contact-selector
               v-model="form.loanees"
@@ -175,10 +175,13 @@
 
       <!-- list of loans -->
       <div v-for="loan in localLoans" :key="loan.id" class="mb-5 flex">
-        <div v-if="editedLoanId != loan.id" class="mr-3 flex items-center">
+        <div v-if="editedLoanId != loan.id" class="flex items-center ltr:mr-3 rtl:ml-3">
           <div class="flex -space-x-2 overflow-hidden">
             <div v-for="loaner in loan.loaners" :key="loaner.id">
-              <contact-card :contact="loaner" :avatarClasses="'h-7 w-7 rounded-full mr-2'" :displayName="false" />
+              <contact-card
+                :contact="loaner"
+                :avatarClasses="'h-7 w-7 rounded-full ltr:mr-2 rtl:ml-2'"
+                :displayName="false" />
             </div>
           </div>
 
@@ -193,7 +196,10 @@
           </svg>
 
           <div v-for="loanee in loan.loanees" :key="loanee.id">
-            <contact-card :contact="loanee" :avatarClasses="'h-7 w-7 rounded-full mr-2'" :displayName="false" />
+            <contact-card
+              :contact="loanee"
+              :avatarClasses="'h-7 w-7 rounded-full ltr:mr-2 rtl:ml-2'"
+              :displayName="false" />
           </div>
         </div>
 
@@ -203,13 +209,13 @@
           <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
             <div class="flex items-center justify-between">
               <div>
-                <span class="mr-2 block">
-                  <span v-if="loan.amount_lent" class="mr-2">
-                    <span v-if="loan.currency_name" class="mr-1 text-gray-500">
+                <span class="block ltr:mr-2 rtl:ml-2">
+                  <span v-if="loan.amount_lent" class="ltr:mr-2 rtl:ml-2">
+                    <span v-if="loan.currency_name" class="text-gray-500 ltr:mr-1 rtl:ml-1">
                       {{ loan.currency_name }}
                     </span>
                     {{ loan.amount_lent }}
-                    <span class="ml-2"> • </span>
+                    <span class="ltr:ml-2 rtl:mr-2"> • </span>
                   </span>
                   {{ loan.name }}
                 </span>
@@ -217,7 +223,7 @@
                   {{ loan.description }}
                 </span>
               </div>
-              <span v-if="loan.loaned_at_human_format" class="mr-2 text-sm text-gray-500">{{
+              <span v-if="loan.loaned_at_human_format" class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{
                 loan.loaned_at_human_format
               }}</span>
             </div>
@@ -229,16 +235,21 @@
               <!-- settle -->
               <li
                 v-if="!loan.settled"
-                class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
                 @click="toggle(loan)">
                 {{ $t('Settle') }}
               </li>
-              <li v-else class="mr-4 inline cursor-pointer text-blue-500 hover:underline" @click="toggle(loan)">
+              <li
+                v-else
+                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+                @click="toggle(loan)">
                 {{ $t('Revert') }}
               </li>
 
               <!-- edit -->
-              <li class="mr-4 inline cursor-pointer text-blue-500 hover:underline" @click="showEditLoanModal(loan)">
+              <li
+                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+                @click="showEditLoanModal(loan)">
                 {{ $t('Edit') }}
               </li>
 
@@ -259,7 +270,7 @@
             <!-- loan options -->
             <div class="border-b border-gray-200 px-5 pb-3 pt-5 dark:border-gray-700">
               <ul class="">
-                <li class="mr-5 inline-block">
+                <li class="inline-block ltr:mr-5 rtl:ml-5">
                   <div class="flex items-center">
                     <input
                       id="object"
@@ -270,13 +281,13 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="object"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                       {{ $t('The loan is an object') }}
                     </label>
                   </div>
                 </li>
 
-                <li class="mr-5 inline-block">
+                <li class="inline-block ltr:mr-5 rtl:ml-5">
                   <div class="flex items-center">
                     <input
                       id="monetary"
@@ -287,7 +298,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="monetary"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                       {{ $t('The loan is monetary') }}
                     </label>
                   </div>
@@ -364,7 +375,7 @@
                 :label="$t('Who makes the loan?')"
                 :add-multiple-contacts="true"
                 :required="true"
-                :div-outer-class="'p-5 flex-1 border-r border-gray-200 dark:border-gray-700'" />
+                :div-outer-class="'p-5 flex-1 ltr:border-r rtl:border-l border-gray-200 dark:border-gray-700'" />
 
               <contact-selector
                 v-model="form.loanees"
diff --git a/resources/js/Shared/Modules/Notes.vue b/resources/js/Shared/Modules/Notes.vue
index d1fd53fcd..cf3aca0a4 100644
--- a/resources/js/Shared/Modules/Notes.vue
+++ b/resources/js/Shared/Modules/Notes.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             class="icon-sidebar relative inline h-4 w-4"
             viewBox="0 0 24 24"
@@ -78,7 +78,7 @@
               name="emotion"
               type="radio"
               class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-700 dark:bg-slate-900 dark:text-indigo-400" />
-            <label :for="emotion.type" class="ml-2 block font-medium text-gray-700 dark:text-gray-300">
+            <label :for="emotion.type" class="block font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
               {{ emotion.name }}
             </label>
           </div>
@@ -87,7 +87,7 @@
         <!-- cta to add a title -->
         <span
           v-if="!titleFieldShown"
-          class="mr-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 dark:border-gray-700 dark:bg-slate-800 hover:dark:bg-slate-700"
+          class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:bg-slate-800 hover:dark:bg-slate-700"
           @click="showTitleField">
           {{ $t('+ add title') }}
         </span>
@@ -138,12 +138,12 @@
             class="flex justify-between border-t border-gray-200 px-3 py-1 text-xs text-gray-600 hover:rounded-b hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 hover:dark:bg-slate-900">
             <div class="flex items-center">
               <!-- emotion -->
-              <div v-if="note.emotion" class="relative mr-3 inline">
+              <div v-if="note.emotion" class="relative inline ltr:mr-3 rtl:ml-3">
                 {{ note.emotion.name }}
               </div>
 
               <!-- date -->
-              <div class="relative mr-3 inline">
+              <div class="relative inline ltr:mr-3 rtl:ml-3">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   class="icon-note relative inline h-3 w-3 text-gray-400"
@@ -160,9 +160,9 @@
               </div>
 
               <!-- author -->
-              <div v-if="note.author" class="relative mr-3 inline">
+              <div v-if="note.author" class="relative inline ltr:mr-3 rtl:ml-3">
                 <div class="icon-avatar relative flex">
-                  <avatar :data="note.author.avatar" :classes="'rounded-full relative mr-1 h-3 w-3'" />
+                  <avatar :data="note.author.avatar" :classes="'rounded-full relative ltr:mr-1 rtl:ml-1 h-3 w-3'" />
                   <span>{{ note.author.name }}</span>
                 </div>
               </div>
@@ -213,7 +213,7 @@
                   name="emotion"
                   type="radio"
                   class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:text-indigo-400" />
-                <label :for="emotion.type" class="ml-2 block font-medium text-gray-700 dark:text-gray-300">
+                <label :for="emotion.type" class="block font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
                   {{ emotion.name }}
                 </label>
               </div>
diff --git a/resources/js/Shared/Modules/Pets.vue b/resources/js/Shared/Modules/Pets.vue
index caf8ba7ed..268cf90ae 100644
--- a/resources/js/Shared/Modules/Pets.vue
+++ b/resources/js/Shared/Modules/Pets.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
-          <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
+          <span class="relative ltr:mr-1 rtl:ml-1">
             <svg
               class="icon-sidebar relative inline h-4 w-4"
               style="width: 1em; height: 1em; vertical-align: middle; fill: currentColor; overflow: hidden"
@@ -77,13 +77,13 @@
           <!-- pet -->
           <div v-if="editedPetId != pet.id" class="flex items-center justify-between px-3 py-2">
             <div class="flex items-center">
-              <span class="mr-2 text-sm text-gray-500">{{ pet.pet_category.name }}</span>
-              <span class="mr-2">{{ pet.name }}</span>
+              <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ pet.pet_category.name }}</span>
+              <span class="ltr:mr-2 rtl:ml-2">{{ pet.name }}</span>
             </div>
 
             <!-- actions -->
             <ul class="text-sm">
-              <li class="mr-4 inline" @click="showEditPetModal(pet)">
+              <li class="inline ltr:mr-4 rtl:ml-4" @click="showEditPetModal(pet)">
                 <span class="cursor-pointer text-blue-500 hover:underline">{{ $t('Edit') }}</span>
               </li>
               <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(pet)">
@@ -279,10 +279,4 @@ export default {
     border-bottom-right-radius: 8px;
   }
 }
-
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
 </style>
diff --git a/resources/js/Shared/Modules/Photos.vue b/resources/js/Shared/Modules/Photos.vue
index 29d43c473..4060a73fc 100644
--- a/resources/js/Shared/Modules/Photos.vue
+++ b/resources/js/Shared/Modules/Photos.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -39,7 +39,7 @@
       v-if="!data.canUploadFile"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <p class="bg-gray-100 p-3 text-center">
-        <span class="mr-1">⚠️</span> {{ $t('You don’t have enough space left in your account.') }}
+        <span class="ltr:mr-1 rtl:ml-1">⚠️</span> {{ $t('You don’t have enough space left in your account.') }}
       </p>
     </div>
 
@@ -169,10 +169,4 @@ export default {
   color: #737e8d;
   top: -2px;
 }
-
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
 </style>
diff --git a/resources/js/Shared/Modules/Posts.vue b/resources/js/Shared/Modules/Posts.vue
index 2adc727df..35e4b8a4f 100644
--- a/resources/js/Shared/Modules/Posts.vue
+++ b/resources/js/Shared/Modules/Posts.vue
@@ -9,7 +9,7 @@ const props = defineProps({
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -41,7 +41,7 @@ const props = defineProps({
           }}</inertia-link>
           <div class="flex items-center text-sm">
             <!-- journal -->
-            <p class="mr-2">
+            <p class="ltr:mr-2 rtl:ml-2">
               {{ $t('in') }}
               <inertia-link :href="post.journal.url.show" class="text-blue-500 hover:underline">{{
                 post.journal.name
@@ -49,7 +49,7 @@ const props = defineProps({
             </p>
 
             <!-- date -->
-            <div class="relative mr-3 inline">
+            <div class="relative inline ltr:mr-3 rtl:ml-3">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-note relative inline h-3 w-3 text-gray-400"
diff --git a/resources/js/Shared/Modules/QuickFacts.vue b/resources/js/Shared/Modules/QuickFacts.vue
index 809adc25a..f2ab8d4e3 100644
--- a/resources/js/Shared/Modules/QuickFacts.vue
+++ b/resources/js/Shared/Modules/QuickFacts.vue
@@ -106,14 +106,14 @@ const destroy = (quickFact) => {
 <template>
   <div class="mb-8 rounded-lg border border-gray-200 bg-gray-50 p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
     <div @click="toggle()" class="flex cursor-pointer items-center justify-between" :class="openState ? ' mb-4' : ''">
-      <div class="mr-1 flex items-center">
+      <div class="flex items-center ltr:mr-1 rtl:ml-1">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
-          class="relative mr-1 inline h-4 w-4">
+          class="relative inline h-4 w-4 ltr:mr-1 rtl:ml-1">
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -132,7 +132,7 @@ const destroy = (quickFact) => {
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
-          class="mr-2 h-4 w-4 cursor-pointer text-gray-400">
+          class="h-4 w-4 cursor-pointer text-gray-400 ltr:mr-2 rtl:ml-2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
         </svg>
 
@@ -143,7 +143,7 @@ const destroy = (quickFact) => {
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
-          class="mr-2 h-4 w-4 cursor-pointer text-gray-400">
+          class="h-4 w-4 cursor-pointer text-gray-400 ltr:mr-2 rtl:ml-2">
           <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
         </svg>
       </div>
@@ -153,7 +153,7 @@ const destroy = (quickFact) => {
       <!-- templates -->
       <div class="mb-4 flex">
         <ul class="list">
-          <li v-for="template in data.templates" :key="template.id" class="mr-2 inline">
+          <li v-for="template in data.templates" :key="template.id" class="inline ltr:mr-2 rtl:ml-2">
             <span
               @click="get(template)"
               :class="localTemplate.id === template.id ? 'rounded border border-gray-200 bg-white font-semibold' : ''"
@@ -179,7 +179,7 @@ const destroy = (quickFact) => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-1 h-4 w-4 flex-none text-green-600">
+                class="h-4 w-4 flex-none text-green-600 ltr:mr-1 rtl:ml-1">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -223,7 +223,7 @@ const destroy = (quickFact) => {
             </div>
           </form>
         </li>
-        <li v-if="!createQuickFactModalShown" class="ml-2 mt-1">
+        <li v-if="!createQuickFactModalShown" class="mt-1 ltr:ml-2 rtl:mr-2">
           <span @click="showCreateQuickFactModal()" class="cursor-pointer text-blue-500 hover:underline">{{
             $t('+ add another')
           }}</span>
diff --git a/resources/js/Shared/Modules/Relationships.vue b/resources/js/Shared/Modules/Relationships.vue
index 461c2f316..3bc487c7d 100644
--- a/resources/js/Shared/Modules/Relationships.vue
+++ b/resources/js/Shared/Modules/Relationships.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -44,7 +44,7 @@
             :key="relationshipType.id"
             class="item-list flex items-center justify-between border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <div class="flex">
-              <div class="mr-2 flex items-center">
+              <div class="flex items-center ltr:mr-2 rtl:ml-2">
                 <avatar :data="relationshipType.contact.avatar" :classes="'mr-2 h-5 w-5'" />
 
                 <!-- name -->
@@ -57,13 +57,13 @@
                 <span v-else>{{ relationshipType.contact.name }}</span>
 
                 <!-- age -->
-                <span v-if="relationshipType.contact.age" class="ml-2 text-xs text-gray-400"
+                <span v-if="relationshipType.contact.age" class="text-xs text-gray-400 ltr:ml-2 rtl:mr-2"
                   >({{ relationshipType.contact.age }})</span
                 >
               </div>
 
               <!-- relationship type -->
-              <span class="mr-2 text-gray-400">{{ relationshipType.relationship_type.name }}</span>
+              <span class="text-gray-400 ltr:mr-2 rtl:ml-2">{{ relationshipType.relationship_type.name }}</span>
             </div>
 
             <!-- actions -->
diff --git a/resources/js/Shared/Modules/Reminders.vue b/resources/js/Shared/Modules/Reminders.vue
index 6bcead4fa..e3a6466c5 100644
--- a/resources/js/Shared/Modules/Reminders.vue
+++ b/resources/js/Shared/Modules/Reminders.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             class="icon-sidebar relative inline h-4 w-4"
             viewBox="0 0 24 24"
@@ -66,11 +66,11 @@
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
             <label
               for="full_date"
-              class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
               {{ $t('I know the exact date, including the year') }}
             </label>
           </div>
-          <div v-if="form.choice === 'full_date'" class="mb-4 ml-6">
+          <div v-if="form.choice === 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
             <DatePicker v-model.string="form.date" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
               <template #default="{ inputValue, inputEvents }">
                 <input
@@ -92,21 +92,21 @@
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
             <label
               for="month_day"
-              class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
               {{ $t('I only know the day and month, not the year') }}
             </label>
           </div>
-          <div v-if="form.choice === 'month_day'" class="ml-6 mt-2 flex">
-            <dropdown
+          <div v-if="form.choice === 'month_day'" class="mt-2 flex ltr:ml-6 rtl:mr-6">
+            <Dropdown
               v-model="form.month"
               :data="data.months"
               :required="true"
-              :div-outer-class="'mb-5 mr-2'"
+              :div-outer-class="'mb-5 ltr:mr-2 rtl:ml-2'"
               :placeholder="$t('Choose a value')"
               :dropdown-class="'block w-full'"
               :label="$t('Month')" />
 
-            <dropdown
+            <Dropdown
               v-model="form.day"
               :data="data.days"
               :required="true"
@@ -124,7 +124,7 @@
             {{ $t('If the date is in the past, the next occurence of the date will be next year.') }}
           </p>
 
-          <div class="ml-4 mt-4">
+          <div class="mt-4 ltr:ml-4 rtl:mr-4">
             <div class="mb-2 flex items-center">
               <input
                 id="one_time"
@@ -135,7 +135,7 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="one_time"
-                class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                 {{ $t('Only once, when the next occurence of the date occurs.') }}
               </label>
             </div>
@@ -150,30 +150,26 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="recurring"
-                class="ml-3 block flex cursor-pointer items-center text-sm font-medium text-gray-700 dark:text-gray-300">
-                <span class="mr-2">{{ $t('Every') }}</span>
+                class="block flex cursor-pointer items-center text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                <span class="ltr:mr-2 rtl:ml-2">{{ $t('Every') }}</span>
 
-                <select
-                  :id="id"
+                <Dropdown
+                  :id="'frequency-number'"
                   v-model="form.frequencyNumber"
-                  class="mr-2 rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
+                  dropdown-class="ltr:mr-2 rtl:ml-2"
                   :required="required"
-                  @change="change">
-                  <option v-for="n in 10" :key="n" :value="n">
-                    {{ n }}
-                  </option>
-                </select>
-
-                <select
-                  :id="id"
+                  :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" />
+
+                <Dropdown
+                  :id="'frequency-type'"
                   v-model="form.frequencyType"
-                  class="mr-2 rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
+                  dropdown-class="ltr:mr-2 rtl:ml-2"
                   :required="required"
-                  @change="change">
-                  <option value="recurring_day">{{ $t('day') }}</option>
-                  <option value="recurring_month">{{ $t('month') }}</option>
-                  <option value="recurring_year">{{ $t('year') }}</option>
-                </select>
+                  :data="[
+                    { id: 'recurring_day', name: $t('day') },
+                    { id: 'recurring_month', name: $t('month') },
+                    { id: 'recurring_year', name: $t('year') },
+                  ]" />
 
                 <span>{{ $t('after the next occurence of the date.') }}</span>
               </label>
@@ -198,8 +194,8 @@
           <!-- reminder -->
           <div class="flex items-center justify-between px-3 py-2">
             <div class="flex items-center">
-              <span class="mr-2 text-sm text-gray-500">{{ reminder.date }}</span>
-              <span class="mr-2">{{ reminder.label }}</span>
+              <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ reminder.date }}</span>
+              <span class="ltr:mr-2 rtl:ml-2">{{ reminder.label }}</span>
 
               <!-- recurring icon -->
               <a-tooltip v-if="reminder.type != 'one_time'" placement="topLeft" title="Recurring" arrow-point-at-center>
@@ -221,7 +217,7 @@
             <!-- actions -->
             <ul class="text-sm">
               <li
-                class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
                 @click="showEditReminderModal(reminder)">
                 {{ $t('Edit') }}
               </li>
@@ -268,11 +264,11 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="full_date"
-                    class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                     {{ $t('I know the exact date, including the year') }}
                   </label>
                 </div>
-                <div v-if="form.choice === 'full_date'" class="mb-4 ml-6">
+                <div v-if="form.choice === 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
                   <DatePicker v-model.string="form.date" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
                     <template #default="{ inputValue, inputEvents }">
                       <input
@@ -294,12 +290,12 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="month_day"
-                    class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                     {{ $t('I only know the day and month, not the year') }}
                   </label>
                 </div>
-                <div v-if="form.choice === 'month_day'" class="ml-6 mt-2 flex">
-                  <dropdown
+                <div v-if="form.choice === 'month_day'" class="mt-2 flex ltr:ml-6 rtl:mr-6">
+                  <Dropdown
                     v-model="form.month"
                     :data="data.months"
                     :required="true"
@@ -308,7 +304,7 @@
                     :dropdown-class="'block w-full'"
                     :label="$t('Month')" />
 
-                  <dropdown
+                  <Dropdown
                     v-model="form.day"
                     :data="data.days"
                     :required="true"
@@ -325,7 +321,7 @@
                   {{ $t('If the date is in the past, the next occurence of the date will be next year.') }}
                 </p>
 
-                <div class="ml-4 mt-4">
+                <div class="mt-4 ltr:ml-4 rtl:mr-4">
                   <div class="mb-2 flex items-center">
                     <input
                       id="one_time"
@@ -336,7 +332,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="one_time"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
+                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
                       {{ $t('Only once, when the next occurence of the date occurs.') }}
                     </label>
                   </div>
@@ -351,30 +347,26 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="recurring"
-                      class="ml-3 block flex cursor-pointer items-center text-sm font-medium text-gray-700 dark:text-gray-300">
-                      <span class="mr-2">{{ $t('Every') }}</span>
+                      class="block flex cursor-pointer items-center text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      <span class="ltr:mr-2 rtl:ml-2">{{ $t('Every') }}</span>
 
-                      <select
-                        :id="id"
+                      <Dropdown
+                        :id="'frequency-number'"
                         v-model="form.frequencyNumber"
-                        class="mr-2 rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
+                        dropdown-class="ltr:mr-2 rtl:ml-2"
                         :required="required"
-                        @change="change">
-                        <option v-for="n in 10" :key="n" :value="n">
-                          {{ n }}
-                        </option>
-                      </select>
-
-                      <select
-                        :id="id"
+                        :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" />
+
+                      <Dropdown
+                        :id="'frequency-type'"
                         v-model="form.frequencyType"
-                        class="mr-2 rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm"
+                        dropdown-class="ltr:mr-2 rtl:ml-2"
                         :required="required"
-                        @change="change">
-                        <option value="recurring_day">{{ $t('day') }}</option>
-                        <option value="recurring_month">{{ $t('month') }}</option>
-                        <option value="recurring_year">{{ $t('year') }}</option>
-                      </select>
+                        :data="[
+                          { id: 'recurring_day', name: $t('day') },
+                          { id: 'recurring_month', name: $t('month') },
+                          { id: 'recurring_year', name: $t('year') },
+                        ]" />
 
                       <span>{{ $t('after the next occurence of the date.') }}</span>
                     </label>
@@ -564,10 +556,4 @@ export default {
     border-bottom-right-radius: 8px;
   }
 }
-
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
 </style>
diff --git a/resources/js/Shared/Modules/Tasks.vue b/resources/js/Shared/Modules/Tasks.vue
index 5558825cc..468b1b207 100644
--- a/resources/js/Shared/Modules/Tasks.vue
+++ b/resources/js/Shared/Modules/Tasks.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative mr-1">
+        <span class="relative ltr:mr-1 rtl:ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -58,13 +58,13 @@
             type="checkbox"
             class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
             @click="toggleDueDateModal" />
-          <label for="reminder" class="ml-2 block cursor-pointer text-sm text-gray-900">
+          <label for="reminder" class="block cursor-pointer text-sm text-gray-900 ltr:ml-2 rtl:mr-2">
             {{ $t('Add a due date') }}
           </label>
         </div>
 
         <!-- task options -->
-        <div v-if="form.due_at_checked" class="ml-4 mt-4">
+        <div v-if="form.due_at_checked" class="mt-4 ltr:ml-4 rtl:mr-4">
           <DatePicker v-model.string="form.due_at" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
             <template #default="{ inputValue, inputEvents }">
               <input
@@ -99,17 +99,17 @@
               type="checkbox"
               class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
               @change="toggle(task)" />
-            <label :for="task.id" class="ml-2 flex cursor-pointer text-gray-900">
+            <label :for="task.id" class="flex cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2">
               {{ task.label }}
 
               <!-- due date -->
               <span
                 v-if="task.due_at"
                 :class="task.due_at_late ? 'bg-red-400/10 text-red-600' : 'bg-sky-400/10 text-sky-600'"
-                class="ml-2 flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 dark:text-sky-400">
+                class="flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 ltr:ml-2 rtl:mr-2 dark:text-sky-400">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="mr-1 h-3 w-3"
+                  class="h-3 w-3 ltr:mr-1 rtl:ml-1"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -154,13 +154,13 @@
                 type="checkbox"
                 class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
                 @click="toggleDueDateModal" />
-              <label for="reminder" class="ml-2 block cursor-pointer text-sm text-gray-900">
+              <label for="reminder" class="block cursor-pointer text-sm text-gray-900 ltr:ml-2 rtl:mr-2">
                 {{ $t('Add a due date') }}
               </label>
             </div>
 
             <!-- task options -->
-            <div v-if="form.due_at_checked" class="ml-4 mt-4">
+            <div v-if="form.due_at_checked" class="mt-4 ltr:ml-4 rtl:mr-4">
               <DatePicker v-model.string="form.due_at" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
                 <template #default="{ inputValue, inputEvents }">
                   <input
@@ -205,17 +205,17 @@
                 class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
                 @change="toggle(task)" />
 
-              <label :for="task.id" class="ml-2 flex cursor-pointer items-center text-gray-900">
+              <label :for="task.id" class="flex cursor-pointer items-center text-gray-900 ltr:ml-2 rtl:mr-2">
                 {{ task.label }}
 
                 <!-- due date -->
                 <span
                   v-if="task.due_at"
                   :class="task.due_at_late ? 'bg-red-400/10' : ''"
-                  class="ml-2 flex items-center rounded-full bg-sky-400/10 px-2 py-0.5 text-xs font-medium leading-5 text-sky-600 dark:text-sky-400">
+                  class="flex items-center rounded-full bg-sky-400/10 px-2 py-0.5 text-xs font-medium leading-5 text-sky-600 ltr:ml-2 rtl:mr-2 dark:text-sky-400">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    class="mr-1 h-3 w-3"
+                    class="h-3 w-3 ltr:mr-1 rtl:ml-1"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
diff --git a/resources/js/Shared/Toaster.vue b/resources/js/Shared/Toaster.vue
index d3d459ebf..4a1fb8834 100644
--- a/resources/js/Shared/Toaster.vue
+++ b/resources/js/Shared/Toaster.vue
@@ -1,93 +1,61 @@
-<template>
-  <div class="flash notification fixed" :class="[levelClass, { 'is-visible': isOpen }]">
-    <span class="mr-1"> 👋 </span>
-    {{ messageText }}
-  </div>
-</template>
-
-<script>
+<script setup>
 import emitter from 'tiny-emitter/instance';
+import { onMounted, ref } from 'vue';
 
-export default {
-  props: {
-    level: {
-      type: String,
-      default: '',
-    },
-    message: {
-      type: String,
-      default: '',
-    },
-  },
+const props = defineProps({
+  level: String,
+  message: String,
+});
 
-  data() {
-    return {
-      isOpen: false,
-      isVisibleClass: 'is-visible',
-      closeAfter: 5000, // 10 seconds, you can change that
-      levelClass: null,
-      messageText: null,
-    };
-  },
+const isOpen = ref(false);
+const closeAfter = ref(5000); // 10 seconds, you can change that
+const levelClass = ref(null);
+const messageText = ref(null);
 
-  created() {
-    if (this.level) {
-      this.levelClass = 'is-' + this.level;
-    }
-
-    if (this.message) {
-      this.messageText = this.message;
-      this.show();
-    }
-
-    const self = this;
+onMounted(() => {
+  if (props.level) {
+    levelClass.value = 'is-' + props.level;
+  }
 
-    emitter.on('flash', (data) => self.show(data));
-  },
+  if (props.message) {
+    messageText.value = props.message;
+    show();
+  }
 
-  methods: {
-    show(data) {
-      if (data) {
-        this.messageText = data.message;
-        this.levelClass = 'is-' + data.level;
-      }
+  emitter.on('flash', (data) => show(data));
+});
 
-      this.act(true, 100);
-      this.hide();
-    },
+const show = (data) => {
+  if (data) {
+    messageText.value = data.message;
+    levelClass.value = 'is-' + data.level;
+  }
 
-    hide() {
-      this.act(false, this.closeAfter);
-    },
+  act(true, 100);
+  hide();
+};
 
-    act(action, timeout) {
-      const self = this;
+const hide = () => {
+  act(false, closeAfter.value);
+};
 
-      setTimeout(() => {
-        self.isOpen = action;
-      }, timeout);
-    },
-  },
+const act = (action, timeout) => {
+  setTimeout(() => {
+    isOpen.value = action;
+  }, timeout);
 };
 </script>
 
-<style lang="scss" scoped>
-.flash.notification {
-  z-index: 99999999999;
-  bottom: 30px;
-  right: 0px;
-  transform: translate(100%);
-  transition: all 0.8s ease-in-out;
-  background-color: #fff;
-  border: 1px solid #e7e7e7;
-  border-radius: 6px;
-  box-shadow: 1px 1px 2px rgba(122, 122, 122, 0.17);
-  padding: 10px 20px;
-
-  &.is-visible {
-    transform: translate(0);
-    opacity: 1;
-    right: 30px;
-  }
-}
-</style>
+<template>
+  <div
+    class="fixed bottom-8 z-[9999] rounded-md border-zinc-200 bg-white px-5 py-2.5 shadow-sm shadow-gray-400 transition duration-700 ease-in-out dark:border-zinc-600 dark:bg-gray-900 dark:shadow-gray-600"
+    :class="[
+      levelClass,
+      isOpen
+        ? ['opacity-100', 'translate-x-0', 'ltr:right-7', 'rtl:left-7']
+        : ['opacity-0', 'translate-x-full', 'ltr:right-0', 'rtl:left-0'],
+    ]">
+    <span class="ltr:mr-1 rtl:ml-1"> 👋 </span>
+    {{ messageText }}
+  </div>
+</template>

From fe553eed1ffc53bba48e7b54e31c31d5715d1eb6 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 12:55:25 +0200
Subject: [PATCH 02/14] update

---
 .../js/Pages/Settings/Notifications/Partials/Emails.vue   | 8 +++-----
 .../js/Pages/Settings/Notifications/Partials/Telegram.vue | 4 +---
 resources/js/Shared/Form/Dropdown.vue                     | 6 ++----
 resources/views/app.blade.php                             | 2 +-
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
index abd2cb7f1..d5006c59c 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
@@ -56,13 +56,11 @@
             {{ $t('At') }}
           </span>
 
-          <Dropdown v-model="form.hours" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="hours" />
+          <Dropdown v-model="form.hours" dropdown-class="ltr:mr-1 rtl:ml-1" :required="required" :data="hours" />
 
-          <span class="ltr:mr-2 rtl:ml-2">{{ $t('h:') }}</span>
+          <span class="ltr:mr-2 rtl:ml-2">:</span>
 
-          <Dropdown v-model="form.minutes" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="minutes" />
-
-          <span>{{ $t('m') }}</span>
+          <Dropdown v-model="form.minutes" dropdown-class="ltr:mr-1 rtl:ml-1" :required="required" :data="minutes" />
         </div>
       </div>
 
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
index 81b7b5e7c..b72b6664c 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
@@ -31,11 +31,9 @@
 
           <Dropdown v-model="form.hours" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="hours" />
 
-          <span class="ltr:mr-2 rtl:ml-2">{{ $t('h:') }}</span>
+          <span class="ltr:mr-2 rtl:ml-2">:</span>
 
           <Dropdown v-model="form.minutes" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="minutes" />
-
-          <span>{{ $t('m') }}</span>
         </div>
       </div>
 
diff --git a/resources/js/Shared/Form/Dropdown.vue b/resources/js/Shared/Form/Dropdown.vue
index 572e10ee8..f53e81e5b 100644
--- a/resources/js/Shared/Form/Dropdown.vue
+++ b/resources/js/Shared/Form/Dropdown.vue
@@ -147,17 +147,15 @@ export default {
   padding-left: 64px;
 }
 
-select {
-  background-position: right 3px center;
-}
-
 .ltr select {
   padding-left: 8px;
   padding-right: 20px;
+  background-position: right 3px center;
 }
 
 .rtl select {
   padding-right: 8px;
   padding-left: 20px;
+  background-position: left 3px center;
 }
 </style>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 07db40a18..1b50462ca 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ htmldir() }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ htmldir() }}" class="{{ htmldir() }}">
 
   <head>
     <meta charset="utf-8">

From 46459e1c770b88995a58e2fe4dfc9c39899ff1da Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 13:09:24 +0200
Subject: [PATCH 03/14] more

---
 resources/js/Components/Breadcrumb.vue        |  2 +-
 resources/js/Components/Pagination.vue        | 13 ++++++++++--
 .../js/Pages/Settings/CancelAccount/Index.vue |  7 +++++--
 .../Notifications/Partials/Emails.vue         |  2 +-
 .../Notifications/Partials/Telegram.vue       |  5 ++++-
 .../Personalize/AddressTypes/Index.vue        |  7 +++++--
 .../Personalize/CallReasons/Index.vue         | 17 ++++++++++++----
 .../ContactInformationTypes/Index.vue         |  4 ++--
 .../Settings/Personalize/Genders/Index.vue    |  7 +++++--
 .../Personalize/GiftOccasions/Index.vue       | 10 ++++++++--
 .../Settings/Personalize/GiftStates/Index.vue | 10 ++++++++--
 .../Settings/Personalize/GroupTypes/Index.vue | 20 +++++++++++++++----
 .../Settings/Personalize/Modules/Index.vue    |  2 +-
 .../Personalize/PetCategories/Index.vue       |  7 +++++--
 .../Personalize/PostTemplates/Index.vue       | 20 +++++++++++++++----
 .../Settings/Personalize/Pronouns/Index.vue   |  7 +++++--
 .../Personalize/Relationships/Index.vue       |  8 ++++----
 .../Settings/Personalize/Religions/Index.vue  | 10 ++++++++--
 .../Settings/Personalize/Templates/Index.vue  | 10 ++++++++--
 .../Personalize/Templates/Partials/Pages.vue  |  7 +++++--
 .../Preferences/Partials/DateFormat.vue       |  2 +-
 .../Preferences/Partials/DistanceFormat.vue   |  2 +-
 .../Settings/Preferences/Partials/Locale.vue  |  2 +-
 .../Settings/Preferences/Partials/Maps.vue    |  2 +-
 .../Preferences/Partials/NameOrder.vue        |  2 +-
 .../Preferences/Partials/NumberFormat.vue     |  2 +-
 .../Preferences/Partials/Timezone.vue         |  2 +-
 resources/js/Pages/Settings/Users/Create.vue  |  2 +-
 resources/js/Pages/Settings/Users/Index.vue   |  5 ++++-
 resources/js/Pages/Vault/Contact/Create.vue   |  2 +-
 .../js/Pages/Vault/Contact/Goals/Show.vue     |  2 +-
 .../Vault/Contact/ImportantDates/Index.vue    |  4 ++--
 .../js/Pages/Vault/Contact/Names/Edit.vue     |  2 +-
 .../Vault/Contact/Relationships/Create.vue    |  4 ++--
 resources/js/Pages/Vault/Create.vue           |  4 ++--
 .../Vault/Dashboard/Partials/DueTasks.vue     |  2 +-
 .../Vault/Dashboard/Partials/Favorites.vue    |  2 +-
 .../Vault/Dashboard/Partials/LastUpdated.vue  |  2 +-
 .../Vault/Dashboard/Partials/LifeMetrics.vue  |  4 ++--
 .../Dashboard/Partials/MoodTrackingEvents.vue |  2 +-
 .../Dashboard/Partials/UpcomingReminders.vue  |  2 +-
 .../js/Pages/Vault/Dashboard/Task/Index.vue   |  2 +-
 resources/js/Pages/Vault/Group/Edit.vue       |  2 +-
 resources/js/Pages/Vault/Journal/Create.vue   |  2 +-
 resources/js/Pages/Vault/Journal/Edit.vue     |  2 +-
 .../js/Pages/Vault/Journal/Metrics/Index.vue  |  5 ++++-
 .../Journal/Post/Partials/PostMetrics.vue     |  2 +-
 .../Journal/Post/Partials/SlicesOfLife.vue    |  2 +-
 .../js/Pages/Vault/Journal/Slices/Edit.vue    |  2 +-
 .../js/Pages/Vault/Journal/Slices/Index.vue   |  5 ++++-
 .../Partials/ContactImportantDateTypes.vue    |  7 +++++--
 .../Pages/Vault/Settings/Partials/Delete.vue  |  2 +-
 .../Pages/Vault/Settings/Partials/Labels.vue  |  7 +++++--
 .../Partials/LifeEventTypesAndCategories.vue  | 17 ++++++++++++----
 .../Partials/MoodTrackingParameters.vue       | 10 ++++++++--
 .../Settings/Partials/QuickFactTemplate.vue   |  4 ++--
 .../js/Pages/Vault/Settings/Partials/Tags.vue |  4 ++--
 resources/js/Shared/Modules/Addresses.vue     |  6 +++---
 resources/js/Shared/Modules/Calls.vue         |  4 ++--
 .../js/Shared/Modules/ContactInformation.vue  | 10 ++++++++--
 .../js/Shared/Modules/CreateLifeEvent.vue     |  6 +++---
 resources/js/Shared/Modules/Goals.vue         |  2 +-
 resources/js/Shared/Modules/Groups.vue        |  2 +-
 .../js/Shared/Modules/JobInformation.vue      |  2 +-
 resources/js/Shared/Modules/Loans.vue         |  8 ++++----
 resources/js/Shared/Modules/Notes.vue         |  4 ++--
 resources/js/Shared/Modules/Pets.vue          |  4 ++--
 resources/js/Shared/Modules/QuickFacts.vue    |  4 ++--
 resources/js/Shared/Modules/Relationships.vue |  2 +-
 resources/js/Shared/Modules/Religion.vue      |  2 +-
 resources/js/Shared/Modules/Reminders.vue     |  6 +++---
 resources/js/Shared/Modules/Tasks.vue         |  4 ++--
 72 files changed, 246 insertions(+), 123 deletions(-)

diff --git a/resources/js/Components/Breadcrumb.vue b/resources/js/Components/Breadcrumb.vue
index ce3ed7199..e5a8695fd 100644
--- a/resources/js/Components/Breadcrumb.vue
+++ b/resources/js/Components/Breadcrumb.vue
@@ -22,7 +22,7 @@ defineProps({
           </svg>
         </li>
 
-        <li class="inline" :class="{ 'ml-2': index > 0 }">
+        <li class="inline" :class="{ 'ltr:ml-2 rtl:mr-2': index > 0 }">
           <inertia-link v-if="item.url" :href="item.url" class="text-blue-500 hover:underline">
             {{ item.name }}
           </inertia-link>
diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue
index 2326a7491..0020b0df9 100644
--- a/resources/js/Components/Pagination.vue
+++ b/resources/js/Components/Pagination.vue
@@ -44,7 +44,8 @@ const linkClasses =
         :class="[
           commonClasses,
           linkClasses,
-          'ml-3',
+          'ltr:ml-3',
+          'rtl:mr-3',
           'rounded-md',
           'text-gray-700',
           'dark:text-gray-300',
@@ -54,7 +55,15 @@ const linkClasses =
       </Link>
       <span
         v-else
-        :class="[commonClasses, 'ml-3', 'rounded-md', 'text-gray-500', 'cursor-default', 'dark:bg-gray-900']">
+        :class="[
+          commonClasses,
+          'ltr:ml-3',
+          'rtl:mr-3',
+          'rounded-md',
+          'text-gray-500',
+          'cursor-default',
+          'dark:bg-gray-900',
+        ]">
         <span v-html="$t('Next')"></span>
       </span>
     </div>
diff --git a/resources/js/Pages/Settings/CancelAccount/Index.vue b/resources/js/Pages/Settings/CancelAccount/Index.vue
index b60e6ddd2..6e986bd4c 100644
--- a/resources/js/Pages/Settings/CancelAccount/Index.vue
+++ b/resources/js/Pages/Settings/CancelAccount/Index.vue
@@ -39,7 +39,10 @@
             <h1 class="mb-4 flex justify-center text-2xl font-medium">
               <span>{{ $t('Cancel your account') }}</span>
 
-              <help :url="$page.props.help_links.settings_account_deletion" :top="'9px'" :classes="'ml-3'" />
+              <help
+                :url="$page.props.help_links.settings_account_deletion"
+                :top="'9px'"
+                :classes="['ltr:ml-3', 'rtl:mr-3']" />
             </h1>
             <p class="mb-2">{{ $t('Thanks for giving Monica a try.') }}</p>
             <p class="mb-2">{{ $t('Once you cancel,') }}</p>
@@ -72,7 +75,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Go back')" :classes="'mr-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Go back')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Cancel account')"
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
index d5006c59c..d7b3ad14a 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
@@ -76,7 +76,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="addEmailModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click.prevent="addEmailModalShown = false" />
         <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
index b72b6664c..868e3736a 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
@@ -61,7 +61,10 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="setupTelegramModalShown = false" />
+        <pretty-span
+          :text="$t('Cancel')"
+          :classes="'ltr:mr-3 rtl:ml-3'"
+          @click.prevent="setupTelegramModalShown = false" />
         <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
index b764d7b66..37cf581eb 100644
--- a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
@@ -81,7 +81,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createAddressTypeModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createAddressTypeModalShown = false" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -135,7 +138,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'mr-3'"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
                   @click.prevent="renameAddressTypeModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
diff --git a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
index 452d5b45e..2f8fb0bf9 100644
--- a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
@@ -101,7 +101,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createCallReasonTypeModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createCallReasonTypeModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -154,7 +157,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'mr-3'"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
                   @click.prevent="renameCallReasonTypeModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
@@ -206,7 +209,10 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="renameReasonModalId = 0" />
+                  <pretty-span
+                    :text="$t('Cancel')"
+                    :classes="'ltr:mr-3 rtl:ml-3'"
+                    @click.prevent="renameReasonModalId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
@@ -249,7 +255,10 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="createReasonModalId = 0" />
+                <pretty-span
+                  :text="$t('Cancel')"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  @click.prevent="createReasonModalId = 0" />
                 <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
index b6bb87265..79b34e8ad 100644
--- a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
@@ -101,7 +101,7 @@
           <div class="flex justify-between p-5">
             <pretty-span
               :text="$t('Cancel')"
-              :classes="'mr-3'"
+              :classes="'ltr:mr-3 rtl:ml-3'"
               @click="createContactInformationTypeModalShown = false" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
@@ -182,7 +182,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'mr-3'"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
                   @click.prevent="renameContactInformationTypeModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
diff --git a/resources/js/Pages/Settings/Personalize/Genders/Index.vue b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
index eb3b5cf82..a86404299 100644
--- a/resources/js/Pages/Settings/Personalize/Genders/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
@@ -81,7 +81,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createGenderModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createGenderModalShown = false" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -131,7 +131,10 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="renameGenderModalShownId = 0" />
+                <pretty-span
+                  :text="$t('Cancel')"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  @click.prevent="renameGenderModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
index be1b00e67..232a2fd73 100644
--- a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
@@ -81,7 +81,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createGiftOccasionModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createGiftOccasionModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -157,7 +160,10 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editGiftOccasionId = 0" />
+                  <pretty-span
+                    :text="$t('Cancel')"
+                    :classes="'ltr:mr-3 rtl:ml-3'"
+                    @click.prevent="editGiftOccasionId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
index 3ca1709a0..41186cc11 100644
--- a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
@@ -81,7 +81,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createGiftStateModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createGiftStateModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -158,7 +161,10 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editGiftStateId = 0" />
+                  <pretty-span
+                    :text="$t('Cancel')"
+                    :classes="'ltr:mr-3 rtl:ml-3'"
+                    @click.prevent="editGiftStateId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
index 0a42e77c5..a6efbc835 100644
--- a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
@@ -107,7 +107,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createGroupTypeModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createGroupTypeModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -236,7 +239,10 @@
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="roleGroupTypeId = 0" />
+                            <pretty-span
+                              :text="$t('Cancel')"
+                              :classes="'ltr:mr-3 rtl:ml-3'"
+                              @click="roleGroupTypeId = 0" />
                             <pretty-button
                               :text="$t('Rename')"
                               :state="loadingState"
@@ -279,7 +285,10 @@
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createRoleModalShown = false" />
+                        <pretty-span
+                          :text="$t('Cancel')"
+                          :classes="'ltr:mr-3 rtl:ml-3'"
+                          @click="createRoleModalShown = false" />
                         <pretty-button
                           :text="$t('Save')"
                           :state="loadingState"
@@ -328,7 +337,10 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editGroupTypeId = 0" />
+                  <pretty-span
+                    :text="$t('Cancel')"
+                    :classes="'ltr:mr-3 rtl:ml-3'"
+                    @click.prevent="editGroupTypeId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/Modules/Index.vue b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
index 77edce083..7bd9655d9 100644
--- a/resources/js/Pages/Settings/Personalize/Modules/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
@@ -265,7 +265,7 @@
 
             <!-- actions -->
             <div class="flex justify-between p-5">
-              <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-3'" />
+              <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
               <pretty-button
                 :href="'data.url.vault.create'"
                 :text="$t('Add')"
diff --git a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
index d1d6b81bd..4845ba62e 100644
--- a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
@@ -81,7 +81,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createPetCategoryModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createPetCategoryModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -135,7 +138,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'mr-3'"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
                   @click.prevent="renamePetCategoryModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
diff --git a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
index 667b4b998..e4a008d94 100644
--- a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
@@ -107,7 +107,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createPostTemplateModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createPostTemplateModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -240,7 +243,10 @@
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="postTemplateId = 0" />
+                            <pretty-span
+                              :text="$t('Cancel')"
+                              :classes="'ltr:mr-3 rtl:ml-3'"
+                              @click="postTemplateId = 0" />
                             <pretty-button
                               :text="$t('Rename')"
                               :state="loadingState"
@@ -285,7 +291,10 @@
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createSectionModalShown = false" />
+                        <pretty-span
+                          :text="$t('Cancel')"
+                          :classes="'ltr:mr-3 rtl:ml-3'"
+                          @click="createSectionModalShown = false" />
                         <pretty-button
                           :text="$t('Save')"
                           :state="loadingState"
@@ -337,7 +346,10 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editPostTemplateId = 0" />
+                  <pretty-span
+                    :text="$t('Cancel')"
+                    :classes="'ltr:mr-3 rtl:ml-3'"
+                    @click.prevent="editPostTemplateId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
index 4cecb58dd..5c30695b1 100644
--- a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
@@ -81,7 +81,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createPronounModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createPronounModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -131,7 +131,10 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="renamePronounModalShownId = 0" />
+                <pretty-span
+                  :text="$t('Cancel')"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  @click.prevent="renamePronounModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
index 365c95d53..75670bea1 100644
--- a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
@@ -122,7 +122,7 @@
           <div class="flex justify-between p-5">
             <pretty-span
               :text="$t('Cancel')"
-              :classes="'mr-3'"
+              :classes="'ltr:mr-3 rtl:ml-3'"
               @click="createRelationshipGroupTypeModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
@@ -177,7 +177,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'mr-3'"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
                   @click.prevent="renameRelationshipGroupTypeModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
@@ -263,7 +263,7 @@
                 <div class="flex justify-between p-5">
                   <pretty-span
                     :text="$t('Cancel')"
-                    :classes="'mr-3'"
+                    :classes="'ltr:mr-3 rtl:ml-3'"
                     @click.prevent="renameRelationshipTypeModalId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
@@ -323,7 +323,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'mr-3'"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
                   @click.prevent="createRelationshipTypeModalId = 0" />
                 <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
               </div>
diff --git a/resources/js/Pages/Settings/Personalize/Religions/Index.vue b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
index 533c7069a..eddeb315b 100644
--- a/resources/js/Pages/Settings/Personalize/Religions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
@@ -81,7 +81,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createReligionModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createReligionModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -157,7 +160,10 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editReligionId = 0" />
+                  <pretty-span
+                    :text="$t('Cancel')"
+                    :classes="'ltr:mr-3 rtl:ml-3'"
+                    @click.prevent="editReligionId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Index.vue b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
index 399d67225..6d0d9d7fb 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
@@ -116,7 +116,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createTemplateModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createTemplateModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -168,7 +171,10 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="renameTemplateModalShownId = 0" />
+                <pretty-span
+                  :text="$t('Cancel')"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  @click.prevent="renameTemplateModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
index f7875fcb1..13a6b9e24 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -104,7 +104,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="renamePageModalShownId = 0" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click.prevent="renamePageModalShownId = 0" />
             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -133,7 +136,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createPageModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createPageModalShown = false" />
         <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
index 8c7ff1ea5..d4a62c774 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
@@ -69,7 +69,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
index 9de75a973..e52b33277 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
@@ -51,7 +51,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Locale.vue b/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
index ed8a04b6f..075a14f57 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
@@ -94,7 +94,7 @@ const submit = () => {
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Maps.vue b/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
index a01148376..e414cf86c 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
@@ -52,7 +52,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
index 989db716e..4c58848bc 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -163,7 +163,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
index a1e386a48..bcb072f1f 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
@@ -47,7 +47,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
index 9da8d9c47..215f14869 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
@@ -501,7 +501,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Users/Create.vue b/resources/js/Pages/Settings/Users/Create.vue
index cb221a26c..60eb44951 100644
--- a/resources/js/Pages/Settings/Users/Create.vue
+++ b/resources/js/Pages/Settings/Users/Create.vue
@@ -131,7 +131,7 @@ k
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button
               :text="$t('Send invitation')"
               :state="loadingState"
diff --git a/resources/js/Pages/Settings/Users/Index.vue b/resources/js/Pages/Settings/Users/Index.vue
index d4f401cdc..48ff9364d 100644
--- a/resources/js/Pages/Settings/Users/Index.vue
+++ b/resources/js/Pages/Settings/Users/Index.vue
@@ -158,7 +158,10 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editModalshownId = 0" />
+                <pretty-span
+                  :text="$t('Cancel')"
+                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  @click.prevent="editModalshownId = 0" />
                 <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Vault/Contact/Create.vue b/resources/js/Pages/Vault/Contact/Create.vue
index 71f737407..36bc2e42e 100644
--- a/resources/js/Pages/Vault/Contact/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Create.vue
@@ -207,7 +207,7 @@
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Add')"
diff --git a/resources/js/Pages/Vault/Contact/Goals/Show.vue b/resources/js/Pages/Vault/Contact/Goals/Show.vue
index 8aaac1d1c..8805f311d 100644
--- a/resources/js/Pages/Vault/Contact/Goals/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Goals/Show.vue
@@ -83,7 +83,7 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editMode = false" />
+                <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
                 <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
index 2cf73a80b..902de712b 100644
--- a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
+++ b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
@@ -239,7 +239,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createDateModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createDateModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -408,7 +408,7 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedDateId = 0" />
+                <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedDateId = 0" />
                 <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Vault/Contact/Names/Edit.vue b/resources/js/Pages/Vault/Contact/Names/Edit.vue
index 447c71b1c..c7a1a85fb 100644
--- a/resources/js/Pages/Vault/Contact/Names/Edit.vue
+++ b/resources/js/Pages/Vault/Contact/Names/Edit.vue
@@ -147,7 +147,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.show" :text="$t('Cancel')" :classes="'mr-3'" />
+            <pretty-link :href="data.url.show" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Update')"
diff --git a/resources/js/Pages/Vault/Contact/Relationships/Create.vue b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
index 476befcff..9a3f0a5f1 100644
--- a/resources/js/Pages/Vault/Contact/Relationships/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
@@ -78,7 +78,7 @@
                   {{ fromRelationship }}
                 </p>
                 <div class="flex items-center">
-                  <avatar :data="data.contact.avatar" :classes="'mr-2 h-5 w-5'" />
+                  <avatar :data="data.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5'" />
 
                   <span>{{ data.contact.name }}</span>
                 </div>
@@ -318,7 +318,7 @@
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Add')"
diff --git a/resources/js/Pages/Vault/Create.vue b/resources/js/Pages/Vault/Create.vue
index 4c84f4c09..589330c20 100644
--- a/resources/js/Pages/Vault/Create.vue
+++ b/resources/js/Pages/Vault/Create.vue
@@ -41,7 +41,7 @@
             <h1 class="mb-1 flex justify-center text-2xl font-medium">
               <span>{{ $t('Create a vault') }}</span>
 
-              <help :url="$page.props.help_links.vault_create" :top="'9px'" :classes="'ml-2'" />
+              <help :url="$page.props.help_links.vault_create" :top="'9px'" :classes="['ltr:ml-2', 'rtl:mr-2']" />
             </h1>
             <p class="text-center text-sm">
               {{ $t('Vaults contain all your contacts data.') }}
@@ -65,7 +65,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Add')"
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
index 6a6cc69c7..2ad29e152 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
@@ -66,7 +66,7 @@
 
               <!-- contact -->
               <div class="flex items-center">
-                <avatar :data="task.contact.avatar" :classes="'mr-2 h-5 w-5 rounded-full'" />
+                <avatar :data="task.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5 rounded-full'" />
 
                 <inertia-link :href="task.contact.url.show" class="text-blue-500 hover:underline">
                   {{ task.contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue b/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue
index d5c167e42..c0e43b4fb 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue
@@ -24,7 +24,7 @@
       <ul class="mb-4">
         <li v-for="favorite in data" :key="favorite.id">
           <div class="mb-2 flex items-center text-sm">
-            <avatar :data="favorite.avatar" :classes="'mr-2 h-5 w-5 rounded-full'" />
+            <avatar :data="favorite.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5 rounded-full'" />
 
             <inertia-link :href="favorite.url.show" class="text-blue-500 hover:underline">
               {{ favorite.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue b/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
index 0bffdfc3a..983b30dbc 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
@@ -20,7 +20,7 @@
       <help :url="$page.props.help_links.last_updated_contacts" :top="'4px'" />
     </h3>
     <div v-for="contact in data" :key="contact.id" class="mb-2 flex items-center text-sm">
-      <avatar :data="contact.avatar" :classes="'mr-2 h-5 w-5 rounded-full'" />
+      <avatar :data="contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5 rounded-full'" />
 
       <inertia-link :href="contact.url.show" class="text-blue-500 hover:underline">
         {{ contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
index 328a7f90d..15dd97710 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
@@ -166,7 +166,7 @@ const destroy = (lifeMetric) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createLifeMetricModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createLifeMetricModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -267,7 +267,7 @@ const destroy = (lifeMetric) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedLifeMetricId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedLifeMetricId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
index af41c987c..220bf19ce 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
@@ -197,7 +197,7 @@ const submit = () => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createMoodEventModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createMoodEventModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
index 08f42b24e..5d5c393a7 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
@@ -31,7 +31,7 @@
               {{ reminder.scheduled_at }}
             </p>
             <div class="flex items-center text-sm">
-              <avatar :data="reminder.contact.avatar" :classes="'mr-2 h-4 w-4 rounded-full'" />
+              <avatar :data="reminder.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-4 w-4 rounded-full'" />
 
               <inertia-link :href="reminder.contact.url.show" class="text-blue-500 hover:underline">
                 {{ reminder.contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Task/Index.vue b/resources/js/Pages/Vault/Dashboard/Task/Index.vue
index 52f7288fe..8349360c8 100644
--- a/resources/js/Pages/Vault/Dashboard/Task/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Task/Index.vue
@@ -27,7 +27,7 @@
         <div v-for="task in data" :key="task.id" class="mb-6">
           <!-- person name -->
           <div class="mb-2 flex items-center">
-            <avatar :data="task.contact.avatar" :classes="'mr-2 h-5 w-5 rounded-full'" />
+            <avatar :data="task.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5 rounded-full'" />
 
             <inertia-link :href="task.contact.url.show" class="text-blue-500 hover:underline">
               {{ task.contact.name }}
diff --git a/resources/js/Pages/Vault/Group/Edit.vue b/resources/js/Pages/Vault/Group/Edit.vue
index 98585fd48..ecf28192f 100644
--- a/resources/js/Pages/Vault/Group/Edit.vue
+++ b/resources/js/Pages/Vault/Group/Edit.vue
@@ -132,7 +132,7 @@ const update = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="props.data.url.back" :text="$t('Cancel')" :classes="'mr-3'" />
+            <pretty-link :href="props.data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Create.vue b/resources/js/Pages/Vault/Journal/Create.vue
index e4caf4fce..8f35c4a8f 100644
--- a/resources/js/Pages/Vault/Journal/Create.vue
+++ b/resources/js/Pages/Vault/Journal/Create.vue
@@ -98,7 +98,7 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Edit.vue b/resources/js/Pages/Vault/Journal/Edit.vue
index b7dd63897..8d7b9d8b4 100644
--- a/resources/js/Pages/Vault/Journal/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Edit.vue
@@ -112,7 +112,7 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Metrics/Index.vue b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
index 4c812e8c9..80e5386b8 100644
--- a/resources/js/Pages/Vault/Journal/Metrics/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
@@ -150,7 +150,10 @@ const destroy = (metric) => {
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createJournalMetricModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createJournalMetricModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
index de066c9b8..8913d61da 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
@@ -156,7 +156,7 @@ const destroy = (journalMetric, postMetric) => {
           </div>
 
           <div class="flex justify-between p-2">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="addModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="addModalShown = false" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Save')"
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue b/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue
index 0e881ac1d..3efd2bf33 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue
@@ -99,7 +99,7 @@ const reset = () => {
         </div>
 
         <div class="flex justify-between p-2">
-          <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editSlicesModalShown = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editSlicesModalShown = false" />
           <pretty-button
             :href="'data.url.vault.create'"
             :text="$t('Save')"
diff --git a/resources/js/Pages/Vault/Journal/Slices/Edit.vue b/resources/js/Pages/Vault/Journal/Slices/Edit.vue
index 8275b7a35..61b6b4265 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Edit.vue
@@ -139,7 +139,7 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Index.vue b/resources/js/Pages/Vault/Journal/Slices/Index.vue
index b58ef6dfb..6b0fa67cd 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Index.vue
@@ -130,7 +130,10 @@ const submit = () => {
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createSliceOfLifeModalShown = false" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click="createSliceOfLifeModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
index 36ee88b8f..80a8215ae 100644
--- a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
@@ -32,7 +32,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createTypeModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createTypeModalShown = false" />
         <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -93,7 +93,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editTypeModalShownId = 0" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click.prevent="editTypeModalShownId = 0" />
             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Delete.vue b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
index 91a63c065..df7b9be00 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Delete.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
@@ -39,7 +39,7 @@
       <p class="mb-1 px-5 py-2 text-center">
         <pretty-link
           :text="$t('Delete the vault')"
-          :classes="'mr-3 text-red-600 dark:text-red-400 border-red-600 dark:border-red-400'"
+          :classes="'ltr:mr-3 rtl:ml-3 text-red-600 dark:text-red-400 border-red-600 dark:border-red-400'"
           @click="destroy" />
       </p>
     </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Labels.vue b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
index 37a3887fb..4f4c2bb95 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Labels.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
@@ -53,7 +53,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createlabelModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createlabelModalShown = false" />
         <pretty-button :text="$t('Create label')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -133,7 +133,10 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editLabelModalShownId = 0" />
+            <pretty-span
+              :text="$t('Cancel')"
+              :classes="'ltr:mr-3 rtl:ml-3'"
+              @click.prevent="editLabelModalShownId = 0" />
             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
index 9bcbec081..b448b18fb 100644
--- a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
@@ -232,7 +232,10 @@ const destroyLifeEventType = (lifeEventType) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createLifeEventCategoryModalShown = false" />
+        <pretty-span
+          :text="$t('Cancel')"
+          :classes="'ltr:mr-3 rtl:ml-3'"
+          @click="createLifeEventCategoryModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -361,7 +364,10 @@ const destroyLifeEventType = (lifeEventType) => {
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="lifeEventCategoryId = 0" />
+                        <pretty-span
+                          :text="$t('Cancel')"
+                          :classes="'ltr:mr-3 rtl:ml-3'"
+                          @click="lifeEventCategoryId = 0" />
                         <pretty-button
                           :text="$t('Rename')"
                           :state="loadingState"
@@ -408,7 +414,7 @@ const destroyLifeEventType = (lifeEventType) => {
                   <div class="flex justify-between p-5">
                     <pretty-span
                       :text="$t('Cancel')"
-                      :classes="'mr-3'"
+                      :classes="'ltr:mr-3 rtl:ml-3'"
                       @click="createLifeEventTypeModalShown = false" />
                     <pretty-button
                       :text="$t('Save')"
@@ -461,7 +467,10 @@ const destroyLifeEventType = (lifeEventType) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editLifeEventCategoryId = 0" />
+              <pretty-span
+                :text="$t('Cancel')"
+                :classes="'ltr:mr-3 rtl:ml-3'"
+                @click.prevent="editLifeEventCategoryId = 0" />
               <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
index e6df61628..fafa9c124 100644
--- a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
@@ -167,7 +167,10 @@ const updatePosition = (event) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createMoodTrackingParametersModalShown = false" />
+        <pretty-span
+          :text="$t('Cancel')"
+          :classes="'ltr:mr-3 rtl:ml-3'"
+          @click="createMoodTrackingParametersModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -285,7 +288,10 @@ const updatePosition = (event) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editMoodTrackingParameterId = 0" />
+              <pretty-span
+                :text="$t('Cancel')"
+                :classes="'ltr:mr-3 rtl:ml-3'"
+                @click.prevent="editMoodTrackingParameterId = 0" />
               <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
index 632950b6c..1f12849e6 100644
--- a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
@@ -139,7 +139,7 @@ const updatePosition = (event) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createEntryModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createEntryModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -215,7 +215,7 @@ const updatePosition = (event) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editEntryId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click.prevent="editEntryId = 0" />
               <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Tags.vue b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
index e0c93a66e..ffa317865 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Tags.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
@@ -32,7 +32,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createTagModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createTagModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -90,7 +90,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click.prevent="editTagModalShownId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click.prevent="editTagModalShownId = 0" />
             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index 9b8b12a49..f5fc173bb 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -367,7 +367,7 @@ const destroy = () => {
         </div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createAddressModalShown = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createAddressModalShown = false" />
           <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
         </div>
       </form>
@@ -533,7 +533,7 @@ const destroy = () => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedAddressId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedAddressId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
             </div>
           </form>
@@ -719,7 +719,7 @@ const destroy = () => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedAddressId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedAddressId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Shared/Modules/Calls.vue b/resources/js/Shared/Modules/Calls.vue
index c01446a43..164979d03 100644
--- a/resources/js/Shared/Modules/Calls.vue
+++ b/resources/js/Shared/Modules/Calls.vue
@@ -236,7 +236,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createCallModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createCallModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -517,7 +517,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedCallId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedCallId = 0" />
             <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Shared/Modules/ContactInformation.vue b/resources/js/Shared/Modules/ContactInformation.vue
index b08119b68..6e017eb81 100644
--- a/resources/js/Shared/Modules/ContactInformation.vue
+++ b/resources/js/Shared/Modules/ContactInformation.vue
@@ -67,7 +67,10 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="addContactInformationModalShown = false" />
+        <pretty-span
+          :text="$t('Cancel')"
+          :classes="'ltr:mr-3 rtl:ml-3'"
+          @click="addContactInformationModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -137,7 +140,10 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedContactInformationId = 0" />
+              <pretty-span
+                :text="$t('Cancel')"
+                :classes="'ltr:mr-3 rtl:ml-3'"
+                @click="editedContactInformationId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Shared/Modules/CreateLifeEvent.vue b/resources/js/Shared/Modules/CreateLifeEvent.vue
index af8aa95e3..195d5fd2e 100644
--- a/resources/js/Shared/Modules/CreateLifeEvent.vue
+++ b/resources/js/Shared/Modules/CreateLifeEvent.vue
@@ -291,7 +291,7 @@ const store = () => {
 
         <!-- current contact -->
         <div class="mb-4 flex items-center">
-          <avatar :data="props.data.contact.avatar" :classes="'mr-2 h-5 w-5'" />
+          <avatar :data="props.data.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5'" />
 
           <span>{{ props.data.contact.name }}</span>
         </div>
@@ -347,7 +347,7 @@ const store = () => {
           :label="$t('Distance')"
           :type="'number'"
           :autofocus="true"
-          :input-class="'mr-2'"
+          :input-class="'ltr:mr-2 rtl:ml-2'"
           :required="false"
           :autocomplete="false"
           :help="$t('Enter a number from 0 to 100000. No decimals.')"
@@ -422,7 +422,7 @@ const store = () => {
         </div>
       </div>
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="$emit('closeModal')" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="$emit('closeModal')" />
         <pretty-button
           v-if="selectedLifeEventType"
           :text="$t('Save')"
diff --git a/resources/js/Shared/Modules/Goals.vue b/resources/js/Shared/Modules/Goals.vue
index 52d96b096..b16ff1bfc 100644
--- a/resources/js/Shared/Modules/Goals.vue
+++ b/resources/js/Shared/Modules/Goals.vue
@@ -48,7 +48,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createGoalModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createGoalModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Shared/Modules/Groups.vue b/resources/js/Shared/Modules/Groups.vue
index df3ae53a5..edcaeff03 100644
--- a/resources/js/Shared/Modules/Groups.vue
+++ b/resources/js/Shared/Modules/Groups.vue
@@ -88,7 +88,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="addGroupMode = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="addGroupMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Shared/Modules/JobInformation.vue b/resources/js/Shared/Modules/JobInformation.vue
index b0445a59b..1b2b72c8b 100644
--- a/resources/js/Shared/Modules/JobInformation.vue
+++ b/resources/js/Shared/Modules/JobInformation.vue
@@ -80,7 +80,7 @@
         </div>
 
         <div class="flex justify-between p-2">
-          <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editJobInformation = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editJobInformation = false" />
           <pretty-button
             :href="'data.url.vault.create'"
             :text="$t('Save')"
diff --git a/resources/js/Shared/Modules/Loans.vue b/resources/js/Shared/Modules/Loans.vue
index b3b114503..cfa66e0c7 100644
--- a/resources/js/Shared/Modules/Loans.vue
+++ b/resources/js/Shared/Modules/Loans.vue
@@ -108,7 +108,7 @@
               v-model="form.currency_id"
               :data="localCurrencies"
               :required="false"
-              :div-outer-class="'ml-3 mb-5'"
+              :div-outer-class="'ltr:ml-3 rtl:mr-3 mb-5'"
               :placeholder="$t('Choose a value')"
               :dropdown-class="'block'"
               :label="$t('Currency')" />
@@ -168,7 +168,7 @@
         <div v-if="warning != ''" class="border-b p-3">⚠️ {{ warning }}</div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createLoanModalShown = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createLoanModalShown = false" />
           <pretty-button :text="$t('Add loan')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
         </div>
       </form>
@@ -341,7 +341,7 @@
                 v-model="form.currency_id"
                 :data="localCurrencies"
                 :required="false"
-                :div-outer-class="'ml-3 mb-5'"
+                :div-outer-class="'ltr:ml-3 rtl:mr-3 mb-5'"
                 :placeholder="$t('Choose a value')"
                 :dropdown-class="'block'"
                 :label="$t('Currency')" />
@@ -405,7 +405,7 @@
           <div v-if="warning != ''" class="border-b p-3">⚠️ {{ warning }}</div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedLoanId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedLoanId = 0" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Shared/Modules/Notes.vue b/resources/js/Shared/Modules/Notes.vue
index cf3aca0a4..94459edf6 100644
--- a/resources/js/Shared/Modules/Notes.vue
+++ b/resources/js/Shared/Modules/Notes.vue
@@ -102,7 +102,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createNoteModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createNoteModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -221,7 +221,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedNoteId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedNoteId = 0" />
             <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Shared/Modules/Pets.vue b/resources/js/Shared/Modules/Pets.vue
index 268cf90ae..625bd3b68 100644
--- a/resources/js/Shared/Modules/Pets.vue
+++ b/resources/js/Shared/Modules/Pets.vue
@@ -62,7 +62,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="addPetModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="addPetModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -127,7 +127,7 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedPetId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedPetId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Shared/Modules/QuickFacts.vue b/resources/js/Shared/Modules/QuickFacts.vue
index f2ab8d4e3..560048304 100644
--- a/resources/js/Shared/Modules/QuickFacts.vue
+++ b/resources/js/Shared/Modules/QuickFacts.vue
@@ -218,7 +218,7 @@ const destroy = (quickFact) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedQuickFactId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedQuickFactId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
             </div>
           </form>
@@ -269,7 +269,7 @@ const destroy = (quickFact) => {
         </div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createQuickFactModalShown = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createQuickFactModalShown = false" />
           <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
         </div>
       </form>
diff --git a/resources/js/Shared/Modules/Relationships.vue b/resources/js/Shared/Modules/Relationships.vue
index 3bc487c7d..4e306f940 100644
--- a/resources/js/Shared/Modules/Relationships.vue
+++ b/resources/js/Shared/Modules/Relationships.vue
@@ -45,7 +45,7 @@
             class="item-list flex items-center justify-between border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <div class="flex">
               <div class="flex items-center ltr:mr-2 rtl:ml-2">
-                <avatar :data="relationshipType.contact.avatar" :classes="'mr-2 h-5 w-5'" />
+                <avatar :data="relationshipType.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5'" />
 
                 <!-- name -->
                 <inertia-link
diff --git a/resources/js/Shared/Modules/Religion.vue b/resources/js/Shared/Modules/Religion.vue
index 6f6187618..792019392 100644
--- a/resources/js/Shared/Modules/Religion.vue
+++ b/resources/js/Shared/Modules/Religion.vue
@@ -94,7 +94,7 @@ const showEditModal = () => {
         </div>
 
         <div class="flex justify-between p-2">
-          <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editReligion = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editReligion = false" />
           <pretty-button
             :href="'data.url.vault.create'"
             :text="$t('Save')"
diff --git a/resources/js/Shared/Modules/Reminders.vue b/resources/js/Shared/Modules/Reminders.vue
index e3a6466c5..c982bcba3 100644
--- a/resources/js/Shared/Modules/Reminders.vue
+++ b/resources/js/Shared/Modules/Reminders.vue
@@ -179,7 +179,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="addReminderModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="addReminderModalShown = false" />
         <pretty-button :text="$t('Add date')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -299,7 +299,7 @@
                     v-model="form.month"
                     :data="data.months"
                     :required="true"
-                    :div-outer-class="'mr-2'"
+                    :div-outer-class="'ltr:mr-2 rtl:ml-2'"
                     :placeholder="$t('Choose a value')"
                     :dropdown-class="'block w-full'"
                     :label="$t('Month')" />
@@ -376,7 +376,7 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedReminderId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedReminderId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Shared/Modules/Tasks.vue b/resources/js/Shared/Modules/Tasks.vue
index 468b1b207..9f247716a 100644
--- a/resources/js/Shared/Modules/Tasks.vue
+++ b/resources/js/Shared/Modules/Tasks.vue
@@ -77,7 +77,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="createTaskModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createTaskModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -173,7 +173,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-3'" @click="editedTaskId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedTaskId = 0" />
             <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>

From ca1e393980759181b61b7e04427eb9a333f44332 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 14:03:17 +0200
Subject: [PATCH 04/14] add datepicker locale

---
 resources/js/Components/Pagination.vue             |  6 ++++--
 .../Pages/Settings/Personalize/Modules/Index.vue   |  2 +-
 resources/js/Pages/Vault/Calendar/Index.vue        |  2 +-
 .../Pages/Vault/Contact/ImportantDates/Index.vue   |  8 +++++++-
 .../Dashboard/Partials/MoodTrackingEvents.vue      |  3 ++-
 resources/js/Pages/Vault/Journal/Photo/Index.vue   |  2 +-
 resources/js/Pages/Vault/Journal/Post/Edit.vue     |  6 +++++-
 resources/js/Pages/Vault/Journal/Show.vue          |  2 +-
 resources/js/Shared/Modules/Calls.vue              |  7 ++++++-
 resources/js/Shared/Modules/CreateLifeEvent.vue    |  1 +
 resources/js/Shared/Modules/Loans.vue              |  7 ++++++-
 resources/js/Shared/Modules/Reminders.vue          | 14 ++++++++++++--
 resources/js/Shared/Modules/Tasks.vue              | 14 ++++++++++++--
 resources/js/Shared/Toaster.vue                    |  7 +------
 14 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue
index 0020b0df9..c28ff0a77 100644
--- a/resources/js/Components/Pagination.vue
+++ b/resources/js/Components/Pagination.vue
@@ -177,7 +177,8 @@ const linkClasses =
             linkClasses,
             '-ml-px',
             'px-2',
-            'rounded-r-md',
+            'ltr:rounded-r-md',
+            'rtl:rounded-l-md',
             'text-gray-500',
             'dark:bg-gray-900',
             'hover:text-gray-400',
@@ -194,7 +195,8 @@ const linkClasses =
             linkClasses,
             '-ml-px',
             'px-2',
-            'rounded-r-md',
+            'ltr:rounded-r-md',
+            'rtl:rounded-l-md',
             'text-gray-500',
             'dark:bg-gray-900',
             'focus:z-10',
diff --git a/resources/js/Pages/Settings/Personalize/Modules/Index.vue b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
index 7bd9655d9..2d8d65106 100644
--- a/resources/js/Pages/Settings/Personalize/Modules/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
@@ -205,7 +205,7 @@
                     <div
                       v-for="field in row.fields"
                       :key="field.id"
-                      class="border-gray-200 last:border-r-0 ltr:border-r rtl:border-l dark:border-gray-700">
+                      class="border-gray-200 ltr:border-r last:ltr:border-r-0 rtl:border-l last:rtl:border-l-0 dark:border-gray-700">
                       <!-- row options -->
                       <div class="flex justify-between border-b border-gray-200 px-3 py-1 text-xs dark:border-gray-700">
                         <div>
diff --git a/resources/js/Pages/Vault/Calendar/Index.vue b/resources/js/Pages/Vault/Calendar/Index.vue
index 1bd2c1587..49c4aaa87 100644
--- a/resources/js/Pages/Vault/Calendar/Index.vue
+++ b/resources/js/Pages/Vault/Calendar/Index.vue
@@ -57,7 +57,7 @@ const get = (day) => {
 
                   <inertia-link
                     :href="data.url.next"
-                    class="inline-flex items-center rounded-r-md border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:border-r rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                    class="inline-flex items-center border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-r-md ltr:border-r rtl:rounded-l-md rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                     {{ data.next_month }}
 
                     <svg
diff --git a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
index 902de712b..04182eeb7 100644
--- a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
+++ b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
@@ -113,7 +113,12 @@
                 </label>
               </div>
               <div v-if="form.choice == 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
-                <DatePicker v-model.string="form.date" class="inline-block h-full" :masks="masks" :isDark="isDark">
+                <DatePicker
+                  v-model.string="form.date"
+                  class="inline-block h-full"
+                  :masks="masks"
+                  :isDark="isDark"
+                  :locale="$attrs.user.locale">
                   <template #default="{ inputValue, inputEvents }">
                     <input
                       class="rounded border bg-white px-2 py-1 dark:bg-gray-900"
@@ -331,6 +336,7 @@
                       class="inline-block h-full"
                       :masks="masks"
                       :isDark="isDark"
+                      :locale="$attrs.user.locale"
                       :update-on-input="false">
                       <template #default="{ inputValue, inputEvents }">
                         <input
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
index 220bf19ce..2906977d6 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
@@ -160,12 +160,13 @@ const submit = () => {
 
         <!-- date picker -->
         <div v-if="datePickerFieldShown">
-          <p class="mb-2 mt-2 block text-sm dark:text-gray-100">Change date</p>
+          <p class="mb-2 mt-2 block text-sm dark:text-gray-100">{{ $t('Change date') }}</p>
           <DatePicker
             v-model.string="form.date"
             :timezone="'UTC'"
             class="inline-block h-full"
             :masks="masks"
+            :locale="$attrs.user.locale"
             :is-dark="isDark()">
             <template #default="{ inputValue, inputEvents }">
               <input
diff --git a/resources/js/Pages/Vault/Journal/Photo/Index.vue b/resources/js/Pages/Vault/Journal/Photo/Index.vue
index 28eaf8710..a4eccb62d 100644
--- a/resources/js/Pages/Vault/Journal/Photo/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Photo/Index.vue
@@ -70,7 +70,7 @@ defineProps({
             </inertia-link>
 
             <inertia-link
-              class="inline-flex items-center rounded-r-md border-b border-t border-gray-200 bg-gray-100 bg-white px-4 py-2 text-sm font-medium text-blue-700 text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:border-r rtl:border-l dark:border-gray-600 dark:bg-gray-400 dark:bg-gray-700 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center border-b border-t border-gray-200 bg-gray-100 bg-white px-4 py-2 text-sm font-medium text-blue-700 text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-r-md ltr:border-r rtl:rounded-l-md rtl:border-l dark:border-gray-600 dark:bg-gray-400 dark:bg-gray-700 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
diff --git a/resources/js/Pages/Vault/Journal/Post/Edit.vue b/resources/js/Pages/Vault/Journal/Post/Edit.vue
index 582f582c5..74f23377e 100644
--- a/resources/js/Pages/Vault/Journal/Post/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Edit.vue
@@ -390,7 +390,11 @@ const destroy = () => {
             <p class="mb-2 flex items-center font-bold">
               <span>{{ $t('Written on') }}</span>
             </p>
-            <DatePicker v-model.string="form.date" :masks="masks" class="mb-6 inline-block">
+            <DatePicker
+              v-model.string="form.date"
+              :masks="masks"
+              :locale="$attrs.user.locale"
+              class="mb-6 inline-block">
               <template v-slot="{ inputValue, inputEvents }">
                 <input
                   class="rounded border bg-white px-2 py-1 dark:border-gray-700 dark:bg-gray-900"
diff --git a/resources/js/Pages/Vault/Journal/Show.vue b/resources/js/Pages/Vault/Journal/Show.vue
index f8373dc27..c4e0ca398 100644
--- a/resources/js/Pages/Vault/Journal/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Show.vue
@@ -86,7 +86,7 @@ const destroy = () => {
             <inertia-link
               :href="data.url.photo_index"
               :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': defaultTab === 'life_events' }"
-              class="inline-flex items-center rounded-r-md border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:border-r rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-r-md ltr:border-r rtl:rounded-l-md rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
diff --git a/resources/js/Shared/Modules/Calls.vue b/resources/js/Shared/Modules/Calls.vue
index 164979d03..dc55ac118 100644
--- a/resources/js/Shared/Modules/Calls.vue
+++ b/resources/js/Shared/Modules/Calls.vue
@@ -41,7 +41,12 @@
         <div class="flex border-b border-gray-200 dark:border-gray-700">
           <div class="p-5">
             <p class="mb-2 block text-sm">{{ $t('When did the call happened?') }}</p>
-            <DatePicker v-model.string="form.called_at" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+            <DatePicker
+              v-model.string="form.called_at"
+              class="inline-block h-full"
+              :masks="masks"
+              :locale="$attrs.user.locale"
+              :is-dark="isDark()">
               <template #default="{ inputValue, inputEvents }">
                 <input
                   class="rounded border bg-white px-2 py-1 dark:bg-gray-900"
diff --git a/resources/js/Shared/Modules/CreateLifeEvent.vue b/resources/js/Shared/Modules/CreateLifeEvent.vue
index 195d5fd2e..40f45eed1 100644
--- a/resources/js/Shared/Modules/CreateLifeEvent.vue
+++ b/resources/js/Shared/Modules/CreateLifeEvent.vue
@@ -274,6 +274,7 @@ const store = () => {
             :timezone="'UTC'"
             class="inline-block h-full"
             :masks="masks"
+            :locale="$attrs.user.locale"
             :is-dark="isDark()">
             <template #default="{ inputValue, inputEvents }">
               <input
diff --git a/resources/js/Shared/Modules/Loans.vue b/resources/js/Shared/Modules/Loans.vue
index cfa66e0c7..fb7fe99c0 100644
--- a/resources/js/Shared/Modules/Loans.vue
+++ b/resources/js/Shared/Modules/Loans.vue
@@ -118,7 +118,12 @@
           <div class="border-b border-gray-200 p-5 dark:border-gray-700">
             <p class="mb-2 block text-sm">{{ $t('When was the loan made?') }}</p>
 
-            <DatePicker v-model.string="form.loaned_at" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+            <DatePicker
+              v-model.string="form.loaned_at"
+              class="inline-block h-full"
+              :masks="masks"
+              :locale="$attrs.user.locale"
+              :is-dark="isDark()">
               <template #default="{ inputValue, inputEvents }">
                 <input
                   class="rounded border bg-white px-2 py-1 dark:bg-gray-900"
diff --git a/resources/js/Shared/Modules/Reminders.vue b/resources/js/Shared/Modules/Reminders.vue
index c982bcba3..f3b58ef96 100644
--- a/resources/js/Shared/Modules/Reminders.vue
+++ b/resources/js/Shared/Modules/Reminders.vue
@@ -71,7 +71,12 @@
             </label>
           </div>
           <div v-if="form.choice === 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
-            <DatePicker v-model.string="form.date" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+            <DatePicker
+              v-model.string="form.date"
+              class="inline-block h-full"
+              :masks="masks"
+              :locale="$attrs.user.locale"
+              :is-dark="isDark()">
               <template #default="{ inputValue, inputEvents }">
                 <input
                   class="rounded border bg-white px-2 py-1 dark:bg-gray-900"
@@ -269,7 +274,12 @@
                   </label>
                 </div>
                 <div v-if="form.choice === 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
-                  <DatePicker v-model.string="form.date" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+                  <DatePicker
+                    v-model.string="form.date"
+                    class="inline-block h-full"
+                    :masks="masks"
+                    :locale="$attrs.user.locale"
+                    :is-dark="isDark()">
                     <template #default="{ inputValue, inputEvents }">
                       <input
                         class="rounded border bg-white px-2 py-1 dark:bg-gray-900"
diff --git a/resources/js/Shared/Modules/Tasks.vue b/resources/js/Shared/Modules/Tasks.vue
index 9f247716a..fb773d06f 100644
--- a/resources/js/Shared/Modules/Tasks.vue
+++ b/resources/js/Shared/Modules/Tasks.vue
@@ -65,7 +65,12 @@
 
         <!-- task options -->
         <div v-if="form.due_at_checked" class="mt-4 ltr:ml-4 rtl:mr-4">
-          <DatePicker v-model.string="form.due_at" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+          <DatePicker
+            v-model.string="form.due_at"
+            class="inline-block h-full"
+            :masks="masks"
+            :locale="$attrs.user.locale"
+            :is-dark="isDark()">
             <template #default="{ inputValue, inputEvents }">
               <input
                 class="rounded border bg-white px-2 py-1 dark:bg-gray-900"
@@ -161,7 +166,12 @@
 
             <!-- task options -->
             <div v-if="form.due_at_checked" class="mt-4 ltr:ml-4 rtl:mr-4">
-              <DatePicker v-model.string="form.due_at" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+              <DatePicker
+                v-model.string="form.due_at"
+                class="inline-block h-full"
+                :masks="masks"
+                :locale="$attrs.user.locale"
+                :is-dark="isDark()">
                 <template #default="{ inputValue, inputEvents }">
                   <input
                     class="rounded border bg-white px-2 py-1 dark:bg-gray-900"
diff --git a/resources/js/Shared/Toaster.vue b/resources/js/Shared/Toaster.vue
index 4a1fb8834..d26b26518 100644
--- a/resources/js/Shared/Toaster.vue
+++ b/resources/js/Shared/Toaster.vue
@@ -13,13 +13,8 @@ const levelClass = ref(null);
 const messageText = ref(null);
 
 onMounted(() => {
-  if (props.level) {
-    levelClass.value = 'is-' + props.level;
-  }
-
   if (props.message) {
-    messageText.value = props.message;
-    show();
+    show(props);
   }
 
   emitter.on('flash', (data) => show(data));

From c53c694fece0751e6ee282cbb8296dd47a7ee6cc Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 15:18:57 +0200
Subject: [PATCH 05/14] update

---
 lang/bn/format.php                            | 22 +++++++++----------
 lang/ca/format.php                            | 22 +++++++++----------
 lang/da/format.php                            | 22 +++++++++----------
 lang/el/format.php                            | 22 +++++++++----------
 lang/he/format.php                            | 22 +++++++++----------
 lang/hi/format.php                            | 22 +++++++++----------
 lang/ja/format.php                            | 22 +++++++++----------
 lang/nl/format.php                            | 22 +++++++++----------
 lang/no/format.php                            | 22 +++++++++----------
 lang/pa/format.php                            | 22 +++++++++----------
 lang/pl/format.php                            | 22 +++++++++----------
 lang/ro/format.php                            | 22 +++++++++----------
 lang/sv/format.php                            | 22 +++++++++----------
 lang/te/format.php                            | 22 +++++++++----------
 lang/tr/format.php                            | 22 +++++++++----------
 lang/ur/format.php                            | 22 +++++++++----------
 lang/vi/format.php                            | 22 +++++++++----------
 lang/zh/format.php                            | 22 +++++++++----------
 .../Preferences/Partials/HelpPreference.vue   |  2 +-
 .../Vault/Settings/Partials/TabVisibility.vue | 14 ++++++------
 resources/js/Shared/Layout.vue                |  4 ++--
 21 files changed, 208 insertions(+), 208 deletions(-)

diff --git a/lang/bn/format.php b/lang/bn/format.php
index dab40d77d..79df9c725 100644
--- a/lang/bn/format.php
+++ b/lang/bn/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/ca/format.php b/lang/ca/format.php
index dab40d77d..79df9c725 100644
--- a/lang/ca/format.php
+++ b/lang/ca/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/da/format.php b/lang/da/format.php
index dab40d77d..79df9c725 100644
--- a/lang/da/format.php
+++ b/lang/da/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/el/format.php b/lang/el/format.php
index dab40d77d..79df9c725 100644
--- a/lang/el/format.php
+++ b/lang/el/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/he/format.php b/lang/he/format.php
index dab40d77d..79df9c725 100644
--- a/lang/he/format.php
+++ b/lang/he/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/hi/format.php b/lang/hi/format.php
index dab40d77d..79df9c725 100644
--- a/lang/hi/format.php
+++ b/lang/hi/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/ja/format.php b/lang/ja/format.php
index dab40d77d..79df9c725 100644
--- a/lang/ja/format.php
+++ b/lang/ja/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/nl/format.php b/lang/nl/format.php
index dab40d77d..79df9c725 100644
--- a/lang/nl/format.php
+++ b/lang/nl/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/no/format.php b/lang/no/format.php
index dab40d77d..79df9c725 100644
--- a/lang/no/format.php
+++ b/lang/no/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/pa/format.php b/lang/pa/format.php
index dab40d77d..79df9c725 100644
--- a/lang/pa/format.php
+++ b/lang/pa/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/pl/format.php b/lang/pl/format.php
index dab40d77d..79df9c725 100644
--- a/lang/pl/format.php
+++ b/lang/pl/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/ro/format.php b/lang/ro/format.php
index dab40d77d..79df9c725 100644
--- a/lang/ro/format.php
+++ b/lang/ro/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/sv/format.php b/lang/sv/format.php
index dab40d77d..79df9c725 100644
--- a/lang/sv/format.php
+++ b/lang/sv/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/te/format.php b/lang/te/format.php
index dab40d77d..79df9c725 100644
--- a/lang/te/format.php
+++ b/lang/te/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/tr/format.php b/lang/tr/format.php
index dab40d77d..79df9c725 100644
--- a/lang/tr/format.php
+++ b/lang/tr/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/ur/format.php b/lang/ur/format.php
index dab40d77d..79df9c725 100644
--- a/lang/ur/format.php
+++ b/lang/ur/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/vi/format.php b/lang/vi/format.php
index dab40d77d..79df9c725 100644
--- a/lang/vi/format.php
+++ b/lang/vi/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/lang/zh/format.php b/lang/zh/format.php
index dab40d77d..79df9c725 100644
--- a/lang/zh/format.php
+++ b/lang/zh/format.php
@@ -1,15 +1,15 @@
 <?php
 
 return [
-    'date' => '',
-    'day_month_parenthesis' => '',
-    'day_number' => '',
-    'full_date' => '',
-    'long_month_day' => '',
-    'long_month_year' => '',
-    'short_date' => '',
-    'short_date_year_time' => '',
-    'short_day' => '',
-    'short_month' => '',
-    'short_month_year' => '',
+    'date' => 'D MMM YYYY',
+    'day_month_parenthesis' => 'dddd (D MMM)',
+    'day_number' => 'DD',
+    'full_date' => 'dddd D MMM YYYY',
+    'long_month_day' => 'D MMMM',
+    'long_month_year' => 'MMMM Y',
+    'short_date' => 'D MMM',
+    'short_date_year_time' => 'D MMM YYYY H:mm',
+    'short_day' => 'ddd',
+    'short_month' => 'MMM',
+    'short_month_year' => 'MMM Y',
 ];
diff --git a/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue b/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
index 39a308850..ed96f8dc4 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
@@ -14,7 +14,7 @@
 
     <div class="mb-6 rounded-lg border border-gray-200 bg-white px-5 pb-2 pt-3 dark:border-gray-700 dark:bg-gray-900">
       <label for="default-toggle" class="relative inline-flex cursor-pointer items-center">
-        <input id="default-toggle" v-model="form.checked" type="checkbox" class="peer sr-only" @click="submit" />
+        <input id="default-toggle" v-model="form.checked" type="checkbox" class="peer hidden" @click="submit" />
         <div
           class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
         <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300">
diff --git a/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue b/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
index 5f836a63f..6ff12a3fa 100644
--- a/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
@@ -65,7 +65,7 @@ const update = () => {
               id="toggle-files"
               v-model="form.show_calendar_tab"
               type="checkbox"
-              class="peer sr-only"
+              class="peer hidden"
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
@@ -79,7 +79,7 @@ const update = () => {
               id="toggle-journal"
               v-model="form.show_journal_tab"
               type="checkbox"
-              class="peer sr-only"
+              class="peer hidden"
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
@@ -93,7 +93,7 @@ const update = () => {
               id="toggle-group"
               v-model="form.show_group_tab"
               type="checkbox"
-              class="peer sr-only"
+              class="peer hidden"
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
@@ -107,7 +107,7 @@ const update = () => {
               id="toggle-companies"
               v-model="form.show_companies_tab"
               type="checkbox"
-              class="peer sr-only"
+              class="peer hidden"
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
@@ -121,7 +121,7 @@ const update = () => {
               id="toggle-tasks"
               v-model="form.show_tasks_tab"
               type="checkbox"
-              class="peer sr-only"
+              class="peer hidden"
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
@@ -135,7 +135,7 @@ const update = () => {
               id="toggle-reports"
               v-model="form.show_reports_tab"
               type="checkbox"
-              class="peer sr-only"
+              class="peer hidden"
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
@@ -149,7 +149,7 @@ const update = () => {
               id="toggle-files"
               v-model="form.show_files_tab"
               type="checkbox"
-              class="peer sr-only"
+              class="peer hidden"
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index b6883c04d..52e7f5374 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -12,7 +12,7 @@
 
           <!-- information about the current vault -->
           <div v-if="layoutData.vault">
-            <span class="relative ml-1 mr-1">
+            <span class="relative mx-1">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="relative inline h-3 w-3"
@@ -56,7 +56,7 @@
                   id="dark-mode-toggle"
                   v-model="style.checked"
                   type="checkbox"
-                  class="peer sr-only"
+                  class="peer hidden"
                   @click="toggleStyle" />
                 <div
                   class="peer h-4 w-7 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[14px] after:top-[2px] after:h-3 after:w-3 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 ltr:mr-2 rtl:ml-2 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />

From 009bf08a4eea4c137df42f7b288c65f2f81dbad9 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 15:23:57 +0200
Subject: [PATCH 06/14] update

---
 resources/js/Shared/Layout.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 52e7f5374..7c50745d5 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -363,9 +363,7 @@ export default {
   },
 
   mounted() {
-    this.style.checked =
-      localStorage.theme === 'dark' ||
-      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    this.style.checked = this.isDark();
     if (localStorage.success) {
       this.flash(localStorage.success, 'success');
       localStorage.removeItem('success');

From 81804633b611297d644aed3a440fb7957e80b6da Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 19:15:51 +0200
Subject: [PATCH 07/14] remove ltr and rtl

---
 resources/js/Components/Breadcrumb.vue        |  6 +-
 resources/js/Components/Jetstream/Banner.vue  |  2 +-
 .../Jetstream/ConfirmationModal.vue           |  2 +-
 .../Components/Jetstream/ConfirmsPassword.vue |  2 +-
 .../js/Components/Jetstream/SectionTitle.vue  |  4 +-
 resources/js/Components/Jetstream/Select.vue  | 11 +--
 resources/js/Components/Pagination.vue        | 25 ++-----
 resources/js/Components/ResponsiveNavLink.vue |  4 +-
 resources/js/Layouts/AppLayout.vue            |  6 +-
 resources/js/Pages/API/Index.vue              |  6 +-
 .../js/Pages/API/Partials/ApiTokenManager.vue | 18 +++--
 resources/js/Pages/Auth/AcceptInvitation.vue  |  4 +-
 resources/js/Pages/Auth/ConfirmPassword.vue   |  2 +-
 resources/js/Pages/Auth/Login.vue             | 37 +++-------
 resources/js/Pages/Auth/Register.vue          |  8 +--
 .../js/Pages/Auth/TwoFactorChallenge.vue      |  2 +-
 .../Pages/Profile/Partials/DeleteUserForm.vue |  4 +-
 .../LogoutOtherBrowserSessionsForm.vue        |  6 +-
 .../Partials/TwoFactorAuthenticationForm.vue  |  6 +-
 .../Profile/Partials/UpdatePasswordForm.vue   |  2 +-
 .../Partials/UpdateProfileInformationForm.vue |  4 +-
 .../Profile/Partials/UpdateProviders.vue      | 22 ++----
 .../js/Pages/Settings/CancelAccount/Index.vue | 13 ++--
 resources/js/Pages/Settings/Index.vue         | 18 ++---
 .../js/Pages/Settings/Notifications/Index.vue | 10 ++-
 .../Settings/Notifications/Logs/Index.vue     | 14 ++--
 .../Notifications/Partials/Emails.vue         | 30 ++++----
 .../Notifications/Partials/Telegram.vue       | 27 ++++---
 .../Personalize/AddressTypes/Index.vue        | 21 +++---
 .../Personalize/CallReasons/Index.vue         | 33 ++++-----
 .../ContactInformationTypes/Index.vue         | 20 +++---
 .../Settings/Personalize/Currencies/Index.vue | 23 +++---
 .../Settings/Personalize/Genders/Index.vue    | 21 +++---
 .../Personalize/GiftOccasions/Index.vue       | 30 +++-----
 .../Settings/Personalize/GiftStates/Index.vue | 32 ++++-----
 .../Settings/Personalize/GroupTypes/Index.vue | 48 +++++--------
 .../js/Pages/Settings/Personalize/Index.vue   | 36 +++++-----
 .../Settings/Personalize/Modules/Index.vue    | 32 ++++-----
 .../Personalize/PetCategories/Index.vue       | 21 +++---
 .../Personalize/PostTemplates/Index.vue       | 46 +++++-------
 .../Settings/Personalize/Pronouns/Index.vue   | 21 +++---
 .../Personalize/Relationships/Index.vue       | 24 +++----
 .../Settings/Personalize/Religions/Index.vue  | 30 +++-----
 .../Settings/Personalize/Templates/Index.vue  | 24 +++----
 .../Templates/Partials/Modules.vue            |  4 +-
 .../Personalize/Templates/Partials/Pages.vue  | 11 ++-
 .../Settings/Personalize/Templates/Show.vue   | 14 ++--
 .../js/Pages/Settings/Preferences/Index.vue   |  6 +-
 .../Preferences/Partials/DateFormat.vue       |  8 +--
 .../Preferences/Partials/DistanceFormat.vue   | 10 ++-
 .../Preferences/Partials/HelpPreference.vue   |  6 +-
 .../Settings/Preferences/Partials/Locale.vue  |  6 +-
 .../Settings/Preferences/Partials/Maps.vue    |  8 +--
 .../Preferences/Partials/NameOrder.vue        | 32 ++++-----
 .../Preferences/Partials/NumberFormat.vue     |  8 +--
 .../Preferences/Partials/Timezone.vue         | 22 ++----
 resources/js/Pages/Settings/Storage/Index.vue | 12 ++--
 resources/js/Pages/Settings/Users/Create.vue  | 18 ++---
 resources/js/Pages/Settings/Users/Index.vue   | 25 +++----
 resources/js/Pages/Vault/Calendar/Index.vue   | 37 +++++-----
 resources/js/Pages/Vault/Companies/Index.vue  |  2 +-
 resources/js/Pages/Vault/Contact/Blank.vue    |  6 +-
 resources/js/Pages/Vault/Contact/Create.vue   | 24 +++----
 .../js/Pages/Vault/Contact/Goals/Show.vue     | 22 +++---
 .../Vault/Contact/ImportantDates/Index.vue    | 56 +++++++--------
 resources/js/Pages/Vault/Contact/Index.vue    | 10 +--
 resources/js/Pages/Vault/Contact/Move.vue     |  6 +-
 .../js/Pages/Vault/Contact/Names/Edit.vue     | 12 ++--
 .../js/Pages/Vault/Contact/Notes/Index.vue    | 10 +--
 .../js/Pages/Vault/Contact/Photos/Index.vue   | 12 ++--
 .../js/Pages/Vault/Contact/Photos/Show.vue    | 14 ++--
 .../Vault/Contact/Relationships/Create.vue    | 38 +++++-----
 resources/js/Pages/Vault/Contact/Show.vue     | 22 +++---
 resources/js/Pages/Vault/Create.vue           | 10 +--
 resources/js/Pages/Vault/Dashboard/Index.vue  | 12 ++--
 .../Vault/Dashboard/Partials/DueTasks.vue     | 10 +--
 .../Vault/Dashboard/Partials/Favorites.vue    |  2 +-
 .../Vault/Dashboard/Partials/LastUpdated.vue  |  6 +-
 .../Vault/Dashboard/Partials/LifeMetrics.vue  |  8 +--
 .../Dashboard/Partials/MoodTrackingEvents.vue | 18 ++---
 .../Dashboard/Partials/UpcomingReminders.vue  |  6 +-
 .../Pages/Vault/Dashboard/Reminder/Index.vue  | 14 ++--
 .../js/Pages/Vault/Dashboard/Task/Index.vue   |  8 +--
 resources/js/Pages/Vault/Files/Index.vue      | 22 +++---
 resources/js/Pages/Vault/Group/Edit.vue       | 12 ++--
 resources/js/Pages/Vault/Group/Index.vue      |  2 +-
 resources/js/Pages/Vault/Group/Show.vue       | 22 +++---
 resources/js/Pages/Vault/Index.vue            | 14 +---
 resources/js/Pages/Vault/Journal/Create.vue   |  8 +--
 resources/js/Pages/Vault/Journal/Edit.vue     | 12 ++--
 resources/js/Pages/Vault/Journal/Index.vue    |  4 +-
 .../js/Pages/Vault/Journal/Metrics/Index.vue  | 17 ++---
 .../js/Pages/Vault/Journal/Photo/Index.vue    | 16 ++---
 .../js/Pages/Vault/Journal/Post/Edit.vue      | 28 ++++----
 .../Journal/Post/Partials/PostMetrics.vue     |  6 +-
 .../Journal/Post/Partials/SlicesOfLife.vue    |  2 +-
 .../Vault/Journal/Post/Partials/Tags.vue      |  4 +-
 .../js/Pages/Vault/Journal/Post/Show.vue      | 25 +++----
 .../js/Pages/Vault/Journal/Post/Template.vue  |  8 +--
 resources/js/Pages/Vault/Journal/Show.vue     | 24 +++----
 .../js/Pages/Vault/Journal/Slices/Edit.vue    | 20 +++---
 .../js/Pages/Vault/Journal/Slices/Index.vue   | 17 ++---
 .../js/Pages/Vault/Journal/Slices/Show.vue    | 27 ++++---
 .../Vault/Reports/Address/Cities/Index.vue    | 19 +++--
 .../Vault/Reports/Address/Countries/Index.vue | 19 +++--
 .../js/Pages/Vault/Reports/Address/Index.vue  | 10 +--
 .../Vault/Reports/ImportantDate/Index.vue     | 10 +--
 .../Reports/MoodTrackingEvents/Index.vue      | 17 ++---
 .../js/Pages/Vault/Search/Partials/Note.vue   |  6 +-
 .../Partials/ContactImportantDateTypes.vue    | 13 ++--
 .../Settings/Partials/DefaultTemplate.vue     |  2 +-
 .../Pages/Vault/Settings/Partials/Delete.vue  |  4 +-
 .../Pages/Vault/Settings/Partials/Labels.vue  | 19 +++--
 .../Partials/LifeEventTypesAndCategories.vue  | 35 ++++-----
 .../Partials/MoodTrackingParameters.vue       | 28 +++-----
 .../Settings/Partials/QuickFactTemplate.vue   | 14 ++--
 .../Vault/Settings/Partials/TabVisibility.vue | 16 ++---
 .../js/Pages/Vault/Settings/Partials/Tags.vue | 10 +--
 .../Pages/Vault/Settings/Partials/Users.vue   | 34 ++++-----
 .../Webauthn/Partials/DeleteKeyModal.vue      |  2 +-
 .../Pages/Webauthn/Partials/RegisterKey.vue   |  2 +-
 .../js/Pages/Webauthn/Partials/UpdateKey.vue  |  2 +-
 .../js/Pages/Webauthn/Partials/WaitForKey.vue |  4 +-
 resources/js/Pages/Webauthn/WebauthnKeys.vue  |  6 +-
 resources/js/Pages/Webauthn/WebauthnLogin.vue |  2 +-
 resources/js/Shared/ContactCard.vue           |  6 +-
 resources/js/Shared/Form/ContactSelector.vue  | 24 ++-----
 resources/js/Shared/Form/Dropdown.vue         | 34 ++-------
 resources/js/Shared/Form/Errors.vue           | 10 +--
 resources/js/Shared/Form/PrettyButton.vue     | 12 ++--
 resources/js/Shared/Form/PrettyLink.vue       |  2 +-
 resources/js/Shared/Form/TextArea.vue         | 36 +++-------
 resources/js/Shared/Form/TextInput.vue        | 36 +++-------
 resources/js/Shared/Layout.vue                | 52 ++++----------
 resources/js/Shared/Modules/Addresses.vue     | 72 ++++++++-----------
 resources/js/Shared/Modules/Calls.vue         | 72 +++++++++----------
 .../js/Shared/Modules/ContactInformation.vue  | 16 ++---
 resources/js/Shared/Modules/ContactName.vue   |  2 +-
 .../js/Shared/Modules/CreateLifeEvent.vue     | 22 +++---
 resources/js/Shared/Modules/Documents.vue     |  8 +--
 resources/js/Shared/Modules/FamilySummary.vue | 12 ++--
 resources/js/Shared/Modules/Feed.vue          | 28 ++------
 .../js/Shared/Modules/FeedItems/Address.vue   | 16 +----
 .../Modules/FeedItems/ContactInformation.vue  | 16 +----
 .../Modules/FeedItems/GenericAction.vue       | 16 +----
 .../js/Shared/Modules/FeedItems/Goal.vue      |  6 +-
 .../Modules/FeedItems/LabelAssigned.vue       | 20 +-----
 .../Modules/FeedItems/MoodTrackingEvent.vue   | 10 +--
 .../js/Shared/Modules/FeedItems/Note.vue      | 18 +----
 resources/js/Shared/Modules/FeedItems/Pet.vue |  8 +--
 resources/js/Shared/Modules/Goals.vue         | 20 +++---
 resources/js/Shared/Modules/Groups.vue        |  6 +-
 .../js/Shared/Modules/JobInformation.vue      |  2 +-
 resources/js/Shared/Modules/Labels.vue        |  4 +-
 resources/js/Shared/Modules/LifeEvent.vue     | 33 ++++-----
 resources/js/Shared/Modules/Loans.vue         | 63 +++++++---------
 resources/js/Shared/Modules/Notes.vue         | 20 +++---
 resources/js/Shared/Modules/Pets.vue          | 14 ++--
 resources/js/Shared/Modules/Photos.vue        |  4 +-
 resources/js/Shared/Modules/Posts.vue         |  6 +-
 resources/js/Shared/Modules/QuickFacts.vue    | 18 ++---
 resources/js/Shared/Modules/Relationships.vue | 10 +--
 resources/js/Shared/Modules/Religion.vue      |  2 +-
 resources/js/Shared/Modules/Reminders.vue     | 56 +++++++--------
 resources/js/Shared/Modules/Tasks.vue         | 26 +++----
 resources/js/Shared/Toaster.vue               |  6 +-
 166 files changed, 1135 insertions(+), 1585 deletions(-)

diff --git a/resources/js/Components/Breadcrumb.vue b/resources/js/Components/Breadcrumb.vue
index e5a8695fd..c04c3e5f6 100644
--- a/resources/js/Components/Breadcrumb.vue
+++ b/resources/js/Components/Breadcrumb.vue
@@ -7,11 +7,11 @@ defineProps({
 <template>
   <div class="flex items-baseline justify-between space-x-6">
     <ul class="text-sm">
-      <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+      <li class="me-2 inline text-gray-600 dark:text-gray-400">
         {{ $t('You are here:') }}
       </li>
       <template v-for="(item, index) in items" :key="index">
-        <li v-if="index > 0" class="relative inline ltr:ml-2 rtl:mr-2">
+        <li v-if="index > 0" class="relative ms-2 inline">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-breadcrumb relative inline h-3 w-3"
@@ -22,7 +22,7 @@ defineProps({
           </svg>
         </li>
 
-        <li class="inline" :class="{ 'ltr:ml-2 rtl:mr-2': index > 0 }">
+        <li class="inline" :class="{ 'ms-2': index > 0 }">
           <inertia-link v-if="item.url" :href="item.url" class="text-blue-500 hover:underline">
             {{ item.name }}
           </inertia-link>
diff --git a/resources/js/Components/Jetstream/Banner.vue b/resources/js/Components/Jetstream/Banner.vue
index c6fa2c196..14d722040 100644
--- a/resources/js/Components/Jetstream/Banner.vue
+++ b/resources/js/Components/Jetstream/Banner.vue
@@ -49,7 +49,7 @@ watch(message, async () => {
               </svg>
             </span>
 
-            <p class="truncate text-sm font-medium text-white ltr:ml-3 rtl:mr-3">
+            <p class="ms-3 truncate text-sm font-medium text-white">
               {{ message }}
             </p>
           </div>
diff --git a/resources/js/Components/Jetstream/ConfirmationModal.vue b/resources/js/Components/Jetstream/ConfirmationModal.vue
index 4b3c6ae3d..86c67c290 100644
--- a/resources/js/Components/Jetstream/ConfirmationModal.vue
+++ b/resources/js/Components/Jetstream/ConfirmationModal.vue
@@ -40,7 +40,7 @@ const close = () => {
             </svg>
           </div>
 
-          <h3 class="text-lg ltr:ml-3 rtl:mr-3">
+          <h3 class="ms-3 text-lg">
             <slot name="title" />
           </h3>
         </div>
diff --git a/resources/js/Components/Jetstream/ConfirmsPassword.vue b/resources/js/Components/Jetstream/ConfirmsPassword.vue
index 4c0bbd4b0..5ccf85cf2 100644
--- a/resources/js/Components/Jetstream/ConfirmsPassword.vue
+++ b/resources/js/Components/Jetstream/ConfirmsPassword.vue
@@ -106,7 +106,7 @@ const closeModal = () => {
         </JetSecondaryButton>
 
         <Button
-          class="ltr:ml-3 rtl:mr-3"
+          class="ms-3"
           :class="{ 'opacity-25': form.processing }"
           :disabled="form.processing"
           @click="confirmPassword">
diff --git a/resources/js/Components/Jetstream/SectionTitle.vue b/resources/js/Components/Jetstream/SectionTitle.vue
index 0f1af80e6..e34d2a280 100644
--- a/resources/js/Components/Jetstream/SectionTitle.vue
+++ b/resources/js/Components/Jetstream/SectionTitle.vue
@@ -15,10 +15,10 @@ defineProps({
   <div>
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span v-if="$slots.icon" class="ltr:mr-1 rtl:ml-1">
+        <span v-if="$slots.icon" class="me-1">
           <slot name="icon" />
         </span>
-        <span class="ltr:mr-2 rtl:ml-2">
+        <span class="me-2">
           <slot name="title" />
         </span>
 
diff --git a/resources/js/Components/Jetstream/Select.vue b/resources/js/Components/Jetstream/Select.vue
index dc30db423..8fc443313 100644
--- a/resources/js/Components/Jetstream/Select.vue
+++ b/resources/js/Components/Jetstream/Select.vue
@@ -117,12 +117,6 @@ const alignmentClasses = computed(() => {
 });
 </script>
 
-<style scoped>
-.overflow-auto {
-  overflow: auto;
-}
-</style>
-
 <template>
   <div ref="main" class="relative" :class="$attrs.class">
     <div
@@ -157,8 +151,7 @@ const alignmentClasses = computed(() => {
           </svg>
         </button>
       </div>
-      <div
-        class="flex w-8 items-center border-gray-200 py-1 pl-2 pr-1 text-gray-300 ltr:border-l rtl:border-r dark:border-gray-600">
+      <div class="flex w-8 items-center border-e border-gray-200 py-1 pl-2 pr-1 text-gray-300 dark:border-gray-600">
         <button
           @click.prevent="
             open = !open;
@@ -209,7 +202,7 @@ const alignmentClasses = computed(() => {
               close();
             ">
             <div
-              class="relative flex w-full items-center border-transparent bg-white p-2 pl-2 hover:border-teal-600 hover:bg-teal-600 hover:text-teal-100 ltr:border-l-2 rtl:border-r-2 dark:bg-gray-800 hover:dark:border-teal-400 hover:dark:bg-teal-400 hover:dark:text-teal-900">
+              class="relative flex w-full items-center border-s-2 border-transparent bg-white p-2 pl-2 hover:border-teal-600 hover:bg-teal-600 hover:text-teal-100 dark:bg-gray-800 hover:dark:border-teal-400 hover:dark:bg-teal-400 hover:dark:text-teal-900">
               <div class="flex w-full items-center">
                 <div class="mx-2 leading-6">
                   {{ option.name }}
diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue
index c28ff0a77..68a798a2c 100644
--- a/resources/js/Components/Pagination.vue
+++ b/resources/js/Components/Pagination.vue
@@ -44,8 +44,7 @@ const linkClasses =
         :class="[
           commonClasses,
           linkClasses,
-          'ltr:ml-3',
-          'rtl:mr-3',
+          'ms-3',
           'rounded-md',
           'text-gray-700',
           'dark:text-gray-300',
@@ -55,15 +54,7 @@ const linkClasses =
       </Link>
       <span
         v-else
-        :class="[
-          commonClasses,
-          'ltr:ml-3',
-          'rtl:mr-3',
-          'rounded-md',
-          'text-gray-500',
-          'cursor-default',
-          'dark:bg-gray-900',
-        ]">
+        :class="[commonClasses, 'ms-3', 'rounded-md', 'text-gray-500', 'cursor-default', 'dark:bg-gray-900']">
         <span v-html="$t('Next')"></span>
       </span>
     </div>
@@ -95,8 +86,7 @@ const linkClasses =
           :class="[
             commonClasses,
             'px-2',
-            'ltr:rounded-l-md',
-            'rtl:rounded-r-md',
+            'rounded-s-md',
             'text-gray-500',
             'focus:z-10',
             'cursor-default',
@@ -117,8 +107,7 @@ const linkClasses =
             commonClasses,
             linkClasses,
             'px-2',
-            'ltr:rounded-l-md',
-            'rtl:rounded-r-md',
+            'rounded-s-md',
             'text-gray-500',
             'dark:bg-gray-900',
             'hover:text-gray-400',
@@ -177,8 +166,7 @@ const linkClasses =
             linkClasses,
             '-ml-px',
             'px-2',
-            'ltr:rounded-r-md',
-            'rtl:rounded-l-md',
+            'rounded-e-md',
             'text-gray-500',
             'dark:bg-gray-900',
             'hover:text-gray-400',
@@ -195,8 +183,7 @@ const linkClasses =
             linkClasses,
             '-ml-px',
             'px-2',
-            'ltr:rounded-r-md',
-            'rtl:rounded-l-md',
+            'rounded-e-md',
             'text-gray-500',
             'dark:bg-gray-900',
             'focus:z-10',
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index 30ef44a97..a7eafe586 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -10,8 +10,8 @@ const props = defineProps({
 
 const classes = computed(() => {
   return props.active
-    ? 'block pl-3 pr-4 py-2 ltr:border-l-4 rtl:border-r-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition'
-    : 'block pl-3 pr-4 py-2 ltr:border-l-4 rtl:border-r-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition';
+    ? 'block pl-3 pr-4 py-2 border-s-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition'
+    : 'block pl-3 pr-4 py-2 border-s-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition';
 });
 </script>
 
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 657cfbcd5..71508bfa1 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -42,7 +42,7 @@ const logout = () => {
 
             <div class="hidden sm:ml-6 sm:flex sm:items-center">
               <!-- Settings Dropdown -->
-              <div class="relative ltr:ml-3 rtl:mr-3">
+              <div class="relative ms-3">
                 <JetDropdown align="right" width="48">
                   <template #trigger>
                     <button
@@ -61,7 +61,7 @@ const logout = () => {
                         {{ $page.props.user.name }}
 
                         <svg
-                          class="-mr-0.5 h-4 w-4 ltr:ml-2 rtl:mr-2"
+                          class="-mr-0.5 ms-2 h-4 w-4"
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 20 20"
                           fill="currentColor">
@@ -144,7 +144,7 @@ const logout = () => {
           <!-- Responsive Settings Options -->
           <div class="border-t border-gray-200 pb-1 pt-4 dark:border-gray-800">
             <div class="flex items-center px-4">
-              <div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 ltr:mr-3 rtl:ml-3">
+              <div v-if="$page.props.jetstream.managesProfilePhotos" class="me-3 shrink-0">
                 <img
                   class="h-10 w-10 rounded-full object-cover"
                   :src="$page.props.user.profile_photo_url"
diff --git a/resources/js/Pages/API/Index.vue b/resources/js/Pages/API/Index.vue
index 21c2c4490..21626e59b 100644
--- a/resources/js/Pages/API/Index.vue
+++ b/resources/js/Pages/API/Index.vue
@@ -18,15 +18,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <Link :href="route('settings.index')" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </Link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/API/Partials/ApiTokenManager.vue b/resources/js/Pages/API/Partials/ApiTokenManager.vue
index 609017b54..b580da8c7 100644
--- a/resources/js/Pages/API/Partials/ApiTokenManager.vue
+++ b/resources/js/Pages/API/Partials/ApiTokenManager.vue
@@ -121,7 +121,7 @@ const copyToClipboard = (token) => {
             <div v-for="permission in availablePermissions" :key="permission">
               <label class="flex items-center">
                 <JetCheckbox v-model:checked="createApiTokenForm.permissions" :value="permission" />
-                <span class="text-sm text-gray-600 ltr:ml-2 rtl:mr-2 dark:text-gray-400">
+                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">
                   {{ permission }}
                 </span>
               </label>
@@ -131,7 +131,7 @@ const copyToClipboard = (token) => {
       </template>
 
       <template #actions>
-        <JetActionMessage :on="createApiTokenForm.recentlySuccessful" class="ltr:mr-3 rtl:ml-3">
+        <JetActionMessage :on="createApiTokenForm.recentlySuccessful" class="me-3">
           {{ $t('Created.') }}
         </JetActionMessage>
 
@@ -168,14 +168,12 @@ const copyToClipboard = (token) => {
 
                   <button
                     v-if="availablePermissions.length > 0"
-                    class="cursor-pointer text-sm text-gray-400 underline ltr:ml-6 rtl:mr-6"
+                    class="ms-6 cursor-pointer text-sm text-gray-400 underline"
                     @click="manageApiTokenPermissions(token)">
                     {{ $t('Permissions') }}
                   </button>
 
-                  <button
-                    class="cursor-pointer text-sm text-red-500 ltr:ml-6 rtl:mr-6"
-                    @click="confirmApiTokenDeletion(token)">
+                  <button class="ms-6 cursor-pointer text-sm text-red-500" @click="confirmApiTokenDeletion(token)">
                     {{ $t('Delete') }}
                   </button>
                 </div>
@@ -205,7 +203,7 @@ const copyToClipboard = (token) => {
           </div>
 
           <JetButton
-            class="ltr:ml-3 rtl:mr-3"
+            class="ms-3"
             :title="$t('Copy value into the clipboard')"
             @click.prevent="copyToClipboard($page.props.jetstream.flash.token)">
             {{ $t('Copy') }}
@@ -235,7 +233,7 @@ const copyToClipboard = (token) => {
           <div v-for="permission in availablePermissions" :key="permission">
             <label class="flex items-center">
               <JetCheckbox v-model:checked="updateApiTokenForm.permissions" :value="permission" />
-              <span class="text-sm text-gray-600 ltr:ml-2 rtl:mr-2 dark:text-gray-400">
+              <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">
                 {{ permission }}
               </span>
             </label>
@@ -249,7 +247,7 @@ const copyToClipboard = (token) => {
         </JetSecondaryButton>
 
         <JetButton
-          class="ltr:ml-3 rtl:mr-3"
+          class="ms-3"
           :class="{ 'opacity-25': updateApiTokenForm.processing }"
           :disabled="updateApiTokenForm.processing"
           @click="updateApiToken">
@@ -274,7 +272,7 @@ const copyToClipboard = (token) => {
         </JetSecondaryButton>
 
         <JetDangerButton
-          class="ltr:ml-3 rtl:mr-3"
+          class="ms-3"
           :class="{ 'opacity-25': deleteApiTokenForm.processing }"
           :disabled="deleteApiTokenForm.processing"
           @click="deleteApiToken">
diff --git a/resources/js/Pages/Auth/AcceptInvitation.vue b/resources/js/Pages/Auth/AcceptInvitation.vue
index d55db23c1..f5d48e46f 100644
--- a/resources/js/Pages/Auth/AcceptInvitation.vue
+++ b/resources/js/Pages/Auth/AcceptInvitation.vue
@@ -36,7 +36,7 @@ const submit = () => {
 
     <form @submit.prevent="submit">
       <h1 class="mb-3 text-center text-xl">
-        <span class="ltr:mr-2 rtl:ml-2"> 👋 </span>
+        <span class="me-2"> 👋 </span>
         {{ $t('Welcome to Monica.') }}
       </h1>
       <p class="mb-4 text-center">{{ $t('Please complete this form to finalize your account.') }}'</p>
@@ -87,7 +87,7 @@ const submit = () => {
       </div>
 
       <div class="mt-4 flex items-center justify-end">
-        <JetButton class="ltr:ml-4 rtl:mr-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+        <JetButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
           {{ $t('Create account') }}
         </JetButton>
       </div>
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index 7f6ab6a61..3cbd04072 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -39,7 +39,7 @@ const submit = () => {
       </div>
 
       <div class="mt-4 flex justify-end">
-        <JetButton class="ltr:ml-4 rtl:mr-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+        <JetButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
           {{ $t('Confirm') }}
         </JetButton>
       </div>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index de0cdd31f..549a650e2 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -74,22 +74,6 @@ const reload = () => {
 };
 </script>
 
-<style scoped>
-.auth-provider {
-  width: 15px;
-  height: 15px;
-}
-.ltr .auth-provider {
-  margin-right: 8px;
-}
-.rtl .auth-provider {
-  margin-left: 8px;
-}
-.w-43 {
-  width: 43%;
-}
-</style>
-
 <template>
   <div class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 dark:bg-gray-900 sm:justify-center sm:pt-0">
     <div class="mb-2">
@@ -99,8 +83,8 @@ const reload = () => {
     <!-- beta mode-->
     <div class="mb-4 rounded-lg border bg-amber-50 p-6">
       <p class="mb-2 text-center font-bold">
-        <span class="ltr:mr-2 rtl:ml-2">🚧</span> {{ $t('Chandler is in beta.') }}
-        <span class="ltr:ml-2 rtl:mr-2">🚧</span>
+        <span class="me-2">🚧</span> {{ $t('Chandler is in beta.') }}
+        <span class="ms-2">🚧</span>
       </p>
       <p class="mb-2">{{ $t('Compared to Monica:') }}</p>
       <ul class="list mb-2 pl-3">
@@ -120,7 +104,7 @@ const reload = () => {
       <div class="w-full">
         <div class="border-b border-gray-200 px-6 pb-6 pt-8 dark:border-gray-700">
           <h1 class="mb-4 text-center text-xl text-gray-800 dark:text-gray-200">
-            <span class="ltr:mr-2 rtl:ml-2"> 👋 </span>
+            <span class="me-2"> 👋 </span>
             {{ $t('Sign in to your account') }}
           </h1>
 
@@ -140,7 +124,7 @@ const reload = () => {
 
             <WebauthnLogin :remember="true" :public-key="publicKeyRef" />
 
-            <JetSecondaryButton class="mt-4 ltr:mr-2 rtl:ml-2" @click.prevent="webauthn = false">
+            <JetSecondaryButton class="me-2 mt-4" @click.prevent="webauthn = false">
               {{ $t('Use your password') }}
             </JetSecondaryButton>
           </div>
@@ -173,7 +157,7 @@ const reload = () => {
             <div class="mb-3 block">
               <label class="flex items-center">
                 <JetCheckbox v-model:checked="form.remember" name="remember" />
-                <span class="text-sm text-gray-600 ltr:ml-2 rtl:mr-2 dark:text-gray-400">
+                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">
                   {{ $t('Remember me') }}
                 </span>
               </label>
@@ -187,7 +171,7 @@ const reload = () => {
                 {{ $t('Forgot password?') }}
               </Link>
 
-              <PrettyButton :text="$t('Log in')" :state="loadingState" :classes="'save ltr:ml-4 rtl:mr-4'" />
+              <PrettyButton :text="$t('Log in')" :state="loadingState" :classes="'save ms-4'" />
             </div>
 
             <div class="mt-3 block">
@@ -198,13 +182,10 @@ const reload = () => {
                 <JetSecondaryButton
                   v-for="(provider, id) in providers"
                   :key="id"
-                  class="mb-2 inline w-32 align-middle ltr:mr-2 rtl:ml-2"
+                  class="mb-2 me-2 inline w-32 align-middle"
                   :href="route('login.provider', { driver: id })"
                   @click.prevent="open(id)">
-                  <img
-                    :src="provider.logo"
-                    :alt="provider.name"
-                    class="relative h-4 w-4 align-middle ltr:mr-2 rtl:ml-2" />
+                  <img :src="provider.logo" :alt="provider.name" class="relative me-2 h-4 w-4 align-middle" />
                   <span class="align-middle">
                     {{ provider.name }}
                   </span>
@@ -213,7 +194,7 @@ const reload = () => {
             </div>
 
             <div v-if="publicKeyRef" class="mt-3 block">
-              <JetSecondaryButton class="ltr:mr-2 rtl:ml-2" @click.prevent="reload">
+              <JetSecondaryButton class="me-2" @click.prevent="reload">
                 {{ $t('Use your security key') }}
               </JetSecondaryButton>
             </div>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 3a29f824d..637a5c500 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -109,7 +109,7 @@ const policy = () => {
             <JetCheckbox id="terms" v-model:checked="form.terms" name="terms" />
 
             <div
-              class="ltr:ml-2 rtl:mr-2"
+              class="ms-2"
               v-html="$t('I agree to the :terms and :policy', { terms: terms(), policy: policy() })"></div>
           </div>
         </JetLabel>
@@ -118,8 +118,8 @@ const policy = () => {
       <!-- beta mode-->
       <div class="mb-4 rounded-lg border bg-amber-50 p-6">
         <p class="mb-2 text-center font-bold">
-          <span class="ltr:mr-2 rtl:ml-2">🚧</span> {{ $t('Chandler is in beta.') }}
-          <span class="ltr:ml-2 rtl:mr-2">🚧</span>
+          <span class="me-2">🚧</span> {{ $t('Chandler is in beta.') }}
+          <span class="ms-2">🚧</span>
         </p>
         <p class="mb-2">{{ $t('Compared to Monica:') }}</p>
         <ul class="list mb-2 pl-3">
@@ -134,7 +134,7 @@ const policy = () => {
       </div>
 
       <div class="mt-4 flex items-center justify-end">
-        <Link :href="route('login')" class="text-sm text-blue-500 hover:underline ltr:mr-4 rtl:ml-4 dark:text-gray-400">
+        <Link :href="route('login')" class="me-4 text-sm text-blue-500 hover:underline dark:text-gray-400">
           {{ $t('Already registered?') }}
         </Link>
 
diff --git a/resources/js/Pages/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue
index f8c14001b..bec373523 100644
--- a/resources/js/Pages/Auth/TwoFactorChallenge.vue
+++ b/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -116,7 +116,7 @@ defineProps({
             </template>
           </button>
 
-          <JetButton class="ltr:ml-4 rtl:mr-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+          <JetButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
             {{ $t('Log in') }}
           </JetButton>
         </div>
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index 791125c75..ac5b42343 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -60,7 +60,7 @@ const closeModal = () => {
         </p>
 
         <p class="pt-5">{{ $t('This will immediately:') }}</p>
-        <ul class="mb-2 ltr:ml-5 rtl:mr-5">
+        <ul class="mb-2 ms-5">
           <li>- {{ $t('Cancel all your active subscriptions') }},</li>
           <li>- {{ $t('Delete your account on https://customers.monicahq.com.') }}</li>
         </ul>
@@ -108,7 +108,7 @@ const closeModal = () => {
           </JetSecondaryButton>
 
           <JetDangerButton
-            class="ltr:ml-3 rtl:mr-3"
+            class="ms-3"
             :class="{ 'opacity-25': form.processing }"
             :disabled="form.processing"
             @click="deleteUser">
diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
index 8676eb251..a1f6908d4 100644
--- a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -94,7 +94,7 @@ const closeModal = () => {
             </svg>
           </div>
 
-          <div class="ltr:ml-3 rtl:mr-3">
+          <div class="ms-3">
             <div class="text-sm text-gray-600 dark:text-gray-400">
               {{ session.agent.platform ? session.agent.platform : $t('Unknown') }} -
               {{ session.agent.browser ? session.agent.browser : $t('Unknown') }}
@@ -121,7 +121,7 @@ const closeModal = () => {
           {{ $t('Log Out Other Browser Sessions') }}
         </JetButton>
 
-        <JetActionMessage :on="form.recentlySuccessful" class="ltr:ml-3 rtl:mr-3">
+        <JetActionMessage :on="form.recentlySuccessful" class="ms-3">
           {{ $t('Done.') }}
         </JetActionMessage>
       </div>
@@ -158,7 +158,7 @@ const closeModal = () => {
           </JetSecondaryButton>
 
           <JetButton
-            class="ltr:ml-3 rtl:mr-3"
+            class="ms-3"
             :class="{ 'opacity-25': form.processing }"
             :disabled="form.processing"
             @click="logoutOtherBrowserSessions">
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index 654fa0aae..f5fc7dc6d 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -210,7 +210,7 @@ const disableTwoFactorAuthentication = () => {
             <JetButton
               v-if="confirming"
               type="button"
-              class="ltr:mr-3 rtl:ml-3"
+              class="me-3"
               :class="{ 'opacity-25': enabling }"
               :disabled="enabling">
               {{ $t('Confirm') }}
@@ -218,13 +218,13 @@ const disableTwoFactorAuthentication = () => {
           </JetConfirmsPassword>
 
           <JetConfirmsPassword @confirmed="regenerateRecoveryCodes">
-            <JetSecondaryButton v-if="recoveryCodes.length > 0 && !confirming" class="ltr:mr-3 rtl:ml-3">
+            <JetSecondaryButton v-if="recoveryCodes.length > 0 && !confirming" class="me-3">
               {{ $t('Regenerate Recovery Codes') }}
             </JetSecondaryButton>
           </JetConfirmsPassword>
 
           <JetConfirmsPassword @confirmed="showRecoveryCodes">
-            <JetSecondaryButton v-if="recoveryCodes.length === 0 && !confirming" class="ltr:mr-3 rtl:ml-3">
+            <JetSecondaryButton v-if="recoveryCodes.length === 0 && !confirming" class="me-3">
               {{ $t('Show Recovery Codes') }}
             </JetSecondaryButton>
           </JetConfirmsPassword>
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
index 68ce2cc30..f9ee5f6b1 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -85,7 +85,7 @@ const updatePassword = () => {
     </template>
 
     <template #actions>
-      <JetActionMessage :on="form.recentlySuccessful" class="ltr:mr-3 rtl:ml-3">
+      <JetActionMessage :on="form.recentlySuccessful" class="me-3">
         {{ $t('Saved.') }}
       </JetActionMessage>
 
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index 668fa79f2..275a117e5 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -104,7 +104,7 @@ const clearPhotoFileInput = () => {
             :style="'background-image: url(\'' + photoPreview + '\');'" />
         </div>
 
-        <JetSecondaryButton class="mt-2 ltr:mr-2 rtl:ml-2" type="button" @click.prevent="selectNewPhoto">
+        <JetSecondaryButton class="me-2 mt-2" type="button" @click.prevent="selectNewPhoto">
           {{ $t('Select A New Photo') }}
         </JetSecondaryButton>
 
@@ -148,7 +148,7 @@ const clearPhotoFileInput = () => {
     </template>
 
     <template #actions>
-      <JetActionMessage :on="form.recentlySuccessful" class="ltr:mr-3 rtl:ml-3">
+      <JetActionMessage :on="form.recentlySuccessful" class="me-3">
         {{ $t('Saved.') }}
       </JetActionMessage>
 
diff --git a/resources/js/Pages/Profile/Partials/UpdateProviders.vue b/resources/js/Pages/Profile/Partials/UpdateProviders.vue
index 95dae655a..6a0dc6a89 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProviders.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProviders.vue
@@ -37,20 +37,6 @@ defineProps({
 });
 </script>
 
-<style scoped>
-.auth-provider {
-  width: 15px;
-  height: 15px;
-  top: 2px;
-}
-.ltr .auth-provider {
-  margin-right: 8px;
-}
-.rtl .auth-provider {
-  margin-left: 8px;
-}
-</style>
-
 <template>
   <JetActionSection id="socialite">
     <template #title>
@@ -68,8 +54,8 @@ defineProps({
 
       <div class="mt-5 space-y-6">
         <div v-for="(provider, id) in providers" :key="id" class="flex items-center">
-          <img :src="provider.logo" :alt="provider.name" class="auth-provider relative" />
-          <span class="text-sm text-gray-600 ltr:mr-3 rtl:ml-3 dark:text-gray-400">
+          <img :src="provider.logo" :alt="provider.name" class="relative top-0.5 me-2 h-[15px] w-[15px]" />
+          <span class="me-3 text-sm text-gray-600 dark:text-gray-400">
             {{ provider.name }}
           </span>
 
@@ -77,7 +63,7 @@ defineProps({
             <span class="text-sm text-green-600 dark:text-green-400">
               {{ $t('Connected') }}
             </span>
-            <JetSecondaryButton class="ltr:ml-3 rtl:mr-3" @click.prevent="deleteProvider(id)">
+            <JetSecondaryButton class="ms-3" @click.prevent="deleteProvider(id)">
               {{ $t('Disconnect') }}
             </JetSecondaryButton>
 
@@ -85,7 +71,7 @@ defineProps({
           </template>
 
           <template v-else>
-            <JetButton class="ltr:ml-3 rtl:mr-3" @click.prevent="open(id)">
+            <JetButton class="ms-3" @click.prevent="open(id)">
               {{ $t('Connect') }}
             </JetButton>
 
diff --git a/resources/js/Pages/Settings/CancelAccount/Index.vue b/resources/js/Pages/Settings/CancelAccount/Index.vue
index 6e986bd4c..6fc478817 100644
--- a/resources/js/Pages/Settings/CancelAccount/Index.vue
+++ b/resources/js/Pages/Settings/CancelAccount/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -39,10 +39,7 @@
             <h1 class="mb-4 flex justify-center text-2xl font-medium">
               <span>{{ $t('Cancel your account') }}</span>
 
-              <help
-                :url="$page.props.help_links.settings_account_deletion"
-                :top="'9px'"
-                :classes="['ltr:ml-3', 'rtl:mr-3']" />
+              <help :url="$page.props.help_links.settings_account_deletion" :top="'9px'" :classes="'ms-3'" />
             </h1>
             <p class="mb-2">{{ $t('Thanks for giving Monica a try.') }}</p>
             <p class="mb-2">{{ $t('Once you cancel,') }}</p>
@@ -75,7 +72,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Go back')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Go back')" :classes="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Cancel account')"
diff --git a/resources/js/Pages/Settings/Index.vue b/resources/js/Pages/Settings/Index.vue
index ece6f31c3..a3ba92708 100644
--- a/resources/js/Pages/Settings/Index.vue
+++ b/resources/js/Pages/Settings/Index.vue
@@ -14,7 +14,7 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               {{ $t('You are here:') }}
             </li>
             <li class="inline">
@@ -35,25 +35,25 @@ defineProps({
         <div class="mb-12 rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
           <ul>
             <li class="mb-2 flex justify-start">
-              <span class="ltr:mr-2 rtl:ml-2">🥳</span>
+              <span class="me-2">🥳</span>
               <Link :href="data.url.preferences.index" class="text-blue-500 hover:underline">
                 {{ $t('User preferences') }}
               </Link>
             </li>
             <li class="mb-2 flex justify-start">
-              <span class="ltr:mr-2 rtl:ml-2">📡</span>
+              <span class="me-2">📡</span>
               <Link :href="data.url.notifications.index" class="text-blue-500 hover:underline">
                 {{ $t('Notification channels') }}
               </Link>
             </li>
             <li class="mb-2 flex justify-start">
-              <span class="ltr:mr-2 rtl:ml-2">🔐</span>
+              <span class="me-2">🔐</span>
               <Link :href="route('profile.show')" class="text-blue-500 hover:underline">
                 {{ $t('Profile and security') }}
               </Link>
             </li>
             <li class="flex justify-start">
-              <span class="ltr:mr-2 rtl:ml-2">⚓</span>
+              <span class="me-2">⚓</span>
               <Link :href="route('api-tokens.index')" class="text-blue-500 hover:underline">
                 {{ $t('API Tokens') }}
               </Link>
@@ -69,25 +69,25 @@ defineProps({
           <div class="mb-6 rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
             <ul>
               <li class="mb-2 flex justify-start">
-                <span class="ltr:mr-2 rtl:ml-2">😀</span>
+                <span class="me-2">😀</span>
                 <Link :href="data.url.users.index" class="text-blue-500 hover:underline">
                   {{ $t('Manage users') }}
                 </Link>
               </li>
               <li class="mb-2 flex justify-start">
-                <span class="ltr:mr-2 rtl:ml-2">🎃</span>
+                <span class="me-2">🎃</span>
                 <Link :href="data.url.personalize.index" class="text-blue-500 hover:underline">
                   {{ $t('Personalize your account') }}
                 </Link>
               </li>
               <li class="mb-2 flex justify-start">
-                <span class="ltr:mr-2 rtl:ml-2">📸</span>
+                <span class="me-2">📸</span>
                 <Link :href="data.url.storage.index" class="text-blue-500 hover:underline">
                   {{ $t('Manage storage') }}
                 </Link>
               </li>
               <li class="flex justify-start">
-                <span class="ltr:mr-2 rtl:ml-2">💩</span>
+                <span class="me-2">💩</span>
                 <Link :href="data.url.cancel.index" class="text-blue-500 hover:underline">
                   {{ $t('Cancel your account') }}
                 </Link>
diff --git a/resources/js/Pages/Settings/Notifications/Index.vue b/resources/js/Pages/Settings/Notifications/Index.vue
index 2639c0e95..ad1d9a611 100644
--- a/resources/js/Pages/Settings/Notifications/Index.vue
+++ b/resources/js/Pages/Settings/Notifications/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -36,7 +36,7 @@
         <!-- title + cta -->
         <div class="mb-3 mt-8 sm:mt-0">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 🛰️ </span>
+            <span class="me-1"> 🛰️ </span>
             {{ $t('Configure how we should notify you') }}
           </h3>
         </div>
@@ -119,5 +119,3 @@ export default {
   methods: {},
 };
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/resources/js/Pages/Settings/Notifications/Logs/Index.vue b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
index e471ba8ea..57dfec485 100644
--- a/resources/js/Pages/Settings/Notifications/Logs/Index.vue
+++ b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.channels" class="text-blue-500 hover:underline">
                 {{ $t('Notification channels') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -54,7 +54,7 @@
             {{ $t('History of the notification sent') }}
           </h3>
           <ul class="bulleted-list text-center">
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <span class="text-gray-500">{{ $t('Type:') }}</span>
               {{ data.channel.type }}
             </li>
@@ -98,7 +98,7 @@
             v-for="notification in data.notifications"
             :key="notification.id"
             class="item-list border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
-            <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ notification.sent_at }}</span>
+            <span class="me-2 text-sm text-gray-500">{{ notification.sent_at }}</span>
             <span>{{ notification.subject_line }}</span>
           </li>
         </ul>
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
index d7b3ad14a..29967e127 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
@@ -52,21 +52,21 @@
           {{ $t('At which time should we send the notification, when the reminder occurs?') }}
         </p>
         <div class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
-          <span class="ltr:mr-2 rtl:ml-2">
+          <span class="me-2">
             {{ $t('At') }}
           </span>
 
-          <Dropdown v-model="form.hours" dropdown-class="ltr:mr-1 rtl:ml-1" :required="required" :data="hours" />
+          <Dropdown v-model="form.hours" dropdown-class="me-1" :required="required" :data="hours" />
 
-          <span class="ltr:mr-2 rtl:ml-2">:</span>
+          <span class="me-2">:</span>
 
-          <Dropdown v-model="form.minutes" dropdown-class="ltr:mr-1 rtl:ml-1" :required="required" :data="minutes" />
+          <Dropdown v-model="form.minutes" dropdown-class="me-1" :required="required" :data="minutes" />
         </div>
       </div>
 
       <div class="border-b border-gray-200 p-5 dark:border-gray-700">
         <p class="flex">
-          <span class="ltr:mr-2 rtl:ml-2">⚠️</span>
+          <span class="me-2">⚠️</span>
           {{
             $t(
               'We’ll send an email to this email address that you will need to confirm before we can send notifications to this address.',
@@ -76,7 +76,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click.prevent="addEmailModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="addEmailModalShown = false" />
         <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -93,7 +93,7 @@
           <a-tooltip v-if="email.verified_at" placement="topLeft" title="Verified" arrow-point-at-center>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="inline h-4 w-4 text-green-600 ltr:mr-2 rtl:ml-2"
+              class="me-2 inline h-4 w-4 text-green-600"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
@@ -108,8 +108,8 @@
           <!-- email address + label -->
           <div>
             <span class="mb-0 block">{{ email.content }}</span>
-            <ul class="bulleted-list text-sm text-gray-500 ltr:mr-2 rtl:ml-2">
-              <li v-if="email.label" class="inline ltr:mr-1 rtl:ml-1">
+            <ul class="bulleted-list me-2 text-sm text-gray-500">
+              <li v-if="email.label" class="me-1 inline">
                 {{ email.label }}
               </li>
               <li class="inline">
@@ -124,13 +124,13 @@
           <!-- activate/deactivate -->
           <li
             v-if="email.active"
-            class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+            class="me-4 inline cursor-pointer text-blue-500 hover:underline"
             @click="toggle(email)">
             {{ $t('Deactivate') }}
           </li>
           <li
             v-if="!email.active"
-            class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+            class="me-4 inline cursor-pointer text-blue-500 hover:underline"
             @click="toggle(email)">
             {{ $t('Activate') }}
           </li>
@@ -138,18 +138,18 @@
           <!-- link to send a test email, if not already sent -->
           <li
             v-if="testEmailSentId != email.id"
-            class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+            class="me-4 inline cursor-pointer text-blue-500 hover:underline"
             @click="sendTest(email)">
             {{ $t('Send test') }}
           </li>
 
           <!-- text saying that the email has been sent -->
-          <li v-if="testEmailSentId == email.id" class="inline ltr:mr-4 rtl:ml-4">
+          <li v-if="testEmailSentId == email.id" class="me-4 inline">
             {{ $t('Test email sent!') }}
           </li>
 
           <!-- view log -->
-          <li class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4">
+          <li class="me-4 inline cursor-pointer text-blue-500 hover:underline">
             <inertia-link :href="email.url.logs" class="text-blue-500 hover:underline">
               {{ $t('View log') }}
             </inertia-link>
@@ -163,7 +163,7 @@
 
         <!-- actions when the email has NOT been verified -->
         <ul v-else class="text-sm">
-          <li class="inline ltr:mr-4 rtl:ml-4">
+          <li class="me-4 inline">
             {{ $t('Verification email sent') }}
           </li>
 
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
index 868e3736a..2b9802494 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
@@ -25,21 +25,21 @@
           {{ $t('At which time should we send the notification, when the reminder occurs?') }}
         </p>
         <div class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300">
-          <span class="ltr:mr-2 rtl:ml-2">
+          <span class="me-2">
             {{ $t('At') }}
           </span>
 
-          <Dropdown v-model="form.hours" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="hours" />
+          <Dropdown v-model="form.hours" dropdownClass="me-1" :required="required" :data="hours" />
 
-          <span class="ltr:mr-2 rtl:ml-2">:</span>
+          <span class="me-2">:</span>
 
-          <Dropdown v-model="form.minutes" dropdownClass="ltr:mr-1 rtl:ml-1" :required="required" :data="minutes" />
+          <Dropdown v-model="form.minutes" dropdownClass="me-1" :required="required" :data="minutes" />
         </div>
       </div>
 
       <div class="border-b border-gray-200 p-5 dark:border-gray-700">
-        <p class="mb-4 font-semibold"><span class="ltr:mr-1 rtl:ml-1">👋</span> {{ $t('What happens now?') }}</p>
-        <ol class="list-decimal ltr:ml-4 rtl:mr-4">
+        <p class="mb-4 font-semibold"><span class="me-1">👋</span> {{ $t('What happens now?') }}</p>
+        <ol class="ms-4 list-decimal">
           <li class="mb-2">
             {{
               $t(
@@ -61,10 +61,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span
-          :text="$t('Cancel')"
-          :classes="'ltr:mr-3 rtl:ml-3'"
-          @click.prevent="setupTelegramModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="setupTelegramModalShown = false" />
         <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -86,7 +83,7 @@
             <a-tooltip v-if="localTelegram.active" placement="topLeft" title="Verified" arrow-point-at-center>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="inline h-4 w-4 text-green-600 ltr:mr-2 rtl:ml-2"
+                class="me-2 inline h-4 w-4 text-green-600"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor">
@@ -106,7 +103,7 @@
 
           <!-- actions when Telegram is not active -->
           <ul v-if="!localTelegram.active" class="text-sm">
-            <li class="inline ltr:mr-4 rtl:ml-4">
+            <li class="me-4 inline">
               <a :href="localTelegram.url.open" target="_blank" class="text-blue-500 hover:underline">{{
                 $t('Open Telegram to validate your identity')
               }}</a>
@@ -122,16 +119,16 @@
             <!-- link to send a test notification, if not already sent -->
             <li
               v-if="!notificationSent"
-              class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+              class="me-4 inline cursor-pointer text-blue-500 hover:underline"
               @click="sendTest">
               {{ $t('Send test') }}
             </li>
-            <li v-if="notificationSent" class="inline ltr:mr-4 rtl:ml-4">
+            <li v-if="notificationSent" class="me-4 inline">
               {{ $t('Notification sent') }}
             </li>
 
             <!-- view log -->
-            <li class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4">
+            <li class="me-4 inline cursor-pointer text-blue-500 hover:underline">
               <inertia-link :href="localTelegram.url.logs" class="text-blue-500 hover:underline">
                 {{ $t('View log') }}
               </inertia-link>
diff --git a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
index 37cf581eb..452effc3a 100644
--- a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 🏖 </span>
+            <span class="me-1"> 🏖 </span>
             {{ $t('All the address types') }}
           </h3>
           <pretty-button
@@ -81,10 +81,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createAddressTypeModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createAddressTypeModalShown = false" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -105,7 +102,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateAdressTypeModal(addressType)">
+                <li class="me-4 inline cursor-pointer" @click="updateAdressTypeModal(addressType)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(addressType)">
@@ -138,7 +135,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  :classes="'me-3'"
                   @click.prevent="renameAddressTypeModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
diff --git a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
index 2f8fb0bf9..89f9139e8 100644
--- a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 📲 </span>
+            <span class="me-1"> 📲 </span>
             {{ $t('All the call reasons') }}
           </h3>
           <pretty-button
@@ -101,10 +101,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createCallReasonTypeModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createCallReasonTypeModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -126,7 +123,7 @@
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li
-                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                  class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                   @click="destroyCallReasonType(callReasonType)">
                   {{ $t('Delete') }}
                 </li>
@@ -157,7 +154,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  :classes="'me-3'"
                   @click.prevent="renameCallReasonTypeModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
@@ -178,7 +175,7 @@
                     <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                   </li>
                   <li
-                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                    class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                     @click="destroyReason(callReasonType, reason)">
                     {{ $t('Delete') }}
                   </li>
@@ -209,10 +206,7 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span
-                    :text="$t('Cancel')"
-                    :classes="'ltr:mr-3 rtl:ml-3'"
-                    @click.prevent="renameReasonModalId = 0" />
+                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renameReasonModalId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
@@ -255,10 +249,7 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
-                  @click.prevent="createReasonModalId = 0" />
+                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="createReasonModalId = 0" />
                 <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
index 79b34e8ad..05e108f40 100644
--- a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -51,7 +51,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> ☎️ </span>
+            <span class="me-1"> ☎️ </span>
             {{ $t('All the contact information types') }}
           </h3>
           <pretty-button
@@ -101,7 +101,7 @@
           <div class="flex justify-between p-5">
             <pretty-span
               :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
+              :classes="'me-3'"
               @click="createContactInformationTypeModalShown = false" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
@@ -121,7 +121,7 @@
               class="flex items-center justify-between px-5 py-2">
               <div>
                 <span class="text-base">{{ contactInformationType.name }}</span>
-                <code v-if="contactInformationType.protocol" class="code text-xs ltr:ml-3 rtl:mr-3"
+                <code v-if="contactInformationType.protocol" class="code ms-3 text-xs"
                   >[{{
                     $t('Protocol: :name', {
                       name: contactInformationType.protocol,
@@ -139,7 +139,7 @@
                 </li>
                 <li
                   v-if="contactInformationType.can_be_deleted"
-                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                  class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                   @click="destroy(contactInformationType)">
                   {{ $t('Delete') }}
                 </li>
@@ -182,7 +182,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  :classes="'me-3'"
                   @click.prevent="renameContactInformationTypeModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
diff --git a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
index bc2a88fab..75aa484ad 100644
--- a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 💵 </span>
+            <span class="me-1"> 💵 </span>
             {{ $t('All the currencies') }}
           </h3>
         </div>
@@ -79,7 +79,7 @@
 
         <div class="mb-3 text-right">
           <ul>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <span class="inline cursor-pointer text-blue-500 hover:underline" @click="enableAll">
                 {{ $t('Enable all') }}
               </span>
@@ -102,23 +102,20 @@
             class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <div class="flex justify-between px-3 py-2" :class="!currency.active ? 'bg-slate-200' : ''">
               <div>
-                <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ currency.code }}</span>
+                <span class="me-2 text-sm text-gray-500">{{ currency.code }}</span>
                 <span>{{ currency.name }}</span>
               </div>
 
               <!-- enable -->
               <span
                 v-if="!currency.active"
-                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+                class="me-4 inline cursor-pointer text-blue-500 hover:underline"
                 @click="update(currency)">
                 {{ $t('Enable') }}
               </span>
 
               <!-- disable -->
-              <span
-                v-else
-                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
-                @click="update(currency)">
+              <span v-else class="me-4 inline cursor-pointer text-blue-500 hover:underline" @click="update(currency)">
                 {{ $t('Disable') }}
               </span>
             </div>
diff --git a/resources/js/Pages/Settings/Personalize/Genders/Index.vue b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
index a86404299..bb77ef148 100644
--- a/resources/js/Pages/Settings/Personalize/Genders/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 🚻 </span>
+            <span class="me-1"> 🚻 </span>
             {{ $t('All the genders') }}
           </h3>
           <pretty-button
@@ -81,7 +81,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createGenderModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGenderModalShown = false" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -100,7 +100,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateGenderModal(gender)">
+                <li class="me-4 inline cursor-pointer" @click="updateGenderModal(gender)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(gender)">
@@ -131,10 +131,7 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
-                  @click.prevent="renameGenderModalShownId = 0" />
+                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renameGenderModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
index 232a2fd73..9d32cc2ce 100644
--- a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 🎁 </span>
+            <span class="me-1"> 🎁 </span>
             {{ $t('All the gift occasions') }}
           </h3>
           <pretty-button
@@ -81,10 +81,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createGiftOccasionModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGiftOccasionModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -104,9 +101,9 @@
                 v-if="editGiftOccasionId != element.id"
                 class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- icon to move position -->
-                <div class="flex ltr:mr-2 rtl:ml-2">
+                <div class="me-2 flex">
                   <svg
-                    class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                    class="handle me-2 cursor-move"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -131,9 +128,7 @@
                   <li class="inline cursor-pointer" @click="renameGiftOccasionModal(element)">
                     <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                   </li>
-                  <li
-                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
-                    @click="destroy(element)">
+                  <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                     {{ $t('Delete') }}
                   </li>
                 </ul>
@@ -160,10 +155,7 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span
-                    :text="$t('Cancel')"
-                    :classes="'ltr:mr-3 rtl:ml-3'"
-                    @click.prevent="editGiftOccasionId = 0" />
+                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editGiftOccasionId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
index 41186cc11..64d87b847 100644
--- a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 🎁 </span>
+            <span class="me-1"> 🎁 </span>
             {{ $t('All the gift states') }}
           </h3>
           <pretty-button
@@ -81,10 +81,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createGiftStateModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGiftStateModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -102,9 +99,9 @@
                 <div
                   class="item-list mb-2 flex items-center justify-between rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                   <!-- icon to move position -->
-                  <div class="flex ltr:mr-2 rtl:ml-2">
+                  <div class="me-2 flex">
                     <svg
-                      class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                      class="handle me-2 cursor-move"
                       width="24"
                       height="24"
                       viewBox="0 0 24 24"
@@ -129,15 +126,13 @@
                     <li class="inline cursor-pointer" @click="renameGiftStateModal(element)">
                       <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                     </li>
-                    <li
-                      class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
-                      @click="destroy(element)">
+                    <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                       {{ $t('Delete') }}
                     </li>
                   </ul>
                 </div>
 
-                <div class="state-list-icon mb-3 ltr:ml-3 rtl:mr-3">👇</div>
+                <div class="state-list-icon mb-3 ms-3">👇</div>
               </div>
 
               <form
@@ -161,10 +156,7 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span
-                    :text="$t('Cancel')"
-                    :classes="'ltr:mr-3 rtl:ml-3'"
-                    @click.prevent="editGiftStateId = 0" />
+                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editGiftStateId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
index a6efbc835..d52f842ed 100644
--- a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 👥 </span>
+            <span class="me-1"> 👥 </span>
             {{ $t('All the group types') }}
           </h3>
           <pretty-button
@@ -107,10 +107,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createGroupTypeModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGroupTypeModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -129,9 +126,9 @@
                   class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                   <div class="mb-3 flex items-center justify-between">
                     <!-- icon to move position -->
-                    <div class="flex ltr:mr-2 rtl:ml-2">
+                    <div class="me-2 flex">
                       <svg
-                        class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                        class="handle me-2 cursor-move"
                         width="24"
                         height="24"
                         viewBox="0 0 24 24"
@@ -156,16 +153,14 @@
                       <li class="inline cursor-pointer" @click="renameGroupTypeModal(element)">
                         <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                       </li>
-                      <li
-                        class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
-                        @click="destroy(element)">
+                      <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                         {{ $t('Delete') }}
                       </li>
                     </ul>
                   </div>
 
                   <!-- available roles -->
-                  <div class="ltr:ml-8 rtl:mr-8">
+                  <div class="ms-8">
                     <p class="mb-1 text-sm text-gray-500">{{ $t('Roles:') }}</p>
 
                     <draggable
@@ -180,9 +175,9 @@
                             class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                             <div class="flex items-center justify-between">
                               <!-- icon to move position -->
-                              <div class="flex ltr:mr-2 rtl:ml-2">
+                              <div class="me-2 flex">
                                 <svg
-                                  class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                                  class="handle me-2 cursor-move"
                                   width="24"
                                   height="24"
                                   viewBox="0 0 24 24"
@@ -208,7 +203,7 @@
                                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                                 </li>
                                 <li
-                                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                                  class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                                   @click="destroyRole(element)">
                                   {{ $t('Delete') }}
                                 </li>
@@ -239,10 +234,7 @@
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span
-                              :text="$t('Cancel')"
-                              :classes="'ltr:mr-3 rtl:ml-3'"
-                              @click="roleGroupTypeId = 0" />
+                            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="roleGroupTypeId = 0" />
                             <pretty-button
                               :text="$t('Rename')"
                               :state="loadingState"
@@ -285,10 +277,7 @@
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span
-                          :text="$t('Cancel')"
-                          :classes="'ltr:mr-3 rtl:ml-3'"
-                          @click="createRoleModalShown = false" />
+                        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createRoleModalShown = false" />
                         <pretty-button
                           :text="$t('Save')"
                           :state="loadingState"
@@ -337,10 +326,7 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span
-                    :text="$t('Cancel')"
-                    :classes="'ltr:mr-3 rtl:ml-3'"
-                    @click.prevent="editGroupTypeId = 0" />
+                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editGroupTypeId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/Index.vue b/resources/js/Pages/Settings/Personalize/Index.vue
index 0db5fd80e..08abe6715 100644
--- a/resources/js/Pages/Settings/Personalize/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -39,91 +39,91 @@
         <div class="rounded-lg border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
           <ul>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">📐</span>
+              <span class="me-2">📐</span>
               <inertia-link :href="data.url.manage_templates" class="text-blue-500 hover:underline">
                 {{ $t('Manage templates') }}
               </inertia-link>
             </li>
             <!-- <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">🥪</span>
+              <span class="me-2">🥪</span>
               <inertia-link :href="data.url.manage_modules" class="text-blue-500 hover:underline">
                 {{ $t('Manage modules') }}
               </inertia-link>
             </li> -->
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">👥</span>
+              <span class="me-2">👥</span>
               <inertia-link :href="data.url.manage_relationships" class="text-blue-500 hover:underline">
                 {{ $t('Manage relationship types') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">👥</span>
+              <span class="me-2">👥</span>
               <inertia-link :href="data.url.manage_group_types" class="text-blue-500 hover:underline">
                 {{ $t('Manage group types') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">👩‍🔬</span>
+              <span class="me-2">👩‍🔬</span>
               <inertia-link :href="data.url.manage_pronouns" class="text-blue-500 hover:underline">
                 {{ $t('Manage pronouns') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">🚻</span>
+              <span class="me-2">🚻</span>
               <inertia-link :href="data.url.manage_genders" class="text-blue-500 hover:underline">
                 {{ $t('Manage genders') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">🏖</span>
+              <span class="me-2">🏖</span>
               <inertia-link :href="data.url.manage_address_types" class="text-blue-500 hover:underline">
                 {{ $t('Manage address types') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">☎️</span>
+              <span class="me-2">☎️</span>
               <inertia-link :href="data.url.manage_contact_information_types" class="text-blue-500 hover:underline">
                 {{ $t('Manage contact information types') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">📲</span>
+              <span class="me-2">📲</span>
               <inertia-link :href="data.url.manage_call_reasons" class="text-blue-500 hover:underline">
                 {{ $t('Manage call reasons') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">🐱</span>
+              <span class="me-2">🐱</span>
               <inertia-link :href="data.url.manage_pet_categories" class="text-blue-500 hover:underline">
                 {{ $t('Manage pet categories') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">🎁</span>
+              <span class="me-2">🎁</span>
               <inertia-link :href="data.url.manage_gift_occasions" class="text-blue-500 hover:underline">
                 {{ $t('Manage gift occasions') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">🎁</span>
+              <span class="me-2">🎁</span>
               <inertia-link :href="data.url.manage_gift_states" class="text-blue-500 hover:underline">
                 {{ $t('Manage gift states') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">📮</span>
+              <span class="me-2">📮</span>
               <inertia-link :href="data.url.manage_post_templates" class="text-blue-500 hover:underline">
                 {{ $t('Manage post templates') }}
               </inertia-link>
             </li>
             <li class="mb-2 flex">
-              <span class="ltr:mr-2 rtl:ml-2">💵</span>
+              <span class="me-2">💵</span>
               <inertia-link :href="data.url.manage_currencies" class="text-blue-500 hover:underline">
                 {{ $t('Manage currencies') }}
               </inertia-link>
             </li>
             <li class="flex">
-              <span class="ltr:mr-2 rtl:ml-2">⛪</span>
+              <span class="me-2">⛪</span>
               <inertia-link :href="data.url.manage_religions" class="text-blue-500 hover:underline">
                 {{ $t('Manage religions') }}
               </inertia-link>
diff --git a/resources/js/Pages/Settings/Personalize/Modules/Index.vue b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
index 2d8d65106..c4a53f58b 100644
--- a/resources/js/Pages/Settings/Personalize/Modules/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -87,7 +87,7 @@
             <div>
               <!-- search a module -->
               <div
-                class="module-list rounded-t-md border-t border-gray-200 px-3 py-2 hover:bg-slate-50 ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+                class="module-list rounded-t-md border-s border-t border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <text-input
                   v-model="form.search"
                   :type="'text'"
@@ -144,9 +144,9 @@
                   <!-- row options -->
                   <div class="flex justify-between border-b border-gray-200 px-3 py-1 text-xs dark:border-gray-700">
                     <div>
-                      <div class="relative inline cursor-pointer ltr:mr-3 rtl:ml-3">
+                      <div class="relative me-3 inline cursor-pointer">
                         <svg
-                          class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
+                          class="me-1 inline h-3 w-3"
                           viewBox="0 0 24 24"
                           fill="none"
                           xmlns="http://www.w3.org/2000/svg">
@@ -162,9 +162,9 @@
                         <span>Add a field to the left</span>
                       </div>
 
-                      <div class="relative inline cursor-pointer ltr:mr-2 rtl:ml-2" @click="addFieldToRight(row)">
+                      <div class="relative me-2 inline cursor-pointer" @click="addFieldToRight(row)">
                         <svg
-                          class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
+                          class="me-1 inline h-3 w-3"
                           viewBox="0 0 24 24"
                           fill="none"
                           xmlns="http://www.w3.org/2000/svg">
@@ -183,7 +183,7 @@
 
                     <div class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroyRow(row)">
                       <svg
-                        class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
+                        class="me-1 inline h-3 w-3"
                         viewBox="0 0 24 24"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg">
@@ -205,13 +205,13 @@
                     <div
                       v-for="field in row.fields"
                       :key="field.id"
-                      class="border-gray-200 ltr:border-r last:ltr:border-r-0 rtl:border-l last:rtl:border-l-0 dark:border-gray-700">
+                      class="border-e border-gray-200 last:border-e-0 dark:border-gray-700">
                       <!-- row options -->
                       <div class="flex justify-between border-b border-gray-200 px-3 py-1 text-xs dark:border-gray-700">
                         <div>
-                          <div class="relative inline cursor-pointer ltr:mr-3 rtl:ml-3">
+                          <div class="relative me-3 inline cursor-pointer">
                             <svg
-                              class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
+                              class="me-1 inline h-3 w-3"
                               viewBox="0 0 24 24"
                               fill="none"
                               xmlns="http://www.w3.org/2000/svg">
@@ -230,7 +230,7 @@
 
                         <div class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroyRow(row)">
                           <svg
-                            class="inline h-3 w-3 ltr:mr-1 rtl:ml-1"
+                            class="me-1 inline h-3 w-3"
                             viewBox="0 0 24 24"
                             fill="none"
                             xmlns="http://www.w3.org/2000/svg">
@@ -265,7 +265,7 @@
 
             <!-- actions -->
             <div class="flex justify-between p-5">
-              <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+              <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
               <pretty-button
                 :href="'data.url.vault.create'"
                 :text="$t('Add')"
diff --git a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
index 4845ba62e..a108765a3 100644
--- a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 🐱 </span>
+            <span class="me-1"> 🐱 </span>
             {{ $t('All the pet categories') }}
           </h3>
           <pretty-button
@@ -81,10 +81,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createPetCategoryModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createPetCategoryModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -105,7 +102,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updatePetCategoryModal(petCategory)">
+                <li class="me-4 inline cursor-pointer" @click="updatePetCategoryModal(petCategory)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(petCategory)">
@@ -138,7 +135,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  :classes="'me-3'"
                   @click.prevent="renamePetCategoryModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
diff --git a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
index e4a008d94..6e90b2ccc 100644
--- a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 📮 </span>
+            <span class="me-1"> 📮 </span>
             {{ $t('Post templates') }}
           </h3>
           <pretty-button
@@ -107,10 +107,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createPostTemplateModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createPostTemplateModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -129,9 +126,9 @@
                   class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                   <div class="mb-3 flex items-center justify-between">
                     <!-- icon to move position -->
-                    <div class="flex ltr:mr-2 rtl:ml-2">
+                    <div class="me-2 flex">
                       <svg
-                        class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                        class="handle me-2 cursor-move"
                         width="24"
                         height="24"
                         viewBox="0 0 24 24"
@@ -158,7 +155,7 @@
                       </li>
                       <li
                         v-if="element.can_be_deleted"
-                        class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                        class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                         @click="destroy(element)">
                         {{ $t('Delete') }}
                       </li>
@@ -166,7 +163,7 @@
                   </div>
 
                   <!-- available sections -->
-                  <div class="ltr:ml-8 rtl:mr-8">
+                  <div class="ms-8">
                     <p class="mb-1 text-sm text-gray-500">Sections:</p>
 
                     <draggable
@@ -181,9 +178,9 @@
                             class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                             <div class="flex items-center justify-between">
                               <!-- icon to move position -->
-                              <div class="flex ltr:mr-2 rtl:ml-2">
+                              <div class="me-2 flex">
                                 <svg
-                                  class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                                  class="handle me-2 cursor-move"
                                   width="24"
                                   height="24"
                                   viewBox="0 0 24 24"
@@ -212,7 +209,7 @@
                                 </li>
                                 <li
                                   v-if="element.can_be_deleted"
-                                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                                  class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                                   @click="destroySection(element)">
                                   {{ $t('Delete') }}
                                 </li>
@@ -243,10 +240,7 @@
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span
-                              :text="$t('Cancel')"
-                              :classes="'ltr:mr-3 rtl:ml-3'"
-                              @click="postTemplateId = 0" />
+                            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="postTemplateId = 0" />
                             <pretty-button
                               :text="$t('Rename')"
                               :state="loadingState"
@@ -291,10 +285,7 @@
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span
-                          :text="$t('Cancel')"
-                          :classes="'ltr:mr-3 rtl:ml-3'"
-                          @click="createSectionModalShown = false" />
+                        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createSectionModalShown = false" />
                         <pretty-button
                           :text="$t('Save')"
                           :state="loadingState"
@@ -346,10 +337,7 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span
-                    :text="$t('Cancel')"
-                    :classes="'ltr:mr-3 rtl:ml-3'"
-                    @click.prevent="editPostTemplateId = 0" />
+                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editPostTemplateId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
index 5c30695b1..1595e2f97 100644
--- a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 🚻 </span>
+            <span class="me-1"> 🚻 </span>
             {{ $t('All the pronouns') }}
           </h3>
           <pretty-button
@@ -81,7 +81,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createPronounModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createPronounModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -100,7 +100,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updatePronounModal(pronoun)">
+                <li class="me-4 inline cursor-pointer" @click="updatePronounModal(pronoun)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(pronoun)">
@@ -131,10 +131,7 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
-                  @click.prevent="renamePronounModalShownId = 0" />
+                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renamePronounModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
index 75670bea1..e96cf085a 100644
--- a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -51,7 +51,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 🥸 </span>
+            <span class="me-1"> 🥸 </span>
             {{ $t('All the relationship types') }}
           </h3>
           <pretty-button
@@ -122,7 +122,7 @@
           <div class="flex justify-between p-5">
             <pretty-span
               :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
+              :classes="'me-3'"
               @click="createRelationshipGroupTypeModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
@@ -146,7 +146,7 @@
                 </li>
                 <li
                   v-if="groupType.can_be_deleted"
-                  class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                  class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                   @click="destroyGroupType(groupType)">
                   {{ $t('Delete') }}
                 </li>
@@ -177,7 +177,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  :classes="'me-3'"
                   @click.prevent="renameRelationshipGroupTypeModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
@@ -218,7 +218,7 @@
                   </li>
                   <li
                     v-if="type.can_be_deleted"
-                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                    class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                     @click="destroyRelationshipType(groupType, type)">
                     {{ $t('Delete') }}
                   </li>
@@ -263,7 +263,7 @@
                 <div class="flex justify-between p-5">
                   <pretty-span
                     :text="$t('Cancel')"
-                    :classes="'ltr:mr-3 rtl:ml-3'"
+                    :classes="'me-3'"
                     @click.prevent="renameRelationshipTypeModalId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
@@ -323,7 +323,7 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
+                  :classes="'me-3'"
                   @click.prevent="createRelationshipTypeModalId = 0" />
                 <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
               </div>
diff --git a/resources/js/Pages/Settings/Personalize/Religions/Index.vue b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
index eddeb315b..fa83903cc 100644
--- a/resources/js/Pages/Settings/Personalize/Religions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> ⛪ </span>
+            <span class="me-1"> ⛪ </span>
             {{ $t('All the religions') }}
           </h3>
           <pretty-button
@@ -81,10 +81,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createReligionModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createReligionModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -104,9 +101,9 @@
                 v-if="editReligionId != element.id"
                 class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- icon to move position -->
-                <div class="flex ltr:mr-2 rtl:ml-2">
+                <div class="me-2 flex">
                   <svg
-                    class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                    class="handle me-2 cursor-move"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -131,9 +128,7 @@
                   <li class="inline cursor-pointer" @click="renameReligionModal(element)">
                     <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                   </li>
-                  <li
-                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
-                    @click="destroy(element)">
+                  <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                     {{ $t('Delete') }}
                   </li>
                 </ul>
@@ -160,10 +155,7 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span
-                    :text="$t('Cancel')"
-                    :classes="'ltr:mr-3 rtl:ml-3'"
-                    @click.prevent="editReligionId = 0" />
+                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editReligionId = 0" />
                   <pretty-button
                     :text="$t('Rename')"
                     :state="loadingState"
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Index.vue b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
index 6d0d9d7fb..f83cc7b93 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -51,7 +51,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 📐 </span>
+            <span class="me-1"> 📐 </span>
             {{ $t('All the templates') }}
           </h3>
           <pretty-button
@@ -116,10 +116,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createTemplateModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createTemplateModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -140,7 +137,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="showUpdateTemplateModal(template)">
+                <li class="me-4 inline cursor-pointer" @click="showUpdateTemplateModal(template)">
                   <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(template)">
@@ -171,10 +168,7 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
-                  @click.prevent="renameTemplateModalShownId = 0" />
+                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renameTemplateModalShownId = 0" />
                 <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
index 239b52fb4..574724407 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
@@ -37,7 +37,7 @@
           >{{ $t('Add') }}</span
         >
         <span v-if="module.already_used" class="text-xs"
-          ><span class="ltr:mr-1 rtl:ml-1">✅</span> {{ $t('Already used on this page') }}</span
+          ><span class="me-1">✅</span> {{ $t('Already used on this page') }}</span
         >
       </li>
     </ul>
@@ -56,7 +56,7 @@
           <div
             class="item-list flex items-center border-b border-gray-200 py-2 pl-2 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- anchor to move module -->
-            <div class="ltr:mr-2 rtl:ml-2">
+            <div class="me-2">
               <svg
                 class="handle cursor-move"
                 width="24"
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
index 13a6b9e24..8d67c4a8b 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -45,7 +45,7 @@
           class="mb-2 flex items-center rounded-lg border border-gray-200 bg-white py-2 pl-2 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800"
           @click="selectPage(element)">
           <!-- icon to move position -->
-          <div class="ltr:mr-2 rtl:ml-2">
+          <div class="me-2">
             <svg
               class="handle cursor-move"
               width="24"
@@ -72,7 +72,7 @@
             </div>
 
             <ul class="text-xs">
-              <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="renamePageModal(element)">
+              <li class="me-4 inline cursor-pointer" @click="renamePageModal(element)">
                 <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
               </li>
               <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
@@ -104,10 +104,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click.prevent="renamePageModalShownId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renamePageModalShownId = 0" />
             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -136,7 +133,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createPageModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createPageModalShown = false" />
         <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Show.vue b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
index fea66f834..2a49035c0 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Show.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.personalize" class="text-blue-500 hover:underline">
                 {{ $t('Personalize your account') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -38,12 +38,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.templates" class="text-blue-500 hover:underline">
                 {{ $t('Templates') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Settings/Preferences/Index.vue b/resources/js/Pages/Settings/Preferences/Index.vue
index da9fefd7a..11e52edd9 100644
--- a/resources/js/Pages/Settings/Preferences/Index.vue
+++ b/resources/js/Pages/Settings/Preferences/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
index d4a62c774..2bc22aec0 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🗓 </span>
-        <span class="ltr:mr-2 rtl:ml-2">
+        <span class="me-1"> 🗓 </span>
+        <span class="me-2">
           {{ $t('How should we display dates') }}
         </span>
 
@@ -61,7 +61,7 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             :for="'input' + date.id"
-            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+            class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ date.value }}
           </label>
         </div>
@@ -69,7 +69,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
index e52b33277..16240ccff 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> ✈️ </span>
-        <span class="ltr:mr-2 rtl:ml-2">
+        <span class="me-1"> ✈️ </span>
+        <span class="me-2">
           {{ $t('How should we display distance values') }}
         </span>
 
@@ -41,9 +41,7 @@
             name="distance-format"
             type="radio"
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-          <label
-            :for="d"
-            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+          <label :for="d" class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ localeDistance(d) }}
           </label>
         </div>
@@ -51,7 +49,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue b/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
index ed96f8dc4..1fac73044 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> ⁉️ </span>
-        <span class="ltr:mr-2 rtl:ml-2">
+        <span class="me-1"> ⁉️ </span>
+        <span class="me-2">
           {{ $t('Help') }}
         </span>
 
@@ -17,7 +17,7 @@
         <input id="default-toggle" v-model="form.checked" type="checkbox" class="peer hidden" @click="submit" />
         <div
           class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-        <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+        <span class="ms-3 dark:text-gray-300">
           {{ $t('Display help links in the interface to help you (English only)') }}
         </span>
       </label>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Locale.vue b/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
index 075a14f57..312c7d15f 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
@@ -63,8 +63,8 @@ const submit = () => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🗓 </span>
-        <span class="ltr:mr-2 rtl:ml-2">
+        <span class="me-1"> 🗓 </span>
+        <span class="me-2">
           {{ $t('Language of the application') }}
         </span>
 
@@ -94,7 +94,7 @@ const submit = () => {
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Maps.vue b/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
index e414cf86c..fd211422e 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🗺️ </span>
-        <span class="ltr:mr-2 rtl:ml-2">
+        <span class="me-1"> 🗺️ </span>
+        <span class="me-2">
           {{ $t('What should we use to display maps?') }}
         </span>
 
@@ -36,7 +36,7 @@
             :value="mapType.value"
             name="date-format"
             type="radio"
-            class="relative h-4 w-4 border-gray-300 text-sky-500 ltr:mr-3 rtl:ml-3 dark:border-gray-700" />
+            class="relative me-3 h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <div>
             <label
               :for="'input' + mapType.id"
@@ -52,7 +52,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
index 4c58848bc..05e22b3e7 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 👉 </span>
-        <span class="ltr:mr-2 rtl:ml-2">
+        <span class="me-1"> 👉 </span>
+        <span class="me-2">
           {{ $t('Customize how contacts should be displayed') }}
         </span>
 
@@ -68,9 +68,9 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             for="first_name_last_name"
-            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+            class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $t('First name Last name') }}
-            <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4"> James Bond </span>
+            <span class="ms-4 font-normal text-gray-500"> James Bond </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -83,10 +83,10 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             for="last_name_first_name"
-            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+            class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $t('Last name First name') }}
 
-            <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4"> Bond James </span>
+            <span class="ms-4 font-normal text-gray-500"> Bond James </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -99,9 +99,9 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             for="first_name_last_name_nickname"
-            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+            class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $t('First name Last name (nickname)') }}
-            <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4"> James Bond (007) </span>
+            <span class="ms-4 font-normal text-gray-500"> James Bond (007) </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -112,11 +112,9 @@
             name="name-order"
             type="radio"
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-          <label
-            for="nickname"
-            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+          <label for="nickname" class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $t('nickname') }}
-            <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4"> 007 </span>
+            <span class="ms-4 font-normal text-gray-500"> 007 </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -126,13 +124,11 @@
             type="radio"
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700"
             @click="focusNameOrder" />
-          <label
-            for="custom"
-            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+          <label for="custom" class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $t('Custom name order') }}
           </label>
         </div>
-        <div class="ltr:ml-8 rtl:mr-8">
+        <div class="ms-8">
           <text-input
             :ref="'nameOrder'"
             v-model="form.nameOrder"
@@ -145,7 +141,7 @@
             :maxlength="255" />
 
           <p class="mb-4 text-sm">
-            <span class="ltr:mr-1 rtl:ml-1">{{
+            <span class="me-1">{{
               $t(
                 'Please read our documentation to know more about this feature, and which variables you have access to',
               )
@@ -163,7 +159,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
index bcb072f1f..60b47b1de 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 💵 </span>
-        <span class="ltr:mr-2 rtl:ml-2">
+        <span class="me-1"> 💵 </span>
+        <span class="me-2">
           {{ $t('How should we display numerical values') }}
         </span>
 
@@ -39,7 +39,7 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             :for="'input' + numberFormat.id"
-            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+            class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ numberFormat.value }}
           </label>
         </div>
@@ -47,7 +47,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
index 215f14869..d09a56b68 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 flex font-semibold sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🗓 </span>
-        <span class="ltr:mr-2 rtl:ml-2">
+        <span class="me-1"> 🗓 </span>
+        <span class="me-2">
           {{ $t('Timezone') }}
         </span>
 
@@ -52,7 +52,7 @@
         <select
           v-model="form.timezone"
           name="timezone"
-          class="rounded-md border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 sm:text-sm">
+          class="rounded-md border-gray-300 bg-white px-3 py-2 pe-5 ps-2 shadow-sm focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ltr:bg-[right_3px_center] rtl:bg-[left_3px_center] dark:bg-gray-900 sm:text-sm">
           <optgroup label="General">
             <option value="GMT">GMT timezone</option>
             <option value="UTC">UTC timezone</option>
@@ -501,7 +501,7 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
+        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -570,17 +570,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-select {
-  background-position: right 3px center;
-}
-.ltr select {
-  padding-left: 8px;
-  padding-right: 20px;
-}
-.rtl select {
-  padding-right: 8px;
-  padding-left: 20px;
-}
-</style>
diff --git a/resources/js/Pages/Settings/Storage/Index.vue b/resources/js/Pages/Settings/Storage/Index.vue
index ac2b32ced..23b69af75 100644
--- a/resources/js/Pages/Settings/Storage/Index.vue
+++ b/resources/js/Pages/Settings/Storage/Index.vue
@@ -8,10 +8,10 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="ltr:mr-2 rtl:ml-2 inline text-gray-600 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="ltr:mr-2 rtl:ml-2 inline">
+            <li class="me-2 inline">
               <inertia-link
                 :href="data.url.settings.index"
                 class="text-blue-500 hover:underline"
@@ -21,7 +21,7 @@
                 }}
               </inertia-link>
             </li>
-            <li class="relative ltr:mr-2 rtl:ml-2 inline">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -50,7 +50,7 @@
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="ltr:mr-1 rtl:ml-1">
+            <span class="me-1">
               📸
             </span>
             {{ $t('Storage') }}
@@ -60,7 +60,7 @@
         <!-- stats -->
         <div class="border border-gray-200 dark:border-gray-700 rounded-lg grid grid-cols-2 mb-8">
           <!-- account limit -->
-          <div class="flex justify-between p-3 ltr:border-r rtl:border-l border-gray-200 dark:border-gray-700">
+          <div class="flex justify-between p-3 border-s border-gray-200 dark:border-gray-700">
             <p>{{ $t('Your account limits') }}</p>
             <p class="font-bold">
               {{ data.account_limit }}
@@ -78,7 +78,7 @@
 
         <!-- detail breakdown -->
         <p class="mb-2">
-          <span class="ltr:mr-1 rtl:ml-1">🔽</span> {{ $t('Breakdown of the current usage') }}
+          <span class="me-1">🔽</span> {{ $t('Breakdown of the current usage') }}
         </p>
         <ul class="user-list mb-6 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
           <li class="border-b border-gray-200 dark:border-gray-700 hover:bg-slate-50 hover:dark:bg-slate-800 dark:bg-slate-900 flex justify-between p-3">
diff --git a/resources/js/Pages/Settings/Users/Create.vue b/resources/js/Pages/Settings/Users/Create.vue
index 60eb44951..d118ef4dd 100644
--- a/resources/js/Pages/Settings/Users/Create.vue
+++ b/resources/js/Pages/Settings/Users/Create.vue
@@ -6,15 +6,15 @@ k
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -24,12 +24,12 @@ k
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Users') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -100,7 +100,7 @@ k
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="viewer"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                  class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Regular user') }}
                 </label>
               </div>
@@ -116,9 +116,9 @@ k
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="manager"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                  class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Administrator') }}
-                  <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
+                  <span class="ms-4 font-normal text-gray-500">
                     {{
                       $t(
                         'Can do everything, including adding or removing other users, managing billing and closing the account.',
@@ -131,7 +131,7 @@ k
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
             <pretty-button
               :text="$t('Send invitation')"
               :state="loadingState"
diff --git a/resources/js/Pages/Settings/Users/Index.vue b/resources/js/Pages/Settings/Users/Index.vue
index 48ff9364d..13bd84ddb 100644
--- a/resources/js/Pages/Settings/Users/Index.vue
+++ b/resources/js/Pages/Settings/Users/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.settings.index" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -36,7 +36,7 @@
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="ltr:mr-1 rtl:ml-1"> 🥸 </span>
+            <span class="me-1"> 🥸 </span>
             {{ $t('All users in this account') }}
           </h3>
           <pretty-link :href="data.url.users.create" :text="$t('Invite a new user')" :icon="'plus'" />
@@ -58,7 +58,7 @@
                   <!-- is administrator -->
                   <span
                     v-if="user.is_account_administrator"
-                    class="rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500 ltr:ml-2 rtl:mr-2"
+                    class="ms-2 rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500"
                     >{{ $t('Administrator') }}</span
                   >
                 </span>
@@ -91,7 +91,7 @@
                   <!-- is administrator -->
                   <span
                     v-if="user.is_account_administrator"
-                    class="rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500 ltr:ml-2 rtl:mr-2"
+                    class="ms-2 rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500"
                     >{{ $t('Administrator') }}</span
                   >
                 </span>
@@ -101,7 +101,7 @@
 
               <!-- actions -->
               <ul v-if="!user.is_logged_user" class="text-sm">
-                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="showEditModal(user)">
+                <li class="me-4 inline cursor-pointer" @click="showEditModal(user)">
                   <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(user)">
@@ -128,7 +128,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="viewer"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                    class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('Regular user') }}
                   </label>
                 </div>
@@ -144,9 +144,9 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="manager"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                    class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('Administrator') }}
-                    <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
+                    <span class="ms-4 font-normal text-gray-500">
                       {{
                         $t(
                           'Can do everything, including adding or removing other users, managing billing and closing the account.',
@@ -158,10 +158,7 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'ltr:mr-3 rtl:ml-3'"
-                  @click.prevent="editModalshownId = 0" />
+                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editModalshownId = 0" />
                 <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Vault/Calendar/Index.vue b/resources/js/Pages/Vault/Calendar/Index.vue
index 49c4aaa87..5da8cc5a6 100644
--- a/resources/js/Pages/Vault/Calendar/Index.vue
+++ b/resources/js/Pages/Vault/Calendar/Index.vue
@@ -41,14 +41,14 @@ const get = (day) => {
                 <div class="inline-flex rounded-md shadow-sm">
                   <inertia-link
                     :href="data.url.previous"
-                    class="inline-flex items-center border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-l-lg rtl:rounded-r-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                    class="inline-flex items-center rounded-s-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="h-4 w-4 ltr:mr-2 rtl:ml-2">
+                      class="me-2 h-4 w-4">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                     </svg>
 
@@ -57,7 +57,7 @@ const get = (day) => {
 
                   <inertia-link
                     :href="data.url.next"
-                    class="inline-flex items-center border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-r-md ltr:border-r rtl:rounded-l-md rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                    class="inline-flex items-center rounded-e-md border-b border-s border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                     {{ data.next_month }}
 
                     <svg
@@ -66,7 +66,7 @@ const get = (day) => {
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="h-4 w-4 ltr:ml-2 rtl:mr-2">
+                      class="ms-2 h-4 w-4">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                     </svg>
                   </inertia-link>
@@ -75,24 +75,23 @@ const get = (day) => {
             </div>
 
             <!-- days -->
-            <div
-              class="grid grid-cols-7 rounded-t-lg border-t last:border-b ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700">
-              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+            <div class="grid grid-cols-7 rounded-t-lg border-s border-t last:border-b dark:border-gray-700">
+              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Monday') }}
               </div>
-              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Tuesday') }}
               </div>
-              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Wednesday') }}
               </div>
-              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Thursday') }}
               </div>
-              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Friday') }}
               </div>
-              <div class="p-2 text-center text-xs ltr:border-r rtl:border-l dark:border-gray-700">
+              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Saturday') }}
               </div>
               <div class="p-2 text-center text-xs">{{ $t('Sunday') }}</div>
@@ -102,12 +101,12 @@ const get = (day) => {
             <div
               v-for="week in data.weeks"
               :key="week.id"
-              class="grid grid-cols-7 border-t last:rounded-b-lg last:border-b ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700">
+              class="grid grid-cols-7 border-s border-t last:rounded-b-lg last:border-b dark:border-gray-700">
               <div
                 v-for="day in week"
                 :key="day.id"
                 @click="get(day)"
-                class="h-32 p-2 last:border-r-0 ltr:border-r rtl:border-l dark:border-gray-700"
+                class="h-32 border-s p-2 last:border-r-0 dark:border-gray-700"
                 :class="day.is_in_month ? 'cursor-pointer' : 'bg-slate-50 dark:bg-slate-900'">
                 <!-- date of the day -->
                 <div class="flex items-center justify-between">
@@ -122,7 +121,7 @@ const get = (day) => {
                     <div v-for="mood in day.mood_events" :key="mood.id">
                       <a-tooltip placement="topLeft" :title="mood.mood_tracking_parameter.label" arrow-point-at-center>
                         <div
-                          class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2"
+                          class="me-2 inline-block h-4 w-4 rounded-full"
                           :class="mood.mood_tracking_parameter.hex_color" />
                       </a-tooltip>
                     </div>
@@ -137,7 +136,7 @@ const get = (day) => {
                   <div v-for="date in day.important_dates" :key="date.id">
                     <contact-card
                       :contact="date.contact"
-                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
+                      :avatarClasses="'h-5 w-5 rounded-full me-2'"
                       :displayName="false" />
                   </div>
                 </div>
@@ -168,7 +167,7 @@ const get = (day) => {
                   <!-- mood tracking parameter -->
                   <div class="flex items-center">
                     <div
-                      class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2"
+                      class="me-2 inline-block h-4 w-4 rounded-full"
                       :class="mood.mood_tracking_parameter.hex_color" />
                     <span>{{ mood.mood_tracking_parameter.label }}</span>
                   </div>
@@ -185,7 +184,7 @@ const get = (day) => {
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor"
-                        class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
+                        class="me-1 h-4 w-4 text-gray-400">
                         <path
                           stroke-linecap="round"
                           stroke-linejoin="round"
@@ -223,7 +222,7 @@ const get = (day) => {
                   <span
                     ><contact-card
                       :contact="importantDate.contact"
-                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
+                      :avatarClasses="'h-5 w-5 rounded-full me-2'"
                       :displayName="false"
                   /></span>
                 </li>
diff --git a/resources/js/Pages/Vault/Companies/Index.vue b/resources/js/Pages/Vault/Companies/Index.vue
index b27716c19..d116b993c 100644
--- a/resources/js/Pages/Vault/Companies/Index.vue
+++ b/resources/js/Pages/Vault/Companies/Index.vue
@@ -13,7 +13,7 @@ defineProps({
     <main class="relative sm:mt-24">
       <div class="mx-auto max-w-4xl px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <h3 class="mb-6 font-semibold">
-          <span class="ltr:mr-1 rtl:ml-1"> 🏭 </span>
+          <span class="me-1"> 🏭 </span>
           {{ $t('All the companies') }}
         </h3>
 
diff --git a/resources/js/Pages/Vault/Contact/Blank.vue b/resources/js/Pages/Vault/Contact/Blank.vue
index 182100de0..3c719bfa8 100644
--- a/resources/js/Pages/Vault/Contact/Blank.vue
+++ b/resources/js/Pages/Vault/Contact/Blank.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Contact/Create.vue b/resources/js/Pages/Vault/Contact/Create.vue
index 36bc2e42e..cab7aa540 100644
--- a/resources/js/Pages/Vault/Contact/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Create.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -156,49 +156,49 @@
             <div class="flex flex-wrap text-xs">
               <span
                 v-if="!showMiddleNameField"
-                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayMiddleNameField">
                 {{ $t('+ middle name') }}
               </span>
               <span
                 v-if="!showPrefixField"
-                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayPrefixField">
                 {{ $t('+ prefix') }}
               </span>
               <span
                 v-if="!showSuffixField"
-                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displaySuffixField">
                 {{ $t('+ suffix') }}
               </span>
               <span
                 v-if="!showNicknameField"
-                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayNicknameField">
                 {{ $t('+ nickname') }}
               </span>
               <span
                 v-if="!showMaidenNameField"
-                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayMaidenNameField">
                 {{ $t('+ maiden name') }}
               </span>
               <span
                 v-if="data.genders.length > 0 && !showGenderField"
-                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayGenderField">
                 {{ $t('+ gender') }}
               </span>
               <span
                 v-if="data.pronouns.length > 0 && !showPronounField"
-                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayPronounField">
                 {{ $t('+ pronoun') }}
               </span>
               <span
                 v-if="data.templates.length > 0 && !showTemplateField"
-                class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
+                class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900 dark:text-white"
                 @click="displayTemplateField">
                 {{ $t('+ change template') }}
               </span>
@@ -207,7 +207,7 @@
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Add')"
diff --git a/resources/js/Pages/Vault/Contact/Goals/Show.vue b/resources/js/Pages/Vault/Contact/Goals/Show.vue
index 8805f311d..8424c80c6 100644
--- a/resources/js/Pages/Vault/Contact/Goals/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Goals/Show.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.contact" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -83,27 +83,27 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editMode = false" />
+                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
                 <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
 
             <!-- stats -->
             <div class="mb-6 flex justify-between rounded border border-gray-200 p-3 dark:border-gray-700">
-              <div class="flex items-center ltr:mr-6 rtl:ml-6">
-                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Total streaks') }}</div>
+              <div class="me-6 flex items-center">
+                <div class="me-3 w-14 text-right text-sm text-gray-500">{{ $t('Total streaks') }}</div>
                 <div class="text-4xl">
                   {{ localGoal.count }}
                 </div>
               </div>
-              <div class="flex items-center ltr:mr-6 rtl:ml-6">
-                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Current streak') }}</div>
+              <div class="me-6 flex items-center">
+                <div class="me-3 w-14 text-right text-sm text-gray-500">{{ $t('Current streak') }}</div>
                 <div class="text-4xl">
                   {{ localGoal.streaks_statistics.current_streak }}
                 </div>
               </div>
               <div class="flex items-center">
-                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Longest streak') }}</div>
+                <div class="me-3 w-14 text-right text-sm text-gray-500">{{ $t('Longest streak') }}</div>
                 <div class="text-4xl">
                   {{ localGoal.streaks_statistics.max_streak }}
                 </div>
diff --git a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
index 04182eeb7..d339d170f 100644
--- a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
+++ b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.contact" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -49,7 +49,7 @@
         <!-- title + cta -->
         <div class="mb-6 mt-8 items-center justify-between sm:mt-0 sm:flex">
           <h3 class="mb-4 sm:mb-0">
-            <span class="ltr:mr-1 rtl:ml-1"> 🗓 </span>
+            <span class="me-1"> 🗓 </span>
             {{ $t('All the important dates') }}
           </h3>
           <pretty-button
@@ -108,11 +108,11 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="full_date"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                  class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('I know the exact date, including the year') }}
                 </label>
               </div>
-              <div v-if="form.choice == 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
+              <div v-if="form.choice == 'full_date'" class="mb-4 ms-6">
                 <DatePicker
                   v-model.string="form.date"
                   class="inline-block h-full"
@@ -139,16 +139,16 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="month_day"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                  class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('I only know the day and month, not the year') }}
                 </label>
               </div>
-              <div v-if="form.choice == 'month_day'" class="flex ltr:ml-6 rtl:mr-6">
+              <div v-if="form.choice == 'month_day'" class="ms-6 flex">
                 <dropdown
                   v-model="form.month"
                   :data="data.months"
                   :required="true"
-                  :div-outer-class="'mb-5 ltr:mr-2 rtl:ml-2'"
+                  :div-outer-class="'mb-5 me-2'"
                   :placeholder="$t('Choose a value')"
                   :dropdown-class="'block w-full'"
                   :label="$t('Month')" />
@@ -175,11 +175,11 @@
                   @selected="showyear" />
                 <label
                   for="year"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                  class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('I only know a number of years (an age, for example)') }}
                 </label>
               </div>
-              <div v-if="form.choice == 'year'" class="ltr:ml-6 rtl:mr-6">
+              <div v-if="form.choice == 'year'" class="ms-6">
                 <text-input
                   :ref="'age'"
                   v-model="form.age"
@@ -203,13 +203,13 @@
                   type="checkbox"
                   class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
                   @click="showReminderOptions" />
-                <label for="reminder" class="block cursor-pointer text-sm text-gray-900 ltr:ml-2 rtl:mr-2">
+                <label for="reminder" class="ms-2 block cursor-pointer text-sm text-gray-900">
                   {{ $t('Create a reminder') }}
                 </label>
               </div>
 
               <!-- reminder options -->
-              <div v-if="form.reminder" class="mt-4 ltr:ml-4 rtl:mr-4">
+              <div v-if="form.reminder" class="ms-4 mt-4">
                 <div class="mb-2 flex items-center">
                   <input
                     id="recurring_year"
@@ -220,7 +220,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="recurring_year"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                    class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('Remind me about this date every year') }}
                   </label>
                 </div>
@@ -235,7 +235,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="one_time"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                    class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('Remind me about this date just once, in one year from now') }}
                   </label>
                 </div>
@@ -244,7 +244,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createDateModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createDateModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -264,14 +264,14 @@
 
                 <span
                   v-if="date.type"
-                  class="inline-block rounded bg-neutral-200 px-1 py-0 text-xs text-neutral-500 last:mr-0 ltr:ml-2 rtl:mr-2">
+                  class="ms-2 inline-block rounded bg-neutral-200 px-1 py-0 text-xs text-neutral-500 last:mr-0">
                   {{ date.type.label }}
                 </span>
               </span>
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateDateModal(date)">
+                <li class="me-4 inline cursor-pointer" @click="updateDateModal(date)">
                   <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
                 </li>
                 <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(date)">
@@ -326,11 +326,11 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="full_date"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('I know the exact date, including the year') }}
                     </label>
                   </div>
-                  <div v-if="form.choice == 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
+                  <div v-if="form.choice == 'full_date'" class="mb-4 ms-6">
                     <DatePicker
                       v-model.string="form.date"
                       class="inline-block h-full"
@@ -358,16 +358,16 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="month_day"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('I only know the day and month, not the year') }}
                     </label>
                   </div>
-                  <div v-if="form.choice == 'month_day'" class="flex ltr:ml-6 rtl:mr-6">
+                  <div v-if="form.choice == 'month_day'" class="ms-6 flex">
                     <dropdown
                       v-model="form.month"
                       :data="data.months"
                       :required="true"
-                      :div-outer-class="'mb-5 ltr:mr-2 rtl:ml-2'"
+                      :div-outer-class="'mb-5 me-2'"
                       :placeholder="$t('Choose a value')"
                       :dropdown-class="'block w-full'"
                       :label="$t('Month')" />
@@ -394,11 +394,11 @@
                       @selected="showAge" />
                     <label
                       for="year"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('I only know a number of years (an age, for example)') }}
                     </label>
                   </div>
-                  <div v-if="form.choice == 'year'" class="ltr:ml-6 rtl:mr-6">
+                  <div v-if="form.choice == 'year'" class="ms-6">
                     <text-input
                       :ref="'age'"
                       v-model="form.age"
@@ -414,7 +414,7 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedDateId = 0" />
+                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedDateId = 0" />
                 <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
               </div>
             </form>
diff --git a/resources/js/Pages/Vault/Contact/Index.vue b/resources/js/Pages/Vault/Contact/Index.vue
index fa0c860d6..40d9d291f 100644
--- a/resources/js/Pages/Vault/Contact/Index.vue
+++ b/resources/js/Pages/Vault/Contact/Index.vue
@@ -41,7 +41,7 @@ const update = () => {
             <!-- labels -->
             <div class="mb-8">
               <div class="mb-3 border-b border-gray-200 dark:border-gray-700">
-                <span class="ltr:mr-1 rtl:ml-1"> 🏷️ </span>
+                <span class="me-1"> 🏷️ </span>
                 {{ $t('Labels') }}
               </div>
               <ul v-if="data.labels.length > 0">
@@ -79,7 +79,7 @@ const update = () => {
             <!-- title + cta -->
             <div class="mb-3 flex items-center justify-between">
               <h3>
-                <span class="ltr:mr-1 rtl:ml-1"> 🥸 </span>
+                <span class="me-1"> 🥸 </span>
                 {{ $t('All contacts in the vault') }}
               </h3>
 
@@ -88,14 +88,14 @@ const update = () => {
                   v-model="form.sort_order"
                   :data="props.data.contact_sort_orders"
                   :required="false"
-                  :dropdown-class="'block w-full ltr:mr-2 rtl:ml-2'"
+                  :dropdown-class="'block w-full me-2'"
                   @change="update()" />
 
                 <pretty-link
                   v-if="layoutData.vault.permission.at_least_editor"
                   :href="props.data.url.contact.create"
                   :text="$t('Add a contact')"
-                  class="ltr:ml-3 rtl:mr-3"
+                  class="ms-3"
                   :icon="'plus'" />
               </div>
             </div>
@@ -107,7 +107,7 @@ const update = () => {
                 v-for="contact in data.contacts"
                 :key="contact.id"
                 class="flex items-center border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
-                <avatar :data="contact.avatar" :classes="'rounded-full ltr:mr-2 rtl:ml-2 h-5 w-5'" />
+                <avatar :data="contact.avatar" :classes="'rounded-full me-2 h-5 w-5'" />
 
                 <inertia-link :href="contact.url.show" class="text-blue-500 hover:underline">
                   {{ contact.name }}
diff --git a/resources/js/Pages/Vault/Contact/Move.vue b/resources/js/Pages/Vault/Contact/Move.vue
index f52eccdd3..3c37485a5 100644
--- a/resources/js/Pages/Vault/Contact/Move.vue
+++ b/resources/js/Pages/Vault/Contact/Move.vue
@@ -25,15 +25,15 @@ const move = (vault) => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Contact/Names/Edit.vue b/resources/js/Pages/Vault/Contact/Names/Edit.vue
index c7a1a85fb..ecddf1996 100644
--- a/resources/js/Pages/Vault/Contact/Names/Edit.vue
+++ b/resources/js/Pages/Vault/Contact/Names/Edit.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.show" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -147,7 +147,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.show" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="data.url.show" :text="$t('Cancel')" :classes="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Update')"
diff --git a/resources/js/Pages/Vault/Contact/Notes/Index.vue b/resources/js/Pages/Vault/Contact/Notes/Index.vue
index 889f33e81..d262de38f 100644
--- a/resources/js/Pages/Vault/Contact/Notes/Index.vue
+++ b/resources/js/Pages/Vault/Contact/Notes/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.contact" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Contact/Photos/Index.vue b/resources/js/Pages/Vault/Contact/Photos/Index.vue
index 6203c3ecf..ec8fb03d2 100644
--- a/resources/js/Pages/Vault/Contact/Photos/Index.vue
+++ b/resources/js/Pages/Vault/Contact/Photos/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.show" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -51,7 +51,7 @@
         <!-- title + cta -->
         <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
           <div class="mb-2 sm:mb-0">
-            <span class="relative ltr:mr-1 rtl:ml-1">
+            <span class="relative me-1">
               <svg
                 class="icon-sidebar relative inline h-4 w-4"
                 viewBox="0 0 24 24"
diff --git a/resources/js/Pages/Vault/Contact/Photos/Show.vue b/resources/js/Pages/Vault/Contact/Photos/Show.vue
index 2bd7a9e3e..ac4570220 100644
--- a/resources/js/Pages/Vault/Contact/Photos/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Photos/Show.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.show" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -43,7 +43,7 @@
                 {{ $t('All the photos') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -66,7 +66,7 @@
         <!-- title + cta -->
         <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
           <div class="mb-2 sm:mb-0">
-            <span class="relative ltr:mr-1 rtl:ml-1">
+            <span class="relative me-1">
               <svg
                 class="icon-sidebar relative inline h-4 w-4"
                 viewBox="0 0 24 24"
diff --git a/resources/js/Pages/Vault/Contact/Relationships/Create.vue b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
index 9a3f0a5f1..425e9aeaf 100644
--- a/resources/js/Pages/Vault/Contact/Relationships/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -23,12 +23,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.contact" class="text-blue-500 hover:underline">
                 {{ $t('Profile of :name', { name: data.contact.name }) }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -78,7 +78,7 @@
                   {{ fromRelationship }}
                 </p>
                 <div class="flex items-center">
-                  <avatar :data="data.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5'" />
+                  <avatar :data="data.contact.avatar" :classes="'me-2 h-5 w-5'" />
 
                   <span>{{ data.contact.name }}</span>
                 </div>
@@ -91,7 +91,7 @@
                 <div class="flex">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5 ltr:mr-2 rtl:ml-2"
+                    class="me-2 h-5 w-5"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -123,7 +123,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="unknown"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('I don’t know the name') }}
                     </label>
                   </div>
@@ -140,7 +140,7 @@
                       @click="displayContactNameField" />
                     <label
                       for="name"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('I know the name') }}
                     </label>
                   </div>
@@ -169,25 +169,25 @@
                     <div class="mb-4 flex flex-wrap text-xs">
                       <span
                         v-if="!showLastNameField"
-                        class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
+                        class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
                         @click="displayLastNameField">
                         {{ $t('+ last name') }}
                       </span>
                       <span
                         v-if="!showMiddleNameField"
-                        class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
+                        class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
                         @click="displayMiddleNameField">
                         {{ $t('+ middle name') }}
                       </span>
                       <span
                         v-if="!showNicknameField"
-                        class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
+                        class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
                         @click="displayNicknameField">
                         {{ $t('+ nickname') }}
                       </span>
                       <span
                         v-if="!showMaidenNameField"
-                        class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
+                        class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
                         @click="displayMaidenNameField">
                         {{ $t('+ maiden name') }}
                       </span>
@@ -206,7 +206,7 @@
                       @click="displayContactSelector" />
                     <label
                       for="contact"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('Choose an existing contact') }}
                     </label>
                   </div>
@@ -285,13 +285,13 @@
               <div class="flex flex-wrap text-xs">
                 <span
                   v-if="data.genders.length > 0 && !showGenderField"
-                  class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
+                  class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
                   @click="displayGenderField">
                   {{ $t('+ gender') }}
                 </span>
                 <span
                   v-if="data.pronouns.length > 0 && !showPronounField"
-                  class="mb-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-gray-900"
+                  class="mb-2 me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 hover:bg-slate-300 dark:bg-slate-500 dark:text-gray-900"
                   @click="displayPronounField">
                   {{ $t('+ pronoun') }}
                 </span>
@@ -307,9 +307,7 @@
                   name="create-contact"
                   type="checkbox"
                   class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600" />
-                <label
-                  for="create-contact"
-                  class="block cursor-pointer text-sm text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-white">
+                <label for="create-contact" class="ms-2 block cursor-pointer text-sm text-gray-900 dark:text-white">
                   {{ $t('Create a contact entry for this person') }}
                 </label>
               </div>
@@ -318,7 +316,7 @@
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Add')"
diff --git a/resources/js/Pages/Vault/Contact/Show.vue b/resources/js/Pages/Vault/Contact/Show.vue
index 5f95e1b13..1ff6b14a2 100644
--- a/resources/js/Pages/Vault/Contact/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Show.vue
@@ -156,15 +156,15 @@ const destroyAvatar = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <Link :href="layoutData.vault.url.contacts" class="text-blue-500 hover:underline">
                 {{ $t('Contacts') }}
               </Link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -187,9 +187,9 @@ const destroyAvatar = () => {
         <!-- banner if contact is archived -->
         <!-- this is based on the `listed` boolean on the contact object -->
         <div v-if="!data.listed" class="mb-8 rounded-lg border border-gray-300 px-3 py-2 text-center">
-          <span class="ltr:mr-4 rtl:ml-4"> 🕸️ </span>
+          <span class="me-4"> 🕸️ </span>
           {{ $t('The contact is archived') }}
-          <span class="ltr:ml-4 rtl:mr-4"> 🕷️ </span>
+          <span class="ms-4"> 🕷️ </span>
         </div>
 
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
@@ -278,13 +278,13 @@ const destroyAvatar = () => {
             <!-- family summary -->
             <div v-if="data.group_summary_information.length > 0">
               <div class="mb-6 flex rounded border border-gray-200 p-3 dark:border-gray-700">
-                <img src="/img/group.svg" class="h-6 w-6 ltr:mr-2 rtl:ml-2" />
+                <img src="/img/group.svg" class="me-2 h-6 w-6" />
                 <ul>
-                  <li class="inline ltr:mr-2 rtl:ml-2">{{ $t('Part of') }}</li>
+                  <li class="me-2 inline">{{ $t('Part of') }}</li>
                   <li
                     v-for="group in data.group_summary_information"
                     :key="group.id"
-                    class="group-list-item inline ltr:mr-2 rtl:ml-2">
+                    class="group-list-item me-2 inline">
                     <Link :href="group.url.show" class="text-blue-500 hover:underline">
                       {{ group.name }}
                     </Link>
@@ -296,7 +296,7 @@ const destroyAvatar = () => {
             <!-- all the pages -->
             <div class="mb-8 w-full border-b border-gray-200 dark:border-gray-700">
               <div class="flex overflow-x-auto">
-                <div v-for="page in data.template_pages" :key="page.id" class="flex-none ltr:mr-2 rtl:ml-2">
+                <div v-for="page in data.template_pages" :key="page.id" class="me-2 flex-none">
                   <Link
                     :href="page.url.show"
                     :class="{ 'border-orange-500 hover:border-orange-500': page.selected }"
@@ -369,7 +369,7 @@ const destroyAvatar = () => {
           </JetSecondaryButton>
 
           <JetDangerButton
-            class="ltr:ml-3 rtl:mr-3"
+            class="ms-3"
             :class="{ 'opacity-25': deleteContactForm.processing }"
             :disabled="deleteContactForm.processing"
             @click="destroy">
@@ -394,7 +394,7 @@ const destroyAvatar = () => {
           </JetSecondaryButton>
 
           <JetButton
-            class="ltr:ml-3 rtl:mr-3"
+            class="ms-3"
             :class="{ 'opacity-25': toggleArchiveForm.processing }"
             :disabled="toggleArchiveForm.processing"
             @click="toggleArchive">
diff --git a/resources/js/Pages/Vault/Create.vue b/resources/js/Pages/Vault/Create.vue
index 589330c20..8b55c2c89 100644
--- a/resources/js/Pages/Vault/Create.vue
+++ b/resources/js/Pages/Vault/Create.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('All the vaults') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3 dark:text-slate-200"
@@ -41,7 +41,7 @@
             <h1 class="mb-1 flex justify-center text-2xl font-medium">
               <span>{{ $t('Create a vault') }}</span>
 
-              <help :url="$page.props.help_links.vault_create" :top="'9px'" :classes="['ltr:ml-2', 'rtl:mr-2']" />
+              <help :url="$page.props.help_links.vault_create" :top="'9px'" :classes="'ms-2'" />
             </h1>
             <p class="text-center text-sm">
               {{ $t('Vaults contain all your contacts data.') }}
@@ -65,7 +65,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Add')"
diff --git a/resources/js/Pages/Vault/Dashboard/Index.vue b/resources/js/Pages/Vault/Dashboard/Index.vue
index a28966372..cc51ebee2 100644
--- a/resources/js/Pages/Vault/Dashboard/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Index.vue
@@ -67,14 +67,14 @@ const changeTab = (tab) => {
                   @click="changeTab('activity')"
                   type="button"
                   :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': currentTab === 'activity' }"
-                  class="inline-flex items-center border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-l-lg rtl:rounded-r-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                  class="inline-flex items-center rounded-s-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="h-4 w-4 fill-current ltr:mr-2 rtl:ml-2">
+                    class="me-2 h-4 w-4 fill-current">
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
@@ -89,14 +89,14 @@ const changeTab = (tab) => {
                   @click="changeTab('life_events')"
                   type="button"
                   :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': currentTab === 'life_events' }"
-                  class="inline-flex items-center border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:border-r rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                  class="inline-flex items-center border-b border-s border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="h-4 w-4 ltr:mr-2 rtl:ml-2">
+                    class="me-2 h-4 w-4">
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
@@ -116,14 +116,14 @@ const changeTab = (tab) => {
                   :class="{
                     'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': currentTab === 'life_metrics',
                   }"
-                  class="inline-flex items-center border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-r-lg ltr:border-r rtl:rounded-l-lg rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                  class="inline-flex items-center rounded-e-lg border-b border-s border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="h-4 w-4 ltr:mr-2 rtl:ml-2">
+                    class="me-2 h-4 w-4">
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
index 2ad29e152..1b70a51ae 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
@@ -35,7 +35,7 @@
             @change="toggle(task)" />
 
           <div>
-            <label :for="task.id" class="mb-2 flex cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+            <label :for="task.id" class="mb-2 ms-2 flex cursor-pointer text-gray-900 dark:text-gray-300">
               {{ task.label }}
             </label>
 
@@ -48,10 +48,10 @@
                     ? 'bg-red-400/10 text-red-600 dark:bg-red-600/10 dark:text-red-400'
                     : 'bg-sky-400/10 text-sky-600 dark:bg-sky-600/10 dark:text-sky-400'
                 "
-                class="flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 ltr:ml-2 ltr:mr-4 rtl:ml-4 rtl:mr-2 dark:text-sky-400">
+                class="me-4 ms-2 flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 dark:text-sky-400">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="h-3 w-3 ltr:mr-1 rtl:ml-1"
+                  class="me-1 h-3 w-3"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -66,7 +66,7 @@
 
               <!-- contact -->
               <div class="flex items-center">
-                <avatar :data="task.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5 rounded-full'" />
+                <avatar :data="task.contact.avatar" :classes="'me-2 h-5 w-5 rounded-full'" />
 
                 <inertia-link :href="task.contact.url.show" class="text-blue-500 hover:underline">
                   {{ task.contact.name }}
@@ -82,7 +82,7 @@
     <div
       v-if="data.tasks.length == 0"
       class="mb-2 flex items-center rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900">
-      <img src="/img/dashboard_blank_tasks.svg" :alt="$t('Tasks')" class="h-14 w-14 ltr:mr-2 rtl:ml-2" />
+      <img src="/img/dashboard_blank_tasks.svg" :alt="$t('Tasks')" class="me-2 h-14 w-14" />
       <p class="px-5 text-center">
         {{ $t('No tasks.') }}
       </p>
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue b/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue
index c0e43b4fb..a0b65a519 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue
@@ -24,7 +24,7 @@
       <ul class="mb-4">
         <li v-for="favorite in data" :key="favorite.id">
           <div class="mb-2 flex items-center text-sm">
-            <avatar :data="favorite.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5 rounded-full'" />
+            <avatar :data="favorite.avatar" :classes="'me-2 h-5 w-5 rounded-full'" />
 
             <inertia-link :href="favorite.url.show" class="text-blue-500 hover:underline">
               {{ favorite.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue b/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
index 983b30dbc..b4038d20e 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h3 class="mb-3 flex border-b border-gray-200 pb-1 font-medium dark:border-gray-700">
-      <span class="relative ltr:mr-2 rtl:ml-2">
+      <span class="relative me-2">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="icon-sidebar relative inline h-4 w-4 text-gray-300 hover:text-gray-600 dark:text-gray-400"
@@ -13,14 +13,14 @@
         </svg>
       </span>
 
-      <span class="inline ltr:mr-2 rtl:ml-2">
+      <span class="me-2 inline">
         {{ $t('Last updated') }}
       </span>
 
       <help :url="$page.props.help_links.last_updated_contacts" :top="'4px'" />
     </h3>
     <div v-for="contact in data" :key="contact.id" class="mb-2 flex items-center text-sm">
-      <avatar :data="contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5 rounded-full'" />
+      <avatar :data="contact.avatar" :classes="'me-2 h-5 w-5 rounded-full'" />
 
       <inertia-link :href="contact.url.show" class="text-blue-500 hover:underline">
         {{ contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
index 15dd97710..5ac0132a8 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
@@ -118,7 +118,7 @@ const destroy = (lifeMetric) => {
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -166,7 +166,7 @@ const destroy = (lifeMetric) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createLifeMetricModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createLifeMetricModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -181,7 +181,7 @@ const destroy = (lifeMetric) => {
           :key="lifeMetric.id"
           class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
           <div v-if="editedLifeMetricId !== lifeMetric.id" class="flex items-center justify-between p-3">
-            <div class="flex w-full items-center justify-between ltr:mr-8 rtl:ml-8">
+            <div class="me-8 flex w-full items-center justify-between">
               <div>
                 <p class="mb-1 text-lg font-semibold">{{ lifeMetric.label }}</p>
                 <ul @click="toggleGraph(lifeMetric)">
@@ -267,7 +267,7 @@ const destroy = (lifeMetric) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedLifeMetricId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedLifeMetricId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
index 2906977d6..200c85641 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
@@ -97,7 +97,7 @@ const submit = () => {
     <div
       v-if="!createMoodEventModalShown && !successShown"
       class="mb-4 flex items-center rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-900">
-      <img src="/img/dashboard_blank_how_are_you.svg" :alt="$t('Reminders')" class="h-14 w-14 ltr:mr-2 rtl:ml-2" />
+      <img src="/img/dashboard_blank_how_are_you.svg" :alt="$t('Reminders')" class="me-2 h-14 w-14" />
       <div class="mb-2 flex flex-col px-5">
         <p class="mb-2">{{ $t('How are you?') }}</p>
         <pretty-button :text="$t('Record your mood')" @click="showMoodEventModal" />
@@ -124,12 +124,12 @@ const submit = () => {
               :value="parameter.id"
               name="date-format"
               type="radio"
-              class="relative h-4 w-4 border-gray-300 text-sky-500 ltr:mr-3 rtl:ml-3 dark:border-gray-700" />
+              class="relative me-3 h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
 
             <label
               :for="'input' + parameter.id"
               class="block cursor-pointer font-medium text-gray-700 dark:text-gray-300">
-              <div class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="parameter.hex_color" />
+              <div class="me-2 inline-block h-4 w-4 rounded-full" :class="parameter.hex_color" />
               {{ parameter.label }}
             </label>
           </li>
@@ -138,21 +138,21 @@ const submit = () => {
         <div class="flex">
           <span
             v-if="!datePickerFieldShown"
-            class="flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-white"
+            class="me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:bg-slate-500 dark:text-white"
             @click="showDatePickerField">
             {{ $t('+ change date') }}
           </span>
 
           <span
             v-if="!noteFieldShown"
-            class="flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-white"
+            class="me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:bg-slate-500 dark:text-white"
             @click="showNoteField">
             {{ $t('+ note') }}
           </span>
 
           <span
             v-if="!hoursSleptFieldShown"
-            class="flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:bg-slate-500 dark:text-white"
+            class="me-2 flex cursor-pointer flex-wrap rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:bg-slate-500 dark:text-white"
             @click="showHoursSleptField">
             {{ $t('+ number of hours slept') }}
           </span>
@@ -198,7 +198,7 @@ const submit = () => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createMoodEventModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createMoodEventModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -207,9 +207,9 @@ const submit = () => {
     <div
       v-if="successShown"
       class="mb-4 flex items-center rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-900">
-      <img src="/img/dashboard_blank_how_are_you.svg" :alt="$t('Reminders')" class="h-14 w-14 ltr:mr-2 rtl:ml-2" />
+      <img src="/img/dashboard_blank_how_are_you.svg" :alt="$t('Reminders')" class="me-2 h-14 w-14" />
       <div class="flex flex-col px-5">
-        <p class="mb-2"><span class="ltr:mr-1 rtl:ml-1">🎉</span> {{ $t('Your mood has been recorded!') }}</p>
+        <p class="mb-2"><span class="me-1">🎉</span> {{ $t('Your mood has been recorded!') }}</p>
         <inertia-link :href="data.url.history" class="text-center text-blue-500 hover:underline">{{
           $t('View history')
         }}</inertia-link>
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
index 5d5c393a7..eef80f5d9 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
@@ -27,11 +27,11 @@
           :key="reminder.id"
           class="item-list border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800 hover:dark:bg-slate-900">
           <div class="flex items-center">
-            <p class="text-xs text-gray-400 ltr:mr-3 rtl:ml-3">
+            <p class="me-3 text-xs text-gray-400">
               {{ reminder.scheduled_at }}
             </p>
             <div class="flex items-center text-sm">
-              <avatar :data="reminder.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-4 w-4 rounded-full'" />
+              <avatar :data="reminder.contact.avatar" :classes="'me-2 h-4 w-4 rounded-full'" />
 
               <inertia-link :href="reminder.contact.url.show" class="text-blue-500 hover:underline">
                 {{ reminder.contact.name }}
@@ -49,7 +49,7 @@
     <div
       v-if="data.reminders.length == 0"
       class="mb-4 flex items-center rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-900">
-      <img src="/img/dashboard_blank_reminders.svg" :alt="$t('Reminders')" class="h-14 w-14 ltr:mr-2 rtl:ml-2" />
+      <img src="/img/dashboard_blank_reminders.svg" :alt="$t('Reminders')" class="me-2 h-14 w-14" />
       <p class="px-5 text-center">
         {{ $t('No upcoming reminders.') }}
       </p>
diff --git a/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue b/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue
index 568edf3f2..6b8d8b9cf 100644
--- a/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue
@@ -5,15 +5,15 @@
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.dashboard" class="text-blue-500 hover:underline">
                 {{ $t('Dashboard') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -36,7 +36,7 @@
         <!-- title -->
         <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
           <div class="mb-2 sm:mb-0">
-            <span class="relative ltr:mr-1 rtl:ml-1">
+            <span class="relative me-1">
               <svg
                 class="icon-sidebar relative inline h-4 w-4"
                 viewBox="0 0 24 24"
@@ -84,13 +84,13 @@
               :key="reminder.id"
               class="item-list border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <div class="items-center sm:flex">
-                <p class="text-gray-400 ltr:mr-3 rtl:ml-3">
+                <p class="me-3 text-gray-400">
                   {{ reminder.scheduled_at }}
                 </p>
-                <div class="flex items-center ltr:mr-2 rtl:ml-2">
+                <div class="me-2 flex items-center">
                   <avatar
                     :data="reminder.contact.avatar"
-                    :classes="'h-4 w-4 ltr:mr-2 rtl:ml-2 rounded-full ring-2 ring-white dark:ring-gray-900'" />
+                    :classes="'h-4 w-4 me-2 rounded-full ring-2 ring-white dark:ring-gray-900'" />
 
                   <inertia-link :href="reminder.contact.url.show" class="text-blue-500 hover:underline">
                     {{ reminder.contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Task/Index.vue b/resources/js/Pages/Vault/Dashboard/Task/Index.vue
index 8349360c8..39070a974 100644
--- a/resources/js/Pages/Vault/Dashboard/Task/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Task/Index.vue
@@ -27,7 +27,7 @@
         <div v-for="task in data" :key="task.id" class="mb-6">
           <!-- person name -->
           <div class="mb-2 flex items-center">
-            <avatar :data="task.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5 rounded-full'" />
+            <avatar :data="task.contact.avatar" :classes="'me-2 h-5 w-5 rounded-full'" />
 
             <inertia-link :href="task.contact.url.show" class="text-blue-500 hover:underline">
               {{ task.contact.name }}
@@ -51,7 +51,7 @@
 
                 <label
                   :for="currentTask.id"
-                  class="flex cursor-pointer items-center text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-100">
+                  class="ms-2 flex cursor-pointer items-center text-gray-900 dark:text-gray-100">
                   {{ currentTask.label }}
 
                   <!-- due date -->
@@ -62,10 +62,10 @@
                         ? 'bg-red-400/10 text-red-600 dark:bg-red-600/10 dark:text-red-400'
                         : 'bg-sky-400/10 text-sky-600 dark:bg-sky-600/10 dark:text-sky-400'
                     "
-                    class="flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 ltr:ml-2 rtl:mr-2">
+                    class="ms-2 flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      class="h-3 w-3 ltr:mr-1 rtl:ml-1"
+                      class="me-1 h-3 w-3"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
diff --git a/resources/js/Pages/Vault/Files/Index.vue b/resources/js/Pages/Vault/Files/Index.vue
index 1b08b6183..7a8d0964f 100644
--- a/resources/js/Pages/Vault/Files/Index.vue
+++ b/resources/js/Pages/Vault/Files/Index.vue
@@ -8,7 +8,7 @@
             <!-- filters -->
             <div>
               <ul class="mb-4">
-                <li class="pl-2 ltr:border-l-2 rtl:border-r-2" :class="{ 'border-orange-500': tab === 'index' }">
+                <li class="border-s-2 pl-2" :class="{ 'border-orange-500': tab === 'index' }">
                   <inertia-link :href="data.statistics.url.index">
                     {{ $t('All files') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.all }})</span>
@@ -20,21 +20,19 @@
                 {{ $t('Or filter by type') }}
               </p>
               <ul>
-                <li
-                  class="mb-2 pl-2 ltr:border-l-2 rtl:border-r-2"
-                  :class="{ 'border-orange-500': tab === 'documents' }">
+                <li class="mb-2 border-s-2 pl-2" :class="{ 'border-orange-500': tab === 'documents' }">
                   <inertia-link :href="data.statistics.url.documents">
                     {{ $t('Documents') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.documents }})</span>
                   </inertia-link>
                 </li>
-                <li class="mb-2 pl-2 ltr:border-l-2 rtl:border-r-2" :class="{ 'border-orange-500': tab === 'photos' }">
+                <li class="mb-2 border-s-2 pl-2" :class="{ 'border-orange-500': tab === 'photos' }">
                   <inertia-link :href="data.statistics.url.photos">
                     {{ $t('Photos') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.photos }})</span>
                   </inertia-link>
                 </li>
-                <li class="mb-2 pl-2 ltr:border-l-2 rtl:border-r-2" :class="{ 'border-orange-500': tab === 'avatars' }">
+                <li class="mb-2 border-s-2 pl-2" :class="{ 'border-orange-500': tab === 'avatars' }">
                   <inertia-link :href="data.statistics.url.avatars">
                     {{ $t('Avatars') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.avatars }})</span>
@@ -51,7 +49,7 @@
             <!-- title + cta -->
             <div class="mb-6 flex items-center justify-between">
               <h3>
-                <span class="ltr:mr-1 rtl:ml-1"> 📸 </span>
+                <span class="me-1"> 📸 </span>
                 {{ $t('All the files') }}
               </h3>
             </div>
@@ -67,15 +65,15 @@
                 <!-- left part -->
                 <div class="mb-4 block items-center sm:mb-0 sm:flex">
                   <!-- created at -->
-                  <p class="text-sm text-gray-400 ltr:mr-2 rtl:ml-2">
+                  <p class="me-2 text-sm text-gray-400">
                     {{ file.created_at }}
                   </p>
 
                   <!-- file name -->
-                  <p class="flex max-w-none ltr:mr-4 rtl:ml-4 sm:max-w-sm">
+                  <p class="me-4 flex max-w-none sm:max-w-sm">
                     <span class="block truncate">{{ file.name }}</span>
 
-                    <span class="ltr:ml-2 rtl:mr-2">
+                    <span class="ms-2">
                       <span class="rounded border bg-blue-50 px-1 py-0 font-mono text-xs text-blue-500">
                         {{ file.size }}
                       </span>
@@ -84,7 +82,7 @@
 
                   <!-- avatar -->
                   <div v-if="file.object.type == 'contact'" class="flex items-center">
-                    <avatar :data="file.object.avatar" :classes="'rounded-full ltr:mr-2 rtl:ml-2 h-4 w-4'" />
+                    <avatar :data="file.object.avatar" :classes="'rounded-full me-2 h-4 w-4'" />
                     <inertia-link :href="file.object.url.show" class="text-sm text-blue-500 hover:underline">
                       {{ file.object.name }}
                     </inertia-link>
@@ -93,7 +91,7 @@
 
                 <!-- right part -->
                 <ul class="text-sm">
-                  <li class="inline ltr:mr-4 rtl:ml-4">
+                  <li class="me-4 inline">
                     <a :href="file.url.download" class="text-blue-500 hover:underline">{{ $t('Download') }}</a>
                   </li>
                   <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(file)">
diff --git a/resources/js/Pages/Vault/Group/Edit.vue b/resources/js/Pages/Vault/Group/Edit.vue
index ecf28192f..b7f0bda5d 100644
--- a/resources/js/Pages/Vault/Group/Edit.vue
+++ b/resources/js/Pages/Vault/Group/Edit.vue
@@ -57,15 +57,15 @@ const update = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Groups') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -75,10 +75,10 @@ const update = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">{{ data.name }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -132,7 +132,7 @@ const update = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="props.data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="props.data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Group/Index.vue b/resources/js/Pages/Vault/Group/Index.vue
index 05826b1e6..1bc4ad274 100644
--- a/resources/js/Pages/Vault/Group/Index.vue
+++ b/resources/js/Pages/Vault/Group/Index.vue
@@ -13,7 +13,7 @@ defineProps({
     <main class="relative sm:mt-24">
       <div class="mx-auto max-w-4xl px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <h3 class="mb-6 font-semibold">
-          <span class="ltr:mr-1 rtl:ml-1"> 👥 </span>
+          <span class="me-1"> 👥 </span>
           {{ $t('All groups in the vault') }}
         </h3>
 
diff --git a/resources/js/Pages/Vault/Group/Show.vue b/resources/js/Pages/Vault/Group/Show.vue
index 2e9c64d2e..94e8b2c81 100644
--- a/resources/js/Pages/Vault/Group/Show.vue
+++ b/resources/js/Pages/Vault/Group/Show.vue
@@ -43,15 +43,15 @@ const destroy = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.groups" class="text-blue-500 hover:underline">
                 {{ $t('Groups') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -77,14 +77,14 @@ const destroy = () => {
         <!-- group information -->
         <div class="mb-8 flex justify-center">
           <!-- number of contacts -->
-          <div class="flex items-center ltr:mr-8 rtl:ml-8">
+          <div class="me-8 flex items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
-              class="h-4 w-4 ltr:mr-1 rtl:ml-1">
+              class="me-1 h-4 w-4">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -97,14 +97,14 @@ const destroy = () => {
           </div>
 
           <!-- type -->
-          <div class="flex items-center ltr:mr-8 rtl:ml-8">
+          <div class="me-8 flex items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
-              class="h-4 w-4 ltr:mr-1 rtl:ml-1">
+              class="me-1 h-4 w-4">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -117,7 +117,7 @@ const destroy = () => {
           <!-- actions -->
           <div class="flex items-center">
             <ul class="list">
-              <li class="inline ltr:mr-4 rtl:ml-4">
+              <li class="me-4 inline">
                 <inertia-link :href="props.data.url.edit" class="text-blue-500 hover:underline">{{
                   $t('Edit')
                 }}</inertia-link>
@@ -133,7 +133,7 @@ const destroy = () => {
         <div v-for="role in data.roles" :key="role.id" class="mb-8">
           <p
             v-if="role.contacts.length > 0"
-            class="mb-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0 ltr:mr-2 rtl:ml-2">
+            class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0">
             {{ role.label }}
           </p>
 
@@ -146,7 +146,7 @@ const destroy = () => {
 
               <inertia-link :href="contact.url" class="text-blue-500 hover:underline">{{ contact.name }}</inertia-link>
 
-              <span v-if="contact.age" class="text-xs text-gray-500 ltr:ml-1 rtl:mr-1">({{ contact.age }})</span>
+              <span v-if="contact.age" class="ms-1 text-xs text-gray-500">({{ contact.age }})</span>
             </div>
           </div>
         </div>
@@ -167,7 +167,7 @@ const destroy = () => {
             </JetSecondaryButton>
 
             <JetDangerButton
-              class="ltr:ml-3 rtl:mr-3"
+              class="ms-3"
               :class="{ 'opacity-25': deleteGroupForm.processing }"
               :disabled="deleteGroupForm.processing"
               @click="destroy">
diff --git a/resources/js/Pages/Vault/Index.vue b/resources/js/Pages/Vault/Index.vue
index 2f633577a..09dd6329f 100644
--- a/resources/js/Pages/Vault/Index.vue
+++ b/resources/js/Pages/Vault/Index.vue
@@ -4,7 +4,7 @@
       <!-- blank state -->
       <div v-if="data.vaults.length == 0" class="mx-auto mb-6 max-w-md px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <div
-          class="dark:bg-ghray-900 rounded-t-lg border-t border-gray-200 bg-white p-5 ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700 dark:bg-gray-900">
+          class="dark:bg-ghray-900 rounded-t-lg border-s border-t border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
           <p class="mb-2 text-center text-xl">👋</p>
           <h2 class="mb-6 text-center text-lg font-semibold">
             {{ $t('Thanks for giving Monica a try') }}
@@ -73,7 +73,7 @@
                   </div>
                   <div
                     v-if="vault.remaining_contacts != 0"
-                    class="remaining-contact relative flex h-9 w-9 items-center justify-center rounded-full border-2 border-white bg-gray-700 text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-gray-300 dark:text-gray-900 hover:dark:bg-gray-400">
+                    class="relative -start-[5px] -top-px flex h-9 w-9 items-center justify-center rounded-full border-2 border-white bg-gray-700 text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-gray-300 dark:text-gray-900 hover:dark:bg-gray-400">
                     + {{ vault.remaining_contacts }}
                   </div>
                 </div>
@@ -174,16 +174,6 @@ export default {
   grid-template-rows: auto 1fr auto;
 }
 
-.ltr .remaining-contact {
-  top: -1px;
-  left: -5px;
-}
-
-.rtl .remaining-contact {
-  top: -1px;
-  right: -5px;
-}
-
 @media (max-width: 480px) {
   .vault-list {
     grid-template-columns: 1fr;
diff --git a/resources/js/Pages/Vault/Journal/Create.vue b/resources/js/Pages/Vault/Journal/Create.vue
index 8f35c4a8f..c78605160 100644
--- a/resources/js/Pages/Vault/Journal/Create.vue
+++ b/resources/js/Pages/Vault/Journal/Create.vue
@@ -40,15 +40,15 @@ const submit = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -98,7 +98,7 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Edit.vue b/resources/js/Pages/Vault/Journal/Edit.vue
index 8d7b9d8b4..8bb722aed 100644
--- a/resources/js/Pages/Vault/Journal/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Edit.vue
@@ -43,15 +43,15 @@ const submit = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -61,10 +61,10 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.back" class="text-blue-500 hover:underline">{{ data.name }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -112,7 +112,7 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
             <pretty-button :text="$t('Add')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Index.vue b/resources/js/Pages/Vault/Journal/Index.vue
index 030162661..ae8096303 100644
--- a/resources/js/Pages/Vault/Journal/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Index.vue
@@ -15,7 +15,7 @@ defineProps({
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="ltr:mr-1 rtl:ml-1"> ✍️ </span>
+            <span class="me-1"> ✍️ </span>
             {{ $t('All the journals') }}
           </h3>
 
@@ -40,7 +40,7 @@ defineProps({
                 }}</inertia-link>
 
                 <div v-if="journal.last_updated" class="mb-2 flex items-center text-sm sm:mb-0">
-                  <span class="ltr:mr-1 rtl:ml-1">
+                  <span class="me-1">
                     <svg
                       class="h-4 w-4 text-gray-500"
                       xmlns="http://www.w3.org/2000/svg"
diff --git a/resources/js/Pages/Vault/Journal/Metrics/Index.vue b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
index 80e5386b8..484f9b9ef 100644
--- a/resources/js/Pages/Vault/Journal/Metrics/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
@@ -73,15 +73,15 @@ const destroy = (metric) => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -91,12 +91,12 @@ const destroy = (metric) => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <inertia-link :href="data.journal.url.show" class="text-blue-500 hover:underline">{{
                 data.journal.name
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -117,7 +117,7 @@ const destroy = (metric) => {
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="ltr:mr-1 rtl:ml-1"> 📊 </span>
+            <span class="me-1"> 📊 </span>
             {{ $t('All journal metrics in :name', { name: data.journal.name }) }}
           </h3>
 
@@ -150,10 +150,7 @@ const destroy = (metric) => {
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createJournalMetricModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createJournalMetricModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Photo/Index.vue b/resources/js/Pages/Vault/Journal/Photo/Index.vue
index a4eccb62d..57bfbf028 100644
--- a/resources/js/Pages/Vault/Journal/Photo/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Photo/Index.vue
@@ -14,15 +14,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -52,14 +52,14 @@ defineProps({
             <inertia-link
               :href="data.url.show"
               :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': defaultTab === 'activity' }"
-              class="inline-flex items-center border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-l-lg rtl:rounded-r-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center rounded-s-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 w-4 ltr:mr-2 rtl:ml-2">
+                class="me-2 h-4 w-4">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -70,14 +70,14 @@ defineProps({
             </inertia-link>
 
             <inertia-link
-              class="inline-flex items-center border-b border-t border-gray-200 bg-gray-100 bg-white px-4 py-2 text-sm font-medium text-blue-700 text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-r-md ltr:border-r rtl:rounded-l-md rtl:border-l dark:border-gray-600 dark:bg-gray-400 dark:bg-gray-700 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center rounded-e-md border-b border-s border-t border-gray-200 bg-gray-100 bg-white px-4 py-2 text-sm font-medium text-blue-700 text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-400 dark:bg-gray-700 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 w-4 ltr:mr-2 rtl:ml-2">
+                class="me-2 h-4 w-4">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -93,7 +93,7 @@ defineProps({
           <div
             v-for="photo in data.photos"
             :key="photo.id"
-            class="cursor-pointer rounded-md border border-gray-200 p-2 shadow-sm hover:bg-slate-50 hover:shadow-lg ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+            class="me-2 cursor-pointer rounded-md border border-gray-200 p-2 shadow-sm hover:bg-slate-50 hover:shadow-lg dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <img :src="photo.url.display" :alt="photo.name" />
           </div>
         </div>
diff --git a/resources/js/Pages/Vault/Journal/Post/Edit.vue b/resources/js/Pages/Vault/Journal/Post/Edit.vue
index 74f23377e..d7997cfad 100644
--- a/resources/js/Pages/Vault/Journal/Post/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Edit.vue
@@ -172,15 +172,15 @@ const destroy = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -195,7 +195,7 @@ const destroy = () => {
                 {{ data.journal.name }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -205,12 +205,12 @@ const destroy = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.show" class="text-blue-500 hover:underline">
                 {{ data.title }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -244,7 +244,7 @@ const destroy = () => {
                   :key="photo.id"
                   class="item-list flex items-center justify-between border-b border-gray-200 p-3 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                   <div class="flex">
-                    <img :src="photo.url.show" class="ltr:mr-4 rtl:ml-4" width="75" height="75" />
+                    <img :src="photo.url.show" class="me-4" width="75" height="75" />
 
                     <ul>
                       <li class="mb-2 text-sm">{{ photo.name }}</li>
@@ -312,7 +312,7 @@ const destroy = () => {
                 v-if="!data.canUploadFile"
                 class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
                 <p class="bg-gray-100 p-3 text-center">
-                  <span class="ltr:mr-1 rtl:ml-1">⚠️</span>
+                  <span class="me-1">⚠️</span>
                   {{ $t('You don’t have enough space left in your account.') }}
                 </p>
               </div>
@@ -360,7 +360,7 @@ const destroy = () => {
             <div class="mb-6 text-sm">
               <div v-if="!saveInProgress" class="flex items-center justify-center">
                 <svg
-                  class="h-4 w-4 text-green-700 ltr:mr-2 rtl:ml-2"
+                  class="me-2 h-4 w-4 text-green-700"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -376,7 +376,7 @@ const destroy = () => {
               </div>
 
               <div v-if="saveInProgress" class="flex items-center justify-center">
-                <div class="saving-spinner ltr:mr-3 rtl:ml-3">
+                <div class="saving-spinner me-3">
                   <div class="dot"></div>
                   <div class="dot"></div>
                   <div class="dot"></div>
@@ -430,7 +430,7 @@ const destroy = () => {
             <ul class="mb-6 text-sm">
               <li class="mb-2 flex items-center">
                 <svg
-                  class="h-4 w-4 ltr:mr-2 rtl:ml-2"
+                  class="me-2 h-4 w-4"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -448,7 +448,7 @@ const destroy = () => {
               </li>
               <li class="mb-2 flex items-center">
                 <svg
-                  class="h-4 w-4 ltr:mr-2 rtl:ml-2"
+                  class="me-2 h-4 w-4"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -468,7 +468,7 @@ const destroy = () => {
               </li>
               <li class="flex items-center">
                 <svg
-                  class="h-4 w-4 ltr:mr-2 rtl:ml-2"
+                  class="me-2 h-4 w-4"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -512,7 +512,7 @@ const destroy = () => {
         </JetSecondaryButton>
 
         <JetDangerButton
-          class="ltr:ml-3 rtl:mr-3"
+          class="ms-3"
           :class="{ 'opacity-25': processPhotoDeletion }"
           :disabled="processPhotoDeletion"
           @click="destroyPhoto(file)">
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
index 8913d61da..0bf36e7ad 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
@@ -90,7 +90,7 @@ const destroy = (journalMetric, postMetric) => {
             <span
               @click="destroy(journalMetric, postMetric)"
               v-if="editModeJournalMetricId === journalMetric.id"
-              class="ltr:ml-2 rtl:mr-2">
+              class="ms-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -108,7 +108,7 @@ const destroy = (journalMetric, postMetric) => {
         <li
           @click="showAddMetricModal(journalMetric)"
           v-if="!addModalShown && editModeJournalMetricId != journalMetric.id"
-          class="mb-6 inline cursor-pointer text-sm text-blue-500 hover:underline ltr:mr-3 rtl:ml-3">
+          class="mb-6 me-3 inline cursor-pointer text-sm text-blue-500 hover:underline">
           {{ $t('add a new metric') }}
         </li>
         <li
@@ -156,7 +156,7 @@ const destroy = (journalMetric, postMetric) => {
           </div>
 
           <div class="flex justify-between p-2">
-            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="addModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addModalShown = false" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Save')"
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue b/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue
index 3efd2bf33..f58279f2e 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue
@@ -99,7 +99,7 @@ const reset = () => {
         </div>
 
         <div class="flex justify-between p-2">
-          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editSlicesModalShown = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editSlicesModalShown = false" />
           <pretty-button
             :href="'data.url.vault.create'"
             :text="$t('Save')"
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue b/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
index 9e1b88b37..de406d0b8 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
@@ -47,7 +47,7 @@
           class="flex cursor-pointer items-center justify-between border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
           @click="set(tag)">
           <div>
-            <span class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="tag.bg_color" />
+            <span class="me-2 inline-block h-4 w-4 rounded-full" :class="tag.bg_color" />
             <span>{{ tag.name }}</span>
           </div>
 
@@ -84,7 +84,7 @@
       <span
         v-for="tag in localTags"
         :key="tag.id"
-        class="inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0 ltr:mr-2 rtl:ml-2">
+        class="me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0">
         <inertia-link :href="tag.url.show">{{ tag.name }}</inertia-link>
       </span>
     </div>
diff --git a/resources/js/Pages/Vault/Journal/Post/Show.vue b/resources/js/Pages/Vault/Journal/Post/Show.vue
index 32c48ae2f..701509651 100644
--- a/resources/js/Pages/Vault/Journal/Post/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Show.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -38,7 +38,7 @@ defineProps({
                 {{ data.journal.name }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -60,7 +60,7 @@ defineProps({
       <div class="mx-auto max-w-6xl px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
           <!-- left -->
-          <div class="ltr:mr-8 rtl:ml-8">
+          <div class="me-8">
             <!-- post previous/next -->
             <div class="mb-4 flex justify-between">
               <!-- previous post -->
@@ -71,7 +71,7 @@ defineProps({
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke="currentColor"
-                  class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
+                  class="me-1 h-4 w-4 text-gray-400">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
                 </svg>
 
@@ -99,7 +99,7 @@ defineProps({
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke="currentColor"
-                  class="h-4 w-4 text-gray-400 ltr:ml-1 rtl:mr-1">
+                  class="ms-1 h-4 w-4 text-gray-400">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
                 </svg>
               </div>
@@ -115,7 +115,7 @@ defineProps({
                 <li
                   v-for="tag in data.tags"
                   :key="tag.id"
-                  class="inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0 ltr:mr-2 rtl:ml-2 dark:bg-neutral-800">
+                  class="me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0 dark:bg-neutral-800">
                   {{ tag.name }}
                 </li>
               </ul>
@@ -128,7 +128,7 @@ defineProps({
                 <div
                   v-for="photo in data.photos"
                   :key="photo.id"
-                  class="rounded-md border border-gray-200 p-2 shadow-sm hover:bg-slate-50 hover:shadow-lg ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+                  class="me-2 rounded-md border border-gray-200 p-2 shadow-sm hover:bg-slate-50 hover:shadow-lg dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                   <img :src="photo.url.display" :alt="photo.name" />
                 </div>
               </div>
@@ -156,10 +156,7 @@ defineProps({
               <p class="mb-2 text-sm font-semibold">{{ $t('Contacts in this post') }}</p>
 
               <div v-for="contact in data.contacts" :key="contact.id" class="mb-2 block">
-                <contact-card
-                  :contact="contact"
-                  :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
-                  :displayName="true" />
+                <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
               </div>
             </div>
 
@@ -168,7 +165,7 @@ defineProps({
               <p class="mb-2 text-sm font-semibold">{{ $t('Slice of life') }}</p>
               <div class="mb-6 last:mb-0">
                 <div
-                  class="rounded border-b border-t border-gray-200 px-3 py-2 hover:bg-slate-50 ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
+                  class="rounded border-b border-s border-t border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
                   :class="data.sliceOfLife.cover_image ? '' : 'border-t'">
                   <inertia-link :href="data.sliceOfLife.url.show" class="font-semibold">{{
                     data.sliceOfLife.name
diff --git a/resources/js/Pages/Vault/Journal/Post/Template.vue b/resources/js/Pages/Vault/Journal/Post/Template.vue
index b42228549..c9de50b30 100644
--- a/resources/js/Pages/Vault/Journal/Post/Template.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Template.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -38,7 +38,7 @@ defineProps({
                 {{ data.journal.name }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
diff --git a/resources/js/Pages/Vault/Journal/Show.vue b/resources/js/Pages/Vault/Journal/Show.vue
index c4e0ca398..968047f04 100644
--- a/resources/js/Pages/Vault/Journal/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Show.vue
@@ -29,15 +29,15 @@ const destroy = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -66,14 +66,14 @@ const destroy = () => {
           <div class="mb-8 inline-flex rounded-md shadow-sm">
             <inertia-link
               :href="data.url.show"
-              class="inline-flex items-center border border-gray-200 bg-gray-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-l-lg rtl:rounded-r-lg dark:border-gray-600 dark:bg-gray-400 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center rounded-s-lg border border-gray-200 bg-gray-100 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-400 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 w-4 ltr:mr-2 rtl:ml-2">
+                class="me-2 h-4 w-4">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -86,14 +86,14 @@ const destroy = () => {
             <inertia-link
               :href="data.url.photo_index"
               :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': defaultTab === 'life_events' }"
-              class="inline-flex items-center border-b border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 ltr:rounded-r-md ltr:border-r rtl:rounded-l-md rtl:border-l dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center rounded-e-md border-b border-s border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 w-4 ltr:mr-2 rtl:ml-2">
+                class="me-2 h-4 w-4">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -110,7 +110,7 @@ const destroy = () => {
           <div class="p-3 sm:p-0">
             <!-- years -->
             <p v-if="data.years.length > 0" class="mb-2 font-medium">
-              <span class="ltr:mr-1 rtl:ml-1"> 📆 </span> {{ $t('Years') }}
+              <span class="me-1"> 📆 </span> {{ $t('Years') }}
             </p>
             <ul v-if="data.years.length > 0" class="mb-8">
               <li v-for="year in data.years" :key="year.year" class="mb-2 flex items-center justify-between last:mb-0">
@@ -121,7 +121,7 @@ const destroy = () => {
 
             <!-- tags -->
             <p v-if="data.tags.length > 0" class="mb-2 font-medium">
-              <span class="ltr:mr-1 rtl:ml-1"> ⚡ </span> {{ $t('All tags') }}
+              <span class="me-1"> ⚡ </span> {{ $t('All tags') }}
             </p>
             <ul v-if="data.tags.length > 0" class="">
               <li v-for="tag in data.tags" :key="tag.id" class="mb-2 flex items-center justify-between">
@@ -172,7 +172,7 @@ const destroy = () => {
                       :key="post.id"
                       class="flex items-center border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                       <!-- written at -->
-                      <div class="rounded-lg border border-gray-200 p-2 text-center leading-tight ltr:mr-4 rtl:ml-4">
+                      <div class="me-4 rounded-lg border border-gray-200 p-2 text-center leading-tight">
                         <span class="block text-xs uppercase">{{ post.written_at_day }}</span>
                         <span class="text-xl">{{ post.written_at_day_number }}</span>
                       </div>
@@ -214,12 +214,12 @@ const destroy = () => {
             </div>
 
             <!-- slices of life -->
-            <p class="mb-2 font-medium"><span class="ltr:mr-1 rtl:ml-1"> 🍕 </span> {{ $t('Slices of life') }}</p>
+            <p class="mb-2 font-medium"><span class="me-1"> 🍕 </span> {{ $t('Slices of life') }}</p>
             <div v-if="data.slices.length > 0" class="mb-2">
               <div v-for="slice in data.slices" :key="slice.id" class="mb-6 last:mb-0">
                 <img v-if="slice.cover_image" class="h-32 w-full rounded-t" :src="slice.cover_image" alt="" />
                 <div
-                  class="rounded-b border-b border-gray-200 px-3 py-2 hover:bg-slate-50 ltr:border-l ltr:border-r rtl:border-l rtl:border-r dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
+                  class="rounded-b border-b border-s border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
                   :class="slice.cover_image ? '' : 'border-t'">
                   <inertia-link :href="slice.url.show" class="font-semibold">{{ slice.name }}</inertia-link>
                   <p class="text-xs text-gray-600">{{ slice.date_range }}</p>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Edit.vue b/resources/js/Pages/Vault/Journal/Slices/Edit.vue
index 61b6b4265..28d1a2768 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Edit.vue
@@ -41,15 +41,15 @@ const submit = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -59,12 +59,12 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <inertia-link :href="data.journal.url.show" class="text-blue-500 hover:underline">{{
                 data.journal.name
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -74,12 +74,12 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <inertia-link :href="data.url.slices_index" class="text-blue-500 hover:underline">{{
                 $t('Slices of life')
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -89,12 +89,12 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <inertia-link :href="data.slice.url.show" class="text-blue-500 hover:underline">{{
                 data.slice.name
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -139,7 +139,7 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Index.vue b/resources/js/Pages/Vault/Journal/Slices/Index.vue
index 6b0fa67cd..0b1c59fcb 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Index.vue
@@ -52,15 +52,15 @@ const submit = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -70,12 +70,12 @@ const submit = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <inertia-link :href="data.journal.url.show" class="text-blue-500 hover:underline">{{
                 data.journal.name
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -96,7 +96,7 @@ const submit = () => {
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="ltr:mr-1 rtl:ml-1"> 🍕 </span>
+            <span class="me-1"> 🍕 </span>
 
             {{ $t('All the slices of life in :name', { name: data.journal.name }) }}
           </h3>
@@ -130,10 +130,7 @@ const submit = () => {
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click="createSliceOfLifeModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createSliceOfLifeModalShown = false" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Show.vue b/resources/js/Pages/Vault/Journal/Slices/Show.vue
index 79369eb59..c361a01f0 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Show.vue
@@ -66,15 +66,15 @@ const destroy = () => {
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
                 {{ $t('Journals') }}
               </inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -84,12 +84,12 @@ const destroy = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <inertia-link :href="data.journal.url.show" class="text-blue-500 hover:underline">{{
                 data.journal.name
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -99,12 +99,12 @@ const destroy = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <inertia-link :href="data.url.slices_index" class="text-blue-500 hover:underline">{{
                 $t('Slices of life')
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -167,7 +167,7 @@ const destroy = () => {
             v-if="!data.canUploadFile"
             class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <p class="bg-gray-100 p-3 text-center">
-              <span class="ltr:mr-1 rtl:ml-1">⚠️</span> {{ $t('You don’t have enough space left in your account.') }}
+              <span class="me-1">⚠️</span> {{ $t('You don’t have enough space left in your account.') }}
             </p>
           </div>
 
@@ -191,7 +191,7 @@ const destroy = () => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 pr-2 ltr:mr-0 rtl:ml-0">
+                class="me-0 h-4 pr-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -209,7 +209,7 @@ const destroy = () => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 pr-2 ltr:mr-0 rtl:ml-0">
+                class="me-0 h-4 pr-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -224,10 +224,7 @@ const destroy = () => {
               <p class="mb-2 text-sm font-bold">{{ $t('Contacts in this slice') }}</p>
               <ul class="mb-6">
                 <li v-for="contact in data.contacts" :key="contact.id">
-                  <contact-card
-                    :contact="contact"
-                    :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
-                    :displayName="true" />
+                  <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
                 </li>
               </ul>
             </div>
@@ -265,7 +262,7 @@ const destroy = () => {
                 :key="post.id"
                 class="flex items-center border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- written at -->
-                <div class="rounded-lg border border-gray-200 p-2 text-center leading-tight ltr:mr-4 rtl:ml-4">
+                <div class="me-4 rounded-lg border border-gray-200 p-2 text-center leading-tight">
                   <span class="block text-xs uppercase">{{ post.written_at_day }}</span>
                   <span class="text-xl">{{ post.written_at_day_number }}</span>
                 </div>
diff --git a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
index e13a0cb6f..748ad54d9 100644
--- a/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Cities/Index.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -33,12 +33,12 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline">{{
                 $t('List of addresses')
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -48,7 +48,7 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">{{ data.city }}</li>
+            <li class="me-2 inline">{{ data.city }}</li>
           </ul>
         </div>
       </div>
@@ -83,11 +83,8 @@ defineProps({
                 class="item-list border-b border-gray-200 px-3 pb-2 pt-3 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <span class="mb-1 block">{{ address.address }}</span>
                 <ul class="list">
-                  <li v-for="contact in address.contacts" :key="contact.id" class="inline ltr:mr-3 rtl:ml-3">
-                    <contact-card
-                      :contact="contact"
-                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
-                      :displayName="true" />
+                  <li v-for="contact in address.contacts" :key="contact.id" class="me-3 inline">
+                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
                   </li>
                 </ul>
               </li>
diff --git a/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
index ae1f73fd7..723a8fae6 100644
--- a/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Countries/Index.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -33,12 +33,12 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.addresses" class="text-blue-500 hover:underline">{{
                 $t('List of addresses')
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -48,7 +48,7 @@ defineProps({
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
               </svg>
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">{{ data.country }}</li>
+            <li class="me-2 inline">{{ data.country }}</li>
           </ul>
         </div>
       </div>
@@ -83,11 +83,8 @@ defineProps({
                 class="item-list border-b border-gray-200 px-3 pb-2 pt-3 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <span class="mb-1 block">{{ address.address }}</span>
                 <ul class="list">
-                  <li v-for="contact in address.contacts" :key="contact.id" class="inline ltr:mr-3 rtl:ml-3">
-                    <contact-card
-                      :contact="contact"
-                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
-                      :displayName="true" />
+                  <li v-for="contact in address.contacts" :key="contact.id" class="me-3 inline">
+                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
                   </li>
                 </ul>
               </li>
diff --git a/resources/js/Pages/Vault/Reports/Address/Index.vue b/resources/js/Pages/Vault/Reports/Address/Index.vue
index fd7570a22..3fa7393fd 100644
--- a/resources/js/Pages/Vault/Reports/Address/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Index.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="layoutData.vault.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -44,7 +44,7 @@ defineProps({
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
           <!-- left -->
           <div>
-            <p class="mb-2 font-semibold"><span class="ltr:mr-1 rtl:ml-1">🌍</span> {{ $t('All the countries') }}</p>
+            <p class="mb-2 font-semibold"><span class="me-1">🌍</span> {{ $t('All the countries') }}</p>
 
             <!-- list of countries -->
             <ul v-if="data.countries.length > 0">
@@ -65,7 +65,7 @@ defineProps({
 
           <!-- right -->
           <div class="p-3 sm:px-3 sm:py-0">
-            <p class="mb-2 font-semibold"><span class="ltr:mr-1 rtl:ml-1">🏙️</span> {{ $t('All the cities') }}</p>
+            <p class="mb-2 font-semibold"><span class="me-1">🏙️</span> {{ $t('All the cities') }}</p>
 
             <!-- list of cities -->
             <ul v-if="data.cities.length > 0">
diff --git a/resources/js/Pages/Vault/Reports/ImportantDate/Index.vue b/resources/js/Pages/Vault/Reports/ImportantDate/Index.vue
index 002151de5..d40f342a0 100644
--- a/resources/js/Pages/Vault/Reports/ImportantDate/Index.vue
+++ b/resources/js/Pages/Vault/Reports/ImportantDate/Index.vue
@@ -15,15 +15,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -76,14 +76,14 @@ defineProps({
               :key="date.id"
               class="item-list flex items-center justify-between border-b border-gray-200 p-3 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <div>
-                <span class="font-mono text-xs text-gray-600 ltr:mr-3 rtl:ml-3">{{ date.happened_at }}</span>
+                <span class="me-3 font-mono text-xs text-gray-600">{{ date.happened_at }}</span>
                 <span>{{ date.label }}</span>
               </div>
 
               <div>
                 <contact-card
                   :contact="date.contact"
-                  :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
+                  :avatarClasses="'h-5 w-5 rounded-full me-2'"
                   :displayName="true" />
               </div>
             </li>
diff --git a/resources/js/Pages/Vault/Reports/MoodTrackingEvents/Index.vue b/resources/js/Pages/Vault/Reports/MoodTrackingEvents/Index.vue
index 1776c50af..f425daca9 100644
--- a/resources/js/Pages/Vault/Reports/MoodTrackingEvents/Index.vue
+++ b/resources/js/Pages/Vault/Reports/MoodTrackingEvents/Index.vue
@@ -14,15 +14,15 @@ defineProps({
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
         <div class="flex items-baseline justify-between space-x-6">
           <ul class="text-sm">
-            <li class="inline text-gray-600 ltr:mr-2 rtl:ml-2 dark:text-gray-400">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="inline ltr:mr-2 rtl:ml-2">
+            <li class="me-2 inline">
               <inertia-link :href="data.url.reports" class="text-blue-500 hover:underline">{{
                 $t('Reports')
               }}</inertia-link>
             </li>
-            <li class="relative inline ltr:mr-2 rtl:ml-2">
+            <li class="relative me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -65,15 +65,12 @@ defineProps({
         <!-- iteration over the month -->
         <div class="flex justify-center">
           <div v-for="month in data.months" :key="month.id" class="mb-6 flex flex-col text-center">
-            <h2 class="mb-1 font-mono text-sm font-bold ltr:mr-2 rtl:ml-2">{{ month.month_word }}</h2>
+            <h2 class="mb-1 me-2 font-mono text-sm font-bold">{{ month.month_word }}</h2>
 
             <div v-for="day in month.days" :key="day.id">
-              <div
-                v-if="day.event"
-                class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2"
-                :class="day.event.hex_color" />
-              <div v-else class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2">
-                <div class="inline-block h-4 w-4 rounded-full bg-slate-100 ltr:mr-2 rtl:ml-2" />
+              <div v-if="day.event" class="me-2 inline-block h-4 w-4 rounded-full" :class="day.event.hex_color" />
+              <div v-else class="me-2 inline-block h-4 w-4 rounded-full">
+                <div class="me-2 inline-block h-4 w-4 rounded-full bg-slate-100" />
               </div>
             </div>
           </div>
diff --git a/resources/js/Pages/Vault/Search/Partials/Note.vue b/resources/js/Pages/Vault/Search/Partials/Note.vue
index 80b6c763f..43bb16d20 100644
--- a/resources/js/Pages/Vault/Search/Partials/Note.vue
+++ b/resources/js/Pages/Vault/Search/Partials/Note.vue
@@ -49,7 +49,7 @@
         <div
           class="flex border-t border-gray-200 px-3 py-2 text-xs text-gray-600 hover:rounded-b hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 dark:text-gray-400 hover:dark:bg-slate-800">
           <!-- date -->
-          <div class="relative inline ltr:mr-3 rtl:ml-3">
+          <div class="relative me-3 inline">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               class="icon-note relative inline h-4 w-4 text-gray-400"
@@ -66,10 +66,10 @@
           </div>
 
           <!-- contact -->
-          <div class="relative inline ltr:mr-3 rtl:ml-3">
+          <div class="relative me-3 inline">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="icon-note relative inline h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1"
+              class="icon-note relative me-1 inline h-4 w-4 text-gray-400"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
diff --git a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
index 80a8215ae..695d0e6e8 100644
--- a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 📁 </span>
+        <span class="me-1"> 📁 </span>
         {{ $t('All the important date types used in the vault') }}
       </h3>
       <pretty-button v-if="!createTypeModalShown" :text="$t('Add a type')" :icon="'plus'" @click="showTypeModal" />
@@ -32,7 +32,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createTypeModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createTypeModalShown = false" />
         <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -51,7 +51,7 @@
             {{ type.label }}
             <span
               v-if="type.internal_type"
-              class="inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0 ltr:mr-2 rtl:ml-2"
+              class="me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0"
               >{{ type.internal_type }}</span
             >
           </span>
@@ -63,7 +63,7 @@
             </li>
             <li
               v-if="type.can_be_deleted"
-              class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4 hover:dark:text-red-100"
+              class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900 hover:dark:text-red-100"
               @click="destroy(type)">
               {{ $t('Delete') }}
             </li>
@@ -93,10 +93,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click.prevent="editTypeModalShownId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editTypeModalShownId = 0" />
             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
index e855c8465..f6adda08a 100644
--- a/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 📐 </span>
+        <span class="me-1"> 📐 </span>
         {{ $t('Default template to display contacts') }}
       </h3>
     </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Delete.vue b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
index df7b9be00..1ae03e05e 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Delete.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🗑 </span>
+        <span class="me-1"> 🗑 </span>
         {{ $t('Delete the vault') }}
       </h3>
     </div>
@@ -39,7 +39,7 @@
       <p class="mb-1 px-5 py-2 text-center">
         <pretty-link
           :text="$t('Delete the vault')"
-          :classes="'ltr:mr-3 rtl:ml-3 text-red-600 dark:text-red-400 border-red-600 dark:border-red-400'"
+          :classes="'me-3 text-red-600 dark:text-red-400 border-red-600 dark:border-red-400'"
           @click="destroy" />
       </p>
     </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Labels.vue b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
index 4f4c2bb95..a7b1c4fa4 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Labels.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🏷 </span>
+        <span class="me-1"> 🏷 </span>
         {{ $t('All the labels used in the vault') }}
       </h3>
       <pretty-button v-if="!createlabelModalShown" :text="$t('Add a label')" :icon="'plus'" @click="showLabelModal" />
@@ -45,7 +45,7 @@
               @click="form.text_color = color.text_color" />
             <label
               :for="color.bg_color"
-              class="inline-block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+              class="ms-2 inline-block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
               <div class="rounded p-4" :class="color.bg_color" />
             </label>
           </div>
@@ -53,7 +53,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createlabelModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createlabelModalShown = false" />
         <pretty-button :text="$t('Create label')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -69,8 +69,8 @@
         <!-- detail of the label -->
         <div v-if="editLabelModalShownId != label.id" class="flex items-center justify-between px-5 py-2">
           <span class="flex items-center text-base">
-            <div class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="label.bg_color" />
-            <span class="ltr:mr-2 rtl:ml-2">{{ label.name }}</span>
+            <div class="me-2 inline-block h-4 w-4 rounded-full" :class="label.bg_color" />
+            <span class="me-2">{{ label.name }}</span>
             <span v-if="label.count > 0" class="text-xs text-gray-500"
               >({{ $tChoice(':count contact|:count contacts', label.count, { count: label.count }) }})</span
             >
@@ -78,7 +78,7 @@
 
           <!-- actions -->
           <ul class="text-sm">
-            <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateLabelModal(label)">
+            <li class="me-4 inline cursor-pointer" @click="updateLabelModal(label)">
               <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
             </li>
             <li
@@ -125,7 +125,7 @@
                   @click="form.text_color = color.text_color" />
                 <label
                   :for="color.bg_color"
-                  class="inline-block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                  class="ms-2 inline-block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   <div class="rounded p-4" :class="color.bg_color" />
                 </label>
               </div>
@@ -133,10 +133,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'ltr:mr-3 rtl:ml-3'"
-              @click.prevent="editLabelModalShownId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editLabelModalShownId = 0" />
             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
index b448b18fb..d5ad0c03c 100644
--- a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
@@ -200,7 +200,7 @@ const destroyLifeEventType = (lifeEventType) => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 👩‍🍼 </span>
+        <span class="me-1"> 👩‍🍼 </span>
         {{ $t('Life event types and categories') }}
       </h3>
       <pretty-button
@@ -232,10 +232,7 @@ const destroyLifeEventType = (lifeEventType) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span
-          :text="$t('Cancel')"
-          :classes="'ltr:mr-3 rtl:ml-3'"
-          @click="createLifeEventCategoryModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createLifeEventCategoryModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -254,9 +251,9 @@ const destroyLifeEventType = (lifeEventType) => {
               class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
               <div class="mb-3 flex items-center justify-between">
                 <!-- icon to move position -->
-                <div class="flex ltr:mr-2 rtl:ml-2">
+                <div class="me-2 flex">
                   <svg
-                    class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                    class="handle me-2 cursor-move"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -281,16 +278,14 @@ const destroyLifeEventType = (lifeEventType) => {
                   <li class="inline cursor-pointer" @click="renameLifeEventCategoryModal(element)">
                     <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                   </li>
-                  <li
-                    class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
-                    @click="destroy(element)">
+                  <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                     {{ $t('Delete') }}
                   </li>
                 </ul>
               </div>
 
               <!-- available life event types -->
-              <div class="ltr:ml-8 rtl:mr-8">
+              <div class="ms-8">
                 <p class="mb-1 text-sm text-gray-500">{{ $t('Life event types:') }}</p>
 
                 <draggable
@@ -305,9 +300,9 @@ const destroyLifeEventType = (lifeEventType) => {
                         class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                         <div class="flex items-center justify-between">
                           <!-- icon to move position -->
-                          <div class="flex ltr:mr-2 rtl:ml-2">
+                          <div class="me-2 flex">
                             <svg
-                              class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                              class="handle me-2 cursor-move"
                               width="24"
                               height="24"
                               viewBox="0 0 24 24"
@@ -333,7 +328,7 @@ const destroyLifeEventType = (lifeEventType) => {
                               <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
                             </li>
                             <li
-                              class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                              class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                               @click="destroyLifeEventType(element)">
                               {{ $t('Delete') }}
                             </li>
@@ -364,10 +359,7 @@ const destroyLifeEventType = (lifeEventType) => {
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span
-                          :text="$t('Cancel')"
-                          :classes="'ltr:mr-3 rtl:ml-3'"
-                          @click="lifeEventCategoryId = 0" />
+                        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="lifeEventCategoryId = 0" />
                         <pretty-button
                           :text="$t('Rename')"
                           :state="loadingState"
@@ -414,7 +406,7 @@ const destroyLifeEventType = (lifeEventType) => {
                   <div class="flex justify-between p-5">
                     <pretty-span
                       :text="$t('Cancel')"
-                      :classes="'ltr:mr-3 rtl:ml-3'"
+                      :classes="'me-3'"
                       @click="createLifeEventTypeModalShown = false" />
                     <pretty-button
                       :text="$t('Save')"
@@ -467,10 +459,7 @@ const destroyLifeEventType = (lifeEventType) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span
-                :text="$t('Cancel')"
-                :classes="'ltr:mr-3 rtl:ml-3'"
-                @click.prevent="editLifeEventCategoryId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editLifeEventCategoryId = 0" />
               <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
index fafa9c124..0be0a463d 100644
--- a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
@@ -114,7 +114,7 @@ const updatePosition = (event) => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🤭 </span>
+        <span class="me-1"> 🤭 </span>
         {{ $t('Mood tracking parameters') }}
       </h3>
       <pretty-button
@@ -159,7 +159,7 @@ const updatePosition = (event) => {
               @click="form.hex_color = color.hex_color" />
             <label
               :for="color.hex_color"
-              class="inline-block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+              class="ms-2 inline-block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
               <div class="rounded p-4" :class="color.hex_color" />
             </label>
           </div>
@@ -167,10 +167,7 @@ const updatePosition = (event) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span
-          :text="$t('Cancel')"
-          :classes="'ltr:mr-3 rtl:ml-3'"
-          @click="createMoodTrackingParametersModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createMoodTrackingParametersModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -205,9 +202,9 @@ const updatePosition = (event) => {
             v-if="editMoodTrackingParameterId != element.id"
             class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- icon to move position -->
-            <div class="flex items-center ltr:mr-2 rtl:ml-2">
+            <div class="me-2 flex items-center">
               <svg
-                class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                class="handle me-2 cursor-move"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
@@ -224,8 +221,8 @@ const updatePosition = (event) => {
                 <path d="M17 15H15V17H17V15Z" fill="currentColor" />
               </svg>
 
-              <div class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="element.hex_color" />
-              <span class="ltr:mr-2 rtl:ml-2">{{ element.label }}</span>
+              <div class="me-2 inline-block h-4 w-4 rounded-full" :class="element.hex_color" />
+              <span class="me-2">{{ element.label }}</span>
             </div>
 
             <!-- actions -->
@@ -235,9 +232,7 @@ const updatePosition = (event) => {
                 @click="renameMoodTrackingParameterModal(element)">
                 {{ $t('Rename') }}
               </li>
-              <li
-                class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
-                @click="destroy(element)">
+              <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                 {{ $t('Delete') }}
               </li>
             </ul>
@@ -280,7 +275,7 @@ const updatePosition = (event) => {
                     @click="form.hex_color = color.hex_color" />
                   <label
                     :for="color.hex_color"
-                    class="inline-block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                    class="ms-2 inline-block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     <div class="rounded p-4" :class="color.hex_color" />
                   </label>
                 </div>
@@ -288,10 +283,7 @@ const updatePosition = (event) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span
-                :text="$t('Cancel')"
-                :classes="'ltr:mr-3 rtl:ml-3'"
-                @click.prevent="editMoodTrackingParameterId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editMoodTrackingParameterId = 0" />
               <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
index 1f12849e6..cdbf7d1ec 100644
--- a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
@@ -107,7 +107,7 @@ const updatePosition = (event) => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🧑‍🏭 </span>
+        <span class="me-1"> 🧑‍🏭 </span>
         {{ $t('Quick facts template') }}
       </h3>
       <pretty-button
@@ -139,7 +139,7 @@ const updatePosition = (event) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createEntryModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createEntryModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -159,9 +159,9 @@ const updatePosition = (event) => {
             v-if="editEntryId != element.id"
             class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- icon to move position -->
-            <div class="flex ltr:mr-2 rtl:ml-2">
+            <div class="me-2 flex">
               <svg
-                class="handle cursor-move ltr:mr-2 rtl:ml-2"
+                class="handle me-2 cursor-move"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
@@ -186,9 +186,7 @@ const updatePosition = (event) => {
               <li class="inline cursor-pointer" @click="renameEntryModal(element)">
                 <span class="text-blue-500 hover:underline">{{ $t('Rename') }}</span>
               </li>
-              <li
-                class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
-                @click="destroy(element)">
+              <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                 {{ $t('Delete') }}
               </li>
             </ul>
@@ -215,7 +213,7 @@ const updatePosition = (event) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click.prevent="editEntryId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editEntryId = 0" />
               <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue b/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
index 6ff12a3fa..b88bfc9ff 100644
--- a/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
@@ -36,7 +36,7 @@ const update = () => {
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🎟️ </span>
+        <span class="me-1"> 🎟️ </span>
 
         {{ $t('Tabs visibility') }}
       </h3>
@@ -69,7 +69,7 @@ const update = () => {
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Calendar tab') }} </span>
+            <span class="ms-3 dark:text-gray-300"> {{ $t('Show Calendar tab') }} </span>
           </label>
         </li>
         <li
@@ -83,7 +83,7 @@ const update = () => {
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Journals tab') }} </span>
+            <span class="ms-3 dark:text-gray-300"> {{ $t('Show Journals tab') }} </span>
           </label>
         </li>
         <li
@@ -97,7 +97,7 @@ const update = () => {
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Groups tab') }} </span>
+            <span class="ms-3 dark:text-gray-300"> {{ $t('Show Groups tab') }} </span>
           </label>
         </li>
         <li
@@ -111,7 +111,7 @@ const update = () => {
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Companies tab') }} </span>
+            <span class="ms-3 dark:text-gray-300"> {{ $t('Show Companies tab') }} </span>
           </label>
         </li>
         <li
@@ -125,7 +125,7 @@ const update = () => {
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Tasks tab') }} </span>
+            <span class="ms-3 dark:text-gray-300"> {{ $t('Show Tasks tab') }} </span>
           </label>
         </li>
         <li
@@ -139,7 +139,7 @@ const update = () => {
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Reports tab') }} </span>
+            <span class="ms-3 dark:text-gray-300"> {{ $t('Show Reports tab') }} </span>
           </label>
         </li>
         <li
@@ -153,7 +153,7 @@ const update = () => {
               @change="update" />
             <div
               class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[22px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-            <span class="ltr:ml-3 rtl:mr-3 dark:text-gray-300"> {{ $t('Show Files tab') }} </span>
+            <span class="ms-3 dark:text-gray-300"> {{ $t('Show Files tab') }} </span>
           </label>
         </li>
       </ul>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Tags.vue b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
index ffa317865..3d585dad9 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Tags.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> ⚡ </span>
+        <span class="me-1"> ⚡ </span>
         {{ $t('All the tags used in the vault') }}
       </h3>
       <pretty-button v-if="!createTagModalShown" :text="$t('Add a tag')" :icon="'plus'" @click="showLabelModal" />
@@ -32,7 +32,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createTagModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createTagModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -48,7 +48,7 @@
         <!-- detail of the tag -->
         <div v-if="editTagModalShownId != tag.id" class="flex items-center justify-between px-5 py-2">
           <span class="flex items-center text-base">
-            <span class="ltr:mr-2 rtl:ml-2">{{ tag.name }}</span>
+            <span class="me-2">{{ tag.name }}</span>
             <span v-if="tag.count > 0" class="text-xs text-gray-500"
               >({{ $tChoice(':count post|:count posts', tag.count, { count: tag.count }) }})</span
             >
@@ -56,7 +56,7 @@
 
           <!-- actions -->
           <ul class="text-sm">
-            <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="updateTagModal(tag)">
+            <li class="me-4 inline cursor-pointer" @click="updateTagModal(tag)">
               <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
             </li>
             <li
@@ -90,7 +90,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click.prevent="editTagModalShownId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editTagModalShownId = 0" />
             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Users.vue b/resources/js/Pages/Vault/Settings/Partials/Users.vue
index 810b411de..90f4b6c99 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Users.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Users.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 mt-8 items-center justify-between sm:mt-0 sm:flex">
       <h3 class="mb-4 sm:mb-0">
-        <span class="ltr:mr-1 rtl:ml-1"> 🐱 </span>
+        <span class="me-1"> 🐱 </span>
         {{ $t('Users') }}
       </h3>
       <pretty-span v-if="!addUserModalShown" :text="$t('Add a user')" :icon="'plus'" @click="showAddUserModal" />
@@ -36,7 +36,7 @@
             class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
           <label
             :for="'user' + user.id"
-            class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+            class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ user.name }}
           </label>
         </div>
@@ -59,11 +59,9 @@
               name="permission"
               type="radio"
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-            <label
-              for="viewer"
-              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+            <label for="viewer" class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
               {{ $t('Viewer') }}
-              <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
+              <span class="ms-4 font-normal text-gray-500">
                 {{ $t('Can view data, but can’t edit it.') }}
               </span>
             </label>
@@ -78,11 +76,9 @@
               name="permission"
               type="radio"
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-            <label
-              for="editor"
-              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+            <label for="editor" class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
               {{ $t('Editor') }}
-              <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
+              <span class="ms-4 font-normal text-gray-500">
                 {{ $t('Can edit data, but can’t manage the vault.') }}
               </span>
             </label>
@@ -97,11 +93,9 @@
               name="permission"
               type="radio"
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-            <label
-              for="manager"
-              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+            <label for="manager" class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
               {{ $t('Manager') }}
-              <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
+              <span class="ms-4 font-normal text-gray-500">
                 {{ $t('Can do everything, including adding or removing other users.') }}
               </span>
             </label>
@@ -134,7 +128,7 @@
 
             <!-- actions -->
             <ul v-if="user.id != layoutData.user.id" class="text-sm">
-              <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4" @click="showChangePermissionModal(user)">
+              <li class="me-4 inline cursor-pointer" @click="showChangePermissionModal(user)">
                 <span class="text-blue-500 hover:underline">{{ $t('Change permission') }}</span>
               </li>
               <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(user)">
@@ -162,7 +156,7 @@
                   type="radio"
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 {{ $t('Viewer') }}
-                <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
+                <span class="ms-4 font-normal text-gray-500">
                   {{ $t('Can view data, but can’t edit it.') }}
                 </span>
               </div>
@@ -178,9 +172,9 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="editor"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                  class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Editor') }}
-                  <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
+                  <span class="ms-4 font-normal text-gray-500">
                     {{ $t('Can edit data, but can’t manage the vault.') }}
                   </span>
                 </label>
@@ -197,9 +191,9 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="manager"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                  class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Manager') }}
-                  <span class="font-normal text-gray-500 ltr:ml-4 rtl:mr-4">
+                  <span class="ms-4 font-normal text-gray-500">
                     {{ $t('Can do everything, including adding or removing other users.') }}
                   </span>
                 </label>
diff --git a/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue b/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue
index 847f99f9b..cd520d791 100644
--- a/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue
+++ b/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue
@@ -37,7 +37,7 @@ const deleteKey = () => {
       </JetSecondaryButton>
 
       <JetDangerButton
-        class="ltr:ml-2 rtl:mr-2"
+        class="ms-2"
         @click="deleteKey"
         :class="{ 'opacity-25': form.processing }"
         :disabled="form.processing">
diff --git a/resources/js/Pages/Webauthn/Partials/RegisterKey.vue b/resources/js/Pages/Webauthn/Partials/RegisterKey.vue
index e8c796763..948475f2a 100644
--- a/resources/js/Pages/Webauthn/Partials/RegisterKey.vue
+++ b/resources/js/Pages/Webauthn/Partials/RegisterKey.vue
@@ -94,7 +94,7 @@ const stop = () => {
         {{ $t('Cancel') }}
       </JetSecondaryButton>
 
-      <JetButton class="ltr:ml-2 rtl:mr-2" :class="{ 'opacity-25': processing }" :disabled="processing">
+      <JetButton class="ms-2" :class="{ 'opacity-25': processing }" :disabled="processing">
         {{ $t('Submit') }}
       </JetButton>
     </div>
diff --git a/resources/js/Pages/Webauthn/Partials/UpdateKey.vue b/resources/js/Pages/Webauthn/Partials/UpdateKey.vue
index d94fa35da..f97542cf4 100644
--- a/resources/js/Pages/Webauthn/Partials/UpdateKey.vue
+++ b/resources/js/Pages/Webauthn/Partials/UpdateKey.vue
@@ -64,7 +64,7 @@ watch(
         {{ $t('Cancel') }}
       </JetSecondaryButton>
 
-      <JetButton class="ltr:ml-2 rtl:mr-2" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+      <JetButton class="ms-2" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
         {{ $t('Update') }}
       </JetButton>
     </div>
diff --git a/resources/js/Pages/Webauthn/Partials/WaitForKey.vue b/resources/js/Pages/Webauthn/Partials/WaitForKey.vue
index c893682b6..335d076b1 100644
--- a/resources/js/Pages/Webauthn/Partials/WaitForKey.vue
+++ b/resources/js/Pages/Webauthn/Partials/WaitForKey.vue
@@ -28,7 +28,7 @@ defineEmits(['retry']);
         v-if="form.processing"
         class="mb-4 flex rounded-b border-t-4 border-teal-500 bg-teal-100 px-4 py-8 shadow-md dark:bg-teal-900 dark:shadow-gray-700"
         role="alert">
-        <div class="text-teal-800 ltr:mr-2 rtl:ml-2 dark:text-teal-200">
+        <div class="me-2 text-teal-800 dark:text-teal-200">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -54,7 +54,7 @@ defineEmits(['retry']);
       <div
         v-else-if="!form.hasErrors"
         class="mb-4 flex rounded-b border-t-4 border-indigo-500 bg-indigo-100 px-4 py-8 shadow-md dark:bg-indigo-900 dark:shadow-gray-700">
-        <div class="text-indigo-800 ltr:mr-2 rtl:ml-2 dark:text-indigo-200">
+        <div class="me-2 text-indigo-800 dark:text-indigo-200">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
diff --git a/resources/js/Pages/Webauthn/WebauthnKeys.vue b/resources/js/Pages/Webauthn/WebauthnKeys.vue
index e5516f61e..e029edcca 100644
--- a/resources/js/Pages/Webauthn/WebauthnKeys.vue
+++ b/resources/js/Pages/Webauthn/WebauthnKeys.vue
@@ -173,7 +173,7 @@ const webauthnRegisterCallback = (data) => {
             </svg>
           </div>
 
-          <div class="w-48 ltr:ml-3 rtl:mr-3">
+          <div class="ms-3 w-48">
             <div class="text-sm text-gray-600 dark:text-gray-400">
               {{ key.name }}
             </div>
@@ -185,7 +185,7 @@ const webauthnRegisterCallback = (data) => {
             </div>
           </div>
 
-          <div class="text-sm ltr:ml-3 rtl:mr-3">
+          <div class="ms-3 text-sm">
             <JetSecondaryButton
               class="pointer text-indigo-400 hover:text-indigo-600"
               href=""
@@ -193,7 +193,7 @@ const webauthnRegisterCallback = (data) => {
               {{ $t('Update') }}
             </JetSecondaryButton>
             <JetConfirmsPassword @confirmed="keyBeingDeleted = key.id">
-              <JetSecondaryButton class="pointer text-indigo-400 hover:text-indigo-600 ltr:ml-2 rtl:mr-2" href="">
+              <JetSecondaryButton class="pointer ms-2 text-indigo-400 hover:text-indigo-600" href="">
                 {{ $t('Delete') }}
               </JetSecondaryButton>
             </JetConfirmsPassword>
diff --git a/resources/js/Pages/Webauthn/WebauthnLogin.vue b/resources/js/Pages/Webauthn/WebauthnLogin.vue
index 76060143e..3815fa1c5 100644
--- a/resources/js/Pages/Webauthn/WebauthnLogin.vue
+++ b/resources/js/Pages/Webauthn/WebauthnLogin.vue
@@ -114,7 +114,7 @@ const webauthnLoginCallback = (data) => {
 
       <JetInputError :message="authForm.errors.data" class="mt-2" />
 
-      <JetButton class="ltr:ml-2 rtl:mr-2" @click="start()" v-show="!processing">
+      <JetButton class="ms-2" @click="start()" v-show="!processing">
         {{ $t('Retry') }}
       </JetButton>
     </div>
diff --git a/resources/js/Shared/ContactCard.vue b/resources/js/Shared/ContactCard.vue
index 55e8e2be8..626002bbe 100644
--- a/resources/js/Shared/ContactCard.vue
+++ b/resources/js/Shared/ContactCard.vue
@@ -5,7 +5,7 @@
       <template #content>
         <div class="flex">
           <!-- avatar -->
-          <div class="ltr:mr-2 rtl:ml-2">
+          <div class="me-2">
             <div v-if="contact.avatar.type === 'svg'" class="h-16 w-16 rounded-full" v-html="contact.avatar.content" />
             <img v-else class="h-16 w-16 rounded-full" :src="contact.avatar.content" alt="avatar" />
           </div>
@@ -21,7 +21,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
+                class="me-1 h-4 w-4 text-gray-400">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -40,7 +40,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
+                class="me-2 h-4 w-4 text-gray-400">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
diff --git a/resources/js/Shared/Form/ContactSelector.vue b/resources/js/Shared/Form/ContactSelector.vue
index 3c282aa8f..8ac85bf54 100644
--- a/resources/js/Shared/Form/ContactSelector.vue
+++ b/resources/js/Shared/Form/ContactSelector.vue
@@ -4,7 +4,9 @@
     <div>
       <label v-if="label" class="mb-2 block text-sm" :for="id">
         {{ label }}
-        <span v-if="!required" class="optional-badge dark:optional-badge text-xs"> {{ $t('optional') }} </span>
+        <span v-if="!required" class="optional-badge rounded px-[3px] py-px text-xs">
+          {{ $t('optional') }}
+        </span>
       </label>
 
       <!-- list of selected contacts -->
@@ -41,7 +43,7 @@
       <div class="relative mb-3">
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="icon-search absolute h-4 w-4 text-gray-400"
+          class="absolute start-2 top-[13px] h-4 w-4 text-gray-400"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor">
@@ -312,27 +314,13 @@ export default {
 
 <style lang="scss" scoped>
 .optional-badge {
-  border-radius: 4px;
   color: #283e59;
   background-color: #edf2f9;
-  padding: 1px 3px;
 }
 
-.dark .dark\:optional-badge {
+.dark .optional-badge {
   color: #d4d8dd;
-  background-color: #2f3031;
-}
-
-.icon-search {
-  top: 13px;
-}
-
-.ltr .icon-search {
-  left: 8px;
-}
-
-.rtl .icon-search {
-  right: 8px;
+  background-color: #2f3031 !important;
 }
 
 .item-list {
diff --git a/resources/js/Shared/Form/Dropdown.vue b/resources/js/Shared/Form/Dropdown.vue
index f53e81e5b..2f8149de9 100644
--- a/resources/js/Shared/Form/Dropdown.vue
+++ b/resources/js/Shared/Form/Dropdown.vue
@@ -2,7 +2,9 @@
   <div :class="divOuterClass">
     <label v-if="label" class="mb-2 block text-sm" :for="id">
       {{ label }}
-      <span v-if="!required" class="optional-badge dark:optional-badge text-xs"> {{ $t('optional') }} </span>
+      <span v-if="!required" class="optional-badge rounded px-[3px] py-px text-xs">
+        {{ $t('optional') }}
+      </span>
     </label>
 
     <div class="component relative">
@@ -90,7 +92,7 @@ export default {
   computed: {
     localDropdownClasses() {
       return [
-        'py-2 px-3 rounded-md shadow-sm sm:text-sm',
+        'py-2 px-3 ps-2 pe-5 ltr:bg-[right_3px_center] rtl:bg-[left_3px_center] rounded-md shadow-sm sm:text-sm',
         'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700',
         'focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 focus:outline-none',
         this.dropdownClass,
@@ -128,34 +130,12 @@ export default {
 
 <style lang="scss" scoped>
 .optional-badge {
-  border-radius: 4px;
   color: #283e59;
   background-color: #edf2f9;
-  padding: 1px 3px;
 }
 
-.dark .dark\:optional-badge {
-  color: #d4d8dd;
-  background-color: #2f3031;
-}
-
-.ltr .counter {
-  padding-right: 64px;
-}
-
-.rtl .counter {
-  padding-left: 64px;
-}
-
-.ltr select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
-
-.rtl select {
-  padding-right: 8px;
-  padding-left: 20px;
-  background-position: left 3px center;
+.dark .optional-badge {
+  color: #d4d8dd !important;
+  background-color: #2f3031 !important;
 }
 </style>
diff --git a/resources/js/Shared/Form/Errors.vue b/resources/js/Shared/Form/Errors.vue
index 147bb4d46..cf42d5a24 100644
--- a/resources/js/Shared/Form/Errors.vue
+++ b/resources/js/Shared/Form/Errors.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="dataerror || exception" class="border-red dark:border-red mb-3 rounded border p-3" v-bind="$attrs">
+    <div v-if="dataerror || exception" class="border-red mb-3 rounded border p-3" v-bind="$attrs">
       <p class="mb-2">{{ $t('Oops! Something went wrong.') }}</p>
       <template v-if="exception">
         <p class="mb0">
@@ -101,9 +101,9 @@ export default {
   color: #c53030;
 }
 
-.dark .dark\:border-red {
-  background-color: #333131;
-  border-color: #4b2626;
-  color: #c53030;
+.dark .border-red {
+  background-color: #333131 !important;
+  border-color: #4b2626 !important;
+  color: #c53030 !important;
 }
 </style>
diff --git a/resources/js/Shared/Form/PrettyButton.vue b/resources/js/Shared/Form/PrettyButton.vue
index e908eb632..1b299c42f 100644
--- a/resources/js/Shared/Form/PrettyButton.vue
+++ b/resources/js/Shared/Form/PrettyButton.vue
@@ -6,7 +6,7 @@
     <svg
       v-if="icon === 'plus' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative inline h-5 w-5 ltr:mr-1 rtl:ml-1"
+      class="icon relative me-1 inline h-5 w-5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor">
@@ -17,7 +17,7 @@
     <svg
       v-if="icon === 'check' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative inline h-5 w-5 ltr:mr-1 rtl:ml-1"
+      class="icon relative me-1 inline h-5 w-5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor">
@@ -28,7 +28,7 @@
     <svg
       v-if="icon === 'minus' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative inline h-5 w-5 ltr:ml-1 ltr:mr-1 rtl:ml-1 rtl:mr-1"
+      class="icon relative me-1 ms-1 inline h-5 w-5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
@@ -44,7 +44,7 @@
     <svg
       v-if="icon === 'arrow' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative inline h-5 w-5 ltr:ml-1 ltr:mr-1 rtl:ml-1 rtl:mr-1"
+      class="icon relative me-1 ms-1 inline h-5 w-5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor">
@@ -95,8 +95,8 @@ export default {
   background-color: #fcf27e;
 }
 
-.dark .dark\:save {
-  background-color: #d0c10d;
+.dark .save {
+  background-color: #d0c10d !important;
   color: rgb(31 41 55); // text-gray-800
 }
 
diff --git a/resources/js/Shared/Form/PrettyLink.vue b/resources/js/Shared/Form/PrettyLink.vue
index c3c828a2b..079aa24ab 100644
--- a/resources/js/Shared/Form/PrettyLink.vue
+++ b/resources/js/Shared/Form/PrettyLink.vue
@@ -25,7 +25,7 @@
     <!-- door icon -->
     <svg
       v-else-if="icon === 'exit'"
-      class="icon relative inline h-5 w-5 ltr:mr-1 rtl:ml-1"
+      class="icon relative me-1 inline h-5 w-5"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
diff --git a/resources/js/Shared/Form/TextArea.vue b/resources/js/Shared/Form/TextArea.vue
index 684a7186a..fa6f35a8f 100644
--- a/resources/js/Shared/Form/TextArea.vue
+++ b/resources/js/Shared/Form/TextArea.vue
@@ -2,7 +2,7 @@
   <div class="mb3">
     <label v-if="label" class="mb-2 block text-sm dark:text-gray-100" :for="id">
       {{ label }}
-      <span v-if="!required" class="optional-badge dark:optional-badge text-xs">
+      <span v-if="!required" class="optional-badge rounded px-[3px] py-px text-xs">
         {{ $t('optional') }}
       </span>
     </label>
@@ -22,7 +22,9 @@
         @keydown.esc="sendEscKey"
         @focus="showMaxLength"
         @blur="displayMaxLength = false" />
-      <span v-if="maxlength && displayMaxLength" class="length dark:length absolute rounded text-xs dark:text-gray-100">
+      <span
+        v-if="maxlength && displayMaxLength"
+        class="length absolute end-2.5 top-2.5 rounded px-1 py-[3px] text-xs dark:text-gray-100">
         {{ charactersLeft }}
       </span>
     </div>
@@ -150,36 +152,18 @@ export default {
 
 <style lang="scss" scoped>
 .optional-badge {
-  border-radius: 4px;
   color: #283e59;
   background-color: #edf2f9;
-  padding: 1px 3px;
+}
+.dark .optional-badge {
+  color: #d4d8dd !important;
+  background-color: #2f3031 !important;
 }
 
 .length {
-  top: 10px;
   background-color: #e5eeff;
-  padding: 3px 4px;
-}
-.ltr .length {
-  right: 10px;
-}
-.rtl .length {
-  left: 10px;
-}
-
-.dark .dark\:optional-badge {
-  color: #d4d8dd;
-  background-color: #2f3031;
-}
-.dark .dark\:length {
-  background-color: #2d2f33;
-}
-
-.ltr .counter {
-  padding-right: 64px;
 }
-.rtl .counter {
-  padding-left: 64px;
+.dark .length {
+  background-color: #2d2f33 !important;
 }
 </style>
diff --git a/resources/js/Shared/Form/TextInput.vue b/resources/js/Shared/Form/TextInput.vue
index ae222ea9e..f642f4c40 100644
--- a/resources/js/Shared/Form/TextInput.vue
+++ b/resources/js/Shared/Form/TextInput.vue
@@ -109,7 +109,7 @@ defineExpose({
   <div :class="divOuterClass">
     <label v-if="label" class="mb-2 block text-sm dark:text-gray-100" :for="id">
       {{ label }}
-      <span v-if="!required" class="optional-badge dark:optional-badge text-xs">
+      <span v-if="!required" class="optional-badge rounded px-[3px] py-px text-xs">
         {{ $t('optional') }}
       </span>
     </label>
@@ -135,7 +135,9 @@ defineExpose({
         @keydown.esc="sendEscKey"
         @focus="displayMaxLength = true"
         @blur="displayMaxLength = false" />
-      <span v-if="maxlength && displayMaxLength" class="length dark:length absolute rounded text-xs dark:text-gray-100">
+      <span
+        v-if="maxlength && displayMaxLength"
+        class="length absolute end-2.5 top-2.5 rounded px-1 py-[3px] text-xs dark:text-gray-100">
         {{ charactersLeft }}
       </span>
     </div>
@@ -148,36 +150,18 @@ defineExpose({
 
 <style lang="scss" scoped>
 .optional-badge {
-  border-radius: 4px;
   color: #283e59;
   background-color: #edf2f9;
-  padding: 1px 3px;
+}
+.dark .optional-badge {
+  color: #d4d8dd !important;
+  background-color: #2f3031 !important;
 }
 
 .length {
-  top: 10px;
   background-color: #e5eeff;
-  padding: 3px 4px;
-}
-.ltr .length {
-  right: 10px;
-}
-.rtl .length {
-  left: 10px;
-}
-
-.dark .dark\:optional-badge {
-  color: #d4d8dd;
-  background-color: #2f3031;
-}
-.dark .dark\:length {
-  background-color: #2d2f33;
-}
-
-.ltr .counter {
-  padding-right: 64px;
 }
-.rtl .counter {
-  padding-left: 64px;
+.dark .length {
+  background-color: #2d2f33 !important;
 }
 </style>
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 7c50745d5..cff9e88c9 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -30,7 +30,7 @@
         <div v-if="insideVault" class="flew-grow relative">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="icon-search absolute h-4 w-4 text-gray-400"
+            class="absolute start-2 top-2 h-4 w-4 text-gray-400"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
@@ -50,7 +50,7 @@
         <!-- icons -->
         <div class="flew-grow">
           <ul class="relative">
-            <li class="icon-dark-mode relative inline ltr:mr-4 rtl:ml-4">
+            <li class="relative top-[3px] me-4 inline">
               <label for="dark-mode-toggle" class="relative inline-flex cursor-pointer">
                 <input
                   id="dark-mode-toggle"
@@ -59,7 +59,7 @@
                   class="peer hidden"
                   @click="toggleStyle" />
                 <div
-                  class="peer h-4 w-7 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[14px] after:top-[2px] after:h-3 after:w-3 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 ltr:mr-2 rtl:ml-2 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+                  class="peer me-2 h-4 w-7 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[14px] after:top-[2px] after:h-3 after:w-3 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
                 <svg
                   v-if="!style.checked"
                   xmlns="http://www.w3.org/2000/svg"
@@ -159,11 +159,11 @@
                 </svg>
               </label>
             </li>
-            <li class="inline ltr:mr-4 rtl:ml-4">
+            <li class="me-4 inline">
               <inertia-link :href="layoutData.url.settings" class="relative inline">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="icon-cog relative inline-block h-4 w-4 cursor-pointer text-gray-600 ltr:mr-1 rtl:ml-1 dark:text-gray-300 sm:h-4 sm:w-4"
+                  class="relative -top-px me-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-300 sm:h-4 sm:w-4"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor">
@@ -186,7 +186,7 @@
               <inertia-link class="inline" method="post" :href="route('logout')" as="button">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="inline-block h-4 w-4 cursor-pointer text-gray-600 ltr:mr-1 rtl:ml-1 dark:text-gray-300 sm:h-4 sm:w-4"
+                  class="me-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-300 sm:h-4 sm:w-4"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor">
@@ -216,7 +216,7 @@
                     'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
                       $page.component === 'Vault/Dashboard/Index',
                   }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
                   {{ $t('Dashboard') }}
                 </inertia-link>
               </li>
@@ -224,7 +224,7 @@
                 <inertia-link
                   :href="layoutData.vault.url.contacts"
                   :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Contact') }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
                   {{ $t('Contacts') }}
                 </inertia-link>
               </li>
@@ -233,7 +233,7 @@
                   :href="layoutData.vault.url.calendar"
                   v-if="layoutData.vault.visibility.show_calendar_tab"
                   :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Calendar') }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
                   {{ $t('Calendar') }}
                 </inertia-link>
               </li>
@@ -242,7 +242,7 @@
                   :href="layoutData.vault.url.journals"
                   v-if="layoutData.vault.visibility.show_journal_tab"
                   :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Journal') }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
                   {{ $t('Journals') }}
                 </inertia-link>
               </li>
@@ -251,7 +251,7 @@
                   :href="layoutData.vault.url.groups"
                   v-if="layoutData.vault.visibility.show_group_tab"
                   :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Group') }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
                   {{ $t('Groups') }}
                 </inertia-link>
               </li>
@@ -260,7 +260,7 @@
                   :href="layoutData.vault.url.companies"
                   v-if="layoutData.vault.visibility.show_companies_tab"
                   :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Companies') }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
                   {{ $t('Companies') }}
                 </inertia-link>
               </li>
@@ -272,7 +272,7 @@
                     'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
                       $page.component.startsWith('Vault/Dashboard/Task'),
                   }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
                   {{ $t('Tasks') }}
                 </inertia-link>
               </li>
@@ -284,7 +284,7 @@
                     'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
                       $page.component.startsWith('Vault/Reports'),
                   }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
                   {{ $t('Reports') }}
                 </inertia-link>
               </li>
@@ -293,7 +293,7 @@
                   :href="layoutData.vault.url.files"
                   v-if="layoutData.vault.visibility.show_files_tab"
                   :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Files') }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white ltr:mr-2 rtl:ml-2 dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
                   {{ $t('Files') }}
                 </inertia-link>
               </li>
@@ -388,25 +388,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-search {
-  top: 8px;
-}
-
-.ltr .icon-search {
-  left: 8px;
-}
-
-.rtl .icon-search {
-  right: 8px;
-}
-
-.icon-cog {
-  top: -1px;
-}
-
-.icon-dark-mode {
-  top: 3px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index f5fc173bb..42e3a0455 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -159,7 +159,7 @@ const destroy = () => {
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -206,7 +206,7 @@ const destroy = () => {
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
             <label
               for="chooseExisting"
-              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+              class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
               {{ $t('Choose an existing address') }}
             </label>
           </div>
@@ -221,7 +221,7 @@ const destroy = () => {
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
             <label
               for="createNew"
-              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+              class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
               {{ $t('Create a new address') }}
             </label>
           </div>
@@ -247,7 +247,7 @@ const destroy = () => {
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   :for="'address-' + address.id"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                  class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ address.address }}
                 </label>
               </div>
@@ -281,7 +281,7 @@ const destroy = () => {
               :label="$t('Address')"
               :type="'text'"
               :autofocus="true"
-              :input-class="'w-full ltr:mr-2 rtl:ml-2'"
+              :input-class="'w-full me-2'"
               :required="false"
               :autocomplete="false"
               :maxlength="255"
@@ -296,7 +296,7 @@ const destroy = () => {
               :label="$t('Apartment, suite, etc…')"
               :type="'text'"
               :autofocus="true"
-              :input-class="'w-full ltr:mr-2 rtl:ml-2'"
+              :input-class="'w-full me-2'"
               :required="false"
               :autocomplete="false"
               :maxlength="255"
@@ -321,7 +321,7 @@ const destroy = () => {
               :label="$t('Province')"
               :type="'text'"
               :autofocus="true"
-              :input-class="'w-full ltr:mr-2 rtl:ml-2'"
+              :input-class="'w-full me-2'"
               :required="false"
               :autocomplete="false"
               :maxlength="255"
@@ -358,16 +358,14 @@ const destroy = () => {
               :name="form.is_past_address"
               type="checkbox"
               class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600" />
-            <label
-              :for="form.is_past_address"
-              class="cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-100">
+            <label :for="form.is_past_address" class="ms-2 cursor-pointer text-gray-900 dark:text-gray-100">
               {{ $t('This address is not active anymore') }}
             </label>
           </div>
         </div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createAddressModalShown = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createAddressModalShown = false" />
           <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
         </div>
       </form>
@@ -400,19 +398,16 @@ const destroy = () => {
 
             <!-- actions -->
             <ul class="text-sm">
-              <li class="inline ltr:mr-2 rtl:ml-2">
-                <a
-                  :href="address.url.show"
-                  target="_blank"
-                  class="text-sm text-blue-500 hover:underline ltr:mr-2 rtl:ml-2"
-                  >{{ $t('View on map') }}</a
-                >
+              <li class="me-2 inline">
+                <a :href="address.url.show" target="_blank" class="me-2 text-sm text-blue-500 hover:underline">{{
+                  $t('View on map')
+                }}</a>
               </li>
               <li class="inline cursor-pointer text-blue-500 hover:underline" @click="showEditAddressModal(address)">
                 {{ $t('Edit') }}
               </li>
               <li
-                class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
+                class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                 @click="showDeleteAddressModal(address)">
                 {{ $t('Delete') }}
               </li>
@@ -447,7 +442,7 @@ const destroy = () => {
                   :label="$t('Address')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -462,7 +457,7 @@ const destroy = () => {
                   :label="$t('Apartment, suite, etc…')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -487,7 +482,7 @@ const destroy = () => {
                   :label="$t('Province')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -524,16 +519,14 @@ const destroy = () => {
                   :name="form.is_past_address"
                   type="checkbox"
                   class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600" />
-                <label
-                  :for="form.is_past_address"
-                  class="cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-100">
+                <label :for="form.is_past_address" class="ms-2 cursor-pointer text-gray-900 dark:text-gray-100">
                   {{ $t('This address is not active anymore') }}
                 </label>
               </div>
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedAddressId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedAddressId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
             </div>
           </form>
@@ -588,20 +581,15 @@ const destroy = () => {
 
             <!-- actions -->
             <ul class="text-sm">
-              <li class="inline ltr:mr-2 rtl:ml-2">
-                <a
-                  :href="address.url.show"
-                  target="_blank"
-                  class="text-sm text-blue-500 hover:underline ltr:mr-2 rtl:ml-2"
-                  >{{ $t('View on map') }}</a
-                >
+              <li class="me-2 inline">
+                <a :href="address.url.show" target="_blank" class="me-2 text-sm text-blue-500 hover:underline">{{
+                  $t('View on map')
+                }}</a>
               </li>
               <li class="inline cursor-pointer text-blue-500 hover:underline" @click="showEditAddressModal(address)">
                 {{ $t('Edit') }}
               </li>
-              <li
-                class="inline cursor-pointer text-red-500 hover:text-red-900 ltr:ml-4 rtl:mr-4"
-                @click="destroy(address)">
+              <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(address)">
                 {{ $t('Delete') }}
               </li>
             </ul>
@@ -635,7 +623,7 @@ const destroy = () => {
                   :label="$t('Address')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -650,7 +638,7 @@ const destroy = () => {
                   :label="$t('Apartment, suite, etc…')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -675,7 +663,7 @@ const destroy = () => {
                   :label="$t('Province')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full ltr:mr-2 rtl:ml-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -712,14 +700,14 @@ const destroy = () => {
                   name="is_past_address"
                   type="checkbox"
                   class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600" />
-                <label for="is_past_address" class="cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-gray-100">
+                <label for="is_past_address" class="ms-2 cursor-pointer text-gray-900 dark:text-gray-100">
                   {{ $t('This address is not active anymore') }}
                 </label>
               </div>
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedAddressId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedAddressId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
             </div>
           </form>
@@ -743,7 +731,7 @@ const destroy = () => {
         </JetSecondaryButton>
 
         <JetDangerButton
-          class="ltr:ml-3 rtl:mr-3"
+          class="ms-3"
           :class="{ 'opacity-25': processAddressDeletion }"
           :disabled="processAddressDeletion"
           @click="destroy()">
diff --git a/resources/js/Shared/Modules/Calls.vue b/resources/js/Shared/Modules/Calls.vue
index dc55ac118..102ddf0ea 100644
--- a/resources/js/Shared/Modules/Calls.vue
+++ b/resources/js/Shared/Modules/Calls.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -57,11 +57,11 @@
           </div>
 
           <!-- audio or video -->
-          <div class="border-gray-200 p-5 ltr:border-l rtl:border-r dark:border-gray-700">
+          <div class="border-e border-gray-200 p-5 dark:border-gray-700">
             <p class="mb-2 block text-sm">{{ $t('Nature of the call') }}</p>
 
             <div class="flex">
-              <div class="flex items-center ltr:mr-6 rtl:ml-6">
+              <div class="me-6 flex items-center">
                 <input
                   id="audio"
                   v-model="form.type"
@@ -71,7 +71,7 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="audio"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                  class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Audio-only call') }}
                 </label>
               </div>
@@ -86,7 +86,7 @@
                   class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                 <label
                   for="video"
-                  class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                  class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Video call') }}
                 </label>
               </div>
@@ -99,7 +99,7 @@
           <p class="mb-2 block text-sm">{{ $t('Who called?') }}</p>
 
           <div class="mb-4 flex">
-            <div class="flex items-center ltr:mr-6 rtl:ml-6">
+            <div class="me-6 flex items-center">
               <input
                 id="me"
                 v-model="form.who_initiated"
@@ -107,9 +107,7 @@
                 name="who_initiated"
                 type="radio"
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-              <label
-                for="me"
-                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+              <label for="me" class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ $t('I called') }}
               </label>
             </div>
@@ -124,14 +122,14 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="me_not_answered"
-                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ $t('I called, but :name didn’t answer', { name: data.contact_name }) }}
               </label>
             </div>
           </div>
 
           <div class="flex">
-            <div class="flex items-center ltr:mr-6 rtl:ml-6">
+            <div class="me-6 flex items-center">
               <input
                 id="contact"
                 v-model="form.who_initiated"
@@ -141,7 +139,7 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="contact"
-                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ $t(':name called', { name: data.contact_name }) }}
               </label>
             </div>
@@ -156,7 +154,7 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="contact_not_answered"
-                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ $t(':name called, but I didn’t answer', { name: data.contact_name }) }}
               </label>
             </div>
@@ -204,9 +202,7 @@
               name="emotion"
               type="radio"
               class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500" />
-            <label
-              :for="emotion.type"
-              class="block cursor-pointer font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+            <label :for="emotion.type" class="ms-2 block cursor-pointer font-medium text-gray-700 dark:text-gray-300">
               {{ emotion.name }}
             </label>
           </div>
@@ -217,7 +213,7 @@
           <!-- cta to add a description -->
           <span
             v-if="!descriptionFieldShown"
-            class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2"
+            class="me-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300"
             @click="showDescriptionField">
             {{ $t('+ add description') }}
           </span>
@@ -225,7 +221,7 @@
           <!-- cta to add a reason -->
           <span
             v-if="!reasonFieldShown"
-            class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2"
+            class="me-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300"
             @click="showReasonField">
             {{ $t('+ add reason') }}
           </span>
@@ -241,7 +237,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createCallModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createCallModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -261,7 +257,7 @@
               <svg
                 v-if="!call.answered"
                 xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4 text-red-500 ltr:mr-2 rtl:ml-2"
+                class="me-2 h-4 w-4 text-red-500"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -276,7 +272,7 @@
               <svg
                 v-if="call.answered"
                 xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4 text-green-600 ltr:mr-2 rtl:ml-2"
+                class="me-2 h-4 w-4 text-green-600"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -288,17 +284,17 @@
               </svg>
             </div>
 
-            <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ call.called_at }}</span>
+            <span class="me-2 text-sm text-gray-500">{{ call.called_at }}</span>
 
             <!-- who called -->
             <span
               v-if="call.who_initiated == 'me'"
-              class="rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 ltr:mr-2 rtl:ml-2">
+              class="me-2 rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800">
               {{ $t('I called') }}
             </span>
             <span
               v-else
-              class="rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 ltr:mr-2 rtl:ml-2">
+              class="me-2 rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800">
               {{ $t(':name called', { name: data.contact_name }) }}
             </span>
 
@@ -338,11 +334,11 @@
               </div>
 
               <!-- audio or video -->
-              <div class="border-gray-200 p-5 ltr:border-l rtl:border-r dark:border-gray-700">
+              <div class="border-e border-gray-200 p-5 dark:border-gray-700">
                 <p class="mb-2 block text-sm">{{ $t('Nature of the call') }}</p>
 
                 <div class="flex">
-                  <div class="flex items-center ltr:mr-6 rtl:ml-6">
+                  <div class="me-6 flex items-center">
                     <input
                       id="audio"
                       v-model="form.type"
@@ -352,7 +348,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="audio"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                      class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('Audio-only call') }}
                     </label>
                   </div>
@@ -367,7 +363,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="video"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                      class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('Video call') }}
                     </label>
                   </div>
@@ -380,7 +376,7 @@
               <p class="mb-2 block text-sm">{{ $t('Who called?') }}</p>
 
               <div class="mb-4 flex">
-                <div class="flex items-center ltr:mr-6 rtl:ml-6">
+                <div class="me-6 flex items-center">
                   <input
                     id="me"
                     v-model="form.who_initiated"
@@ -390,7 +386,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="me"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                    class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('I called') }}
                   </label>
                 </div>
@@ -405,14 +401,14 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="me_not_answered"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                    class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('I called, but :name didn’t answer', { name: data.contact_name }) }}
                   </label>
                 </div>
               </div>
 
               <div class="flex">
-                <div class="flex items-center ltr:mr-6 rtl:ml-6">
+                <div class="me-6 flex items-center">
                   <input
                     id="contact"
                     v-model="form.who_initiated"
@@ -422,7 +418,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="contact"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                    class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t(':name called', { name: data.contact_name }) }}
                   </label>
                 </div>
@@ -437,7 +433,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="contact_not_answered"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                    class="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t(':name called, but I didn’t answer', { name: data.contact_name }) }}
                   </label>
                 </div>
@@ -487,7 +483,7 @@
                   class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                 <label
                   :for="emotion.type"
-                  class="block cursor-pointer font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                  class="ms-2 block cursor-pointer font-medium text-gray-700 dark:text-gray-300">
                   {{ emotion.name }}
                 </label>
               </div>
@@ -498,7 +494,7 @@
               <!-- cta to add a description -->
               <span
                 v-if="!descriptionFieldShown"
-                class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2"
+                class="me-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300"
                 @click="showDescriptionField">
                 {{ $t('+ add description') }}
               </span>
@@ -506,7 +502,7 @@
               <!-- cta to add a reason -->
               <span
                 v-if="!reasonFieldShown"
-                class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2"
+                class="me-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300"
                 @click="showReasonField">
                 {{ $t('+ add reason') }}
               </span>
@@ -522,7 +518,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedCallId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedCallId = 0" />
             <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Shared/Modules/ContactInformation.vue b/resources/js/Shared/Modules/ContactInformation.vue
index 6e017eb81..bea36c4e4 100644
--- a/resources/js/Shared/Modules/ContactInformation.vue
+++ b/resources/js/Shared/Modules/ContactInformation.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -67,10 +67,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span
-          :text="$t('Cancel')"
-          :classes="'ltr:mr-3 rtl:ml-3'"
-          @click="addContactInformationModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addContactInformationModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -86,13 +83,13 @@
           <div v-if="editedContactInformationId != info.id" class="flex items-center justify-between px-3 py-2">
             <div>
               <a :href="info.data_with_protocol" class="text-blue-500 hover:underline">{{ info.data }}</a>
-              <span class="text-xs text-gray-500 ltr:ml-2 rtl:mr-2">({{ info.label }})</span>
+              <span class="ms-2 text-xs text-gray-500">({{ info.label }})</span>
             </div>
 
             <!-- actions -->
             <ul class="text-sm">
               <li
-                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+                class="me-4 inline cursor-pointer text-blue-500 hover:underline"
                 @click="showEditContactInformationModal(info)">
                 {{ $t('Edit') }}
               </li>
@@ -140,10 +137,7 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span
-                :text="$t('Cancel')"
-                :classes="'ltr:mr-3 rtl:ml-3'"
-                @click="editedContactInformationId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedContactInformationId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Shared/Modules/ContactName.vue b/resources/js/Shared/Modules/ContactName.vue
index b5fbefc2d..20eb6a15d 100644
--- a/resources/js/Shared/Modules/ContactName.vue
+++ b/resources/js/Shared/Modules/ContactName.vue
@@ -19,7 +19,7 @@
     </div>
 
     <h1 class="flex items-center justify-between text-xl font-bold">
-      <span class="ltr:mr-2 rtl:ml-2">
+      <span class="me-2">
         {{ data.name }}
       </span>
 
diff --git a/resources/js/Shared/Modules/CreateLifeEvent.vue b/resources/js/Shared/Modules/CreateLifeEvent.vue
index 40f45eed1..92e5a9129 100644
--- a/resources/js/Shared/Modules/CreateLifeEvent.vue
+++ b/resources/js/Shared/Modules/CreateLifeEvent.vue
@@ -292,7 +292,7 @@ const store = () => {
 
         <!-- current contact -->
         <div class="mb-4 flex items-center">
-          <avatar :data="props.data.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5'" />
+          <avatar :data="props.data.contact.avatar" :classes="'me-2 h-5 w-5'" />
 
           <span>{{ props.data.contact.name }}</span>
         </div>
@@ -348,7 +348,7 @@ const store = () => {
           :label="$t('Distance')"
           :type="'number'"
           :autofocus="true"
-          :input-class="'ltr:mr-2 rtl:ml-2'"
+          :input-class="'me-2'"
           :required="false"
           :autocomplete="false"
           :help="$t('Enter a number from 0 to 100000. No decimals.')"
@@ -357,7 +357,7 @@ const store = () => {
           @esc-key-pressed="addDistanceFieldShown = false" />
 
         <ul>
-          <li class="inline-block ltr:mr-5 rtl:ml-5">
+          <li class="me-5 inline-block">
             <div class="flex items-center">
               <input
                 id="km"
@@ -366,9 +366,7 @@ const store = () => {
                 name="distance_unit"
                 type="radio"
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-              <label
-                for="km"
-                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-1 rtl:mr-1 dark:text-gray-300">
+              <label for="km" class="ms-1 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ $t('km') }}
               </label>
             </div>
@@ -383,9 +381,7 @@ const store = () => {
                 name="distance_unit"
                 type="radio"
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
-              <label
-                for="miles"
-                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-1 rtl:mr-1 dark:text-gray-300">
+              <label for="miles" class="ms-1 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ $t('miles') }}
               </label>
             </div>
@@ -398,7 +394,7 @@ const store = () => {
         <!-- summary -->
         <div v-if="!addSummaryFieldShown">
           <span
-            class="mb-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
+            class="mb-2 me-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
             @click="showAddSummaryField"
             >{{ $t('+ add summary') }}
           </span>
@@ -407,7 +403,7 @@ const store = () => {
         <!-- description -->
         <div v-if="!addDescriptionFieldShown">
           <span
-            class="mb-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
+            class="mb-2 me-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
             @click="showAddDescriptionField"
             >{{ $t('+ add description') }}
           </span>
@@ -416,14 +412,14 @@ const store = () => {
         <!-- distance -->
         <div v-if="!addDistanceFieldShown">
           <span
-            class="mb-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
+            class="mb-2 me-2 cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-sm hover:bg-slate-300 dark:border-gray-500 dark:bg-slate-800 dark:text-gray-50 hover:dark:bg-slate-700"
             @click="showAddDistanceField"
             >{{ $t('+ add distance') }}
           </span>
         </div>
       </div>
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="$emit('closeModal')" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="$emit('closeModal')" />
         <pretty-button
           v-if="selectedLifeEventType"
           :text="$t('Save')"
diff --git a/resources/js/Shared/Modules/Documents.vue b/resources/js/Shared/Modules/Documents.vue
index a2e68db7f..a36638dd5 100644
--- a/resources/js/Shared/Modules/Documents.vue
+++ b/resources/js/Shared/Modules/Documents.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -39,7 +39,7 @@
       v-if="!data.canUploadFile"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <p class="bg-gray-100 p-3 text-center">
-        <span class="ltr:mr-1 rtl:ml-1">⚠️</span>
+        <span class="me-1">⚠️</span>
         {{ $t('You don’t have enough space left in your account. Please upgrade.') }}
       </p>
     </div>
@@ -56,14 +56,14 @@
             <span class="flex items-center">
               <span class="max-w-sm truncate">{{ document.name }}</span>
 
-              <span class="rounded border bg-blue-50 px-1 py-0 font-mono text-xs text-blue-500 ltr:ml-2 rtl:mr-2">
+              <span class="ms-2 rounded border bg-blue-50 px-1 py-0 font-mono text-xs text-blue-500">
                 {{ document.size }}
               </span>
             </span>
 
             <!-- actions -->
             <ul class="text-sm">
-              <li class="inline ltr:mr-4 rtl:ml-4">
+              <li class="me-4 inline">
                 <a :href="document.url.download" class="text-blue-500 hover:underline">{{ $t('Download') }}</a>
               </li>
               <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(document)">
diff --git a/resources/js/Shared/Modules/FamilySummary.vue b/resources/js/Shared/Modules/FamilySummary.vue
index aa5005c7b..0cc65eea5 100644
--- a/resources/js/Shared/Modules/FamilySummary.vue
+++ b/resources/js/Shared/Modules/FamilySummary.vue
@@ -6,9 +6,9 @@
 
     <!-- love relationships -->
     <div v-if="data.love_relationships.length > 0" class="flex">
-      <span class="inline text-sm ltr:mr-2 rtl:ml-2"> ❤️ </span>
+      <span class="me-2 inline text-sm"> ❤️ </span>
       <ul>
-        <li v-for="relationship in data.love_relationships" :key="relationship.id" class="inline ltr:mr-2 rtl:ml-2">
+        <li v-for="relationship in data.love_relationships" :key="relationship.id" class="me-2 inline">
           <!-- name -->
           <inertia-link
             v-if="relationship.contact.url.show"
@@ -19,7 +19,7 @@
           <span v-else>{{ relationship.contact.name }}</span>
 
           <!-- age -->
-          <span v-if="relationship.contact.age" class="text-xs text-gray-400 ltr:ml-2 rtl:mr-2"
+          <span v-if="relationship.contact.age" class="ms-2 text-xs text-gray-400"
             >({{ relationship.contact.age }})</span
           >
         </li>
@@ -28,9 +28,9 @@
 
     <!-- family relationships -->
     <div v-if="data.family_relationships.length > 0" class="flex">
-      <span class="inline text-sm ltr:mr-2 rtl:ml-2"> 👪 </span>
+      <span class="me-2 inline text-sm"> 👪 </span>
       <ul>
-        <li v-for="relationship in data.family_relationships" :key="relationship.id" class="inline ltr:mr-2 rtl:ml-2">
+        <li v-for="relationship in data.family_relationships" :key="relationship.id" class="me-2 inline">
           <!-- name -->
           <inertia-link
             v-if="relationship.contact.url.show"
@@ -41,7 +41,7 @@
           <span v-else>{{ relationship.contact.name }}</span>
 
           <!-- age -->
-          <span v-if="relationship.contact.age" class="text-xs text-gray-400 ltr:ml-2 rtl:mr-2"
+          <span v-if="relationship.contact.age" class="ms-2 text-xs text-gray-400"
             >({{ relationship.contact.age }})</span
           >
         </li>
diff --git a/resources/js/Shared/Modules/Feed.vue b/resources/js/Shared/Modules/Feed.vue
index cc9818900..e10abea8c 100644
--- a/resources/js/Shared/Modules/Feed.vue
+++ b/resources/js/Shared/Modules/Feed.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="mb-4">
-    <div class="border-gray-200 ltr:ml-4 ltr:border-l rtl:mr-4 rtl:border-r dark:border-gray-700">
+    <div class="ms-4 border-s border-gray-200 dark:border-gray-700">
       <div v-for="feedItem in feed" :key="feedItem.id" class="mb-8">
         <!-- action & user -->
         <div class="mb-2 flex">
-          <div class="icon-avatar relative w-6">
+          <div class="relative -start-[11px] top-[3px] w-6">
             <avatar
               :data="feedItem.author.avatar"
               :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5'" />
           </div>
 
           <div class="flex w-full items-center justify-between">
-            <p class="text-gray-400 ltr:mr-2 rtl:ml-2">
+            <p class="me-2 text-gray-400">
               <!-- author name + link to profile -->
               <inertia-link
                 v-if="feedItem.author.url"
@@ -22,14 +22,14 @@
               <span v-else class="font-medium text-gray-800 dark:text-gray-200">{{ feedItem.author.name }}</span>
 
               <!-- action done -->
-              <span class="ltr:ml-2 rtl:mr-2">{{ feedItem.sentence }}</span>
+              <span class="ms-2">{{ feedItem.sentence }}</span>
             </p>
 
             <p class="flex items-center text-sm text-gray-400">
               <span>{{ feedItem.created_at }}</span>
 
               <svg
-                class="h-4 w-4 ltr:ml-2 rtl:mr-2"
+                class="ms-2 h-4 w-4"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
@@ -45,7 +45,7 @@
         </div>
 
         <!-- feed object -->
-        <div v-if="feedItem.data" class="ltr:ml-6 rtl:mr-6">
+        <div v-if="feedItem.data" class="ms-6">
           <generic-action
             v-if="feedItem.action === 'contact_created'"
             :data="feedItem.data"
@@ -152,7 +152,7 @@
         </div>
 
         <!-- details -->
-        <div v-if="feedItem.description" class="ltr:ml-6 rtl:mr-6">
+        <div v-if="feedItem.description" class="ms-6">
           <div class="rounded-lg border border-gray-300 px-3 py-2">
             <span class="text-sm">
               {{ feedItem.description }}
@@ -262,17 +262,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-}
-
-.ltr .icon-avatar {
-  left: -11px;
-}
-
-.rtl .icon-avatar {
-  right: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/Address.vue b/resources/js/Shared/Modules/FeedItems/Address.vue
index a09145b5c..19a43ca1c 100644
--- a/resources/js/Shared/Modules/FeedItems/Address.vue
+++ b/resources/js/Shared/Modules/FeedItems/Address.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -71,17 +71,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-}
-
-.ltr .icon-avatar {
-  left: -11px;
-}
-
-.rtl .icon-avatar {
-  right: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/ContactInformation.vue b/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
index 6c9073ade..e6f0186e2 100644
--- a/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
+++ b/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -51,17 +51,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-}
-
-.ltr .icon-avatar {
-  left: -11px;
-}
-
-.rtl .icon-avatar {
-  right: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/GenericAction.vue b/resources/js/Shared/Modules/FeedItems/GenericAction.vue
index 74452bd01..110136b8b 100644
--- a/resources/js/Shared/Modules/FeedItems/GenericAction.vue
+++ b/resources/js/Shared/Modules/FeedItems/GenericAction.vue
@@ -4,7 +4,7 @@
     class="flex items-center rounded-lg border border-gray-300 px-3 py-2 dark:border-gray-700">
     <avatar
       :data="data.avatar"
-      :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-8 w-8 ltr:mr-2 rtl:ml-2'" />
+      :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-8 w-8 me-2'" />
 
     <div class="flex flex-col">
       <inertia-link :href="data.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -36,17 +36,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-}
-
-.ltr .icon-avatar {
-  left: -11px;
-}
-
-.rtl .icon-avatar {
-  right: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/Goal.vue b/resources/js/Shared/Modules/FeedItems/Goal.vue
index 63b879a4e..63799d52a 100644
--- a/resources/js/Shared/Modules/FeedItems/Goal.vue
+++ b/resources/js/Shared/Modules/FeedItems/Goal.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -18,11 +18,11 @@
     <div class="px-3 py-2">
       <!-- the goal still exists in the system -->
       <div v-if="data.goal.object" class="flex items-center">
-        <span class="ltr:mr-2 rtl:ml-2">{{ data.goal.object.name }}</span>
+        <span class="me-2">{{ data.goal.object.name }}</span>
       </div>
 
       <!-- the goal was deleted -->
-      <span v-else class="mb-2 ltr:mr-2 rtl:ml-2">
+      <span v-else class="mb-2 me-2">
         <span>{{ data.goal.description }}</span>
       </span>
     </div>
diff --git a/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue b/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue
index b84cbf823..77f3716c3 100644
--- a/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue
+++ b/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -19,7 +19,7 @@
       <!-- the label still exists in the system -->
       <span
         v-if="data.label.object"
-        class="mb-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0 ltr:mr-2 rtl:ml-2"
+        class="mb-2 me-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0"
         :class="data.label.object.bg_color + ' ' + data.label.object.text_color">
         <inertia-link :href="data.label.object.url">{{ data.label.object.name }}</inertia-link>
       </span>
@@ -27,7 +27,7 @@
       <!-- the label was deleted -->
       <span
         v-else
-        class="mb-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0 ltr:mr-2 rtl:ml-2">
+        class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0">
         <span>{{ data.label.description }}</span>
       </span>
     </div>
@@ -54,17 +54,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-}
-
-.ltr .icon-avatar {
-  left: -11px;
-}
-
-.rtl .icon-avatar {
-  right: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue b/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
index d3f2b6989..0166d857b 100644
--- a/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
+++ b/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -19,7 +19,7 @@
       <!-- the mood tracking event still exists in the system -->
       <div v-if="data.mood_tracking_event.object">
         <div class="mb-2 flex">
-          <div class="ltr:mr-2 rtl:ml-2">
+          <div class="me-2">
             {{ data.mood_tracking_event.description }}
           </div>
 
@@ -31,7 +31,7 @@
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
-              class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
+              class="me-1 h-4 w-4 text-gray-400">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -58,7 +58,7 @@
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
-            class="h-4 w-4 text-gray-400 ltr:mr-1 rtl:ml-1">
+            class="me-1 h-4 w-4 text-gray-400">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -69,7 +69,7 @@
       </div>
 
       <!-- the mood tracking event was deleted -->
-      <span v-else class="mb-2 ltr:mr-2 rtl:ml-2">
+      <span v-else class="mb-2 me-2">
         <span>{{ data.mood_tracking_event.description }}</span>
       </span>
     </div>
diff --git a/resources/js/Shared/Modules/FeedItems/Note.vue b/resources/js/Shared/Modules/FeedItems/Note.vue
index 821af08a4..3a577a339 100644
--- a/resources/js/Shared/Modules/FeedItems/Note.vue
+++ b/resources/js/Shared/Modules/FeedItems/Note.vue
@@ -15,7 +15,7 @@ const props = defineProps({
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <Avatar
         :data="props.data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="props.data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -34,23 +34,9 @@ const props = defineProps({
       <!-- the note was deleted -->
       <span
         v-else
-        class="mb-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0 ltr:mr-2 rtl:ml-2">
+        class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0">
         <span>{{ props.data.note.description }}</span>
       </span>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-}
-
-.ltr .icon-avatar {
-  left: -11px;
-}
-
-.rtl .icon-avatar {
-  right: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/Pet.vue b/resources/js/Shared/Modules/FeedItems/Pet.vue
index f07f97154..dd744ca12 100644
--- a/resources/js/Shared/Modules/FeedItems/Pet.vue
+++ b/resources/js/Shared/Modules/FeedItems/Pet.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 ltr:mr-2 rtl:ml-2'" />
+        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -18,12 +18,12 @@
     <div class="px-3 py-2">
       <!-- the pet still exists in the system -->
       <div v-if="data.pet.object" class="flex items-center">
-        <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ data.pet.object.pet_category.name }}</span>
-        <span class="ltr:mr-2 rtl:ml-2">{{ data.pet.object.name }}</span>
+        <span class="me-2 text-sm text-gray-500">{{ data.pet.object.pet_category.name }}</span>
+        <span class="me-2">{{ data.pet.object.name }}</span>
       </div>
 
       <!-- the pet was deleted -->
-      <span v-else class="mb-2 ltr:mr-2 rtl:ml-2">
+      <span v-else class="mb-2 me-2">
         <span>{{ data.pet.description }}</span>
       </span>
     </div>
diff --git a/resources/js/Shared/Modules/Goals.vue b/resources/js/Shared/Modules/Goals.vue
index b16ff1bfc..9b2e92a00 100644
--- a/resources/js/Shared/Modules/Goals.vue
+++ b/resources/js/Shared/Modules/Goals.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -48,7 +48,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createGoalModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGoalModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -78,13 +78,13 @@
               <div
                 v-for="streak in goal.last_7_days"
                 :key="streak.id"
-                class="flex flex-row items-center justify-between border-b border-gray-200 p-3 text-center ltr:mr-0 rtl:ml-0 dark:border-gray-700 sm:mb-0 sm:mr-7 sm:w-9 sm:flex-col sm:border-0 sm:p-0"
+                class="me-0 flex flex-row items-center justify-between border-b border-gray-200 p-3 text-center dark:border-gray-700 sm:mb-0 sm:mr-7 sm:w-9 sm:flex-col sm:border-0 sm:p-0"
                 :class="{ 'text-gray-500': !streak.active }">
                 <div>
-                  <span class="mb-0 block text-xs font-semibold ltr:mr-2 rtl:ml-2 sm:mr-0">
+                  <span class="mb-0 me-2 block text-xs font-semibold sm:mr-0">
                     {{ streak.day }}
                   </span>
-                  <span class="ltr:mr-2 rtl:ml-2 sm:mr-0">
+                  <span class="me-2 sm:mr-0">
                     {{ streak.day_number }}
                   </span>
                 </div>
@@ -92,7 +92,7 @@
                 <!-- active streak -->
                 <span
                   v-if="streak.active"
-                  class="cursor-pointer text-2xl ltr:mr-2 rtl:ml-2 sm:mr-0"
+                  class="me-2 cursor-pointer text-2xl sm:mr-0"
                   @click="toggleStreak(goal, streak)"
                   >👍</span
                 >
@@ -100,7 +100,7 @@
                 <!-- inactive streak -->
                 <span
                   v-else
-                  class="cursor-pointer text-center text-2xl ltr:mr-2 rtl:ml-2 sm:mr-0"
+                  class="me-2 cursor-pointer text-center text-2xl sm:mr-0"
                   @click="toggleStreak(goal, streak)">
                   <div
                     class="rounded-md border border-gray-200 bg-slate-100 px-2 py-1 dark:border-gray-700 dark:bg-slate-900">
@@ -131,14 +131,14 @@
 
             <!-- stats -->
             <div class="flex justify-between p-3">
-              <div class="flex items-center ltr:mr-6 rtl:ml-6">
-                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Current streak') }}</div>
+              <div class="me-6 flex items-center">
+                <div class="me-3 w-14 text-right text-sm text-gray-500">{{ $t('Current streak') }}</div>
                 <div class="text-4xl">
                   {{ goal.streaks_statistics.current_streak }}
                 </div>
               </div>
               <div class="flex items-center">
-                <div class="w-14 text-right text-sm text-gray-500 ltr:mr-3 rtl:ml-3">{{ $t('Longest streak') }}</div>
+                <div class="me-3 w-14 text-right text-sm text-gray-500">{{ $t('Longest streak') }}</div>
                 <div class="text-4xl">
                   {{ goal.streaks_statistics.max_streak }}
                 </div>
diff --git a/resources/js/Shared/Modules/Groups.vue b/resources/js/Shared/Modules/Groups.vue
index edcaeff03..c3d32d419 100644
--- a/resources/js/Shared/Modules/Groups.vue
+++ b/resources/js/Shared/Modules/Groups.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -88,7 +88,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="addGroupMode = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addGroupMode = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -113,7 +113,7 @@
 
         <!-- actions -->
         <ul class="text-sm">
-          <li class="inline cursor-pointer ltr:mr-4 rtl:ml-4">
+          <li class="me-4 inline cursor-pointer">
             <inertia-link :href="group.url.show" class="text-blue-500 hover:underline">{{ $t('View') }}</inertia-link>
           </li>
           <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(group)">
diff --git a/resources/js/Shared/Modules/JobInformation.vue b/resources/js/Shared/Modules/JobInformation.vue
index 1b2b72c8b..351837cf5 100644
--- a/resources/js/Shared/Modules/JobInformation.vue
+++ b/resources/js/Shared/Modules/JobInformation.vue
@@ -80,7 +80,7 @@
         </div>
 
         <div class="flex justify-between p-2">
-          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editJobInformation = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editJobInformation = false" />
           <pretty-button
             :href="'data.url.vault.create'"
             :text="$t('Save')"
diff --git a/resources/js/Shared/Modules/Labels.vue b/resources/js/Shared/Modules/Labels.vue
index 3dc6070c3..1af90f632 100644
--- a/resources/js/Shared/Modules/Labels.vue
+++ b/resources/js/Shared/Modules/Labels.vue
@@ -54,7 +54,7 @@
           class="flex cursor-pointer items-center justify-between border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
           @click="set(label)">
           <div>
-            <span class="inline-block h-4 w-4 rounded-full ltr:mr-2 rtl:ml-2" :class="label.bg_color" />
+            <span class="me-2 inline-block h-4 w-4 rounded-full" :class="label.bg_color" />
             <span>{{ label.name }}</span>
           </div>
 
@@ -91,7 +91,7 @@
       <span
         v-for="label in localLabels"
         :key="label.id"
-        class="mb-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0 ltr:mr-2 rtl:ml-2"
+        class="mb-2 me-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0"
         :class="label.bg_color + ' ' + label.text_color">
         <inertia-link :href="label.url.show">{{ label.name }}</inertia-link>
       </span>
diff --git a/resources/js/Shared/Modules/LifeEvent.vue b/resources/js/Shared/Modules/LifeEvent.vue
index 0defd99c9..c7a7393f7 100644
--- a/resources/js/Shared/Modules/LifeEvent.vue
+++ b/resources/js/Shared/Modules/LifeEvent.vue
@@ -112,7 +112,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -159,10 +159,10 @@ const toggleLifeEventVisibility = (lifeEvent) => {
             @click="toggleTimelineEventVisibility(timelineEvent)">
             <!-- timeline date / label / number of events -->
             <div>
-              <span class="text-gray-500 ltr:mr-2 rtl:ml-2">{{ timelineEvent.happened_at }}</span>
+              <span class="me-2 text-gray-500">{{ timelineEvent.happened_at }}</span>
 
               <span
-                class="whitespace-nowrap rounded-lg bg-slate-100 px-2 py-0.5 text-sm text-slate-400 ltr:ml-3 rtl:mr-3 dark:bg-slate-900">
+                class="ms-3 whitespace-nowrap rounded-lg bg-slate-100 px-2 py-0.5 text-sm text-slate-400 dark:bg-slate-900">
                 {{ timelineEvent.life_events.length }}
               </span>
             </div>
@@ -177,7 +177,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
+                class="me-2 h-4 w-4 text-gray-400">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
               </svg>
 
@@ -188,7 +188,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
+                class="me-2 h-4 w-4 text-gray-400">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
               </svg>
 
@@ -203,7 +203,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
               v-for="lifeEvent in timelineEvent.life_events"
               :key="lifeEvent.id"
               :class="!lifeEvent.collapsed ? 'border' : ''"
-              class="mb-2 rounded-lg border-gray-200 ltr:ml-6 rtl:mr-6 dark:border-gray-700">
+              class="mb-2 ms-6 rounded-lg border-gray-200 dark:border-gray-700">
               <template v-if="lifeEvent.edit">
                 <create-life-event
                   :data="props.data"
@@ -220,7 +220,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                   class="flex cursor-pointer items-center justify-between rounded-t-lg border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 hover:dark:bg-slate-900">
                   <!-- title -->
                   <div @click="toggleLifeEventVisibility(lifeEvent)" class="flex items-center">
-                    <p v-if="lifeEvent.summary" class="text-sm font-bold ltr:mr-4 rtl:ml-4">{{ lifeEvent.summary }}</p>
+                    <p v-if="lifeEvent.summary" class="me-4 text-sm font-bold">{{ lifeEvent.summary }}</p>
                     <div>
                       <span
                         class="rounded border bg-white px-2 py-1 font-mono text-sm dark:border-gray-700 dark:bg-gray-800">
@@ -245,7 +245,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
+                      class="me-2 h-4 w-4 text-gray-400">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                     </svg>
 
@@ -257,7 +257,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2">
+                      class="me-2 h-4 w-4 text-gray-400">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
                     </svg>
 
@@ -282,14 +282,14 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                   v-if="!lifeEvent.collapsed"
                   class="flex items-center border-b border-gray-200 px-3 py-2 text-sm dark:border-gray-700">
                   <!-- date -->
-                  <div class="flex items-center ltr:mr-4 rtl:ml-4">
+                  <div class="me-4 flex items-center">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke-width="1.5"
                       stroke="currentColor"
-                      class="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2">
+                      class="me-2 h-4 w-4 text-gray-500">
                       <path
                         stroke-linecap="round"
                         stroke-linejoin="round"
@@ -302,7 +302,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                   <!-- distance -->
                   <div v-if="lifeEvent.distance" class="flex items-center">
                     <svg
-                      class="h-6 w-6 text-gray-500 ltr:mr-2 rtl:ml-2"
+                      class="me-2 h-6 w-6 text-gray-500"
                       viewBox="0 0 64 64"
                       xmlns="http://www.w3.org/2000/svg"
                       stroke-width="3"
@@ -327,18 +327,15 @@ const toggleLifeEventVisibility = (lifeEvent) => {
 
                 <!-- participants -->
                 <div v-if="!lifeEvent.collapsed" class="flex p-3 pb-1">
-                  <div v-for="contact in lifeEvent.participants" :key="contact.id" class="ltr:mr-4 rtl:ml-4">
-                    <contact-card
-                      :contact="contact"
-                      :avatarClasses="'h-5 w-5 rounded-full ltr:mr-2 rtl:ml-2'"
-                      :displayName="true" />
+                  <div v-for="contact in lifeEvent.participants" :key="contact.id" class="me-4">
+                    <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
                   </div>
                 </div>
               </template>
             </div>
 
             <!-- add a new life event to the timeline -->
-            <div class="mb-2 ltr:ml-6 rtl:mr-6">
+            <div class="mb-2 ms-6">
               <span
                 @click="showAddLifeEventModalForTimelineEventId = timelineEvent.id"
                 v-if="showAddLifeEventModalForTimelineEventId != timelineEvent.id"
diff --git a/resources/js/Shared/Modules/Loans.vue b/resources/js/Shared/Modules/Loans.vue
index fb7fe99c0..ea5b0ab6b 100644
--- a/resources/js/Shared/Modules/Loans.vue
+++ b/resources/js/Shared/Modules/Loans.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -37,7 +37,7 @@
           <!-- loan options -->
           <div class="border-b border-gray-200 px-5 pb-3 pt-5 dark:border-gray-700">
             <ul class="">
-              <li class="inline-block ltr:mr-5 rtl:ml-5">
+              <li class="me-5 inline-block">
                 <div class="flex items-center">
                   <input
                     id="object"
@@ -48,13 +48,13 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="object"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                    class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('The loan is an object') }}
                   </label>
                 </div>
               </li>
 
-              <li class="inline-block ltr:mr-5 rtl:ml-5">
+              <li class="me-5 inline-block">
                 <div class="flex items-center">
                   <input
                     id="monetary"
@@ -65,7 +65,7 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="monetary"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                    class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('The loan is monetary') }}
                   </label>
                 </div>
@@ -108,7 +108,7 @@
               v-model="form.currency_id"
               :data="localCurrencies"
               :required="false"
-              :div-outer-class="'ltr:ml-3 rtl:mr-3 mb-5'"
+              :div-outer-class="'ms-3 mb-5'"
               :placeholder="$t('Choose a value')"
               :dropdown-class="'block'"
               :label="$t('Currency')" />
@@ -143,7 +143,7 @@
               :label="$t('Who makes the loan?')"
               :add-multiple-contacts="true"
               :required="true"
-              :div-outer-class="'p-5 flex-1 ltr:border-r rtl:border-l border-gray-200 dark:border-gray-700'" />
+              :div-outer-class="'p-5 flex-1 border-s border-gray-200 dark:border-gray-700'" />
 
             <contact-selector
               v-model="form.loanees"
@@ -173,20 +173,17 @@
         <div v-if="warning != ''" class="border-b p-3">⚠️ {{ warning }}</div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createLoanModalShown = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createLoanModalShown = false" />
           <pretty-button :text="$t('Add loan')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
         </div>
       </form>
 
       <!-- list of loans -->
       <div v-for="loan in localLoans" :key="loan.id" class="mb-5 flex">
-        <div v-if="editedLoanId != loan.id" class="flex items-center ltr:mr-3 rtl:ml-3">
+        <div v-if="editedLoanId != loan.id" class="me-3 flex items-center">
           <div class="flex -space-x-2 overflow-hidden">
             <div v-for="loaner in loan.loaners" :key="loaner.id">
-              <contact-card
-                :contact="loaner"
-                :avatarClasses="'h-7 w-7 rounded-full ltr:mr-2 rtl:ml-2'"
-                :displayName="false" />
+              <contact-card :contact="loaner" :avatarClasses="'h-7 w-7 rounded-full me-2'" :displayName="false" />
             </div>
           </div>
 
@@ -201,10 +198,7 @@
           </svg>
 
           <div v-for="loanee in loan.loanees" :key="loanee.id">
-            <contact-card
-              :contact="loanee"
-              :avatarClasses="'h-7 w-7 rounded-full ltr:mr-2 rtl:ml-2'"
-              :displayName="false" />
+            <contact-card :contact="loanee" :avatarClasses="'h-7 w-7 rounded-full me-2'" :displayName="false" />
           </div>
         </div>
 
@@ -214,13 +208,13 @@
           <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
             <div class="flex items-center justify-between">
               <div>
-                <span class="block ltr:mr-2 rtl:ml-2">
-                  <span v-if="loan.amount_lent" class="ltr:mr-2 rtl:ml-2">
-                    <span v-if="loan.currency_name" class="text-gray-500 ltr:mr-1 rtl:ml-1">
+                <span class="me-2 block">
+                  <span v-if="loan.amount_lent" class="me-2">
+                    <span v-if="loan.currency_name" class="me-1 text-gray-500">
                       {{ loan.currency_name }}
                     </span>
                     {{ loan.amount_lent }}
-                    <span class="ltr:ml-2 rtl:mr-2"> • </span>
+                    <span class="ms-2"> • </span>
                   </span>
                   {{ loan.name }}
                 </span>
@@ -228,7 +222,7 @@
                   {{ loan.description }}
                 </span>
               </div>
-              <span v-if="loan.loaned_at_human_format" class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{
+              <span v-if="loan.loaned_at_human_format" class="me-2 text-sm text-gray-500">{{
                 loan.loaned_at_human_format
               }}</span>
             </div>
@@ -240,21 +234,16 @@
               <!-- settle -->
               <li
                 v-if="!loan.settled"
-                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+                class="me-4 inline cursor-pointer text-blue-500 hover:underline"
                 @click="toggle(loan)">
                 {{ $t('Settle') }}
               </li>
-              <li
-                v-else
-                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
-                @click="toggle(loan)">
+              <li v-else class="me-4 inline cursor-pointer text-blue-500 hover:underline" @click="toggle(loan)">
                 {{ $t('Revert') }}
               </li>
 
               <!-- edit -->
-              <li
-                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
-                @click="showEditLoanModal(loan)">
+              <li class="me-4 inline cursor-pointer text-blue-500 hover:underline" @click="showEditLoanModal(loan)">
                 {{ $t('Edit') }}
               </li>
 
@@ -275,7 +264,7 @@
             <!-- loan options -->
             <div class="border-b border-gray-200 px-5 pb-3 pt-5 dark:border-gray-700">
               <ul class="">
-                <li class="inline-block ltr:mr-5 rtl:ml-5">
+                <li class="me-5 inline-block">
                   <div class="flex items-center">
                     <input
                       id="object"
@@ -286,13 +275,13 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="object"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('The loan is an object') }}
                     </label>
                   </div>
                 </li>
 
-                <li class="inline-block ltr:mr-5 rtl:ml-5">
+                <li class="me-5 inline-block">
                   <div class="flex items-center">
                     <input
                       id="monetary"
@@ -303,7 +292,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="monetary"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('The loan is monetary') }}
                     </label>
                   </div>
@@ -346,7 +335,7 @@
                 v-model="form.currency_id"
                 :data="localCurrencies"
                 :required="false"
-                :div-outer-class="'ltr:ml-3 rtl:mr-3 mb-5'"
+                :div-outer-class="'ms-3 mb-5'"
                 :placeholder="$t('Choose a value')"
                 :dropdown-class="'block'"
                 :label="$t('Currency')" />
@@ -380,7 +369,7 @@
                 :label="$t('Who makes the loan?')"
                 :add-multiple-contacts="true"
                 :required="true"
-                :div-outer-class="'p-5 flex-1 ltr:border-r rtl:border-l border-gray-200 dark:border-gray-700'" />
+                :div-outer-class="'p-5 flex-1 border-s border-gray-200 dark:border-gray-700'" />
 
               <contact-selector
                 v-model="form.loanees"
@@ -410,7 +399,7 @@
           <div v-if="warning != ''" class="border-b p-3">⚠️ {{ warning }}</div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedLoanId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedLoanId = 0" />
             <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Shared/Modules/Notes.vue b/resources/js/Shared/Modules/Notes.vue
index 94459edf6..0bea1f080 100644
--- a/resources/js/Shared/Modules/Notes.vue
+++ b/resources/js/Shared/Modules/Notes.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             class="icon-sidebar relative inline h-4 w-4"
             viewBox="0 0 24 24"
@@ -78,7 +78,7 @@
               name="emotion"
               type="radio"
               class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-700 dark:bg-slate-900 dark:text-indigo-400" />
-            <label :for="emotion.type" class="block font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+            <label :for="emotion.type" class="ms-2 block font-medium text-gray-700 dark:text-gray-300">
               {{ emotion.name }}
             </label>
           </div>
@@ -87,7 +87,7 @@
         <!-- cta to add a title -->
         <span
           v-if="!titleFieldShown"
-          class="inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:bg-slate-800 hover:dark:bg-slate-700"
+          class="me-2 inline-block cursor-pointer rounded-lg border bg-slate-200 px-1 py-1 text-xs hover:bg-slate-300 dark:border-gray-700 dark:bg-slate-800 hover:dark:bg-slate-700"
           @click="showTitleField">
           {{ $t('+ add title') }}
         </span>
@@ -102,7 +102,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createNoteModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createNoteModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -138,12 +138,12 @@
             class="flex justify-between border-t border-gray-200 px-3 py-1 text-xs text-gray-600 hover:rounded-b hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 hover:dark:bg-slate-900">
             <div class="flex items-center">
               <!-- emotion -->
-              <div v-if="note.emotion" class="relative inline ltr:mr-3 rtl:ml-3">
+              <div v-if="note.emotion" class="relative me-3 inline">
                 {{ note.emotion.name }}
               </div>
 
               <!-- date -->
-              <div class="relative inline ltr:mr-3 rtl:ml-3">
+              <div class="relative me-3 inline">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   class="icon-note relative inline h-3 w-3 text-gray-400"
@@ -160,9 +160,9 @@
               </div>
 
               <!-- author -->
-              <div v-if="note.author" class="relative inline ltr:mr-3 rtl:ml-3">
+              <div v-if="note.author" class="relative me-3 inline">
                 <div class="icon-avatar relative flex">
-                  <avatar :data="note.author.avatar" :classes="'rounded-full relative ltr:mr-1 rtl:ml-1 h-3 w-3'" />
+                  <avatar :data="note.author.avatar" :classes="'rounded-full relative me-1 h-3 w-3'" />
                   <span>{{ note.author.name }}</span>
                 </div>
               </div>
@@ -213,7 +213,7 @@
                   name="emotion"
                   type="radio"
                   class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:text-indigo-400" />
-                <label :for="emotion.type" class="block font-medium text-gray-700 ltr:ml-2 rtl:mr-2 dark:text-gray-300">
+                <label :for="emotion.type" class="ms-2 block font-medium text-gray-700 dark:text-gray-300">
                   {{ emotion.name }}
                 </label>
               </div>
@@ -221,7 +221,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedNoteId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedNoteId = 0" />
             <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
diff --git a/resources/js/Shared/Modules/Pets.vue b/resources/js/Shared/Modules/Pets.vue
index 625bd3b68..f47b4343b 100644
--- a/resources/js/Shared/Modules/Pets.vue
+++ b/resources/js/Shared/Modules/Pets.vue
@@ -3,8 +3,8 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
-          <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
+          <span class="relative me-1">
             <svg
               class="icon-sidebar relative inline h-4 w-4"
               style="width: 1em; height: 1em; vertical-align: middle; fill: currentColor; overflow: hidden"
@@ -62,7 +62,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="addPetModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addPetModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -77,13 +77,13 @@
           <!-- pet -->
           <div v-if="editedPetId != pet.id" class="flex items-center justify-between px-3 py-2">
             <div class="flex items-center">
-              <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ pet.pet_category.name }}</span>
-              <span class="ltr:mr-2 rtl:ml-2">{{ pet.name }}</span>
+              <span class="me-2 text-sm text-gray-500">{{ pet.pet_category.name }}</span>
+              <span class="me-2">{{ pet.name }}</span>
             </div>
 
             <!-- actions -->
             <ul class="text-sm">
-              <li class="inline ltr:mr-4 rtl:ml-4" @click="showEditPetModal(pet)">
+              <li class="me-4 inline" @click="showEditPetModal(pet)">
                 <span class="cursor-pointer text-blue-500 hover:underline">{{ $t('Edit') }}</span>
               </li>
               <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(pet)">
@@ -127,7 +127,7 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedPetId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedPetId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Shared/Modules/Photos.vue b/resources/js/Shared/Modules/Photos.vue
index 4060a73fc..413889c28 100644
--- a/resources/js/Shared/Modules/Photos.vue
+++ b/resources/js/Shared/Modules/Photos.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -39,7 +39,7 @@
       v-if="!data.canUploadFile"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <p class="bg-gray-100 p-3 text-center">
-        <span class="ltr:mr-1 rtl:ml-1">⚠️</span> {{ $t('You don’t have enough space left in your account.') }}
+        <span class="me-1">⚠️</span> {{ $t('You don’t have enough space left in your account.') }}
       </p>
     </div>
 
diff --git a/resources/js/Shared/Modules/Posts.vue b/resources/js/Shared/Modules/Posts.vue
index 35e4b8a4f..4da8cb983 100644
--- a/resources/js/Shared/Modules/Posts.vue
+++ b/resources/js/Shared/Modules/Posts.vue
@@ -9,7 +9,7 @@ const props = defineProps({
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -41,7 +41,7 @@ const props = defineProps({
           }}</inertia-link>
           <div class="flex items-center text-sm">
             <!-- journal -->
-            <p class="ltr:mr-2 rtl:ml-2">
+            <p class="me-2">
               {{ $t('in') }}
               <inertia-link :href="post.journal.url.show" class="text-blue-500 hover:underline">{{
                 post.journal.name
@@ -49,7 +49,7 @@ const props = defineProps({
             </p>
 
             <!-- date -->
-            <div class="relative inline ltr:mr-3 rtl:ml-3">
+            <div class="relative me-3 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-note relative inline h-3 w-3 text-gray-400"
diff --git a/resources/js/Shared/Modules/QuickFacts.vue b/resources/js/Shared/Modules/QuickFacts.vue
index 560048304..75d05824f 100644
--- a/resources/js/Shared/Modules/QuickFacts.vue
+++ b/resources/js/Shared/Modules/QuickFacts.vue
@@ -106,14 +106,14 @@ const destroy = (quickFact) => {
 <template>
   <div class="mb-8 rounded-lg border border-gray-200 bg-gray-50 p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
     <div @click="toggle()" class="flex cursor-pointer items-center justify-between" :class="openState ? ' mb-4' : ''">
-      <div class="flex items-center ltr:mr-1 rtl:ml-1">
+      <div class="me-1 flex items-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
-          class="relative inline h-4 w-4 ltr:mr-1 rtl:ml-1">
+          class="relative me-1 inline h-4 w-4">
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -132,7 +132,7 @@ const destroy = (quickFact) => {
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
-          class="h-4 w-4 cursor-pointer text-gray-400 ltr:mr-2 rtl:ml-2">
+          class="me-2 h-4 w-4 cursor-pointer text-gray-400">
           <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
         </svg>
 
@@ -143,7 +143,7 @@ const destroy = (quickFact) => {
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
-          class="h-4 w-4 cursor-pointer text-gray-400 ltr:mr-2 rtl:ml-2">
+          class="me-2 h-4 w-4 cursor-pointer text-gray-400">
           <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
         </svg>
       </div>
@@ -153,7 +153,7 @@ const destroy = (quickFact) => {
       <!-- templates -->
       <div class="mb-4 flex">
         <ul class="list">
-          <li v-for="template in data.templates" :key="template.id" class="inline ltr:mr-2 rtl:ml-2">
+          <li v-for="template in data.templates" :key="template.id" class="me-2 inline">
             <span
               @click="get(template)"
               :class="localTemplate.id === template.id ? 'rounded border border-gray-200 bg-white font-semibold' : ''"
@@ -179,7 +179,7 @@ const destroy = (quickFact) => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="h-4 w-4 flex-none text-green-600 ltr:mr-1 rtl:ml-1">
+                class="me-1 h-4 w-4 flex-none text-green-600">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -218,12 +218,12 @@ const destroy = (quickFact) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedQuickFactId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedQuickFactId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
             </div>
           </form>
         </li>
-        <li v-if="!createQuickFactModalShown" class="mt-1 ltr:ml-2 rtl:mr-2">
+        <li v-if="!createQuickFactModalShown" class="ms-2 mt-1">
           <span @click="showCreateQuickFactModal()" class="cursor-pointer text-blue-500 hover:underline">{{
             $t('+ add another')
           }}</span>
@@ -269,7 +269,7 @@ const destroy = (quickFact) => {
         </div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createQuickFactModalShown = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createQuickFactModalShown = false" />
           <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
         </div>
       </form>
diff --git a/resources/js/Shared/Modules/Relationships.vue b/resources/js/Shared/Modules/Relationships.vue
index 4e306f940..e3135f5fa 100644
--- a/resources/js/Shared/Modules/Relationships.vue
+++ b/resources/js/Shared/Modules/Relationships.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -44,8 +44,8 @@
             :key="relationshipType.id"
             class="item-list flex items-center justify-between border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <div class="flex">
-              <div class="flex items-center ltr:mr-2 rtl:ml-2">
-                <avatar :data="relationshipType.contact.avatar" :classes="'ltr:mr-2 rtl:ml-2 h-5 w-5'" />
+              <div class="me-2 flex items-center">
+                <avatar :data="relationshipType.contact.avatar" :classes="'me-2 h-5 w-5'" />
 
                 <!-- name -->
                 <inertia-link
@@ -57,13 +57,13 @@
                 <span v-else>{{ relationshipType.contact.name }}</span>
 
                 <!-- age -->
-                <span v-if="relationshipType.contact.age" class="text-xs text-gray-400 ltr:ml-2 rtl:mr-2"
+                <span v-if="relationshipType.contact.age" class="ms-2 text-xs text-gray-400"
                   >({{ relationshipType.contact.age }})</span
                 >
               </div>
 
               <!-- relationship type -->
-              <span class="text-gray-400 ltr:mr-2 rtl:ml-2">{{ relationshipType.relationship_type.name }}</span>
+              <span class="me-2 text-gray-400">{{ relationshipType.relationship_type.name }}</span>
             </div>
 
             <!-- actions -->
diff --git a/resources/js/Shared/Modules/Religion.vue b/resources/js/Shared/Modules/Religion.vue
index 792019392..21206ea9b 100644
--- a/resources/js/Shared/Modules/Religion.vue
+++ b/resources/js/Shared/Modules/Religion.vue
@@ -94,7 +94,7 @@ const showEditModal = () => {
         </div>
 
         <div class="flex justify-between p-2">
-          <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editReligion = false" />
+          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editReligion = false" />
           <pretty-button
             :href="'data.url.vault.create'"
             :text="$t('Save')"
diff --git a/resources/js/Shared/Modules/Reminders.vue b/resources/js/Shared/Modules/Reminders.vue
index f3b58ef96..51b4d3330 100644
--- a/resources/js/Shared/Modules/Reminders.vue
+++ b/resources/js/Shared/Modules/Reminders.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             class="icon-sidebar relative inline h-4 w-4"
             viewBox="0 0 24 24"
@@ -66,11 +66,11 @@
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
             <label
               for="full_date"
-              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+              class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
               {{ $t('I know the exact date, including the year') }}
             </label>
           </div>
-          <div v-if="form.choice === 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
+          <div v-if="form.choice === 'full_date'" class="mb-4 ms-6">
             <DatePicker
               v-model.string="form.date"
               class="inline-block h-full"
@@ -97,16 +97,16 @@
               class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
             <label
               for="month_day"
-              class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+              class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
               {{ $t('I only know the day and month, not the year') }}
             </label>
           </div>
-          <div v-if="form.choice === 'month_day'" class="mt-2 flex ltr:ml-6 rtl:mr-6">
+          <div v-if="form.choice === 'month_day'" class="ms-6 mt-2 flex">
             <Dropdown
               v-model="form.month"
               :data="data.months"
               :required="true"
-              :div-outer-class="'mb-5 ltr:mr-2 rtl:ml-2'"
+              :div-outer-class="'mb-5 me-2'"
               :placeholder="$t('Choose a value')"
               :dropdown-class="'block w-full'"
               :label="$t('Month')" />
@@ -129,7 +129,7 @@
             {{ $t('If the date is in the past, the next occurence of the date will be next year.') }}
           </p>
 
-          <div class="mt-4 ltr:ml-4 rtl:mr-4">
+          <div class="ms-4 mt-4">
             <div class="mb-2 flex items-center">
               <input
                 id="one_time"
@@ -140,7 +140,7 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="one_time"
-                class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                 {{ $t('Only once, when the next occurence of the date occurs.') }}
               </label>
             </div>
@@ -155,20 +155,20 @@
                 class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
               <label
                 for="recurring"
-                class="block flex cursor-pointer items-center text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
-                <span class="ltr:mr-2 rtl:ml-2">{{ $t('Every') }}</span>
+                class="ms-3 block flex cursor-pointer items-center text-sm font-medium text-gray-700 dark:text-gray-300">
+                <span class="me-2">{{ $t('Every') }}</span>
 
                 <Dropdown
                   :id="'frequency-number'"
                   v-model="form.frequencyNumber"
-                  dropdown-class="ltr:mr-2 rtl:ml-2"
+                  dropdown-class="me-2"
                   :required="required"
                   :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" />
 
                 <Dropdown
                   :id="'frequency-type'"
                   v-model="form.frequencyType"
-                  dropdown-class="ltr:mr-2 rtl:ml-2"
+                  dropdown-class="me-2"
                   :required="required"
                   :data="[
                     { id: 'recurring_day', name: $t('day') },
@@ -184,7 +184,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="addReminderModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addReminderModalShown = false" />
         <pretty-button :text="$t('Add date')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -199,8 +199,8 @@
           <!-- reminder -->
           <div class="flex items-center justify-between px-3 py-2">
             <div class="flex items-center">
-              <span class="text-sm text-gray-500 ltr:mr-2 rtl:ml-2">{{ reminder.date }}</span>
-              <span class="ltr:mr-2 rtl:ml-2">{{ reminder.label }}</span>
+              <span class="me-2 text-sm text-gray-500">{{ reminder.date }}</span>
+              <span class="me-2">{{ reminder.label }}</span>
 
               <!-- recurring icon -->
               <a-tooltip v-if="reminder.type != 'one_time'" placement="topLeft" title="Recurring" arrow-point-at-center>
@@ -222,7 +222,7 @@
             <!-- actions -->
             <ul class="text-sm">
               <li
-                class="inline cursor-pointer text-blue-500 hover:underline ltr:mr-4 rtl:ml-4"
+                class="me-4 inline cursor-pointer text-blue-500 hover:underline"
                 @click="showEditReminderModal(reminder)">
                 {{ $t('Edit') }}
               </li>
@@ -269,11 +269,11 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="full_date"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                    class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('I know the exact date, including the year') }}
                   </label>
                 </div>
-                <div v-if="form.choice === 'full_date'" class="mb-4 ltr:ml-6 rtl:mr-6">
+                <div v-if="form.choice === 'full_date'" class="mb-4 ms-6">
                   <DatePicker
                     v-model.string="form.date"
                     class="inline-block h-full"
@@ -300,16 +300,16 @@
                     class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                   <label
                     for="month_day"
-                    class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                    class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('I only know the day and month, not the year') }}
                   </label>
                 </div>
-                <div v-if="form.choice === 'month_day'" class="mt-2 flex ltr:ml-6 rtl:mr-6">
+                <div v-if="form.choice === 'month_day'" class="ms-6 mt-2 flex">
                   <Dropdown
                     v-model="form.month"
                     :data="data.months"
                     :required="true"
-                    :div-outer-class="'ltr:mr-2 rtl:ml-2'"
+                    :div-outer-class="'me-2'"
                     :placeholder="$t('Choose a value')"
                     :dropdown-class="'block w-full'"
                     :label="$t('Month')" />
@@ -331,7 +331,7 @@
                   {{ $t('If the date is in the past, the next occurence of the date will be next year.') }}
                 </p>
 
-                <div class="mt-4 ltr:ml-4 rtl:mr-4">
+                <div class="ms-4 mt-4">
                   <div class="mb-2 flex items-center">
                     <input
                       id="one_time"
@@ -342,7 +342,7 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="one_time"
-                      class="block cursor-pointer text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
+                      class="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('Only once, when the next occurence of the date occurs.') }}
                     </label>
                   </div>
@@ -357,20 +357,20 @@
                       class="h-4 w-4 border-gray-300 text-sky-500 dark:border-gray-700" />
                     <label
                       for="recurring"
-                      class="block flex cursor-pointer items-center text-sm font-medium text-gray-700 ltr:ml-3 rtl:mr-3 dark:text-gray-300">
-                      <span class="ltr:mr-2 rtl:ml-2">{{ $t('Every') }}</span>
+                      class="ms-3 block flex cursor-pointer items-center text-sm font-medium text-gray-700 dark:text-gray-300">
+                      <span class="me-2">{{ $t('Every') }}</span>
 
                       <Dropdown
                         :id="'frequency-number'"
                         v-model="form.frequencyNumber"
-                        dropdown-class="ltr:mr-2 rtl:ml-2"
+                        dropdown-class="me-2"
                         :required="required"
                         :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" />
 
                       <Dropdown
                         :id="'frequency-type'"
                         v-model="form.frequencyType"
-                        dropdown-class="ltr:mr-2 rtl:ml-2"
+                        dropdown-class="me-2"
                         :required="required"
                         :data="[
                           { id: 'recurring_day', name: $t('day') },
@@ -386,7 +386,7 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedReminderId = 0" />
+              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedReminderId = 0" />
               <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
             </div>
           </form>
diff --git a/resources/js/Shared/Modules/Tasks.vue b/resources/js/Shared/Modules/Tasks.vue
index fb773d06f..5ce9858c3 100644
--- a/resources/js/Shared/Modules/Tasks.vue
+++ b/resources/js/Shared/Modules/Tasks.vue
@@ -3,7 +3,7 @@
     <!-- title + cta -->
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
-        <span class="relative ltr:mr-1 rtl:ml-1">
+        <span class="relative me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -58,13 +58,13 @@
             type="checkbox"
             class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
             @click="toggleDueDateModal" />
-          <label for="reminder" class="block cursor-pointer text-sm text-gray-900 ltr:ml-2 rtl:mr-2">
+          <label for="reminder" class="ms-2 block cursor-pointer text-sm text-gray-900">
             {{ $t('Add a due date') }}
           </label>
         </div>
 
         <!-- task options -->
-        <div v-if="form.due_at_checked" class="mt-4 ltr:ml-4 rtl:mr-4">
+        <div v-if="form.due_at_checked" class="ms-4 mt-4">
           <DatePicker
             v-model.string="form.due_at"
             class="inline-block h-full"
@@ -82,7 +82,7 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="createTaskModalShown = false" />
+        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createTaskModalShown = false" />
         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
       </div>
     </form>
@@ -104,17 +104,17 @@
               type="checkbox"
               class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
               @change="toggle(task)" />
-            <label :for="task.id" class="flex cursor-pointer text-gray-900 ltr:ml-2 rtl:mr-2">
+            <label :for="task.id" class="ms-2 flex cursor-pointer text-gray-900">
               {{ task.label }}
 
               <!-- due date -->
               <span
                 v-if="task.due_at"
                 :class="task.due_at_late ? 'bg-red-400/10 text-red-600' : 'bg-sky-400/10 text-sky-600'"
-                class="flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 ltr:ml-2 rtl:mr-2 dark:text-sky-400">
+                class="ms-2 flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 dark:text-sky-400">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="h-3 w-3 ltr:mr-1 rtl:ml-1"
+                  class="me-1 h-3 w-3"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -159,13 +159,13 @@
                 type="checkbox"
                 class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
                 @click="toggleDueDateModal" />
-              <label for="reminder" class="block cursor-pointer text-sm text-gray-900 ltr:ml-2 rtl:mr-2">
+              <label for="reminder" class="ms-2 block cursor-pointer text-sm text-gray-900">
                 {{ $t('Add a due date') }}
               </label>
             </div>
 
             <!-- task options -->
-            <div v-if="form.due_at_checked" class="mt-4 ltr:ml-4 rtl:mr-4">
+            <div v-if="form.due_at_checked" class="ms-4 mt-4">
               <DatePicker
                 v-model.string="form.due_at"
                 class="inline-block h-full"
@@ -183,7 +183,7 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'ltr:mr-3 rtl:ml-3'" @click="editedTaskId = 0" />
+            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedTaskId = 0" />
             <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
           </div>
         </form>
@@ -215,17 +215,17 @@
                 class="focus:ring-3 relative h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 focus:dark:ring-blue-600"
                 @change="toggle(task)" />
 
-              <label :for="task.id" class="flex cursor-pointer items-center text-gray-900 ltr:ml-2 rtl:mr-2">
+              <label :for="task.id" class="ms-2 flex cursor-pointer items-center text-gray-900">
                 {{ task.label }}
 
                 <!-- due date -->
                 <span
                   v-if="task.due_at"
                   :class="task.due_at_late ? 'bg-red-400/10' : ''"
-                  class="flex items-center rounded-full bg-sky-400/10 px-2 py-0.5 text-xs font-medium leading-5 text-sky-600 ltr:ml-2 rtl:mr-2 dark:text-sky-400">
+                  class="ms-2 flex items-center rounded-full bg-sky-400/10 px-2 py-0.5 text-xs font-medium leading-5 text-sky-600 dark:text-sky-400">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    class="h-3 w-3 ltr:mr-1 rtl:ml-1"
+                    class="me-1 h-3 w-3"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
diff --git a/resources/js/Shared/Toaster.vue b/resources/js/Shared/Toaster.vue
index d26b26518..88d1c2e33 100644
--- a/resources/js/Shared/Toaster.vue
+++ b/resources/js/Shared/Toaster.vue
@@ -46,11 +46,9 @@ const act = (action, timeout) => {
     class="fixed bottom-8 z-[9999] rounded-md border-zinc-200 bg-white px-5 py-2.5 shadow-sm shadow-gray-400 transition duration-700 ease-in-out dark:border-zinc-600 dark:bg-gray-900 dark:shadow-gray-600"
     :class="[
       levelClass,
-      isOpen
-        ? ['opacity-100', 'translate-x-0', 'ltr:right-7', 'rtl:left-7']
-        : ['opacity-0', 'translate-x-full', 'ltr:right-0', 'rtl:left-0'],
+      isOpen ? ['opacity-100', 'translate-x-0', 'end-7'] : ['opacity-0', 'translate-x-full', 'end-0'],
     ]">
-    <span class="ltr:mr-1 rtl:ml-1"> 👋 </span>
+    <span class="me-1"> 👋 </span>
     {{ messageText }}
   </div>
 </template>

From ae983fc9a420d5ee76b88cd6e02737a746b485ee Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 19:25:16 +0200
Subject: [PATCH 08/14] Apply suggestions from code review

---
 resources/js/Components/Jetstream/Select.vue  |  2 +-
 .../Settings/Personalize/Modules/Index.vue    |  2 +-
 resources/js/Pages/Settings/Storage/Index.vue |  2 +-
 resources/js/Pages/Vault/Calendar/Index.vue   | 20 +++++++++----------
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/resources/js/Components/Jetstream/Select.vue b/resources/js/Components/Jetstream/Select.vue
index 8fc443313..f2503a33b 100644
--- a/resources/js/Components/Jetstream/Select.vue
+++ b/resources/js/Components/Jetstream/Select.vue
@@ -151,7 +151,7 @@ const alignmentClasses = computed(() => {
           </svg>
         </button>
       </div>
-      <div class="flex w-8 items-center border-e border-gray-200 py-1 pl-2 pr-1 text-gray-300 dark:border-gray-600">
+      <div class="flex w-8 items-center border-s border-gray-200 py-1 pl-2 pr-1 text-gray-300 dark:border-gray-600">
         <button
           @click.prevent="
             open = !open;
diff --git a/resources/js/Pages/Settings/Personalize/Modules/Index.vue b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
index c4a53f58b..b9d7c4717 100644
--- a/resources/js/Pages/Settings/Personalize/Modules/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
@@ -87,7 +87,7 @@
             <div>
               <!-- search a module -->
               <div
-                class="module-list rounded-t-md border-s border-t border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+                class="module-list rounded-t-md border-x border-t border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <text-input
                   v-model="form.search"
                   :type="'text'"
diff --git a/resources/js/Pages/Settings/Storage/Index.vue b/resources/js/Pages/Settings/Storage/Index.vue
index 23b69af75..8bb95be70 100644
--- a/resources/js/Pages/Settings/Storage/Index.vue
+++ b/resources/js/Pages/Settings/Storage/Index.vue
@@ -60,7 +60,7 @@
         <!-- stats -->
         <div class="border border-gray-200 dark:border-gray-700 rounded-lg grid grid-cols-2 mb-8">
           <!-- account limit -->
-          <div class="flex justify-between p-3 border-s border-gray-200 dark:border-gray-700">
+          <div class="flex justify-between p-3 border-e border-gray-200 dark:border-gray-700">
             <p>{{ $t('Your account limits') }}</p>
             <p class="font-bold">
               {{ data.account_limit }}
diff --git a/resources/js/Pages/Vault/Calendar/Index.vue b/resources/js/Pages/Vault/Calendar/Index.vue
index 5da8cc5a6..377027d2b 100644
--- a/resources/js/Pages/Vault/Calendar/Index.vue
+++ b/resources/js/Pages/Vault/Calendar/Index.vue
@@ -57,7 +57,7 @@ const get = (day) => {
 
                   <inertia-link
                     :href="data.url.next"
-                    class="inline-flex items-center rounded-e-md border-b border-s border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                    class="inline-flex items-center rounded-e-md border-y border-e border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                     {{ data.next_month }}
 
                     <svg
@@ -75,23 +75,23 @@ const get = (day) => {
             </div>
 
             <!-- days -->
-            <div class="grid grid-cols-7 rounded-t-lg border-s border-t last:border-b dark:border-gray-700">
-              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
+            <div class="grid grid-cols-7 rounded-t-lg border-x border-t last:border-b dark:border-gray-700">
+              <div class="border-e p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Monday') }}
               </div>
-              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
+              <div class="border-e p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Tuesday') }}
               </div>
-              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
+              <div class="border-e p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Wednesday') }}
               </div>
-              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
+              <div class="border-e p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Thursday') }}
               </div>
-              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
+              <div class="border-e p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Friday') }}
               </div>
-              <div class="border-s p-2 text-center text-xs dark:border-gray-700">
+              <div class="border-e p-2 text-center text-xs dark:border-gray-700">
                 {{ $t('Saturday') }}
               </div>
               <div class="p-2 text-center text-xs">{{ $t('Sunday') }}</div>
@@ -101,12 +101,12 @@ const get = (day) => {
             <div
               v-for="week in data.weeks"
               :key="week.id"
-              class="grid grid-cols-7 border-s border-t last:rounded-b-lg last:border-b dark:border-gray-700">
+              class="grid grid-cols-7 border-x border-t last:rounded-b-lg last:border-b dark:border-gray-700">
               <div
                 v-for="day in week"
                 :key="day.id"
                 @click="get(day)"
-                class="h-32 border-s p-2 last:border-r-0 dark:border-gray-700"
+                class="h-32 border-e p-2 last:border-r-0 dark:border-gray-700"
                 :class="day.is_in_month ? 'cursor-pointer' : 'bg-slate-50 dark:bg-slate-900'">
                 <!-- date of the day -->
                 <div class="flex items-center justify-between">

From a7153e20fa5a5ea85c011489a3ebd0a6549aa3d2 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 19:44:47 +0200
Subject: [PATCH 09/14] Apply suggestions from code review

---
 resources/js/Pages/Vault/Dashboard/Index.vue     | 4 ++--
 resources/js/Pages/Vault/Index.vue               | 2 +-
 resources/js/Pages/Vault/Journal/Photo/Index.vue | 2 +-
 resources/js/Shared/Form/PrettyButton.vue        | 4 ++--
 resources/js/Shared/Modules/Loans.vue            | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/Pages/Vault/Dashboard/Index.vue b/resources/js/Pages/Vault/Dashboard/Index.vue
index cc51ebee2..0d799b006 100644
--- a/resources/js/Pages/Vault/Dashboard/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Index.vue
@@ -89,7 +89,7 @@ const changeTab = (tab) => {
                   @click="changeTab('life_events')"
                   type="button"
                   :class="{ 'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': currentTab === 'life_events' }"
-                  class="inline-flex items-center border-b border-s border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                  class="inline-flex items-center border-y border-e border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -116,7 +116,7 @@ const changeTab = (tab) => {
                   :class="{
                     'bg-gray-100 text-blue-700 dark:bg-gray-400 dark:font-bold': currentTab === 'life_metrics',
                   }"
-                  class="inline-flex items-center rounded-e-lg border-b border-s border-t border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+                  class="inline-flex items-center rounded-e-lg border-y border-e border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
diff --git a/resources/js/Pages/Vault/Index.vue b/resources/js/Pages/Vault/Index.vue
index 09dd6329f..c603887be 100644
--- a/resources/js/Pages/Vault/Index.vue
+++ b/resources/js/Pages/Vault/Index.vue
@@ -4,7 +4,7 @@
       <!-- blank state -->
       <div v-if="data.vaults.length == 0" class="mx-auto mb-6 max-w-md px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <div
-          class="dark:bg-ghray-900 rounded-t-lg border-s border-t border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
+          class="dark:bg-ghray-900 rounded-t-lg border-x border-t border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
           <p class="mb-2 text-center text-xl">👋</p>
           <h2 class="mb-6 text-center text-lg font-semibold">
             {{ $t('Thanks for giving Monica a try') }}
diff --git a/resources/js/Pages/Vault/Journal/Photo/Index.vue b/resources/js/Pages/Vault/Journal/Photo/Index.vue
index 57bfbf028..8d9b71d0c 100644
--- a/resources/js/Pages/Vault/Journal/Photo/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Photo/Index.vue
@@ -70,7 +70,7 @@ defineProps({
             </inertia-link>
 
             <inertia-link
-              class="inline-flex items-center rounded-e-md border-b border-s border-t border-gray-200 bg-gray-100 bg-white px-4 py-2 text-sm font-medium text-blue-700 text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-400 dark:bg-gray-700 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
+              class="inline-flex items-center rounded-e-md border-y border-e border-gray-200 bg-gray-100 bg-white px-4 py-2 text-sm font-medium text-blue-700 text-gray-900 hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:bg-gray-400 dark:bg-gray-700 dark:font-bold dark:text-white hover:dark:bg-gray-600 hover:dark:text-white dark:focus:text-white dark:focus:ring-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
diff --git a/resources/js/Shared/Form/PrettyButton.vue b/resources/js/Shared/Form/PrettyButton.vue
index 1b299c42f..fc356ea24 100644
--- a/resources/js/Shared/Form/PrettyButton.vue
+++ b/resources/js/Shared/Form/PrettyButton.vue
@@ -28,7 +28,7 @@
     <svg
       v-if="icon === 'minus' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative me-1 ms-1 inline h-5 w-5"
+      class="icon relative mx-1 inline h-5 w-5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
@@ -44,7 +44,7 @@
     <svg
       v-if="icon === 'arrow' && state != 'loading'"
       xmlns="http://www.w3.org/2000/svg"
-      class="icon relative me-1 ms-1 inline h-5 w-5"
+      class="icon relative mx-1 inline h-5 w-5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor">
diff --git a/resources/js/Shared/Modules/Loans.vue b/resources/js/Shared/Modules/Loans.vue
index ea5b0ab6b..647d2baba 100644
--- a/resources/js/Shared/Modules/Loans.vue
+++ b/resources/js/Shared/Modules/Loans.vue
@@ -143,7 +143,7 @@
               :label="$t('Who makes the loan?')"
               :add-multiple-contacts="true"
               :required="true"
-              :div-outer-class="'p-5 flex-1 border-s border-gray-200 dark:border-gray-700'" />
+              :div-outer-class="'p-5 flex-1 border-e border-gray-200 dark:border-gray-700'" />
 
             <contact-selector
               v-model="form.loanees"
@@ -369,7 +369,7 @@
                 :label="$t('Who makes the loan?')"
                 :add-multiple-contacts="true"
                 :required="true"
-                :div-outer-class="'p-5 flex-1 border-s border-gray-200 dark:border-gray-700'" />
+                :div-outer-class="'p-5 flex-1 border-e border-gray-200 dark:border-gray-700'" />
 
               <contact-selector
                 v-model="form.loanees"

From dab7fa12dc401490baa8c171c8e3e94f7a6f0e80 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 19:58:45 +0200
Subject: [PATCH 10/14] end

---
 resources/js/Components/Jetstream/SectionTitle.vue     |  2 +-
 resources/js/Components/Jetstream/Select.vue           |  4 ++--
 resources/js/Components/ResponsiveNavLink.vue          |  4 ++--
 resources/js/Pages/Auth/Login.vue                      |  2 +-
 resources/js/Pages/Auth/Register.vue                   |  2 +-
 resources/js/Pages/Settings/CancelAccount/Index.vue    |  2 +-
 resources/js/Pages/Settings/Notifications/Index.vue    |  2 +-
 .../js/Pages/Settings/Notifications/Logs/Index.vue     |  2 +-
 .../Pages/Settings/Personalize/CallReasons/Index.vue   |  6 +++---
 .../js/Pages/Settings/Personalize/Currencies/Index.vue |  2 +-
 .../Pages/Settings/Personalize/GiftOccasions/Index.vue |  2 +-
 .../js/Pages/Settings/Personalize/GiftStates/Index.vue |  2 +-
 .../js/Pages/Settings/Personalize/GroupTypes/Index.vue |  6 +++---
 .../js/Pages/Settings/Personalize/Modules/Index.vue    |  2 +-
 .../Pages/Settings/Personalize/PostTemplates/Index.vue |  6 +++---
 .../Pages/Settings/Personalize/Relationships/Index.vue |  8 ++++----
 .../js/Pages/Settings/Personalize/Religions/Index.vue  |  2 +-
 .../js/Pages/Settings/Personalize/Templates/Index.vue  |  2 +-
 .../Personalize/Templates/Partials/Modules.vue         |  6 +++---
 .../Settings/Personalize/Templates/Partials/Pages.vue  |  2 +-
 .../js/Pages/Settings/Personalize/Templates/Show.vue   |  2 +-
 .../Pages/Settings/Preferences/Partials/DateFormat.vue |  2 +-
 .../Pages/Settings/Preferences/Partials/NameOrder.vue  |  2 +-
 .../Pages/Settings/Preferences/Partials/Timezone.vue   |  2 +-
 resources/js/Pages/Vault/Contact/Blank.vue             |  2 +-
 resources/js/Pages/Vault/Contact/Move.vue              |  2 +-
 .../js/Pages/Vault/Contact/Relationships/Create.vue    |  4 ++--
 resources/js/Pages/Vault/Files/Index.vue               | 10 +++++-----
 resources/js/Pages/Vault/Journal/Slices/Show.vue       |  4 ++--
 .../Pages/Vault/Settings/Partials/DefaultTemplate.vue  |  2 +-
 resources/js/Pages/Vault/Settings/Partials/Delete.vue  |  2 +-
 .../Settings/Partials/LifeEventTypesAndCategories.vue  |  4 ++--
 .../Vault/Settings/Partials/MoodTrackingParameters.vue |  4 ++--
 .../Vault/Settings/Partials/QuickFactTemplate.vue      |  2 +-
 .../js/Pages/Vault/Settings/Partials/TabVisibility.vue |  2 +-
 resources/js/Shared/Form/ContactSelector.vue           |  2 +-
 resources/js/Shared/Modules/CreateLifeEvent.vue        |  2 +-
 37 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/resources/js/Components/Jetstream/SectionTitle.vue b/resources/js/Components/Jetstream/SectionTitle.vue
index e34d2a280..c74144f0f 100644
--- a/resources/js/Components/Jetstream/SectionTitle.vue
+++ b/resources/js/Components/Jetstream/SectionTitle.vue
@@ -34,7 +34,7 @@ defineProps({
       class="mb-6 flex items-center rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-6 flex-none pr-2"
+        class="h-6 flex-none pe-2"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor">
diff --git a/resources/js/Components/Jetstream/Select.vue b/resources/js/Components/Jetstream/Select.vue
index f2503a33b..c0df67cd1 100644
--- a/resources/js/Components/Jetstream/Select.vue
+++ b/resources/js/Components/Jetstream/Select.vue
@@ -151,7 +151,7 @@ const alignmentClasses = computed(() => {
           </svg>
         </button>
       </div>
-      <div class="flex w-8 items-center border-s border-gray-200 py-1 pl-2 pr-1 text-gray-300 dark:border-gray-600">
+      <div class="flex w-8 items-center border-s border-gray-200 py-1 pe-1 ps-2 text-gray-300 dark:border-gray-600">
         <button
           @click.prevent="
             open = !open;
@@ -202,7 +202,7 @@ const alignmentClasses = computed(() => {
               close();
             ">
             <div
-              class="relative flex w-full items-center border-s-2 border-transparent bg-white p-2 pl-2 hover:border-teal-600 hover:bg-teal-600 hover:text-teal-100 dark:bg-gray-800 hover:dark:border-teal-400 hover:dark:bg-teal-400 hover:dark:text-teal-900">
+              class="relative flex w-full items-center border-s-2 border-transparent bg-white p-2 ps-2 hover:border-teal-600 hover:bg-teal-600 hover:text-teal-100 dark:bg-gray-800 hover:dark:border-teal-400 hover:dark:bg-teal-400 hover:dark:text-teal-900">
               <div class="flex w-full items-center">
                 <div class="mx-2 leading-6">
                   {{ option.name }}
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index a7eafe586..907d36f25 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -10,8 +10,8 @@ const props = defineProps({
 
 const classes = computed(() => {
   return props.active
-    ? 'block pl-3 pr-4 py-2 border-s-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition'
-    : 'block pl-3 pr-4 py-2 border-s-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition';
+    ? 'block ps-3 pe-4 py-2 border-s-4 border-indigo-400 dark:border-indigo-600 text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900 focus:outline-none focus:text-indigo-800 focus:dark:text-indigo-200 focus:bg-indigo-100 focus:dark:bg-indigo-900 focus:border-indigo-700 focus:dark:border-indigo-300 transition'
+    : 'block ps-3 pe-4 py-2 border-s-4 border-transparent text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-200 hover:bg-gray-50 hover:dark:bg-gray-900 hover:border-gray-300 hover:dark:border-gray-700 focus:outline-none focus:text-gray-800 focus:dark:text-gray-200 focus:bg-gray-50 focus:dark:bg-gray-900 focus:border-gray-300 focus:dark:border-gray-700 transition';
 });
 </script>
 
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 549a650e2..2dafaebc0 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -87,7 +87,7 @@ const reload = () => {
         <span class="ms-2">🚧</span>
       </p>
       <p class="mb-2">{{ $t('Compared to Monica:') }}</p>
-      <ul class="list mb-2 pl-3">
+      <ul class="list mb-2 ps-3">
         <li class="list-disc">
           {{ $t('it misses some of the features, the most important ones being the API and gift management,') }}
         </li>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 637a5c500..ab2bf897e 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -122,7 +122,7 @@ const policy = () => {
           <span class="ms-2">🚧</span>
         </p>
         <p class="mb-2">{{ $t('Compared to Monica:') }}</p>
-        <ul class="list mb-2 pl-3">
+        <ul class="list mb-2 ps-3">
           <li class="list-disc">
             {{ $t('it misses some of the features, the most important ones being the API and gift management,') }}
           </li>
diff --git a/resources/js/Pages/Settings/CancelAccount/Index.vue b/resources/js/Pages/Settings/CancelAccount/Index.vue
index 6fc478817..a2f280b1d 100644
--- a/resources/js/Pages/Settings/CancelAccount/Index.vue
+++ b/resources/js/Pages/Settings/CancelAccount/Index.vue
@@ -43,7 +43,7 @@
             </h1>
             <p class="mb-2">{{ $t('Thanks for giving Monica a try.') }}</p>
             <p class="mb-2">{{ $t('Once you cancel,') }}</p>
-            <ul class="list-disc pl-6">
+            <ul class="list-disc ps-6">
               <li>{{ $t('Your account will be closed immediately,') }}</li>
               <li>{{ $t('All users and vaults will be deleted immediately,') }}</li>
               <li>
diff --git a/resources/js/Pages/Settings/Notifications/Index.vue b/resources/js/Pages/Settings/Notifications/Index.vue
index ad1d9a611..6059ce92e 100644
--- a/resources/js/Pages/Settings/Notifications/Index.vue
+++ b/resources/js/Pages/Settings/Notifications/Index.vue
@@ -45,7 +45,7 @@
         <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 grow pr-2"
+            class="h-6 grow pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
diff --git a/resources/js/Pages/Settings/Notifications/Logs/Index.vue b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
index 57dfec485..bbba17e05 100644
--- a/resources/js/Pages/Settings/Notifications/Logs/Index.vue
+++ b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
@@ -69,7 +69,7 @@
         <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 grow pr-2"
+            class="h-6 grow pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
diff --git a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
index 89f9139e8..a4ae8502d 100644
--- a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
@@ -63,7 +63,7 @@
         <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 pr-2"
+            class="h-6 pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
@@ -166,7 +166,7 @@
               :key="reason.id"
               class="border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <!-- detail of the relationship type -->
-              <div v-if="renameReasonModalId != reason.id" class="flex items-center justify-between px-5 py-2 pl-6">
+              <div v-if="renameReasonModalId != reason.id" class="flex items-center justify-between px-5 py-2 ps-6">
                 <span>{{ reason.label }}</span>
 
                 <!-- actions -->
@@ -219,7 +219,7 @@
             <!-- create a new reason -->
             <div
               v-if="createReasonModalId != callReasonType.id"
-              class="item-list border-b border-gray-200 px-5 py-2 pl-6 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              class="item-list border-b border-gray-200 px-5 py-2 ps-6 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <span
                 class="cursor-pointer text-sm text-blue-500 hover:underline"
                 @click="showReasonModal(callReasonType)"
diff --git a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
index 75aa484ad..7a20edbf6 100644
--- a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
@@ -58,7 +58,7 @@
         <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 grow pr-2"
+            class="h-6 grow pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
diff --git a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
index 9d32cc2ce..de98fb18e 100644
--- a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
@@ -99,7 +99,7 @@
             <template #item="{ element }">
               <div
                 v-if="editGiftOccasionId != element.id"
-                class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+                class="item-list flex items-center justify-between border-b border-gray-200 py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- icon to move position -->
                 <div class="me-2 flex">
                   <svg
diff --git a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
index 64d87b847..b92d0e0dc 100644
--- a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
@@ -97,7 +97,7 @@
             <template #item="{ element }">
               <div v-if="editGiftStateId != element.id" class="list-icon">
                 <div
-                  class="item-list mb-2 flex items-center justify-between rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
+                  class="item-list mb-2 flex items-center justify-between rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                   <!-- icon to move position -->
                   <div class="me-2 flex">
                     <svg
diff --git a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
index d52f842ed..7c87bf8af 100644
--- a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
@@ -63,7 +63,7 @@
         <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 grow pr-2"
+            class="h-6 grow pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
@@ -123,7 +123,7 @@
             <template #item="{ element }">
               <div v-if="editGroupTypeId != element.id" class="">
                 <div
-                  class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
+                  class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                   <div class="mb-3 flex items-center justify-between">
                     <!-- icon to move position -->
                     <div class="me-2 flex">
@@ -172,7 +172,7 @@
                       <template #item="{ element, id }">
                         <div v-if="editRoleId != element.id" class="">
                           <div
-                            class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
+                            class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                             <div class="flex items-center justify-between">
                               <!-- icon to move position -->
                               <div class="me-2 flex">
diff --git a/resources/js/Pages/Settings/Personalize/Modules/Index.vue b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
index b9d7c4717..d2a23969c 100644
--- a/resources/js/Pages/Settings/Personalize/Modules/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
@@ -55,7 +55,7 @@
         <div class="mb-10 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 pr-2"
+            class="h-6 pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
diff --git a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
index 6e90b2ccc..b82b13731 100644
--- a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
@@ -63,7 +63,7 @@
         <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 grow pr-2"
+            class="h-6 grow pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
@@ -123,7 +123,7 @@
             <template #item="{ element }">
               <div v-if="editPostTemplateId != element.id" class="">
                 <div
-                  class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
+                  class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                   <div class="mb-3 flex items-center justify-between">
                     <!-- icon to move position -->
                     <div class="me-2 flex">
@@ -175,7 +175,7 @@
                       <template #item="{ element, id }">
                         <div v-if="editSectionId != element.id" class="">
                           <div
-                            class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
+                            class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                             <div class="flex items-center justify-between">
                               <!-- icon to move position -->
                               <div class="me-2 flex">
diff --git a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
index e96cf085a..495945ffc 100644
--- a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
@@ -65,7 +65,7 @@
         <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 grow pr-2"
+            class="h-6 grow pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
@@ -84,7 +84,7 @@
                 )
               }}
             </p>
-            <ul class="mb-2 list-disc pl-4">
+            <ul class="mb-2 list-disc ps-4">
               <li>{{ $t('a father-son relation shown on the father page,') }}</li>
               <li>{{ $t('a son-father relation shown on the son page.') }}</li>
             </ul>
@@ -187,7 +187,7 @@
             <div
               v-for="type in groupType.types"
               :key="type.id"
-              class="border-b border-gray-200 px-5 py-2 pl-6 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              class="border-b border-gray-200 px-5 py-2 ps-6 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <!-- detail of the relationship type -->
               <div v-if="renameRelationshipTypeModalId != type.id" class="flex items-center justify-between">
                 <div class="relative">
@@ -277,7 +277,7 @@
             <!-- create a new relationship type line -->
             <div
               v-if="createRelationshipTypeModalId != groupType.id"
-              class="item-list border-b border-gray-200 px-5 py-2 pl-6 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              class="item-list border-b border-gray-200 px-5 py-2 ps-6 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <span
                 class="cursor-pointer text-sm text-blue-500 hover:underline"
                 @click="showRelationshipTypeModal(groupType)"
diff --git a/resources/js/Pages/Settings/Personalize/Religions/Index.vue b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
index fa83903cc..3efbb7aaf 100644
--- a/resources/js/Pages/Settings/Personalize/Religions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
@@ -99,7 +99,7 @@
             <template #item="{ element }">
               <div
                 v-if="editReligionId != element.id"
-                class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+                class="item-list flex items-center justify-between border-b border-gray-200 py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- icon to move position -->
                 <div class="me-2 flex">
                   <svg
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Index.vue b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
index f83cc7b93..0efbd7a44 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
@@ -65,7 +65,7 @@
         <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 grow pr-2"
+            class="h-6 grow pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
index 574724407..4c80e49d0 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
@@ -22,13 +22,13 @@
       v-if="addModuleModalShown"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <li
-        class="item-list border-b border-gray-200 bg-slate-50 py-2 pl-2 pr-5 text-sm dark:border-gray-700 dark:bg-slate-900">
+        class="item-list border-b border-gray-200 bg-slate-50 py-2 pe-5 ps-2 text-sm dark:border-gray-700 dark:bg-slate-900">
         {{ $t('Available modules:') }}
       </li>
       <li
         v-for="module in localAllModules"
         :key="module.id"
-        class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-2 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+        class="item-list flex items-center justify-between border-b border-gray-200 py-2 pe-5 ps-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
         <span>{{ module.name }}</span>
         <span
           v-if="!module.already_used"
@@ -54,7 +54,7 @@
         @change="updatePosition">
         <template #item="{ element }">
           <div
-            class="item-list flex items-center border-b border-gray-200 py-2 pl-2 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+            class="item-list flex items-center border-b border-gray-200 py-2 pe-5 ps-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- anchor to move module -->
             <div class="me-2">
               <svg
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
index 8d67c4a8b..aa55d80fc 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -42,7 +42,7 @@
         <div
           v-if="renamePageModalShownId != element.id"
           :class="isSelectedId == element.id ? 'border-2	bg-sky-100' : ''"
-          class="mb-2 flex items-center rounded-lg border border-gray-200 bg-white py-2 pl-2 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800"
+          class="mb-2 flex items-center rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800"
           @click="selectPage(element)">
           <!-- icon to move position -->
           <div class="me-2">
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Show.vue b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
index 2a49035c0..688061c21 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Show.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
@@ -74,7 +74,7 @@
         <div class="mb-10 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:bg-slate-900">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 pr-2"
+            class="h-6 pe-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
index 2bc22aec0..a6d33909d 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
@@ -17,7 +17,7 @@
     <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-6 w-6 pr-2"
+        class="h-6 w-6 pe-2"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor">
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
index 05e22b3e7..0a04dc9ab 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -17,7 +17,7 @@
     <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-6 grow pr-2"
+        class="h-6 grow pe-2"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor">
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
index d09a56b68..29fa68919 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
@@ -17,7 +17,7 @@
     <div class="mb-6 flex rounded border bg-slate-50 px-3 py-2 text-sm dark:border-gray-700 dark:bg-slate-900">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-6 w-6 pr-2"
+        class="h-6 w-6 pe-2"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor">
diff --git a/resources/js/Pages/Vault/Contact/Blank.vue b/resources/js/Pages/Vault/Contact/Blank.vue
index 3c719bfa8..7e905a002 100644
--- a/resources/js/Pages/Vault/Contact/Blank.vue
+++ b/resources/js/Pages/Vault/Contact/Blank.vue
@@ -40,7 +40,7 @@
             class="flex rounded-t border-b border-gray-200 bg-slate-50 px-3 py-2 dark:border-gray-700 dark:bg-slate-900">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="h-6 grow pr-2"
+              class="h-6 grow pe-2"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
diff --git a/resources/js/Pages/Vault/Contact/Move.vue b/resources/js/Pages/Vault/Contact/Move.vue
index 3c37485a5..ae3965622 100644
--- a/resources/js/Pages/Vault/Contact/Move.vue
+++ b/resources/js/Pages/Vault/Contact/Move.vue
@@ -60,7 +60,7 @@ const move = (vault) => {
             class="flex rounded-t border-b border-gray-200 bg-slate-50 px-3 py-2 dark:border-gray-700 dark:bg-slate-900 dark:bg-slate-900">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="h-6 grow pr-2"
+              class="h-6 grow pe-2"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
diff --git a/resources/js/Pages/Vault/Contact/Relationships/Create.vue b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
index 425e9aeaf..203469741 100644
--- a/resources/js/Pages/Vault/Contact/Relationships/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
@@ -145,7 +145,7 @@
                     </label>
                   </div>
 
-                  <div v-if="showContactName" class="pl-6">
+                  <div v-if="showContactName" class="ps-6">
                     <text-input
                       :ref="'contactName'"
                       v-model="form.first_name"
@@ -211,7 +211,7 @@
                     </label>
                   </div>
 
-                  <div v-if="form.choice == 'contact'" class="pl-6">
+                  <div v-if="form.choice == 'contact'" class="ps-6">
                     <contact-selector
                       v-model="form.other_contact_id"
                       :search-url="layoutData.vault.url.search_contacts_only"
diff --git a/resources/js/Pages/Vault/Files/Index.vue b/resources/js/Pages/Vault/Files/Index.vue
index 7a8d0964f..6bad583e1 100644
--- a/resources/js/Pages/Vault/Files/Index.vue
+++ b/resources/js/Pages/Vault/Files/Index.vue
@@ -8,7 +8,7 @@
             <!-- filters -->
             <div>
               <ul class="mb-4">
-                <li class="border-s-2 pl-2" :class="{ 'border-orange-500': tab === 'index' }">
+                <li class="border-s-2 ps-2" :class="{ 'border-orange-500': tab === 'index' }">
                   <inertia-link :href="data.statistics.url.index">
                     {{ $t('All files') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.all }})</span>
@@ -16,23 +16,23 @@
                 </li>
               </ul>
 
-              <p class="mb-2 pl-2 text-sm text-gray-500">
+              <p class="mb-2 ps-2 text-sm text-gray-500">
                 {{ $t('Or filter by type') }}
               </p>
               <ul>
-                <li class="mb-2 border-s-2 pl-2" :class="{ 'border-orange-500': tab === 'documents' }">
+                <li class="mb-2 border-s-2 ps-2" :class="{ 'border-orange-500': tab === 'documents' }">
                   <inertia-link :href="data.statistics.url.documents">
                     {{ $t('Documents') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.documents }})</span>
                   </inertia-link>
                 </li>
-                <li class="mb-2 border-s-2 pl-2" :class="{ 'border-orange-500': tab === 'photos' }">
+                <li class="mb-2 border-s-2 ps-2" :class="{ 'border-orange-500': tab === 'photos' }">
                   <inertia-link :href="data.statistics.url.photos">
                     {{ $t('Photos') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.photos }})</span>
                   </inertia-link>
                 </li>
-                <li class="mb-2 border-s-2 pl-2" :class="{ 'border-orange-500': tab === 'avatars' }">
+                <li class="mb-2 border-s-2 ps-2" :class="{ 'border-orange-500': tab === 'avatars' }">
                   <inertia-link :href="data.statistics.url.avatars">
                     {{ $t('Avatars') }}
                     <span class="text-sm text-gray-500">({{ data.statistics.statistics.avatars }})</span>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Show.vue b/resources/js/Pages/Vault/Journal/Slices/Show.vue
index c361a01f0..3e9d766ce 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Show.vue
@@ -191,7 +191,7 @@ const destroy = () => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="me-0 h-4 pr-2">
+                class="me-0 h-4 pe-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -209,7 +209,7 @@ const destroy = () => {
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="me-0 h-4 pr-2">
+                class="me-0 h-4 pe-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
diff --git a/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
index f6adda08a..cefacac5f 100644
--- a/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
@@ -13,7 +13,7 @@
       <div class="flex rounded-t border-b border-gray-200 bg-slate-50 px-3 py-2 dark:border-gray-700 dark:bg-slate-900">
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-6 grow pr-2"
+          class="h-6 grow pe-2"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor">
diff --git a/resources/js/Pages/Vault/Settings/Partials/Delete.vue b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
index 1ae03e05e..3240174b8 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Delete.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
@@ -14,7 +14,7 @@
         class="mb-2 flex rounded-t border-b border-gray-200 bg-slate-50 px-3 py-2 dark:border-gray-700 dark:bg-slate-900">
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-6 grow pr-2"
+          class="h-6 grow pe-2"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor">
diff --git a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
index d5ad0c03c..90f1dabdf 100644
--- a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
@@ -248,7 +248,7 @@ const destroyLifeEventType = (lifeEventType) => {
         <template #item="{ element }">
           <div v-if="editLifeEventCategoryId != element.id" class="">
             <div
-              class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
+              class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
               <div class="mb-3 flex items-center justify-between">
                 <!-- icon to move position -->
                 <div class="me-2 flex">
@@ -297,7 +297,7 @@ const destroyLifeEventType = (lifeEventType) => {
                   <template #item="{ element, id }">
                     <div v-if="editLifeEventTypeId != element.id" class="">
                       <div
-                        class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
+                        class="item-list mb-2 rounded-lg border border-gray-200 bg-white py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
                         <div class="flex items-center justify-between">
                           <!-- icon to move position -->
                           <div class="me-2 flex">
diff --git a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
index 0be0a463d..92dedcc9b 100644
--- a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
@@ -174,7 +174,7 @@ const updatePosition = (event) => {
 
     <!-- help text -->
     <div class="mb-4 flex rounded border border-gray-200 bg-slate-50 px-3 py-2 dark:border-gray-700 dark:bg-slate-900">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 pr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 pe-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -200,7 +200,7 @@ const updatePosition = (event) => {
         <template #item="{ element }">
           <div
             v-if="editMoodTrackingParameterId != element.id"
-            class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+            class="item-list flex items-center justify-between border-b border-gray-200 py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- icon to move position -->
             <div class="me-2 flex items-center">
               <svg
diff --git a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
index cdbf7d1ec..5c94841b0 100644
--- a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
@@ -157,7 +157,7 @@ const updatePosition = (event) => {
         <template #item="{ element }">
           <div
             v-if="editEntryId != element.id"
-            class="item-list flex items-center justify-between border-b border-gray-200 py-2 pl-4 pr-5 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+            class="item-list flex items-center justify-between border-b border-gray-200 py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- icon to move position -->
             <div class="me-2 flex">
               <svg
diff --git a/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue b/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
index b88bfc9ff..72261aa27 100644
--- a/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
@@ -45,7 +45,7 @@ const update = () => {
     <div class="mb-6 rounded border text-sm">
       <!-- help text -->
       <div class="flex rounded-t border-b border-gray-200 bg-slate-50 px-3 py-2 dark:border-gray-700 dark:bg-slate-900">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 pr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 pe-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
diff --git a/resources/js/Shared/Form/ContactSelector.vue b/resources/js/Shared/Form/ContactSelector.vue
index 8ac85bf54..c5eddbe53 100644
--- a/resources/js/Shared/Form/ContactSelector.vue
+++ b/resources/js/Shared/Form/ContactSelector.vue
@@ -225,7 +225,7 @@ export default {
     },
     localInputClasses() {
       return [
-        'pl-8 w-full rounded-md shadow-sm',
+        'ps-8 w-full rounded-md shadow-sm',
         'bg-white dark:bg-slate-900 border-gray-300 dark:border-gray-700',
         'focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50',
         'disabled:bg-slate-50 disabled:dark:bg-slate-900',
diff --git a/resources/js/Shared/Modules/CreateLifeEvent.vue b/resources/js/Shared/Modules/CreateLifeEvent.vue
index 92e5a9129..228b8adb6 100644
--- a/resources/js/Shared/Modules/CreateLifeEvent.vue
+++ b/resources/js/Shared/Modules/CreateLifeEvent.vue
@@ -341,7 +341,7 @@ const store = () => {
       <!-- description -->
       <div
         v-if="selectedLifeEventType && addDistanceFieldShown"
-        class="flex items-center border-b border-gray-200 pb-1 pl-3 pr-3 pt-3 dark:border-gray-700">
+        class="flex items-center border-b border-gray-200 pb-1 pe-3 ps-3 pt-3 dark:border-gray-700">
         <text-input
           ref="distanceField"
           v-model="form.distance"

From a27d215d5899048179d9489ec0181c18abd1d213 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 20:17:39 +0200
Subject: [PATCH 11/14] Apply suggestions from code review

---
 resources/js/Shared/Form/ContactSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Shared/Form/ContactSelector.vue b/resources/js/Shared/Form/ContactSelector.vue
index c5eddbe53..4e1143c21 100644
--- a/resources/js/Shared/Form/ContactSelector.vue
+++ b/resources/js/Shared/Form/ContactSelector.vue
@@ -319,7 +319,7 @@ export default {
 }
 
 .dark .optional-badge {
-  color: #d4d8dd;
+  color: #d4d8dd !important;
   background-color: #2f3031 !important;
 }
 

From d4893b271b4eb70159437b086f4cca9b24bbeb18 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 21:01:05 +0200
Subject: [PATCH 12/14] simplify

---
 resources/js/Components/Dropdown.vue          |  3 +-
 resources/js/Components/Jetstream/Banner.vue  |  4 +-
 resources/js/Components/Pagination.vue        | 10 ++--
 resources/js/Layouts/AppLayout.vue            |  8 ++--
 resources/js/Pages/Auth/Login.vue             |  2 +-
 resources/js/Pages/Auth/Register.vue          |  2 +-
 .../js/Pages/Settings/CancelAccount/Index.vue |  6 +--
 .../Notifications/Partials/Emails.vue         |  4 +-
 .../Notifications/Partials/Telegram.vue       |  4 +-
 .../Personalize/AddressTypes/Index.vue        | 11 ++---
 .../Personalize/CallReasons/Index.vue         | 20 ++++----
 .../ContactInformationTypes/Index.vue         | 11 ++---
 .../Settings/Personalize/Genders/Index.vue    |  8 ++--
 .../Personalize/GiftOccasions/Index.vue       | 12 ++---
 .../Settings/Personalize/GiftStates/Index.vue | 12 ++---
 .../Settings/Personalize/GroupTypes/Index.vue | 28 ++++-------
 .../Settings/Personalize/Modules/Index.vue    |  4 +-
 .../Personalize/PetCategories/Index.vue       | 11 ++---
 .../Personalize/PostTemplates/Index.vue       | 28 ++++-------
 .../Settings/Personalize/Pronouns/Index.vue   |  8 ++--
 .../Personalize/Relationships/Index.vue       | 26 ++++------
 .../Settings/Personalize/Religions/Index.vue  | 12 ++---
 .../Settings/Personalize/Templates/Index.vue  |  8 ++--
 .../Personalize/Templates/Partials/Pages.vue  |  8 ++--
 .../Preferences/Partials/DateFormat.vue       |  4 +-
 .../Preferences/Partials/DistanceFormat.vue   |  4 +-
 .../Settings/Preferences/Partials/Locale.vue  |  4 +-
 .../Settings/Preferences/Partials/Maps.vue    |  4 +-
 .../Preferences/Partials/NameOrder.vue        |  4 +-
 .../Preferences/Partials/NumberFormat.vue     |  4 +-
 .../Preferences/Partials/Timezone.vue         |  4 +-
 resources/js/Pages/Settings/Users/Create.vue  |  8 +---
 resources/js/Pages/Settings/Users/Index.vue   |  4 +-
 resources/js/Pages/Vault/Calendar/Index.vue   |  2 +-
 resources/js/Pages/Vault/Companies/Index.vue  |  2 +-
 resources/js/Pages/Vault/Contact/Create.vue   |  4 +-
 .../js/Pages/Vault/Contact/Goals/Show.vue     |  4 +-
 .../Vault/Contact/ImportantDates/Index.vue    | 10 ++--
 resources/js/Pages/Vault/Contact/Index.vue    |  2 +-
 .../js/Pages/Vault/Contact/Names/Edit.vue     |  4 +-
 .../js/Pages/Vault/Contact/Photos/Index.vue   |  2 +-
 .../Vault/Contact/Relationships/Create.vue    |  6 +--
 resources/js/Pages/Vault/Contact/Show.vue     | 16 +++----
 resources/js/Pages/Vault/Create.vue           |  6 +--
 .../Vault/Dashboard/Partials/DueTasks.vue     |  2 +-
 .../Vault/Dashboard/Partials/Favorites.vue    |  2 +-
 .../Vault/Dashboard/Partials/LastUpdated.vue  |  2 +-
 .../Vault/Dashboard/Partials/LifeMetrics.vue  | 12 ++---
 .../Dashboard/Partials/MoodTrackingEvents.vue |  4 +-
 .../Dashboard/Partials/UpcomingReminders.vue  |  2 +-
 .../Pages/Vault/Dashboard/Reminder/Index.vue  |  2 +-
 .../js/Pages/Vault/Dashboard/Task/Index.vue   |  2 +-
 resources/js/Pages/Vault/Files/Index.vue      |  2 +-
 resources/js/Pages/Vault/Group/Edit.vue       |  4 +-
 resources/js/Pages/Vault/Group/Index.vue      |  2 +-
 resources/js/Pages/Vault/Group/Show.vue       |  4 +-
 resources/js/Pages/Vault/Index.vue            |  2 +-
 resources/js/Pages/Vault/Journal/Create.vue   |  4 +-
 resources/js/Pages/Vault/Journal/Edit.vue     |  4 +-
 resources/js/Pages/Vault/Journal/Index.vue    |  2 +-
 .../js/Pages/Vault/Journal/Metrics/Index.vue  |  4 +-
 .../Journal/Post/Partials/PostMetrics.vue     |  4 +-
 .../Journal/Post/Partials/SlicesOfLife.vue    |  4 +-
 .../Vault/Journal/Post/Partials/Tags.vue      |  2 +-
 .../js/Pages/Vault/Journal/Post/Show.vue      |  2 +-
 .../js/Pages/Vault/Journal/Slices/Edit.vue    |  4 +-
 .../js/Pages/Vault/Journal/Slices/Index.vue   |  4 +-
 .../Partials/ContactImportantDateTypes.vue    | 10 ++--
 .../Pages/Vault/Settings/Partials/Delete.vue  |  2 +-
 .../Pages/Vault/Settings/Partials/Labels.vue  |  8 ++--
 .../Partials/LifeEventTypesAndCategories.vue  | 27 ++++-------
 .../Partials/MoodTrackingParameters.vue       |  8 ++--
 .../Settings/Partials/QuickFactTemplate.vue   |  8 ++--
 .../js/Pages/Vault/Settings/Partials/Tags.vue |  8 ++--
 .../Pages/Vault/Settings/Partials/Users.vue   |  8 +---
 resources/js/Shared/Avatar.vue                | 32 ++++---------
 resources/js/Shared/ContactCard.vue           | 48 +++++++------------
 resources/js/Shared/Form/PrettyButton.vue     | 33 ++++---------
 resources/js/Shared/Form/PrettyLink.vue       | 25 +++-------
 resources/js/Shared/Form/PrettySpan.vue       | 19 ++------
 resources/js/Shared/Help.vue                  | 10 +---
 resources/js/Shared/HoverMenu.vue             |  6 +--
 resources/js/Shared/Modules/Addresses.vue     | 14 +++---
 resources/js/Shared/Modules/Calls.vue         | 10 ++--
 resources/js/Shared/Modules/ContactAvatar.vue |  2 +-
 .../js/Shared/Modules/ContactInformation.vue  | 10 ++--
 .../js/Shared/Modules/CreateLifeEvent.vue     |  6 +--
 resources/js/Shared/Modules/Documents.vue     |  2 +-
 resources/js/Shared/Modules/Feed.vue          |  2 +-
 .../js/Shared/Modules/FeedItems/Address.vue   |  2 +-
 .../Modules/FeedItems/ContactInformation.vue  |  2 +-
 .../Modules/FeedItems/GenericAction.vue       |  2 +-
 .../js/Shared/Modules/FeedItems/Goal.vue      |  2 +-
 .../Modules/FeedItems/LabelAssigned.vue       |  6 +--
 .../Modules/FeedItems/MoodTrackingEvent.vue   |  2 +-
 .../js/Shared/Modules/FeedItems/Note.vue      |  4 +-
 resources/js/Shared/Modules/FeedItems/Pet.vue |  2 +-
 resources/js/Shared/Modules/Goals.vue         | 20 ++++----
 resources/js/Shared/Modules/Groups.vue        |  8 ++--
 .../js/Shared/Modules/JobInformation.vue      |  4 +-
 resources/js/Shared/Modules/Labels.vue        |  2 +-
 resources/js/Shared/Modules/LifeEvent.vue     |  2 +-
 resources/js/Shared/Modules/Loans.vue         | 10 ++--
 resources/js/Shared/Modules/Notes.vue         | 16 +++----
 resources/js/Shared/Modules/Pets.vue          | 10 ++--
 resources/js/Shared/Modules/Photos.vue        |  2 +-
 resources/js/Shared/Modules/QuickFacts.vue    |  8 ++--
 resources/js/Shared/Modules/Relationships.vue |  8 +---
 resources/js/Shared/Modules/Religion.vue      |  4 +-
 resources/js/Shared/Modules/Reminders.vue     | 10 ++--
 resources/js/Shared/Modules/Tasks.vue         | 10 ++--
 111 files changed, 346 insertions(+), 512 deletions(-)

diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/Dropdown.vue
index dfd8567ff..063da663f 100644
--- a/resources/js/Components/Dropdown.vue
+++ b/resources/js/Components/Dropdown.vue
@@ -64,9 +64,8 @@ const alignmentClasses = computed(() => {
       leave-to-class="transform opacity-0 scale-95">
       <div
         v-show="open"
-        class="absolute z-50 mt-2 rounded-md shadow-lg dark:shadow-gray-700"
+        class="absolute z-50 mt-2 hidden rounded-md shadow-lg dark:shadow-gray-700"
         :class="[widthClass, alignmentClasses]"
-        style="display: none"
         @click="open = false">
         <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
           <slot name="content" />
diff --git a/resources/js/Components/Jetstream/Banner.vue b/resources/js/Components/Jetstream/Banner.vue
index 14d722040..0b9aa6aad 100644
--- a/resources/js/Components/Jetstream/Banner.vue
+++ b/resources/js/Components/Jetstream/Banner.vue
@@ -54,10 +54,10 @@ watch(message, async () => {
             </p>
           </div>
 
-          <div class="shrink-0 sm:ml-3">
+          <div class="shrink-0 sm:ms-3">
             <button
               type="button"
-              class="-mr-1 flex rounded-md p-2 transition focus:outline-none sm:-mr-2"
+              class="-me-1 flex rounded-md p-2 transition focus:outline-none sm:-me-2"
               :class="{
                 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success',
                 'hover:bg-red-600 focus:bg-red-600': style == 'danger',
diff --git a/resources/js/Components/Pagination.vue b/resources/js/Components/Pagination.vue
index 68a798a2c..7b4d23d54 100644
--- a/resources/js/Components/Pagination.vue
+++ b/resources/js/Components/Pagination.vue
@@ -124,7 +124,7 @@ const linkClasses =
             aria-disabled="true"
             :class="[
               commonClasses,
-              '-ml-px',
+              '-ms-px',
               'text-gray-700',
               'dark:text-gray-500',
               'dark:bg-gray-900',
@@ -135,7 +135,7 @@ const linkClasses =
           <span
             v-else-if="link.active"
             aria-current="page"
-            :class="[commonClasses, '-ml-px', 'text-gray-500', 'bg-gray-100', 'dark:bg-gray-800', 'cursor-default']"
+            :class="[commonClasses, '-ms-px', 'text-gray-500', 'bg-gray-100', 'dark:bg-gray-800', 'cursor-default']"
             v-html="link.label">
           </span>
           <Link
@@ -145,7 +145,7 @@ const linkClasses =
             :class="[
               commonClasses,
               linkClasses,
-              '-ml-px',
+              '-ms-px',
               'text-gray-700',
               'dark:text-gray-300',
               'dark:bg-gray-900',
@@ -164,7 +164,7 @@ const linkClasses =
           :class="[
             commonClasses,
             linkClasses,
-            '-ml-px',
+            '-ms-px',
             'px-2',
             'rounded-e-md',
             'text-gray-500',
@@ -181,7 +181,7 @@ const linkClasses =
           :class="[
             commonClasses,
             linkClasses,
-            '-ml-px',
+            '-ms-px',
             'px-2',
             'rounded-e-md',
             'text-gray-500',
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 71508bfa1..97c473431 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -33,14 +33,14 @@ const logout = () => {
           <div class="flex h-16 justify-between">
             <div class="flex">
               <!-- Navigation Links -->
-              <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+              <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                 <JetNavLink :href="route('vault.index')" :active="route().current('vault.index')">
                   {{ $t('Home') }}
                 </JetNavLink>
               </div>
             </div>
 
-            <div class="hidden sm:ml-6 sm:flex sm:items-center">
+            <div class="hidden sm:ms-6 sm:flex sm:items-center">
               <!-- Settings Dropdown -->
               <div class="relative ms-3">
                 <JetDropdown align="right" width="48">
@@ -61,7 +61,7 @@ const logout = () => {
                         {{ $page.props.user.name }}
 
                         <svg
-                          class="-mr-0.5 ms-2 h-4 w-4"
+                          class="-me-0.5 ms-2 h-4 w-4"
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 20 20"
                           fill="currentColor">
@@ -110,7 +110,7 @@ const logout = () => {
             </div>
 
             <!-- Hamburger -->
-            <div class="-mr-2 flex items-center sm:hidden">
+            <div class="-me-2 flex items-center sm:hidden">
               <button
                 class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 transition hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none dark:text-gray-600 hover:dark:bg-gray-900 focus:dark:bg-gray-900"
                 @click="showingNavigationDropdown = !showingNavigationDropdown">
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 2dafaebc0..4606aeca4 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -171,7 +171,7 @@ const reload = () => {
                 {{ $t('Forgot password?') }}
               </Link>
 
-              <PrettyButton :text="$t('Log in')" :state="loadingState" :classes="'save ms-4'" />
+              <PrettyButton :text="$t('Log in')" :state="loadingState" :class="'save ms-4'" />
             </div>
 
             <div class="mt-3 block">
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index ab2bf897e..69b3ad535 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -138,7 +138,7 @@ const policy = () => {
           {{ $t('Already registered?') }}
         </Link>
 
-        <PrettyButton :text="$t('Register')" :state="loadingState" :classes="'save dark:save'" />
+        <PrettyButton :text="$t('Register')" :state="loadingState" :class="'save'" />
       </div>
     </form>
   </JetGuestLayout>
diff --git a/resources/js/Pages/Settings/CancelAccount/Index.vue b/resources/js/Pages/Settings/CancelAccount/Index.vue
index a2f280b1d..db152fa9c 100644
--- a/resources/js/Pages/Settings/CancelAccount/Index.vue
+++ b/resources/js/Pages/Settings/CancelAccount/Index.vue
@@ -39,7 +39,7 @@
             <h1 class="mb-4 flex justify-center text-2xl font-medium">
               <span>{{ $t('Cancel your account') }}</span>
 
-              <help :url="$page.props.help_links.settings_account_deletion" :top="'9px'" :classes="'ms-3'" />
+              <help :url="$page.props.help_links.settings_account_deletion" :top="'9px'" :class="'ms-3'" />
             </h1>
             <p class="mb-2">{{ $t('Thanks for giving Monica a try.') }}</p>
             <p class="mb-2">{{ $t('Once you cancel,') }}</p>
@@ -72,13 +72,13 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Go back')" :classes="'me-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Go back')" :class="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Cancel account')"
               :state="loadingState"
               :icon="'arrow'"
-              :classes="'save dark:save'" />
+              :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
index 29967e127..2a409633c 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
@@ -76,8 +76,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="addEmailModalShown = false" />
-        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="addEmailModalShown = false" />
+        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
index 2b9802494..e45eb9c7f 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
@@ -61,8 +61,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="setupTelegramModalShown = false" />
-        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="setupTelegramModalShown = false" />
+        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
diff --git a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
index 452effc3a..7c4bee5f1 100644
--- a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createAddressTypeModalShown = false" />
-            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createAddressTypeModalShown = false" />
+            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -133,11 +133,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'me-3'"
-                  @click.prevent="renameAddressTypeModalShownId = 0" />
-                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="renameAddressTypeModalShownId = 0" />
+                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
index a4ae8502d..759ea8376 100644
--- a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
@@ -101,8 +101,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createCallReasonTypeModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createCallReasonTypeModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -154,9 +154,9 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'me-3'"
+                  :class="'me-3'"
                   @click.prevent="renameCallReasonTypeModalShownId = 0" />
-                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
 
@@ -206,12 +206,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renameReasonModalId = 0" />
-                  <pretty-button
-                    :text="$t('Rename')"
-                    :state="loadingState"
-                    :icon="'check'"
-                    :classes="'save dark:save'" />
+                  <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="renameReasonModalId = 0" />
+                  <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                 </div>
               </form>
             </div>
@@ -249,8 +245,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="createReasonModalId = 0" />
-                <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="createReasonModalId = 0" />
+                <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
index 05e108f40..a928424ab 100644
--- a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
@@ -99,11 +99,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'me-3'"
-              @click="createContactInformationTypeModalShown = false" />
-            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createContactInformationTypeModalShown = false" />
+            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -182,9 +179,9 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'me-3'"
+                  :class="'me-3'"
                   @click.prevent="renameContactInformationTypeModalShownId = 0" />
-                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Settings/Personalize/Genders/Index.vue b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
index bb77ef148..0f1c46b08 100644
--- a/resources/js/Pages/Settings/Personalize/Genders/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGenderModalShown = false" />
-            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createGenderModalShown = false" />
+            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -131,8 +131,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renameGenderModalShownId = 0" />
-                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="renameGenderModalShownId = 0" />
+                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
index de98fb18e..6e2fcc192 100644
--- a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGiftOccasionModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createGiftOccasionModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -155,12 +155,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editGiftOccasionId = 0" />
-                  <pretty-button
-                    :text="$t('Rename')"
-                    :state="loadingState"
-                    :icon="'check'"
-                    :classes="'save dark:save'" />
+                  <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editGiftOccasionId = 0" />
+                  <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                 </div>
               </form>
             </template>
diff --git a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
index b92d0e0dc..a3a2e281d 100644
--- a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGiftStateModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createGiftStateModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -156,12 +156,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editGiftStateId = 0" />
-                  <pretty-button
-                    :text="$t('Rename')"
-                    :state="loadingState"
-                    :icon="'check'"
-                    :classes="'save dark:save'" />
+                  <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editGiftStateId = 0" />
+                  <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                 </div>
               </form>
             </template>
diff --git a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
index 7c87bf8af..599de2041 100644
--- a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
@@ -107,8 +107,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGroupTypeModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createGroupTypeModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -234,12 +234,8 @@
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="roleGroupTypeId = 0" />
-                            <pretty-button
-                              :text="$t('Rename')"
-                              :state="loadingState"
-                              :icon="'check'"
-                              :classes="'save dark:save'" />
+                            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="roleGroupTypeId = 0" />
+                            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                           </div>
                         </form>
                       </template>
@@ -277,12 +273,8 @@
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createRoleModalShown = false" />
-                        <pretty-button
-                          :text="$t('Save')"
-                          :state="loadingState"
-                          :icon="'plus'"
-                          :classes="'save dark:save'" />
+                        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createRoleModalShown = false" />
+                        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
                       </div>
                     </form>
 
@@ -326,12 +318,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editGroupTypeId = 0" />
-                  <pretty-button
-                    :text="$t('Rename')"
-                    :state="loadingState"
-                    :icon="'check'"
-                    :classes="'save dark:save'" />
+                  <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editGroupTypeId = 0" />
+                  <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                 </div>
               </form>
             </template>
diff --git a/resources/js/Pages/Settings/Personalize/Modules/Index.vue b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
index d2a23969c..1299fc4ca 100644
--- a/resources/js/Pages/Settings/Personalize/Modules/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Modules/Index.vue
@@ -265,13 +265,13 @@
 
             <!-- actions -->
             <div class="flex justify-between p-5">
-              <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
+              <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
               <pretty-button
                 :href="'data.url.vault.create'"
                 :text="$t('Add')"
                 :state="loadingState"
                 :icon="'check'"
-                :classes="'save dark:save'" />
+                :class="'save'" />
             </div>
 
             <!-- blank state -->
diff --git a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
index a108765a3..31b5cb1de 100644
--- a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createPetCategoryModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createPetCategoryModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -133,11 +133,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'me-3'"
-                  @click.prevent="renamePetCategoryModalShownId = 0" />
-                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="renamePetCategoryModalShownId = 0" />
+                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
index b82b13731..1e0515853 100644
--- a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
@@ -107,8 +107,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createPostTemplateModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createPostTemplateModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -240,12 +240,8 @@
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="postTemplateId = 0" />
-                            <pretty-button
-                              :text="$t('Rename')"
-                              :state="loadingState"
-                              :icon="'check'"
-                              :classes="'save dark:save'" />
+                            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="postTemplateId = 0" />
+                            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                           </div>
                         </form>
                       </template>
@@ -285,12 +281,8 @@
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createSectionModalShown = false" />
-                        <pretty-button
-                          :text="$t('Save')"
-                          :state="loadingState"
-                          :icon="'plus'"
-                          :classes="'save dark:save'" />
+                        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createSectionModalShown = false" />
+                        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
                       </div>
                     </form>
 
@@ -337,12 +329,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editPostTemplateId = 0" />
-                  <pretty-button
-                    :text="$t('Rename')"
-                    :state="loadingState"
-                    :icon="'check'"
-                    :classes="'save dark:save'" />
+                  <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editPostTemplateId = 0" />
+                  <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                 </div>
               </form>
             </template>
diff --git a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
index 1595e2f97..d2ae594c6 100644
--- a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createPronounModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createPronounModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -131,8 +131,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renamePronounModalShownId = 0" />
-                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="renamePronounModalShownId = 0" />
+                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
index 495945ffc..3555ea953 100644
--- a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
@@ -120,11 +120,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'me-3'"
-              @click="createRelationshipGroupTypeModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createRelationshipGroupTypeModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -177,9 +174,9 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'me-3'"
+                  :class="'me-3'"
                   @click.prevent="renameRelationshipGroupTypeModalShownId = 0" />
-                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
 
@@ -263,13 +260,9 @@
                 <div class="flex justify-between p-5">
                   <pretty-span
                     :text="$t('Cancel')"
-                    :classes="'me-3'"
+                    :class="'me-3'"
                     @click.prevent="renameRelationshipTypeModalId = 0" />
-                  <pretty-button
-                    :text="$t('Rename')"
-                    :state="loadingState"
-                    :icon="'check'"
-                    :classes="'save dark:save'" />
+                  <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                 </div>
               </form>
             </div>
@@ -321,11 +314,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'me-3'"
-                  @click.prevent="createRelationshipTypeModalId = 0" />
-                <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="createRelationshipTypeModalId = 0" />
+                <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Settings/Personalize/Religions/Index.vue b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
index 3efbb7aaf..eb2a3837a 100644
--- a/resources/js/Pages/Settings/Personalize/Religions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createReligionModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createReligionModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -155,12 +155,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editReligionId = 0" />
-                  <pretty-button
-                    :text="$t('Rename')"
-                    :state="loadingState"
-                    :icon="'check'"
-                    :classes="'save dark:save'" />
+                  <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editReligionId = 0" />
+                  <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                 </div>
               </form>
             </template>
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Index.vue b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
index 0efbd7a44..9c2c0fc7c 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
@@ -116,8 +116,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createTemplateModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createTemplateModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -168,8 +168,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renameTemplateModalShownId = 0" />
-                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="renameTemplateModalShownId = 0" />
+                <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
index aa55d80fc..026971b02 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -104,8 +104,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="renamePageModalShownId = 0" />
-            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="renamePageModalShownId = 0" />
+            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </template>
@@ -133,8 +133,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createPageModalShown = false" />
-        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createPageModalShown = false" />
+        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
index a6d33909d..affdd9dcc 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
@@ -69,8 +69,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-link :text="$t('Cancel')" :class="'me-3'" @click="editMode = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
   </div>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
index 16240ccff..330a387bc 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/DistanceFormat.vue
@@ -49,8 +49,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-link :text="$t('Cancel')" :class="'me-3'" @click="editMode = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
   </div>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Locale.vue b/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
index 312c7d15f..d3397e8f3 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Locale.vue
@@ -94,8 +94,8 @@ const submit = () => {
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-link :text="$t('Cancel')" :class="'me-3'" @click="editMode = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
   </div>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Maps.vue b/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
index fd211422e..73edee136 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Maps.vue
@@ -52,8 +52,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-link :text="$t('Cancel')" :class="'me-3'" @click="editMode = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
   </div>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
index 0a04dc9ab..461d840a7 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -159,8 +159,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-link :text="$t('Cancel')" :class="'me-3'" @click="editMode = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
   </div>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
index 60b47b1de..a42e757a4 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NumberFormat.vue
@@ -47,8 +47,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-link :text="$t('Cancel')" :class="'me-3'" @click="editMode = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
   </div>
diff --git a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
index 29fa68919..3cab28497 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/Timezone.vue
@@ -501,8 +501,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-link :text="$t('Cancel')" :class="'me-3'" @click="editMode = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
   </div>
diff --git a/resources/js/Pages/Settings/Users/Create.vue b/resources/js/Pages/Settings/Users/Create.vue
index d118ef4dd..32d36a9fe 100644
--- a/resources/js/Pages/Settings/Users/Create.vue
+++ b/resources/js/Pages/Settings/Users/Create.vue
@@ -131,12 +131,8 @@ k
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
-            <pretty-button
-              :text="$t('Send invitation')"
-              :state="loadingState"
-              :icon="'check'"
-              :classes="'save dark:save'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
+            <pretty-button :text="$t('Send invitation')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Settings/Users/Index.vue b/resources/js/Pages/Settings/Users/Index.vue
index 13bd84ddb..e0274e591 100644
--- a/resources/js/Pages/Settings/Users/Index.vue
+++ b/resources/js/Pages/Settings/Users/Index.vue
@@ -158,8 +158,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editModalshownId = 0" />
-                <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editModalshownId = 0" />
+                <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Vault/Calendar/Index.vue b/resources/js/Pages/Vault/Calendar/Index.vue
index 377027d2b..aa415e80b 100644
--- a/resources/js/Pages/Vault/Calendar/Index.vue
+++ b/resources/js/Pages/Vault/Calendar/Index.vue
@@ -106,7 +106,7 @@ const get = (day) => {
                 v-for="day in week"
                 :key="day.id"
                 @click="get(day)"
-                class="h-32 border-e p-2 last:border-r-0 dark:border-gray-700"
+                class="h-32 border-e p-2 last:border-e-0 dark:border-gray-700"
                 :class="day.is_in_month ? 'cursor-pointer' : 'bg-slate-50 dark:bg-slate-900'">
                 <!-- date of the day -->
                 <div class="flex items-center justify-between">
diff --git a/resources/js/Pages/Vault/Companies/Index.vue b/resources/js/Pages/Vault/Companies/Index.vue
index d116b993c..07b6b35de 100644
--- a/resources/js/Pages/Vault/Companies/Index.vue
+++ b/resources/js/Pages/Vault/Companies/Index.vue
@@ -28,7 +28,7 @@ defineProps({
               <div v-if="company.contacts" class="relative flex -space-x-2 overflow-hidden py-1">
                 <div v-for="contact in company.contacts" :key="contact.id" class="inline-block">
                   <inertia-link :href="contact.url.show">
-                    <avatar :data="contact.avatar" :classes="'h-8 w-8 rounded-full ring-2 ring-white'" />
+                    <avatar :data="contact.avatar" :class="'h-8 w-8 rounded-full ring-2 ring-white'" />
                   </inertia-link>
                 </div>
               </div>
diff --git a/resources/js/Pages/Vault/Contact/Create.vue b/resources/js/Pages/Vault/Contact/Create.vue
index cab7aa540..51d1099ff 100644
--- a/resources/js/Pages/Vault/Contact/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Create.vue
@@ -207,13 +207,13 @@
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Add')"
               :state="loadingState"
               :icon="'check'"
-              :classes="'save dark:save'" />
+              :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Vault/Contact/Goals/Show.vue b/resources/js/Pages/Vault/Contact/Goals/Show.vue
index 8424c80c6..e467dc8c0 100644
--- a/resources/js/Pages/Vault/Contact/Goals/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Goals/Show.vue
@@ -83,8 +83,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editMode = false" />
-                <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editMode = false" />
+                <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
 
diff --git a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
index d339d170f..56586cfb8 100644
--- a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
+++ b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
@@ -244,8 +244,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createDateModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createDateModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
@@ -264,7 +264,7 @@
 
                 <span
                   v-if="date.type"
-                  class="ms-2 inline-block rounded bg-neutral-200 px-1 py-0 text-xs text-neutral-500 last:mr-0">
+                  class="ms-2 inline-block rounded bg-neutral-200 px-1 py-0 text-xs text-neutral-500 last:me-0">
                   {{ date.type.label }}
                 </span>
               </span>
@@ -414,8 +414,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedDateId = 0" />
-                <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+                <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedDateId = 0" />
+                <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
               </div>
             </form>
           </li>
diff --git a/resources/js/Pages/Vault/Contact/Index.vue b/resources/js/Pages/Vault/Contact/Index.vue
index 40d9d291f..c73c2005b 100644
--- a/resources/js/Pages/Vault/Contact/Index.vue
+++ b/resources/js/Pages/Vault/Contact/Index.vue
@@ -107,7 +107,7 @@ const update = () => {
                 v-for="contact in data.contacts"
                 :key="contact.id"
                 class="flex items-center border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
-                <avatar :data="contact.avatar" :classes="'rounded-full me-2 h-5 w-5'" />
+                <avatar :data="contact.avatar" :class="'me-2 h-5 w-5 rounded-full'" />
 
                 <inertia-link :href="contact.url.show" class="text-blue-500 hover:underline">
                   {{ contact.name }}
diff --git a/resources/js/Pages/Vault/Contact/Names/Edit.vue b/resources/js/Pages/Vault/Contact/Names/Edit.vue
index ecddf1996..85a356035 100644
--- a/resources/js/Pages/Vault/Contact/Names/Edit.vue
+++ b/resources/js/Pages/Vault/Contact/Names/Edit.vue
@@ -147,13 +147,13 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.show" :text="$t('Cancel')" :classes="'me-3'" />
+            <pretty-link :href="data.url.show" :text="$t('Cancel')" :class="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Update')"
               :state="loadingState"
               :icon="'check'"
-              :classes="'save dark:save'" />
+              :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Vault/Contact/Photos/Index.vue b/resources/js/Pages/Vault/Contact/Photos/Index.vue
index ec8fb03d2..bba649eec 100644
--- a/resources/js/Pages/Vault/Contact/Photos/Index.vue
+++ b/resources/js/Pages/Vault/Contact/Photos/Index.vue
@@ -89,7 +89,7 @@
             :preview-step="false"
             @success="onSuccess"
             @error="onError">
-            <pretty-button :text="$t('Add a photo')" :icon="'plus'" :classes="'sm:w-fit w-full'" />
+            <pretty-button :text="$t('Add a photo')" :icon="'plus'" :class="'w-full sm:w-fit'" />
           </uploadcare>
         </div>
 
diff --git a/resources/js/Pages/Vault/Contact/Relationships/Create.vue b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
index 203469741..88ca55dee 100644
--- a/resources/js/Pages/Vault/Contact/Relationships/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
@@ -78,7 +78,7 @@
                   {{ fromRelationship }}
                 </p>
                 <div class="flex items-center">
-                  <avatar :data="data.contact.avatar" :classes="'me-2 h-5 w-5'" />
+                  <avatar :data="data.contact.avatar" :class="'me-2 h-5 w-5'" />
 
                   <span>{{ data.contact.name }}</span>
                 </div>
@@ -316,13 +316,13 @@
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Add')"
               :state="loadingState"
               :icon="'check'"
-              :classes="'save dark:save'" />
+              :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Vault/Contact/Show.vue b/resources/js/Pages/Vault/Contact/Show.vue
index 1ff6b14a2..85d0c4087 100644
--- a/resources/js/Pages/Vault/Contact/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Show.vue
@@ -197,21 +197,21 @@ const destroyAvatar = () => {
           <div class="p-3 sm:p-3">
             <div v-if="data.contact_information.length > 0" class="mb-8">
               <div v-for="module in data.contact_information" :key="module.id">
-                <ContactAvatar v-if="module.type == 'avatar'" :data="module.data" />
+                <ContactAvatar v-if="module.type === 'avatar'" :data="module.data" />
 
-                <ContactName v-else-if="module.type == 'contact_names'" :data="module.data" />
+                <ContactName v-else-if="module.type === 'contact_names'" :data="module.data" />
 
-                <FamilySummary v-else-if="module.type == 'family_summary'" :data="module.data" />
+                <FamilySummary v-else-if="module.type === 'family_summary'" :data="module.data" />
 
-                <GenderPronoun v-else-if="module.type == 'gender_pronoun'" :data="module.data" />
+                <GenderPronoun v-else-if="module.type === 'gender_pronoun'" :data="module.data" />
 
-                <ImportantDates v-else-if="module.type == 'important_dates'" :data="module.data" />
+                <ImportantDates v-else-if="module.type === 'important_dates'" :data="module.data" />
 
-                <Labels v-else-if="module.type == 'labels'" :data="module.data" />
+                <Labels v-else-if="module.type === 'labels'" :data="module.data" />
 
-                <JobInformation v-else-if="module.type == 'company'" :data="module.data" />
+                <JobInformation v-else-if="module.type === 'company'" :data="module.data" />
 
-                <Religion v-else-if="module.type == 'religions'" :data="module.data" />
+                <Religion v-else-if="module.type === 'religions'" :data="module.data" />
               </div>
             </div>
 
diff --git a/resources/js/Pages/Vault/Create.vue b/resources/js/Pages/Vault/Create.vue
index 8b55c2c89..799a5b1b4 100644
--- a/resources/js/Pages/Vault/Create.vue
+++ b/resources/js/Pages/Vault/Create.vue
@@ -41,7 +41,7 @@
             <h1 class="mb-1 flex justify-center text-2xl font-medium">
               <span>{{ $t('Create a vault') }}</span>
 
-              <help :url="$page.props.help_links.vault_create" :top="'9px'" :classes="'ms-2'" />
+              <help :url="$page.props.help_links.vault_create" :top="'9px'" :class="'ms-2'" />
             </h1>
             <p class="text-center text-sm">
               {{ $t('Vaults contain all your contacts data.') }}
@@ -65,13 +65,13 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Add')"
               :state="loadingState"
               :icon="'check'"
-              :classes="'save dark:save'" />
+              :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
index 1b70a51ae..8541dc4ed 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
@@ -66,7 +66,7 @@
 
               <!-- contact -->
               <div class="flex items-center">
-                <avatar :data="task.contact.avatar" :classes="'me-2 h-5 w-5 rounded-full'" />
+                <avatar :data="task.contact.avatar" :class="'me-2 h-5 w-5 rounded-full'" />
 
                 <inertia-link :href="task.contact.url.show" class="text-blue-500 hover:underline">
                   {{ task.contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue b/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue
index a0b65a519..fde152ca6 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/Favorites.vue
@@ -24,7 +24,7 @@
       <ul class="mb-4">
         <li v-for="favorite in data" :key="favorite.id">
           <div class="mb-2 flex items-center text-sm">
-            <avatar :data="favorite.avatar" :classes="'me-2 h-5 w-5 rounded-full'" />
+            <avatar :data="favorite.avatar" :class="'me-2 h-5 w-5 rounded-full'" />
 
             <inertia-link :href="favorite.url.show" class="text-blue-500 hover:underline">
               {{ favorite.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue b/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
index b4038d20e..8882a0ca9 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/LastUpdated.vue
@@ -20,7 +20,7 @@
       <help :url="$page.props.help_links.last_updated_contacts" :top="'4px'" />
     </h3>
     <div v-for="contact in data" :key="contact.id" class="mb-2 flex items-center text-sm">
-      <avatar :data="contact.avatar" :classes="'me-2 h-5 w-5 rounded-full'" />
+      <avatar :data="contact.avatar" :class="'me-2 h-5 w-5 rounded-full'" />
 
       <inertia-link :href="contact.url.show" class="text-blue-500 hover:underline">
         {{ contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
index 5ac0132a8..03a500a69 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
@@ -139,7 +139,7 @@ const destroy = (lifeMetric) => {
         v-if="!createLifeMetricModalShown"
         :text="$t('Track a new metric')"
         :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
+        :class="'w-full sm:w-fit'"
         @click="showCreateLifeMetricModal" />
     </div>
 
@@ -166,8 +166,8 @@ const destroy = (lifeMetric) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createLifeMetricModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createLifeMetricModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -215,7 +215,7 @@ const destroy = (lifeMetric) => {
               <pretty-button
                 v-if="!lifeMetric.incremented"
                 :text="'+ 1'"
-                :classes="'sm:w-fit w-full py-4 px-8'"
+                :class="'w-full px-8 py-4 sm:w-fit'"
                 @click="increment(lifeMetric)" />
               <span v-else class="w-full px-3 py-4 text-xl sm:w-fit">🤭</span>
             </div>
@@ -267,8 +267,8 @@ const destroy = (lifeMetric) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedLifeMetricId = 0" />
-              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedLifeMetricId = 0" />
+              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
             </div>
           </form>
         </li>
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
index 200c85641..d4e117eab 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/MoodTrackingEvents.vue
@@ -198,8 +198,8 @@ const submit = () => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createMoodEventModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createMoodEventModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
index eef80f5d9..e949cfbe3 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
@@ -31,7 +31,7 @@
               {{ reminder.scheduled_at }}
             </p>
             <div class="flex items-center text-sm">
-              <avatar :data="reminder.contact.avatar" :classes="'me-2 h-4 w-4 rounded-full'" />
+              <avatar :data="reminder.contact.avatar" :class="'me-2 h-4 w-4 rounded-full'" />
 
               <inertia-link :href="reminder.contact.url.show" class="text-blue-500 hover:underline">
                 {{ reminder.contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue b/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue
index 6b8d8b9cf..3755ca14d 100644
--- a/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Reminder/Index.vue
@@ -90,7 +90,7 @@
                 <div class="me-2 flex items-center">
                   <avatar
                     :data="reminder.contact.avatar"
-                    :classes="'h-4 w-4 me-2 rounded-full ring-2 ring-white dark:ring-gray-900'" />
+                    :class="'me-2 h-4 w-4 rounded-full ring-2 ring-white dark:ring-gray-900'" />
 
                   <inertia-link :href="reminder.contact.url.show" class="text-blue-500 hover:underline">
                     {{ reminder.contact.name }}
diff --git a/resources/js/Pages/Vault/Dashboard/Task/Index.vue b/resources/js/Pages/Vault/Dashboard/Task/Index.vue
index 39070a974..2aa871087 100644
--- a/resources/js/Pages/Vault/Dashboard/Task/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Task/Index.vue
@@ -27,7 +27,7 @@
         <div v-for="task in data" :key="task.id" class="mb-6">
           <!-- person name -->
           <div class="mb-2 flex items-center">
-            <avatar :data="task.contact.avatar" :classes="'me-2 h-5 w-5 rounded-full'" />
+            <avatar :data="task.contact.avatar" :class="'me-2 h-5 w-5 rounded-full'" />
 
             <inertia-link :href="task.contact.url.show" class="text-blue-500 hover:underline">
               {{ task.contact.name }}
diff --git a/resources/js/Pages/Vault/Files/Index.vue b/resources/js/Pages/Vault/Files/Index.vue
index 6bad583e1..0b793e599 100644
--- a/resources/js/Pages/Vault/Files/Index.vue
+++ b/resources/js/Pages/Vault/Files/Index.vue
@@ -82,7 +82,7 @@
 
                   <!-- avatar -->
                   <div v-if="file.object.type == 'contact'" class="flex items-center">
-                    <avatar :data="file.object.avatar" :classes="'rounded-full me-2 h-4 w-4'" />
+                    <avatar :data="file.object.avatar" :class="'me-2 h-4 w-4 rounded-full'" />
                     <inertia-link :href="file.object.url.show" class="text-sm text-blue-500 hover:underline">
                       {{ file.object.name }}
                     </inertia-link>
diff --git a/resources/js/Pages/Vault/Group/Edit.vue b/resources/js/Pages/Vault/Group/Edit.vue
index b7f0bda5d..e4a092572 100644
--- a/resources/js/Pages/Vault/Group/Edit.vue
+++ b/resources/js/Pages/Vault/Group/Edit.vue
@@ -132,8 +132,8 @@ const update = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="props.data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-link :href="props.data.url.back" :text="$t('Cancel')" :class="'me-3'" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Vault/Group/Index.vue b/resources/js/Pages/Vault/Group/Index.vue
index 1bc4ad274..30118492a 100644
--- a/resources/js/Pages/Vault/Group/Index.vue
+++ b/resources/js/Pages/Vault/Group/Index.vue
@@ -28,7 +28,7 @@ defineProps({
               <div v-if="group.contacts" class="relative flex -space-x-2 overflow-hidden py-1">
                 <div v-for="contact in group.contacts" :key="contact.id" class="inline-block">
                   <inertia-link :href="contact.url.show">
-                    <avatar :data="contact.avatar" :classes="'h-8 w-8 rounded-full ring-2 ring-white'" />
+                    <avatar :data="contact.avatar" :class="'h-8 w-8 rounded-full ring-2 ring-white'" />
                   </inertia-link>
                 </div>
               </div>
diff --git a/resources/js/Pages/Vault/Group/Show.vue b/resources/js/Pages/Vault/Group/Show.vue
index 94e8b2c81..fb12d890d 100644
--- a/resources/js/Pages/Vault/Group/Show.vue
+++ b/resources/js/Pages/Vault/Group/Show.vue
@@ -133,7 +133,7 @@ const destroy = () => {
         <div v-for="role in data.roles" :key="role.id" class="mb-8">
           <p
             v-if="role.contacts.length > 0"
-            class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0">
+            class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:me-0">
             {{ role.label }}
           </p>
 
@@ -142,7 +142,7 @@ const destroy = () => {
               v-for="contact in role.contacts"
               :key="contact.id"
               class="rounded-lg border border-gray-200 bg-white p-3 text-center hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800">
-              <avatar :data="contact.avatar" :classes="'inline-block rounded-full h-14 w-14'" />
+              <avatar :data="contact.avatar" :class="'inline-block h-14 w-14 rounded-full'" />
 
               <inertia-link :href="contact.url" class="text-blue-500 hover:underline">{{ contact.name }}</inertia-link>
 
diff --git a/resources/js/Pages/Vault/Index.vue b/resources/js/Pages/Vault/Index.vue
index c603887be..5ab627c45 100644
--- a/resources/js/Pages/Vault/Index.vue
+++ b/resources/js/Pages/Vault/Index.vue
@@ -69,7 +69,7 @@
                   <div v-for="contact in vault.contacts" :key="contact.id" class="inline-block">
                     <avatar
                       :data="contact.avatar"
-                      :classes="'h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-900'" />
+                      :class="'h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-900'" />
                   </div>
                   <div
                     v-if="vault.remaining_contacts != 0"
diff --git a/resources/js/Pages/Vault/Journal/Create.vue b/resources/js/Pages/Vault/Journal/Create.vue
index c78605160..f9505d173 100644
--- a/resources/js/Pages/Vault/Journal/Create.vue
+++ b/resources/js/Pages/Vault/Journal/Create.vue
@@ -98,8 +98,8 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
-            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
+            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Vault/Journal/Edit.vue b/resources/js/Pages/Vault/Journal/Edit.vue
index 8bb722aed..a1fdf0a66 100644
--- a/resources/js/Pages/Vault/Journal/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Edit.vue
@@ -112,8 +112,8 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
-            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
+            <pretty-button :text="$t('Add')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Vault/Journal/Index.vue b/resources/js/Pages/Vault/Journal/Index.vue
index ae8096303..18a9f5166 100644
--- a/resources/js/Pages/Vault/Journal/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Index.vue
@@ -34,7 +34,7 @@ defineProps({
               :key="journal.id"
               class="border-b border-gray-200 px-5 py-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800 sm:flex">
               <!-- name and date -->
-              <div class="sm:mr-8">
+              <div class="sm:me-8">
                 <inertia-link :href="journal.url.show" class="mb-1 block font-semibold text-blue-500 hover:underline">{{
                   journal.name
                 }}</inertia-link>
diff --git a/resources/js/Pages/Vault/Journal/Metrics/Index.vue b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
index 484f9b9ef..5f4cfbcf5 100644
--- a/resources/js/Pages/Vault/Journal/Metrics/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
@@ -150,8 +150,8 @@ const destroy = (metric) => {
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createJournalMetricModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createJournalMetricModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
index 0bf36e7ad..9d50d41c2 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
@@ -156,13 +156,13 @@ const destroy = (journalMetric, postMetric) => {
           </div>
 
           <div class="flex justify-between p-2">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addModalShown = false" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="addModalShown = false" />
             <pretty-button
               :href="'data.url.vault.create'"
               :text="$t('Save')"
               :state="loadingState"
               :icon="'check'"
-              :classes="'save dark:save'" />
+              :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue b/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue
index f58279f2e..cf49eac57 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/SlicesOfLife.vue
@@ -99,13 +99,13 @@ const reset = () => {
         </div>
 
         <div class="flex justify-between p-2">
-          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editSlicesModalShown = false" />
+          <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editSlicesModalShown = false" />
           <pretty-button
             :href="'data.url.vault.create'"
             :text="$t('Save')"
             :state="loadingState"
             :icon="'check'"
-            :classes="'save dark:save'" />
+            :class="'save'" />
         </div>
 
         <div v-if="slice" class="border-t border-gray-200 p-2 dark:border-gray-700">
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue b/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
index de406d0b8..11ce6bad5 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
@@ -84,7 +84,7 @@
       <span
         v-for="tag in localTags"
         :key="tag.id"
-        class="me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0">
+        class="me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:me-0">
         <inertia-link :href="tag.url.show">{{ tag.name }}</inertia-link>
       </span>
     </div>
diff --git a/resources/js/Pages/Vault/Journal/Post/Show.vue b/resources/js/Pages/Vault/Journal/Post/Show.vue
index 701509651..e210a8c82 100644
--- a/resources/js/Pages/Vault/Journal/Post/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Show.vue
@@ -115,7 +115,7 @@ defineProps({
                 <li
                   v-for="tag in data.tags"
                   :key="tag.id"
-                  class="me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0 dark:bg-neutral-800">
+                  class="me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:me-0 dark:bg-neutral-800">
                   {{ tag.name }}
                 </li>
               </ul>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Edit.vue b/resources/js/Pages/Vault/Journal/Slices/Edit.vue
index 28d1a2768..803b7cb5f 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Edit.vue
@@ -139,8 +139,8 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'me-3'" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-link :href="data.url.back" :text="$t('Cancel')" :class="'me-3'" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Index.vue b/resources/js/Pages/Vault/Journal/Slices/Index.vue
index 0b1c59fcb..7f1de2fc8 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Index.vue
@@ -130,8 +130,8 @@ const submit = () => {
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createSliceOfLifeModalShown = false" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createSliceOfLifeModalShown = false" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
 
diff --git a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
index 695d0e6e8..73b31bc5d 100644
--- a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
@@ -32,8 +32,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createTypeModalShown = false" />
-        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createTypeModalShown = false" />
+        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -51,7 +51,7 @@
             {{ type.label }}
             <span
               v-if="type.internal_type"
-              class="me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:mr-0"
+              class="me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-500 last:me-0"
               >{{ type.internal_type }}</span
             >
           </span>
@@ -93,8 +93,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editTypeModalShownId = 0" />
-            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editTypeModalShownId = 0" />
+            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </li>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Delete.vue b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
index 3240174b8..348715302 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Delete.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Delete.vue
@@ -39,7 +39,7 @@
       <p class="mb-1 px-5 py-2 text-center">
         <pretty-link
           :text="$t('Delete the vault')"
-          :classes="'me-3 text-red-600 dark:text-red-400 border-red-600 dark:border-red-400'"
+          :class="'me-3 border-red-600 text-red-600 dark:border-red-400 dark:text-red-400'"
           @click="destroy" />
       </p>
     </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Labels.vue b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
index a7b1c4fa4..278ad1cb7 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Labels.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
@@ -53,8 +53,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createlabelModalShown = false" />
-        <pretty-button :text="$t('Create label')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createlabelModalShown = false" />
+        <pretty-button :text="$t('Create label')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -133,8 +133,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editLabelModalShownId = 0" />
-            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editLabelModalShownId = 0" />
+            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </li>
diff --git a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
index 90f1dabdf..3d11db66c 100644
--- a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
@@ -232,8 +232,8 @@ const destroyLifeEventType = (lifeEventType) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createLifeEventCategoryModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createLifeEventCategoryModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -359,12 +359,8 @@ const destroyLifeEventType = (lifeEventType) => {
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="lifeEventCategoryId = 0" />
-                        <pretty-button
-                          :text="$t('Rename')"
-                          :state="loadingState"
-                          :icon="'check'"
-                          :classes="'save dark:save'" />
+                        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="lifeEventCategoryId = 0" />
+                        <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                       </div>
                     </form>
                   </template>
@@ -404,15 +400,8 @@ const destroyLifeEventType = (lifeEventType) => {
                   </div>
 
                   <div class="flex justify-between p-5">
-                    <pretty-span
-                      :text="$t('Cancel')"
-                      :classes="'me-3'"
-                      @click="createLifeEventTypeModalShown = false" />
-                    <pretty-button
-                      :text="$t('Save')"
-                      :state="loadingState"
-                      :icon="'plus'"
-                      :classes="'save dark:save'" />
+                    <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createLifeEventTypeModalShown = false" />
+                    <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
                   </div>
                 </form>
 
@@ -459,8 +448,8 @@ const destroyLifeEventType = (lifeEventType) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editLifeEventCategoryId = 0" />
-              <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editLifeEventCategoryId = 0" />
+              <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
             </div>
           </form>
         </template>
diff --git a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
index 92dedcc9b..1a84278e9 100644
--- a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
@@ -167,8 +167,8 @@ const updatePosition = (event) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createMoodTrackingParametersModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createMoodTrackingParametersModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -283,8 +283,8 @@ const updatePosition = (event) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editMoodTrackingParameterId = 0" />
-              <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editMoodTrackingParameterId = 0" />
+              <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
             </div>
           </form>
         </template>
diff --git a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
index 5c94841b0..0537fb251 100644
--- a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
@@ -139,8 +139,8 @@ const updatePosition = (event) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createEntryModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createEntryModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -213,8 +213,8 @@ const updatePosition = (event) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editEntryId = 0" />
-              <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editEntryId = 0" />
+              <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
             </div>
           </form>
         </template>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Tags.vue b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
index 3d585dad9..7bff82093 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Tags.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
@@ -32,8 +32,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createTagModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createTagModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -90,8 +90,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click.prevent="editTagModalShownId = 0" />
-            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click.prevent="editTagModalShownId = 0" />
+            <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </li>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Users.vue b/resources/js/Pages/Vault/Settings/Partials/Users.vue
index 90f4b6c99..8e2b13ff0 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Users.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Users.vue
@@ -105,7 +105,7 @@
 
       <div class="flex justify-between p-5">
         <pretty-span :text="$t('Cancel')" @click="addUserModalShown = false" />
-        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-button :text="$t('Add')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -202,11 +202,7 @@
 
             <div class="flex justify-between p-5">
               <pretty-span :text="$t('Cancel')" @click="editedUser = []" />
-              <pretty-button
-                :text="$t('Change permission')"
-                :state="loadingState"
-                :icon="'check'"
-                :classes="'save dark:save'" />
+              <pretty-button :text="$t('Change permission')" :state="loadingState" :icon="'check'" :class="'save'" />
             </div>
           </form>
         </li>
diff --git a/resources/js/Shared/Avatar.vue b/resources/js/Shared/Avatar.vue
index d176fe6db..57b496afe 100644
--- a/resources/js/Shared/Avatar.vue
+++ b/resources/js/Shared/Avatar.vue
@@ -1,25 +1,11 @@
+<script setup>
+defineProps({
+  data: Object,
+  imgClasses: String,
+});
+</script>
+
 <template>
-  <div class="">
-    <div v-if="data.type === 'svg'" :class="classes" v-html="data.content" />
-    <img v-else :class="classes + ' ' + imgClasses" :src="data.content" alt="avatar" />
-  </div>
+  <div v-if="data.type === 'svg'" v-html="data.content" />
+  <img v-else :class="imgClasses" :src="data.content" alt="avatar" />
 </template>
-
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
-    classes: {
-      type: String,
-      default: null,
-    },
-    imgClasses: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
diff --git a/resources/js/Shared/ContactCard.vue b/resources/js/Shared/ContactCard.vue
index 626002bbe..c373c631e 100644
--- a/resources/js/Shared/ContactCard.vue
+++ b/resources/js/Shared/ContactCard.vue
@@ -1,3 +1,20 @@
+<script setup>
+import { Popover as APopover } from 'ant-design-vue';
+
+defineProps({
+  contact: Object,
+  avatarClasses: String,
+  top: {
+    type: String,
+    default: '0px',
+  },
+  displayName: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
 <template>
   <div class="relative inline" :style="'top: ' + top">
     <a-popover placement="bottomLeft">
@@ -80,34 +97,3 @@
     </a-popover>
   </div>
 </template>
-
-<script>
-import { Popover as APopover } from 'ant-design-vue';
-
-export default {
-  components: {
-    APopover,
-  },
-
-  props: {
-    top: {
-      type: String,
-      default: '0px',
-    },
-    contact: {
-      type: Object,
-      default: null,
-    },
-    avatarClasses: {
-      type: String,
-      default: '',
-    },
-    displayName: {
-      type: Boolean,
-      default: true,
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/resources/js/Shared/Form/PrettyButton.vue b/resources/js/Shared/Form/PrettyButton.vue
index fc356ea24..8d625a915 100644
--- a/resources/js/Shared/Form/PrettyButton.vue
+++ b/resources/js/Shared/Form/PrettyButton.vue
@@ -1,6 +1,9 @@
 <template>
-  <button :class="buttonClasses" :disabled="state == 'loading' || state == 'disabled'" type="submit">
-    <span v-if="state == 'loading'"> {{ $t('Loading…') }} </span>
+  <button
+    :class="'dark:box-s relative border-zinc-900 bg-white text-sm dark:border-zinc-100 dark:bg-gray-800 dark:text-gray-100'"
+    :disabled="state === 'loading' || state === 'disabled'"
+    type="submit">
+    <span v-if="state === 'loading'"> {{ $t('Loading…') }} </span>
 
     <!-- + icon -->
     <svg
@@ -36,13 +39,13 @@
       <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
     </svg>
 
-    <span v-if="state != 'loading'">
+    <span v-if="state !== 'loading'">
       {{ text }}
     </span>
 
     <!-- arrow icon -->
     <svg
-      v-if="icon === 'arrow' && state != 'loading'"
+      v-if="icon === 'arrow' && state !== 'loading'"
       xmlns="http://www.w3.org/2000/svg"
       class="icon relative mx-1 inline h-5 w-5"
       fill="none"
@@ -68,20 +71,6 @@ export default {
       type: String,
       default: '',
     },
-    classes: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    buttonClasses() {
-      return [
-        'relative text-sm dark:text-gray-100 dark:box-s',
-        'bg-white dark:bg-gray-800 border-zinc-900 dark:border-zinc-100',
-        this.classes,
-      ];
-    },
   },
 };
 </script>
@@ -97,7 +86,7 @@ export default {
 
 .dark .save {
   background-color: #d0c10d !important;
-  color: rgb(31 41 55); // text-gray-800
+  color: rgb(31 41 55) !important; // text-gray-800
 }
 
 button {
@@ -128,9 +117,7 @@ button {
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  button {
-    --tw-shadow: 2px 2px 0 rgb(242, 242, 245) !important;
-  }
+.dark button {
+  --tw-shadow: 2px 2px 0 rgb(242, 242, 245) !important;
 }
 </style>
diff --git a/resources/js/Shared/Form/PrettyLink.vue b/resources/js/Shared/Form/PrettyLink.vue
index 079aa24ab..c20ee0c42 100644
--- a/resources/js/Shared/Form/PrettyLink.vue
+++ b/resources/js/Shared/Form/PrettyLink.vue
@@ -1,5 +1,8 @@
 <template>
-  <inertia-link :class="linkClasses" :href="href" preserve-scroll>
+  <inertia-link
+    :class="'dark:box-s relative border-zinc-900 bg-white text-sm dark:border-zinc-100 dark:bg-gray-800 dark:text-gray-100'"
+    :href="href"
+    preserve-scroll>
     <!-- + icon -->
     <svg
       v-if="icon === 'plus'"
@@ -60,20 +63,6 @@ export default {
       type: String,
       default: '',
     },
-    classes: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    linkClasses() {
-      return [
-        'relative text-sm dark:text-gray-100 dark:box-s',
-        'bg-white dark:bg-gray-800 border-zinc-900 dark:border-zinc-100',
-        this.classes,
-      ];
-    },
   },
 };
 </script>
@@ -106,9 +95,7 @@ a {
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  a {
-    --tw-shadow: 2px 2px 0 rgb(242, 242, 245) !important;
-  }
+.dark a {
+  --tw-shadow: 2px 2px 0 rgb(242, 242, 245) !important;
 }
 </style>
diff --git a/resources/js/Shared/Form/PrettySpan.vue b/resources/js/Shared/Form/PrettySpan.vue
index 247b5967b..b9e010463 100644
--- a/resources/js/Shared/Form/PrettySpan.vue
+++ b/resources/js/Shared/Form/PrettySpan.vue
@@ -1,5 +1,6 @@
 <template>
-  <span :class="spanClasses" class="relative cursor-pointer text-sm">
+  <span
+    :class="'relative cursor-pointer border-zinc-900 bg-white text-sm dark:border-zinc-100 dark:bg-gray-800 dark:text-gray-100'">
     {{ text }}
   </span>
 </template>
@@ -11,16 +12,6 @@ export default {
       type: String,
       default: '',
     },
-    classes: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    spanClasses() {
-      return ['bg-white dark:bg-gray-800 dark:text-gray-100 border-zinc-900 dark:border-zinc-100', this.classes];
-    },
   },
 };
 </script>
@@ -49,9 +40,7 @@ span {
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  span {
-    --tw-shadow: 2px 2px 0 rgb(242, 242, 245) !important;
-  }
+.dark span {
+  --tw-shadow: 2px 2px 0 rgb(242, 242, 245) !important;
 }
 </style>
diff --git a/resources/js/Shared/Help.vue b/resources/js/Shared/Help.vue
index f2b92ab8e..d8de25825 100644
--- a/resources/js/Shared/Help.vue
+++ b/resources/js/Shared/Help.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$page.props.auth.user.help_shown"
-    :class="svgClasses"
+    :class="'relative inline cursor-pointer'"
     :data-url="finalURL"
     :style="'top:' + top"
     @click="goTo()">
@@ -34,10 +34,6 @@ export default {
       type: String,
       default: '3px',
     },
-    classes: {
-      type: String,
-      default: '',
-    },
   },
 
   data() {
@@ -50,10 +46,6 @@ export default {
     finalURL: function () {
       return this.localUrl + this.url;
     },
-
-    svgClasses() {
-      return ['relative inline cursor-pointer', this.classes];
-    },
   },
 
   methods: {
diff --git a/resources/js/Shared/HoverMenu.vue b/resources/js/Shared/HoverMenu.vue
index 058d3dbf7..f375434c6 100644
--- a/resources/js/Shared/HoverMenu.vue
+++ b/resources/js/Shared/HoverMenu.vue
@@ -41,9 +41,7 @@ defineProps({
   background-color: #f8fafc; // bg-slate-50
 }
 
-@media (prefers-color-scheme: dark) {
-  .ant-dropdown-menu-item:hover {
-    background-color: #020617; // bg-slate-950
-  }
+.dark .ant-dropdown-menu-item:hover {
+  background-color: #020617 !important; // bg-slate-950
 }
 </style>
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index 42e3a0455..a1ea7e78f 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -182,7 +182,7 @@ const destroy = () => {
       <pretty-button
         :text="$t('Add an address')"
         :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
+        :class="'w-full sm:w-fit'"
         @click="showCreateAddressModal" />
     </div>
 
@@ -365,8 +365,8 @@ const destroy = () => {
         </div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createAddressModalShown = false" />
-          <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+          <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createAddressModalShown = false" />
+          <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
         </div>
       </form>
 
@@ -526,8 +526,8 @@ const destroy = () => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedAddressId = 0" />
-              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedAddressId = 0" />
+              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
             </div>
           </form>
         </div>
@@ -707,8 +707,8 @@ const destroy = () => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedAddressId = 0" />
-              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedAddressId = 0" />
+              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
             </div>
           </form>
         </div>
diff --git a/resources/js/Shared/Modules/Calls.vue b/resources/js/Shared/Modules/Calls.vue
index 102ddf0ea..ee8627ff7 100644
--- a/resources/js/Shared/Modules/Calls.vue
+++ b/resources/js/Shared/Modules/Calls.vue
@@ -23,7 +23,7 @@
       <pretty-button
         :text="$t('Log a call')"
         :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
+        :class="'w-full sm:w-fit'"
         @click="showCreateCallModal()" />
     </div>
 
@@ -237,8 +237,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createCallModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createCallModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -518,8 +518,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedCallId = 0" />
-            <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedCallId = 0" />
+            <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </li>
diff --git a/resources/js/Shared/Modules/ContactAvatar.vue b/resources/js/Shared/Modules/ContactAvatar.vue
index 49deed5b8..797664235 100644
--- a/resources/js/Shared/Modules/ContactAvatar.vue
+++ b/resources/js/Shared/Modules/ContactAvatar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <avatar :data="data.avatar" :classes="'mx-auto mb-6 sm:w-1/2'" :img-classes="'rounded sm:w-72'" />
+    <avatar :data="data.avatar" :class="'mx-auto mb-6 sm:w-1/2'" :img-classes="'rounded sm:w-72'" />
   </div>
 </template>
 
diff --git a/resources/js/Shared/Modules/ContactInformation.vue b/resources/js/Shared/Modules/ContactInformation.vue
index bea36c4e4..f54bb61f2 100644
--- a/resources/js/Shared/Modules/ContactInformation.vue
+++ b/resources/js/Shared/Modules/ContactInformation.vue
@@ -25,7 +25,7 @@
       <pretty-button
         :text="$t('Add a contact information')"
         :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
+        :class="'w-full sm:w-fit'"
         @click="showCreateContactInformationModal" />
     </div>
 
@@ -67,8 +67,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addContactInformationModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="addContactInformationModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -137,8 +137,8 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedContactInformationId = 0" />
-              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedContactInformationId = 0" />
+              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
             </div>
           </form>
         </li>
diff --git a/resources/js/Shared/Modules/CreateLifeEvent.vue b/resources/js/Shared/Modules/CreateLifeEvent.vue
index 228b8adb6..b685ae1a4 100644
--- a/resources/js/Shared/Modules/CreateLifeEvent.vue
+++ b/resources/js/Shared/Modules/CreateLifeEvent.vue
@@ -292,7 +292,7 @@ const store = () => {
 
         <!-- current contact -->
         <div class="mb-4 flex items-center">
-          <avatar :data="props.data.contact.avatar" :classes="'me-2 h-5 w-5'" />
+          <avatar :data="props.data.contact.avatar" :class="'me-2 h-5 w-5'" />
 
           <span>{{ props.data.contact.name }}</span>
         </div>
@@ -419,13 +419,13 @@ const store = () => {
         </div>
       </div>
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="$emit('closeModal')" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="$emit('closeModal')" />
         <pretty-button
           v-if="selectedLifeEventType"
           :text="$t('Save')"
           :state="loadingState"
           :icon="'plus'"
-          :classes="'save dark:save'" />
+          :class="'save'" />
       </div>
     </form>
   </div>
diff --git a/resources/js/Shared/Modules/Documents.vue b/resources/js/Shared/Modules/Documents.vue
index a36638dd5..90ea643bc 100644
--- a/resources/js/Shared/Modules/Documents.vue
+++ b/resources/js/Shared/Modules/Documents.vue
@@ -30,7 +30,7 @@
         :preview-step="false"
         @success="onSuccess"
         @error="onError">
-        <pretty-button :text="$t('Add a document')" :icon="'plus'" :classes="'sm:w-fit w-full'" />
+        <pretty-button :text="$t('Add a document')" :icon="'plus'" :class="'w-full sm:w-fit'" />
       </uploadcare>
     </div>
 
diff --git a/resources/js/Shared/Modules/Feed.vue b/resources/js/Shared/Modules/Feed.vue
index e10abea8c..50f6865f0 100644
--- a/resources/js/Shared/Modules/Feed.vue
+++ b/resources/js/Shared/Modules/Feed.vue
@@ -7,7 +7,7 @@
           <div class="relative -start-[11px] top-[3px] w-6">
             <avatar
               :data="feedItem.author.avatar"
-              :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5'" />
+              :class="'relative h-5 w-5 rounded-full border border-gray-200 dark:border-gray-800'" />
           </div>
 
           <div class="flex w-full items-center justify-between">
diff --git a/resources/js/Shared/Modules/FeedItems/Address.vue b/resources/js/Shared/Modules/FeedItems/Address.vue
index 19a43ca1c..265aa6ed3 100644
--- a/resources/js/Shared/Modules/FeedItems/Address.vue
+++ b/resources/js/Shared/Modules/FeedItems/Address.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
+        :class="'relative me-2 h-5 w-5 rounded-full border border-gray-200 dark:border-gray-800'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
diff --git a/resources/js/Shared/Modules/FeedItems/ContactInformation.vue b/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
index e6f0186e2..72ead7092 100644
--- a/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
+++ b/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
+        :class="'relative me-2 h-5 w-5 rounded-full border border-gray-200 dark:border-gray-800'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
diff --git a/resources/js/Shared/Modules/FeedItems/GenericAction.vue b/resources/js/Shared/Modules/FeedItems/GenericAction.vue
index 110136b8b..ab4e960a2 100644
--- a/resources/js/Shared/Modules/FeedItems/GenericAction.vue
+++ b/resources/js/Shared/Modules/FeedItems/GenericAction.vue
@@ -4,7 +4,7 @@
     class="flex items-center rounded-lg border border-gray-300 px-3 py-2 dark:border-gray-700">
     <avatar
       :data="data.avatar"
-      :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-8 w-8 me-2'" />
+      :class="'relative me-2 h-8 w-8 rounded-full border border-gray-200 dark:border-gray-800'" />
 
     <div class="flex flex-col">
       <inertia-link :href="data.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
diff --git a/resources/js/Shared/Modules/FeedItems/Goal.vue b/resources/js/Shared/Modules/FeedItems/Goal.vue
index 63799d52a..ee98c0857 100644
--- a/resources/js/Shared/Modules/FeedItems/Goal.vue
+++ b/resources/js/Shared/Modules/FeedItems/Goal.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
+        :class="'relative me-2 h-5 w-5 rounded-full border border-gray-200 dark:border-gray-800'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
diff --git a/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue b/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue
index 77f3716c3..66ddabd67 100644
--- a/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue
+++ b/resources/js/Shared/Modules/FeedItems/LabelAssigned.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
+        :class="'relative me-2 h-5 w-5 rounded-full border border-gray-200 dark:border-gray-800'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -19,7 +19,7 @@
       <!-- the label still exists in the system -->
       <span
         v-if="data.label.object"
-        class="mb-2 me-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0"
+        class="mb-2 me-2 inline-block rounded px-2 py-1 text-xs font-semibold last:me-0"
         :class="data.label.object.bg_color + ' ' + data.label.object.text_color">
         <inertia-link :href="data.label.object.url">{{ data.label.object.name }}</inertia-link>
       </span>
@@ -27,7 +27,7 @@
       <!-- the label was deleted -->
       <span
         v-else
-        class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0">
+        class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:me-0">
         <span>{{ data.label.description }}</span>
       </span>
     </div>
diff --git a/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue b/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
index 0166d857b..695ea88b3 100644
--- a/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
+++ b/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
+        :class="'relative me-2 h-5 w-5 rounded-full border border-gray-200 dark:border-gray-800'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
diff --git a/resources/js/Shared/Modules/FeedItems/Note.vue b/resources/js/Shared/Modules/FeedItems/Note.vue
index 3a577a339..fcc088d9d 100644
--- a/resources/js/Shared/Modules/FeedItems/Note.vue
+++ b/resources/js/Shared/Modules/FeedItems/Note.vue
@@ -15,7 +15,7 @@ const props = defineProps({
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <Avatar
         :data="props.data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
+        :class="'relative me-2 h-5 w-5 rounded-full border border-gray-200 dark:border-gray-800'" />
 
       <div class="flex flex-col">
         <inertia-link :href="props.data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
@@ -34,7 +34,7 @@ const props = defineProps({
       <!-- the note was deleted -->
       <span
         v-else
-        class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:mr-0">
+        class="mb-2 me-2 inline-block rounded bg-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800 last:me-0">
         <span>{{ props.data.note.description }}</span>
       </span>
     </div>
diff --git a/resources/js/Shared/Modules/FeedItems/Pet.vue b/resources/js/Shared/Modules/FeedItems/Pet.vue
index dd744ca12..f6d4e217c 100644
--- a/resources/js/Shared/Modules/FeedItems/Pet.vue
+++ b/resources/js/Shared/Modules/FeedItems/Pet.vue
@@ -6,7 +6,7 @@
       class="flex items-center border-b border-gray-300 px-3 py-2 text-sm dark:border-gray-700">
       <avatar
         :data="data.contact.avatar"
-        :classes="'rounded-full border-gray-200 dark:border-gray-800 border relative h-5 w-5 me-2'" />
+        :class="'relative me-2 h-5 w-5 rounded-full border border-gray-200 dark:border-gray-800'" />
 
       <div class="flex flex-col">
         <inertia-link :href="data.contact.url" class="text-gray-800 hover:underline dark:text-gray-200">{{
diff --git a/resources/js/Shared/Modules/Goals.vue b/resources/js/Shared/Modules/Goals.vue
index 9b2e92a00..971ceb367 100644
--- a/resources/js/Shared/Modules/Goals.vue
+++ b/resources/js/Shared/Modules/Goals.vue
@@ -20,11 +20,7 @@
 
         <span class="font-semibold"> {{ $t('Goals') }} </span>
       </div>
-      <pretty-button
-        :text="$t('Add a goal')"
-        :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
-        @click="showCreateGoalModal" />
+      <pretty-button :text="$t('Add a goal')" :icon="'plus'" :class="'w-full sm:w-fit'" @click="showCreateGoalModal" />
     </div>
 
     <!-- add a note modal -->
@@ -48,8 +44,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createGoalModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createGoalModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
 
@@ -78,13 +74,13 @@
               <div
                 v-for="streak in goal.last_7_days"
                 :key="streak.id"
-                class="me-0 flex flex-row items-center justify-between border-b border-gray-200 p-3 text-center dark:border-gray-700 sm:mb-0 sm:mr-7 sm:w-9 sm:flex-col sm:border-0 sm:p-0"
+                class="me-0 flex flex-row items-center justify-between border-b border-gray-200 p-3 text-center dark:border-gray-700 sm:mb-0 sm:me-7 sm:w-9 sm:flex-col sm:border-0 sm:p-0"
                 :class="{ 'text-gray-500': !streak.active }">
                 <div>
-                  <span class="mb-0 me-2 block text-xs font-semibold sm:mr-0">
+                  <span class="mb-0 me-2 block text-xs font-semibold sm:me-0">
                     {{ streak.day }}
                   </span>
-                  <span class="me-2 sm:mr-0">
+                  <span class="me-2 sm:me-0">
                     {{ streak.day_number }}
                   </span>
                 </div>
@@ -92,7 +88,7 @@
                 <!-- active streak -->
                 <span
                   v-if="streak.active"
-                  class="me-2 cursor-pointer text-2xl sm:mr-0"
+                  class="me-2 cursor-pointer text-2xl sm:me-0"
                   @click="toggleStreak(goal, streak)"
                   >👍</span
                 >
@@ -100,7 +96,7 @@
                 <!-- inactive streak -->
                 <span
                   v-else
-                  class="me-2 cursor-pointer text-center text-2xl sm:mr-0"
+                  class="me-2 cursor-pointer text-center text-2xl sm:me-0"
                   @click="toggleStreak(goal, streak)">
                   <div
                     class="rounded-md border border-gray-200 bg-slate-100 px-2 py-1 dark:border-gray-700 dark:bg-slate-900">
diff --git a/resources/js/Shared/Modules/Groups.vue b/resources/js/Shared/Modules/Groups.vue
index c3d32d419..5c3e4fe8f 100644
--- a/resources/js/Shared/Modules/Groups.vue
+++ b/resources/js/Shared/Modules/Groups.vue
@@ -23,7 +23,7 @@
       <pretty-button
         :text="$t('Add to group')"
         :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
+        :class="'w-full sm:w-fit'"
         @click="addGroupMode = true" />
     </div>
 
@@ -88,8 +88,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addGroupMode = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="addGroupMode = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -105,7 +105,7 @@
           <div v-if="group.contacts" class="relative flex -space-x-2 overflow-hidden py-1">
             <div v-for="contact in group.contacts" :key="contact.id" class="inline-block">
               <inertia-link :href="contact.url.show">
-                <avatar :data="contact.avatar" :classes="'h-8 w-8 rounded-full ring-2 ring-white'" />
+                <avatar :data="contact.avatar" :class="'h-8 w-8 rounded-full ring-2 ring-white'" />
               </inertia-link>
             </div>
           </div>
diff --git a/resources/js/Shared/Modules/JobInformation.vue b/resources/js/Shared/Modules/JobInformation.vue
index 351837cf5..1639db7eb 100644
--- a/resources/js/Shared/Modules/JobInformation.vue
+++ b/resources/js/Shared/Modules/JobInformation.vue
@@ -80,13 +80,13 @@
         </div>
 
         <div class="flex justify-between p-2">
-          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editJobInformation = false" />
+          <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editJobInformation = false" />
           <pretty-button
             :href="'data.url.vault.create'"
             :text="$t('Save')"
             :state="loadingState"
             :icon="'check'"
-            :classes="'save dark:save'" />
+            :class="'save'" />
         </div>
 
         <div class="border-t border-gray-200 p-2 dark:border-gray-700">
diff --git a/resources/js/Shared/Modules/Labels.vue b/resources/js/Shared/Modules/Labels.vue
index 1af90f632..c10b68c3f 100644
--- a/resources/js/Shared/Modules/Labels.vue
+++ b/resources/js/Shared/Modules/Labels.vue
@@ -91,7 +91,7 @@
       <span
         v-for="label in localLabels"
         :key="label.id"
-        class="mb-2 me-2 inline-block rounded px-2 py-1 text-xs font-semibold last:mr-0"
+        class="mb-2 me-2 inline-block rounded px-2 py-1 text-xs font-semibold last:me-0"
         :class="label.bg_color + ' ' + label.text_color">
         <inertia-link :href="label.url.show">{{ label.name }}</inertia-link>
       </span>
diff --git a/resources/js/Shared/Modules/LifeEvent.vue b/resources/js/Shared/Modules/LifeEvent.vue
index c7a7393f7..d6a73a38a 100644
--- a/resources/js/Shared/Modules/LifeEvent.vue
+++ b/resources/js/Shared/Modules/LifeEvent.vue
@@ -136,7 +136,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
       <pretty-button
         :text="$t('Add a life event')"
         :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
+        :class="'w-full sm:w-fit'"
         @click="showCreateLifeEventModal" />
     </div>
 
diff --git a/resources/js/Shared/Modules/Loans.vue b/resources/js/Shared/Modules/Loans.vue
index 647d2baba..f1967b58d 100644
--- a/resources/js/Shared/Modules/Loans.vue
+++ b/resources/js/Shared/Modules/Loans.vue
@@ -23,7 +23,7 @@
       <pretty-button
         :text="$t('Record a loan')"
         :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
+        :class="'w-full sm:w-fit'"
         @click="showCreateLoanModal" />
     </div>
 
@@ -173,8 +173,8 @@
         <div v-if="warning != ''" class="border-b p-3">⚠️ {{ warning }}</div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createLoanModalShown = false" />
-          <pretty-button :text="$t('Add loan')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+          <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createLoanModalShown = false" />
+          <pretty-button :text="$t('Add loan')" :state="loadingState" :icon="'plus'" :class="'save'" />
         </div>
       </form>
 
@@ -399,8 +399,8 @@
           <div v-if="warning != ''" class="border-b p-3">⚠️ {{ warning }}</div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedLoanId = 0" />
-            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedLoanId = 0" />
+            <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Shared/Modules/Notes.vue b/resources/js/Shared/Modules/Notes.vue
index 0bea1f080..e7860584b 100644
--- a/resources/js/Shared/Modules/Notes.vue
+++ b/resources/js/Shared/Modules/Notes.vue
@@ -31,11 +31,7 @@
 
         <span class="font-semibold"> {{ $t('Notes') }} </span>
       </div>
-      <pretty-button
-        :text="$t('Add a note')"
-        :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
-        @click="showCreateNoteModal" />
+      <pretty-button :text="$t('Add a note')" :icon="'plus'" :class="'w-full sm:w-fit'" @click="showCreateNoteModal" />
     </div>
 
     <!-- add a note modal -->
@@ -102,8 +98,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createNoteModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createNoteModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
 
@@ -162,7 +158,7 @@
               <!-- author -->
               <div v-if="note.author" class="relative me-3 inline">
                 <div class="icon-avatar relative flex">
-                  <avatar :data="note.author.avatar" :classes="'rounded-full relative me-1 h-3 w-3'" />
+                  <avatar :data="note.author.avatar" :class="'relative me-1 h-3 w-3 rounded-full'" />
                   <span>{{ note.author.name }}</span>
                 </div>
               </div>
@@ -221,8 +217,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedNoteId = 0" />
-            <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedNoteId = 0" />
+            <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </div>
diff --git a/resources/js/Shared/Modules/Pets.vue b/resources/js/Shared/Modules/Pets.vue
index f47b4343b..de25137b6 100644
--- a/resources/js/Shared/Modules/Pets.vue
+++ b/resources/js/Shared/Modules/Pets.vue
@@ -21,7 +21,7 @@
 
         <span class="font-semibold"> {{ $t('Pets') }} </span>
       </div>
-      <pretty-button :text="$t('Add a pet')" :icon="'plus'" :classes="'sm:w-fit w-full'" @click="showCreatePetModal" />
+      <pretty-button :text="$t('Add a pet')" :icon="'plus'" :class="'w-full sm:w-fit'" @click="showCreatePetModal" />
     </div>
 
     <!-- add a pet modal -->
@@ -62,8 +62,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addPetModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="addPetModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -127,8 +127,8 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedPetId = 0" />
-              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedPetId = 0" />
+              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
             </div>
           </form>
         </li>
diff --git a/resources/js/Shared/Modules/Photos.vue b/resources/js/Shared/Modules/Photos.vue
index 413889c28..b806634c7 100644
--- a/resources/js/Shared/Modules/Photos.vue
+++ b/resources/js/Shared/Modules/Photos.vue
@@ -30,7 +30,7 @@
         :preview-step="false"
         @success="onSuccess"
         @error="onError">
-        <pretty-button :text="$t('Add a photo')" :icon="'plus'" :classes="'sm:w-fit w-full'" />
+        <pretty-button :text="$t('Add a photo')" :icon="'plus'" :class="'w-full sm:w-fit'" />
       </uploadcare>
     </div>
 
diff --git a/resources/js/Shared/Modules/QuickFacts.vue b/resources/js/Shared/Modules/QuickFacts.vue
index 75d05824f..b29de73bd 100644
--- a/resources/js/Shared/Modules/QuickFacts.vue
+++ b/resources/js/Shared/Modules/QuickFacts.vue
@@ -218,8 +218,8 @@ const destroy = (quickFact) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedQuickFactId = 0" />
-              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedQuickFactId = 0" />
+              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
             </div>
           </form>
         </li>
@@ -269,8 +269,8 @@ const destroy = (quickFact) => {
         </div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createQuickFactModalShown = false" />
-          <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+          <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createQuickFactModalShown = false" />
+          <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
         </div>
       </form>
     </div>
diff --git a/resources/js/Shared/Modules/Relationships.vue b/resources/js/Shared/Modules/Relationships.vue
index e3135f5fa..d7bb853e9 100644
--- a/resources/js/Shared/Modules/Relationships.vue
+++ b/resources/js/Shared/Modules/Relationships.vue
@@ -20,11 +20,7 @@
 
         <span class="font-semibold"> {{ $t('Relationships') }} </span>
       </div>
-      <pretty-link
-        :text="$t('Add a relationship')"
-        :icon="'plus'"
-        :href="data.url.create"
-        :classes="'sm:w-fit w-full'" />
+      <pretty-link :text="$t('Add a relationship')" :icon="'plus'" :href="data.url.create" :class="'w-full sm:w-fit'" />
     </div>
 
     <!-- relationships -->
@@ -45,7 +41,7 @@
             class="item-list flex items-center justify-between border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <div class="flex">
               <div class="me-2 flex items-center">
-                <avatar :data="relationshipType.contact.avatar" :classes="'me-2 h-5 w-5'" />
+                <avatar :data="relationshipType.contact.avatar" :class="'me-2 h-5 w-5'" />
 
                 <!-- name -->
                 <inertia-link
diff --git a/resources/js/Shared/Modules/Religion.vue b/resources/js/Shared/Modules/Religion.vue
index 21206ea9b..63fc4e0d7 100644
--- a/resources/js/Shared/Modules/Religion.vue
+++ b/resources/js/Shared/Modules/Religion.vue
@@ -94,13 +94,13 @@ const showEditModal = () => {
         </div>
 
         <div class="flex justify-between p-2">
-          <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editReligion = false" />
+          <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editReligion = false" />
           <pretty-button
             :href="'data.url.vault.create'"
             :text="$t('Save')"
             :state="loadingState"
             :icon="'check'"
-            :classes="'save dark:save'" />
+            :class="'save'" />
         </div>
       </form>
     </div>
diff --git a/resources/js/Shared/Modules/Reminders.vue b/resources/js/Shared/Modules/Reminders.vue
index 51b4d3330..09944be5a 100644
--- a/resources/js/Shared/Modules/Reminders.vue
+++ b/resources/js/Shared/Modules/Reminders.vue
@@ -25,7 +25,7 @@
       <pretty-button
         :text="$t('Add a reminder')"
         :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
+        :class="'w-full sm:w-fit'"
         @click="showCreateReminderModal" />
     </div>
 
@@ -184,8 +184,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="addReminderModalShown = false" />
-        <pretty-button :text="$t('Add date')" :state="loadingState" :icon="'plus'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="addReminderModalShown = false" />
+        <pretty-button :text="$t('Add date')" :state="loadingState" :icon="'plus'" :class="'save'" />
       </div>
     </form>
 
@@ -386,8 +386,8 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedReminderId = 0" />
-              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+              <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedReminderId = 0" />
+              <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
             </div>
           </form>
         </li>
diff --git a/resources/js/Shared/Modules/Tasks.vue b/resources/js/Shared/Modules/Tasks.vue
index 5ce9858c3..02bc6574e 100644
--- a/resources/js/Shared/Modules/Tasks.vue
+++ b/resources/js/Shared/Modules/Tasks.vue
@@ -23,7 +23,7 @@
       <pretty-button
         :text="$t('Add a task')"
         :icon="'plus'"
-        :classes="'sm:w-fit w-full'"
+        :class="'w-full sm:w-fit'"
         @click="showCreateTaskModal()" />
     </div>
 
@@ -82,8 +82,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="createTaskModalShown = false" />
-        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createTaskModalShown = false" />
+        <pretty-button :text="$t('Save')" :state="loadingState" :icon="'check'" :class="'save'" />
       </div>
     </form>
 
@@ -183,8 +183,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'me-3'" @click="editedTaskId = 0" />
-            <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :classes="'save dark:save'" />
+            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editedTaskId = 0" />
+            <pretty-button :text="$t('Update')" :state="loadingState" :icon="'check'" :class="'save'" />
           </div>
         </form>
       </li>

From bb7c4e22863147193ce0b85bdc595e76bffabd38 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Sun, 14 May 2023 21:23:58 +0200
Subject: [PATCH 13/14] remove htmldir class

---
 .../js/Pages/Vault/Journal/Post/Edit.vue      |  4 +--
 .../js/Pages/Vault/Journal/Post/Show.vue      | 30 +++++++++----------
 resources/views/app.blade.php                 |  2 +-
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/resources/js/Pages/Vault/Journal/Post/Edit.vue b/resources/js/Pages/Vault/Journal/Post/Edit.vue
index d7997cfad..cc559ad6c 100644
--- a/resources/js/Pages/Vault/Journal/Post/Edit.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Edit.vue
@@ -572,11 +572,11 @@ const destroy = () => {
   animation: saving-spinner-animation 2500ms linear infinite;
 }
 
-.ltr .saving-spinner .dot {
+[dir='ltr'] .saving-spinner .dot {
   left: calc(15px * 4);
 }
 
-.rtl .saving-spinner .dot {
+[dir='rtl'] .saving-spinner .dot {
   right: calc(15px * 4);
 }
 
diff --git a/resources/js/Pages/Vault/Journal/Post/Show.vue b/resources/js/Pages/Vault/Journal/Post/Show.vue
index e210a8c82..a68d16294 100644
--- a/resources/js/Pages/Vault/Journal/Post/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Show.vue
@@ -106,7 +106,7 @@ defineProps({
               <div v-else>&nbsp;</div>
             </div>
 
-            <div class="post dark:post relative rounded bg-white dark:bg-gray-900">
+            <div class="post relative rounded bg-white dark:bg-gray-900">
               <!-- date of the post -->
               <p class="mb-2 text-sm text-gray-400">{{ data.written_at }}</p>
 
@@ -264,7 +264,7 @@ defineProps({
   }
 }
 
-.ltr .post {
+[dir='ltr'] .post {
   &:before {
     background: #fafafa;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@@ -282,7 +282,7 @@ defineProps({
   }
 }
 
-.rtl .post {
+[dir='rtl'] .post {
   &:before {
     background: #fafafa;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@@ -300,23 +300,23 @@ defineProps({
   }
 }
 
-.dark .dark\:post {
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
+.dark .post {
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05) !important;
 
   &:before {
-    background: #09090b;
-    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
-    left: -5px;
-    top: 4px;
-    transform: rotate(-2.5deg);
+    background: #09090b !important;
+    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1) !important;
+    left: -5px !important;
+    top: 4px !important;
+    transform: rotate(-2.5deg) !important;
   }
 
   &:after {
-    background: #171717;
-    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
-    right: -3px;
-    top: 1px;
-    transform: rotate(1.4deg);
+    background: #171717 !important;
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1) !important;
+    right: -3px !important;
+    top: 1px !important;
+    transform: rotate(1.4deg) !important;
   }
 }
 
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 1b50462ca..07db40a18 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ htmldir() }}" class="{{ htmldir() }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ htmldir() }}">
 
   <head>
     <meta charset="utf-8">

From 165bfce32447d61a68fe56b18af2f694ec726b77 Mon Sep 17 00:00:00 2001
From: Alexis Saettler <alexis@saettler.org>
Date: Mon, 15 May 2023 21:26:49 +0200
Subject: [PATCH 14/14] fix

---
 resources/js/Pages/Vault/Index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/resources/js/Pages/Vault/Index.vue b/resources/js/Pages/Vault/Index.vue
index 26b82a365..35e70b0de 100644
--- a/resources/js/Pages/Vault/Index.vue
+++ b/resources/js/Pages/Vault/Index.vue
@@ -3,8 +3,7 @@
     <main class="relative mt-16 sm:mt-24">
       <!-- blank state -->
       <div v-if="data.vaults.length === 0" class="mx-auto mb-6 max-w-md px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
-        <div
-          class="rounded-t-lg border-x border-t border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
+        <div class="rounded-t-lg border-x border-t border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-900">
           <p class="mb-2 text-center text-xl">👋</p>
           <h2 class="mb-6 text-center text-lg font-semibold">
             {{ $t('Thanks for giving Monica a try') }}