From 43ac630269d66e643e97e5abecfd7bf794cf7047 Mon Sep 17 00:00:00 2001
From: Lukas Hroch <lukashroch@gmail.com>
Date: Thu, 10 Oct 2024 17:31:36 +0100
Subject: [PATCH] perf(ui): refs & vue nodes when not needed

---
 .../dialogs/event-notifications.vue           | 128 ++++-----
 .../components/dialogs/select-resource.vue    |  27 +-
 .../associated-foods/associated-food-list.vue |   3 +-
 .../fdbs/categories/add-category-dialog.vue   |  23 +-
 .../fdbs/categories/category-list.vue         |  49 ++--
 .../admin/src/components/fdbs/food-search.vue |   4 +-
 .../fdbs/locales/add-locale-dialog.vue        |  27 +-
 .../components/fdbs/locales/locale-list.vue   |  45 ++--
 .../fdbs/nutrients/add-nutrient-dialog.vue    | 134 ++++------
 .../fdbs/nutrients/nutrient-list.vue          |  60 ++---
 .../parameters/standard-portion.vue           |   4 +-
 .../portion-size-method-list.vue              |   8 +-
 .../components/feedback/cards/card-list.vue   |   3 +-
 .../cards/card-types/nutrient-group.vue       |   6 +-
 .../demographic-group-list.vue                |   3 +-
 .../henry-coefficient-list.vue                |   3 +-
 .../feedback/meals/table-field-list.vue       |   3 +-
 apps/admin/src/components/gallery/gallery.vue |   1 +
 .../src/components/jobs/polls-job-list.vue    | 117 ++++----
 .../admin/src/components/lists/color-list.vue |   3 +-
 apps/admin/src/components/lists/meal-list.vue |   3 +-
 .../src/components/lists/nutrient-list.vue    |   3 +-
 .../src/components/lists/options-list.vue     |   3 +-
 .../prompts/list/load-prompt-dialog.vue       |  54 ++--
 .../prompts/list/prompt-list-item.vue         | 171 +++++-------
 .../components/prompts/list/prompt-list.vue   | 253 ++++++++----------
 .../src/components/securables/securable.vue   |   4 +-
 apps/admin/src/components/user/mfa/mfa.vue    |  85 +++---
 apps/admin/src/scss/app.scss                  |  30 +--
 .../src/views/authentication/mfa-dialog.vue   |  25 +-
 apps/admin/src/views/fdbs/browse.vue          |   6 +-
 .../src/views/feedback-schemes/browse.vue     |   6 +-
 .../src/views/feedback-schemes/sections.vue   |   3 +-
 apps/admin/src/views/food-groups/browse.vue   |   6 +-
 .../src/views/images/drinkware-sets/edit.vue  |   1 +
 apps/admin/src/views/images/guide-drawer.vue  |   1 +
 apps/admin/src/views/jobs/browse.vue          |   6 +-
 apps/admin/src/views/languages/browse.vue     |   6 +-
 .../views/languages/translations/browse.vue   |   3 +-
 apps/admin/src/views/locales/browse.vue       |   6 +-
 .../src/views/locales/recipe-foods/browse.vue |   4 +-
 .../locales/recipe-foods/steps-dialog.vue     |  76 ++----
 .../src/views/locales/split-lists/browse.vue  |  61 +++--
 .../src/views/locales/split-words/browse.vue  |   6 +-
 .../src/views/locales/synonym-sets/browse.vue |   6 +-
 .../src/views/nutrient-tables/browse.vue      |   6 +-
 .../admin/src/views/nutrient-types/browse.vue |   6 +-
 .../admin/src/views/nutrient-units/browse.vue |   6 +-
 apps/admin/src/views/permissions/browse.vue   |   6 +-
 .../src/views/permissions/roles/browse.vue    |   6 +-
 .../src/views/permissions/users/browse.vue    |   6 +-
 apps/admin/src/views/roles/browse.vue         |   6 +-
 .../src/views/roles/permissions/browse.vue    |   6 +-
 apps/admin/src/views/roles/users/browse.vue   |   6 +-
 apps/admin/src/views/sign-in-logs/browse.vue  |   6 +-
 .../admin/src/views/standard-units/browse.vue |   6 +-
 .../standard-units/categories/browse.vue      |   4 +-
 .../src/views/standard-units/foods/browse.vue |   4 +-
 .../views/survey-scheme-prompts/browse.vue    |   6 +-
 .../src/views/survey-scheme-prompts/read.vue  |   2 +-
 .../admin/src/views/survey-schemes/browse.vue |   6 +-
 .../survey-schemes/data-export/browse.vue     |   3 +-
 .../data-export/data-export-section.vue       |   6 +-
 .../views/survey-schemes/prompts/browse.vue   |   4 +-
 apps/admin/src/views/surveys/browse.vue       |   6 +-
 .../src/views/surveys/overrides/browse.vue    |   2 +-
 .../src/views/surveys/respondents/browse.vue  |   4 +-
 .../src/views/surveys/sessions/browse.vue     |   6 +-
 .../src/views/surveys/submissions/browse.vue  |   6 +-
 apps/admin/src/views/tasks/browse.vue         |   5 +-
 apps/admin/src/views/user/jobs/browse.vue     |   6 +-
 .../user/personal-access-tokens/browse.vue    |   3 +-
 apps/admin/src/views/users/browse.vue         |   6 +-
 .../src/views/users/permissions/browse.vue    |   6 +-
 apps/admin/src/views/users/roles/browse.vue   |   6 +-
 .../elements/CategoryContentsView.vue         |   3 +-
 .../components/elements/FoodSearchResults.vue |  37 ---
 apps/survey/src/components/elements/index.ts  |   1 -
 .../prompts/partials/EditableFoodList.vue     |   4 +-
 apps/survey/src/scss/app.scss                 |   8 +-
 .../src/types/http/admin/nutrient-tables.ts   |  14 +-
 .../common/src/types/http/admin/references.ts |   9 +-
 .../components/feedback-user-info.vue         |  15 +-
 83 files changed, 752 insertions(+), 975 deletions(-)
 delete mode 100644 apps/survey/src/components/elements/FoodSearchResults.vue

diff --git a/apps/admin/src/components/dialogs/event-notifications.vue b/apps/admin/src/components/dialogs/event-notifications.vue
index 861cb6b2eb..26af4dd505 100644
--- a/apps/admin/src/components/dialogs/event-notifications.vue
+++ b/apps/admin/src/components/dialogs/event-notifications.vue
@@ -25,70 +25,70 @@
           <v-icon icon="fas fa-paper-plane" start /> {{ $t('notifications.add') }}
         </v-btn>
       </div>
-      <v-list class="py-0">
-        <template v-for="(item, idx) in items" :key="idx">
-          <v-list-item>
-            <template #prepend>
-              <v-icon>fas fa-paper-plane</v-icon>
-            </template>
-            <v-container>
-              <v-row>
-                <v-col cols="12" md="6">
-                  <v-select
-                    v-model="item.type"
-                    hide-details="auto"
-                    :items="events"
-                    name="type"
-                    :title="$t('notifications.events._')"
-                    variant="outlined"
-                  />
-                </v-col>
-                <v-col cols="12" md="6">
-                  <v-select
-                    v-model="item.channel"
-                    hide-details="auto"
-                    :items="channels"
-                    name="channel"
-                    :title="$t('notifications.channels._')"
-                    variant="outlined"
-                    @update:model-value="updateProps(idx)"
-                  />
-                </v-col>
-              </v-row>
-              <v-row>
-                <v-col>
-                  <v-text-field
-                    v-if="item.channel === 'webhook'"
-                    v-model="item.url"
-                    hide-details="auto"
-                    :label="$t('notifications.channels.url')"
-                    variant="outlined"
-                  />
-                  <v-text-field
-                    v-else-if="item.channel === 'email'"
-                    v-model="item.to"
-                    hide-details="auto"
-                    :label="$t('notifications.channels.to')"
-                    variant="outlined"
-                  />
-                  <v-text-field
-                    v-else-if="item.channel === 'slack'"
-                    v-model="item.channelId"
-                    hide-details="auto"
-                    :label="$t('notifications.channels.channelId')"
-                    variant="outlined"
-                  />
-                </v-col>
-              </v-row>
-            </v-container>
-            <template #append>
-              <v-list-item-action>
-                <v-btn icon="$delete" :title="$t('notifications.remove')" @click.stop="remove(idx)" />
-              </v-list-item-action>
-            </template>
-          </v-list-item>
-          <v-divider v-if="idx + 1 < items.length" :key="`div-${idx}`" />
-        </template>
+      <v-list class="list-border py-0">
+        <v-list-item v-for="(item, idx) in items" :key="idx">
+          <template #prepend>
+            <v-icon>fas fa-paper-plane</v-icon>
+          </template>
+          <v-container>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="item.type"
+                  hide-details="auto"
+                  :items="events"
+                  :name="`type-${idx}`"
+                  :title="$t('notifications.events._')"
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="item.channel"
+                  hide-details="auto"
+                  :items="channels"
+                  :name="`channel-${idx}`"
+                  :title="$t('notifications.channels._')"
+                  variant="outlined"
+                  @update:model-value="updateProps(idx)"
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  v-if="item.channel === 'webhook'"
+                  v-model="item.url"
+                  hide-details="auto"
+                  :label="$t('notifications.channels.url')"
+                  :name="`url-${idx}`"
+                  variant="outlined"
+                />
+                <v-text-field
+                  v-else-if="item.channel === 'email'"
+                  v-model="item.to"
+                  hide-details="auto"
+                  :label="$t('notifications.channels.to')"
+                  :name="`to-${idx}`"
+                  variant="outlined"
+                />
+                <v-text-field
+                  v-else-if="item.channel === 'slack'"
+                  v-model="item.channelId"
+                  hide-details="auto"
+                  :label="$t('notifications.channels.channelId')"
+                  :name="`channelId-${idx}`"
+                  variant="outlined"
+                />
+              </v-col>
+            </v-row>
+          </v-container>
+          <template #append>
+            <v-list-item-action>
+              <v-btn color="error" icon="$delete" :title="$t('notifications.remove')" @click.stop="remove(idx)" />
+            </v-list-item-action>
+          </template>
+        </v-list-item>
       </v-list>
       <v-card-actions>
         <v-spacer />
diff --git a/apps/admin/src/components/dialogs/select-resource.vue b/apps/admin/src/components/dialogs/select-resource.vue
index ebf2c01504..ddc090cecc 100644
--- a/apps/admin/src/components/dialogs/select-resource.vue
+++ b/apps/admin/src/components/dialogs/select-resource.vue
@@ -41,21 +41,18 @@
           @click:clear="clear"
         />
         <template v-if="items.length">
-          <v-list v-model:selected="selectedItemId" density="compact" min-height="350px">
-            <template v-for="(item, idx) in items" :key="item[itemId]">
-              <v-list-item :value="item[itemId]">
-                <template #prepend="{ isActive }">
-                  <v-list-item-action class="mr-2">
-                    <v-checkbox-btn :model-value="isActive " />
-                  </v-list-item-action>
-                  <v-icon>{{ itemIcon }}</v-icon>
-                </template>
-                <slot name="item" v-bind="{ item }">
-                  <v-list-item-title>{{ item[itemName] }}</v-list-item-title>
-                </slot>
-              </v-list-item>
-              <v-divider v-if="idx + 1 < items.length" :key="`div-${item[itemId]}`" />
-            </template>
+          <v-list v-model:selected="selectedItemId" class="list-border" density="compact" min-height="350px">
+            <v-list-item v-for="item in items" :key="item[itemId]" :value="item[itemId]">
+              <template #prepend="{ isActive }">
+                <v-list-item-action class="mr-2">
+                  <v-checkbox-btn :model-value="isActive " />
+                </v-list-item-action>
+                <v-icon>{{ itemIcon }}</v-icon>
+              </template>
+              <slot name="item" v-bind="{ item }">
+                <v-list-item-title>{{ item[itemName] }}</v-list-item-title>
+              </slot>
+            </v-list-item>
           </v-list>
           <div class="text-center">
             <v-pagination v-model="page" :length="lastPage" rounded />
diff --git a/apps/admin/src/components/fdbs/associated-foods/associated-food-list.vue b/apps/admin/src/components/fdbs/associated-foods/associated-food-list.vue
index 7164564a22..ae48c9e828 100644
--- a/apps/admin/src/components/fdbs/associated-foods/associated-food-list.vue
+++ b/apps/admin/src/components/fdbs/associated-foods/associated-food-list.vue
@@ -14,7 +14,7 @@
         @click.stop="add"
       />
     </v-toolbar>
-    <v-list class="py-0" lines="two">
+    <v-list class="list-border py-0" lines="two">
       <vue-draggable
         v-model="items"
         :animation="300"
@@ -24,7 +24,6 @@
         <v-list-item
           v-for="(item, index) in items"
           :key="item._id"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/components/fdbs/categories/add-category-dialog.vue b/apps/admin/src/components/fdbs/categories/add-category-dialog.vue
index 2083fb6172..bad66676d2 100644
--- a/apps/admin/src/components/fdbs/categories/add-category-dialog.vue
+++ b/apps/admin/src/components/fdbs/categories/add-category-dialog.vue
@@ -26,19 +26,16 @@
           {{ $t('fdbs.categories.alreadyIncluded', { code: selectedItems[0].code }) }}
         </v-alert>
         <template v-if="items.length">
-          <v-list v-model:selected="selected" density="compact" min-height="350px" multiple>
-            <template v-for="(item, idx) in items" :key="item.code">
-              <v-list-item :value="item.code">
-                <template #prepend="{ isActive }">
-                  <v-list-item-action class="mr-2">
-                    <v-checkbox-btn :model-value="isActive " />
-                  </v-list-item-action>
-                  <v-icon>fas fa-list</v-icon>
-                </template>
-                <v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
-              </v-list-item>
-              <v-divider v-if="idx + 1 < items.length" :key="`div-${item.code}`" />
-            </template>
+          <v-list v-model:selected="selected" class="list-border" density="compact" min-height="350px" multiple>
+            <v-list-item v-for="(item) in items" :key="item.code" :value="item.code">
+              <template #prepend="{ isActive }">
+                <v-list-item-action class="mr-2">
+                  <v-checkbox-btn :model-value="isActive " />
+                </v-list-item-action>
+                <v-icon>fas fa-list</v-icon>
+              </template>
+              <v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
+            </v-list-item>
           </v-list>
           <div class="text-center">
             <v-pagination v-model="page" :length="lastPage" rounded />
