diff --git a/resources/js/Pages/Vault/Contact/Show.vue b/resources/js/Pages/Vault/Contact/Show.vue
index 0ad769c3cb7..f87038fc834 100644
--- a/resources/js/Pages/Vault/Contact/Show.vue
+++ b/resources/js/Pages/Vault/Contact/Show.vue
@@ -3,6 +3,7 @@ import { ref, reactive } from 'vue';
 import { Link, router, useForm } from '@inertiajs/vue3';
 import { trans } from 'laravel-vue-i18n';
 import { flash } from '@/methods.js';
+import { onMounted } from 'vue';
 import JetDialogModal from '@/Components/Jetstream/DialogModal.vue';
 import JetConfirmationModal from '@/Components/Jetstream/ConfirmationModal.vue';
 import JetButton from '@/Components/Button.vue';
@@ -151,6 +152,19 @@ const download = () => {
     },
   });
 };
+
+const selectedOption = ref('');
+
+onMounted(() => {
+  const selectedPage = Object.values(props.data.template_pages).find((page) => page.selected);
+  if (selectedPage) {
+    selectedOption.value = selectedPage.url.show;
+  }
+});
+
+const navigateToSelected = () => {
+  router.visit(selectedOption.value);
+};
 </script>
 
 <template>
@@ -304,8 +318,8 @@ const download = () => {
               </div>
             </div>
 
-            <!-- all the pages -->
-            <div class="mb-8 w-full border-b border-gray-200 dark:border-gray-700">
+            <!-- page selector on desktop -->
+            <div class="hidden md:block mb-8 w-full border-b border-gray-200 dark:border-gray-700">
               <div class="flex overflow-x-hidden">
                 <div v-for="page in data.template_pages" :key="page.id" class="me-2 flex-none">
                   <Link
@@ -324,6 +338,19 @@ const download = () => {
               </div>
             </div>
 
+            <!-- page selector on mobile -->
+            <div class="md:hidden mb-8 w-full">
+              <p class="text-sm mb-2">{{ $t('Select a page') }}</p>
+              <select
+                v-model="selectedOption"
+                @change="navigateToSelected"
+                class="w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                <option v-for="page in data.template_pages" :key="page.id" :value="page.url.show">
+                  {{ page.name }}
+                </option>
+              </select>
+            </div>
+
             <!-- all the modules -->
             <div v-if="data.modules.length > 0">
               <div v-for="module in data.modules" :key="module.id">
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index eedd349d5b5..3850528b503 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="min-h-full">
-    <div class="fixed top-0 z-10 w-full">
-      <!-- main nav -->
+    <div class="sm:fixed top-0 z-10 w-full">
+      <!-- main nav - only displayed on desktop -->
       <nav
-        class="max-w-8xl mx-auto flex h-10 items-center justify-between border-b bg-gray-50 px-3 dark:border-slate-600 dark:bg-gray-800 dark:text-slate-200 sm:px-6">
+        class="hidden max-w-8xl mx-auto sm:flex h-10 items-center justify-between border-b bg-gray-50 px-3 dark:border-slate-600 dark:bg-gray-800 dark:text-slate-200 sm:px-6">
         <div
           class="dark:highlight-white/5 items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-sm dark:border-0 dark:border-gray-700 dark:bg-gray-400/20 dark:bg-gray-900 sm:flex">
           <InertiaLink :href="layoutData.url.vaults" class="flex-shrink-0 dark:text-sky-400">
@@ -204,111 +204,270 @@
         </div>
       </nav>
 
-      <!-- vault sub menu -->
-      <nav v-if="insideVault" class="bg-white dark:border-slate-300/10 dark:bg-gray-900 sm:border-b">
-        <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
-          <div class="flex items-baseline justify-between space-x-6">
-            <ul class="list-none text-sm font-medium">
-              <li class="inline">
-                <InertiaLink
-                  :href="layoutData.vault.url.dashboard"
-                  :class="{
-                    'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
-                      $page.component === 'Vault/Dashboard/Index',
-                  }"
-                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('Dashboard') }}
-                </InertiaLink>
-              </li>
-              <li class="inline">
-                <InertiaLink
-                  :href="layoutData.vault.url.contacts"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Contact') }"
-                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('Contacts') }}
-                </InertiaLink>
-              </li>
-              <li class="inline">
-                <InertiaLink
-                  :href="layoutData.vault.url.calendar"
-                  v-if="layoutData.vault.visibility.show_calendar_tab"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Calendar') }"
-                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('Calendar') }}
-                </InertiaLink>
-              </li>
-              <li class="inline">
-                <InertiaLink
-                  :href="layoutData.vault.url.journals"
-                  v-if="layoutData.vault.visibility.show_journal_tab"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Journal') }"
-                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('Journals') }}
-                </InertiaLink>
-              </li>
-              <li class="inline">
-                <InertiaLink
-                  :href="layoutData.vault.url.groups"
-                  v-if="layoutData.vault.visibility.show_group_tab"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Group') }"
-                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('Groups') }}
-                </InertiaLink>
-              </li>
-              <li class="inline">
-                <InertiaLink
-                  :href="layoutData.vault.url.companies"
-                  v-if="layoutData.vault.visibility.show_companies_tab"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Companies') }"
-                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('Companies') }}
-                </InertiaLink>
-              </li>
-              <li class="inline">
-                <InertiaLink
-                  :href="layoutData.vault.url.tasks"
-                  v-if="layoutData.vault.visibility.show_tasks_tab"
-                  :class="{
-                    'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
-                      $page.component.startsWith('Vault/Dashboard/Task'),
-                  }"
-                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('Tasks') }}
-                </InertiaLink>
-              </li>
-              <li class="inline">
-                <InertiaLink
-                  :href="layoutData.vault.url.reports"
-                  v-if="layoutData.vault.visibility.show_reports_tab"
-                  :class="{
-                    'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
-                      $page.component.startsWith('Vault/Reports'),
-                  }"
-                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('Reports') }}
-                </InertiaLink>
-              </li>
-              <li class="inline">
-                <InertiaLink
-                  :href="layoutData.vault.url.files"
-                  v-if="layoutData.vault.visibility.show_files_tab"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Files') }"
-                  class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
-                  {{ $t('Files') }}
-                </InertiaLink>
-              </li>
-              <li class="inline">
-                <InertiaLink
-                  v-if="layoutData.vault.permission.at_least_editor"
-                  :href="layoutData.vault.url.settings"
-                  :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Settings') }"
-                  class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white">
-                  {{ $t('Vault settings') }}
-                </InertiaLink>
-              </li>
-            </ul>
+      <!-- mobile nav -->
+      <div
+        class="sm:hidden pt-3 border-b bg-gray-50 px-3 dark:border-slate-600 dark:bg-gray-800 dark:text-slate-200 sm:px-6">
+        <!-- user / vault & logout -->
+        <div
+          class="flex mb-2 dark:highlight-white/5 items-center justify-between text-sm dark:border-0 dark:border-gray-700 dark:bg-gray-400/20 dark:bg-gray-900">
+          <div class="flex items-center border border-gray-200 rounded-lg bg-white px-2 py-1">
+            <InertiaLink :href="layoutData.url.vaults" class="flex-shrink-0 dark:text-sky-400">
+              {{ layoutData.user.name }}
+            </InertiaLink>
+
+            <!-- information about the current vault -->
+            <div v-if="layoutData.vault">
+              <span class="relative mx-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="relative inline h-3 w-3"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+              </span>
+              {{ layoutData.vault.name }}
+            </div>
+          </div>
+
+          <div class="flex items-center">
+            <!-- settings -->
+            <InertiaLink
+              :href="layoutData.url.settings"
+              class="border border-gray-200 rounded-lg bg-white px-2 py-1 mr-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </InertiaLink>
+
+            <!-- logout -->
+            <InertiaLink
+              class="border border-gray-200 rounded-lg bg-white px-2 py-1"
+              method="post"
+              :href="route('logout')"
+              as="button">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+              </svg>
+            </InertiaLink>
           </div>
         </div>
