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/Components/Breadcrumb.vue b/resources/js/Components/Breadcrumb.vue
index a78c6a76e..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="mr-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>
       <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 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="{ 'ml-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/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 0f470055c..0b9aa6aad 100644
--- a/resources/js/Components/Jetstream/Banner.vue
+++ b/resources/js/Components/Jetstream/Banner.vue
@@ -49,15 +49,15 @@ watch(message, async () => {
               </svg>
             </span>
 
-            <p class="ml-3 truncate text-sm font-medium text-white">
+            <p class="ms-3 truncate text-sm font-medium text-white">
               {{ message }}
             </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/Jetstream/ConfirmationModal.vue b/resources/js/Components/Jetstream/ConfirmationModal.vue
index 443a6d2ba..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="ml-3 text-lg">
+          <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 00eb56f12..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="ml-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 86cd777e4..c74144f0f 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="me-1">
           <slot name="icon" />
         </span>
-        <span class="mr-2">
+        <span class="me-2">
           <slot name="title" />
         </span>
 
@@ -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 7e65ecb75..c0df67cd1 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,7 +151,7 @@ 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-s border-gray-200 py-1 pe-1 ps-2 text-gray-300 dark:border-gray-600">
         <button
           @click.prevent="
             open = !open;
@@ -208,7 +202,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-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/Pagination.vue b/resources/js/Components/Pagination.vue
index a34f6db67..7b4d23d54 100644
--- a/resources/js/Components/Pagination.vue
+++ b/resources/js/Components/Pagination.vue
@@ -44,7 +44,7 @@ const linkClasses =
         :class="[
           commonClasses,
           linkClasses,
-          'ml-3',
+          'ms-3',
           'rounded-md',
           'text-gray-700',
           'dark:text-gray-300',
@@ -54,7 +54,7 @@ const linkClasses =
       </Link>
       <span
         v-else
-        :class="[commonClasses, 'ml-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>
@@ -86,7 +86,7 @@ const linkClasses =
           :class="[
             commonClasses,
             'px-2',
-            'rounded-l-md',
+            'rounded-s-md',
             'text-gray-500',
             'focus:z-10',
             'cursor-default',
@@ -107,7 +107,7 @@ const linkClasses =
             commonClasses,
             linkClasses,
             'px-2',
-            'rounded-l-md',
+            'rounded-s-md',
             'text-gray-500',
             'dark:bg-gray-900',
             'hover:text-gray-400',
@@ -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,9 +164,9 @@ const linkClasses =
           :class="[
             commonClasses,
             linkClasses,
-            '-ml-px',
+            '-ms-px',
             'px-2',
-            'rounded-r-md',
+            'rounded-e-md',
             'text-gray-500',
             'dark:bg-gray-900',
             'hover:text-gray-400',
@@ -181,9 +181,9 @@ const linkClasses =
           :class="[
             commonClasses,
             linkClasses,
-            '-ml-px',
+            '-ms-px',
             'px-2',
-            'rounded-r-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 3c3641efe..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-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 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/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index dcd345c92..97c473431 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -33,16 +33,16 @@ 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 ml-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 ml-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">
@@ -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="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 54ed15b3d..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="mr-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="mr-2 inline">
+            <li class="me-2 inline">
               <Link :href="route('settings.index')" class="text-blue-500 hover:underline">
                 {{ $t('Settings') }}
               </Link>
             </li>
-            <li class="relative mr-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"
diff --git a/resources/js/Pages/API/Partials/ApiTokenManager.vue b/resources/js/Pages/API/Partials/ApiTokenManager.vue
index 0c61ee4fe..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="ml-2 text-sm text-gray-600 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="mr-3">
+        <JetActionMessage :on="createApiTokenForm.recentlySuccessful" class="me-3">
           {{ $t('Created.') }}
         </JetActionMessage>
 
@@ -168,12 +168,12 @@ const copyToClipboard = (token) => {
 
                   <button
                     v-if="availablePermissions.length > 0"
-                    class="ml-6 cursor-pointer text-sm text-gray-400 underline"
+                    class="ms-6 cursor-pointer text-sm text-gray-400 underline"
                     @click="manageApiTokenPermissions(token)">
                     {{ $t('Permissions') }}
                   </button>
 
-                  <button class="ml-6 cursor-pointer text-sm text-red-500" @click="confirmApiTokenDeletion(token)">
+                  <button class="ms-6 cursor-pointer text-sm text-red-500" @click="confirmApiTokenDeletion(token)">
                     {{ $t('Delete') }}
                   </button>
                 </div>
@@ -203,7 +203,7 @@ const copyToClipboard = (token) => {
           </div>
 
           <JetButton
-            class="ml-3"
+            class="ms-3"
             :title="$t('Copy value into the clipboard')"
             @click.prevent="copyToClipboard($page.props.jetstream.flash.token)">
             {{ $t('Copy') }}
@@ -233,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="ml-2 text-sm text-gray-600 dark:text-gray-400">
+              <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">
                 {{ permission }}
               </span>
             </label>
@@ -247,7 +247,7 @@ const copyToClipboard = (token) => {
         </JetSecondaryButton>
 
         <JetButton
-          class="ml-3"
+          class="ms-3"
           :class="{ 'opacity-25': updateApiTokenForm.processing }"
           :disabled="updateApiTokenForm.processing"
           @click="updateApiToken">
@@ -272,7 +272,7 @@ const copyToClipboard = (token) => {
         </JetSecondaryButton>
 
         <JetDangerButton
-          class="ml-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 0b898eb30..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="mr-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="ml-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 5698c2df9..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="ml-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 81a669358..4606aeca4 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -74,17 +74,6 @@ const reload = () => {
 };
 </script>
 
-<style scoped>
-.auth-provider {
-  width: 15px;
-  height: 15px;
-  margin-right: 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">
@@ -94,10 +83,11 @@ 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="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">
+      <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>
@@ -114,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="mr-2"> 👋 </span>
+            <span class="me-2"> 👋 </span>
             {{ $t('Sign in to your account') }}
           </h1>
 
@@ -134,7 +124,7 @@ const reload = () => {
 
             <WebauthnLogin :remember="true" :public-key="publicKeyRef" />
 
-            <JetSecondaryButton class="mr-2 mt-4" @click.prevent="webauthn = false">
+            <JetSecondaryButton class="me-2 mt-4" @click.prevent="webauthn = false">
               {{ $t('Use your password') }}
             </JetSecondaryButton>
           </div>
@@ -167,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="ml-2 text-sm text-gray-600 dark:text-gray-400">
+                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">
                   {{ $t('Remember me') }}
                 </span>
               </label>
@@ -181,7 +171,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" :class="'save ms-4'" />
             </div>
 
             <div class="mt-3 block">
@@ -192,10 +182,10 @@ const reload = () => {
                 <JetSecondaryButton
                   v-for="(provider, id) in providers"
                   :key="id"
-                  class="mb-2 mr-2 inline w-32 align-middle"
+                  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 mr-2 h-4 w-4 align-middle" />
+                  <img :src="provider.logo" :alt="provider.name" class="relative me-2 h-4 w-4 align-middle" />
                   <span class="align-middle">
                     {{ provider.name }}
                   </span>
@@ -204,7 +194,7 @@ const reload = () => {
             </div>
 
             <div v-if="publicKeyRef" class="mt-3 block">
-              <JetSecondaryButton class="mr-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 f8221ca38..69b3ad535 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="ms-2"
               v-html="$t('I agree to the :terms and :policy', { terms: terms(), policy: policy() })"></div>
           </div>
         </JetLabel>
@@ -118,10 +118,11 @@ 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="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">
+        <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>
@@ -133,11 +134,11 @@ 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="me-4 text-sm text-blue-500 hover:underline dark:text-gray-400">
           {{ $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/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue
index 09800395e..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="ml-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 4e92e17dc..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 ml-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="ml-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 2a892346a..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="ml-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="ml-3">
+        <JetActionMessage :on="form.recentlySuccessful" class="ms-3">
           {{ $t('Done.') }}
         </JetActionMessage>
       </div>
@@ -158,7 +158,7 @@ const closeModal = () => {
           </JetSecondaryButton>
 
           <JetButton
-            class="ml-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 788f80ec9..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="mr-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="mr-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="mr-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 50cca5a03..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="mr-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 db4c35680..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="mr-2 mt-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="mr-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 3c6e50843..6a0dc6a89 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProviders.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProviders.vue
@@ -37,15 +37,6 @@ defineProps({
 });
 </script>
 
-<style scoped>
-.auth-provider {
-  width: 15px;
-  height: 15px;
-  margin-right: 8px;
-  top: 2px;
-}
-</style>
-
 <template>
   <JetActionSection id="socialite">
     <template #title>
@@ -63,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="mr-3 text-sm text-gray-600 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>
 
@@ -72,7 +63,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="ms-3" @click.prevent="deleteProvider(id)">
               {{ $t('Disconnect') }}
             </JetSecondaryButton>
 
@@ -80,7 +71,7 @@ defineProps({
           </template>
 
           <template v-else>
-            <JetButton class="ml-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 08edc3a4d..db152fa9c 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -39,11 +39,11 @@
             <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'" :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>
-            <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>
@@ -72,13 +72,13 @@
           </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')" :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/Index.vue b/resources/js/Pages/Settings/Index.vue
index 843cd187f..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="mr-2 inline">
+            <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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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 1712ae0ce..6059ce92e 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="me-1"> 🛰️ </span>
             {{ $t('Configure how we should notify you') }}
           </h3>
         </div>
@@ -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">
@@ -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 cc3588c3d..bbba17e05 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="me-2 inline">
               <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 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="mr-2 inline">
+            <li class="me-2 inline">
               <span class="text-gray-500">{{ $t('Type:') }}</span>
               {{ data.channel.type }}
             </li>
@@ -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">
@@ -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="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 4c49657ea..2a409633c 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
@@ -52,37 +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="mr-2">
+          <span class="me-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" dropdown-class="me-1" :required="required" :data="hours" />
+
+          <span class="me-2">:</span>
+
+          <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="mr-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.',
@@ -92,8 +76,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -109,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="mr-2 inline h-4 w-4 text-green-600"
+              class="me-2 inline h-4 w-4 text-green-600"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
@@ -124,8 +108,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 me-2 text-sm text-gray-500">
+              <li v-if="email.label" class="me-1 inline">
                 {{ email.label }}
               </li>
               <li class="inline">
@@ -140,13 +124,13 @@
           <!-- activate/deactivate -->
           <li
             v-if="email.active"
-            class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+            class="me-4 inline cursor-pointer text-blue-500 hover:underline"
             @click="toggle(email)">
             {{ $t('Deactivate') }}
           </li>
           <li
             v-if="!email.active"
-            class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+            class="me-4 inline cursor-pointer text-blue-500 hover:underline"
             @click="toggle(email)">
             {{ $t('Activate') }}
           </li>
@@ -154,18 +138,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="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="mr-4 inline">
+          <li v-if="testEmailSentId == email.id" class="me-4 inline">
             {{ $t('Test email sent!') }}
           </li>
 
           <!-- view log -->
-          <li class="mr-4 inline cursor-pointer text-blue-500 hover:underline">
+          <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>
@@ -179,7 +163,7 @@
 
         <!-- actions when the email has NOT been verified -->
         <ul v-else class="text-sm">
-          <li class="mr-4 inline">
+          <li class="me-4 inline">
             {{ $t('Verification email sent') }}
           </li>
 
@@ -206,6 +190,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 +199,7 @@ export default {
     PrettySpan,
     TextInput,
     Errors,
+    Dropdown,
   },
 
   props: {
@@ -245,6 +231,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 +337,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..e45eb9c7f 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Telegram.vue
@@ -25,37 +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="mr-2">
+          <span class="me-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="me-1" :required="required" :data="hours" />
+
+          <span class="me-2">:</span>
+
+          <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="mr-1">👋</span> {{ $t('What happens now?') }}</p>
-        <ol class="ml-4 list-decimal">
+        <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(
@@ -77,8 +61,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -99,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="mr-2 inline h-4 w-4 text-green-600"
+                class="me-2 inline h-4 w-4 text-green-600"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor">
@@ -119,7 +103,7 @@
 
           <!-- actions when Telegram is not active -->
           <ul v-if="!localTelegram.active" class="text-sm">
-            <li class="mr-4 inline">
+            <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>
@@ -135,16 +119,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="me-4 inline cursor-pointer text-blue-500 hover:underline"
               @click="sendTest">
               {{ $t('Send test') }}
             </li>
-            <li v-if="notificationSent" class="mr-4 inline">
+            <li v-if="notificationSent" class="me-4 inline">
               {{ $t('Notification sent') }}
             </li>
 
             <!-- view log -->
-            <li class="mr-4 inline cursor-pointer text-blue-500 hover:underline">
+            <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>
@@ -173,6 +157,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 +165,7 @@ export default {
     PrettyButton,
     PrettySpan,
     Errors,
+    Dropdown,
   },
 
   props: {
@@ -214,6 +200,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 +300,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..7c4bee5f1 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 🏖 </span>
             {{ $t('All the address types') }}
           </h3>
           <pretty-button
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -102,7 +102,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @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)">
@@ -133,11 +133,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'mr-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 5bf17979d..759ea8376 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 📲 </span>
             {{ $t('All the call reasons') }}
           </h3>
           <pretty-button
@@ -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">
@@ -101,8 +101,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                   @click="destroyCallReasonType(callReasonType)">
                   {{ $t('Delete') }}
                 </li>
@@ -154,9 +154,9 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'mr-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>
 
@@ -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 -->
@@ -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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                     @click="destroyReason(callReasonType, reason)">
                     {{ $t('Delete') }}
                   </li>
@@ -206,12 +206,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-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>
@@ -219,7 +215,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)"
@@ -249,8 +245,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-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 36e084e49..a928424ab 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> ☎️ </span>
             {{ $t('All the contact information types') }}
           </h3>
           <pretty-button
@@ -99,11 +99,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'mr-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>
 
@@ -121,7 +118,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 ms-3 text-xs"
                   >[{{
                     $t('Protocol: :name', {
                       name: contactInformationType.protocol,
@@ -139,7 +136,7 @@
                 </li>
                 <li
                   v-if="contactInformationType.can_be_deleted"
-                  class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                  class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                   @click="destroy(contactInformationType)">
                   {{ $t('Delete') }}
                 </li>
@@ -182,9 +179,9 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'mr-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/Currencies/Index.vue b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
index 56cda1e68..7a20edbf6 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 💵 </span>
             {{ $t('All the currencies') }}
           </h3>
         </div>
@@ -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">
@@ -79,7 +79,7 @@
 
         <div class="mb-3 text-right">
           <ul>
-            <li class="mr-2 inline">
+            <li class="me-2 inline">
               <span class="inline cursor-pointer text-blue-500 hover:underline" @click="enableAll">
                 {{ $t('Enable all') }}
               </span>
@@ -102,20 +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="mr-2 text-sm text-gray-500">{{ 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="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+                class="me-4 inline cursor-pointer text-blue-500 hover:underline"
                 @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="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 9737de612..0f1c46b08 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 🚻 </span>
             {{ $t('All the genders') }}
           </h3>
           <pretty-button
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -100,7 +100,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @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,8 +131,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-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 8e4f236a0..6e2fcc192 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 🎁 </span>
             {{ $t('All the gift occasions') }}
           </h3>
           <pretty-button
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -99,11 +99,11 @@
             <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="mr-2 flex">
+                <div class="me-2 flex">
                   <svg
-                    class="handle mr-2 cursor-move"
+                    class="handle me-2 cursor-move"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -128,7 +128,7 @@
                   <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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                     {{ $t('Delete') }}
                   </li>
                 </ul>
@@ -155,12 +155,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-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 5e253d450..a3a2e281d 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 🎁 </span>
             {{ $t('All the gift states') }}
           </h3>
           <pretty-button
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -97,11 +97,11 @@
             <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="mr-2 flex">
+                  <div class="me-2 flex">
                     <svg
-                      class="handle mr-2 cursor-move"
+                      class="handle me-2 cursor-move"
                       width="24"
                       height="24"
                       viewBox="0 0 24 24"
@@ -126,13 +126,13 @@
                     <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="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 ml-3">👇</div>
+                <div class="state-list-icon mb-3 ms-3">👇</div>
               </div>
 
               <form
@@ -156,12 +156,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-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 2770dab31..599de2041 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 👥 </span>
             {{ $t('All the group types') }}
           </h3>
           <pretty-button
@@ -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">
@@ -107,8 +107,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -123,12 +123,12 @@
             <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="mr-2 flex">
+                    <div class="me-2 flex">
                       <svg
-                        class="handle mr-2 cursor-move"
+                        class="handle me-2 cursor-move"
                         width="24"
                         height="24"
                         viewBox="0 0 24 24"
@@ -153,14 +153,14 @@
                       <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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                         {{ $t('Delete') }}
                       </li>
                     </ul>
                   </div>
 
                   <!-- available roles -->
-                  <div class="ml-8">
+                  <div class="ms-8">
                     <p class="mb-1 text-sm text-gray-500">{{ $t('Roles:') }}</p>
 
                     <draggable
@@ -172,12 +172,12 @@
                       <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="mr-2 flex">
+                              <div class="me-2 flex">
                                 <svg
-                                  class="handle mr-2 cursor-move"
+                                  class="handle me-2 cursor-move"
                                   width="24"
                                   height="24"
                                   viewBox="0 0 24 24"
@@ -203,7 +203,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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                                   @click="destroyRole(element)">
                                   {{ $t('Delete') }}
                                 </li>
@@ -234,12 +234,8 @@
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span :text="$t('Cancel')" :classes="'mr-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="'mr-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="'mr-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/Index.vue b/resources/js/Pages/Settings/Personalize/Index.vue
index 36cf73b00..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -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="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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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="mr-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 87674e259..1299fc4ca 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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">
@@ -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-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'"
@@ -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 me-3 inline cursor-pointer">
                         <svg
-                          class="mr-1 inline h-3 w-3"
+                          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 mr-2 inline cursor-pointer" @click="addFieldToRight(row)">
+                      <div class="relative me-2 inline cursor-pointer" @click="addFieldToRight(row)">
                         <svg
-                          class="mr-1 inline h-3 w-3"
+                          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="mr-1 inline h-3 w-3"
+                        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-r border-gray-200 last:border-r-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 mr-3 inline cursor-pointer">
+                          <div class="relative me-3 inline cursor-pointer">
                             <svg
-                              class="mr-1 inline h-3 w-3"
+                              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="mr-1 inline h-3 w-3"
+                            class="me-1 inline h-3 w-3"
                             viewBox="0 0 24 24"
                             fill="none"
                             xmlns="http://www.w3.org/2000/svg">
@@ -265,13 +265,13 @@
 
             <!-- 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')" :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 ae0abb2ef..31b5cb1de 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 🐱 </span>
             {{ $t('All the pet categories') }}
           </h3>
           <pretty-button
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -102,7 +102,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @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)">
@@ -133,11 +133,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'mr-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 6ff586523..1e0515853 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 📮 </span>
             {{ $t('Post templates') }}
           </h3>
           <pretty-button
@@ -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">
@@ -107,8 +107,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -123,12 +123,12 @@
             <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="mr-2 flex">
+                    <div class="me-2 flex">
                       <svg
-                        class="handle mr-2 cursor-move"
+                        class="handle me-2 cursor-move"
                         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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                         @click="destroy(element)">
                         {{ $t('Delete') }}
                       </li>
@@ -163,7 +163,7 @@
                   </div>
 
                   <!-- available sections -->
-                  <div class="ml-8">
+                  <div class="ms-8">
                     <p class="mb-1 text-sm text-gray-500">Sections:</p>
 
                     <draggable
@@ -175,12 +175,12 @@
                       <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="mr-2 flex">
+                              <div class="me-2 flex">
                                 <svg
-                                  class="handle mr-2 cursor-move"
+                                  class="handle me-2 cursor-move"
                                   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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                                   @click="destroySection(element)">
                                   {{ $t('Delete') }}
                                 </li>
@@ -240,12 +240,8 @@
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span :text="$t('Cancel')" :classes="'mr-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="'mr-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="'mr-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 9aad01a27..d2ae594c6 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 🚻 </span>
             {{ $t('All the pronouns') }}
           </h3>
           <pretty-button
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -100,7 +100,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @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,8 +131,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-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 d4d0d2366..3555ea953 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 🥸 </span>
             {{ $t('All the relationship types') }}
           </h3>
           <pretty-button
@@ -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>
@@ -120,11 +120,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span
-              :text="$t('Cancel')"
-              :classes="'mr-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>
 
@@ -146,7 +143,7 @@
                 </li>
                 <li
                   v-if="groupType.can_be_deleted"
-                  class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                  class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                   @click="destroyGroupType(groupType)">
                   {{ $t('Delete') }}
                 </li>
@@ -177,9 +174,9 @@
               <div class="flex justify-between p-5">
                 <pretty-span
                   :text="$t('Cancel')"
-                  :classes="'mr-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>
 
@@ -187,7 +184,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">
@@ -218,7 +215,7 @@
                   </li>
                   <li
                     v-if="type.can_be_deleted"
-                    class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                    class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                     @click="destroyRelationshipType(groupType, type)">
                     {{ $t('Delete') }}
                   </li>
@@ -263,13 +260,9 @@
                 <div class="flex justify-between p-5">
                   <pretty-span
                     :text="$t('Cancel')"
-                    :classes="'mr-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>
@@ -277,7 +270,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)"
@@ -321,11 +314,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span
-                  :text="$t('Cancel')"
-                  :classes="'mr-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 c4042f7d4..eb2a3837a 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> ⛪ </span>
             {{ $t('All the religions') }}
           </h3>
           <pretty-button
@@ -81,8 +81,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -99,11 +99,11 @@
             <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="mr-2 flex">
+                <div class="me-2 flex">
                   <svg
-                    class="handle mr-2 cursor-move"
+                    class="handle me-2 cursor-move"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -128,7 +128,7 @@
                   <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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                     {{ $t('Delete') }}
                   </li>
                 </ul>
@@ -155,12 +155,8 @@
                 </div>
 
                 <div class="flex justify-between p-5">
-                  <pretty-span :text="$t('Cancel')" :classes="'mr-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 ded70212a..9c2c0fc7c 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 📐 </span>
             {{ $t('All the templates') }}
           </h3>
           <pretty-button
@@ -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">
@@ -116,8 +116,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -137,7 +137,7 @@
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @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)">
@@ -168,8 +168,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-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/Modules.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
index a2019b2fb..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"
@@ -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="me-1">✅</span> {{ $t('Already used on this page') }}</span
         >
       </li>
     </ul>
@@ -54,9 +54,9 @@
         @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="mr-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 2e2dab54f..026971b02 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -42,10 +42,10 @@
         <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="mr-2">
+          <div class="me-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="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,8 +104,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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="'mr-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/Personalize/Templates/Show.vue b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
index 5b55d17d7..688061c21 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-2 inline">
               <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 me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -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/Index.vue b/resources/js/Pages/Settings/Preferences/Index.vue
index db24cf5a9..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="mr-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="mr-2 inline">
+            <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 mr-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"
diff --git a/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue b/resources/js/Pages/Settings/Preferences/Partials/DateFormat.vue
index f5a8f8704..affdd9dcc 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="me-1"> 🗓 </span>
+        <span class="me-2">
           {{ $t('How should we display dates') }}
         </span>
 
@@ -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">
@@ -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="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ date.value }}
           </label>
         </div>
@@ -69,8 +69,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-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 d007da06f..330a387bc 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="me-1"> ✈️ </span>
+        <span class="me-2">
           {{ $t('How should we display distance values') }}
         </span>
 
@@ -41,7 +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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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>
@@ -49,8 +49,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-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/HelpPreference.vue b/resources/js/Pages/Settings/Preferences/Partials/HelpPreference.vue
index 9ffe677d6..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="mr-1"> ⁉️ </span>
-        <span class="mr-2">
+        <span class="me-1"> ⁉️ </span>
+        <span class="me-2">
           {{ $t('Help') }}
         </span>
 
@@ -14,10 +14,10 @@
 
     <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: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="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 100e6d096..d3397e8f3 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="me-1"> 🗓 </span>
+        <span class="me-2">
           {{ $t('Language of the application') }}
         </span>
 
@@ -82,29 +89,14 @@ 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 -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-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>
 </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..73edee136 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="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 mr-3 h-4 w-4 border-gray-300 text-sky-500 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,8 +52,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-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 4efb84ff3..f06373b8e 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -81,8 +81,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="me-1"> 👉 </span>
+        <span class="me-2">
           {{ $t('Customize how contacts should be displayed') }}
         </span>
 
@@ -95,7 +95,7 @@ const submit = () => {
     <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">
@@ -146,9 +146,9 @@ const submit = () => {
             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="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $t('First name Last name') }}
-            <span class="ml-4 font-normal text-gray-500"> James Bond </span>
+            <span class="ms-4 font-normal text-gray-500"> James Bond </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -161,10 +161,10 @@ const submit = () => {
             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="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $t('Last name First name') }}
 
-            <span class="ml-4 font-normal text-gray-500"> Bond James </span>
+            <span class="ms-4 font-normal text-gray-500"> Bond James </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -177,9 +177,9 @@ const submit = () => {
             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="ms-3 block cursor-pointer text-sm font-medium text-gray-700 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="ms-4 font-normal text-gray-500"> James Bond (007) </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -190,9 +190,9 @@ const submit = () => {
             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="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $t('nickname') }}
-            <span class="ml-4 font-normal text-gray-500"> 007 </span>
+            <span class="ms-4 font-normal text-gray-500"> 007 </span>
           </label>
         </div>
         <div class="mb-2 flex items-center">
@@ -202,11 +202,11 @@ const submit = () => {
             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="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ $t('Custom name order') }}
           </label>
         </div>
-        <div class="ml-8">
+        <div class="ms-8">
           <text-input
             :ref="'nameOrder'"
             v-model="form.nameOrder"
@@ -226,8 +226,8 @@ const submit = () => {
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-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 b46bba3cb..a42e757a4 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="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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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,8 +47,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-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 e6e276e54..3cab28497 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="me-1"> 🗓 </span>
+        <span class="me-2">
           {{ $t('Timezone') }}
         </span>
 
@@ -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">
@@ -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,8 +501,8 @@
 
       <!-- actions -->
       <div class="flex justify-between p-5">
-        <pretty-link :text="$t('Cancel')" :classes="'mr-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>
@@ -570,11 +570,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 3px center;
-}
-</style>
diff --git a/resources/js/Pages/Settings/Storage/Index.vue b/resources/js/Pages/Settings/Storage/Index.vue
index 872bfcdbf..8bb95be70 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-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 mr-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="mr-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 border-r 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 }}
@@ -78,7 +78,7 @@
 
         <!-- detail breakdown -->
         <p class="mb-2">
-          <span class="mr-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 646924122..32d36a9fe 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="me-2 inline">
               <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 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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-4 font-normal text-gray-500">
+                  <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,12 +131,8 @@ k
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-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 3c534f604..e0274e591 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -36,7 +36,7 @@
         <!-- title + cta -->
         <div class="mb-6 flex items-center justify-between">
           <h3>
-            <span class="mr-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="ml-2 rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500"
+                    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="ml-2 rounded bg-neutral-200 px-2 py-1 text-xs text-neutral-500"
+                    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="mr-4 inline cursor-pointer" @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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-4 font-normal text-gray-500">
+                    <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,8 +158,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-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 30619bb14..aa415e80b 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 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="mr-2 h-4 w-4">
+                      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 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-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
@@ -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="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,13 +75,25 @@ 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-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-e p-2 text-center text-xs dark:border-gray-700">
+                {{ $t('Tuesday') }}
+              </div>
+              <div class="border-e p-2 text-center text-xs dark:border-gray-700">
+                {{ $t('Wednesday') }}
+              </div>
+              <div class="border-e p-2 text-center text-xs dark:border-gray-700">
+                {{ $t('Thursday') }}
+              </div>
+              <div class="border-e p-2 text-center text-xs dark:border-gray-700">
+                {{ $t('Friday') }}
+              </div>
+              <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>
             </div>
 
@@ -89,12 +101,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-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-r 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">
@@ -109,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="mr-2 inline-block h-4 w-4 rounded-full"
+                          class="me-2 inline-block h-4 w-4 rounded-full"
                           :class="mood.mood_tracking_parameter.hex_color" />
                       </a-tooltip>
                     </div>
@@ -124,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 mr-2'"
+                      :avatarClasses="'h-5 w-5 rounded-full me-2'"
                       :displayName="false" />
                   </div>
                 </div>
@@ -155,7 +167,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="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>
@@ -172,7 +184,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="me-1 h-4 w-4 text-gray-400">
                         <path
                           stroke-linecap="round"
                           stroke-linejoin="round"
@@ -210,7 +222,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 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 fe3f45163..07b6b35de 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="me-1"> 🏭 </span>
           {{ $t('All the companies') }}
         </h3>
 
@@ -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/Blank.vue b/resources/js/Pages/Vault/Contact/Blank.vue
index 83d1edbe9..7e905a002 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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/Create.vue b/resources/js/Pages/Vault/Contact/Create.vue
index c94617510..51d1099ff 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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,13 +207,13 @@
 
           <!-- 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')" :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 06d28b3f0..e467dc8c0 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -83,27 +83,27 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
             <!-- 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="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="mr-6 flex items-center">
-                <div class="mr-3 w-14 text-right text-sm text-gray-500">{{ $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="mr-3 w-14 text-right text-sm text-gray-500">{{ $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 c939c6f3c..56586cfb8 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-1"> 🗓 </span>
             {{ $t('All the important dates') }}
           </h3>
           <pretty-button
@@ -108,12 +108,17 @@
                   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="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 ml-6">
-                <DatePicker v-model.string="form.date" class="inline-block h-full" :masks="masks" :isDark="isDark">
+              <div v-if="form.choice == 'full_date'" class="mb-4 ms-6">
+                <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"
@@ -134,16 +139,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="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="ml-6 flex">
+              <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 mr-2'"
+                  :div-outer-class="'mb-5 me-2'"
                   :placeholder="$t('Choose a value')"
                   :dropdown-class="'block w-full'"
                   :label="$t('Month')" />
@@ -170,11 +175,11 @@
                   @selected="showyear" />
                 <label
                   for="year"
-                  class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-6">
+              <div v-if="form.choice == 'year'" class="ms-6">
                 <text-input
                   :ref="'age'"
                   v-model="form.age"
@@ -198,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="ml-2 block cursor-pointer text-sm text-gray-900">
+                <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="ml-4 mt-4">
+              <div v-if="form.reminder" class="ms-4 mt-4">
                 <div class="mb-2 flex items-center">
                   <input
                     id="recurring_year"
@@ -215,7 +220,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="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>
@@ -230,7 +235,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="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>
@@ -239,8 +244,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -259,14 +264,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="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>
 
               <!-- actions -->
               <ul class="text-sm">
-                <li class="mr-4 inline cursor-pointer" @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)">
@@ -321,16 +326,17 @@
                       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="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 ml-6">
+                  <div v-if="form.choice == 'full_date'" class="mb-4 ms-6">
                     <DatePicker
                       v-model.string="form.date"
                       class="inline-block h-full"
                       :masks="masks"
                       :isDark="isDark"
+                      :locale="$attrs.user.locale"
                       :update-on-input="false">
                       <template #default="{ inputValue, inputEvents }">
                         <input
@@ -352,16 +358,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="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="ml-6 flex">
+                  <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 mr-2'"
+                      :div-outer-class="'mb-5 me-2'"
                       :placeholder="$t('Choose a value')"
                       :dropdown-class="'block w-full'"
                       :label="$t('Month')" />
@@ -388,11 +394,11 @@
                       @selected="showAge" />
                     <label
                       for="year"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-6">
+                  <div v-if="form.choice == 'year'" class="ms-6">
                     <text-input
                       :ref="'age'"
                       v-model="form.age"
@@ -408,8 +414,8 @@
               </div>
 
               <div class="flex justify-between p-5">
-                <pretty-span :text="$t('Cancel')" :classes="'mr-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 42b7bee4b..c73c2005b 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="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="mr-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 mr-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="ml-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 mr-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/Move.vue b/resources/js/Pages/Vault/Contact/Move.vue
index 1e8e98548..ae3965622 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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/Names/Edit.vue b/resources/js/Pages/Vault/Contact/Names/Edit.vue
index 90c2d74e7..85a356035 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -147,13 +147,13 @@
           </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')" :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/Notes/Index.vue b/resources/js/Pages/Vault/Contact/Notes/Index.vue
index 1e81b6a01..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
diff --git a/resources/js/Pages/Vault/Contact/Photos/Index.vue b/resources/js/Pages/Vault/Contact/Photos/Index.vue
index d237eeaa6..bba649eec 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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 me-1">
               <svg
                 class="icon-sidebar relative inline h-4 w-4"
                 viewBox="0 0 24 24"
@@ -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/Photos/Show.vue b/resources/js/Pages/Vault/Contact/Photos/Show.vue
index c0b44b72b..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -43,7 +43,7 @@
                 {{ $t('All the photos') }}
               </inertia-link>
             </li>
-            <li class="relative mr-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"
@@ -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 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 74c53dfef..88ca55dee 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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 -->
@@ -83,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" :class="'me-2 h-5 w-5'" />
 
                   <span>{{ data.contact.name }}</span>
                 </div>
@@ -96,7 +91,7 @@
                 <div class="flex">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    class="mr-2 h-5 w-5"
+                    class="me-2 h-5 w-5"
                     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="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>
@@ -145,12 +140,12 @@
                       @click="displayContactNameField" />
                     <label
                       for="name"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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>
 
-                  <div v-if="showContactName" class="pl-6">
+                  <div v-if="showContactName" class="ps-6">
                     <text-input
                       :ref="'contactName'"
                       v-model="form.first_name"
@@ -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 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 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 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 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 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 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 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>
@@ -211,12 +206,12 @@
                       @click="displayContactSelector" />
                     <label
                       for="contact"
-                      class="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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>
 
-                  <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"
@@ -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 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 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 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>
@@ -312,7 +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="ml-2 block cursor-pointer text-sm text-gray-900 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>
@@ -321,13 +316,13 @@
 
           <!-- 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')" :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>
@@ -405,6 +400,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 +470,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 +504,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..85d0c4087 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <li class="me-2 inline">
               <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 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="mr-4"> 🕸️ </span>
+          <span class="me-4"> 🕸️ </span>
           {{ $t('The contact is archived') }}
-          <span class="ml-4"> 🕷️ </span>
+          <span class="ms-4"> 🕷️ </span>
         </div>
 
         <div class="special-grid grid grid-cols-1 gap-6 sm:grid-cols-3">
@@ -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>
 
@@ -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="me-2 h-6 w-6" />
                 <ul>
-                  <li class="mr-2 inline">{{ $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 mr-2 inline">
+                    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="mr-2 flex-none">
+                <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="ml-3"
+            class="ms-3"
             :class="{ 'opacity-25': deleteContactForm.processing }"
             :disabled="deleteContactForm.processing"
             @click="destroy">
@@ -394,7 +394,7 @@ const destroyAvatar = () => {
           </JetSecondaryButton>
 
           <JetButton
-            class="ml-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 0e66e1b67..799a5b1b4 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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 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="'ml-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="'mr-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/Index.vue b/resources/js/Pages/Vault/Dashboard/Index.vue
index e27040a04..0d799b006 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 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="mr-2 h-4 w-4 fill-current">
+                    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-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-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"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="mr-2 h-4 w-4">
+                    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 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-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"
                     viewBox="0 0 24 24"
                     stroke-width="1.5"
                     stroke="currentColor"
-                    class="mr-2 h-4 w-4">
+                    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 bc809488b..8541dc4ed 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 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="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="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="mr-1 h-3 w-3"
+                  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="'mr-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 }}
@@ -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="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 d5c167e42..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="'mr-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 28bce27fe..8882a0ca9 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 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="mr-2 inline">
+      <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="'mr-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 50d8c3bf1..03a500a69 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -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="'mr-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>
 
@@ -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="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)">
@@ -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="'mr-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 b234aff8b..d4e117eab 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="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 mr-3 h-4 w-4 border-gray-300 text-sky-500 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="mr-2 inline-block h-4 w-4 rounded-full" :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="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="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="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="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="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="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>
@@ -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
@@ -197,8 +198,8 @@ const submit = () => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -206,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="mr-2 h-14 w-14" />
+      <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="mr-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 095d9b705..e949cfbe3 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="mr-3 text-xs text-gray-400">
+            <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="'mr-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 }}
@@ -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="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 08f1cb119..3755ca14d 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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 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="mr-3 text-gray-400">
+                <p class="me-3 text-gray-400">
                   {{ reminder.scheduled_at }}
                 </p>
-                <div class="mr-2 flex items-center">
+                <div class="me-2 flex items-center">
                   <avatar
                     :data="reminder.contact.avatar"
-                    :classes="'h-4 w-4 mr-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 43c04ce43..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="'mr-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 }}
@@ -51,7 +51,7 @@
 
                 <label
                   :for="currentTask.id"
-                  class="ml-2 flex cursor-pointer items-center text-gray-900 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="ml-2 flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5">
+                    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="mr-1 h-3 w-3"
+                      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 020b4599a..0b793e599 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="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-l-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-l-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-l-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>
@@ -49,7 +49,7 @@
             <!-- title + cta -->
             <div class="mb-6 flex items-center justify-between">
               <h3>
-                <span class="mr-1"> 📸 </span>
+                <span class="me-1"> 📸 </span>
                 {{ $t('All the files') }}
               </h3>
             </div>
@@ -65,15 +65,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="me-2 text-sm text-gray-400">
                     {{ file.created_at }}
                   </p>
 
                   <!-- file name -->
-                  <p class="mr-4 flex max-w-none 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="ml-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>
@@ -82,7 +82,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" :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>
@@ -91,7 +91,7 @@
 
                 <!-- right part -->
                 <ul class="text-sm">
-                  <li class="mr-4 inline">
+                  <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 eaa357435..e4a092572 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="me-2 inline">
               <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 me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -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="'mr-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 ba5fac196..30118492a 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="me-1"> 👥 </span>
           {{ $t('All groups in the vault') }}
         </h3>
 
@@ -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 f2a6bff3e..fb12d890d 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="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="mr-1 h-4 w-4">
+              class="me-1 h-4 w-4">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -97,14 +97,14 @@ const destroy = () => {
           </div>
 
           <!-- type -->
-          <div class="mr-8 flex items-center">
+          <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="mr-1 h-4 w-4">
+              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="mr-4 inline">
+              <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 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 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,11 +142,11 @@ 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>
 
-              <span v-if="contact.age" class="ml-1 text-xs text-gray-500">({{ 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="ml-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 875b9c4b0..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-l border-r 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') }}
@@ -74,11 +73,11 @@
                   <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"
-                    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>
@@ -179,11 +178,6 @@ export default {
   grid-template-rows: auto 1fr auto;
 }
 
-.remaining-contact {
-  top: -1px;
-  left: -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..f9505d173 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -98,8 +98,8 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-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 ea77dde18..a1fdf0a66 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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="me-2 inline">
               <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 me-2 inline">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon-breadcrumb relative inline h-3 w-3"
@@ -112,8 +112,8 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-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 ba8eaa320..18a9f5166 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="me-1"> ✍️ </span>
             {{ $t('All the journals') }}
           </h3>
 
@@ -34,13 +34,13 @@ 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>
 
                 <div v-if="journal.last_updated" class="mb-2 flex items-center text-sm sm:mb-0">
-                  <span class="mr-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 595a3b5bc..5f4cfbcf5 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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 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 mr-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"
@@ -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="me-1"> 📊 </span>
             {{ $t('All journal metrics in :name', { name: data.journal.name }) }}
           </h3>
 
@@ -150,8 +150,8 @@ const destroy = (metric) => {
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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/Photo/Index.vue b/resources/js/Pages/Vault/Journal/Photo/Index.vue
index 7bd6d78c8..8d9b71d0c 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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 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="mr-2 h-4 w-4">
+                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 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-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"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-2 h-4 w-4">
+                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="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="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 6f734ae0d..cc559ad6c 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -195,7 +195,7 @@ const destroy = () => {
                 {{ data.journal.name }}
               </inertia-link>
             </li>
-            <li class="relative mr-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"
@@ -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="me-2 inline">
               <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 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="mr-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,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="me-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="me-2 h-4 w-4 text-green-700"
                   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 me-3">
                   <div class="dot"></div>
                   <div class="dot"></div>
                   <div class="dot"></div>
@@ -389,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"
@@ -425,7 +430,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="me-2 h-4 w-4"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -443,7 +448,7 @@ const destroy = () => {
               </li>
               <li class="mb-2 flex items-center">
                 <svg
-                  class="mr-2 h-4 w-4"
+                  class="me-2 h-4 w-4"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -463,7 +468,7 @@ const destroy = () => {
               </li>
               <li class="flex items-center">
                 <svg
-                  class="mr-2 h-4 w-4"
+                  class="me-2 h-4 w-4"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -507,7 +512,7 @@ const destroy = () => {
         </JetSecondaryButton>
 
         <JetDangerButton
-          class="ml-3"
+          class="ms-3"
           :class="{ 'opacity-25': processPhotoDeletion }"
           :disabled="processPhotoDeletion"
           @click="destroyPhoto(file)">
@@ -560,7 +565,6 @@ const destroy = () => {
   height: 10px;
   width: 10px;
   background-color: #88d772;
-  left: calc(15px * 4);
   position: absolute;
   margin: 0 auto;
   border-radius: 2px;
@@ -568,6 +572,14 @@ const destroy = () => {
   animation: saving-spinner-animation 2500ms linear infinite;
 }
 
+[dir='ltr'] .saving-spinner .dot {
+  left: calc(15px * 4);
+}
+
+[dir='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..9d50d41c2 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="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 mr-3 inline cursor-pointer text-sm text-blue-500 hover:underline">
+          class="mb-6 me-3 inline cursor-pointer text-sm text-blue-500 hover:underline">
           {{ $t('add a new metric') }}
         </li>
         <li
@@ -156,13 +156,13 @@ 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')" :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 0e881ac1d..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="'mr-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 3542bd960..11ce6bad5 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="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="mr-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 6a61d55e1..a68d16294 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -38,7 +38,7 @@ defineProps({
                 {{ data.journal.name }}
               </inertia-link>
             </li>
-            <li class="relative mr-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"
@@ -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="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="mr-1 h-4 w-4 text-gray-400">
+                  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,14 +99,14 @@ defineProps({
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke="currentColor"
-                  class="ml-1 h-4 w-4 text-gray-400">
+                  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>
               <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>
 
@@ -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="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>
@@ -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="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,7 +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 mr-2'" :displayName="true" />
+                <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
               </div>
             </div>
 
@@ -165,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-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-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
@@ -262,7 +262,9 @@ defineProps({
     width: 100%;
     z-index: -1;
   }
+}
 
+[dir='ltr'] .post {
   &:before {
     background: #fafafa;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@@ -280,26 +282,44 @@ defineProps({
   }
 }
 
-.dark .dark\:post {
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
-
+[dir='rtl'] .post {
   &:before {
-    background: #09090b;
-    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
-    left: -5px;
+    background: #fafafa;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    right: -5px;
     top: 4px;
     transform: rotate(-2.5deg);
   }
 
   &:after {
-    background: #171717;
-    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
-    right: -3px;
+    background: #f6f6f6;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+    left: -3px;
     top: 1px;
     transform: rotate(1.4deg);
   }
 }
 
+.dark .post {
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05) !important;
+
+  &:before {
+    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 !important;
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1) !important;
+    right: -3px !important;
+    top: 1px !important;
+    transform: rotate(1.4deg) !important;
+  }
+}
+
 .item-list {
   &:hover:first-child {
     border-top-left-radius: 8px;
diff --git a/resources/js/Pages/Vault/Journal/Post/Template.vue b/resources/js/Pages/Vault/Journal/Post/Template.vue
index 7136e7f83..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -38,7 +38,7 @@ defineProps({
                 {{ data.journal.name }}
               </inertia-link>
             </li>
-            <li class="relative mr-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"
diff --git a/resources/js/Pages/Vault/Journal/Show.vue b/resources/js/Pages/Vault/Journal/Show.vue
index 2f9357fc5..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -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 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="mr-2 h-4 w-4">
+                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 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-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="mr-2 h-4 w-4">
+                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="mr-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="mr-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="mr-4 rounded-lg border border-gray-200 p-2 text-center leading-tight">
+                      <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="mr-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-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-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 fa9a08f8f..803b7cb5f 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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 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 mr-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"
@@ -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 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 mr-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"
@@ -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 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 mr-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"
@@ -139,8 +139,8 @@ const submit = () => {
 
           <!-- actions -->
           <div class="flex justify-between p-5">
-            <pretty-link :href="data.url.back" :text="$t('Cancel')" :classes="'mr-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 867319f06..7f1de2fc8 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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 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 mr-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"
@@ -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="me-1"> 🍕 </span>
 
             {{ $t('All the slices of life in :name', { name: data.journal.name }) }}
           </h3>
@@ -130,8 +130,8 @@ const submit = () => {
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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/Journal/Slices/Show.vue b/resources/js/Pages/Vault/Journal/Slices/Show.vue
index 88cbe7afa..3e9d766ce 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="me-2 inline text-gray-600 dark:text-gray-400">
               {{ $t('You are here:') }}
             </li>
-            <li class="mr-2 inline">
+            <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 mr-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"
@@ -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 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 mr-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"
@@ -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 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 mr-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"
@@ -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="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="mr-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="mr-0 h-4 pr-2">
+                class="me-0 h-4 pe-2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -224,7 +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 mr-2'" :displayName="true" />
+                  <contact-card :contact="contact" :avatarClasses="'h-5 w-5 rounded-full me-2'" :displayName="true" />
                 </li>
               </ul>
             </div>
@@ -262,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="mr-4 rounded-lg border border-gray-200 p-2 text-center leading-tight">
+                <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 04bb74b8f..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-2 inline">{{ data.city }}</li>
           </ul>
         </div>
       </div>
@@ -83,8 +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="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="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 fdf62239e..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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"
@@ -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="me-2 inline">{{ data.country }}</li>
           </ul>
         </div>
       </div>
@@ -83,8 +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="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="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 27394494b..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -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="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="mr-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 25a1d8f5d..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -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="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 mr-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 867709849..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="mr-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="mr-2 inline">
+            <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 mr-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"
@@ -65,12 +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 mr-2 font-mono text-sm font-bold">{{ 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="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="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 c02ba8cb2..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 mr-3 inline">
+          <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 mr-3 inline">
+          <div class="relative me-3 inline">
             <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 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 ea8b39be1..73b31bc5d 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="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,8 +32,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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="mr-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>
@@ -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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900 hover:dark:text-red-100"
               @click="destroy(type)">
               {{ $t('Delete') }}
             </li>
@@ -93,8 +93,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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/DefaultTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
index c4edfa48a..cefacac5f 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="me-1"> 📐 </span>
         {{ $t('Default template to display contacts') }}
       </h3>
     </div>
@@ -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 fd18f2d80..348715302 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="me-1"> 🗑 </span>
         {{ $t('Delete the vault') }}
       </h3>
     </div>
@@ -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">
@@ -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'"
+          :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 f40f57288..278ad1cb7 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="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="ml-2 inline-block cursor-pointer text-sm font-medium text-gray-700 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,8 +53,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -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="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="mr-4 inline cursor-pointer" @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="ml-2 inline-block cursor-pointer text-sm font-medium text-gray-700 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,8 +133,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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 855fd08ed..3d11db66c 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="me-1"> 👩‍🍼 </span>
         {{ $t('Life event types and categories') }}
       </h3>
       <pretty-button
@@ -232,8 +232,8 @@ const destroyLifeEventType = (lifeEventType) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -248,12 +248,12 @@ 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="mr-2 flex">
+                <div class="me-2 flex">
                   <svg
-                    class="handle mr-2 cursor-move"
+                    class="handle me-2 cursor-move"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -278,14 +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="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @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="ml-8">
+              <div class="ms-8">
                 <p class="mb-1 text-sm text-gray-500">{{ $t('Life event types:') }}</p>
 
                 <draggable
@@ -297,12 +297,12 @@ 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="mr-2 flex">
+                          <div class="me-2 flex">
                             <svg
-                              class="handle mr-2 cursor-move"
+                              class="handle me-2 cursor-move"
                               width="24"
                               height="24"
                               viewBox="0 0 24 24"
@@ -328,7 +328,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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                               @click="destroyLifeEventType(element)">
                               {{ $t('Delete') }}
                             </li>
@@ -359,12 +359,8 @@ const destroyLifeEventType = (lifeEventType) => {
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span :text="$t('Cancel')" :classes="'mr-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="'mr-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="'mr-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 9a457b2df..1a84278e9 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="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="ml-2 inline-block cursor-pointer text-sm font-medium text-gray-700 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,14 +167,14 @@ const updatePosition = (event) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
     <!-- 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,11 +200,11 @@ 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="mr-2 flex items-center">
+            <div class="me-2 flex items-center">
               <svg
-                class="handle mr-2 cursor-move"
+                class="handle me-2 cursor-move"
                 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="me-2 inline-block h-4 w-4 rounded-full" :class="element.hex_color" />
+              <span class="me-2">{{ element.label }}</span>
             </div>
 
             <!-- actions -->
@@ -232,7 +232,7 @@ 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="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                 {{ $t('Delete') }}
               </li>
             </ul>
@@ -275,7 +275,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="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>
@@ -283,8 +283,8 @@ const updatePosition = (event) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-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 2823c815d..0537fb251 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="me-1"> 🧑‍🏭 </span>
         {{ $t('Quick facts template') }}
       </h3>
       <pretty-button
@@ -139,8 +139,8 @@ const updatePosition = (event) => {
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -157,11 +157,11 @@ 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="mr-2 flex">
+            <div class="me-2 flex">
               <svg
-                class="handle mr-2 cursor-move"
+                class="handle me-2 cursor-move"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
@@ -186,7 +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="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
+              <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(element)">
                 {{ $t('Delete') }}
               </li>
             </ul>
@@ -213,8 +213,8 @@ const updatePosition = (event) => {
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-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/TabVisibility.vue b/resources/js/Pages/Vault/Settings/Partials/TabVisibility.vue
index 7bfed2123..72261aa27 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="me-1"> 🎟️ </span>
 
         {{ $t('Tabs visibility') }}
       </h3>
@@ -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"
@@ -65,11 +65,11 @@ 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: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="ms-3 dark:text-gray-300"> {{ $t('Show Calendar tab') }} </span>
           </label>
         </li>
         <li
@@ -79,11 +79,11 @@ 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: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="ms-3 dark:text-gray-300"> {{ $t('Show Journals tab') }} </span>
           </label>
         </li>
         <li
@@ -93,11 +93,11 @@ 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: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="ms-3 dark:text-gray-300"> {{ $t('Show Groups tab') }} </span>
           </label>
         </li>
         <li
@@ -107,11 +107,11 @@ 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: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="ms-3 dark:text-gray-300"> {{ $t('Show Companies tab') }} </span>
           </label>
         </li>
         <li
@@ -121,11 +121,11 @@ 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: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="ms-3 dark:text-gray-300"> {{ $t('Show Tasks tab') }} </span>
           </label>
         </li>
         <li
@@ -135,11 +135,11 @@ 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: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="ms-3 dark:text-gray-300"> {{ $t('Show Reports tab') }} </span>
           </label>
         </li>
         <li
@@ -149,11 +149,11 @@ 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: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="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 948618d95..7bff82093 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="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,8 +32,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -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="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="mr-4 inline cursor-pointer" @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,8 +90,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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 47bc480cb..8e2b13ff0 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="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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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,9 +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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-4 font-normal text-gray-500">
+              <span class="ms-4 font-normal text-gray-500">
                 {{ $t('Can view data, but can’t edit it.') }}
               </span>
             </label>
@@ -76,9 +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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-4 font-normal text-gray-500">
+              <span class="ms-4 font-normal text-gray-500">
                 {{ $t('Can edit data, but can’t manage the vault.') }}
               </span>
             </label>
@@ -93,9 +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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-4 font-normal text-gray-500">
+              <span class="ms-4 font-normal text-gray-500">
                 {{ $t('Can do everything, including adding or removing other users.') }}
               </span>
             </label>
@@ -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>
 
@@ -128,7 +128,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="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)">
@@ -156,7 +156,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="ms-4 font-normal text-gray-500">
                   {{ $t('Can view data, but can’t edit it.') }}
                 </span>
               </div>
@@ -172,9 +172,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="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Editor') }}
-                  <span class="ml-4 font-normal text-gray-500">
+                  <span class="ms-4 font-normal text-gray-500">
                     {{ $t('Can edit data, but can’t manage the vault.') }}
                   </span>
                 </label>
@@ -191,9 +191,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="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Manager') }}
-                  <span class="ml-4 font-normal text-gray-500">
+                  <span class="ms-4 font-normal text-gray-500">
                     {{ $t('Can do everything, including adding or removing other users.') }}
                   </span>
                 </label>
@@ -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/Pages/Webauthn/Partials/DeleteKeyModal.vue b/resources/js/Pages/Webauthn/Partials/DeleteKeyModal.vue
index 03b88439f..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="ml-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 92404163e..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="ml-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 e63a5f8dd..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="ml-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 d28f2c5f3..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="mr-2 text-teal-800 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="mr-2 text-indigo-800 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 b460dc192..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="ml-3 w-48">
+          <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="ml-3 text-sm">
+          <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 ml-2 text-indigo-400 hover:text-indigo-600" 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 b4cd22fb2..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="ml-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/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 f4d988f25..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">
@@ -5,7 +22,7 @@
       <template #content>
         <div class="flex">
           <!-- avatar -->
-          <div class="mr-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 +38,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-1 h-4 w-4 text-gray-400">
+                class="me-1 h-4 w-4 text-gray-400">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -40,7 +57,7 @@
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
-                class="mr-2 h-4 w-4 text-gray-400">
+                class="me-2 h-4 w-4 text-gray-400">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -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/ContactSelector.vue b/resources/js/Shared/Form/ContactSelector.vue
index 6c686d0e0..4e1143c21 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">
@@ -223,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',
@@ -312,20 +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 {
-  color: #d4d8dd;
-  background-color: #2f3031;
 }
 
-.icon-search {
-  left: 8px;
-  top: 13px;
+.dark .optional-badge {
+  color: #d4d8dd !important;
+  background-color: #2f3031 !important;
 }
 
 .item-list {
diff --git a/resources/js/Shared/Form/Dropdown.vue b/resources/js/Shared/Form/Dropdown.vue
index 17b1fae18..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">
@@ -14,9 +16,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>
 
@@ -83,12 +92,24 @@ 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,
       ];
     },
+    localData() {
+      return _.map(this.data, (value) => {
+        if (_.isObject(value)) {
+          return value;
+        } else {
+          return {
+            id: value,
+            name: value,
+          };
+        }
+      });
+    },
   },
 
   methods: {
@@ -109,24 +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;
-}
-
-.counter {
-  padding-right: 64px;
 }
 
-select {
-  padding-left: 8px;
-  padding-right: 20px;
-  background-position: right 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 4c7d2400b..8d625a915 100644
--- a/resources/js/Shared/Form/PrettyButton.vue
+++ b/resources/js/Shared/Form/PrettyButton.vue
@@ -1,12 +1,15 @@
 <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
       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 me-1 inline h-5 w-5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor">
@@ -17,7 +20,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 me-1 inline h-5 w-5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor">
@@ -28,7 +31,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 mx-1 inline h-5 w-5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
@@ -36,15 +39,15 @@
       <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 ml-1 mr-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">
@@ -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>
@@ -95,9 +84,9 @@ export default {
   background-color: #fcf27e;
 }
 
-.dark .dark\:save {
-  background-color: #d0c10d;
-  color: rgb(31 41 55); // text-gray-800
+.dark .save {
+  background-color: #d0c10d !important;
+  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 0bb1bcdce..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'"
@@ -25,7 +28,7 @@
     <!-- door icon -->
     <svg
       v-else-if="icon === 'exit'"
-      class="icon relative mr-1 inline h-5 w-5"
+      class="icon relative me-1 inline h-5 w-5"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
@@ -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/Form/TextArea.vue b/resources/js/Shared/Form/TextArea.vue
index 247db85bb..7707fdff1 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>
@@ -152,28 +154,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;
-  right: 10px;
   background-color: #e5eeff;
-  padding: 3px 4px;
-}
-
-.dark .dark\:optional-badge {
-  color: #d4d8dd;
-  background-color: #2f3031;
 }
-.dark .dark\:length {
-  background-color: #2d2f33;
-}
-
-.counter {
-  padding-right: 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 5e85321c0..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,28 +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;
-  right: 10px;
   background-color: #e5eeff;
-  padding: 3px 4px;
-}
-
-.dark .dark\:optional-badge {
-  color: #d4d8dd;
-  background-color: #2f3031;
 }
-.dark .dark\:length {
-  background-color: #2d2f33;
-}
-
-.counter {
-  padding-right: 64px;
+.dark .length {
+  background-color: #2d2f33 !important;
 }
 </style>
diff --git a/resources/js/Shared/Help.vue b/resources/js/Shared/Help.vue
index 30aa7916d..19866e163 100644
--- a/resources/js/Shared/Help.vue
+++ b/resources/js/Shared/Help.vue
@@ -9,7 +9,6 @@ const props = defineProps({
     type: String,
     default: '3px',
   },
-  classes: String,
 });
 
 const finalURL = computed(() => {
@@ -20,8 +19,8 @@ const finalURL = computed(() => {
 <template>
   <a
     v-if="$page.props.auth.user.help_shown"
-    :class="['relative inline cursor-pointer', classes]"
-    :href="finalURL"
+    :class="'relative inline cursor-pointer'"
+    :data-url="finalURL"
     :style="'top:' + top"
     target="_blank"
     lang="en"
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/Layout.vue b/resources/js/Shared/Layout.vue
index 42687ec36..cff9e88c9 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"
@@ -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,16 +50,16 @@
         <!-- icons -->
         <div class="flew-grow">
           <ul class="relative">
-            <li class="icon-dark-mode relative mr-4 inline">
+            <li class="relative top-[3px] me-4 inline">
               <label for="dark-mode-toggle" class="relative inline-flex cursor-pointer">
                 <input
                   id="dark-mode-toggle"
                   v-model="style.checked"
                   type="checkbox"
-                  class="peer sr-only"
+                  class="peer hidden"
                   @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 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="mr-4 inline">
+            <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 mr-1 inline-block h-4 w-4 cursor-pointer text-gray-600 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="mr-1 inline-block h-4 w-4 cursor-pointer text-gray-600 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">
@@ -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="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>
+              <li class="inline">
+                <inertia-link
+                  :href="layoutData.vault.url.contacts"
+                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Contact') }"
+                  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>
+              <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="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>
+              <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="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>
+              <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="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>
+              <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="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>
+              <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="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>
+              <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="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>
+              <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="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>
+              <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>
@@ -370,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');
@@ -397,18 +388,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-search {
-  left: 8px;
-  top: 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 e67a6a443..a1ea7e78f 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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>
 
@@ -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="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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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 mr-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 mr-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 mr-2'"
+              :input-class="'w-full me-2'"
               :required="false"
               :autocomplete="false"
               :maxlength="255"
@@ -358,15 +358,15 @@ 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="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="'mr-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>
 
@@ -398,8 +398,8 @@ 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">{{
+              <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>
@@ -407,7 +407,7 @@ const destroy = () => {
                 {{ $t('Edit') }}
               </li>
               <li
-                class="ml-4 inline cursor-pointer text-red-500 hover:text-red-900"
+                class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900"
                 @click="showDeleteAddressModal(address)">
                 {{ $t('Delete') }}
               </li>
@@ -442,7 +442,7 @@ const destroy = () => {
                   :label="$t('Address')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -457,7 +457,7 @@ const destroy = () => {
                   :label="$t('Apartment, suite, etc…')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -482,7 +482,7 @@ const destroy = () => {
                   :label="$t('Province')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -519,15 +519,15 @@ 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="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="'mr-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>
@@ -581,15 +581,15 @@ 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">{{
+              <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="ml-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(address)">
+              <li class="ms-4 inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(address)">
                 {{ $t('Delete') }}
               </li>
             </ul>
@@ -623,7 +623,7 @@ const destroy = () => {
                   :label="$t('Address')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -638,7 +638,7 @@ const destroy = () => {
                   :label="$t('Apartment, suite, etc…')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -663,7 +663,7 @@ const destroy = () => {
                   :label="$t('Province')"
                   :type="'text'"
                   :autofocus="true"
-                  :input-class="'w-full mr-2'"
+                  :input-class="'w-full me-2'"
                   :required="false"
                   :autocomplete="false"
                   :maxlength="255"
@@ -700,15 +700,15 @@ 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="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="'mr-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>
@@ -731,7 +731,7 @@ const destroy = () => {
         </JetSecondaryButton>
 
         <JetDangerButton
-          class="ml-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 a8241cdac..ee8627ff7 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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>
 
@@ -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"
@@ -52,11 +57,11 @@
           </div>
 
           <!-- audio or video -->
-          <div class="border-l border-gray-200 p-5 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="mr-6 flex items-center">
+              <div class="me-6 flex items-center">
                 <input
                   id="audio"
                   v-model="form.type"
@@ -66,7 +71,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="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Audio-only call') }}
                 </label>
               </div>
@@ -81,7 +86,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="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ $t('Video call') }}
                 </label>
               </div>
@@ -94,7 +99,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="me-6 flex items-center">
               <input
                 id="me"
                 v-model="form.who_initiated"
@@ -102,7 +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="ml-2 block cursor-pointer text-sm font-medium text-gray-700 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>
@@ -117,14 +122,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="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="mr-6 flex items-center">
+            <div class="me-6 flex items-center">
               <input
                 id="contact"
                 v-model="form.who_initiated"
@@ -134,7 +139,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="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>
@@ -149,7 +154,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="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>
@@ -197,7 +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="ml-2 block cursor-pointer font-medium text-gray-700 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>
@@ -208,7 +213,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="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>
@@ -216,7 +221,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="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>
@@ -232,8 +237,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -252,7 +257,7 @@
               <svg
                 v-if="!call.answered"
                 xmlns="http://www.w3.org/2000/svg"
-                class="mr-2 h-4 w-4 text-red-500"
+                class="me-2 h-4 w-4 text-red-500"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -267,7 +272,7 @@
               <svg
                 v-if="call.answered"
                 xmlns="http://www.w3.org/2000/svg"
-                class="mr-2 h-4 w-4 text-green-600"
+                class="me-2 h-4 w-4 text-green-600"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -279,17 +284,17 @@
               </svg>
             </div>
 
-            <span class="mr-2 text-sm text-gray-500">{{ 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="mr-2 rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800">
+              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="mr-2 rounded border border-neutral-200 px-2 py-1 text-xs font-semibold text-neutral-800">
+              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>
 
@@ -329,11 +334,11 @@
               </div>
 
               <!-- audio or video -->
-              <div class="border-l border-gray-200 p-5 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="mr-6 flex items-center">
+                  <div class="me-6 flex items-center">
                     <input
                       id="audio"
                       v-model="form.type"
@@ -343,7 +348,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="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('Audio-only call') }}
                     </label>
                   </div>
@@ -358,7 +363,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="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('Video call') }}
                     </label>
                   </div>
@@ -371,7 +376,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="me-6 flex items-center">
                   <input
                     id="me"
                     v-model="form.who_initiated"
@@ -381,7 +386,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="ms-2 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ $t('I called') }}
                   </label>
                 </div>
@@ -396,14 +401,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="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="mr-6 flex items-center">
+                <div class="me-6 flex items-center">
                   <input
                     id="contact"
                     v-model="form.who_initiated"
@@ -413,7 +418,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="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>
@@ -428,7 +433,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="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>
@@ -478,7 +483,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="ms-2 block cursor-pointer font-medium text-gray-700 dark:text-gray-300">
                   {{ emotion.name }}
                 </label>
               </div>
@@ -489,7 +494,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="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>
@@ -497,7 +502,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="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>
@@ -513,8 +518,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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 c173b0b4f..f54bb61f2 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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="'mr-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>
 
@@ -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="ms-2 text-xs text-gray-500">({{ info.label }})</span>
             </div>
 
             <!-- actions -->
             <ul class="text-sm">
               <li
-                class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+                class="me-4 inline cursor-pointer text-blue-500 hover:underline"
                 @click="showEditContactInformationModal(info)">
                 {{ $t('Edit') }}
               </li>
@@ -137,8 +137,8 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-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>
@@ -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..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="mr-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 c32997535..b685ae1a4 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
@@ -291,7 +292,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" :class="'me-2 h-5 w-5'" />
 
           <span>{{ props.data.contact.name }}</span>
         </div>
@@ -340,14 +341,14 @@ 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"
           :label="$t('Distance')"
           :type="'number'"
           :autofocus="true"
-          :input-class="'mr-2'"
+          :input-class="'me-2'"
           :required="false"
           :autocomplete="false"
           :help="$t('Enter a number from 0 to 100000. No decimals.')"
@@ -356,7 +357,7 @@ const store = () => {
           @esc-key-pressed="addDistanceFieldShown = false" />
 
         <ul>
-          <li class="mr-5 inline-block">
+          <li class="me-5 inline-block">
             <div class="flex items-center">
               <input
                 id="km"
@@ -365,7 +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="ml-1 block cursor-pointer text-sm font-medium text-gray-700 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>
@@ -380,7 +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="ml-1 block cursor-pointer text-sm font-medium text-gray-700 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>
@@ -393,7 +394,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 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>
@@ -402,7 +403,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 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>
@@ -411,20 +412,20 @@ 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 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="'mr-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 9f25f03b8..90ea643bc 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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>
 
@@ -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="me-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="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="mr-4 inline">
+              <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)">
@@ -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..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="mr-2 inline text-sm"> ❤️ </span>
+      <span class="me-2 inline text-sm"> ❤️ </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="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="ml-2 text-xs text-gray-400"
+          <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="mr-2 inline text-sm"> 👪 </span>
+      <span class="me-2 inline text-sm"> 👪 </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="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="ml-2 text-xs text-gray-400"
+          <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 ef02e6d06..50f6865f0 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="ml-4 border-l border-gray-200 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'" />
+              :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">
-            <p class="mr-2 text-gray-400">
+            <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="ml-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="ml-2 h-4 w-4"
+                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="ml-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="ml-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,10 +262,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-  left: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/Address.vue b/resources/js/Shared/Modules/FeedItems/Address.vue
index 364bda96e..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 mr-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">{{
@@ -71,10 +71,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-  left: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/ContactInformation.vue b/resources/js/Shared/Modules/FeedItems/ContactInformation.vue
index 49b48bf78..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 mr-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">{{
@@ -51,10 +51,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-  left: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/GenericAction.vue b/resources/js/Shared/Modules/FeedItems/GenericAction.vue
index 6413d5d29..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 mr-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">{{
@@ -36,10 +36,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-  left: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/Goal.vue b/resources/js/Shared/Modules/FeedItems/Goal.vue
index 4b45c91b1..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 mr-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">{{
@@ -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="me-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 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 a47dbc0c6..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 mr-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 mr-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 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 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>
@@ -54,10 +54,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-  left: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue b/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
index 02379c23a..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 mr-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 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="me-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="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="mr-1 h-4 w-4 text-gray-400">
+            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 mr-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 5dee18ca3..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 mr-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,16 +34,9 @@ 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 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>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.icon-avatar {
-  top: 3px;
-  left: -11px;
-}
-</style>
diff --git a/resources/js/Shared/Modules/FeedItems/Pet.vue b/resources/js/Shared/Modules/FeedItems/Pet.vue
index 004196e8a..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 mr-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">{{
@@ -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="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 mr-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 581afc59b..971ceb367 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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="'mr-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="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="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 mr-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="mr-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="mr-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="mr-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">
@@ -131,14 +127,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="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="mr-3 w-14 text-right text-sm text-gray-500">{{ $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 81f481b36..5c3e4fe8f 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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="'mr-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>
@@ -113,7 +113,7 @@
 
         <!-- actions -->
         <ul class="text-sm">
-          <li class="mr-4 inline cursor-pointer">
+          <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 b0445a59b..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="'mr-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 7adb465d6..c10b68c3f 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="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 mr-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 3116eff3e..d6a73a38a 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -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>
 
@@ -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="me-2 text-gray-500">{{ 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="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="mr-2 h-4 w-4 text-gray-400">
+                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="mr-2 h-4 w-4 text-gray-400">
+                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 ml-6 rounded-lg border-gray-200 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="mr-4 text-sm font-bold">{{ 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="mr-2 h-4 w-4 text-gray-400">
+                      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="mr-2 h-4 w-4 text-gray-400">
+                      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="mr-4 flex items-center">
+                  <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="mr-2 h-4 w-4 text-gray-500">
+                      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="mr-2 h-6 w-6 text-gray-500"
+                      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,15 +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="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="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 ml-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 8e70bb0ee..f1967b58d 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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>
 
@@ -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="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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="mr-5 inline-block">
+              <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="ml-3 block cursor-pointer text-sm font-medium text-gray-700 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="'ml-3 mb-5'"
+              :div-outer-class="'ms-3 mb-5'"
               :placeholder="$t('Choose a value')"
               :dropdown-class="'block'"
               :label="$t('Currency')" />
@@ -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"
@@ -138,7 +143,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 border-e border-gray-200 dark:border-gray-700'" />
 
             <contact-selector
               v-model="form.loanees"
@@ -168,17 +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="'mr-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>
 
       <!-- 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="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 mr-2'" :displayName="false" />
+              <contact-card :contact="loaner" :avatarClasses="'h-7 w-7 rounded-full me-2'" :displayName="false" />
             </div>
           </div>
 
@@ -193,7 +198,7 @@
           </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 me-2'" :displayName="false" />
           </div>
         </div>
 
@@ -203,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="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="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="ml-2"> • </span>
+                    <span class="ms-2"> • </span>
                   </span>
                   {{ loan.name }}
                 </span>
@@ -217,7 +222,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="me-2 text-sm text-gray-500">{{
                 loan.loaned_at_human_format
               }}</span>
             </div>
@@ -229,16 +234,16 @@
               <!-- settle -->
               <li
                 v-if="!loan.settled"
-                class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+                class="me-4 inline cursor-pointer text-blue-500 hover:underline"
                 @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="me-4 inline cursor-pointer text-blue-500 hover:underline" @click="toggle(loan)">
                 {{ $t('Revert') }}
               </li>
 
               <!-- edit -->
-              <li class="mr-4 inline cursor-pointer text-blue-500 hover:underline" @click="showEditLoanModal(loan)">
+              <li class="me-4 inline cursor-pointer text-blue-500 hover:underline" @click="showEditLoanModal(loan)">
                 {{ $t('Edit') }}
               </li>
 
@@ -259,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="mr-5 inline-block">
+                <li class="me-5 inline-block">
                   <div class="flex items-center">
                     <input
                       id="object"
@@ -270,13 +275,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="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="mr-5 inline-block">
+                <li class="me-5 inline-block">
                   <div class="flex items-center">
                     <input
                       id="monetary"
@@ -287,7 +292,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="ms-3 block cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ $t('The loan is monetary') }}
                     </label>
                   </div>
@@ -330,7 +335,7 @@
                 v-model="form.currency_id"
                 :data="localCurrencies"
                 :required="false"
-                :div-outer-class="'ml-3 mb-5'"
+                :div-outer-class="'ms-3 mb-5'"
                 :placeholder="$t('Choose a value')"
                 :dropdown-class="'block'"
                 :label="$t('Currency')" />
@@ -364,7 +369,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 border-e border-gray-200 dark:border-gray-700'" />
 
               <contact-selector
                 v-model="form.loanees"
@@ -394,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="'mr-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 d1fd53fcd..e7860584b 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 me-1">
           <svg
             class="icon-sidebar relative inline h-4 w-4"
             viewBox="0 0 24 24"
@@ -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 -->
@@ -78,7 +74,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="ms-2 block font-medium text-gray-700 dark:text-gray-300">
               {{ emotion.name }}
             </label>
           </div>
@@ -87,7 +83,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="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,8 +98,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -138,12 +134,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 me-3 inline">
                 {{ note.emotion.name }}
               </div>
 
               <!-- date -->
-              <div class="relative mr-3 inline">
+              <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 +156,9 @@
               </div>
 
               <!-- author -->
-              <div v-if="note.author" class="relative mr-3 inline">
+              <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 mr-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>
@@ -213,7 +209,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="ms-2 block font-medium text-gray-700 dark:text-gray-300">
                   {{ emotion.name }}
                 </label>
               </div>
@@ -221,8 +217,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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 caf8ba7ed..de25137b6 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 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"
@@ -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="'mr-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>
 
@@ -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="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="mr-4 inline" @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,8 +127,8 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-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>
@@ -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..b806634c7 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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>
 
@@ -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="me-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..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 mr-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="mr-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 mr-3 inline">
+            <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 809adc25a..b29de73bd 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="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 mr-1 inline h-4 w-4">
+          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="mr-2 h-4 w-4 cursor-pointer text-gray-400">
+          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="mr-2 h-4 w-4 cursor-pointer text-gray-400">
+          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="mr-2 inline">
+          <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="mr-1 h-4 w-4 flex-none text-green-600">
+                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="'mr-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>
-        <li v-if="!createQuickFactModalShown" class="ml-2 mt-1">
+        <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,8 +269,8 @@ const destroy = (quickFact) => {
         </div>
 
         <div class="flex justify-between p-5">
-          <pretty-span :text="$t('Cancel')" :classes="'mr-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 461c2f316..d7bb853e9 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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 -->
@@ -44,8 +40,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="mr-2 flex items-center">
-                <avatar :data="relationshipType.contact.avatar" :classes="'mr-2 h-5 w-5'" />
+              <div class="me-2 flex items-center">
+                <avatar :data="relationshipType.contact.avatar" :class="'me-2 h-5 w-5'" />
 
                 <!-- name -->
                 <inertia-link
@@ -57,13 +53,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="ms-2 text-xs text-gray-400"
                   >({{ relationshipType.contact.age }})</span
                 >
               </div>
 
               <!-- relationship type -->
-              <span class="mr-2 text-gray-400">{{ 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 6f6187618..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="'mr-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 6bcead4fa..09944be5a 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 me-1">
           <svg
             class="icon-sidebar relative inline h-4 w-4"
             viewBox="0 0 24 24"
@@ -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>
 
@@ -66,12 +66,17 @@
               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="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 ml-6">
-            <DatePicker v-model.string="form.date" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+          <div v-if="form.choice === 'full_date'" class="mb-4 ms-6">
+            <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"
@@ -92,21 +97,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="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="ml-6 mt-2 flex">
-            <dropdown
+          <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 mr-2'"
+              :div-outer-class="'mb-5 me-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 +129,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="ms-4 mt-4">
             <div class="mb-2 flex items-center">
               <input
                 id="one_time"
@@ -135,7 +140,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="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>
@@ -150,30 +155,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="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>
 
-                <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="me-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="me-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>
@@ -183,8 +184,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -198,8 +199,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="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>
@@ -221,7 +222,7 @@
             <!-- actions -->
             <ul class="text-sm">
               <li
-                class="mr-4 inline cursor-pointer text-blue-500 hover:underline"
+                class="me-4 inline cursor-pointer text-blue-500 hover:underline"
                 @click="showEditReminderModal(reminder)">
                 {{ $t('Edit') }}
               </li>
@@ -268,12 +269,17 @@
                     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="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 ml-6">
-                  <DatePicker v-model.string="form.date" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+                <div v-if="form.choice === 'full_date'" class="mb-4 ms-6">
+                  <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"
@@ -294,21 +300,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="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="ml-6 mt-2 flex">
-                  <dropdown
+                <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="'mr-2'"
+                    :div-outer-class="'me-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"
@@ -325,7 +331,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="ms-4 mt-4">
                   <div class="mb-2 flex items-center">
                     <input
                       id="one_time"
@@ -336,7 +342,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="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>
@@ -351,30 +357,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="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>
 
-                      <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="me-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="me-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>
@@ -384,8 +386,8 @@
             </div>
 
             <div class="flex justify-between p-5">
-              <pretty-span :text="$t('Cancel')" :classes="'mr-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>
@@ -564,10 +566,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..02bc6574e 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 me-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="icon-sidebar relative inline h-4 w-4"
@@ -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>
 
@@ -58,14 +58,19 @@
             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="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="ml-4 mt-4">
-          <DatePicker v-model.string="form.due_at" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+        <div v-if="form.due_at_checked" class="ms-4 mt-4">
+          <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"
@@ -77,8 +82,8 @@
       </div>
 
       <div class="flex justify-between p-5">
-        <pretty-span :text="$t('Cancel')" :classes="'mr-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>
 
@@ -99,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="ml-2 flex cursor-pointer text-gray-900">
+            <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="ml-2 flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5 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="mr-1 h-3 w-3"
+                  class="me-1 h-3 w-3"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -154,14 +159,19 @@
                 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="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="ml-4 mt-4">
-              <DatePicker v-model.string="form.due_at" class="inline-block h-full" :masks="masks" :is-dark="isDark()">
+            <div v-if="form.due_at_checked" class="ms-4 mt-4">
+              <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"
@@ -173,8 +183,8 @@
           </div>
 
           <div class="flex justify-between p-5">
-            <pretty-span :text="$t('Cancel')" :classes="'mr-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>
@@ -205,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="ml-2 flex cursor-pointer items-center text-gray-900">
+              <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="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="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="mr-1 h-3 w-3"
+                    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 d3d459ebf..88d1c2e33 100644
--- a/resources/js/Shared/Toaster.vue
+++ b/resources/js/Shared/Toaster.vue
@@ -1,93 +1,54 @@
-<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;
-
-    emitter.on('flash', (data) => self.show(data));
-  },
+onMounted(() => {
+  if (props.message) {
+    show(props);
+  }
 
-  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', 'end-7'] : ['opacity-0', 'translate-x-full', 'end-0'],
+    ]">
+    <span class="me-1"> 👋 </span>
+    {{ messageText }}
+  </div>
+</template>