diff --git a/apps/admin/src/components/fdbs/categories/category-list.vue b/apps/admin/src/components/fdbs/categories/category-list.vue
index 5b6f606ec0..b82457adff 100644
--- a/apps/admin/src/components/fdbs/categories/category-list.vue
+++ b/apps/admin/src/components/fdbs/categories/category-list.vue
@@ -14,32 +14,29 @@
         @add="add"
       />
     </v-toolbar>
-    <v-list class="py-0">
-      <template v-for="(item, idx) in items" :key="item.code">
-        <v-list-item link>
-          <template #prepend>
-            <v-icon>$categories</v-icon>
-          </template>
-          <slot name="item.content" v-bind="{ item }">
-            <v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
-          </slot>
-          <template #append>
-            <slot name="item.action" v-bind="{ item }" />
-            <v-list-item-action v-if="!disabled">
-              <confirm-dialog
-                color="error"
-                icon
-                icon-left="$delete"
-                :label="$t('fdbs.categories.remove')"
-                @confirm="remove(item.code)"
-              >
-                {{ $t('common.action.confirm.remove', { name: item.name }) }}
-              </confirm-dialog>
-            </v-list-item-action>
-          </template>
-        </v-list-item>
-        <v-divider v-if="idx + 1 < items.length" :key="`div-${item.code}`" />
-      </template>
+    <v-list class="list-border py-0">
+      <v-list-item v-for="item in items" :key="item.code" link>
+        <template #prepend>
+          <v-icon>$categories</v-icon>
+        </template>
+        <slot name="item.content" v-bind="{ item }">
+          <v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
+        </slot>
+        <template #append>
+          <slot name="item.action" v-bind="{ item }" />
+          <v-list-item-action v-if="!disabled">
+            <confirm-dialog
+              color="error"
+              icon
+              icon-left="$delete"
+              :label="$t('fdbs.categories.remove')"
+              @confirm="remove(item.code)"
+            >
+              {{ $t('common.action.confirm.remove', { name: item.name }) }}
+            </confirm-dialog>
+          </v-list-item-action>
+        </template>
+      </v-list-item>
     </v-list>
     <v-messages
       v-if="errors.has('main.parentCategories')"
diff --git a/apps/admin/src/components/fdbs/food-search.vue b/apps/admin/src/components/fdbs/food-search.vue
index faabadf81e..2097385f6a 100644
--- a/apps/admin/src/components/fdbs/food-search.vue
+++ b/apps/admin/src/components/fdbs/food-search.vue
@@ -85,12 +85,12 @@ const categories = ref<CategoriesResponse['data']>([]);
 const foods = ref<FoodsResponse['data']>([]);
 const items = ref<FoodSearchItem[]>([]);
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   { title: '', key: 'resource', sortable: false },
   { title: i18n.t('fdbs.foods.global.code'), key: 'code' },
   { title: i18n.t('fdbs.foods.global.name'), key: 'englishName' },
   { title: i18n.t('fdbs.foods.local.name'), key: 'name' },