+
+        <!-- search box -->
+        <div v-if="insideVault" class="relative mb-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="absolute start-2 top-2 h-4 w-4 text-gray-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          <input
+            type="text"
+            class="dark:highlight-white/5 block w-full rounded-md border border-gray-300 px-2 py-1 text-center placeholder:text-gray-600 hover:cursor-pointer focus:border-indigo-500 focus:ring-indigo-500 dark:border-0 dark:border-gray-700 dark:bg-slate-900 placeholder:dark:text-gray-400 hover:dark:bg-slate-700 sm:text-sm"
+            :placeholder="$t('Search something')"
+            @focus="goToSearchPage" />
+        </div>
+      </div>
+
+      <!-- vault sub menu on desktop -->
+      <nav v-if="insideVault" class="hidden sm:block bg-white dark:border-slate-300/10 dark:bg-gray-900 sm:border-b">
+        <div class="max-w-8xl mx-auto px-4 py-2 sm:px-6 block">
+          <ul class="list-none text-sm font-medium">
+            <li class="inline">
+              <InertiaLink
+                :href="layoutData.vault.url.dashboard"
+                :class="{
+                  'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
+                    $page.component === 'Vault/Dashboard/Index',
+                }"
+                class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('Dashboard') }}
+              </InertiaLink>
+            </li>
+            <li class="inline">
+              <InertiaLink
+                :href="layoutData.vault.url.contacts"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Contact') }"
+                class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('Contacts') }}
+              </InertiaLink>
+            </li>
+            <li class="inline">
+              <InertiaLink
+                :href="layoutData.vault.url.calendar"
+                v-if="layoutData.vault.visibility.show_calendar_tab"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Calendar') }"
+                class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('Calendar') }}
+              </InertiaLink>
+            </li>
+            <li class="inline">
+              <InertiaLink
+                :href="layoutData.vault.url.journals"
+                v-if="layoutData.vault.visibility.show_journal_tab"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Journal') }"
+                class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('Journals') }}
+              </InertiaLink>
+            </li>
+            <li class="inline">
+              <InertiaLink
+                :href="layoutData.vault.url.groups"
+                v-if="layoutData.vault.visibility.show_group_tab"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Group') }"
+                class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('Groups') }}
+              </InertiaLink>
+            </li>
+            <li class="inline">
+              <InertiaLink
+                :href="layoutData.vault.url.companies"
+                v-if="layoutData.vault.visibility.show_companies_tab"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Companies') }"
+                class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('Companies') }}
+              </InertiaLink>
+            </li>
+            <li class="inline">
+              <InertiaLink
+                :href="layoutData.vault.url.tasks"
+                v-if="layoutData.vault.visibility.show_tasks_tab"
+                :class="{
+                  'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
+                    $page.component.startsWith('Vault/Dashboard/Task'),
+                }"
+                class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('Tasks') }}
+              </InertiaLink>
+            </li>
+            <li class="inline">
+              <InertiaLink
+                :href="layoutData.vault.url.reports"
+                v-if="layoutData.vault.visibility.show_reports_tab"
+                :class="{
+                  'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-900':
+                    $page.component.startsWith('Vault/Reports'),
+                }"
+                class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('Reports') }}
+              </InertiaLink>
+            </li>
+            <li class="inline">
+              <InertiaLink
+                :href="layoutData.vault.url.files"
+                v-if="layoutData.vault.visibility.show_files_tab"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Files') }"
+                class="me-2 rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white dark:bg-sky-400/20 dark:text-slate-400 hover:dark:text-slate-300">
+                {{ $t('Files') }}
+              </InertiaLink>
+            </li>
+            <li class="inline">
+              <InertiaLink
+                v-if="layoutData.vault.permission.at_least_editor"
+                :href="layoutData.vault.url.settings"
+                :class="{ 'bg-blue-700 text-white': $page.component.startsWith('Vault/Settings') }"
+                class="rounded-md px-2 py-1 hover:bg-gray-700 hover:text-white">
+                {{ $t('Vault settings') }}
+              </InertiaLink>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
+      <!-- vault sub menu on mobile -->
+      <nav v-if="insideVault" class="block md:hidden px-4 py-2">
+        <div class="relative">
+          <select
+            v-model="selectedOption"
+            @change="navigateToSelected"
+            class="w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+            <option value="" disabled>{{ $t('Select a page') }}</option>
+            <option :value="layoutData.vault.url.dashboard" :selected="$page.component.startsWith('Vault/Dashboard')">
+              {{ $t('Dashboard') }}
+            </option>
+            <option :value="layoutData.vault.url.contacts" :selected="$page.component.startsWith('Vault/Contact')">
+              {{ $t('Contacts') }}
+            </option>
+            <option
+              v-if="layoutData.vault.visibility.show_calendar_tab"
+              :value="layoutData.vault.url.calendar"
+              :selected="$page.component.startsWith('Vault/Calendar')">
+              {{ $t('Calendar') }}
+            </option>
+            <option
+              v-if="layoutData.vault.visibility.show_journal_tab"
+              :value="layoutData.vault.url.journals"
+              :selected="$page.component.startsWith('Vault/Journal')">
+              {{ $t('Journals') }}
+            </option>
+            <option
+              v-if="layoutData.vault.visibility.show_group_tab"
+              :value="layoutData.vault.url.groups"
+              :selected="$page.component.startsWith('Vault/Group')">
+              {{ $t('Groups') }}
+            </option>
+            <option
+              v-if="layoutData.vault.visibility.show_companies_tab"
+              :value="layoutData.vault.url.companies"
+              :selected="$page.component.startsWith('Vault/Companies')">
+              {{ $t('Companies') }}
+            </option>
+            <option
+              v-if="layoutData.vault.visibility.show_tasks_tab"
+              :value="layoutData.vault.url.tasks"
+              :selected="$page.component.startsWith('Vault/Dashboard/Task')">
+              {{ $t('Tasks') }}
+            </option>
+            <option
+              v-if="layoutData.vault.visibility.show_reports_tab"
+              :value="layoutData.vault.url.reports"
+              :selected="$page.component.startsWith('Vault/Reports')">
+              {{ $t('Reports') }}
+            </option>
+            <option
+              v-if="layoutData.vault.visibility.show_files_tab"
+              :value="layoutData.vault.url.files"
+              :selected="$page.component.startsWith('Vault/Files')">
+              {{ $t('Files') }}
+            </option>
+            <option
+              v-if="layoutData.vault.permission.at_least_editor"
+              :value="layoutData.vault.url.settings"
+              :selected="$page.component.startsWith('Vault/Settings')">
+              {{ $t('Vault settings') }}
+            </option>
+          </select>
+        </div>
       </nav>
     </div>
 
