diff --git a/app/Domains/Contact/ManageRelationships/Web/Controllers/ContactRelationshipsController.php b/app/Domains/Contact/ManageRelationships/Web/Controllers/ContactRelationshipsController.php
index c68ad656f55..e93a3b48046 100644
--- a/app/Domains/Contact/ManageRelationships/Web/Controllers/ContactRelationshipsController.php
+++ b/app/Domains/Contact/ManageRelationships/Web/Controllers/ContactRelationshipsController.php
@@ -45,7 +45,7 @@ public function store(Request $request, string $vaultId, string $contactId)
 
         // first, let's create a contact if there is no contact selected
         $otherContactId = 0;
-        if ($request->input('choice') != 'contact') {
+        if ($request->input('choice') !== 'contact') {
             $otherContact = (new CreateContact())->execute([
                 'account_id' => Auth::user()->account_id,
                 'author_id' => Auth::id(),
@@ -61,9 +61,7 @@ public function store(Request $request, string $vaultId, string $contactId)
                 'template_id' => null,
             ]);
             $otherContactId = $otherContact->id;
-        }
-
-        if ($request->input('choice') == 'contact') {
+        } else {
             $otherContactId = collect($request->input('other_contact_id'))->pluck('id')->first();
         }
 
@@ -72,8 +70,8 @@ public function store(Request $request, string $vaultId, string $contactId)
             'author_id' => Auth::id(),
             'vault_id' => $vaultId,
             'relationship_type_id' => $request->input('relationship_type_id'),
-            'contact_id' => $request->input('base_contact_id') == $contactId ? $contactId : $otherContactId,
-            'other_contact_id' => $request->input('base_contact_id') == $contactId ? $otherContactId : $contactId,
+            'contact_id' => $request->input('base_contact_id') === $contactId ? $contactId : $otherContactId,
+            'other_contact_id' => $request->input('base_contact_id') === $contactId ? $otherContactId : $contactId,
         ]);
 
         return response()->json([
diff --git a/app/Domains/Settings/ManageCallReasons/Web/ViewHelpers/PersonalizeCallReasonsIndexViewHelper.php b/app/Domains/Settings/ManageCallReasons/Web/ViewHelpers/PersonalizeCallReasonsIndexViewHelper.php
index f33df5d7bed..4d529c1188a 100644
--- a/app/Domains/Settings/ManageCallReasons/Web/ViewHelpers/PersonalizeCallReasonsIndexViewHelper.php
+++ b/app/Domains/Settings/ManageCallReasons/Web/ViewHelpers/PersonalizeCallReasonsIndexViewHelper.php
@@ -31,9 +31,7 @@ public static function dtoReasonType(CallReasonType $type): array
         return [
             'id' => $type->id,
             'label' => $type->label,
-            'reasons' => $type->callReasons->map(function ($reason) use ($type) {
-                return self::dtoReason($type, $reason);
-            }),
+            'reasons' => $type->callReasons->map(fn ($reason) => self::dtoReason($type, $reason)),
             'url' => [
                 'store' => route('settings.personalize.call_reasons.store', [
                     'callReasonType' => $type->id,
diff --git a/app/Models/CallReason.php b/app/Models/CallReason.php
index 8a95240db21..3ddbe285d00 100644
--- a/app/Models/CallReason.php
+++ b/app/Models/CallReason.php
@@ -42,8 +42,8 @@ public function callReasonType(): BelongsTo
     protected function label(): Attribute
     {
         return Attribute::make(
-            get: function ($value, $attributes) {
-                if (! $value) {
+            get: function (?string $value, array $attributes) {
+                if ($value === null) {
                     return __($attributes['label_translation_key']);
                 }
 
diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue
index 2b05b0d3a0b..7ecc9fe4a5b 100644
--- a/resources/js/Components/DropdownLink.vue
+++ b/resources/js/Components/DropdownLink.vue
@@ -10,14 +10,14 @@ defineProps({
 <template>
   <div>
     <button
-      v-if="as == 'button'"
+      v-if="as === 'button'"
       type="submit"
       class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 hover:dark:bg-gray-900">
       <slot />
     </button>
 
     <a
-      v-else-if="as == 'a'"
+      v-else-if="as === 'a'"
       :href="href"
       class="block px-4 py-2 text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 hover:dark:bg-gray-900">
       <slot />
diff --git a/resources/js/Components/Jetstream/Banner.vue b/resources/js/Components/Jetstream/Banner.vue
index 15022254c18..054af032139 100644
--- a/resources/js/Components/Jetstream/Banner.vue
+++ b/resources/js/Components/Jetstream/Banner.vue
@@ -13,15 +13,15 @@ watch(message, async () => {
 
 <template>
   <div>
-    <div v-if="show && message" :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger' }">
+    <div v-if="show && message" :class="{ 'bg-indigo-500': style === 'success', 'bg-red-700': style === 'danger' }">
       <div class="mx-auto max-w-screen-xl px-3 py-2 sm:px-6 lg:px-8">
         <div class="flex flex-wrap items-center justify-between">
           <div class="flex w-0 min-w-0 flex-1 items-center">
             <span
               class="flex rounded-lg p-2"
-              :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger' }">
+              :class="{ 'bg-indigo-600': style === 'success', 'bg-red-600': style === 'danger' }">
               <svg
-                v-if="style == 'success'"
+                v-if="style === 'success'"
                 class="h-5 w-5 text-white"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -35,7 +35,7 @@ watch(message, async () => {
               </svg>
 
               <svg
-                v-if="style == 'danger'"
+                v-if="style === 'danger'"
                 class="h-5 w-5 text-white"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -59,8 +59,8 @@ watch(message, async () => {
               type="button"
               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',
+                'hover:bg-indigo-600 focus:bg-indigo-600': style === 'success',
+                'hover:bg-red-600 focus:bg-red-600': style === 'danger',
               }"
               :aria-label="$t('Dismiss')"
               @click.prevent="show = false">
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index 678075b894e..4e1d42af8a1 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -17,7 +17,7 @@ const classes = computed(() => {
 
 <template>
   <div>
-    <button v-if="as == 'button'" :class="classes" class="w-full text-left">
+    <button v-if="as === 'button'" :class="classes" class="w-full text-left">
       <slot />
     </button>
 
diff --git a/resources/js/Pages/Settings/Notifications/Logs/Index.vue b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
index ae225e263a7..f150a475623 100644
--- a/resources/js/Pages/Settings/Notifications/Logs/Index.vue
+++ b/resources/js/Pages/Settings/Notifications/Logs/Index.vue
@@ -105,7 +105,7 @@
 
         <!-- blank state -->
         <div
-          v-if="data.notifications.length == 0"
+          v-if="data.notifications.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{ $t('You haven’t received a notification in this channel yet.') }}
diff --git a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
index 07fe7acdd65..3982c5e808e 100644
--- a/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
+++ b/resources/js/Pages/Settings/Notifications/Partials/Emails.vue
@@ -137,14 +137,14 @@
 
           <!-- link to send a test email, if not already sent -->
           <li
-            v-if="testEmailSentId != email.id"
+            v-if="testEmailSentId !== email.id"
             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="me-4 inline">
+          <li v-if="testEmailSentId === email.id" class="me-4 inline">
             {{ $t('Test email sent!') }}
           </li>
 
diff --git a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
index a21835cbe17..aec6252ce5b 100644
--- a/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue
@@ -96,7 +96,7 @@
             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">
             <!-- detail of the address type -->
             <div
-              v-if="renameAddressTypeModalShownId != addressType.id"
+              v-if="renameAddressTypeModalShownId !== addressType.id"
               class="flex items-center justify-between px-5 py-2">
               <span class="text-base">{{ addressType.name }}</span>
 
@@ -113,14 +113,14 @@
 
             <!-- rename a addressType modal -->
             <form
-              v-if="renameAddressTypeModalShownId == addressType.id"
+              v-if="renameAddressTypeModalShownId === addressType.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"
               @submit.prevent="update(addressType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + addressType.id"
+                  ref="rename"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"
@@ -142,7 +142,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localAddressTypes.length == 0"
+          v-if="localAddressTypes.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">{{ $t('Address types let you classify contact addresses.') }}</p>
         </div>
@@ -201,6 +201,7 @@ export default {
     showAddressTypeModal() {
       this.form.name = '';
       this.createAddressTypeModalShown = true;
+      this.renameAddressTypeModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newAddressType.focus();
@@ -210,9 +211,10 @@ export default {
     updateAdressTypeModal(addressType) {
       this.form.name = addressType.name;
       this.renameAddressTypeModalShownId = addressType.id;
+      this.createAddressTypeModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${addressType.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 
diff --git a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
index 42721a1cfb3..46c4c9da371 100644
--- a/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/CallReasons/Index.vue
@@ -113,7 +113,7 @@
           <li v-for="callReasonType in localCallReasonTypes" :key="callReasonType.id">
             <!-- detail of the call reason type -->
             <div
-              v-if="renameCallReasonTypeModalShownId != callReasonType.id"
+              v-if="renameCallReasonTypeModalShownId !== callReasonType.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">
               <span class="text-base font-semibold">{{ callReasonType.label }}</span>
 
@@ -132,14 +132,14 @@
 
             <!-- rename a call reason type modal -->
             <form
-              v-if="renameCallReasonTypeModalShownId == callReasonType.id"
+              v-if="renameCallReasonTypeModalShownId === callReasonType.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"
               @submit.prevent="updateCallReasonType(callReasonType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + callReasonType.id"
+                  ref="renameCallReasonType"
                   v-model="form.callReasonTypeName"
                   :label="$t('Name')"
                   :type="'text'"
@@ -165,8 +165,9 @@
               v-for="reason in callReasonType.reasons"
               :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">
+              {{ reason }}
               <!-- detail of the relationship type -->
-              <div v-if="renameReasonModalId != reason.id" class="flex items-center justify-between px-5 py-2 ps-6">
+              <div v-if="renameReasonModalId !== reason.id" class="flex items-center justify-between px-5 py-2 ps-6">
                 <span>{{ reason.label }}</span>
 
                 <!-- actions -->
@@ -184,14 +185,14 @@
 
               <!-- rename the reason modal -->
               <form
-                v-if="renameReasonModalId == reason.id"
+                v-else
                 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"
                 @submit.prevent="updateReason(callReasonType, reason)">
                 <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                   <errors :errors="form.errors" />
 
                   <text-input
-                    :ref="'rename' + reason.id"
+                    ref="rename"
                     v-model="form.label"
                     :label="$t('Name')"
                     :type="'text'"
@@ -214,7 +215,7 @@
 
             <!-- create a new reason -->
             <div
-              v-if="createReasonModalId != callReasonType.id"
+              v-if="createReasonModalId !== callReasonType.id"
               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"
@@ -225,7 +226,7 @@
 
             <!-- create a new resaon -->
             <form
-              v-if="createReasonModalId == callReasonType.id"
+              v-if="createReasonModalId === callReasonType.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"
               @submit.prevent="storeReason(callReasonType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
@@ -254,7 +255,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localCallReasonTypes.length == 0"
+          v-if="localCallReasonTypes.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{ $t('Call reasons let you indicate the reason of calls you make to your contacts.') }}
@@ -318,6 +319,7 @@ export default {
     showCallReasonTypeModal() {
       this.form.callReasonTypeName = '';
       this.createCallReasonTypeModalShown = true;
+      this.renameCallReasonTypeModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newCallReasonType.focus();
@@ -327,9 +329,10 @@ export default {
     renameCallReasonTypeModal(callReasonType) {
       this.form.callReasonTypeName = callReasonType.label;
       this.renameCallReasonTypeModalShownId = callReasonType.id;
+      this.createCallReasonTypeModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${callReasonType.id}`].focus();
+        this.$refs.renameCallReasonType[0].focus();
       });
     },
 
@@ -338,7 +341,7 @@ export default {
       this.form.label = '';
 
       this.$nextTick(() => {
-        this.$refs.newReason.focus();
+        this.$refs.newReason[0].focus();
       });
     },
 
@@ -347,7 +350,7 @@ export default {
       this.renameReasonModalId = reason.id;
 
       this.$nextTick(() => {
-        this.$refs[`rename${reason.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 
diff --git a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
index 4e5e3156120..0cfb4e982eb 100644
--- a/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue
@@ -114,7 +114,7 @@
             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">
             <!-- detail of the contact information type -->
             <div
-              v-if="renameContactInformationTypeModalShownId != contactInformationType.id"
+              v-if="renameContactInformationTypeModalShownId !== contactInformationType.id"
               class="flex items-center justify-between px-5 py-2">
               <div>
                 <span class="text-base">{{ contactInformationType.name }}</span>
@@ -145,14 +145,14 @@
 
             <!-- rename a contactInformationType modal -->
             <form
-              v-if="renameContactInformationTypeModalShownId == contactInformationType.id"
+              v-if="renameContactInformationTypeModalShownId === contactInformationType.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"
               @submit.prevent="update(contactInformationType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + contactInformationType.id"
+                  ref="rename"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"
@@ -189,7 +189,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localContactInformationTypes.length == 0"
+          v-if="localContactInformationTypes.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{
@@ -256,6 +256,7 @@ export default {
       this.form.name = '';
       this.form.protocol = '';
       this.createContactInformationTypeModalShown = true;
+      this.renameContactInformationTypeModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newContactInformationType.focus();
@@ -266,9 +267,10 @@ export default {
       this.form.name = contactInformationType.name;
       this.form.protocol = contactInformationType.protocol;
       this.renameContactInformationTypeModalShownId = contactInformationType.id;
+      this.createContactInformationTypeModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${contactInformationType.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 
diff --git a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
index de73a77552c..89cab164e93 100644
--- a/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Currencies/Index.vue
@@ -124,7 +124,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localCurrencies.length == 0"
+          v-if="localCurrencies.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">{{ $t('There is no currencies in this account.') }}</p>
         </div>
diff --git a/resources/js/Pages/Settings/Personalize/Genders/Index.vue b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
index 6ddce2da086..b8e70c8df1f 100644
--- a/resources/js/Pages/Settings/Personalize/Genders/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Genders/Index.vue
@@ -95,7 +95,7 @@
             :key="gender.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">
             <!-- detail of the gender -->
-            <div v-if="renameGenderModalShownId != gender.id" class="flex items-center justify-between px-5 py-2">
+            <div v-if="renameGenderModalShownId !== gender.id" class="flex items-center justify-between px-5 py-2">
               <span class="text-base">{{ gender.name }}</span>
 
               <!-- actions -->
@@ -111,14 +111,14 @@
 
             <!-- rename a gender modal -->
             <form
-              v-if="renameGenderModalShownId == gender.id"
+              v-if="renameGenderModalShownId === gender.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"
               @submit.prevent="update(gender)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + gender.id"
+                  ref="rename"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"
@@ -140,7 +140,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localGenders.length == 0"
+          v-if="localGenders.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">{{ $t('Add genders to associate them to contacts.') }}</p>
         </div>
@@ -199,6 +199,7 @@ export default {
     showGenderModal() {
       this.form.name = '';
       this.createGenderModalShown = true;
+      this.renameGenderModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newGender.focus();
@@ -208,9 +209,10 @@ export default {
     updateGenderModal(gender) {
       this.form.name = gender.name;
       this.renameGenderModalShownId = gender.id;
+      this.createGenderModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${gender.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 
diff --git a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
index bf6a3817879..c99daa5d236 100644
--- a/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftOccasions/Index.vue
@@ -98,7 +98,7 @@
             @change="updatePosition">
             <template #item="{ element }">
               <div
-                v-if="editGiftOccasionId != element.id"
+                v-if="editGiftOccasionId !== element.id"
                 class="item-list flex items-center justify-between border-b border-gray-200 py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- icon to move position -->
                 <div class="me-2 flex">
@@ -142,7 +142,7 @@
                   <errors :errors="form.errors" />
 
                   <text-input
-                    :ref="'rename' + element.id"
+                    ref="rename"
                     v-model="form.label"
                     :label="$t('Name')"
                     :type="'text'"
@@ -165,7 +165,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localGiftOccasions.length == 0"
+          v-if="localGiftOccasions.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">{{ $t('Gift occasions let you categorize all your gifts.') }}</p>
         </div>
@@ -228,15 +228,17 @@ export default {
       this.form.label = '';
       this.form.position = '';
       this.createGiftOccasionModalShown = true;
+      this.editGiftOccasionId = 0;
 
-      this.$nextTick(() => {
-        this.$refs.newGiftOccasion.focus();
-      });
+      this.$nextTick().then(() => this.$refs.newGiftOccasion.focus());
     },
 
     renameGiftOccasionModal(giftOccasion) {
       this.form.label = giftOccasion.label;
       this.editGiftOccasionId = giftOccasion.id;
+      this.createGiftOccasionModalShown = false;
+
+      this.$nextTick().then(() => this.$refs.rename.focus());
     },
 
     submit() {
diff --git a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
index 561fc0b5b24..f820a0b6881 100644
--- a/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GiftStates/Index.vue
@@ -95,7 +95,7 @@
             handle=".handle"
             @change="updatePosition">
             <template #item="{ element }">
-              <div v-if="editGiftStateId != element.id" class="list-icon">
+              <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 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 -->
@@ -143,7 +143,7 @@
                   <errors :errors="form.errors" />
 
                   <text-input
-                    :ref="'rename' + element.id"
+                    ref="rename"
                     v-model="form.label"
                     :label="$t('Name')"
                     :type="'text'"
@@ -166,7 +166,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localGiftStates.length == 0"
+          v-if="localGiftStates.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">{{ $t('Gift states let you define the various states for your gifts.') }}</p>
         </div>
@@ -229,6 +229,7 @@ export default {
       this.form.label = '';
       this.form.position = '';
       this.createGiftStateModalShown = true;
+      this.editGiftStateId = 0;
 
       this.$nextTick(() => {
         this.$refs.newGiftState.focus();
@@ -238,6 +239,9 @@ export default {
     renameGiftStateModal(giftState) {
       this.form.label = giftState.label;
       this.editGiftStateId = giftState.id;
+      this.createGiftStateModalShown = false;
+
+      this.$nextTick().then(() => this.$refs.rename.focus());
     },
 
     submit() {
diff --git a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
index e026f33034e..efdcd30c418 100644
--- a/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/GroupTypes/Index.vue
@@ -121,7 +121,7 @@
             handle=".handle"
             @change="updatePosition">
             <template #item="{ element }">
-              <div v-if="editGroupTypeId != element.id" class="">
+              <div v-if="editGroupTypeId !== element.id" class="">
                 <div
                   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">
@@ -170,7 +170,7 @@
                       handle=".handle"
                       @change="updatePosition">
                       <template #item="{ element, id }">
-                        <div v-if="editRoleId != element.id" class="">
+                        <div v-if="editRoleId !== element.id" class="">
                           <div
                             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">
@@ -221,7 +221,7 @@
                             <errors :errors="form.errors" />
 
                             <text-input
-                              ref="newRole"
+                              ref="renameRole"
                               v-model="form.label"
                               :label="$t('Name')"
                               :type="'text'"
@@ -230,11 +230,20 @@
                               :required="true"
                               :autocomplete="false"
                               :maxlength="255"
-                              @esc-key-pressed="roleGroupTypeId = 0" />
+                              @esc-key-pressed="
+                                editRoleId = 0;
+                                editGroupTypeId = 0;
+                              " />
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="roleGroupTypeId = 0" />
+                            <pretty-span
+                              :text="$t('Cancel')"
+                              :class="'me-3'"
+                              @click="
+                                editRoleId = 0;
+                                editGroupTypeId = 0;
+                              " />
                             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                           </div>
                         </form>
@@ -244,7 +253,7 @@
                     <!-- add a role -->
                     <span
                       v-if="
-                        element.group_type_roles.length != 0 && !createRoleModalShown && roleGroupTypeId != element.id
+                        element.group_type_roles.length !== 0 && !createRoleModalShown && roleGroupTypeId !== element.id
                       "
                       class="inline cursor-pointer text-sm text-blue-500 hover:underline"
                       @click="showCreateRoleModal(element)"
@@ -253,7 +262,7 @@
 
                     <!-- form: create new role -->
                     <form
-                      v-if="createRoleModalShown && roleGroupTypeId == element.id"
+                      v-if="createRoleModalShown && roleGroupTypeId === element.id"
                       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
                       @submit.prevent="submitRole(element)">
                       <div class="border-b border-gray-200 p-5 dark:border-gray-700">
@@ -269,11 +278,20 @@
                           :required="true"
                           :autocomplete="false"
                           :maxlength="255"
-                          @esc-key-pressed="createRoleModalShown = false" />
+                          @esc-key-pressed="
+                            createRoleModalShown = false;
+                            roleGroupTypeId = 0;
+                          " />
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="createRoleModalShown = false" />
+                        <pretty-span
+                          :text="$t('Cancel')"
+                          :class="'me-3'"
+                          @click="
+                            createRoleModalShown = false;
+                            roleGroupTypeId = 0;
+                          " />
                         <pretty-button :text="$t('Save')" :state="loadingState" :icon="'plus'" :class="'save'" />
                       </div>
                     </form>
@@ -281,7 +299,7 @@
                     <!-- blank state -->
                     <div
                       v-if="
-                        element.group_type_roles.length == 0 && !createRoleModalShown && roleGroupTypeId != element.id
+                        element.group_type_roles.length === 0 && !createRoleModalShown && roleGroupTypeId !== element.id
                       "
                       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
                       <p class="p-5 text-center">
@@ -305,7 +323,7 @@
                   <errors :errors="form.errors" />
 
                   <text-input
-                    :ref="'rename' + element.id"
+                    ref="renameGroupType"
                     v-model="form.label"
                     :label="$t('Name')"
                     :type="'text'"
@@ -328,7 +346,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localGroupTypes.length == 0"
+          v-if="localGroupTypes.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">{{ $t('Group types let you group people together.') }}</p>
         </div>
@@ -394,6 +412,10 @@ export default {
       this.form.label = '';
       this.form.position = '';
       this.createGroupTypeModalShown = true;
+      this.createRoleModalShown = false;
+      this.roleGroupTypeId = 0;
+      this.editGroupTypeId = 0;
+      this.editRoleId = 0;
 
       this.$nextTick(() => {
         this.$refs.newGroupType.focus();
@@ -405,6 +427,9 @@ export default {
       this.form.position = '';
       this.createRoleModalShown = true;
       this.roleGroupTypeId = groupType.id;
+      this.editGroupTypeId = 0;
+      this.editRoleId = 0;
+      this.createGroupTypeModalShown = false;
 
       this.$nextTick(() => {
         this.$refs.newRole.focus();
@@ -414,12 +439,23 @@ export default {
     renameGroupTypeModal(groupType) {
       this.form.label = groupType.label;
       this.editGroupTypeId = groupType.id;
+      this.roleGroupTypeId = 0;
+      this.editRoleId = 0;
+      this.createRoleModalShown = false;
+      this.createGroupTypeModalShown = false;
+
+      this.$nextTick().then(() => this.$refs.renameGroupType.focus());
     },
 
-    renameRoleModal(groupType, role) {
+    renameRoleModal(groupTypeId, role) {
       this.form.label = role.label;
-      this.editGroupTypeId = groupType;
+      this.editGroupTypeId = groupTypeId;
       this.editRoleId = role.id;
+      this.roleGroupTypeId = 0;
+      this.createRoleModalShown = false;
+      this.createGroupTypeModalShown = false;
+
+      this.$nextTick().then(() => this.$refs.renameRole.focus());
     },
 
     submit() {
diff --git a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
index fb4b4521d4a..cc5f0aede32 100644
--- a/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PetCategories/Index.vue
@@ -96,7 +96,7 @@
             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">
             <!-- detail of the pet category -->
             <div
-              v-if="renamePetCategoryModalShownId != petCategory.id"
+              v-if="renamePetCategoryModalShownId !== petCategory.id"
               class="flex items-center justify-between px-5 py-2">
               <span class="text-base">{{ petCategory.name }}</span>
 
@@ -113,14 +113,14 @@
 
             <!-- rename a petCategory modal -->
             <form
-              v-if="renamePetCategoryModalShownId == petCategory.id"
+              v-else
               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"
               @submit.prevent="update(petCategory)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + petCategory.id"
+                  ref="rename"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"
@@ -142,7 +142,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localPetCategories.length == 0"
+          v-if="localPetCategories.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{ $t('Pet categories let you add types of pets that contacts can add to their profile.') }}
@@ -203,6 +203,7 @@ export default {
     showPetCategoryModal() {
       this.form.name = '';
       this.createPetCategoryModalShown = true;
+      this.renamePetCategoryModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newPetCategory.focus();
@@ -212,9 +213,10 @@ export default {
     updatePetCategoryModal(petCategory) {
       this.form.name = petCategory.name;
       this.renamePetCategoryModalShownId = petCategory.id;
+      this.createPetCategoryModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${petCategory.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 
diff --git a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
index 8c0a25b7da5..aa28e29a416 100644
--- a/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/PostTemplates/Index.vue
@@ -121,7 +121,7 @@
             handle=".handle"
             @change="updatePosition">
             <template #item="{ element }">
-              <div v-if="editPostTemplateId != element.id" class="">
+              <div v-if="editPostTemplateId !== element.id" class="">
                 <div
                   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">
@@ -173,7 +173,7 @@
                       handle=".handle"
                       @change="updatePosition">
                       <template #item="{ element, id }">
-                        <div v-if="editSectionId != element.id" class="">
+                        <div v-if="editSectionId !== element.id" class="">
                           <div
                             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">
@@ -227,7 +227,7 @@
                             <errors :errors="form.errors" />
 
                             <text-input
-                              ref="newSection"
+                              ref="renameSection"
                               v-model="form.label"
                               :label="$t('Name')"
                               :type="'text'"
@@ -236,11 +236,11 @@
                               :required="true"
                               :autocomplete="false"
                               :maxlength="255"
-                              @esc-key-pressed="postTemplateId = 0" />
+                              @esc-key-pressed="editSectionId = 0" />
                           </div>
 
                           <div class="flex justify-between p-5">
-                            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="postTemplateId = 0" />
+                            <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editSectionId = 0" />
                             <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                           </div>
                         </form>
@@ -250,9 +250,9 @@
                     <!-- add a section -->
                     <span
                       v-if="
-                        element.post_template_sections.length != 0 &&
+                        element.post_template_sections.length !== 0 &&
                         !createSectionModalShown &&
-                        postTemplateId != element.id
+                        postTemplateId !== element.id
                       "
                       class="inline cursor-pointer text-sm text-blue-500 hover:underline"
                       @click="showCreateSectionModal(element)"
@@ -261,7 +261,7 @@
 
                     <!-- form: create new section -->
                     <form
-                      v-if="createSectionModalShown && postTemplateId == element.id"
+                      v-if="createSectionModalShown && postTemplateId === element.id"
                       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
                       @submit.prevent="submitSection(element)">
                       <div class="border-b border-gray-200 p-5 dark:border-gray-700">
@@ -289,9 +289,9 @@
                     <!-- blank state -->
                     <div
                       v-if="
-                        element.post_template_sections.length == 0 &&
+                        element.post_template_sections.length === 0 &&
                         !createSectionModalShown &&
-                        postTemplateId != element.id
+                        postTemplateId !== element.id
                       "
                       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
                       <p class="p-5 text-center">
@@ -316,7 +316,7 @@
                   <errors :errors="form.errors" />
 
                   <text-input
-                    :ref="'rename' + element.id"
+                    ref="renamePostTemplate"
                     v-model="form.label"
                     :label="$t('Name')"
                     :type="'text'"
@@ -398,10 +398,12 @@ export default {
       this.form.label = '';
       this.form.position = '';
       this.createPostTemplateModalShown = true;
+      this.postTemplateId = 0;
+      this.createSectionModalShown = false;
+      this.editPostTemplateId = 0;
+      this.editSectionId = 0;
 
-      this.$nextTick(() => {
-        this.$refs.newPostTemplate.focus();
-      });
+      this.$nextTick().then(() => this.$refs.newPostTemplate.focus());
     },
 
     showCreateSectionModal(postTemplate) {
@@ -409,21 +411,33 @@ export default {
       this.form.position = '';
       this.createSectionModalShown = true;
       this.postTemplateId = postTemplate.id;
+      this.createPostTemplateModalShown = false;
+      this.editPostTemplateId = 0;
+      this.editSectionId = 0;
 
-      this.$nextTick(() => {
-        this.$refs.newSection.focus();
-      });
+      this.$nextTick().then(() => this.$refs.newSection.focus());
     },
 
     renamePostTemplateModal(postTemplate) {
       this.form.label = postTemplate.label;
       this.editPostTemplateId = postTemplate.id;
+      this.createSectionModalShown = false;
+      this.editSectionId = 0;
+      this.createPostTemplateModalShown = false;
+      this.postTemplateId = 0;
+
+      this.$nextTick().then(() => this.$refs.renamePostTemplate.focus());
     },
 
-    renameSectionModal(postTemplate, section) {
+    renameSectionModal(postTemplateId, section) {
       this.form.label = section.label;
-      this.editPostTemplateId = postTemplate;
+      this.editPostTemplateId = postTemplateId;
       this.editSectionId = section.id;
+      this.createSectionModalShown = false;
+      this.createPostTemplateModalShown = false;
+      this.postTemplateId = 0;
+
+      this.$nextTick().then(() => this.$refs.renameSection.focus());
     },
 
     submit() {
diff --git a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
index 5dbe5ea3a6b..bc7c7e8844e 100644
--- a/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Pronouns/Index.vue
@@ -95,7 +95,7 @@
             :key="pronoun.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">
             <!-- detail of the pronoun -->
-            <div v-if="renamePronounModalShownId != pronoun.id" class="flex items-center justify-between px-5 py-2">
+            <div v-if="renamePronounModalShownId !== pronoun.id" class="flex items-center justify-between px-5 py-2">
               <span class="text-base">{{ pronoun.name }}</span>
 
               <!-- actions -->
@@ -111,14 +111,14 @@
 
             <!-- rename a pronoun modal -->
             <form
-              v-if="renamePronounModalShownId == pronoun.id"
+              v-if="renamePronounModalShownId === pronoun.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"
               @submit.prevent="update(pronoun)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + pronoun.id"
+                  ref="rename"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"
@@ -140,7 +140,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localPronouns.length == 0"
+          v-if="localPronouns.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{
@@ -205,6 +205,7 @@ export default {
     showPronounModal() {
       this.form.name = '';
       this.createPronounModalShown = true;
+      this.renamePronounModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newPronoun.focus();
@@ -214,9 +215,10 @@ export default {
     updatePronounModal(pronoun) {
       this.form.name = pronoun.name;
       this.renamePronounModalShownId = pronoun.id;
+      this.createPronounModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${pronoun.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 
diff --git a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
index bc3212d45f4..c6ac297f50f 100644
--- a/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Relationships/Index.vue
@@ -132,7 +132,7 @@
           <li v-for="groupType in localGroupTypes" :key="groupType.id">
             <!-- detail of the relationship -->
             <div
-              v-if="renameRelationshipGroupTypeModalShownId != groupType.id"
+              v-if="renameRelationshipGroupTypeModalShownId !== groupType.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">
               <span class="text-base font-semibold">{{ groupType.name }}</span>
 
@@ -152,14 +152,14 @@
 
             <!-- rename a group type modal -->
             <form
-              v-if="renameRelationshipGroupTypeModalShownId == groupType.id"
+              v-if="renameRelationshipGroupTypeModalShownId === groupType.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"
               @submit.prevent="updateGroupType(groupType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + groupType.id"
+                  ref="renameGroupType"
                   v-model="form.relationshipGroupTypeName"
                   :label="$t('Name')"
                   :type="'text'"
@@ -186,7 +186,7 @@
               :key="type.id"
               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 v-if="renameRelationshipTypeModalId !== type.id" class="flex items-center justify-between">
                 <div class="relative">
                   <!-- relation type name -->
                   <span>{{ type.name }}</span>
@@ -224,14 +224,14 @@
 
               <!-- rename the relationship type modal -->
               <form
-                v-if="renameRelationshipTypeModalId == type.id"
+                v-if="renameRelationshipTypeModalId === type.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"
                 @submit.prevent="updateRelationType(groupType, type)">
                 <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                   <errors :errors="form.errors" />
 
                   <text-input
-                    :ref="'rename' + type.id"
+                    ref="rename"
                     v-model="form.name"
                     :label="$t('Name')"
                     :type="'text'"
@@ -269,7 +269,7 @@
 
             <!-- create a new relationship type line -->
             <div
-              v-if="createRelationshipTypeModalId != groupType.id"
+              v-if="createRelationshipTypeModalId !== groupType.id"
               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"
@@ -280,7 +280,7 @@
 
             <!-- create a new relationship type -->
             <form
-              v-if="createRelationshipTypeModalId == groupType.id"
+              v-if="createRelationshipTypeModalId === groupType.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"
               @submit.prevent="storeRelationshipType(groupType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
@@ -323,7 +323,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localGroupTypes.length == 0"
+          v-if="localGroupTypes.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{ $t('Relationship types let you link contacts and document how they are connected.') }}
@@ -388,6 +388,9 @@ export default {
     showCreateRelationshipGroupTypeModal() {
       this.form.relationshipGroupTypeName = '';
       this.createRelationshipGroupTypeModalShown = true;
+      this.renameRelationshipGroupTypeModalShownId = 0;
+      this.createRelationshipTypeModalId = 0;
+      this.renameRelationshipTypeModalId = 0;
 
       this.$nextTick(() => {
         this.$refs.newGroupType.focus();
@@ -397,19 +400,25 @@ export default {
     renameRelationshipGroupTypeModal(groupType) {
       this.form.relationshipGroupTypeName = groupType.name;
       this.renameRelationshipGroupTypeModalShownId = groupType.id;
+      this.createRelationshipGroupTypeModalShown = false;
+      this.createRelationshipTypeModalId = 0;
+      this.renameRelationshipTypeModalId = 0;
 
       this.$nextTick(() => {
-        this.$refs[`rename${groupType.id}`].focus();
+        this.$refs.renameGroupType[0].focus();
       });
     },
 
     showRelationshipTypeModal(groupType) {
-      this.createRelationshipTypeModalId = groupType.id;
       this.form.name = '';
       this.form.nameReverseRelationship = '';
+      this.createRelationshipTypeModalId = groupType.id;
+      this.renameRelationshipTypeModalId = 0;
+      this.renameRelationshipGroupTypeModalShownId = 0;
+      this.createRelationshipGroupTypeModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs.newRelationshipType.focus();
+        this.$refs.newRelationshipType[0].focus();
       });
     },
 
@@ -417,9 +426,12 @@ export default {
       this.form.name = type.name;
       this.form.nameReverseRelationship = type.name_reverse_relationship;
       this.renameRelationshipTypeModalId = type.id;
+      this.createRelationshipTypeModalId = 0;
+      this.renameRelationshipGroupTypeModalShownId = 0;
+      this.createRelationshipGroupTypeModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${type.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 
diff --git a/resources/js/Pages/Settings/Personalize/Religions/Index.vue b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
index 60bf05f8968..a7249eb1332 100644
--- a/resources/js/Pages/Settings/Personalize/Religions/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Religions/Index.vue
@@ -98,7 +98,7 @@
             @change="updatePosition">
             <template #item="{ element }">
               <div
-                v-if="editReligionId != element.id"
+                v-if="editReligionId !== element.id"
                 class="item-list flex items-center justify-between border-b border-gray-200 py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
                 <!-- icon to move position -->
                 <div class="me-2 flex">
@@ -142,7 +142,7 @@
                   <errors :errors="form.errors" />
 
                   <text-input
-                    :ref="'rename' + element.id"
+                    ref="rename"
                     v-model="form.name"
                     :label="$t('Name')"
                     :type="'text'"
@@ -165,7 +165,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localReligions.length == 0"
+          v-if="localReligions.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">{{ $t('Religions is all about faith.') }}</p>
         </div>
@@ -228,15 +228,17 @@ export default {
       this.form.name = '';
       this.form.position = '';
       this.createReligionModalShown = true;
+      this.editReligionId = 0;
 
-      this.$nextTick(() => {
-        this.$refs.newReligion.focus();
-      });
+      this.$nextTick().then(() => this.$refs.newReligion.focus());
     },
 
     renameReligionModal(religion) {
       this.form.name = religion.name;
       this.editReligionId = religion.id;
+      this.createReligionModalShown = false;
+
+      this.$nextTick().then(() => this.$refs.rename.focus());
     },
 
     submit() {
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Index.vue b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
index d60d4b5d033..6cdef53af02 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Index.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Index.vue
@@ -130,7 +130,7 @@
             :key="template.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">
             <!-- detail of the template -->
-            <div v-if="renameTemplateModalShownId != template.id" class="flex items-center justify-between px-5 py-2">
+            <div v-if="renameTemplateModalShownId !== template.id" class="flex items-center justify-between px-5 py-2">
               <InertiaLink :href="template.url.show" class="text-blue-500 hover:underline">
                 {{ template.name }}
               </InertiaLink>
@@ -148,14 +148,14 @@
 
             <!-- rename a template modal -->
             <form
-              v-if="renameTemplateModalShownId == template.id"
+              v-if="renameTemplateModalShownId === template.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"
               @submit.prevent="update(template)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + template.id"
+                  ref="rename"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"
@@ -177,7 +177,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localTemplates.length == 0"
+          v-if="localTemplates.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{ $t('Create at least one template to use Monica.') }}
@@ -238,6 +238,7 @@ export default {
     showTemplateModal() {
       this.form.name = '';
       this.createTemplateModalShown = true;
+      this.renameTemplateModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newTemplate.focus();
@@ -247,9 +248,10 @@ export default {
     showUpdateTemplateModal(template) {
       this.form.name = template.name;
       this.renameTemplateModalShownId = template.id;
+      this.createTemplateModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${template.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
index 4c80e49d09a..6b5e03ed35b 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Modules.vue
@@ -93,7 +93,7 @@
     </ul>
 
     <!-- blank state -->
-    <div v-if="localPageModules.length == 0 && moduleLoaded">
+    <div v-if="localPageModules.length === 0 && moduleLoaded">
       <p class="rounded-lg border border-gray-200 bg-white p-5 text-center dark:border-gray-700 dark:bg-gray-900">
         {{ $t('Add at least one module.') }}
       </p>
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
index 1a491e123a5..975ec936c3f 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Partials/Pages.vue
@@ -7,7 +7,7 @@
 
     <!-- contact information page | can't be removed -->
     <div
-      :class="isSelectedId == data.template_page_contact_information.id ? 'border-2	bg-sky-100' : ''"
+      :class="isSelectedId === data.template_page_contact_information.id ? 'border-2	bg-sky-100' : ''"
       class="mb-2 flex items-center rounded-lg border border-gray-200 bg-white px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 hover:dark:bg-slate-800"
       @click="selectPage(data.template_page_contact_information)">
       <!-- detail of a page -->
@@ -40,8 +40,8 @@
       @change="updatePosition">
       <template #item="{ element }">
         <div
-          v-if="renamePageModalShownId != element.id"
-          :class="isSelectedId == element.id ? 'border-2	bg-sky-100' : ''"
+          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 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 -->
@@ -91,7 +91,7 @@
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'rename' + element.id"
+              ref="rename"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"
@@ -139,7 +139,7 @@
     </form>
 
     <!-- blank state -->
-    <div v-if="localPages.length == 0">
+    <div v-if="localPages.length === 0">
       <p class="rounded-lg border border-gray-200 bg-white p-5 text-center dark:border-gray-700 dark:bg-gray-900">
         {{ $t('Create at least one page to display contact’s data.') }}
       </p>
@@ -217,7 +217,7 @@ export default {
       this.renamePageModalShownId = page.id;
 
       this.$nextTick(() => {
-        this.$refs[`rename${page.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 
diff --git a/resources/js/Pages/Settings/Personalize/Templates/Show.vue b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
index 4e91e20ee0b..b0862c0c2b1 100644
--- a/resources/js/Pages/Settings/Personalize/Templates/Show.vue
+++ b/resources/js/Pages/Settings/Personalize/Templates/Show.vue
@@ -156,7 +156,7 @@ export default {
 
   methods: {
     showAddModal(type) {
-      if (type == 'lifeEvent') {
+      if (type === 'lifeEvent') {
         this.addMode = true;
       }
     },
diff --git a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
index f498cea42c7..2f7f54c83e4 100644
--- a/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
+++ b/resources/js/Pages/Settings/Preferences/Partials/NameOrder.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import { trans } from 'laravel-vue-i18n';
 import { flash } from '@/methods';
@@ -57,7 +57,7 @@ const submit = () => {
       flash(trans('Changes saved'), 'success');
       localNameOrder.value = form.nameOrder;
       localNameExample.value = response.data.data.name_example;
-      form.choice.value = form.nameOrder;
+      form.choice = form.nameOrder;
       editMode.value = false;
       loadingState.value = null;
     })
diff --git a/resources/js/Pages/Settings/Users/Index.vue b/resources/js/Pages/Settings/Users/Index.vue
index d2c03f8ec7e..34678487207 100644
--- a/resources/js/Pages/Settings/Users/Index.vue
+++ b/resources/js/Pages/Settings/Users/Index.vue
@@ -84,7 +84,7 @@
             </div>
 
             <!-- case: normal user -->
-            <div v-if="user.name && editModalshownId != user.id" class="flex items-center justify-between px-5 py-2">
+            <div v-if="user.name && editModalshownId !== user.id" class="flex items-center justify-between px-5 py-2">
               <div>
                 <span class="block">
                   {{ user.name }}
@@ -111,7 +111,7 @@
             </div>
 
             <!-- edit user -->
-            <form v-if="editModalshownId == user.id" @submit.prevent="update(user)">
+            <form v-if="editModalshownId === user.id" @submit.prevent="update(user)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
diff --git a/resources/js/Pages/Vault/Companies/Index.vue b/resources/js/Pages/Vault/Companies/Index.vue
index 94a612d4a30..a4dea597bcd 100644
--- a/resources/js/Pages/Vault/Companies/Index.vue
+++ b/resources/js/Pages/Vault/Companies/Index.vue
@@ -18,7 +18,7 @@ defineProps({
           {{ $t('All the companies') }}
         </h3>
 
-        <div v-if="data.companies.length != 0">
+        <div v-if="data.companies.length !== 0">
           <ul class="group-list mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
               v-for="company in data.companies"
@@ -39,7 +39,7 @@ defineProps({
 
         <!-- blank state -->
         <div
-          v-if="data.companies.length == 0"
+          v-if="data.companies.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <img src="/img/vault_company_blank.svg" :alt="$t('Groups')" class="mx-auto mt-4 h-36 w-36" />
           <p class="px-5 pb-5 pt-2 text-center">
diff --git a/resources/js/Pages/Vault/Contact/Photos/Index.vue b/resources/js/Pages/Vault/Contact/Photos/Index.vue
index dbbab74d5dd..37c104728c6 100644
--- a/resources/js/Pages/Vault/Contact/Photos/Index.vue
+++ b/resources/js/Pages/Vault/Contact/Photos/Index.vue
@@ -110,7 +110,7 @@
         <Pagination :items="paginator" />
 
         <div
-          v-if="localPhotos.length == 0"
+          v-if="localPhotos.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{ $t('There are no photos yet.') }}
diff --git a/resources/js/Pages/Vault/Contact/Relationships/Create.vue b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
index 11a8e39e906..31265e1b283 100644
--- a/resources/js/Pages/Vault/Contact/Relationships/Create.vue
+++ b/resources/js/Pages/Vault/Contact/Relationships/Create.vue
@@ -211,7 +211,7 @@
                     </label>
                   </div>
 
-                  <div v-if="form.choice == 'contact'" class="ps-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"
@@ -299,7 +299,7 @@
             </div>
 
             <!-- create a contact entry -->
-            <div v-if="form.choice != 'contact'" class="border-b border-gray-200 p-5 dark:border-gray-700">
+            <div v-if="form.choice !== 'contact'" class="border-b border-gray-200 p-5 dark:border-gray-700">
               <div class="relative flex items-start">
                 <input
                   id="create-contact"
@@ -384,7 +384,7 @@ export default {
         create_contact_entry: false,
         relationship_type_id: 0,
         base_contact_id: 0,
-        other_contact_id: 0,
+        other_contact_id: [],
         last_name: '',
         middle_name: '',
         nickname: '',
@@ -465,7 +465,7 @@ export default {
       this.fromRelationship = this.toRelationship;
       this.toRelationship = temp;
 
-      if (this.form.base_contact_id == this.data.contact.id) {
+      if (this.form.base_contact_id === this.data.contact.id) {
         this.form.base_contact_id = 0;
       } else {
         this.form.base_contact_id = this.data.contact.id;
diff --git a/resources/js/Pages/Vault/Dashboard/Index.vue b/resources/js/Pages/Vault/Dashboard/Index.vue
index 6085569927f..55988b0d183 100644
--- a/resources/js/Pages/Vault/Dashboard/Index.vue
+++ b/resources/js/Pages/Vault/Dashboard/Index.vue
@@ -132,10 +132,10 @@ const changeTab = (tab) => {
             </div>
 
             <!-- feed tab -->
-            <feed v-if="currentTab == 'activity'" :url="url.feed" :contact-view-mode="false" />
+            <feed v-if="currentTab === 'activity'" :url="url.feed" :contact-view-mode="false" />
 
             <!-- life events -->
-            <life-event v-if="currentTab == 'life_events'" :data="lifeEvents" :layout-data="layoutData" />
+            <life-event v-if="currentTab === 'life_events'" :data="lifeEvents" :layout-data="layoutData" />
 
             <!-- life metrics tab -->
             <life-metrics v-if="currentTab === 'life_metrics'" :data="lifeMetrics" />
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
index 986427406e9..6b231057dd1 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
@@ -80,7 +80,7 @@
 
     <!-- blank state -->
     <div
-      v-if="data.tasks.length == 0"
+      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="me-2 h-14 w-14" />
       <p class="px-5 text-center">
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
index 4dc7490eb4b..caea93eff10 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/LifeMetrics.vue
@@ -270,7 +270,7 @@ const destroy = (lifeMetric) => {
 
       <!-- blank state -->
       <div
-        v-if="localLifeMetrics.length == 0"
+        v-if="localLifeMetrics.length === 0"
         class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
         <img src="/img/vault_life_metrics_blank.svg" :alt="$t('Life events')" class="mx-auto mt-4 h-20 w-20" />
         <p class="px-5 pb-5 pt-2 text-center">
diff --git a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
index ea60d20d404..13a890b896b 100644
--- a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
+++ b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
@@ -47,7 +47,7 @@
 
     <!-- blank state -->
     <div
-      v-if="data.reminders.length == 0"
+      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="me-2 h-14 w-14" />
       <p class="px-5 text-center">
diff --git a/resources/js/Pages/Vault/Files/Index.vue b/resources/js/Pages/Vault/Files/Index.vue
index 5d1afa5a632..50aed8f5a8f 100644
--- a/resources/js/Pages/Vault/Files/Index.vue
+++ b/resources/js/Pages/Vault/Files/Index.vue
@@ -81,7 +81,7 @@
                   </p>
 
                   <!-- avatar -->
-                  <div v-if="file.object.type == 'contact'" class="flex items-center">
+                  <div v-if="file.object.type === 'contact'" class="flex items-center">
                     <avatar :data="file.object.avatar" :class="'me-2 h-4 w-4 rounded-full'" />
                     <InertiaLink :href="file.object.url.show" class="text-sm text-blue-500 hover:underline">
                       {{ file.object.name }}
@@ -106,7 +106,7 @@
 
             <!-- blank state -->
             <div
-              v-if="data.files.length == 0"
+              v-if="data.files.length === 0"
               class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
               <p class="p-5 text-center">
                 {{ $t('There are no files yet.') }}
diff --git a/resources/js/Pages/Vault/Group/Index.vue b/resources/js/Pages/Vault/Group/Index.vue
index c7b2a20dd2b..7d0bdc1c64f 100644
--- a/resources/js/Pages/Vault/Group/Index.vue
+++ b/resources/js/Pages/Vault/Group/Index.vue
@@ -18,7 +18,7 @@ defineProps({
           {{ $t('All groups in the vault') }}
         </h3>
 
-        <div v-if="data.length != 0">
+        <div v-if="data.length !== 0">
           <ul class="group-list mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
               v-for="group in data"
@@ -39,7 +39,7 @@ defineProps({
 
         <!-- blank state -->
         <div
-          v-if="data.length == 0"
+          v-if="data.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <img src="/img/group_blank.svg" :alt="$t('Groups')" class="mx-auto mt-4 h-36 w-36" />
           <p class="px-5 pb-5 pt-2 text-center">
diff --git a/resources/js/Pages/Vault/Index.vue b/resources/js/Pages/Vault/Index.vue
index 3d3f3ad3f25..75d6fb40255 100644
--- a/resources/js/Pages/Vault/Index.vue
+++ b/resources/js/Pages/Vault/Index.vue
@@ -76,7 +76,7 @@
                       :class="'h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-900'" />
                   </div>
                   <div
-                    v-if="vault.remaining_contacts != 0"
+                    v-if="vault.remaining_contacts !== 0"
                     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>
diff --git a/resources/js/Pages/Vault/Journal/Index.vue b/resources/js/Pages/Vault/Journal/Index.vue
index b823beaea1c..034b44143e3 100644
--- a/resources/js/Pages/Vault/Journal/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Index.vue
@@ -27,7 +27,7 @@ defineProps({
             :icon="'plus'" />
         </div>
 
-        <div v-if="data.journals.length != 0">
+        <div v-if="data.journals.length !== 0">
           <ul
             class="journal-list mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
@@ -67,7 +67,7 @@ defineProps({
 
         <!-- blank state -->
         <div
-          v-if="data.journals.length == 0"
+          v-if="data.journals.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <img src="/img/journal_blank.svg" :alt="$t('Journal')" class="mx-auto mt-4 h-44 w-44" />
           <p class="px-5 pb-5 pt-2 text-center">
diff --git a/resources/js/Pages/Vault/Journal/Metrics/Index.vue b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
index b49ea6780da..799d1ceb08b 100644
--- a/resources/js/Pages/Vault/Journal/Metrics/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Metrics/Index.vue
@@ -147,7 +147,7 @@ const destroy = (metric) => {
           </div>
         </form>
 
-        <div v-if="localMetrics.length != 0">
+        <div v-if="localMetrics.length !== 0">
           <ul class="metric-list mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
               v-for="metric in localMetrics"
@@ -167,7 +167,7 @@ const destroy = (metric) => {
 
         <!-- blank state -->
         <div
-          v-if="localMetrics.length == 0"
+          v-if="localMetrics.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <img src="/img/journal_blank_index.svg" :alt="$t('Journal')" class="mx-auto mt-4 h-44 w-44" />
           <p class="px-5 pb-5 pt-2 text-center">
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
index 5eea01aab69..e337bcf95de 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/PostMetrics.vue
@@ -103,19 +103,19 @@ const destroy = (journalMetric, postMetric) => {
       <ul>
         <li
           @click="showAddMetricModal(journalMetric)"
-          v-if="!addModalShown && editModeJournalMetricId != journalMetric.id"
+          v-if="!addModalShown && editModeJournalMetricId !== journalMetric.id"
           class="mb-6 me-3 inline cursor-pointer text-sm text-blue-500 hover:underline">
           {{ $t('add a new metric') }}
         </li>
         <li
           @click="showEditMetricModal(journalMetric)"
-          v-if="!addModalShown && journalMetric.post_metrics.length > 0 && editModeJournalMetricId != journalMetric.id"
+          v-if="!addModalShown && journalMetric.post_metrics.length > 0 && editModeJournalMetricId !== journalMetric.id"
           class="mb-6 inline cursor-pointer text-sm">
           <span class="text-blue-500 hover:underline">{{ $t('edit') }}</span>
         </li>
         <li
           @click="editModeJournalMetricId = 0"
-          v-if="editModeJournalMetricId == journalMetric.id"
+          v-if="editModeJournalMetricId === journalMetric.id"
           class="mb-6 inline cursor-pointer text-sm">
           <span class="text-blue-500 hover:underline">{{ $t('close edit mode') }}</span>
         </li>
diff --git a/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue b/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
index b6a3750596b..8e49ff4adfc 100644
--- a/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
+++ b/resources/js/Pages/Vault/Journal/Post/Partials/Tags.vue
@@ -64,7 +64,7 @@
 
         <!-- case if the tag does not exist and needs to be created -->
         <li
-          v-if="filteredTags.length == 0 && form.search.length != ''"
+          v-if="filteredTags.length === 0 && form.search.length !== ''"
           class="cursor-pointer 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="store()">
           {{ $t('Create new tag') }} <span class="italic">"{{ form.search }}"</span>
@@ -72,7 +72,7 @@
 
         <!-- blank state when there is no tag at all -->
         <li
-          v-if="filteredTags.length == 0 && form.search.length == ''"
+          v-if="filteredTags.length === 0 && form.search.length === ''"
           class="border-b border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 dark:text-gray-400 hover:dark:bg-slate-800">
           {{ $t('Please type a few characters to create a new tag.') }}
         </li>
@@ -90,7 +90,7 @@
     </div>
 
     <!-- blank state -->
-    <p v-if="localTags.length == 0" class="text-sm text-gray-600 dark:text-gray-400">{{ $t('Not set') }}</p>
+    <p v-if="localTags.length === 0" class="text-sm text-gray-600 dark:text-gray-400">{{ $t('Not set') }}</p>
   </div>
 </template>
 
diff --git a/resources/js/Pages/Vault/Journal/Show.vue b/resources/js/Pages/Vault/Journal/Show.vue
index 7ce5b3bd2ec..c09d0a3da3a 100644
--- a/resources/js/Pages/Vault/Journal/Show.vue
+++ b/resources/js/Pages/Vault/Journal/Show.vue
@@ -237,7 +237,7 @@ const destroy = () => {
 
             <!-- no slices of life yet -->
             <div
-              v-if="data.slices.length == 0"
+              v-if="data.slices.length === 0"
               class="mb-1 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
               <img src="/img/journal_slice_of_life_blank.svg" :alt="$t('Journal')" class="mx-auto mt-4 h-14 w-14" />
               <p class="px-5 pb-5 pt-2 text-center">{{ $t('Group journal entries together with slices of life.') }}</p>
diff --git a/resources/js/Pages/Vault/Journal/Slices/Index.vue b/resources/js/Pages/Vault/Journal/Slices/Index.vue
index 70495ab1b76..c33d7940aa4 100644
--- a/resources/js/Pages/Vault/Journal/Slices/Index.vue
+++ b/resources/js/Pages/Vault/Journal/Slices/Index.vue
@@ -129,7 +129,7 @@ const submit = () => {
           </div>
         </form>
 
-        <div v-if="localSlices.length != 0">
+        <div v-if="localSlices.length !== 0">
           <ul class="slice-list mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
               v-for="slice in localSlices"
@@ -143,7 +143,7 @@ const submit = () => {
 
         <!-- blank state -->
         <div
-          v-if="localSlices.length == 0"
+          v-if="localSlices.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <img src="/img/journal_slice_of_life_blank.svg" :alt="$t('Journal')" class="mx-auto mt-4 h-44 w-44" />
           <p class="px-5 pb-5 pt-2 text-center">{{ $t('Group journal entries together with slices of life.') }}</p>
diff --git a/resources/js/Pages/Vault/Reports/Address/Index.vue b/resources/js/Pages/Vault/Reports/Address/Index.vue
index 05c25a67d2d..d8bc62a0fd5 100644
--- a/resources/js/Pages/Vault/Reports/Address/Index.vue
+++ b/resources/js/Pages/Vault/Reports/Address/Index.vue
@@ -57,7 +57,7 @@ defineProps({
 
             <!-- blank state -->
             <div
-              v-if="data.countries.length == 0"
+              v-if="data.countries.length === 0"
               class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
               <p class="p-5 text-center">{{ $t('No countries have been added yet in any contact’s addresses.') }}</p>
             </div>
@@ -78,7 +78,7 @@ defineProps({
 
             <!-- blank state -->
             <div
-              v-if="data.cities.length == 0"
+              v-if="data.cities.length === 0"
               class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
               <p class="p-5 text-center">{{ $t('No cities have been added yet in any contact’s addresses.') }}</p>
             </div>
diff --git a/resources/js/Pages/Vault/Search/Index.vue b/resources/js/Pages/Vault/Search/Index.vue
index 4a3f29b2f56..69d55876bad 100644
--- a/resources/js/Pages/Vault/Search/Index.vue
+++ b/resources/js/Pages/Vault/Search/Index.vue
@@ -96,7 +96,7 @@ export default {
 
   methods: {
     search: _.debounce(function () {
-      if (this.form.searchTerm != '' && this.form.searchTerm.length >= 3) {
+      if (this.form.searchTerm !== '' && this.form.searchTerm.length >= 3) {
         this.processingSearch = true;
 
         axios
diff --git a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
index 55fd95b80c0..67ff83b3eb0 100644
--- a/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue
@@ -46,7 +46,7 @@
         :key="type.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 hover:dark:bg-slate-900">
         <!-- detail of the type -->
-        <div v-if="editTypeModalShownId != type.id" class="flex items-center justify-between px-5 py-2">
+        <div v-if="editTypeModalShownId !== type.id" class="flex items-center justify-between px-5 py-2">
           <span class="text-base">
             {{ type.label }}
             <span
@@ -72,14 +72,14 @@
 
         <!-- edit a type modal -->
         <form
-          v-if="editTypeModalShownId == type.id"
+          v-if="editTypeModalShownId === type.id"
           class="item-list border-b border-gray-200 bg-gray-50 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:bg-slate-900 hover:dark:bg-slate-800 hover:dark:bg-slate-900"
           @submit.prevent="update(type)">
           <div class="border-b border-gray-200 p-5 dark:border-gray-700">
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'rename' + type.id"
+              ref="rename"
               v-model="form.label"
               :label="$t('Name')"
               :type="'text'"
@@ -102,7 +102,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localTypes.length == 0"
+      v-if="localTypes.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <p class="p-5 text-center">
         {{ $t('Date types are essential as they let you categorize dates that you add to a contact.') }}
diff --git a/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
index cefacac5fb4..fe720ac9675 100644
--- a/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/DefaultTemplate.vue
@@ -58,7 +58,7 @@
       </ul>
 
       <!-- blank state -->
-      <div v-if="localTemplates.length == 0">
+      <div v-if="localTemplates.length === 0">
         <p class="p-5 text-center">
           {{ $t('There are no templates in the account. Go to the account settings to create one.') }}
         </p>
@@ -101,7 +101,7 @@ export default {
 
           // mark the previous default template as not default
           this.localTemplates.forEach((row) => {
-            if (row.is_default == true) {
+            if (row.is_default === true) {
               row.is_default = false;
             }
           });
diff --git a/resources/js/Pages/Vault/Settings/Partials/Labels.vue b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
index 4d182fdcedb..6f29f0d9d6a 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Labels.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Labels.vue
@@ -67,7 +67,7 @@
         :key="label.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 hover:dark:bg-slate-900">
         <!-- detail of the label -->
-        <div v-if="editLabelModalShownId != label.id" class="flex items-center justify-between px-5 py-2">
+        <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="me-2 inline-block h-4 w-4 rounded-full" :class="label.bg_color" />
             <span class="me-2">{{ label.name }}</span>
@@ -91,14 +91,14 @@
 
         <!-- edit a label modal -->
         <form
-          v-if="editLabelModalShownId == label.id"
+          v-if="editLabelModalShownId === label.id"
           class="item-list border-b border-gray-200 bg-gray-50 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:bg-slate-900 hover:dark:bg-slate-800 hover:dark:bg-slate-900"
           @submit.prevent="update(label)">
           <div class="border-b border-gray-200 p-5 dark:border-gray-700">
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'rename' + label.id"
+              ref="rename"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"
@@ -142,7 +142,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localLabels.length == 0"
+      v-if="localLabels.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <p class="p-5 text-center">
         {{ $t('Labels let you classify contacts using a system that matters to you.') }}
diff --git a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
index a1244671828..2eadf2bbd92 100644
--- a/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/LifeEventTypesAndCategories.vue
@@ -234,7 +234,7 @@ const destroyLifeEventType = (lifeEventType) => {
         handle=".handle"
         @change="updatePosition">
         <template #item="{ element }">
-          <div v-if="editLifeEventCategoryId != element.id" class="">
+          <div v-if="editLifeEventCategoryId !== element.id" class="">
             <div
               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">
@@ -283,7 +283,7 @@ const destroyLifeEventType = (lifeEventType) => {
                   handle=".handle"
                   @change="updatePosition">
                   <template #item="{ element, id }">
-                    <div v-if="editLifeEventTypeId != element.id" class="">
+                    <div v-if="editLifeEventTypeId !== element.id" class="">
                       <div
                         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">
@@ -343,11 +343,11 @@ const destroyLifeEventType = (lifeEventType) => {
                           :required="true"
                           :autocomplete="false"
                           :maxlength="255"
-                          @esc-key-pressed="lifeEventCategoryId = 0" />
+                          @esc-key-pressed="editLifeEventTypeId = 0" />
                       </div>
 
                       <div class="flex justify-between p-5">
-                        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="lifeEventCategoryId = 0" />
+                        <pretty-span :text="$t('Cancel')" :class="'me-3'" @click="editLifeEventTypeId = 0" />
                         <pretty-button :text="$t('Rename')" :state="loadingState" :icon="'check'" :class="'save'" />
                       </div>
                     </form>
@@ -357,9 +357,9 @@ const destroyLifeEventType = (lifeEventType) => {
                 <!-- add a life event type -->
                 <span
                   v-if="
-                    element.life_event_types.length != 0 &&
+                    element.life_event_types.length !== 0 &&
                     !createLifeEventTypeModalShown &&
-                    lifeEventCategoryId != element.id
+                    lifeEventCategoryId !== element.id
                   "
                   class="inline cursor-pointer text-sm text-blue-500 hover:underline"
                   @click="showCreateLifeEventTypeModal(element)"
@@ -368,7 +368,7 @@ const destroyLifeEventType = (lifeEventType) => {
 
                 <!-- form: create new life event type -->
                 <form
-                  v-if="createLifeEventTypeModalShown && lifeEventCategoryId == element.id"
+                  v-if="createLifeEventTypeModalShown && lifeEventCategoryId === element.id"
                   class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
                   @submit.prevent="submitLifeEventType(element)">
                   <div class="border-b border-gray-200 p-5 dark:border-gray-700">
@@ -396,9 +396,9 @@ const destroyLifeEventType = (lifeEventType) => {
                 <!-- blank state -->
                 <div
                   v-if="
-                    element.life_event_types.length == 0 &&
+                    element.life_event_types.length === 0 &&
                     !createLifeEventTypeModalShown &&
-                    lifeEventCategoryId != element.id
+                    lifeEventCategoryId !== element.id
                   "
                   class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
                   <p class="p-5 text-center">
diff --git a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
index 18b5b405080..dd748cde8c6 100644
--- a/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/MoodTrackingParameters.vue
@@ -191,7 +191,7 @@ const updatePosition = (event) => {
         @change="updatePosition">
         <template #item="{ element }">
           <div
-            v-if="editMoodTrackingParameterId != element.id"
+            v-if="editMoodTrackingParameterId !== element.id"
             class="item-list flex items-center justify-between border-b border-gray-200 py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- icon to move position -->
             <div class="me-2 flex items-center">
@@ -285,7 +285,7 @@ const updatePosition = (event) => {
 
     <!-- blank state -->
     <div
-      v-if="localMoodTrackingParameters.length == 0"
+      v-if="localMoodTrackingParameters.length === 0"
       class="rounded-lg bg-white dark:border-gray-700 dark:bg-gray-900">
       <p class="p-5 text-center">Add at least one parameter to be able to track your mood.</p>
     </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
index 6e1b898bb22..15ad34cd5f4 100644
--- a/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/QuickFactTemplate.vue
@@ -148,7 +148,7 @@ const updatePosition = (event) => {
         @change="updatePosition">
         <template #item="{ element }">
           <div
-            v-if="editEntryId != element.id"
+            v-if="editEntryId !== element.id"
             class="item-list flex items-center justify-between border-b border-gray-200 py-2 pe-5 ps-4 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- icon to move position -->
             <div class="me-2 flex">
@@ -214,7 +214,7 @@ const updatePosition = (event) => {
     </div>
 
     <!-- blank state -->
-    <div v-if="localEntries.length == 0">
+    <div v-if="localEntries.length === 0">
       <p class="p-5 text-center">{{ $t('Quick facts let you document interesting facts about a contact.') }}</p>
     </div>
   </div>
diff --git a/resources/js/Pages/Vault/Settings/Partials/Tags.vue b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
index 44bff5d0b8c..c8a6c072583 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Tags.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Tags.vue
@@ -46,7 +46,7 @@
         :key="tag.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 hover:dark:bg-slate-900">
         <!-- detail of the tag -->
-        <div v-if="editTagModalShownId != tag.id" class="flex items-center justify-between px-5 py-2">
+        <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="me-2">{{ tag.name }}</span>
             <span v-if="tag.count > 0" class="text-xs text-gray-500"
@@ -69,14 +69,14 @@
 
         <!-- edit a tag modal -->
         <form
-          v-if="editTagModalShownId == tag.id"
+          v-if="editTagModalShownId === tag.id"
           class="item-list border-b border-gray-200 bg-gray-50 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:bg-slate-900 hover:dark:bg-slate-800 hover:dark:bg-slate-900"
           @submit.prevent="update(tag)">
           <div class="border-b border-gray-200 p-5 dark:border-gray-700">
             <errors :errors="form.errors" />
 
             <text-input
-              :ref="'rename' + tag.id"
+              ref="rename"
               v-model="form.name"
               :label="$t('Name')"
               :type="'text'"
@@ -99,7 +99,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localTags.length == 0"
+      v-if="localTags.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <p class="p-5 text-center">
         {{ $t('Tags let you classify journal posts using a system that matters to you.') }}
diff --git a/resources/js/Pages/Vault/Settings/Partials/Users.vue b/resources/js/Pages/Vault/Settings/Partials/Users.vue
index 8e2b13ff00c..347cb9cd504 100644
--- a/resources/js/Pages/Vault/Settings/Partials/Users.vue
+++ b/resources/js/Pages/Vault/Settings/Partials/Users.vue
@@ -8,7 +8,7 @@
       </h3>
       <pretty-span v-if="!addUserModalShown" :text="$t('Add a user')" :icon="'plus'" @click="showAddUserModal" />
       <pretty-span
-        v-if="addUserModalShown && localUsersInAccount.length == 0"
+        v-if="addUserModalShown && localUsersInAccount.length === 0"
         :text="$t('Cancel')"
         @click="addUserModalShown = false" />
     </div>
@@ -111,7 +111,7 @@
 
     <!-- blank state -->
     <div
-      v-if="addUserModalShown && localUsersInAccount.length == 0"
+      v-if="addUserModalShown && localUsersInAccount.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white p-5 text-center dark:border-gray-700 dark:bg-gray-900">
       <p>{{ $t('There are no other users in this account.') }}</p>
     </div>
@@ -123,11 +123,11 @@
           v-for="user in localUsersInVault"
           :key="user.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="editedUser.id != user.id" class="flex items-center justify-between px-5 py-2">
+          <div v-if="editedUser.id !== user.id" class="flex items-center justify-between px-5 py-2">
             <span>{{ user.name }}</span>
 
             <!-- actions -->
-            <ul v-if="user.id != layoutData.user.id" class="text-sm">
+            <ul v-if="user.id !== layoutData.user.id" class="text-sm">
               <li class="me-4 inline cursor-pointer" @click="showChangePermissionModal(user)">
                 <span class="text-blue-500 hover:underline">{{ $t('Change permission') }}</span>
               </li>
@@ -138,7 +138,7 @@
           </div>
 
           <!-- change permission modal -->
-          <form v-if="editedUser.id == user.id" class="bg-white dark:bg-gray-900" @submit.prevent="update(user)">
+          <form v-if="editedUser.id === user.id" class="bg-white dark:bg-gray-900" @submit.prevent="update(user)">
             <div class="border-b border-gray-200 p-5 dark:border-gray-700">
               <errors :errors="form.errors" />
 
@@ -209,7 +209,7 @@
       </ul>
 
       <!-- blank state -->
-      <div v-if="localUsersInVault.length == 0">
+      <div v-if="localUsersInVault.length === 0">
         <p class="p-5 text-center">
           {{ $t('There are no other users in this account.') }}
         </p>
diff --git a/resources/js/Shared/Form/ContactSelector.vue b/resources/js/Shared/Form/ContactSelector.vue
index 549aea30085..3cd665232e0 100644
--- a/resources/js/Shared/Form/ContactSelector.vue
+++ b/resources/js/Shared/Form/ContactSelector.vue
@@ -5,7 +5,10 @@ import { trans } from 'laravel-vue-i18n';
 import Errors from '@/Shared/Form/Errors.vue';
 
 const props = defineProps({
-  modelValue: Array,
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
   inputClass: String,
   placeholder: {
     type: String,
diff --git a/resources/js/Shared/Form/PrettyButton.vue b/resources/js/Shared/Form/PrettyButton.vue
index 8d625a91558..6829511422b 100644
--- a/resources/js/Shared/Form/PrettyButton.vue
+++ b/resources/js/Shared/Form/PrettyButton.vue
@@ -7,7 +7,7 @@
 
     <!-- + icon -->
     <svg
-      v-if="icon === 'plus' && state != 'loading'"
+      v-if="icon === 'plus' && state !== 'loading'"
       xmlns="http://www.w3.org/2000/svg"
       class="icon relative me-1 inline h-5 w-5"
       fill="none"
@@ -18,7 +18,7 @@
 
     <!-- check icon -->
     <svg
-      v-if="icon === 'check' && state != 'loading'"
+      v-if="icon === 'check' && state !== 'loading'"
       xmlns="http://www.w3.org/2000/svg"
       class="icon relative me-1 inline h-5 w-5"
       fill="none"
@@ -29,7 +29,7 @@
 
     <!-- minus icon -->
     <svg
-      v-if="icon === 'minus' && state != 'loading'"
+      v-if="icon === 'minus' && state !== 'loading'"
       xmlns="http://www.w3.org/2000/svg"
       class="icon relative mx-1 inline h-5 w-5"
       fill="none"
diff --git a/resources/js/Shared/Form/TextArea.vue b/resources/js/Shared/Form/TextArea.vue
index 7707fdff196..9fb857f8972 100644
--- a/resources/js/Shared/Form/TextArea.vue
+++ b/resources/js/Shared/Form/TextArea.vue
@@ -1,3 +1,106 @@
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'text-area-',
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  textareaClass: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  help: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  rows: {
+    type: Number,
+    default: 3,
+  },
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
+  maxlength: {
+    type: Number,
+    default: null,
+  },
+  markdown: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['esc-key-pressed', 'update:modelValue']);
+
+const displayMaxLength = ref(false);
+const zone = ref(null);
+
+const proxyValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+const charactersLeft = computed(() => {
+  let char = 0;
+  if (props.modelValue) {
+    char = props.modelValue.length;
+  }
+
+  return `${props.maxlength - char} / ${props.maxlength}`;
+});
+
+const localTextAreaClasses = computed(() => [
+  'rounded-md shadow-sm',
+  'bg-white dark:bg-slate-900 border-gray-300 dark:border-gray-700',
+  'focus:border-indigo-300 focus:dark:border-indigo-700 focus:ring focus:ring-indigo-200 focus:dark:ring-indigo-800 focus:ring-opacity-50',
+  props.textareaClass,
+]);
+
+const sendEscKey = () => {
+  emit('esc-key-pressed');
+};
+
+const showMaxLength = () => {
+  displayMaxLength.value = true;
+};
+
+const focus = () => {
+  zone.value.focus();
+};
+
+defineExpose({
+  focus,
+});
+</script>
+
 <template>
   <div class="mb3">
     <label v-if="label" class="mb-2 block text-sm dark:text-gray-100" :for="id">
@@ -47,111 +150,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  inheritAttrs: false,
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    id: {
-      type: String,
-      default: 'text-area-',
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-    textareaClass: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    help: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    rows: {
-      type: Number,
-      default: 3,
-    },
-    autofocus: {
-      type: Boolean,
-      default: false,
-    },
-    maxlength: {
-      type: Number,
-      default: null,
-    },
-    markdown: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['esc-key-pressed', 'update:modelValue'],
-
-  data() {
-    return {
-      displayMaxLength: false,
-    };
-  },
-
-  computed: {
-    proxyValue: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit('update:modelValue', value);
-      },
-    },
-
-    charactersLeft() {
-      var char = 0;
-      if (this.modelValue) {
-        char = this.modelValue.length;
-      }
-
-      return `${this.maxlength - char} / ${this.maxlength}`;
-    },
-
-    localTextAreaClasses() {
-      return [
-        'rounded-md shadow-sm',
-        'bg-white dark:bg-slate-900 border-gray-300 dark:border-gray-700',
-        'focus:border-indigo-300 focus:dark:border-indigo-700 focus:ring focus:ring-indigo-200 focus:dark:ring-indigo-800 focus:ring-opacity-50',
-        this.textareaClass,
-      ];
-    },
-  },
-
-  methods: {
-    sendEscKey() {
-      this.$emit('esc-key-pressed');
-    },
-
-    showMaxLength() {
-      this.displayMaxLength = true;
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .optional-badge {
   color: #283e59;
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index aa3c18ecda8..fd33438c82b 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -245,7 +245,7 @@ const destroy = () => {
 
         <!-- create new address -->
         <div
-          v-if="!choiceChooseExisting || props.data.addresses_in_vault.length == 0"
+          v-if="!choiceChooseExisting || props.data.addresses_in_vault.length === 0"
           class="border-b border-gray-200 dark:border-gray-700">
           <div v-if="form.errors.length > 0" class="p-5">
             <errors :errors="form.errors" />
@@ -366,7 +366,7 @@ const destroy = () => {
           v-for="address in localActiveAddresses"
           :key="address.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="address.id != editedAddressId" class="flex items-center justify-between p-3">
+          <div v-if="address.id !== editedAddressId" class="flex items-center justify-between p-3">
             <!-- address detail -->
             <div>
               <p v-if="address.type" class="mb-2 text-sm font-semibold">
@@ -523,7 +523,7 @@ const destroy = () => {
 
       <!-- blank state -->
       <div
-        v-if="localActiveAddresses.length == 0"
+        v-if="localActiveAddresses.length === 0"
         class="mb-2 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
         <img src="/img/contact_blank_address.svg" :alt="$t('Addresses')" class="mx-auto mt-4 h-14 w-14" />
         <p class="px-5 pb-5 pt-2 text-center">
@@ -547,7 +547,7 @@ const destroy = () => {
           v-for="address in localInactiveAddresses"
           :key="address.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="address.id != editedAddressId" class="flex items-center justify-between p-3">
+          <div v-if="address.id !== editedAddressId" class="flex items-center justify-between p-3">
             <!-- address detail -->
             <div>
               <p v-if="address.type" class="mb-2 text-sm font-semibold">
diff --git a/resources/js/Shared/Modules/ContactInformation.vue b/resources/js/Shared/Modules/ContactInformation.vue
index 281ad056ca5..e6076bb430e 100644
--- a/resources/js/Shared/Modules/ContactInformation.vue
+++ b/resources/js/Shared/Modules/ContactInformation.vue
@@ -80,7 +80,7 @@
           :key="info.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">
           <!-- contact information -->
-          <div v-if="editedContactInformationId != info.id" class="flex items-center justify-between px-3 py-2">
+          <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="ms-2 text-xs text-gray-500">({{ info.label }})</span>
@@ -101,7 +101,7 @@
 
           <!-- edit info modal -->
           <form
-            v-if="editedContactInformationId == info.id"
+            v-if="editedContactInformationId === info.id"
             class="bg-gray-50 dark:bg-gray-900"
             @submit.prevent="update(info)">
             <div class="border-b border-gray-200 dark:border-gray-700">
@@ -147,7 +147,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localContactInformation.length == 0"
+      v-if="localContactInformation.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_contact.svg" :alt="$t('Contact informations')" class="mx-auto mt-4 h-20 w-20" />
       <p class="px-5 pb-5 pt-2 text-center">
diff --git a/resources/js/Shared/Modules/CreateLifeEvent.vue b/resources/js/Shared/Modules/CreateLifeEvent.vue
index ed6acb33dba..f1800917c5f 100644
--- a/resources/js/Shared/Modules/CreateLifeEvent.vue
+++ b/resources/js/Shared/Modules/CreateLifeEvent.vue
@@ -321,9 +321,9 @@ const store = () => {
 
       <!-- description -->
       <div
-        v-if="selectedLifeEventType && addDescriptionFieldShown"
+        v-show="selectedLifeEventType && addDescriptionFieldShown"
         class="border-b border-gray-200 p-3 dark:border-gray-700">
-        <text-area
+        <TextArea
           ref="descriptionField"
           v-model="form.description"
           :label="$t('Description')"
diff --git a/resources/js/Shared/Modules/Documents.vue b/resources/js/Shared/Modules/Documents.vue
index 90ea643bc94..b3821ea0cce 100644
--- a/resources/js/Shared/Modules/Documents.vue
+++ b/resources/js/Shared/Modules/Documents.vue
@@ -77,7 +77,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localDocuments.length == 0"
+      v-if="localDocuments.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_document.svg" :alt="$t('Documents')" class="mx-auto mt-4 h-16 w-16" />
       <p class="px-5 pb-5 pt-2 text-center">
diff --git a/resources/js/Shared/Modules/FamilySummary.vue b/resources/js/Shared/Modules/FamilySummary.vue
index 0e0687b3781..ecf77b754d4 100644
--- a/resources/js/Shared/Modules/FamilySummary.vue
+++ b/resources/js/Shared/Modules/FamilySummary.vue
@@ -7,7 +7,7 @@ defineProps({
 </script>
 
 <template>
-  <div v-if="data.love_relationships.length != 0 || data.family_relationships.length != 0" class="mb-4">
+  <div v-if="data.love_relationships.length !== 0 || data.family_relationships.length !== 0" class="mb-4">
     <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
       <div class="mb-1 text-xs">{{ $t('Family summary') }}</div>
     </div>
diff --git a/resources/js/Shared/Modules/Feed.vue b/resources/js/Shared/Modules/Feed.vue
index dea28883f12..5b31daf23b2 100644
--- a/resources/js/Shared/Modules/Feed.vue
+++ b/resources/js/Shared/Modules/Feed.vue
@@ -163,7 +163,7 @@
     </div>
 
     <!-- blank state -->
-    <div v-if="feed.length == 0 && !loading">
+    <div v-if="feed.length === 0 && !loading">
       <p class="p-5 text-center">{{ $t('There is no activity yet.') }}</p>
       <img src="/img/dashboard_blank_activity_feed.svg" :alt="$t('Activity feed')" class="mx-auto h-96 w-96" />
     </div>
diff --git a/resources/js/Shared/Modules/Goals.vue b/resources/js/Shared/Modules/Goals.vue
index e51237ade6c..4c9a11ea8b1 100644
--- a/resources/js/Shared/Modules/Goals.vue
+++ b/resources/js/Shared/Modules/Goals.vue
@@ -147,7 +147,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localGoals.length == 0"
+      v-if="localGoals.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_goal.svg" :alt="$t('Goals')" class="mx-auto mt-4 h-14 w-14" />
       <p class="px-5 pb-5 pt-2 text-center">{{ $t('There are no goals yet.') }}</p>
diff --git a/resources/js/Shared/Modules/Groups.vue b/resources/js/Shared/Modules/Groups.vue
index 04224b72e57..809fcade545 100644
--- a/resources/js/Shared/Modules/Groups.vue
+++ b/resources/js/Shared/Modules/Groups.vue
@@ -125,7 +125,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localGroups.length == 0"
+      v-if="localGroups.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_group.svg" :alt="$t('Groups')" class="mx-auto mt-4 h-14 w-14" />
       <p class="px-5 pb-5 pt-2 text-center">{{ $t('The contact does not belong to any group yet.') }}</p>
@@ -198,7 +198,7 @@ export default {
     toggleCreateGroup() {
       this.form.name = '';
 
-      if (this.form.group_id == 0) {
+      if (this.form.group_id === 0) {
         this.createAddGroupModal();
       } else {
         this.chooseExistingGroupModal();
@@ -217,14 +217,14 @@ export default {
       this.chooseGroupTypeRoleShown = true;
 
       // we need to load the list of existing roles for this group
-      var id = this.localAvailableGroups.findIndex((x) => x.id == this.form.group_id);
+      var id = this.localAvailableGroups.findIndex((x) => x.id === this.form.group_id);
       this.form.group_type_id = this.localAvailableGroups[id].type.id;
       this.loadGroupTypeRoles();
     },
 
     loadGroupTypeRoles() {
       for (let i = 0; i < this.data.group_types.length; i++) {
-        if (this.data.group_types[i].id == this.form.group_type_id) {
+        if (this.data.group_types[i].id === this.form.group_type_id) {
           this.localGroupTypeRoles = this.data.group_types[i].roles;
         }
       }
diff --git a/resources/js/Shared/Modules/ImportantDates.vue b/resources/js/Shared/Modules/ImportantDates.vue
index d74c365325a..a3fb53868ad 100644
--- a/resources/js/Shared/Modules/ImportantDates.vue
+++ b/resources/js/Shared/Modules/ImportantDates.vue
@@ -37,7 +37,7 @@ defineProps({
     </ul>
 
     <!-- blank state -->
-    <p v-if="data.dates.length == 0" class="text-sm text-gray-600 dark:text-gray-400">{{ $t('Not set') }}</p>
+    <p v-if="data.dates.length === 0" class="text-sm text-gray-600 dark:text-gray-400">{{ $t('Not set') }}</p>
   </div>
 </template>
 
diff --git a/resources/js/Shared/Modules/JobInformation.vue b/resources/js/Shared/Modules/JobInformation.vue
index 7e127464b53..debf4332292 100644
--- a/resources/js/Shared/Modules/JobInformation.vue
+++ b/resources/js/Shared/Modules/JobInformation.vue
@@ -189,7 +189,7 @@ export default {
         .then((response) => {
           this.localCompanies = response.data.data;
 
-          if (this.localCompanies.length == 0) {
+          if (this.localCompanies.length === 0) {
             this.showDropdownCompanies = false;
             this.showCreateCompanyLink = false;
             this.showCreateCompanyField = true;
diff --git a/resources/js/Shared/Modules/Labels.vue b/resources/js/Shared/Modules/Labels.vue
index ab0216864df..8b01e61ca15 100644
--- a/resources/js/Shared/Modules/Labels.vue
+++ b/resources/js/Shared/Modules/Labels.vue
@@ -71,7 +71,7 @@
 
         <!-- case if the label does not exist and needs to be created -->
         <li
-          v-if="filteredLabels.length == 0 && form.search.length != ''"
+          v-if="filteredLabels.length === 0 && form.search.length !== ''"
           class="cursor-pointer 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="store()">
           {{ $t('Create new label') }} <span class="italic">"{{ form.search }}"</span>
@@ -79,7 +79,7 @@
 
         <!-- blank state when there is no label at all -->
         <li
-          v-if="filteredLabels.length == 0 && form.search.length == ''"
+          v-if="filteredLabels.length === 0 && form.search.length === ''"
           class="border-b border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 dark:text-gray-400 hover:dark:bg-slate-800">
           {{ $t('Please type a few characters to create a new label.') }}
         </li>
@@ -98,7 +98,7 @@
     </div>
 
     <!-- blank state -->
-    <p v-if="localLabels.length == 0" class="text-sm text-gray-600 dark:text-gray-400">{{ $t('Not set') }}</p>
+    <p v-if="localLabels.length === 0" class="text-sm text-gray-600 dark:text-gray-400">{{ $t('Not set') }}</p>
   </div>
 </template>
 
diff --git a/resources/js/Shared/Modules/LifeEvent.vue b/resources/js/Shared/Modules/LifeEvent.vue
index 021f0314959..06289f0ef3d 100644
--- a/resources/js/Shared/Modules/LifeEvent.vue
+++ b/resources/js/Shared/Modules/LifeEvent.vue
@@ -332,7 +332,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
             <div class="mb-2 ms-6">
               <span
                 @click="showAddLifeEventModalForTimelineEventId = timelineEvent.id"
-                v-if="showAddLifeEventModalForTimelineEventId != timelineEvent.id"
+                v-if="showAddLifeEventModalForTimelineEventId !== timelineEvent.id"
                 class="cursor-pointer text-sm text-blue-500 hover:underline">
                 {{ $t('Add another life event') }}
               </span>
@@ -340,7 +340,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
               <create-life-event
                 :data="data"
                 :layout-data="layoutData"
-                :open-modal="showAddLifeEventModalForTimelineEventId == timelineEvent.id"
+                :open-modal="showAddLifeEventModalForTimelineEventId === timelineEvent.id"
                 :create-timeline-event="false"
                 :timeline-event="timelineEvent"
                 @close-modal="showAddLifeEventModalForTimelineEventId = 0"
@@ -366,7 +366,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
 
       <!-- blank state -->
       <div
-        v-if="localTimelines.length == 0"
+        v-if="localTimelines.length === 0"
         class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
         <img src="/img/contact_blank_life_event.svg" :alt="$t('Life events')" class="mx-auto mt-4 h-20 w-20" />
         <p class="px-5 pb-5 pt-2 text-center">{{ $t('Life events let you document what happened in your life.') }}</p>
diff --git a/resources/js/Shared/Modules/Loans.vue b/resources/js/Shared/Modules/Loans.vue
index c3e7c82e3b3..c6afd970792 100644
--- a/resources/js/Shared/Modules/Loans.vue
+++ b/resources/js/Shared/Modules/Loans.vue
@@ -552,7 +552,7 @@ const toggle = (loan) => {
 
     <!-- blank state -->
     <div
-      v-if="localLoans.length == 0"
+      v-if="localLoans.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_loan.svg" :alt="$t('Loans')" class="mx-auto mt-4 h-14 w-14" />
       <p class="px-5 pb-5 pt-2 text-center">{{ $t('There are no loans yet.') }}</p>
diff --git a/resources/js/Shared/Modules/Notes.vue b/resources/js/Shared/Modules/Notes.vue
index b825793653a..ee5330c6372 100644
--- a/resources/js/Shared/Modules/Notes.vue
+++ b/resources/js/Shared/Modules/Notes.vue
@@ -238,7 +238,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localNotes.length == 0"
+      v-if="localNotes.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_note.svg" :alt="$t('Notes')" class="mx-auto mt-4 h-14 w-14" />
       <p class="px-5 pb-5 pt-2 text-center">{{ $t('There are no notes yet.') }}</p>
diff --git a/resources/js/Shared/Modules/Pets.vue b/resources/js/Shared/Modules/Pets.vue
index 023826b5b67..40be92a5424 100644
--- a/resources/js/Shared/Modules/Pets.vue
+++ b/resources/js/Shared/Modules/Pets.vue
@@ -75,7 +75,7 @@
           :key="pet.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">
           <!-- pet -->
-          <div v-if="editedPetId != pet.id" class="flex items-center justify-between px-3 py-2">
+          <div v-if="editedPetId !== pet.id" class="flex items-center justify-between px-3 py-2">
             <div class="flex items-center">
               <span class="me-2 text-sm text-gray-500">{{ pet.pet_category.name }}</span>
               <span class="me-2">{{ pet.name }}</span>
@@ -93,7 +93,7 @@
           </div>
 
           <!-- edit pet modal -->
-          <form v-if="editedPetId == pet.id" class="bg-gray-50 dark:bg-gray-900" @submit.prevent="update(pet)">
+          <form v-if="editedPetId === pet.id" class="bg-gray-50 dark:bg-gray-900" @submit.prevent="update(pet)">
             <div class="border-b border-gray-200 dark:border-gray-700">
               <div v-if="form.errors.length > 0" class="p-5">
                 <errors :errors="form.errors" />
@@ -137,7 +137,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localPets.length == 0"
+      v-if="localPets.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_pet.svg" :alt="$t('Pets')" class="mx-auto mt-4 h-16 w-16" />
       <p class="px-5 pb-5 pt-2 text-center">{{ $t('There are no pets yet.') }}</p>
diff --git a/resources/js/Shared/Modules/Photos.vue b/resources/js/Shared/Modules/Photos.vue
index a842438ad4f..899f1f946fe 100644
--- a/resources/js/Shared/Modules/Photos.vue
+++ b/resources/js/Shared/Modules/Photos.vue
@@ -66,7 +66,7 @@
 
     <!-- blank state -->
     <div
-      v-if="localPhotos.length == 0"
+      v-if="localPhotos.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_photo.svg" :alt="$t('Photos')" class="mx-auto mt-4 h-16 w-16" />
       <p class="px-5 pb-5 pt-2 text-center">
diff --git a/resources/js/Shared/Modules/Posts.vue b/resources/js/Shared/Modules/Posts.vue
index 73a0b98d14f..7ef221b9e2d 100644
--- a/resources/js/Shared/Modules/Posts.vue
+++ b/resources/js/Shared/Modules/Posts.vue
@@ -69,7 +69,7 @@ defineProps({
 
     <!-- blank state -->
     <div
-      v-if="data.length == 0"
+      v-if="data.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_posts.svg" :alt="$t('Notes')" class="mx-auto mt-4 h-20 w-20" />
       <p class="px-5 pb-5 pt-2 text-center">{{ $t('There are no posts yet.') }}</p>
diff --git a/resources/js/Shared/Modules/QuickFacts.vue b/resources/js/Shared/Modules/QuickFacts.vue
index 8e951c9c10e..66bb123cb20 100644
--- a/resources/js/Shared/Modules/QuickFacts.vue
+++ b/resources/js/Shared/Modules/QuickFacts.vue
@@ -221,7 +221,7 @@ const destroy = (quickFact) => {
       </ul>
 
       <!-- blank state -->
-      <div v-if="localQuickFacts.length == 0 && !loading && !createQuickFactModalShown" class="mb-2">
+      <div v-if="localQuickFacts.length === 0 && !loading && !createQuickFactModalShown" class="mb-2">
         <p class="px-5 pb-2 text-center">
           {{ $t('There are no quick facts here yet.') }}
 
diff --git a/resources/js/Shared/Modules/Relationships.vue b/resources/js/Shared/Modules/Relationships.vue
index d55769ee855..00c8250ab51 100644
--- a/resources/js/Shared/Modules/Relationships.vue
+++ b/resources/js/Shared/Modules/Relationships.vue
@@ -75,7 +75,7 @@
 
     <!-- blank state -->
     <div
-      v-if="data.number_of_defined_relations == 0"
+      v-if="data.number_of_defined_relations === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/contact_blank_relationship.svg" :alt="$t('Relationships')" class="mx-auto mt-4 h-14 w-14" />
       <p class="px-5 pb-5 pt-2 text-center">{{ $t('There are no relationships yet.') }}</p>
diff --git a/resources/js/Shared/Modules/Tasks.vue b/resources/js/Shared/Modules/Tasks.vue
index edc72a0e5ce..123093f30e5 100644
--- a/resources/js/Shared/Modules/Tasks.vue
+++ b/resources/js/Shared/Modules/Tasks.vue
@@ -214,7 +214,7 @@ const destroy = (task) => {
 
                 <!-- due date -->
                 <span
-                  v-if="task.due_at != null"
+                  v-if="task.due_at !== null"
                   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"
@@ -254,7 +254,7 @@ const destroy = (task) => {
 
     <!-- blank state -->
     <div
-      v-if="localTasks.length == 0"
+      v-if="localTasks.length === 0"
       class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <img src="/img/dashboard_blank_tasks.svg" :alt="$t('Tasks')" class="mx-auto mt-4 h-14 w-14" />
       <p class="px-5 pb-5 pt-2 text-center">{{ $t('There are no tasks yet.') }}</p>