-]);
+];
 
 async function clear() {
   search.value = '';
diff --git a/apps/admin/src/components/fdbs/locales/add-locale-dialog.vue b/apps/admin/src/components/fdbs/locales/add-locale-dialog.vue
index 6e3c2b6c43..348ca33ab1 100644
--- a/apps/admin/src/components/fdbs/locales/add-locale-dialog.vue
+++ b/apps/admin/src/components/fdbs/locales/add-locale-dialog.vue
@@ -26,21 +26,18 @@
           {{ $t('fdbs.categories.alreadyIncluded', { code: selectedItems[0].code }) }}
         </v-alert>
         <template v-if="items.length">
-          <v-list v-model:selected="selected" density="compact" min-height="350px" multiple>
-            <template v-for="(item, idx) in items" :key="item.id">
-              <v-list-item :value="item.id">
-                <template #prepend="{ isActive }">
-                  <v-list-item-action class="mr-2">
-                    <v-checkbox-btn :model-value="isActive " />
-                  </v-list-item-action>
-                  <v-icon>$locales</v-icon>
-                </template>
-                <v-list-item-title>
-                  {{ item.code }} | {{ item.englishName }}
-                </v-list-item-title>
-              </v-list-item>
-              <v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
-            </template>
+          <v-list v-model:selected="selected" class="list-border" density="compact" min-height="350px" multiple>
+            <v-list-item v-for="item in items" :key="item.id" :value="item.id">
+              <template #prepend="{ isActive }">
+                <v-list-item-action class="mr-2">
+                  <v-checkbox-btn :model-value="isActive " />
+                </v-list-item-action>
+                <v-icon>$locales</v-icon>
+              </template>
+              <v-list-item-title>
+                {{ item.code }} | {{ item.englishName }}
+              </v-list-item-title>
+            </v-list-item>
           </v-list>
           <div class="text-center">
             <v-pagination v-model="page" :length="lastPage" rounded />
diff --git a/apps/admin/src/components/fdbs/locales/locale-list.vue b/apps/admin/src/components/fdbs/locales/locale-list.vue
index 991ae92592..7aa5fe491b 100644
--- a/apps/admin/src/components/fdbs/locales/locale-list.vue
+++ b/apps/admin/src/components/fdbs/locales/locale-list.vue
@@ -15,30 +15,27 @@
           {{ $t('fdbs.locales.description', { count: items.length }) }}
         </v-expansion-panel-title>
         <v-expansion-panel-text>
-          <v-list class="py-0" density="compact">
-            <template v-for="(item, idx) in items" :key="item.id">
-              <v-list-item link>
-                <template #prepend>
-                  <v-icon>$locales</v-icon>
-                </template>
-                <v-list-item-title>{{ item.englishName }}</v-list-item-title>
-                <template #append>
-                  <v-list-item-action v-if="!disabled" class="my-0">
-                    <confirm-dialog
-                      color="error"
-                      icon
-                      icon-left="$delete"
-                      :label="$t('fdbs.locales.remove')"
-                      small
-                      @confirm="remove(item.id)"
-                    >
-                      {{ $t('common.action.confirm.remove', { name: item.englishName }) }}
-                    </confirm-dialog>
-                  </v-list-item-action>
-                </template>
-              </v-list-item>
-              <v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
-            </template>
+          <v-list class="list-border py-0" density="compact">
+            <v-list-item v-for="item in items" :key="item.id" link>
+              <template #prepend>
+                <v-icon>$locales</v-icon>
+              </template>
+              <v-list-item-title>{{ item.englishName }}</v-list-item-title>
+              <template #append>
+                <v-list-item-action v-if="!disabled" class="my-0">
+                  <confirm-dialog
+                    color="error"
+                    icon
+                    icon-left="$delete"
+                    :label="$t('fdbs.locales.remove')"
+                    small
+                    @confirm="remove(item.id)"
+                  >
+                    {{ $t('common.action.confirm.remove', { name: item.englishName }) }}
+                  </confirm-dialog>
+                </v-list-item-action>
+              </template>
+            </v-list-item>
           </v-list>
         </v-expansion-panel-text>
       </v-expansion-panel>
diff --git a/apps/admin/src/components/fdbs/nutrients/add-nutrient-dialog.vue b/apps/admin/src/components/fdbs/nutrients/add-nutrient-dialog.vue
index cf6a726a98..99c519b6c5 100644
--- a/apps/admin/src/components/fdbs/nutrients/add-nutrient-dialog.vue
+++ b/apps/admin/src/components/fdbs/nutrients/add-nutrient-dialog.vue
@@ -40,24 +40,21 @@
           </v-col>
         </v-row>
         <v-alert v-if="isAlreadyIncluded" type="error">
-          {{ $t('fdbs.nutrients.alreadyIncluded', { id: selectedRecord?.id }) }}
+          {{ $t('fdbs.nutrients.alreadyIncluded', { id: selected.at(0)?.id }) }}
         </v-alert>
         <template v-if="items.length">
-          <v-list v-model:selected="selectedRecordId" density="compact" min-height="350px">
-            <template v-for="(item, idx) in items" :key="item.id">
-              <v-list-item :value="item.id">
-                <template #prepend="{ isActive }">
-                  <v-list-item-action class="mr-2">
-                    <v-checkbox-btn :model-value="isActive " />
-                  </v-list-item-action>
-                  <v-icon>fas fa-list</v-icon>
-                </template>
-                <v-list-item-title>
-                  {{ item.nutrientTableRecordId }} | {{ item.name }}
-                </v-list-item-title>
-              </v-list-item>
-              <v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
-            </template>
+          <v-list v-model:selected="selected" class="list-border" density="compact" min-height="350px">
+            <v-list-item v-for="item in items" :key="item.id" :value="item">
+              <template #prepend="{ isActive }">
+                <v-list-item-action class="mr-2">
+                  <v-checkbox-btn :model-value="isActive " />
+                </v-list-item-action>
+                <v-icon>fas fa-list</v-icon>
+              </template>
+              <v-list-item-title>
+                {{ item.nutrientTableRecordId }} | {{ item.name }}
+              </v-list-item-title>
+            </v-list-item>
           </v-list>
           <div class="text-center">
             <v-pagination v-model="page" :length="lastPage" rounded />
@@ -69,102 +66,75 @@
       </v-card-text>
       <v-card-actions>
         <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="close">
-          <v-icon $cancel start />{{ $t('common.action.cancel') }}
+          <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
         <v-btn
           class="font-weight-bold"
           color="info"
-          :disabled="!selectedRecordId || isAlreadyIncluded"
+          :disabled="!isSelected || isAlreadyIncluded"
           variant="text"
           @click.stop="confirm"
         >
-          <v-icon $success start />{{ $t('common.action.ok') }}
+          <v-icon icon="$success" start />{{ $t('common.action.ok') }}
         </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import { defineComponent, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import type {
   FoodDatabaseRefs,
-  NutrientTableRecordsResponse,
+  NutrientTableRecordAttributes,
+  NutrientTableRecordReference,
 } from '@intake24/common/types/http/admin';
-import type { NutrientTableRecordAttributes } from '@intake24/db';
 import { useFetchList } from '@intake24/admin/composables';
 import { copy } from '@intake24/common/util';
 
-export default defineComponent({
-  name: 'AddNutrientDialog',
+defineOptions({ name: 'AddNutrientDialog' });
 
-  props: {
-    currentItems: {
-      type: Array as PropType<NutrientTableRecordAttributes[]>,
-      required: true,
-    },
-    nutrientTables: {
-      type: Array as PropType<FoodDatabaseRefs['nutrientTables']>,
-      required: true,
-    },
+const props = defineProps({
+  currentItems: {
+    type: Array as PropType<NutrientTableRecordAttributes[]>,
+    required: true,
   },
+  nutrientTables: {
+    type: Array as PropType<FoodDatabaseRefs['nutrientTables']>,
+    required: true,
+  },
+});
 
-  emits: ['add'],
-
-  setup(props) {
-    const selectedRecordId = ref<string | null>(null);
-    const selectedTableId = ref(props.nutrientTables.length ? props.nutrientTables[0].id : ':id');
-
-    const { dialog, loading, page, lastPage, search, items, fetch, clear } = useFetchList<
-      NutrientTableRecordsResponse['data'][number]
-    >('admin/references/nutrient-tables/:id/records', selectedTableId);
+const emit = defineEmits(['add']);
 
-    return {
-      dialog,
-      loading,
-      items,
-      page,
-      lastPage,
-      search,
-      selectedRecordId,
-      selectedTableId,
-      fetch,
-      clear,
-    };
-  },
+const selected = ref<NutrientTableRecordAttributes[]>([]);
+const selectedTableId = ref(props.nutrientTables.length ? props.nutrientTables[0].id : ':id');
 
-  computed: {
-    selectedRecord(): NutrientTableRecordAttributes | null {
-      const { selectedRecordId } = this;
-      if (!selectedRecordId)
-        return null;
+const { dialog, loading, page, lastPage, search, items, fetch, clear } = useFetchList<
+  NutrientTableRecordReference
+>('admin/references/nutrient-tables/:id/records', selectedTableId);
 
-      return this.items.find(item => item.id === selectedRecordId) ?? null;
-    },
-    isAlreadyIncluded(): boolean {
-      if (!this.currentItems.length || !this.selectedRecordId)
-        return false;
+const isSelected = computed(() => !!selected.value.length);
+const isAlreadyIncluded = computed(() => {
+  if (!props.currentItems.length || !selected.value.length)
+    return false;
 
-      return !!this.currentItems.find(item => item.id === this.selectedRecordId);
-    },
-  },
+  return !!props.currentItems.find(item => item.id === selected.value.at(0)?.id);
+});
 
-  methods: {
-    close() {
-      this.selectedRecordId = null;
-      this.dialog = false;
-    },
+function close() {
+  selected.value = [];
+  dialog.value = false;
+};
 
-    confirm() {
-      if (!this.selectedRecord)
-        return;
+function confirm() {
+  if (!selected.value.length)
+    return;
 
-      this.$emit('add', copy(this.selectedRecord));
-      this.close();
-    },
-  },
-});
+  emit('add', copy(selected.value.at(0)));
+  close();
+};
 </script>
diff --git a/apps/admin/src/components/fdbs/nutrients/nutrient-list.vue b/apps/admin/src/components/fdbs/nutrients/nutrient-list.vue
index 3a2d9652cb..f670767f92 100644
--- a/apps/admin/src/components/fdbs/nutrients/nutrient-list.vue
+++ b/apps/admin/src/components/fdbs/nutrients/nutrient-list.vue
@@ -12,35 +12,32 @@
         @add="add"
       />
     </v-toolbar>
-    <v-list class="py-0" lines="two">
-      <template v-for="(item, idx) in items" :key="item.id">
-        <v-list-item link>
-          <template #prepend>
-            <v-icon>$nutrient-types</v-icon>
-          </template>
-          <v-list-item-title>
-            {{ getNutrientTableName(item.nutrientTableId) }}
-          </v-list-item-title>
-          <v-list-item-subtitle>
-            {{ $t('common.id') }}: {{ item.nutrientTableRecordId }} | {{ $t('common.name') }}:
-            {{ item.name }}
-          </v-list-item-subtitle>
-          <template #append>
-            <v-list-item-action v-if="!disabled">
-              <confirm-dialog
-                color="error"
-                icon
-                icon-left="$delete"
-                :label="$t('fdbs.nutrients.remove')"
-                @confirm="remove(item.id)"
-              >
-                {{ $t('common.action.confirm.remove', { name: item.name }) }}
-              </confirm-dialog>
-            </v-list-item-action>
-          </template>
-        </v-list-item>
-        <v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
-      </template>
+    <v-list class="list-border py-0" lines="two">
+      <v-list-item v-for="item in items" :key="item.id" link>
+        <template #prepend>
+          <v-icon>$nutrient-types</v-icon>
+        </template>
+        <v-list-item-title>
+          {{ getNutrientTableName(item.nutrientTableId) }}
+        </v-list-item-title>
+        <v-list-item-subtitle>
+          {{ $t('common.id') }}: {{ item.nutrientTableRecordId }} | {{ $t('common.name') }}:
+          {{ item.name }}
+        </v-list-item-subtitle>
+        <template #append>
+          <v-list-item-action v-if="!disabled">
+            <confirm-dialog
+              color="error"
+              icon
+              icon-left="$delete"
+              :label="$t('fdbs.nutrients.remove')"
+              @confirm="remove(item.id)"
+            >
+              {{ $t('common.action.confirm.remove', { name: item.name }) }}
+            </confirm-dialog>
+          </v-list-item-action>
+        </template>
+      </v-list-item>
     </v-list>
     <v-messages
       v-if="errors.has('nutrientRecords')"
@@ -55,16 +52,15 @@
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
 
-import type { FoodDatabaseRefs } from '@intake24/common/types/http/admin';
+import type { FoodDatabaseRefs, NutrientTableRecordAttributes } from '@intake24/common/types/http/admin';
 import type { Errors } from '@intake24/common/util';
-import type { NutrientTableRecordAttributes } from '@intake24/db';
 import { useI18n } from '@intake24/i18n';
 import { ConfirmDialog } from '@intake24/ui';
 
 import AddNutrientDialog from './add-nutrient-dialog.vue';
 
 export default defineComponent({
-  name: 'FoodCompositionList',
+  name: 'NutrientList',
 
   components: { AddNutrientDialog, ConfirmDialog },
 
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/standard-portion.vue b/apps/admin/src/components/fdbs/portion-sizes/parameters/standard-portion.vue
index e0be26fc65..8be2ecd964 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/standard-portion.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/standard-portion.vue
@@ -28,7 +28,7 @@
           handle=".drag-and-drop__handle"
           tag="tbody"
         >
-          <tr v-for="(unit, idx) in parameters.units" :key="unit.name" class="drag-and-drop__item">
+          <tr v-for="(unit, idx) in parameters.units" :key="unit.name">
             <td>
               <v-icon class="drag-and-drop__handle">
                 $handle
@@ -66,6 +66,8 @@
                 icon
                 icon-left="$delete"
                 :label="$t('standard-units.remove')"
+                size="small"
+                variant="text"
                 @confirm="remove(idx)"
               >
                 {{ $t('common.action.confirm.delete', { name: unit.name }) }}
diff --git a/apps/admin/src/components/fdbs/portion-sizes/portion-size-method-list.vue b/apps/admin/src/components/fdbs/portion-sizes/portion-size-method-list.vue
index c9179f7271..4eb3d9db23 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/portion-size-method-list.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/portion-size-method-list.vue
@@ -14,17 +14,13 @@
         @click.stop="add"
       />
     </v-toolbar>
-    <v-list class="py-0" lines="two">
+    <v-list class="list-border py-0" lines="two">
       <vue-draggable
         v-model="items"
         :animation="300"
         handle=".drag-and-drop__handle"
       >
-        <v-list-item
-          v-for="(item, index) in items"
-          :key="item._id"
-          class="drag-and-drop__item"
-        >
+        <v-list-item v-for="(item, index) in items" :key="item._id">
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
           </template>
diff --git a/apps/admin/src/components/feedback/cards/card-list.vue b/apps/admin/src/components/feedback/cards/card-list.vue
index 8b3eb43469..07cd452c95 100644
--- a/apps/admin/src/components/feedback/cards/card-list.vue
+++ b/apps/admin/src/components/feedback/cards/card-list.vue
@@ -25,7 +25,7 @@
         <json-editor-dialog v-model="cards" />
       </options-menu>
     </v-toolbar>
-    <v-list lines="two">
+    <v-list class="list-border" lines="two">
       <vue-draggable
         v-model="cards"
         :animation="300"
@@ -34,7 +34,6 @@
         <v-list-item
           v-for="(card, index) in cards"
           :key="card.id"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/components/feedback/cards/card-types/nutrient-group.vue b/apps/admin/src/components/feedback/cards/card-types/nutrient-group.vue
index 1dc2884c3f..5cc5b84d45 100644
--- a/apps/admin/src/components/feedback/cards/card-types/nutrient-group.vue
+++ b/apps/admin/src/components/feedback/cards/card-types/nutrient-group.vue
@@ -11,12 +11,11 @@
         <v-row>
           <v-col cols="12" md="6">
             <v-card-title>{{ $t('nutrient-types.current') }}</v-card-title>
-            <v-list>
+            <v-list class="list-border">
               <transition-group name="drag-and-drop" type="transition">
                 <v-list-item
                   v-for="(nutrientType, idx) in currentNutrientTypes"
                   :key="nutrientType.id"
-                  class="list-item-border"
                   link
                 >
                   <template #prepend>
@@ -45,12 +44,11 @@
               prepend-inner-icon="$search"
               variant="outlined"
             />
-            <v-list>
+            <v-list class="list-border">
               <transition-group name="drag-and-drop" type="transition">
                 <v-list-item
                   v-for="nutrientType in visibleNutrientTypes"
                   :key="nutrientType.id"
-                  class="list-item-border"
                   link
                 >
                   <template #prepend>
diff --git a/apps/admin/src/components/feedback/demographic-groups/demographic-group-list.vue b/apps/admin/src/components/feedback/demographic-groups/demographic-group-list.vue
index 24f549ecff..f69c603a93 100644
--- a/apps/admin/src/components/feedback/demographic-groups/demographic-group-list.vue
+++ b/apps/admin/src/components/feedback/demographic-groups/demographic-group-list.vue
@@ -35,7 +35,7 @@
         <json-editor-dialog v-model="items" @update:model-value="update" />
       </options-menu>
     </v-toolbar>
-    <v-list lines="two">
+    <v-list class="list-border" lines="two">
       <vue-draggable
         v-model="items"
         :animation="300"
@@ -45,7 +45,6 @@
         <v-list-item
           v-for="(group, index) in items"
           :key="group.id"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/components/feedback/henry-coefficients/henry-coefficient-list.vue b/apps/admin/src/components/feedback/henry-coefficients/henry-coefficient-list.vue
index 6cb90975c2..1c871fdd55 100644
--- a/apps/admin/src/components/feedback/henry-coefficients/henry-coefficient-list.vue
+++ b/apps/admin/src/components/feedback/henry-coefficients/henry-coefficient-list.vue
@@ -35,7 +35,7 @@
         <json-editor-dialog v-model="items" @update:model-value="update" />
       </options-menu>
     </v-toolbar>
-    <v-list lines="two">
+    <v-list class="list-border" lines="two">
       <vue-draggable
         v-model="items"
         :animation="300"
@@ -45,7 +45,6 @@
         <v-list-item
           v-for="(coefficient, index) in items"
           :key="coefficient.id"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/components/feedback/meals/table-field-list.vue b/apps/admin/src/components/feedback/meals/table-field-list.vue
index 06d331b16e..e646446291 100644
--- a/apps/admin/src/components/feedback/meals/table-field-list.vue
+++ b/apps/admin/src/components/feedback/meals/table-field-list.vue
@@ -33,7 +33,7 @@
         {{ $t('feedback-schemes.meals.fields.reset.text') }}
       </confirm-dialog>
     </v-toolbar>
-    <v-list lines="two">
+    <v-list class="list-border" lines="two">
       <vue-draggable
         v-model="items"
         :animation="300"
@@ -43,7 +43,6 @@
         <v-list-item
           v-for="(item, index) in items"
           :key="item.fieldId"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/components/gallery/gallery.vue b/apps/admin/src/components/gallery/gallery.vue
index 3bff95e80a..b336e1732d 100644
--- a/apps/admin/src/components/gallery/gallery.vue
+++ b/apps/admin/src/components/gallery/gallery.vue
@@ -54,6 +54,7 @@
                 icon
                 icon-left="$delete"
                 :label="$t('common.action.delete')"
+                variant="text"
                 @confirm="remove(item)"
               >
                 {{ $t('common.action.confirm.delete', { name: item.id }) }}
diff --git a/apps/admin/src/components/jobs/polls-job-list.vue b/apps/admin/src/components/jobs/polls-job-list.vue
index 7c02a34127..e307763ca1 100644
--- a/apps/admin/src/components/jobs/polls-job-list.vue
+++ b/apps/admin/src/components/jobs/polls-job-list.vue
@@ -1,64 +1,61 @@
 <template>
-  <v-list class lines="two">
-    <template v-for="(job, idx) in jobs" :key="job.id">
-      <v-list-item>
-        <template #prepend>
-          <v-avatar color="grey" icon="$jobs" />
-        </template>
-        <v-list-item-title>{{ $t(`jobs.types.${job.type}._`) }}</v-list-item-title>
-        <v-list-item-subtitle v-if="job.message">
-          {{ job.message }}
-        </v-list-item-subtitle>
-        <template #append>
-          <v-list-item-action class="d-flex flex-column">
-            <v-chip size="small">
-              {{ $t('common.startedAt') }}:
-              {{ job.startedAt ? new Date(job.startedAt).toLocaleString() : $t('common.na') }}
-            </v-chip>
-            <v-chip v-if="job.completedAt" class="mt-1" size="small">
-              {{ $t('common.completedAt') }}:
-              {{ job.completedAt ? new Date(job.completedAt).toLocaleString() : $t('common.na') }}
-            </v-chip>
-          </v-list-item-action>
-          <v-list-item-action>
-            <v-btn
-              :disabled="!downloadUrlAvailable(job)"
-              icon
-              size="large"
-              :title="$t('common.action.download')"
-              @click="download(job)"
-            >
-              <v-icon color="secondary">
-                $download
-              </v-icon>
-            </v-btn>
-          </v-list-item-action>
-          <v-list-item-action>
-            <v-progress-circular
-              v-if="(job.progress || 0) !== 1"
-              color="info"
-              :model-value="Math.ceil((job.progress || 0) * 100)"
-              :rotate="-90"
-              :size="45"
-              :width="6"
-            >
-              <span class="font-weight-bold text--primary">
-                {{ Math.ceil((job.progress || 0) * 100) }}
-              </span>
-            </v-progress-circular>
-            <template v-else>
-              <v-icon v-if="job.successful" color="success" size="large">
-                $check
-              </v-icon>
-              <v-icon v-if="!job.successful" color="error" size="large">
-                $times
-              </v-icon>
-            </template>
-          </v-list-item-action>
-        </template>
-      </v-list-item>
-      <v-divider v-if="idx + 1 < jobs.length" :key="`div-${job.id}`" />
-    </template>
+  <v-list class="list-border" lines="two">
+    <v-list-item v-for="job in jobs" :key="job.id">
+      <template #prepend>
+        <v-avatar color="grey" icon="$jobs" />
+      </template>
+      <v-list-item-title>{{ $t(`jobs.types.${job.type}._`) }}</v-list-item-title>
+      <v-list-item-subtitle v-if="job.message">
+        {{ job.message }}
+      </v-list-item-subtitle>
+      <template #append>
+        <v-list-item-action class="d-flex flex-column">
+          <v-chip size="small">
+            {{ $t('common.startedAt') }}:
+            {{ job.startedAt ? new Date(job.startedAt).toLocaleString() : $t('common.na') }}
+          </v-chip>
+          <v-chip v-if="job.completedAt" class="mt-1" size="small">
+            {{ $t('common.completedAt') }}:
+            {{ job.completedAt ? new Date(job.completedAt).toLocaleString() : $t('common.na') }}
+          </v-chip>
+        </v-list-item-action>
+        <v-list-item-action>
+          <v-btn
+            :disabled="!downloadUrlAvailable(job)"
+            icon
+            size="large"
+            :title="$t('common.action.download')"
+            @click="download(job)"
+          >
+            <v-icon color="secondary">
+              $download
+            </v-icon>
+          </v-btn>
+        </v-list-item-action>
+        <v-list-item-action>
+          <v-progress-circular
+            v-if="(job.progress || 0) !== 1"
+            color="info"
+            :model-value="Math.ceil((job.progress || 0) * 100)"
+            :rotate="-90"
+            :size="45"
+            :width="6"
+          >
+            <span class="font-weight-bold text--primary">
+              {{ Math.ceil((job.progress || 0) * 100) }}
+            </span>
+          </v-progress-circular>
+          <template v-else>
+            <v-icon v-if="job.successful" color="success" size="large">
+              $check
+            </v-icon>
+            <v-icon v-if="!job.successful" color="error" size="large">
+              $times
+            </v-icon>
+          </template>
+        </v-list-item-action>
+      </template>
+    </v-list-item>
   </v-list>
 </template>
 
diff --git a/apps/admin/src/components/lists/color-list.vue b/apps/admin/src/components/lists/color-list.vue
index 5cf4ee76fe..dace61698b 100644
--- a/apps/admin/src/components/lists/color-list.vue
+++ b/apps/admin/src/components/lists/color-list.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-list>
+    <v-list class="list-border">
       <vue-draggable
         v-model="items"
         :animation="300"
@@ -10,7 +10,6 @@
         <v-list-item
           v-for="(item, idx) in items"
           :key="item._id"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/components/lists/meal-list.vue b/apps/admin/src/components/lists/meal-list.vue
index 5d723251e1..7c4c0e30a7 100644
--- a/apps/admin/src/components/lists/meal-list.vue
+++ b/apps/admin/src/components/lists/meal-list.vue
@@ -45,7 +45,7 @@
         <json-editor-dialog v-model="meals" />
       </options-menu>
     </v-toolbar>
-    <v-list lines="two">
+    <v-list class="list-border" lines="two">
       <vue-draggable
         v-model="meals"
         :animation="300"
@@ -54,7 +54,6 @@
         <v-list-item
           v-for="(meal, index) in meals"
           :key="meal.name.en"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/components/lists/nutrient-list.vue b/apps/admin/src/components/lists/nutrient-list.vue
index 39dbcd31d7..be72a331bc 100644
--- a/apps/admin/src/components/lists/nutrient-list.vue
+++ b/apps/admin/src/components/lists/nutrient-list.vue
@@ -27,7 +27,7 @@
         {{ $t('nutrient-types.reset.text') }}
       </confirm-dialog>
     </v-toolbar>
-    <v-list>
+    <v-list class="list-border">
       <vue-draggable
         v-model="items"
         :animation="300"
@@ -37,7 +37,6 @@
         <v-list-item
           v-for="(nutrientType, idx) in items"
           :key="nutrientType.id.join(':')"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/components/lists/options-list.vue b/apps/admin/src/components/lists/options-list.vue
index 92f3884a45..b4b02b7637 100644
--- a/apps/admin/src/components/lists/options-list.vue
+++ b/apps/admin/src/components/lists/options-list.vue
@@ -11,7 +11,7 @@
         <v-btn color="primary" icon="$add" size="small" :title="$t('common.options.add')" @click.stop="add" />
       </v-toolbar>
       <v-divider />
-      <v-list density="compact">
+      <v-list class="list-border" density="compact">
         <vue-draggable
           v-model="currentOptions"
           :animation="300"
@@ -21,7 +21,6 @@
           <v-list-item
             v-for="(option, idx) in currentOptions"
             :key="option.id"
-            class="drag-and-drop__item"
             :ripple="false"
           >
             <template #prepend>
diff --git a/apps/admin/src/components/prompts/list/load-prompt-dialog.vue b/apps/admin/src/components/prompts/list/load-prompt-dialog.vue
index b0cefbe496..1cc42581a9 100644
--- a/apps/admin/src/components/prompts/list/load-prompt-dialog.vue
+++ b/apps/admin/src/components/prompts/list/load-prompt-dialog.vue
@@ -36,27 +36,24 @@
         <v-alert v-if="promptAlreadyExists" type="error">
           {{
             $t('survey-schemes.prompts.templates.alreadyExists', {
-              promptId: selectedPrompt?.id,
+              promptId: selected.at(0)?.id,
             })
           }}
         </v-alert>
         <template v-if="prompts.length">
-          <v-list v-model:selected="selectedId" lines="two" min-height="350px">
-            <template v-for="(prompt, idx) in prompts" :key="prompt.id">
-              <v-list-item :value="prompt.id">
-                <template #prepend="{ isActive }">
-                  <v-list-item-action class="mr-2">
-                    <v-checkbox-btn :model-value="isActive " />
-                  </v-list-item-action>
-                  <v-icon>fas fa-question-circle</v-icon>
-                </template>
-                <v-list-item-title>{{ prompt.name }}</v-list-item-title>
-                <v-list-item-subtitle>
-                  {{ `ID: ${prompt.id} | Type: ${prompt.component}` }}
-                </v-list-item-subtitle>
-              </v-list-item>
-              <v-divider v-if="idx + 1 < prompts.length" :key="`div-${prompt.id}`" />
-            </template>
+          <v-list v-model:selected="selected" class="list-border" lines="two" min-height="350px">
+            <v-list-item v-for="prompt in prompts" :key="prompt.id" :value="prompt">
+              <template #prepend="{ isActive }">
+                <v-list-item-action class="mr-2">
+                  <v-checkbox-btn :model-value="isActive " />
+                </v-list-item-action>
+                <v-icon>fas fa-question-circle</v-icon>
+              </template>
+              <v-list-item-title>{{ prompt.name }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ `ID: ${prompt.id} | Type: ${prompt.component}` }}
+              </v-list-item-subtitle>
+            </v-list-item>
           </v-list>
           <div class="text-center">
             <v-pagination v-model="page" :length="lastPage" rounded />
@@ -75,7 +72,7 @@
         <v-btn
           class="font-weight-bold"
           color="info"
-          :disabled="!selectedId || promptAlreadyExists"
+          :disabled="!isSelected || promptAlreadyExists"
           variant="text"
           @click.stop="confirm"
         >
@@ -125,19 +122,10 @@ const lastPage = ref<number | undefined>();
 const search = ref<string | null>(null);
 
 const prompts = ref<Prompt[]>([]);
-const selectedId = ref<string | undefined>();
+const selected = ref<Prompt[]>([]);
 
-const selectedPrompt = computed(() => {
-  if (!selectedId.value)
-    return undefined;
-
-  return prompts.value.find(prompt => prompt.id === selectedId.value);
-});
-
-const promptAlreadyExists = computed(() => {
-  const match = props.promptIds.find(id => id === selectedPrompt.value?.id);
-  return !!match;
-});
+const isSelected = computed(() => !!selected.value.length);
+const promptAlreadyExists = computed(() => !!props.promptIds.find(id => id === selected.value.at(0)?.id));
 
 async function fetchLocally(search: string | null, page: number, limit = 5) {
   const currentPage = page - 1;
@@ -183,7 +171,7 @@ async function fetch() {
 }
 
 function close() {
-  selectedId.value = undefined;
+  selected.value = [];
   dialog.value = false;
 };
 
@@ -192,10 +180,10 @@ function cancel() {
 };
 
 function confirm() {
-  if (!selectedPrompt.value)
+  if (!isSelected.value)
     return;
 
-  emit('load', copy(selectedPrompt.value));
+  emit('load', copy(selected.value.at(0)));
   close();
 };
 
diff --git a/apps/admin/src/components/prompts/list/prompt-list-item.vue b/apps/admin/src/components/prompts/list/prompt-list-item.vue
index 4b496ce451..10eb2a25d7 100644
--- a/apps/admin/src/components/prompts/list/prompt-list-item.vue
+++ b/apps/admin/src/components/prompts/list/prompt-list-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-list-item class="drag-and-drop__item">
+  <v-list-item>
     <template #prepend>
       <v-avatar class="drag-and-drop__handle" icon="$handle" />
     </template>
@@ -102,120 +102,95 @@
   </v-list-item>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
 import { deepEqual } from 'fast-equals';
-import { defineComponent } from 'vue';
+import { computed, ref } from 'vue';
 
 import type { Prompt } from '@intake24/common/prompts';
-import { copy } from '@intake24/common/util';
+import { copy as copyObject } from '@intake24/common/util';
 import { ConfirmDialog } from '@intake24/ui';
 
 import type { MoveSection } from './prompt-list.vue';
 import SaveAsTemplateDialog from './save-as-template-dialog.vue';
 
-export default defineComponent({
-  name: 'PromptListItem',
+defineOptions({ name: 'PromptListItem' });
 
-  components: {
-    ConfirmDialog,
-    SaveAsTemplateDialog,
+const props = defineProps({
+  mode: {
+    type: String as PropType<'full' | 'override'>,
+    default: 'full',
   },
-
-  props: {
-    mode: {
-      type: String as PropType<'full' | 'override'>,
-      default: 'full',
-    },
-    prompt: {
-      type: Object as PropType<Prompt>,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
-    moveSections: {
-      type: Array as PropType<MoveSection[]>,
-      default: () => [],
-    },
-    templates: {
-      type: Array as PropType<Prompt[]>,
-      default: () => [],
-    },
+  prompt: {
+    type: Object as PropType<Prompt>,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+  moveSections: {
+    type: Array as PropType<MoveSection[]>,
+    default: () => [],
+  },
+  templates: {
+    type: Array as PropType<Prompt[]>,
+    default: () => [],
   },
+});
 
-  emits: ['prompt:copy', 'prompt:edit', 'prompt:move', 'prompt:remove', 'prompt:sync'],
+const emit = defineEmits(['prompt:copy', 'prompt:edit', 'prompt:move', 'prompt:remove', 'prompt:sync']);
 
-  data() {
-    return {
-      contextMenu: false,
-      moveToSection: null,
-    };
-  },
+const contextMenu = ref(false);
+const moveToSection = ref<string | null>(null);
 
-  computed: {
-    isOverrideMode(): boolean {
-      return this.mode === 'override';
-    },
+const isOverrideMode = computed(() => props.mode === 'override');
+const template = computed(() => props.templates.find(
+  template => template.id === props.prompt.id && template.name === props.prompt.name,
+));
+const hasTemplate = computed(() => !!template.value);
 
-    template(): Prompt | undefined {
-      return this.templates.find(
-        template => template.id === this.prompt.id && template.name === this.prompt.name,
-      );
-    },
+const isInSyncWithTemplate = computed(() => !!template.value && deepEqual(props.prompt, template.value));
 
-    hasTemplate(): boolean {
-      return !!this.template;
-    },
+function copy() {
+  const { index, prompt } = props;
+  emit('prompt:copy', { index, prompt });
+};
 
-    isInSyncWithTemplate(): boolean {
-      return !!this.template && deepEqual(this.prompt, this.template);
-    },
-  },
+function edit() {
+  const { index, prompt } = props;
+  emit('prompt:edit', { index, prompt });
+};
 
-  methods: {
-    copy() {
-      const { index, prompt } = this;
-      this.$emit('prompt:copy', { index, prompt });
-    },
-
-    edit() {
-      const { index, prompt } = this;
-      this.$emit('prompt:edit', { index, prompt });
-    },
-
-    move() {
-      if (!this.moveToSection)
-        return;
-
-      this.$emit('prompt:move', {
-        section: this.moveToSection,
-        index: this.index,
-        prompt: copy(this.prompt),
-      });
-
-      // DOM object is destroyed so we have to clear it manually as event can't be emitted anymore
-      this.clearMoveToSection();
-    },
-
-    clearMoveToSection() {
-      this.moveToSection = null;
-    },
-
-    remove() {
-      this.$emit('prompt:remove', this.index);
-    },
-
-    sync() {
-      if (!this.template || this.isInSyncWithTemplate)
-        return;
-
-      this.$emit('prompt:sync', {
-        prompt: copy(this.template),
-        index: this.index,
-      });
-    },
-  },
-});
+function move() {
+  if (!moveToSection.value)
+    return;
+
+  emit('prompt:move', {
+    section: moveToSection.value,
+    index: props.index,
+    prompt: copyObject(props.prompt),
+  });
+
+  // DOM object is destroyed so we have to clear it manually as event can't be emitted anymore
+  clearMoveToSection();
+};
+
+function clearMoveToSection() {
+  moveToSection.value = null;
+};
+
+function remove() {
+  emit('prompt:remove', props.index);
+};
+
+function sync() {
+  if (!template.value || isInSyncWithTemplate.value)
+    return;
+
+  emit('prompt:sync', {
+    prompt: copyObject(template.value),
+    index: props.index,
+  });
+};
 </script>
diff --git a/apps/admin/src/components/prompts/list/prompt-list.vue b/apps/admin/src/components/prompts/list/prompt-list.vue
index b03c7994d4..199e1713fc 100644
--- a/apps/admin/src/components/prompts/list/prompt-list.vue
+++ b/apps/admin/src/components/prompts/list/prompt-list.vue
@@ -40,7 +40,7 @@
       </template>
     </v-expansion-panel-title>
     <v-expansion-panel-text>
-      <v-list lines="two">
+      <v-list class="list-border" lines="two">
         <vue-draggable
           v-model="prompts"
           :animation="300"
@@ -65,10 +65,10 @@
   <v-divider />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
 import { deepEqual } from 'fast-equals';
-import { defineComponent, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { VueDraggable } from 'vue-draggable-plus';
 
 import type { SinglePrompt } from '@intake24/common/prompts';
@@ -76,7 +76,8 @@ import type { MealSection, PromptSection, SurveyPromptSection } from '@intake24/
 import { OptionsMenu } from '@intake24/admin/components/dialogs';
 import { JsonEditorDialog } from '@intake24/admin/components/editors';
 import { promptSettings } from '@intake24/admin/components/prompts';
-import { copy } from '@intake24/common/util';
+import { copy as copyObject } from '@intake24/common/util';
+import { useI18n } from '@intake24/i18n/index';
 
 import PromptSelector from '../prompt-selector.vue';
 import LoadPromptDialog from './load-prompt-dialog.vue';
@@ -93,158 +94,122 @@ export interface PromptMoveEvent extends PromptEvent {
   section: MealSection | SurveyPromptSection;
 }
 
-export default defineComponent({
-  name: 'PromptList',
+defineOptions({ name: 'PromptList' });
 
-  components: {
-    JsonEditorDialog,
-    LoadPromptDialog,
-    OptionsMenu,
-    PromptListItem,
-    PromptSelector,
-    VueDraggable,
+const props = defineProps({
+  mode: {
+    type: String as PropType<'full' | 'override'>,
+    default: 'full',
   },
-
-  props: {
-    mode: {
-      type: String as PropType<'full' | 'override'>,
-      default: 'full',
-    },
-    section: {
-      type: String as PropType<PromptSection>,
-    },
-    step: {
-      type: Number,
-      default: 1,
-    },
-    promptIds: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-    templates: {
-      type: Array as PropType<SinglePrompt[]>,
-      default: () => [],
-    },
-    items: {
-      type: Array as PropType<SinglePrompt[]>,
-      required: true,
-    },
+  section: {
+    type: String as PropType<PromptSection>,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  promptIds: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  templates: {
+    type: Array as PropType<SinglePrompt[]>,
+    default: () => [],
+  },
+  modelValue: {
+    type: Array as PropType<SinglePrompt[]>,
+    required: true,
   },
+});
 
-  emits: ['update:items', 'move'],
+const emit = defineEmits(['update:modelValue', 'move']);
 
-  setup() {
-    const selector = ref<InstanceType<typeof PromptSelector>>();
+const { i18n } = useI18n();
 
-    return { selector };
-  },
+const selector = ref<InstanceType<typeof PromptSelector>>();
+const prompts = ref(props.modelValue);
 
-  data() {
-    return {
-      prompts: this.items,
-      promptSettings,
-      open: this.step,
-    };
-  },
+const isOverrideMode = computed(() => props.mode === 'override');
+const title = computed(() => i18n.t(
+  isOverrideMode.value
+    ? `survey-schemes.overrides.prompts.title`
+    : `survey-schemes.prompts.${props.section}.title`,
+));
+const subtitle = computed(() => i18n.t(
+  isOverrideMode.value
+    ? `survey-schemes.overrides.prompts.subtitle`
+    : `survey-schemes.prompts.${props.section}.subtitle`,
+));
 
-  computed: {
-    isOverrideMode(): boolean {
-      return this.mode === 'override';
-    },
-    isOpened(): boolean {
-      return this.open === this.step;
-    },
-    title(): string {
-      return this.$t(
-        this.isOverrideMode
-          ? `survey-schemes.overrides.prompts.title`
-          : `survey-schemes.prompts.${this.section}.title`,
-      );
-    },
-    subtitle(): string {
-      return this.$t(
-        this.isOverrideMode
-          ? `survey-schemes.overrides.prompts.subtitle`
-          : `survey-schemes.prompts.${this.section}.subtitle`,
-      );
-    },
-  },
+function create() {
+  if (isOverrideMode.value)
+    return;
 
-  watch: {
-    items(val) {
-      if (deepEqual(val, this.prompts))
-        return;
+  selector.value?.create();
+};
 
-      this.prompts = [...val];
-    },
-    prompts(val) {
-      if (deepEqual(val, this.items))
-        return;
+function load(prompt: SinglePrompt) {
+  prompts.value.push(prompt);
+};
 
-      this.update();
-    },
-  },
+function copy({ prompt, index }: PromptEvent) {
+  prompts.value.splice(index + 1, 0, { ...copyObject(prompt), name: `${prompt.name} (copy)` });
+};
 
-  methods: {
-    toggle() {
-      this.open = this.open === this.step ? 0 : this.step;
-    },
-
-    create() {
-      if (this.isOverrideMode)
-        return;
-
-      this.selector?.create();
-    },
-
-    load(prompt: SinglePrompt) {
-      this.prompts.push(prompt);
-    },
-
-    copy({ prompt, index }: PromptEvent) {
-      this.prompts.splice(index + 1, 0, { ...copy(prompt), name: `${prompt.name} (copy)` });
-    },
-
-    edit({ prompt, index }: PromptEvent) {
-      this.selector?.edit(index, prompt);
-    },
-
-    save({ prompt, index }: PromptEvent) {
-      if (index === -1)
-        this.prompts.push(prompt);
-      else this.prompts.splice(index, 1, prompt);
-    },
-
-    moveSections(prompt: SinglePrompt): MoveSection[] {
-      return this.promptSettings[prompt.component].sections.filter(item => item !== this.section).map(item => ({
-        value: item,
-        title: this.$t(`survey-schemes.prompts.${item}.title`),
-      }));
-    },
-
-    move(event: PromptMoveEvent) {
-      if (this.isOverrideMode)
-        return;
-
-      this.$emit('move', event);
-      this.prompts.splice(event.index, 1);
-    },
-
-    remove(index: number) {
-      this.prompts.splice(index, 1);
-    },
-
-    sync({ prompt, index }: PromptEvent) {
-      if (this.isOverrideMode)
-        return;
-
-      this.prompts.splice(index, 1, prompt);
-    },
-
-    update() {
-      this.$emit('update:items', this.prompts);
-    },
-  },
+function edit({ prompt, index }: PromptEvent) {
+  selector.value?.edit(index, prompt);
+};
+
+function save({ prompt, index }: PromptEvent) {
+  if (index === -1)
+    prompts.value.push(prompt);
+  else prompts.value.splice(index, 1, prompt);
+};
+
+function moveSections(prompt: SinglePrompt): MoveSection[] {
+  return promptSettings[prompt.component].sections
+    .filter(item => item !== props.section)
+    .map(item => ({
+      value: item,
+      title: i18n.t(`survey-schemes.prompts.${item}.title`),
+    }));
+};
+
+function move(event: PromptMoveEvent) {
+  if (isOverrideMode.value)
+    return;
+
+  emit('move', event);
+  prompts.value.splice(event.index, 1);
+};
+
+function remove(index: number) {
+  prompts.value.splice(index, 1);
+};
+
+function sync({ prompt, index }: PromptEvent) {
+  if (isOverrideMode.value)
+    return;
+
+  prompts.value.splice(index, 1, prompt);
+};
+
+function update() {
+  emit('update:modelValue', prompts.value);
+};
+
+watch(() => props.modelValue, (val) => {
+  if (deepEqual(val, prompts.value))
+    return;
+
+  prompts.value = [...val];
+});
+
+watch(prompts, (val) => {
+  if (deepEqual(val, props.modelValue))
+    return;
+
+  update();
 });
 </script>
 
diff --git a/apps/admin/src/components/securables/securable.vue b/apps/admin/src/components/securables/securable.vue
index 08106714f0..f5d9175755 100644
--- a/apps/admin/src/components/securables/securable.vue
+++ b/apps/admin/src/components/securables/securable.vue
@@ -95,7 +95,7 @@ export default defineComponent({
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
     const userDialog = ref<InstanceType<typeof UserDialog>>();
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       {
         title: t('users.name'),
         sortable: true,
@@ -120,7 +120,7 @@ export default defineComponent({
         key: 'action',
         align: 'end',
       },
-    ]);
+    ];
 
     return { headers, table, userDialog };
   },
diff --git a/apps/admin/src/components/user/mfa/mfa.vue b/apps/admin/src/components/user/mfa/mfa.vue
index 5e40bb5416..b555814426 100644
--- a/apps/admin/src/components/user/mfa/mfa.vue
+++ b/apps/admin/src/components/user/mfa/mfa.vue
@@ -65,50 +65,47 @@
         </v-card>
       </v-dialog>
     </v-toolbar>
-    <v-list>
-      <transition-group v-if="devices.length" name="drag-and-drop" type="transition">
-        <template v-for="(device, idx) in devices" :key="device.id">
-          <v-list-item link>
-            <template #prepend>
-              <v-icon :title="$t(`user.mfa.providers.${device.provider}._`)">
-                {{ `$${device.provider}` }}
-              </v-icon>
-            </template>
-            <v-list-item-title>{{ device.name }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ $t(`user.mfa.providers.${device.provider}.title`) }}
-            </v-list-item-subtitle>
-            <template #append>
-              <v-list-item-action>
-                <v-chip v-if="device.preferred" color="secondary" variant="outlined">
-                  {{ $t('user.mfa.devices.preferred._') }}
-                </v-chip>
-                <confirm-dialog
-                  v-else
-                  color="secondary"
-                  icon
-                  icon-left="far fa-circle-up"
-                  :label="$t('user.mfa.devices.preferred.promote')"
-                  @confirm="promote(device.id, idx)"
-                >
-                  {{ $t('user.mfa.devices.preferred.promoteConfirm', { name: device.name }) }}
-                </confirm-dialog>
-              </v-list-item-action>
-              <v-list-item-action>
-                <confirm-dialog
-                  color="error"
-                  icon
-                  icon-left="$delete"
-                  :label="$t('user.mfa.devices.remove')"
-                  @confirm="remove(device.id)"
-                >
-                  {{ $t('common.action.confirm.delete', { name: device.name }) }}
-                </confirm-dialog>
-              </v-list-item-action>
-            </template>
-          </v-list-item>
-          <v-divider v-if="idx + 1 < devices.length" :key="`div-${device.id}`" />
-        </template>
+    <v-list class="list-border">
+      <transition-group v-if="devices.length" name="drag-and-drop">
+        <v-list-item v-for="(device, idx) in devices" :key="device.id" link>
+          <template #prepend>
+            <v-icon :title="$t(`user.mfa.providers.${device.provider}._`)">
+              {{ `$${device.provider}` }}
+            </v-icon>
+          </template>
+          <v-list-item-title>{{ device.name }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ $t(`user.mfa.providers.${device.provider}.title`) }}
+          </v-list-item-subtitle>
+          <template #append>
+            <v-list-item-action>
+              <v-chip v-if="device.preferred" color="secondary" variant="outlined">
+                {{ $t('user.mfa.devices.preferred._') }}
+              </v-chip>
+              <confirm-dialog
+                v-else
+                color="secondary"
+                icon
+                icon-left="far fa-circle-up"
+                :label="$t('user.mfa.devices.preferred.promote')"
+                @confirm="promote(device.id, idx)"
+              >
+                {{ $t('user.mfa.devices.preferred.promoteConfirm', { name: device.name }) }}
+              </confirm-dialog>
+            </v-list-item-action>
+            <v-list-item-action>
+              <confirm-dialog
+                color="error"
+                icon
+                icon-left="$delete"
+                :label="$t('user.mfa.devices.remove')"
+                @confirm="remove(device.id)"
+              >
+                {{ $t('common.action.confirm.delete', { name: device.name }) }}
+              </confirm-dialog>
+            </v-list-item-action>
+          </template>
+        </v-list-item>
       </transition-group>
       <v-list-item v-else>
         <v-list-item-title>{{ $t('user.mfa.devices.none') }}</v-list-item-title>
diff --git a/apps/admin/src/scss/app.scss b/apps/admin/src/scss/app.scss
index 0cc508db0f..c7e75d2c76 100644
--- a/apps/admin/src/scss/app.scss
+++ b/apps/admin/src/scss/app.scss
@@ -10,39 +10,35 @@
   padding-inline-start: 8px !important;
 }
 
-.list-bordered {
-  > :not(:last-child) {
+.list-border {
+  .v-list-item:not(:last-child) {
     border-bottom: 1px solid map-get(settings.$grey, 'lighten-3');
   }
 }
 
-.list-item-border {
-  &:not(:last-child) {
-    border-bottom: 1px solid map-get(settings.$grey, 'lighten-3');
-  }
+.list-item-border:not(:last-child) {
+  border-bottom: 1px solid map-get(settings.$grey, 'lighten-3');
 }
 
 // Drag & drop lists
-.drag-and-drop__item {
-  &:not(:last-child) {
-    border-bottom: 1px solid map-get(settings.$grey, 'lighten-3');
-  }
-
-  .drag-and-drop__handle {
-    cursor: move;
-  }
+.drag-and-drop__handle {
+  cursor: move;
 }
 
 .drag-and-drop-move,
 .drag-and-drop-enter-active,
 .drag-and-drop-leave-active {
-  transition: all 0.5s;
+  transition: all 0.5s ease;
 }
 
-.drag-and-drop-enter,
+.drag-and-drop-enter-from,
 .drag-and-drop-leave-to {
   opacity: 0;
-  transform: translateX(200px);
+  transform: translateX(30px);
+}
+
+.drag-and-drop-leave-active {
+  position: absolute;
 }
 
 ul.v-breadcrumbs {
diff --git a/apps/admin/src/views/authentication/mfa-dialog.vue b/apps/admin/src/views/authentication/mfa-dialog.vue
index abbbad167e..b6b5b21d9a 100644
--- a/apps/admin/src/views/authentication/mfa-dialog.vue
+++ b/apps/admin/src/views/authentication/mfa-dialog.vue
@@ -69,22 +69,21 @@
         </v-col>
         <v-col cols="12" sm="6">
           <v-list
-            v-model="deviceId" lines="two"
+            v-model="deviceId"
+            class="list-border"
+            lines="two"
             @change="selectDevice"
           >
             <v-list-subheader>{{ $t('common.mfa.devices') }}</v-list-subheader>
-            <template v-for="(device, idx) in authData.devices" :key="device.id">
-              <v-list-item link :value="device.id">
-                <template #prepend>
-                  <v-icon :title="$t(`user.mfa.providers.${device.provider}._`)">
-                    {{ `$${device.provider}` }}
-                  </v-icon>
-                </template>
-                <v-list-item-title>{{ device.name }}</v-list-item-title>
-                <v-list-item-subtitle>{{ device.provider }}</v-list-item-subtitle>
-              </v-list-item>
-              <v-divider v-if="idx < authData.devices.length + 1" :key="`div-${device.id}`" />
-            </template>
+            <v-list-item v-for="device in authData.devices" :key="device.id" link :value="device.id">
+              <template #prepend>
+                <v-icon :title="$t(`user.mfa.providers.${device.provider}._`)">
+                  {{ `$${device.provider}` }}
+                </v-icon>
+              </template>
+              <v-list-item-title>{{ device.name }}</v-list-item-title>
+              <v-list-item-subtitle>{{ device.provider }}</v-list-item-subtitle>
+            </v-list-item>
           </v-list>
         </v-col>
       </v-row>
diff --git a/apps/admin/src/views/fdbs/browse.vue b/apps/admin/src/views/fdbs/browse.vue
index 7af398fbce..3a12d2c8c1 100644
--- a/apps/admin/src/views/fdbs/browse.vue
+++ b/apps/admin/src/views/fdbs/browse.vue
@@ -13,8 +13,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -22,7 +20,7 @@ defineOptions({ name: 'FoodDbList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('locales.code'),
     sortable: true,
@@ -44,5 +42,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/feedback-schemes/browse.vue b/apps/admin/src/views/feedback-schemes/browse.vue
index 912ba6bf3c..9d57e11dcf 100644
--- a/apps/admin/src/views/feedback-schemes/browse.vue
+++ b/apps/admin/src/views/feedback-schemes/browse.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -12,7 +10,7 @@ defineOptions({ name: 'FeedbackSchemeList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.name'),
     sortable: true,
@@ -29,5 +27,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/feedback-schemes/sections.vue b/apps/admin/src/views/feedback-schemes/sections.vue
index 1293e3ea28..1f7ddb6d05 100644
--- a/apps/admin/src/views/feedback-schemes/sections.vue
+++ b/apps/admin/src/views/feedback-schemes/sections.vue
@@ -43,7 +43,7 @@
         <json-editor-dialog v-model="items" @update:model-value="update" />
       </options-menu>
     </v-toolbar>
-    <v-list class="py-0">
+    <v-list class="list-border py-0">
       <vue-draggable
         v-model="items"
         :animation="300"
@@ -53,7 +53,6 @@
         <v-list-item
           v-for="(section, index) in sections"
           :key="section.id"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/views/food-groups/browse.vue b/apps/admin/src/views/food-groups/browse.vue
index a3f7037f17..81d1d224ca 100644
--- a/apps/admin/src/views/food-groups/browse.vue
+++ b/apps/admin/src/views/food-groups/browse.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -12,7 +10,7 @@ defineOptions({ name: 'FoodGroupList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.id'),
     sortable: true,
@@ -29,5 +27,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/images/drinkware-sets/edit.vue b/apps/admin/src/views/images/drinkware-sets/edit.vue
index 6380efde43..3581e85961 100644
--- a/apps/admin/src/views/images/drinkware-sets/edit.vue
+++ b/apps/admin/src/views/images/drinkware-sets/edit.vue
@@ -66,6 +66,7 @@
                 <v-card-text>
                   <language-selector
                     v-model="selectedScale.label"
+                    border
                     :label="$t('guide-images.objects.label._')"
                   >
                     <template v-for="lang in Object.keys(selectedScale.label)" :key="lang" #[`lang.${lang}`]>
diff --git a/apps/admin/src/views/images/guide-drawer.vue b/apps/admin/src/views/images/guide-drawer.vue
index 37e7491561..7ba258da3c 100644
--- a/apps/admin/src/views/images/guide-drawer.vue
+++ b/apps/admin/src/views/images/guide-drawer.vue
@@ -85,6 +85,7 @@
                     <v-col cols="12">
                       <language-selector
                         v-model="object.label"
+                        border
                         :disabled="disabled"
                         :label="$t('guide-images.objects.label._')"
                       >
diff --git a/apps/admin/src/views/jobs/browse.vue b/apps/admin/src/views/jobs/browse.vue
index 9c5826bea4..26c9877616 100644
--- a/apps/admin/src/views/jobs/browse.vue
+++ b/apps/admin/src/views/jobs/browse.vue
@@ -18,8 +18,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useDateTime } from '@intake24/admin/composables';
 import { useI18n } from '@intake24/i18n';
@@ -29,7 +27,7 @@ defineOptions({ name: 'JobList' });
 const { i18n: { t } } = useI18n();
 const { formatDateTime } = useDateTime();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.id'),
     sortable: true,
@@ -62,5 +60,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/languages/browse.vue b/apps/admin/src/views/languages/browse.vue
index c391d2d2cc..348ed93f58 100644
--- a/apps/admin/src/views/languages/browse.vue
+++ b/apps/admin/src/views/languages/browse.vue
@@ -8,8 +8,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -17,7 +15,7 @@ defineOptions({ name: 'LanguageList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('languages.code'),
     sortable: true,
@@ -39,5 +37,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/languages/translations/browse.vue b/apps/admin/src/views/languages/translations/browse.vue
index aea0a6d363..b6535e8f86 100644
--- a/apps/admin/src/views/languages/translations/browse.vue
+++ b/apps/admin/src/views/languages/translations/browse.vue
@@ -30,11 +30,10 @@
       </template>
     </v-toolbar>
     <error-list :errors="nonInputErrors" tag="v-card-text" />
-    <v-list v-if="form.translations.length" lines="two">
+    <v-list v-if="form.translations.length" class="list-border" lines="two">
       <v-list-item
         v-for="translation in form.translations"
         :key="translation.id"
-        class="list-item-border"
         link
       >
         <template #prepend>
diff --git a/apps/admin/src/views/locales/browse.vue b/apps/admin/src/views/locales/browse.vue
index 7c80834d86..de11a0796c 100644
--- a/apps/admin/src/views/locales/browse.vue
+++ b/apps/admin/src/views/locales/browse.vue
@@ -8,8 +8,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -17,7 +15,7 @@ defineOptions({ name: 'LocaleList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('locales.code'),
     sortable: true,
@@ -39,5 +37,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/locales/recipe-foods/browse.vue b/apps/admin/src/views/locales/recipe-foods/browse.vue
index 04b086e172..675eebec8d 100644
--- a/apps/admin/src/views/locales/recipe-foods/browse.vue
+++ b/apps/admin/src/views/locales/recipe-foods/browse.vue
@@ -13,8 +13,8 @@
         @click.stop="add"
       />
     </v-toolbar>
-    <v-list>
-      <v-list-item v-for="(item, idx) in form.items" :key="idx" class="list-item-border">
+    <v-list class="list-border">
+      <v-list-item v-for="(item, idx) in form.items" :key="idx">
         <template #prepend>
           <v-icon>fas fa-bowl-food</v-icon>
         </template>
diff --git a/apps/admin/src/views/locales/recipe-foods/steps-dialog.vue b/apps/admin/src/views/locales/recipe-foods/steps-dialog.vue
index 677d817e55..07ce6d464b 100644
--- a/apps/admin/src/views/locales/recipe-foods/steps-dialog.vue
+++ b/apps/admin/src/views/locales/recipe-foods/steps-dialog.vue
@@ -1,12 +1,12 @@
 <template>
   <v-dialog
-    v-if="$props.dialog"
-    v-model="$props.dialog"
+    v-if="dialog"
     :fullscreen="$vuetify.display.smAndDown"
     max-width="700px"
+    :model-value="dialog"
   >
-    <v-card class="dialog-card" :tile="$vuetify.display.smAndDown">
-      <v-toolbar class="sticky-toolbar" color="secondary" dark flat>
+    <v-card :tile="$vuetify.display.smAndDown">
+      <v-toolbar color="secondary" dark flat>
         <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="$emit('close')" />
         <v-toolbar-title>
           {{ $t('locales.recipe-foods.steps') }}
@@ -16,16 +16,16 @@
           {{ $t('common.action.save') }}
         </v-btn>
       </v-toolbar>
-      <v-list>
-        <v-list-item v-for="(item, idx) in form.items" :key="idx" class="list-item-border">
+      <v-list class="list-border recipe-list">
+        <v-list-item v-for="(item, idx) in form.items" :key="idx" class="mt-2">
+          <v-list-item-title class="text-h4 font-weight-medium mb-4">
+            <v-avatar class="mr-3" color="primary" size="28">
+              <span class="text-white font-weight-medium text-h6">{{ item.order }}</span>
+            </v-avatar>
+            {{ translate(item.name) }}
+          </v-list-item-title>
           <v-container class="px-2 v-list-item-content">
-            <v-list-subheader class="text-h4 font-weight-medium mb-4 px-0">
-              <v-avatar class="mr-3" color="primary" size="28">
-                <span class="text-white font-weight-medium text-h6">{{ item.order }}</span>
-              </v-avatar>
-              {{ translate(item.name) }}
-            </v-list-subheader>
-            <v-row col="12">
+            <v-row>
               <v-col cols="12" md="6">
                 <v-text-field
                   v-model.trim="item.code"
@@ -49,6 +49,7 @@
               <v-col cols="12">
                 <language-selector
                   v-model="item.name"
+                  border
                   :label="$t('locales.recipe-foods.name')"
                   required
                 >
@@ -67,6 +68,7 @@
               <v-col cols="12">
                 <language-selector
                   v-model="item.name"
+                  border
                   :label="$t('locales.recipe-foods.description')"
                   required
                 >
@@ -82,8 +84,6 @@
                   </template>
                 </language-selector>
               </v-col>
-            </v-row>
-            <v-row col="12">
               <v-col cols="12" md="6">
                 <v-switch
                   v-model="item.repeatable"
@@ -123,13 +123,12 @@
               <v-btn
                 block
                 class="full-width-btn"
-                elevation="0"
+                color="grey-lighten-3"
                 :title="$t('locales.recipe-foods.remove')"
+                variant="flat"
                 @click.stop="removeStep(idx)"
               >
-                <v-icon color="error">
-                  $delete
-                </v-icon>
+                <v-icon color="error" icon="$delete" />
               </v-btn>
             </v-list-item-action>
           </template>
@@ -252,36 +251,19 @@ export default defineComponent({
 });
 </script>
 
-<style scoped lang="scss">
-.v-list-item-content {
-  flex: 9;
-  display: flex;
-  align-items: center;
-}
-
-.v-list-item-action {
-  flex: 1;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  > .full-width-btn {
-    width: 100%;
-    height: 80%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #f5f5f5d4;
+<style lang="scss">
+.recipe-list {
+  .v-list-item__append {
+    align-self: stretch;
   }
-}
 
-.dialog-card {
-  .sticky-toolbar {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    z-index: 1;
+  .v-list-item-action {
+    align-self: stretch;
+
+    > .full-width-btn {
+      width: 100%;
+      height: 80%;
+    }
   }
 }
 </style>
diff --git a/apps/admin/src/views/locales/split-lists/browse.vue b/apps/admin/src/views/locales/split-lists/browse.vue
index 22356ca8cc..39e99c4119 100644
--- a/apps/admin/src/views/locales/split-lists/browse.vue
+++ b/apps/admin/src/views/locales/split-lists/browse.vue
@@ -13,8 +13,8 @@
         @click.stop="add"
       />
     </v-toolbar>
-    <v-list>
-      <v-list-item v-for="(item, idx) in form.items" :key="idx" class="list-item-border">
+    <v-list class="list-border">
+      <v-list-item v-for="(item, idx) in form.items" :key="idx">
         <template #prepend>
           <v-icon>fas fa-arrows-split-up-and-left</v-icon>
         </template>
@@ -22,6 +22,8 @@
           <v-col cols="12" md="4">
             <v-text-field
               v-model.trim="item.firstWord"
+              class="my-1"
+              density="compact"
               hide-details="auto"
               :label="$t('locales.split-lists.firstWord')"
               name="firstWord"
@@ -31,6 +33,8 @@
           <v-col cols="12" md>
             <v-text-field
               v-model.trim="item.words"
+              class="my-1"
+              density="compact"
               hide-details="auto"
               :label="$t('locales.split-lists.words')"
               name="words"
@@ -57,7 +61,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted } from 'vue';
 
 import type {
   LocaleEntry,
@@ -66,6 +70,7 @@ import type {
 } from '@intake24/common/types/http/admin';
 import { formMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch, useEntryForm } from '@intake24/admin/composables';
+import { useHttp } from '@intake24/admin/services';
 import { useEntry as useStoreEntry } from '@intake24/admin/stores';
 import { ConfirmDialog } from '@intake24/ui';
 
@@ -79,6 +84,8 @@ export default defineComponent({
   mixins: [formMixin],
 
   setup(props) {
+    const http = useHttp();
+
     const { entry, entryLoaded } = useEntry<LocaleEntry>(props);
     useEntryFetch(props);
     const { clearError, form, routeLeave, submit, toForm } = useEntryForm<
@@ -89,33 +96,41 @@ export default defineComponent({
       config: { transform: ({ items }) => items },
     });
 
-    return { entry, entryLoaded, clearError, form, routeLeave, submit, toForm };
-  },
+    function add() {
+      form.items.push({ localeId: props.id, firstWord: '', words: '' });
+    };
 
-  async mounted() {
-    const { data: items } = await this.$http.get<SplitListAttributes[]>(
-      `admin/locales/${this.id}/split-lists`,
-    );
+    function remove(index: number) {
+      form.items.splice(index, 1);
+    };
 
-    this.toForm({ items });
-  },
+    async function save() {
+      form.items = form.items.filter(({ firstWord, words }) => firstWord && words);
 
-  methods: {
-    add() {
-      this.form.items.push({ localeId: this.id, firstWord: '', words: '' });
-    },
+      const items = await form.post<SplitListAttributes[]>(`admin/locales/${props.id}/split-lists`);
 
-    remove(index: number) {
-      this.form.items.splice(index, 1);
-    },
+      useStoreEntry().setEntry({ items });
+    };
 
-    async save() {
-      this.form.items = this.form.items.filter(({ firstWord, words }) => firstWord && words);
+    onMounted(async () => {
+      const { data: items } = await http.get<SplitListAttributes[]>(
+        `admin/locales/${props.id}/split-lists`,
+      );
 
-      const items = await this.form.post<SplitListAttributes[]>(`admin/locales/${this.id}/split-lists`);
+      toForm({ items });
+    });
 
-      useStoreEntry().setEntry({ items });
-    },
+    return {
+      add,
+      entry,
+      entryLoaded,
+      clearError,
+      form,
+      remove,
+      routeLeave,
+      save,
+      submit,
+    };
   },
 });
 </script>
diff --git a/apps/admin/src/views/locales/split-words/browse.vue b/apps/admin/src/views/locales/split-words/browse.vue
index 8301e7c99d..6001f646d5 100644
--- a/apps/admin/src/views/locales/split-words/browse.vue
+++ b/apps/admin/src/views/locales/split-words/browse.vue
@@ -13,13 +13,15 @@
         @click.stop="add"
       />
     </v-toolbar>
-    <v-list>
-      <v-list-item v-for="(item, idx) in form.items" :key="idx" class="list-item-border">
+    <v-list class="list-border">
+      <v-list-item v-for="(item, idx) in form.items" :key="idx">
         <template #prepend>
           <v-icon>fas fa-arrows-split-up-and-left</v-icon>
         </template>
         <v-text-field
           v-model="item.words"
+          class="my-1"
+          density="compact"
           hide-details="auto"
           :label="$t('locales.split-words.words')"
           name="words"
diff --git a/apps/admin/src/views/locales/synonym-sets/browse.vue b/apps/admin/src/views/locales/synonym-sets/browse.vue
index 2ff5388fc6..9484e30110 100644
--- a/apps/admin/src/views/locales/synonym-sets/browse.vue
+++ b/apps/admin/src/views/locales/synonym-sets/browse.vue
@@ -13,13 +13,15 @@
         @click.stop="add"
       />
     </v-toolbar>
-    <v-list>
-      <v-list-item v-for="(item, idx) in form.items" :key="idx" class="list-item-border">
+    <v-list class="list-border">
+      <v-list-item v-for="(item, idx) in form.items" :key="idx">
         <template #prepend>
           <v-icon>fas fa-arrows-split-up-and-left</v-icon>
         </template>
         <v-text-field
           v-model.trim="item.synonyms"
+          class="my-1"
+          density="compact"
           hide-details="auto"
           :label="$t('locales.synonym-sets.synonyms')"
           name="synonyms"
diff --git a/apps/admin/src/views/nutrient-tables/browse.vue b/apps/admin/src/views/nutrient-tables/browse.vue
index 60762611a1..f84130c509 100644
--- a/apps/admin/src/views/nutrient-tables/browse.vue
+++ b/apps/admin/src/views/nutrient-tables/browse.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -12,7 +10,7 @@ defineOptions({ name: 'NutrientTableList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.id'),
     sortable: true,
@@ -29,5 +27,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/nutrient-types/browse.vue b/apps/admin/src/views/nutrient-types/browse.vue
index 443088dbd7..6cd111c270 100644
--- a/apps/admin/src/views/nutrient-types/browse.vue
+++ b/apps/admin/src/views/nutrient-types/browse.vue
@@ -7,8 +7,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -16,7 +14,7 @@ defineOptions({ name: 'NutrientTypeList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('nutrient-types.id'),
     sortable: true,
@@ -38,5 +36,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/nutrient-units/browse.vue b/apps/admin/src/views/nutrient-units/browse.vue
index 61caac1c86..282f0f96e2 100644
--- a/apps/admin/src/views/nutrient-units/browse.vue
+++ b/apps/admin/src/views/nutrient-units/browse.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -12,7 +10,7 @@ defineOptions({ name: 'NutrientUnitList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('nutrient-units.id'),
     sortable: true,
@@ -34,5 +32,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/permissions/browse.vue b/apps/admin/src/views/permissions/browse.vue
index 9a86c26d1b..732dad9960 100644
--- a/apps/admin/src/views/permissions/browse.vue
+++ b/apps/admin/src/views/permissions/browse.vue
@@ -7,8 +7,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useDateTime } from '@intake24/admin/composables';
 import { useI18n } from '@intake24/i18n';
@@ -18,7 +16,7 @@ defineOptions({ name: 'PermissionList' });
 const { i18n: { t } } = useI18n();
 const { formatDateTime } = useDateTime();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.name'),
     sortable: true,
@@ -40,5 +38,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/permissions/roles/browse.vue b/apps/admin/src/views/permissions/roles/browse.vue
index b876d09b11..564e1fadbe 100644
--- a/apps/admin/src/views/permissions/roles/browse.vue
+++ b/apps/admin/src/views/permissions/roles/browse.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 
 import type { PermissionEntry } from '@intake24/common/types/http/admin';
 import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
@@ -37,11 +37,11 @@ export default defineComponent({
     const user = useUser();
 
     const actions = ['read', 'edit'].filter(action => user.can(`roles|${action}`));
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       { title: i18n.t('common.name'), sortable: true, key: 'name' },
       { title: i18n.t('common.displayName'), sortable: true, key: 'displayName' },
       { title: i18n.t('common.action._'), sortable: false, key: 'action', align: 'end' },
-    ]);
+    ];
 
     const { entry, entryLoaded } = useEntry<PermissionEntry>(props);
     useEntryFetch(props);
diff --git a/apps/admin/src/views/permissions/users/browse.vue b/apps/admin/src/views/permissions/users/browse.vue
index e4abe03a30..40bb9102a2 100644
--- a/apps/admin/src/views/permissions/users/browse.vue
+++ b/apps/admin/src/views/permissions/users/browse.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 
 import type { PermissionEntry } from '@intake24/common/types/http/admin';
 import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
@@ -38,11 +38,11 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`users|${action}`));
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       { title: i18n.t('users.name'), sortable: true, key: 'name' },
       { title: i18n.t('common.email'), sortable: true, key: 'email' },
       { title: i18n.t('common.action._'), sortable: false, key: 'action', align: 'end' },
-    ]);
+    ];
 
     const { entry, entryLoaded } = useEntry<PermissionEntry>(props);
     useEntryFetch(props);
diff --git a/apps/admin/src/views/roles/browse.vue b/apps/admin/src/views/roles/browse.vue
index 65b052395f..4a9ebd2c26 100644
--- a/apps/admin/src/views/roles/browse.vue
+++ b/apps/admin/src/views/roles/browse.vue
@@ -7,8 +7,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useDateTime } from '@intake24/admin/composables';
 import { useI18n } from '@intake24/i18n';
@@ -18,7 +16,7 @@ defineOptions({ name: 'RoleList' });
 const { i18n: { t } } = useI18n();
 const { formatDateTime } = useDateTime();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.name'),
     sortable: true,
@@ -40,5 +38,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/roles/permissions/browse.vue b/apps/admin/src/views/roles/permissions/browse.vue
index e7ff1ba465..392b9de2c8 100644
--- a/apps/admin/src/views/roles/permissions/browse.vue
+++ b/apps/admin/src/views/roles/permissions/browse.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 
 import type { RoleEntry } from '@intake24/common/types/http/admin';
 import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
@@ -38,11 +38,11 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`permissions|${action}`));
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       { title: i18n.t('common.name'), sortable: true, key: 'name' },
       { title: i18n.t('common.displayName'), sortable: true, key: 'displayName' },
       { title: i18n.t('common.action._'), sortable: false, key: 'action', align: 'end' },
-    ]);
+    ];
 
     const { entry, entryLoaded } = useEntry<RoleEntry>(props);
     useEntryFetch(props);
diff --git a/apps/admin/src/views/roles/users/browse.vue b/apps/admin/src/views/roles/users/browse.vue
index ca1bfb6df5..3db69a18dd 100644
--- a/apps/admin/src/views/roles/users/browse.vue
+++ b/apps/admin/src/views/roles/users/browse.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 
 import type { RoleEntry } from '@intake24/common/types/http/admin';
 import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
@@ -38,11 +38,11 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`users|${action}`));
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       { title: i18n.t('users.name'), sortable: true, key: 'name' },
       { title: i18n.t('common.email'), sortable: true, key: 'email' },
       { title: i18n.t('common.action._'), sortable: false, key: 'action', align: 'end' },
-    ]);
+    ];
 
     const { entry, entryLoaded } = useEntry<RoleEntry>(props);
     useEntryFetch(props);
diff --git a/apps/admin/src/views/sign-in-logs/browse.vue b/apps/admin/src/views/sign-in-logs/browse.vue
index 8037cd2b40..76e1fc6049 100644
--- a/apps/admin/src/views/sign-in-logs/browse.vue
+++ b/apps/admin/src/views/sign-in-logs/browse.vue
@@ -15,8 +15,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useDateTime } from '@intake24/admin/composables';
 import { useI18n } from '@intake24/i18n';
@@ -26,7 +24,7 @@ defineOptions({ name: 'SignInLogList' });
 const { i18n: { t } } = useI18n();
 const { formatDateTime } = useDateTime();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.id'),
     sortable: true,
@@ -63,5 +61,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/standard-units/browse.vue b/apps/admin/src/views/standard-units/browse.vue
index a8fffe7d3a..d734e05ce9 100644
--- a/apps/admin/src/views/standard-units/browse.vue
+++ b/apps/admin/src/views/standard-units/browse.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -12,7 +10,7 @@ defineOptions({ name: 'StandardUnitList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('standard-units.id'),
     sortable: true,
@@ -29,5 +27,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/standard-units/categories/browse.vue b/apps/admin/src/views/standard-units/categories/browse.vue
index c6e06850a2..918a56acca 100644
--- a/apps/admin/src/views/standard-units/categories/browse.vue
+++ b/apps/admin/src/views/standard-units/categories/browse.vue
@@ -39,7 +39,7 @@ export default defineComponent({
     const { entry, entryLoaded } = useEntry<StandardUnitAttributes>(props);
     useEntryFetch(props);
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       {
         title: t('fdbs.categories.global.code'),
         sortable: true,
@@ -66,7 +66,7 @@ export default defineComponent({
         key: 'action',
         align: 'end',
       },
-    ]);
+    ];
 
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
 
diff --git a/apps/admin/src/views/standard-units/foods/browse.vue b/apps/admin/src/views/standard-units/foods/browse.vue
index 61688c6f39..fdd2c03c31 100644
--- a/apps/admin/src/views/standard-units/foods/browse.vue
+++ b/apps/admin/src/views/standard-units/foods/browse.vue
@@ -40,7 +40,7 @@ export default defineComponent({
 
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       {
         title: t('fdbs.foods.global.code'),
         sortable: true,
@@ -67,7 +67,7 @@ export default defineComponent({
         key: 'action',
         align: 'end',
       },
-    ]);
+    ];
 
     const updateTable = async () => {
       await table.value?.fetch();
diff --git a/apps/admin/src/views/survey-scheme-prompts/browse.vue b/apps/admin/src/views/survey-scheme-prompts/browse.vue
index 4319a3c523..3d5145c07d 100644
--- a/apps/admin/src/views/survey-scheme-prompts/browse.vue
+++ b/apps/admin/src/views/survey-scheme-prompts/browse.vue
@@ -10,8 +10,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -19,7 +17,7 @@ defineOptions({ name: 'SchemePromptList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('survey-schemes.prompts.internal.id._'),
     sortable: true,
@@ -46,5 +44,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/survey-scheme-prompts/read.vue b/apps/admin/src/views/survey-scheme-prompts/read.vue
index 2d08493660..911f524504 100644
--- a/apps/admin/src/views/survey-scheme-prompts/read.vue
+++ b/apps/admin/src/views/survey-scheme-prompts/read.vue
@@ -21,7 +21,7 @@
       </tbody>
     </v-table>
     <v-container fluid>
-      <json-editor v-bind="{ readOnly: true, value: entry.prompt }" />
+      <json-editor v-bind="{ readOnly: true, modelValue: entry.prompt }" />
     </v-container>
   </layout>
 </template>
diff --git a/apps/admin/src/views/survey-schemes/browse.vue b/apps/admin/src/views/survey-schemes/browse.vue
index be19c57e67..c2ed845749 100644
--- a/apps/admin/src/views/survey-schemes/browse.vue
+++ b/apps/admin/src/views/survey-schemes/browse.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -12,7 +10,7 @@ defineOptions({ name: 'SurveySchemeList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.name'),
     sortable: true,
@@ -29,5 +27,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/survey-schemes/data-export/browse.vue b/apps/admin/src/views/survey-schemes/data-export/browse.vue
index 76c8592235..3ee2ef9817 100644
--- a/apps/admin/src/views/survey-schemes/data-export/browse.vue
+++ b/apps/admin/src/views/survey-schemes/data-export/browse.vue
@@ -48,7 +48,7 @@
       @close="close"
       @update="update"
     />
-    <v-list lines="two">
+    <v-list class="list-border" lines="two">
       <vue-draggable
         v-model="form.dataExport"
         :animation="300"
@@ -57,7 +57,6 @@
         <v-list-item
           v-for="(section, idx) in form.dataExport"
           :key="section.id"
-          class="drag-and-drop__item"
         >
           <template #prepend>
             <v-avatar class="drag-and-drop__handle" icon="$handle" />
diff --git a/apps/admin/src/views/survey-schemes/data-export/data-export-section.vue b/apps/admin/src/views/survey-schemes/data-export/data-export-section.vue
index d44d16a22e..69f1dacd18 100644
--- a/apps/admin/src/views/survey-schemes/data-export/data-export-section.vue
+++ b/apps/admin/src/views/survey-schemes/data-export/data-export-section.vue
@@ -23,7 +23,7 @@
         <v-row class="mt-3">
           <v-col cols="12" md="6">
             <v-card-title>{{ $t('survey-schemes.data-export.current') }}</v-card-title>
-            <v-list lines="two">
+            <v-list class="list-border" lines="two">
               <vue-draggable
                 v-model="fields"
                 :animation="300"
@@ -32,7 +32,6 @@
                 <v-list-item
                   v-for="(field, index) in fields"
                   :key="field.id"
-                  class="drag-and-drop__item"
                 >
                   <template #prepend>
                     <v-avatar class="drag-and-drop__handle" icon="$handle" />
@@ -82,12 +81,11 @@
               prepend-inner-icon="$search"
               variant="outlined"
             />
-            <v-list lines="two">
+            <v-list class="list-border" lines="two">
               <transition-group name="drag-and-drop" type="transition">
                 <v-list-item
                   v-for="field in visibleFields"
                   :key="field.id"
-                  class="list-item-border"
                   link
                 >
                   <v-list-item-subtitle class="mb-1">
diff --git a/apps/admin/src/views/survey-schemes/prompts/browse.vue b/apps/admin/src/views/survey-schemes/prompts/browse.vue
index e6e8bfb98f..b439c6c86f 100644
--- a/apps/admin/src/views/survey-schemes/prompts/browse.vue
+++ b/apps/admin/src/views/survey-schemes/prompts/browse.vue
@@ -34,10 +34,10 @@
           step: index + 1,
           promptIds,
           templates,
-          items: isMealSection(section) ? form.prompts.meals[section] : form.prompts[section],
+          modelValue: isMealSection(section) ? form.prompts.meals[section] : form.prompts[section],
         }"
         @move="move"
-        @update:items="updateItems(section, $event)"
+        @update:model-value="updateItems(section, $event)"
       />
     </v-expansion-panels>
   </layout>
diff --git a/apps/admin/src/views/surveys/browse.vue b/apps/admin/src/views/surveys/browse.vue
index f08114c6d4..a13eccaf3f 100644
--- a/apps/admin/src/views/surveys/browse.vue
+++ b/apps/admin/src/views/surveys/browse.vue
@@ -10,8 +10,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -19,7 +17,7 @@ defineOptions({ name: 'SurveyList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('surveys.id'),
     sortable: true,
@@ -46,5 +44,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/surveys/overrides/browse.vue b/apps/admin/src/views/surveys/overrides/browse.vue
index 92f942bd7a..1c7c88a06e 100644
--- a/apps/admin/src/views/surveys/overrides/browse.vue
+++ b/apps/admin/src/views/surveys/overrides/browse.vue
@@ -75,7 +75,7 @@
         <v-expansion-panels v-model="panels" flat>
           <prompt-list
             v-bind="{ mode: 'override', promptIds, templates: prompts }"
-            v-model:items="form.surveySchemeOverrides.prompts"
+            v-model="form.surveySchemeOverrides.prompts"
           />
         </v-expansion-panels>
       </v-tabs-window-item>
diff --git a/apps/admin/src/views/surveys/respondents/browse.vue b/apps/admin/src/views/surveys/respondents/browse.vue
index f1d1d4e20f..62cba70fdd 100644
--- a/apps/admin/src/views/surveys/respondents/browse.vue
+++ b/apps/admin/src/views/surveys/respondents/browse.vue
@@ -264,7 +264,7 @@ export default defineComponent({
       );
     }
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       {
         title: i18n.t('users.aliases.username'),
         sortable: true,
@@ -295,7 +295,7 @@ export default defineComponent({
         key: 'action',
         align: 'end',
       },
-    ]);
+    ];
 
     const { entry, entryLoaded } = useEntry<SurveyEntry>(props);
     useEntryFetch(props);
diff --git a/apps/admin/src/views/surveys/sessions/browse.vue b/apps/admin/src/views/surveys/sessions/browse.vue
index 96de22d7cf..e0cb1d08ac 100644
--- a/apps/admin/src/views/surveys/sessions/browse.vue
+++ b/apps/admin/src/views/surveys/sessions/browse.vue
@@ -34,7 +34,7 @@
           </v-toolbar-title>
         </v-toolbar>
         <v-container fluid>
-          <json-editor v-bind="{ readOnly: true, value: selected }" />
+          <json-editor v-bind="{ readOnly: true, modelValue: selected }" />
         </v-container>
       </v-card>
     </v-dialog>
@@ -67,7 +67,7 @@ export default defineComponent({
     const { entry, entryLoaded } = useEntry<SurveyEntry>(props);
     useEntryFetch(props);
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       {
         title: t('surveys.sessions.id'),
         sortable: true,
@@ -104,7 +104,7 @@ export default defineComponent({
         key: 'action',
         align: 'end',
       },
-    ]);
+    ];
 
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
 
diff --git a/apps/admin/src/views/surveys/submissions/browse.vue b/apps/admin/src/views/surveys/submissions/browse.vue
index a831e2887d..d2c2a62037 100644
--- a/apps/admin/src/views/surveys/submissions/browse.vue
+++ b/apps/admin/src/views/surveys/submissions/browse.vue
@@ -34,7 +34,7 @@
           </v-toolbar-title>
         </v-toolbar>
         <v-container fluid>
-          <json-editor v-bind="{ readOnly: true, value: selected }" />
+          <json-editor v-bind="{ readOnly: true, modelValue: selected }" />
         </v-container>
       </v-card>
     </v-dialog>
@@ -67,7 +67,7 @@ export default defineComponent({
     const { entry, entryLoaded } = useEntry<SurveyEntry>(props);
     useEntryFetch(props);
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       {
         title: t('surveys.submissions.id'),
         sortable: true,
@@ -104,7 +104,7 @@ export default defineComponent({
         key: 'action',
         align: 'end',
       },
-    ]);
+    ];
 
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
 
diff --git a/apps/admin/src/views/tasks/browse.vue b/apps/admin/src/views/tasks/browse.vue
index 1018c04540..226faa5f54 100644
--- a/apps/admin/src/views/tasks/browse.vue
+++ b/apps/admin/src/views/tasks/browse.vue
@@ -16,7 +16,6 @@
 
 <script lang="ts" setup>
 import cronstrue from 'cronstrue';
-import { ref } from 'vue';
 
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
@@ -25,7 +24,7 @@ defineOptions({ name: 'TaskList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.name'),
     sortable: true,
@@ -57,7 +56,7 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 
 function readableCron(cron: string) {
   return cronstrue.toString(cron, { use24HourTimeFormat: true });
diff --git a/apps/admin/src/views/user/jobs/browse.vue b/apps/admin/src/views/user/jobs/browse.vue
index 090bc889b5..dc291edbfd 100644
--- a/apps/admin/src/views/user/jobs/browse.vue
+++ b/apps/admin/src/views/user/jobs/browse.vue
@@ -18,8 +18,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useDateTime } from '@intake24/admin/composables';
 import { useI18n } from '@intake24/i18n';
@@ -29,7 +27,7 @@ defineOptions({ name: 'UserJobList' });
 const { i18n: { t } } = useI18n();
 const { formatDateTime } = useDateTime();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('common.id'),
     sortable: true,
@@ -57,5 +55,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/user/personal-access-tokens/browse.vue b/apps/admin/src/views/user/personal-access-tokens/browse.vue
index 9e3f0cfa0b..31ab97e9c1 100644
--- a/apps/admin/src/views/user/personal-access-tokens/browse.vue
+++ b/apps/admin/src/views/user/personal-access-tokens/browse.vue
@@ -96,11 +96,10 @@
         </v-card>
       </v-dialog>
     </v-toolbar>
-    <v-list lines="two">
+    <v-list class="list-border" lines="two">
       <v-list-item
         v-for="(token, idx) in tokens"
         :key="token.id"
-        class="list-item-border"
         :disabled="token.revoked"
         link
       >
diff --git a/apps/admin/src/views/users/browse.vue b/apps/admin/src/views/users/browse.vue
index ba619bf58e..20b2799308 100644
--- a/apps/admin/src/views/users/browse.vue
+++ b/apps/admin/src/views/users/browse.vue
@@ -3,8 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useI18n } from '@intake24/i18n';
 
@@ -12,7 +10,7 @@ defineOptions({ name: 'UserList' });
 
 const { i18n: { t } } = useI18n();
 
-const headers = ref<DataTableHeader[]>([
+const headers: DataTableHeader[] = [
   {
     title: t('users.name'),
     sortable: true,
@@ -29,5 +27,5 @@ const headers = ref<DataTableHeader[]>([
     key: 'action',
     align: 'end',
   },
-]);
+];
 </script>
diff --git a/apps/admin/src/views/users/permissions/browse.vue b/apps/admin/src/views/users/permissions/browse.vue
index fe4513f3c9..531a5d5639 100644
--- a/apps/admin/src/views/users/permissions/browse.vue
+++ b/apps/admin/src/views/users/permissions/browse.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 
 import type { UserEntry } from '@intake24/common/types/http/admin';
 import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
@@ -38,11 +38,11 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`permissions|${action}`));
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       { title: i18n.t('common.name'), sortable: true, key: 'name' },
       { title: i18n.t('common.displayName'), sortable: true, key: 'displayName' },
       { title: i18n.t('common.action._'), sortable: false, key: 'action', align: 'end' },
-    ]);
+    ];
 
     const { entry, entryLoaded } = useEntry<UserEntry>(props);
     useEntryFetch(props);
diff --git a/apps/admin/src/views/users/roles/browse.vue b/apps/admin/src/views/users/roles/browse.vue
index f457cfd3b8..1d96496533 100644
--- a/apps/admin/src/views/users/roles/browse.vue
+++ b/apps/admin/src/views/users/roles/browse.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 
 import type { UserEntry } from '@intake24/common/types/http/admin';
 import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
@@ -38,11 +38,11 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`roles|${action}`));
 
-    const headers = ref<DataTableHeader[]>([
+    const headers: DataTableHeader[] = [
       { title: i18n.t('common.name'), sortable: true, key: 'name' },
       { title: i18n.t('common.displayName'), sortable: true, key: 'displayName' },
       { title: i18n.t('common.action._'), sortable: false, key: 'action', align: 'end' },
-    ]);
+    ];
 
     const { entry, entryLoaded } = useEntry<UserEntry>(props);
     useEntryFetch(props);
diff --git a/apps/survey/src/components/elements/CategoryContentsView.vue b/apps/survey/src/components/elements/CategoryContentsView.vue
index d6d49c541e..c30d36e95a 100644
--- a/apps/survey/src/components/elements/CategoryContentsView.vue
+++ b/apps/survey/src/components/elements/CategoryContentsView.vue
@@ -52,11 +52,10 @@
     >
       {{ showAll ? i18n.showLess : i18n.showAll }}
     </v-btn>
-    <v-list v-if="contents.foods.length" class="list__no-wrap pa-0">
+    <v-list v-if="contents.foods.length" class="list-border list__no-wrap pa-0">
       <v-list-item
         v-for="food in contents.foods"
         :key="food.code"
-        class="list-item-border"
         @click="foodSelected(food)"
       >
         <template #prepend>
diff --git a/apps/survey/src/components/elements/FoodSearchResults.vue b/apps/survey/src/components/elements/FoodSearchResults.vue
deleted file mode 100644
index 06a029a94a..0000000000
--- a/apps/survey/src/components/elements/FoodSearchResults.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <v-list-item
-    v-for="food in results.foods"
-    :key="food.code"
-    class="list-item-border"
-    :value="food.code"
-    @click="foodSelected(food)"
-  >
-    <v-list-item-title>{{ food.name }}</v-list-item-title>
-  </v-list-item>
-</template>
-
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
-
-import type { FoodHeader, FoodSearchResponse } from '@intake24/common/types/http';
-
-export default defineComponent({
-  name: 'FoodSearchResults',
-
-  props: {
-    results: {
-      type: Object as PropType<FoodSearchResponse>,
-      required: true,
-    },
-  },
-
-  emits: ['food-selected'],
-
-  methods: {
-    foodSelected(food: FoodHeader): void {
-      this.$emit('food-selected', food);
-    },
-  },
-});
-</script>
diff --git a/apps/survey/src/components/elements/index.ts b/apps/survey/src/components/elements/index.ts
index a5d771aaab..3e4ee9f9c8 100644
--- a/apps/survey/src/components/elements/index.ts
+++ b/apps/survey/src/components/elements/index.ts
@@ -2,7 +2,6 @@ export { default as CategoryContentsView } from './CategoryContentsView.vue';
 export { default as ErrorAlert } from './ErrorAlert.vue';
 export { default as ExpansionPanelActions } from './ExpansionPanelActions.vue';
 export { default as FoodBrowser } from './FoodBrowser.vue';
-export { default as FoodSearchResults } from './FoodSearchResults.vue';
 export { default as ImagePlaceholder } from './ImagePlaceholder.vue';
 export { default as InfoAlert } from './InfoAlert.vue';
 export { default as MissingAllRecipeIngredients } from './MissingAllRecipeIngredients.vue';
diff --git a/apps/survey/src/components/prompts/partials/EditableFoodList.vue b/apps/survey/src/components/prompts/partials/EditableFoodList.vue
index 3b72b74f1a..57d5c55710 100644
--- a/apps/survey/src/components/prompts/partials/EditableFoodList.vue
+++ b/apps/survey/src/components/prompts/partials/EditableFoodList.vue
@@ -51,11 +51,11 @@
               </v-btn>
             </div>
           </v-form>
-          <v-list v-if="foods.length" density="compact">
+          <v-list v-if="foods.length" class="list-border" density="compact">
             <v-list-item
               v-for="(food, idx) in foods"
               :key="idx"
-              class="list-item-border ps-0"
+              class="ps-0"
               density="compact"
               :ripple="false"
               @click="editFood(idx)"
diff --git a/apps/survey/src/scss/app.scss b/apps/survey/src/scss/app.scss
index 12cd43c40a..3d3228e990 100644
--- a/apps/survey/src/scss/app.scss
+++ b/apps/survey/src/scss/app.scss
@@ -40,7 +40,13 @@ p {
   }
 }
 
-.list-item-border {
+.list-border {
+  .v-list-item:not(:last-child) {
+    border-bottom: 1px solid map-get(settings.$grey, 'lighten-3');
+  }
+}
+
+.list-item-border:not(:last-child) {
   border-bottom: 1px solid map-get(settings.$grey, 'lighten-3');
 }
 
diff --git a/packages/common/src/types/http/admin/nutrient-tables.ts b/packages/common/src/types/http/admin/nutrient-tables.ts
index a90754e09d..3e009d3971 100644
--- a/packages/common/src/types/http/admin/nutrient-tables.ts
+++ b/packages/common/src/types/http/admin/nutrient-tables.ts
@@ -1,7 +1,5 @@
 import { z } from 'zod';
 
-import type { NutrientTableRecordAttributes, Pagination } from '@intake24/db';
-
 import { safeIdentifier } from '../generic';
 import { nutrientTypeResponse } from './nutrient-types';
 
@@ -76,8 +74,6 @@ export const nutrientTableRequest = nutrientTableAttributes.extend({
 
 export type NutrientTableRequest = z.infer<typeof nutrientTableRequest>;
 
-export type NutrientTablesResponse = Pagination<NutrientTableAttributes>;
-
 export type NutrientTableEntry = NutrientTableAttributes & {
   csvMapping: NutrientTableCsvMappingAttributes;
   csvMappingFields: NutrientTableCsvMappingFieldAttributes[];
@@ -97,7 +93,13 @@ export const nutrientTableRecordRequest = z.object({
   nutrients: z.array(z.tuple([z.string(), z.number()])),
   fields: z.array(z.tuple([z.string(), z.string()])),
 });
-
 export type NutrientTableRecordRequest = z.infer<typeof nutrientTableRecordRequest>;
 
-export type NutrientTableRecordsResponse = Pagination<NutrientTableRecordAttributes>;
+export const nutrientTableRecordAttributes = z.object({
+  id: z.string(),
+  name: z.string(),
+  localName: z.string(),
+  nutrientTableId: z.string(),
+  nutrientTableRecordId: z.string(),
+});
+export type NutrientTableRecordAttributes = z.infer<typeof nutrientTableRecordAttributes>;
diff --git a/packages/common/src/types/http/admin/references.ts b/packages/common/src/types/http/admin/references.ts
index e9c9120f09..77924d9aa5 100644
--- a/packages/common/src/types/http/admin/references.ts
+++ b/packages/common/src/types/http/admin/references.ts
@@ -2,6 +2,7 @@ import { z } from 'zod';
 
 import { languageAttributes } from './languages';
 import { systemLocaleAttributes } from './locales';
+import { nutrientTableRecordAttributes } from './nutrient-tables';
 import { standardUnitAttributes } from './standard-units';
 import { surveyAttributes } from './surveys';
 
@@ -39,13 +40,7 @@ export const localeReference = systemLocaleAttributes.pick({
 });
 export type LocaleReference = z.infer<typeof localeReference>;
 
-export const nutrientTableRecordReference = z.object({
-  id: z.string(),
-  nutrientTableId: z.string(),
-  nutrientTableRecordId: z.string(),
-  name: z.string(),
-  localName: z.string(),
-});
+export const nutrientTableRecordReference = nutrientTableRecordAttributes;
 export type NutrientTableRecordReference = z.infer<typeof nutrientTableRecordReference>;
 
 export const standardUnitReference = standardUnitAttributes.pick({
diff --git a/packages/ui/src/feedback/components/feedback-user-info.vue b/packages/ui/src/feedback/components/feedback-user-info.vue
index ff2b104697..858a3af7a0 100644
--- a/packages/ui/src/feedback/components/feedback-user-info.vue
+++ b/packages/ui/src/feedback/components/feedback-user-info.vue
@@ -18,15 +18,12 @@
           <span>{{ $t('feedback.physicalData.change') }}</span>
         </v-tooltip>
       </v-toolbar>
-      <v-list v-if="physicalData.length" class="py-0">
-        <template v-for="(item, idx) in physicalData" :key="idx">
-          <v-list-item>
-            <v-list-item-subtitle>
-              {{ item }}
-            </v-list-item-subtitle>
-          </v-list-item>
-          <v-divider v-if="idx + 1 < physicalData.length" :key="`div-${idx}`" />
-        </template>
+      <v-list v-if="physicalData.length" class="py-0 list-border">
+        <v-list-item v-for="(item, idx) in physicalData" :key="idx">
+          <v-list-item-subtitle>
+            {{ item }}
+          </v-list-item-subtitle>
+        </v-list-item>
       </v-list>
     </v-card>
     <!-- <v-btn