@@ -361,6 +520,7 @@ export default {
       style: {
         checked: false,
       },
+      selectedOption: '',
     };
   },
 
@@ -387,6 +547,10 @@ export default {
         localStorage.theme = 'light';
       }
     },
+
+    navigateToSelected() {
+      this.$inertia.visit(this.selectedOption);
+    },
   },
 };
 </script>
diff --git a/resources/js/Shared/Modules/ContactAvatar.vue b/resources/js/Shared/Modules/ContactAvatar.vue
index 7976642355a..bc3e654142c 100644
--- a/resources/js/Shared/Modules/ContactAvatar.vue
+++ b/resources/js/Shared/Modules/ContactAvatar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <avatar :data="data.avatar" :class="'mx-auto mb-6 sm:w-1/2'" :img-classes="'rounded sm:w-72'" />
+    <avatar :data="data.avatar" :class="'mx-auto mb-6 w-32 sm:w-1/2'" :img-classes="'rounded sm:w-72'" />
   </div>
 </template>
 
diff --git a/resources/js/Shared/Modules/ContactName.vue b/resources/js/Shared/Modules/ContactName.vue
index 45aef2b58fd..54c36baf999 100644
--- a/resources/js/Shared/Modules/ContactName.vue
+++ b/resources/js/Shared/Modules/ContactName.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4">
-    <div class="mb-1 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+    <div class="mb-1 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Name') }}</div>
       <InertiaLink :href="data.url.edit" class="relative">
         <svg
diff --git a/resources/js/Shared/Modules/GenderPronoun.vue b/resources/js/Shared/Modules/GenderPronoun.vue
index bbb6a49779c..a0f7e9f10d4 100644
--- a/resources/js/Shared/Modules/GenderPronoun.vue
+++ b/resources/js/Shared/Modules/GenderPronoun.vue
@@ -10,7 +10,7 @@ defineProps({
   <div class="mb-4 grid grid-cols-2 gap-4">
     <!-- gender -->
     <div>
-      <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+      <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
         <div class="mb-2 text-xs sm:mb-0">{{ $t('Gender') }}</div>
         <Link :href="data.url.edit" class="relative">
           <svg
@@ -36,7 +36,7 @@ defineProps({
 
     <!-- pronoun -->
     <div>
-      <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
+      <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
         <div class="mb-2 text-xs sm:mb-0">{{ $t('Pronoun') }}</div>
         <Link :href="data.url.edit" class="relative">
           <svg
diff --git a/resources/js/Shared/Modules/ImportantDates.vue b/resources/js/Shared/Modules/ImportantDates.vue
index ef27936e6f0..68f0c36b864 100644
--- a/resources/js/Shared/Modules/ImportantDates.vue
+++ b/resources/js/Shared/Modules/ImportantDates.vue
@@ -8,7 +8,7 @@ defineProps({
 
 <template>
   <div 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-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Important dates') }}</div>
       <Link :href="data.url.edit" class="relative">
         <svg
diff --git a/resources/js/Shared/Modules/JobInformation.vue b/resources/js/Shared/Modules/JobInformation.vue
index 461a29b1075..dfc1c085559 100644
--- a/resources/js/Shared/Modules/JobInformation.vue
+++ b/resources/js/Shared/Modules/JobInformation.vue
@@ -1,6 +1,6 @@
 <template>
   <div 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-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Job information') }}</div>
       <span v-if="!editJobInformation" class="relative cursor-pointer" @click="showEditModal">
         <svg
diff --git a/resources/js/Shared/Modules/Labels.vue b/resources/js/Shared/Modules/Labels.vue
index 3000deb76db..786382e7b9c 100644
--- a/resources/js/Shared/Modules/Labels.vue
+++ b/resources/js/Shared/Modules/Labels.vue
@@ -1,6 +1,6 @@
 <template>
   <div 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-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Labels') }}</div>
       <span v-if="!editLabelModalShown" class="relative cursor-pointer" @click="showEditModal">
         <svg
diff --git a/resources/js/Shared/Modules/Pets.vue b/resources/js/Shared/Modules/Pets.vue
index dedee69e6fb..843aae2ff0a 100644
--- a/resources/js/Shared/Modules/Pets.vue
+++ b/resources/js/Shared/Modules/Pets.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-10">
     <!-- title + cta -->
-    <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
+    <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
           <span class="relative me-1">
diff --git a/resources/js/Shared/Modules/Religion.vue b/resources/js/Shared/Modules/Religion.vue
index 79a8d237941..311a96307e7 100644
--- a/resources/js/Shared/Modules/Religion.vue
+++ b/resources/js/Shared/Modules/Religion.vue
@@ -41,7 +41,7 @@ const showEditModal = () => {
 
 <template>
   <div 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-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 flex">
       <!-- title -->
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Religion') }}</div>