diff --git a/.github/renovate.json5 b/.github/renovate.json5
index d6f2f0b588..9407c40ffb 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -11,18 +11,7 @@
         "formdata-node", // ESM-only since 5.x.x
         "nanoid", // ESM-only since 4.x.x
         "p-limit", // ESM-only since 4.x.x
-        "p-queue", // ESM-only since 7.x.x
-
-        // Bump after Vue.js v3 upgrade
-        "@tinymce/tinymce-vue",
-        "@vue/compiler-sfc",
-        "vue",
-        "vue-dompurify-html",
-        "vue-gtag",
-        "vue-i18n",
-        "vue-router",
-        "vue-recaptcha",
-        "vuetify"
+        "p-queue" // ESM-only since 7.x.x
       ],
       "matchUpdateTypes": ["major"],
       "enabled": false
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d6ecd81db0..ee9df9f14f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -366,9 +366,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Survey client - type check
-        working-directory: apps/survey
-        run: pnpm type-check
+      # - name: Survey client - type check
+      #   working-directory: apps/survey
+      #   run: pnpm type-check
 
       - name: Survey client - build
         working-directory: apps/survey
diff --git a/apps/admin/.env-template b/apps/admin/.env-template
index a45382cc34..9e4b1f545c 100644
--- a/apps/admin/.env-template
+++ b/apps/admin/.env-template
@@ -21,6 +21,7 @@ DISABLE_PWA=false
 
 # Vue.js dev server vars
 DEV_HTTPS=false
+VUE_DEV_TOOLS=false
 
 # Vite public vars
 VITE_APP_NAME=Intake24 Admin
diff --git a/apps/admin/env.d.ts b/apps/admin/env.d.ts
new file mode 100644
index 0000000000..51354c22f9
--- /dev/null
+++ b/apps/admin/env.d.ts
@@ -0,0 +1,4 @@
+/// <reference types="@simplewebauthn/types" />
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vuetify" />
diff --git a/apps/admin/package.json b/apps/admin/package.json
index c0b25f712b..40474237c1 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -17,12 +17,12 @@
     "build-only": "vite build",
     "generate-pwa-assets": "pwa-assets-generator",
     "start": "node server/index.js",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit -p tsconfig.tc.json"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
     "@simplewebauthn/browser": "^10.0.0",
-    "@tinymce/tinymce-vue": "^3.2.8",
+    "@tinymce/tinymce-vue": "^6.0.1",
     "@vueuse/core": "^11.1.0",
     "axios": "^1.7.7",
     "axios-retry": "^4.5.0",
@@ -38,35 +38,41 @@
     "lodash": "^4.17.21",
     "nanoid": "^3.3.7",
     "pinia": "^2.2.4",
-    "pinia-plugin-persistedstate": "^4.0.2",
+    "pinia-plugin-persistedstate": "^4.1.1",
     "pluralize": "^8.0.0",
     "tinymce": "^7.3.0",
-    "vue": "^2.7.16",
-    "vue-dompurify-html": "^4.1.4",
-    "vue-gtag": "^1.16.1",
-    "vue-i18n": "^8.28.2",
-    "vue-router": "^3.6.5",
-    "vuedraggable": "^2.24.3",
-    "vuetify": "^2.7.2"
+    "vue": "^3.5.11",
+    "vue-dompurify-html": "^5.1.0",
+    "vue-draggable-plus": "^0.5.3",
+    "vue-gtag": "^2.0.1",
+    "vue-i18n": "^9.14.1",
+    "vue-router": "^4.4.5",
+    "vuetify": "^3.7.2"
   },
   "devDependencies": {
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@simplewebauthn/types": "^10.0.0",
+    "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/node": "^22.7.4",
     "@types/pluralize": "^0.0.33",
     "@vite-pwa/assets-generator": "^0.2.6",
-    "@vitejs/plugin-vue2": "^2.3.1",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/tsconfig": "^0.5.1",
     "cross-env": "^7.0.3",
     "jsdom": "^25.0.1",
-    "sass": "~1.32.13",
+    "sass": "^1.79.4",
     "typescript": "^5.6.2",
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.8",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-mkcert": "^1.17.6",
     "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-vue-devtools": "^7.4.6",
+    "vite-plugin-vuetify": "^2.0.4",
     "vite-plugin-webfont-dl": "^3.9.5",
-    "vitest": "^2.1.1",
+    "vitest": "^2.1.2",
     "vue-tsc": "^2.1.6",
     "workbox-window": "^7.1.0",
     "zod": "^3.23.8"
diff --git a/apps/admin/src/app.vue b/apps/admin/src/app.vue
index 7a9fd5a7a6..04885c6ed0 100644
--- a/apps/admin/src/app.vue
+++ b/apps/admin/src/app.vue
@@ -1,54 +1,37 @@
 <template>
   <v-app>
     <loader :show="isAppLoading" />
-    <v-navigation-drawer v-if="loggedIn && isVerified" v-model="sidebar" app color="secondary" dark>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title class="my-1">
-            {{ $t('common._') }}
+    <v-navigation-drawer v-if="loggedIn && isVerified" v-model="sidebar" color="secondary">
+      <v-list>
+        <v-list-item link to="/">
+          <template #prepend>
+            <v-avatar :image="logo" rounded="0" />
+          </template>
+          <v-list-item-title class="my-1 text-h6">
+            {{ app.name }}
           </v-list-item-title>
-        </v-list-item-content>
-      </v-list-item>
+        </v-list-item>
+      </v-list>
       <v-divider />
-      <v-list dense nav>
-        <v-list-group color="grey lighten-1" prepend-icon="fas fa-fw fa-user" value="true">
-          <template #activator>
-            <v-list-item-title>{{ $t('user._') }}</v-list-item-title>
-          </template>
-          <v-list-item-group>
-            <v-list-item link :to="{ name: 'dashboard' }">
-              <v-list-item-action>
-                <v-icon>fas fa-fw fa-tachometer-alt</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('dashboard._') }}</v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item link :to="{ name: 'user' }">
-              <v-list-item-action>
-                <v-icon>fas fa-circle-user</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('user.profile') }}</v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item link :to="{ name: 'user.personal-access-tokens' }">
-              <v-list-item-action>
-                <v-icon>fas fa-key</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('user.personalAccessTokens.title') }}</v-list-item-title>
-              </v-list-item-content>
+      <v-list density="compact" nav>
+        <v-list-group color="grey-lighten-1" prepend-icon="fas fa-fw fa-user" :value="true">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props">
+              <v-list-item-title>{{ $t('user._') }}</v-list-item-title>
             </v-list-item>
-            <v-list-item link :to="{ name: 'user.jobs' }">
-              <v-list-item-action>
-                <v-icon>$jobs</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('user.jobs.title') }}</v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </v-list-item-group>
+          </template>
+          <v-list-item link prepend-icon="fas fa-fw fa-tachometer-alt" :to="{ name: 'dashboard' }">
+            <v-list-item-title>{{ $t('dashboard._') }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item link prepend-icon="fas fa-circle-user" :to="{ name: 'user' }">
+            <v-list-item-title>{{ $t('user.profile') }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item link prepend-icon="fas fa-key" :to="{ name: 'user.personal-access-tokens' }">
+            <v-list-item-title>{{ $t('user.personalAccessTokens.title') }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item link prepend-icon="$jobs" :to="{ name: 'user.jobs' }">
+            <v-list-item-title>{{ $t('user.jobs.title') }}</v-list-item-title>
+          </v-list-item>
         </v-list-group>
       </v-list>
       <menu-tree
@@ -99,27 +82,27 @@
       />
     </v-navigation-drawer>
 
-    <v-app-bar v-if="loggedIn" app color="primary" dark fixed>
+    <v-app-bar v-if="loggedIn" color="primary">
       <v-app-bar-nav-icon :disabled="!isVerified" @click.stop="toggleSidebar" />
       <v-spacer />
-      <v-btn :href="app.docs" target="_blank" text :title="$t('common.docs')">
-        <v-icon :left="!isMobile">
+      <v-btn :href="app.docs" target="_blank" :title="$t('common.docs')" variant="text">
+        <v-icon :start="!$vuetify.display.mobile">
           $docs
         </v-icon>
         <span class="d-none d-sm-block">{{ $t('common.docs') }}</span>
       </v-btn>
-      <v-btn v-if="isVerified" text :to="{ name: 'user' }">
-        <v-icon :left="!isMobile">
+      <v-btn v-if="isVerified" :to="{ name: 'user' }" variant="text">
+        <v-icon :start="!$vuetify.display.mobile">
           $user
         </v-icon>
         <span class="d-none d-sm-block">{{ $t('user.profile') }}</span>
       </v-btn>
       <v-divider class="mx-2" vertical />
-      <confirm-dialog :label="$t('common.logout._').toString()" @confirm="logout">
-        <template #activator="{ attrs, on }">
-          <v-btn text v-bind="attrs" v-on="on">
+      <confirm-dialog :label="$t('common.logout._')" @confirm="logout">
+        <template #activator="{ props }">
+          <v-btn variant="text" v-bind="props">
             <span class="d-none d-sm-block">{{ $t('common.logout._') }}</span>
-            <v-icon :right="!isMobile">
+            <v-icon :end="!$vuetify.display.mobile">
               $logout
             </v-icon>
           </v-btn>
@@ -129,8 +112,8 @@
     </v-app-bar>
 
     <v-main>
-      <v-container :class="{ 'pa-0': isMobile }" fluid>
-        <v-breadcrumbs v-if="breadcrumbs.length" class="px-1 py-2" :items="breadcrumbs" large>
+      <v-container :class="{ 'pa-0': $vuetify.display.mobile }" fluid>
+        <v-breadcrumbs v-if="breadcrumbs.length" class="px-1 py-2" :items="breadcrumbs">
           <template #divider>
             <v-icon>fas fa-caret-right</v-icon>
           </template>
@@ -145,20 +128,21 @@
 </template>
 
 <script lang="ts">
-import type { Location } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router';
 import groupBy from 'lodash/groupBy';
 import { mapState } from 'pinia';
 import pluralize from 'pluralize';
 import { defineComponent } from 'vue';
+import { useDisplay, useLocale } from 'vuetify';
 
-import type { Dictionary } from '@intake24/common/types';
+import type { Dictionary } from '@intake24/common';
 import MenuTree from '@intake24/admin/components/sidebar/menu-tree.vue';
 import webPush from '@intake24/admin/components/web-push/web-push';
 import resources from '@intake24/admin/router/resources';
 import { useApp, useAuth, useEntry, useUser } from '@intake24/admin/stores';
+import { iconWhite } from '@intake24/common/theme/assets';
 import { ConfirmDialog, Loader, MessageBox, ServiceWorker, useLanguage } from '@intake24/ui';
 
-import { vuetify } from './plugins';
 import { useHttp } from './services';
 
 type Breadcrumbs = {
@@ -166,8 +150,8 @@ type Breadcrumbs = {
   exact?: boolean;
   href?: string;
   link?: boolean;
-  text: string | number;
-  to?: string | Location;
+  title: string;
+  to?: string | RouteLocationRaw;
 };
 
 export default defineComponent({
@@ -179,13 +163,15 @@ export default defineComponent({
 
   setup() {
     const http = useHttp();
-    useLanguage('admin', http, vuetify.framework);
-  },
+    const vI18n = useLocale();
+    const display = useDisplay();
+
+    useLanguage('admin', http, vI18n);
 
-  data() {
     return {
       resources: groupBy(resources, 'group'),
-      sidebar: this.$vuetify.breakpoint.lgAndUp,
+      sidebar: display.lgAndUp,
+      logo: iconWhite,
     };
   },
 
@@ -207,16 +193,16 @@ export default defineComponent({
     title(): string {
       const { meta: { title } = {} } = this.$route;
       if (title)
-        return this.$t(title).toString();
+        return this.$t(title);
 
       const { module } = this;
       if (!module)
-        return this.$t('common._').toString();
+        return this.$t('common._');
 
       const { id, name, englishName, description } = this.entry;
 
       // TODO: we should resole breadcrumb name in better way based on entry field
-      return name ?? englishName ?? description ?? id ?? this.$t(`${module}.title`).toString();
+      return name ?? englishName ?? description ?? id ?? this.$t(`${module}.title`);
     },
   },
 
@@ -284,7 +270,7 @@ export default defineComponent({
       if (parent)
         params.id = id;
 
-      items.push({ ...defaults, text: this.$t(`${title}.title`).toString(), to: { name } });
+      items.push({ ...defaults, title: this.$t(`${title}.title`), to: { name } });
 
       if (!currentId)
         return items;
@@ -292,7 +278,7 @@ export default defineComponent({
       if (currentId === 'create') {
         items.push({
           ...defaults,
-          text: this.$t(`${title}.${action}`).toString(),
+          title: this.$t(`${title}.${action}`),
           to: { name: `${name}-${action}`, params },
         });
         return items;
@@ -304,14 +290,14 @@ export default defineComponent({
 
       items.push({
         ...defaults,
-        text: parent ? this.$t(`${title}.${action}`) : text,
+        title: parent ? this.$t(`${title}.${action}`) : text,
         to: { name: `${name}-${action === 'edit' ? 'read' : action}`, params },
       });
 
       if (['edit'].includes(action)) {
         items.push({
           ...defaults,
-          text: this.$t(`${title}.${action}`).toString(),
+          title: this.$t(`${title}.${action}`),
           to: { name: `${name}-${action}`, params },
         });
       }
diff --git a/apps/admin/src/bootstrap.ts b/apps/admin/src/bootstrap.ts
deleted file mode 100644
index c46645b259..0000000000
--- a/apps/admin/src/bootstrap.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import Vue from 'vue';
-import { Intersect, Resize, Ripple } from 'vuetify/lib/directives';
-
-import { auth, isMobile, loading, module } from './mixins';
-
-// @ts-expect-error Vue2.7 types
-Vue.mixin(auth);
-// @ts-expect-error Vue2.7 types
-Vue.mixin(isMobile);
-// @ts-expect-error Vue2.7 types
-Vue.mixin(loading);
-// @ts-expect-error Vue2.7 types
-Vue.mixin(module);
-
-Vue.directive('intersect', Intersect);
-Vue.directive('resize', Resize);
-Vue.directive('ripple', Ripple);
diff --git a/apps/admin/src/components/data-tables/action-bar/action-bar.vue b/apps/admin/src/components/data-tables/action-bar/action-bar.vue
index 7a88ac30b3..177466f947 100644
--- a/apps/admin/src/components/data-tables/action-bar/action-bar.vue
+++ b/apps/admin/src/components/data-tables/action-bar/action-bar.vue
@@ -1,15 +1,12 @@
 <template>
-  <div>
-    <component
-      :is="action"
-      v-for="action in currentActions"
-      :key="`${action}-${item.id}`"
-      :action="action"
-      :item="item"
-      :route="route"
-      @action="onAction"
-    />
-  </div>
+  <component
+    :is="action"
+    v-for="action in currentActions"
+    :key="`${action}-${item.id}`"
+    :action="action"
+    :item="item"
+    @action="onAction"
+  />
 </template>
 
 <script lang="ts">
@@ -47,9 +44,6 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    routePrefix: {
-      type: String,
-    },
   },
 
   emits: ['refresh'],
@@ -63,9 +57,6 @@ export default defineComponent({
         return this.can({ action, ownerId, securables });
       });
     },
-    route(): string | null | undefined {
-      return this.routePrefix ?? this.$route.name;
-    },
   },
 
   methods: {
@@ -83,7 +74,7 @@ export default defineComponent({
 
     async onSuccess(action: string): Promise<void> {
       const { id, name } = this.item;
-      useMessages().success(this.$t(`common.msg.${action}`, { name: name ?? id }).toString());
+      useMessages().success(this.$t(`common.msg.${action}`, { name: name ?? id }));
       this.$emit('refresh');
     },
   },
diff --git a/apps/admin/src/components/data-tables/action-bar/action-mixin.ts b/apps/admin/src/components/data-tables/action-bar/action-mixin.ts
index 45401b3fc4..fa679a6035 100644
--- a/apps/admin/src/components/data-tables/action-bar/action-mixin.ts
+++ b/apps/admin/src/components/data-tables/action-bar/action-mixin.ts
@@ -1,5 +1,4 @@
-import type { PropType } from 'vue';
-import type { Location } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -12,15 +11,9 @@ export default defineComponent({
       type: Object,
       required: true,
     },
-    routePrefix: {
-      type: String,
-    },
     title: {
       type: String,
     },
-    to: {
-      type: Object as PropType<Location>,
-    },
   },
 
   emits: ['action'],
@@ -30,23 +23,19 @@ export default defineComponent({
       return `$${this.action}`;
     },
     route(): string | null | undefined {
-      return this.routePrefix ?? this.$route.name;
+      return this.$route.name?.toString();
     },
     internalTitle(): string {
-      return this.title ?? this.$t(`common.action.${this.action}`).toString();
+      return this.title ?? this.$t(`common.action.${this.action}`);
     },
-    internalTo(): Location {
-      const { to } = this;
-      if (to)
-        return to;
-
+    internalTo(): RouteLocationRaw {
       const {
         action,
         item: { id },
         route,
       } = this;
 
-      return { name: `${route}-${action}`, params: { id } };
+      return { name: `${route}-${action}`, params: id ? { id } : undefined };
     },
   },
 
diff --git a/apps/admin/src/components/data-tables/action-bar/download.vue b/apps/admin/src/components/data-tables/action-bar/download.vue
index 7031142a4c..b01d0e9753 100644
--- a/apps/admin/src/components/data-tables/action-bar/download.vue
+++ b/apps/admin/src/components/data-tables/action-bar/download.vue
@@ -2,11 +2,10 @@
   <v-btn
     v-if="downloadUrlAvailable(item)"
     color="secondary"
-    icon
     :title="internalTitle"
     @click="download(item)"
   >
-    <v-icon dark>
+    <v-icon>
       {{ icon }}
     </v-icon>
   </v-btn>
diff --git a/apps/admin/src/components/data-tables/action-bar/edit.vue b/apps/admin/src/components/data-tables/action-bar/edit.vue
index bf3943c809..4382b62bdb 100644
--- a/apps/admin/src/components/data-tables/action-bar/edit.vue
+++ b/apps/admin/src/components/data-tables/action-bar/edit.vue
@@ -1,6 +1,10 @@
 <template>
-  <v-btn color="secondary" icon :title="internalTitle" :to="internalTo">
-    <v-icon dark>
+  <v-btn
+    color="secondary"
+    :title="internalTitle"
+    :to="internalTo"
+  >
+    <v-icon>
       {{ icon }}
     </v-icon>
   </v-btn>
diff --git a/apps/admin/src/components/data-tables/action-bar/read.vue b/apps/admin/src/components/data-tables/action-bar/read.vue
index 4392e3a265..0d67764589 100644
--- a/apps/admin/src/components/data-tables/action-bar/read.vue
+++ b/apps/admin/src/components/data-tables/action-bar/read.vue
@@ -1,6 +1,10 @@
 <template>
-  <v-btn color="secondary" icon :title="internalTitle" :to="internalTo">
-    <v-icon dark>
+  <v-btn
+    color="secondary"
+    :title="internalTitle"
+    :to="internalTo"
+  >
+    <v-icon>
       {{ icon }}
     </v-icon>
   </v-btn>
diff --git a/apps/admin/src/components/data-tables/data-table-filter.vue b/apps/admin/src/components/data-tables/data-table-filter.vue
index 0162e89d6f..0f4c18d67f 100644
--- a/apps/admin/src/components/data-tables/data-table-filter.vue
+++ b/apps/admin/src/components/data-tables/data-table-filter.vue
@@ -7,8 +7,8 @@
           clearable
           hide-details="auto"
           :label="$t('common.search._')"
-          outlined
           prepend-inner-icon="$search"
+          variant="outlined"
           @click:clear="resetFilter"
           @click:prepend="setFilter"
           @keyup.enter="setFilter"
diff --git a/apps/admin/src/components/data-tables/data-table.vue b/apps/admin/src/components/data-tables/data-table.vue
index 0f12ebf2c8..12c5f43c7b 100644
--- a/apps/admin/src/components/data-tables/data-table.vue
+++ b/apps/admin/src/components/data-tables/data-table.vue
@@ -1,46 +1,48 @@
 <template>
-  <div>
-    <tool-bar v-bind="{ actions, api, selected: tracked }" @refresh="onRefresh" />
-    <v-card :flat="isMobile" :outlined="!isMobile" :tile="isMobile">
-      <v-card-text>
-        <data-table-filter
-          :count="meta.total"
-          @filter-reset="resetFilter"
-          @filter-set="setFilter"
-        />
-        <v-data-table
-          v-model="selected"
-          :footer-props="{
-            'items-per-page-options': [25, 50, 100],
-          }"
-          :headers="headers"
-          item-key="id"
-          :items="items"
-          :items-per-page="50"
-          :loading="isAppLoading"
-          :options.sync="options"
-          :server-items-length="meta.total"
-          show-select
-        >
-          <template v-for="(_, scopedSlotName) in $scopedSlots" #[scopedSlotName]="slotData">
-            <slot :name="scopedSlotName" v-bind="slotData" />
-          </template>
-          <template
-            v-if="!Object.keys($scopedSlots).includes('item.action')"
-            #[`item.action`]="{ item }"
-          >
+  <tool-bar
+    v-if="actions.length"
+    v-bind="{ actions, api, selected: tracked }"
+    @refresh="onRefresh"
+  />
+  <v-card
+    v-bind="{ variant }"
+    :flat="$vuetify.display.mobile"
+    :rounded="$vuetify.display.mobile ? 0 : undefined"
+  >
+    <v-card-text>
+      <data-table-filter
+        :count="meta.total"
+        @filter-reset="resetFilter"
+        @filter-set="setFilter"
+      />
+      <v-data-table-server
+        v-model="selected"
+        v-model:options="options"
+        :headers="headers"
+        :item-value="trackBy"
+        :items="items"
+        :items-length="meta.total ?? 0"
+        :items-per-page="50"
+        :loading="isAppLoading"
+        return-object
+        show-select
+      >
+        <template v-for="(_, scopedSlotName) in $slots" #[scopedSlotName]="slotData">
+          <slot :name="scopedSlotName" v-bind="slotData" />
+        </template>
+        <template #item.action="{ item }">
+          <slot name="action" v-bind="{ item }">
             <action-bar
               :actions="actions.filter((action) => action !== 'create')"
               :api="api"
-              class="text-right"
               :item="item"
               @refresh="onRefresh"
             />
-          </template>
-        </v-data-table>
-      </v-card-text>
-    </v-card>
-  </div>
+          </slot>
+        </template>
+      </v-data-table-server>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script lang="ts">
@@ -78,6 +80,10 @@ export default defineComponent({
       type: String,
       default: 'id',
     },
+    variant: {
+      type: String as PropType<'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'>,
+      default: 'elevated',
+    },
   },
 
   setup(props) {
diff --git a/apps/admin/src/components/data-tables/embedded-data-table.vue b/apps/admin/src/components/data-tables/embedded-data-table.vue
index bbfdc38a22..b7eeed23a7 100644
--- a/apps/admin/src/components/data-tables/embedded-data-table.vue
+++ b/apps/admin/src/components/data-tables/embedded-data-table.vue
@@ -9,11 +9,11 @@
           <v-text-field
             v-model="filter.search"
             clearable
-            dense
+            density="compact"
             hide-details="auto"
             :label="$t('common.search._')"
-            outlined
             prepend-inner-icon="$search"
+            variant="outlined"
             @click:append="setFilter"
             @click:clear="resetFilter"
             @keyup.enter="setFilter"
@@ -21,22 +21,21 @@
         </v-col>
       </v-row>
     </v-container>
-    <v-data-table
+    <v-data-table-server
       v-model="selected"
-      :footer-props="{ 'items-per-page-options': [25, 50, 100] }"
+      v-model:options="options"
       :headers="headers"
-      :item-key="trackBy"
+      :item-value="trackBy"
       :items="items"
+      :items-length="meta.total ?? 0"
       :items-per-page="50"
       :loading="isAppLoading"
-      :options.sync="options"
-      :server-items-length="meta.total"
       :show-select="showSelect"
     >
-      <template v-for="(_, scopedSlotName) in $scopedSlots" #[scopedSlotName]="slotData">
+      <template v-for="(_, scopedSlotName) in $slots" #[scopedSlotName]="slotData">
         <slot :name="scopedSlotName" v-bind="slotData" />
       </template>
-    </v-data-table>
+    </v-data-table-server>
   </div>
 </template>
 
diff --git a/apps/admin/src/components/data-tables/index.ts b/apps/admin/src/components/data-tables/index.ts
index a26d6a3b78..245fc5f51b 100644
--- a/apps/admin/src/components/data-tables/index.ts
+++ b/apps/admin/src/components/data-tables/index.ts
@@ -1,3 +1,4 @@
 export { default as DataTable } from './data-table.vue';
 export { default as DataTableFilter } from './data-table-filter.vue';
 export { default as EmbeddedDataTable } from './embedded-data-table.vue';
+export * from './use-data-table';
diff --git a/apps/admin/src/components/data-tables/use-data-table.ts b/apps/admin/src/components/data-tables/use-data-table.ts
index 28a0a0c6fc..4c2aa04c69 100644
--- a/apps/admin/src/components/data-tables/use-data-table.ts
+++ b/apps/admin/src/components/data-tables/use-data-table.ts
@@ -1,6 +1,4 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-import type { DataOptions } from 'vuetify';
 import { computed, ref, watch } from 'vue';
 
 import type { Dictionary } from '@intake24/common/types';
@@ -8,11 +6,18 @@ import type { Pagination, PaginationMeta } from '@intake24/db';
 import { useHttp } from '@intake24/admin/services';
 import { useResource } from '@intake24/admin/stores';
 
+export type DataTableOptions = {
+  itemsPerPage: number;
+  page: number;
+  sortBy: { key: string; order: string }[];
+  groupBy: { key: string; order: string }[];
+};
+
 export type DataTableHeader = {
-  text: string | TranslateResult;
-  value: string;
+  key: string;
+  title: string;
   sortable?: boolean;
-  align?: string;
+  align?: 'start' | 'center' | 'end';
 };
 
 export type DataTableProps = {
@@ -29,7 +34,7 @@ export function useDataTable(props: DataTableProps, filter: ComputedRef<Dictiona
 
   const items = ref<Dictionary[]>([]);
   const meta = ref<Partial<PaginationMeta>>({ total: 0 });
-  const options = ref<DataOptions>({} as DataOptions);
+  const options = ref<DataTableOptions>({} as DataTableOptions);
   const selected = ref<Dictionary[]>([]);
 
   const tracked = computed<string[] | number[]>(() =>
@@ -40,11 +45,10 @@ export function useDataTable(props: DataTableProps, filter: ComputedRef<Dictiona
     const {
       page,
       itemsPerPage: limit,
-      sortBy: [column],
-      sortDesc: [desc],
+      sortBy: [sortItem],
     } = options.value;
 
-    const sort = column ? `${column}|${desc ? 'desc' : 'asc'}` : undefined;
+    const sort = sortItem ? `${sortItem.key}|${sortItem.order}` : undefined;
 
     const { data } = await http.get<Pagination>(api.value, {
       params: { limit, page, sort, ...filter.value },
diff --git a/apps/admin/src/components/dialogs/csv-upload/csv-upload.vue b/apps/admin/src/components/dialogs/csv-upload/csv-upload.vue
index 13a55834ee..ffcb3346fb 100644
--- a/apps/admin/src/components/dialogs/csv-upload/csv-upload.vue
+++ b/apps/admin/src/components/dialogs/csv-upload/csv-upload.vue
@@ -1,20 +1,16 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-btn large v-bind="attrs" v-on="on">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-btn size="large" v-bind="props">
         <v-list-item-title>
-          <v-icon left>
-            fas fa-upload
-          </v-icon>
+          <v-icon icon="$upload" start />
           {{ label }}
         </v-list-item-title>
       </v-btn>
     </template>
-    <v-card :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-icon dark left>
-          $upload
-        </v-icon>
+        <v-icon end icon="$upload" />
         <v-toolbar-title>
           {{ dialogTitle }}
         </v-toolbar-title>
@@ -30,17 +26,15 @@
                   hide-details="auto"
                   :label="$t('common.file.csv')"
                   name="file"
-                  outlined
                   prepend-icon=""
                   prepend-inner-icon="fas fa-file-csv"
+                  variant="outlined"
                   @change="form.errors.clear('file')"
                 />
               </v-col>
               <v-col cols="12" sm="auto">
-                <v-btn block color="primary" :disabled="jobInProgress" type="submit" x-large>
-                  <v-icon left>
-                    $upload
-                  </v-icon>
+                <v-btn block color="primary" :disabled="jobInProgress" size="x-large" type="submit">
+                  <v-icon icon="$upload" start />
                   {{ $t('common.action.upload') }}
                 </v-btn>
               </v-col>
@@ -50,7 +44,7 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn class="font-weight-bold" color="info" text @click.stop="close">
+          <v-btn class="font-weight-bold" color="info" variant="text" @click.stop="close">
             {{ $t('common.action.close') }}
           </v-btn>
         </v-card-actions>
diff --git a/apps/admin/src/components/dialogs/event-notifications.vue b/apps/admin/src/components/dialogs/event-notifications.vue
index 2358a40872..26af4dd505 100644
--- a/apps/admin/src/components/dialogs/event-notifications.vue
+++ b/apps/admin/src/components/dialogs/event-notifications.vue
@@ -1,112 +1,99 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="800px">
-    <template #activator="{ attrs, on }">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="800px">
+    <template #activator="{ props }">
       <v-btn
-        v-bind="attrs"
         block
         color="primary"
-        large
-        outlined
         rounded
+        size="large"
         :title="$t('notifications.title')"
-        v-on="on"
+        variant="outlined"
+        v-bind="props"
       >
-        <v-icon left>
-          fas fa-paper-plane
-        </v-icon> {{ $t('notifications.title') }}
+        <v-icon icon="fas fa-paper-plane" start /> {{ $t('notifications.title') }}
       </v-btn>
     </template>
     <v-card tile>
       <v-toolbar color="secondary" dark>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t('notifications.title') }}
         </v-toolbar-title>
       </v-toolbar>
       <div class="d-flex justify-end pa-4">
-        <v-btn color="primary" large rounded :title="$t('notifications.add')" @click="add">
-          <v-icon left>
-            fas fa-paper-plane
-          </v-icon> {{ $t('notifications.add') }}
+        <v-btn color="primary" rounded size="large" :title="$t('notifications.add')" @click="add">
+          <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">
-          <v-list-item :key="idx">
-            <v-list-item-avatar>
-              <v-icon>fas fa-paper-plane</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-container>
-                <v-row>
-                  <v-col cols="12" md="6">
-                    <v-select
-                      v-model="item.type"
-                      hide-details="auto"
-                      :items="events"
-                      name="type"
-                      outlined
-                      :title="$t('notifications.events._')"
-                    />
-                  </v-col>
-                  <v-col cols="12" md="6">
-                    <v-select
-                      v-model="item.channel"
-                      hide-details="auto"
-                      :items="channels"
-                      name="type"
-                      outlined
-                      :title="$t('notifications.channels._')"
-                      @change="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')"
-                      outlined
-                    />
-                    <v-text-field
-                      v-else-if="item.channel === 'email'"
-                      v-model="item.to"
-                      hide-details="auto"
-                      :label="$t('notifications.channels.to')"
-                      outlined
-                    />
-                    <v-text-field
-                      v-else-if="item.channel === 'slack'"
-                      v-model="item.channelId"
-                      hide-details="auto"
-                      :label="$t('notifications.channels.channelId')"
-                      outlined
-                    />
-                  </v-col>
-                </v-row>
-              </v-container>
-            </v-list-item-content>
+      <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 icon :title="$t('notifications.remove')" @click.stop="remove(idx)">
-                <v-icon color="secondary lighten-2">
-                  $delete
-                </v-icon>
-              </v-btn>
+              <v-btn color="error" icon="$delete" :title="$t('notifications.remove')" @click.stop="remove(idx)" />
             </v-list-item-action>
-          </v-list-item>
-          <v-divider v-if="idx + 1 < items.length" :key="`div-${idx}`" />
-        </template>
+          </template>
+        </v-list-item>
       </v-list>
       <v-card-actions>
         <v-spacer />
-        <v-btn class="font-weight-bold" color="info" text @click.stop="close">
-          <v-icon left>
-            $success
-          </v-icon>{{ $t('common.action.ok') }}
+        <v-btn class="font-weight-bold" color="info" variant="text" @click.stop="close">
+          <v-icon icon="$success" start /> {{ $t('common.action.ok') }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -144,7 +131,7 @@ export default defineComponent({
   name: 'EventNotifications',
 
   props: {
-    value: {
+    modelValue: {
       type: Array as PropType<Notification[]>,
       required: true,
     },
@@ -152,19 +139,18 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const { i18n } = useI18n();
-    const items = useVModel(props, 'value', emit, {
-      eventName: 'input',
+    const items = useVModel(props, 'modelValue', emit, {
       passive: true,
       deep: true,
     });
 
     const channels = notificationChannels.map(value => ({
       value,
-      text: i18n.t(`notifications.channels.${value}`).toString(),
+      title: i18n.t(`notifications.channels.${value}`),
     }));
     const events = eventTypes.map(value => ({
       value,
-      text: i18n.t(`notifications.events.${value}`).toString(),
+      title: i18n.t(`notifications.events.${value}`),
     }));
 
     const dialog = ref(false);
diff --git a/apps/admin/src/components/dialogs/information-popup.vue b/apps/admin/src/components/dialogs/information-popup.vue
index 0406d74b72..af46b303d8 100644
--- a/apps/admin/src/components/dialogs/information-popup.vue
+++ b/apps/admin/src/components/dialogs/information-popup.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-dialog :fullscreen="$vuetify.breakpoint.smAndDown" max-width="800px" :value="open" @click:outside="close">
+  <v-dialog :fullscreen="$vuetify.display.smAndDown" max-width="800px" :model-value="open" @click:outside="close">
     <v-card>
       <v-card-text class="pa-0">
         <component :is="componentType" />
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn class="font-weight-bold" color="info" text @click.stop="close">
+        <v-btn class="font-weight-bold" color="info" variant="text" @click.stop="close">
           {{ $t('common.action.close') }}
         </v-btn>
       </v-card-actions>
@@ -38,6 +38,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['close'],
+
   setup(props, { emit }) {
     const close = () => {
       emit('close');
diff --git a/apps/admin/src/components/dialogs/options-menu.vue b/apps/admin/src/components/dialogs/options-menu.vue
index 397a5cd260..be25fd79dd 100644
--- a/apps/admin/src/components/dialogs/options-menu.vue
+++ b/apps/admin/src/components/dialogs/options-menu.vue
@@ -1,18 +1,15 @@
 <template>
-  <v-menu v-model="menu" close-on-click left offset-y>
-    <template #activator="{ attrs, on }">
-      <slot name="activator" v-bind="{ attrs, on }">
+  <v-menu v-model="menu" location="left" :persistent="false">
+    <template #activator="{ props }">
+      <slot name="activator" v-bind="{ props }">
         <v-btn
-          v-bind="attrs"
-          class="ml-3"
+          class="ms-2"
           color="primary"
-          fab
-          small
+          icon="$options"
+          size="small"
           :title="$t('common.options._')"
-          v-on="on"
-        >
-          <v-icon>$options</v-icon>
-        </v-btn>
+          v-bind="props"
+        />
       </slot>
     </template>
     <v-list>
diff --git a/apps/admin/src/components/dialogs/select-resource.vue b/apps/admin/src/components/dialogs/select-resource.vue
index e2575f3b5c..ddc090cecc 100644
--- a/apps/admin/src/components/dialogs/select-resource.vue
+++ b/apps/admin/src/components/dialogs/select-resource.vue
@@ -1,30 +1,27 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <slot name="activator" v-bind="{ on, attrs }">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <slot name="activator" v-bind="{ props }">
         <v-text-field
-          v-bind="attrs"
           :class="activatorClass"
           :clearable="clearable"
           :disabled="disabled"
           :error-messages="errorMessages"
           hide-details="auto"
           :label="label"
+          :model-value="selectedItemName"
           :name="name"
-          outlined
           :prepend-inner-icon="itemIcon"
           readonly
-          :value="selectedItemName"
-          v-on="on"
+          variant="outlined"
+          v-bind="props"
           @click:clear="clearInput"
         />
       </slot>
     </template>
-    <v-card :loading="loading" :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :loading="loading" :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           <slot name="title">
             {{ $t(`${resource}.title`) }}
@@ -39,58 +36,45 @@
           hide-details="auto"
           :label="$t('common.search._')"
           :loading="loading"
-          outlined
           prepend-inner-icon="$search"
+          variant="outlined"
           @click:clear="clear"
         />
         <template v-if="items.length">
-          <v-list dense min-height="350px">
-            <v-list-item-group v-model="selectedItemId">
-              <template v-for="(item, idx) in items">
-                <v-list-item :key="item[itemId]" :value="item[itemId]">
-                  <template #default="{ active }">
-                    <v-list-item-action class="mr-2">
-                      <v-checkbox :input-value="active" />
-                    </v-list-item-action>
-                    <v-list-item-avatar>
-                      <v-icon>{{ itemIcon }}</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                      <slot name="item" v-bind="{ item }">
-                        <v-list-item-title>{{ item[itemName] }}</v-list-item-title>
-                      </slot>
-                    </v-list-item-content>
-                  </template>
-                </v-list-item>
-                <v-divider v-if="idx + 1 < items.length" :key="`div-${item[itemId]}`" />
+          <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>
-            </v-list-item-group>
+              <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" circle :length="lastPage" />
+            <v-pagination v-model="page" :length="lastPage" rounded />
           </div>
         </template>
-        <v-alert v-else color="secondary" text type="info">
+        <v-alert v-else color="secondary" type="info">
           {{ $t('common.search.none') }}
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn class="font-weight-bold" color="error" text @click.stop="close">
-          <v-icon left>
-            $cancel
-          </v-icon>{{ $t('common.action.cancel') }}
+        <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="close">
+          <v-icon icon="$cancel" start /> {{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
         <v-btn
           class="font-weight-bold"
           color="info"
           :disabled="!selectedItemId"
-          text
+          variant="text"
           @click.stop="confirm"
         >
-          <v-icon left>
-            $success
-          </v-icon>{{ $t('common.action.ok') }}
+          <v-icon icon="$success" start /> {{ $t('common.action.ok') }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -148,17 +132,17 @@ export default defineComponent({
       type: [Boolean, String],
       default: false,
     },
-    value: {
+    modelValue: {
       type: [Object, String] as PropType<Dictionary | string | null>,
     },
   },
 
-  emits: ['clear', 'input'],
+  emits: ['clear', 'update:modelValue'],
 
   setup(props) {
     const { resource } = toRefs(props);
-    const selectedItemId = ref<string | null>(
-      props.initialItem ? props.initialItem[props.itemId] : null,
+    const selectedItemId = ref<string[]>(
+      props.initialItem ? [props.initialItem[props.itemId]] : [],
     );
 
     const { dialog, loading, page, lastPage, search, items, clear } = useFetchList<Dictionary>(
@@ -169,12 +153,12 @@ export default defineComponent({
       items.value.push(props.initialItem);
 
     watch(
-      () => props.value,
+      () => props.modelValue,
       (val) => {
         if (val === selectedItemId.value)
           return;
 
-        selectedItemId.value = null;
+        selectedItemId.value = [];
       },
     );
 
@@ -196,10 +180,10 @@ export default defineComponent({
     },
     selectedItem(): Dictionary | null {
       const { selectedItemId } = this;
-      if (!selectedItemId)
+      if (!selectedItemId.length)
         return null;
 
-      return this.items.find(item => item[this.itemId] === selectedItemId) ?? null;
+      return this.items.find(item => item[this.itemId] === selectedItemId[0]) ?? null;
     },
     selectedItemName() {
       if (this.selectedItem)
@@ -208,7 +192,7 @@ export default defineComponent({
       if (this.initialItem)
         return this.initialItem[this.itemName];
 
-      return this.value;
+      return this.modelValue;
     },
   },
 
@@ -219,22 +203,22 @@ export default defineComponent({
 
     input() {
       if (!this.selectedItem) {
-        this.$emit('input', null);
+        this.$emit('update:modelValue', null);
         return;
       }
 
-      let returnValue: Dictionary | string | null = this.selectedItemId;
+      let returnValue: Dictionary | string | null = this.selectedItemId[0];
       const { returnObject } = this;
 
       if (typeof returnObject === 'boolean')
-        returnValue = returnObject ? copy(this.selectedItem) : this.selectedItemId;
+        returnValue = returnObject ? copy(this.selectedItem) : this.selectedItemId[0];
       else returnValue = this.selectedItem[returnObject];
 
-      this.$emit('input', returnValue);
+      this.$emit('update:modelValue', returnValue);
     },
 
     clearInput() {
-      this.selectedItemId = null;
+      this.selectedItemId = [];
       this.input();
       this.$emit('clear');
     },
diff --git a/apps/admin/src/components/editors/html-editor.vue b/apps/admin/src/components/editors/html-editor.vue
index c479cec718..426c638926 100644
--- a/apps/admin/src/components/editors/html-editor.vue
+++ b/apps/admin/src/components/editors/html-editor.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <editor v-bind="{ init, value }" @input="$emit('input', $event)" />
+    <editor v-bind="{ init, modelValue }" @update:model-value="$emit('update:modelValue', $event)" />
     <v-messages v-show="hasErrors" class="mt-3 mx-2" color="error" :value="errors" />
   </div>
 </template>
@@ -26,7 +26,8 @@ import 'tinymce/skins/ui/oxide/content.js';
 
 import type { PropType } from 'vue';
 import Editor from '@tinymce/tinymce-vue';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
+import { useLocale } from 'vuetify';
 
 export default defineComponent({
   name: 'HtmlEditor',
@@ -41,56 +42,54 @@ export default defineComponent({
       type: [String, Array],
       default: () => [],
     },
-    value: {
+    modelValue: {
       type: String as PropType<string | null>,
       default: '',
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
-  data() {
-    return {
-      tinymceDefaults: {
-        license_key: 'gpl',
-        skin_url: 'default',
-        content_css: 'default',
-        directionality: this.$vuetify.rtl ? 'rtl' : 'ltr',
-        default_link_target: '_blank',
-        height: 400,
-        menubar: false,
-        paste_as_text: true,
-        plugins: [
-          'advlist',
-          'autolink',
-          'code',
-          'fullscreen',
-          'image',
-          'link',
-          'lists',
-          'media',
-          'preview',
-          'table',
-        ],
-        toolbar:
+  setup(props) {
+    const vLocale = useLocale();
+
+    const tinymceDefaults = {
+      license_key: 'gpl',
+      skin_url: 'default',
+      content_css: 'default',
+      directionality: vLocale.isRtl.value ? 'rtl' : 'ltr',
+      default_link_target: '_blank',
+      height: 400,
+      menubar: false,
+      paste_as_text: true,
+      plugins: [
+        'advlist',
+        'autolink',
+        'code',
+        'fullscreen',
+        'image',
+        'link',
+        'lists',
+        'media',
+        'preview',
+        'table',
+      ],
+      toolbar:
           'undo redo | formatselect | bold italic strikethrough | forecolor backcolor | hr | link image media | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | preview fullscreen code',
-      },
     };
-  },
 
-  computed: {
-    errors() {
-      return typeof this.errorMessages === 'string' ? [this.errorMessages] : this.errorMessages;
-    },
-    hasErrors(): boolean {
-      return !!this.errors.length;
-    },
-    init() {
-      return {
-        ...this.tinymceDefaults,
-        ...(this.initProps ?? {}),
-      };
-    },
+    const errors = computed(() => {
+      return typeof props.errorMessages === 'string' ? [props.errorMessages] : props.errorMessages;
+    });
+
+    const hasErrors = computed(() => !!errors.value.length);
+
+    const init = computed(() => ({
+      ...tinymceDefaults,
+      ...(props.initProps ?? {}),
+    }));
+
+    return { errors, hasErrors, init, tinymceDefaults };
   },
 });
 </script>
diff --git a/apps/admin/src/components/editors/json-editor-dialog.vue b/apps/admin/src/components/editors/json-editor-dialog.vue
index 2d381f5c7e..f89fa9ba57 100644
--- a/apps/admin/src/components/editors/json-editor-dialog.vue
+++ b/apps/admin/src/components/editors/json-editor-dialog.vue
@@ -2,17 +2,17 @@
   <v-dialog
     v-model="dialog"
     fullscreen
-    hide-overlay
     persistent
+    :scrim="false"
     transition="dialog-bottom-transition"
   >
-    <template #activator="{ attrs, on }">
-      <slot name="activator" v-bind="{ attrs, on }">
-        <v-list-item v-bind="attrs" link v-on="on">
+    <template #activator="{ props }">
+      <slot name="activator" v-bind="{ props }">
+        <v-list-item link v-bind="props">
+          <template #prepend>
+            <v-icon icon="fas fa-code" />
+          </template>
           <v-list-item-title>
-            <v-icon left>
-              fas fa-code
-            </v-icon>
             {{ $t('common.json._') }}
           </v-list-item-title>
         </v-list-item>
@@ -20,18 +20,14 @@
     </template>
     <v-card tile>
       <v-toolbar color="secondary" dark>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t('common.json.title') }}
         </v-toolbar-title>
         <v-spacer />
         <v-toolbar-items>
-          <v-btn dark text :title="$t('common.action.ok')" @click.stop="confirm">
-            <v-icon left>
-              $success
-            </v-icon>{{ $t('common.action.ok') }}
+          <v-btn :title="$t('common.action.ok')" variant="text" @click.stop="confirm">
+            <v-icon icon="$success" start />{{ $t('common.action.ok') }}
           </v-btn>
         </v-toolbar-items>
       </v-toolbar>
@@ -43,32 +39,32 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
+import { defineAsyncComponent, defineComponent, ref, watch } from 'vue';
 
 export default defineComponent({
   name: 'JsonEditorDialog',
 
   components: {
-    JsonEditorVue: () => import('json-editor-vue'),
+    JsonEditorVue: defineAsyncComponent(() => import('json-editor-vue')),
   },
 
   props: {
-    value: {
+    modelValue: {
       type: [Array, Object],
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props, { emit }) {
     const dialog = ref(false);
-    const content = ref(props.value);
+    const content = ref(props.modelValue);
 
     watch(dialog, (val) => {
       if (!val)
         return;
 
-      content.value = props.value;
+      content.value = props.modelValue;
     });
 
     const close = () => {
@@ -76,7 +72,7 @@ export default defineComponent({
     };
 
     const confirm = () => {
-      emit('input', content.value);
+      emit('update:modelValue', content.value);
       close();
     };
 
diff --git a/apps/admin/src/components/editors/json-editor.vue b/apps/admin/src/components/editors/json-editor.vue
index c2508f30e1..eb14ba183b 100644
--- a/apps/admin/src/components/editors/json-editor.vue
+++ b/apps/admin/src/components/editors/json-editor.vue
@@ -1,15 +1,15 @@
 <template>
-  <json-editor-vue v-bind="{ readOnly, stringified: false, value }" @input="input" />
+  <json-editor-vue v-bind="{ readOnly, stringified: false, modelValue }" @update:model-value="input" />
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'JsonEditor',
 
   components: {
-    JsonEditorVue: () => import('json-editor-vue'),
+    JsonEditorVue: defineAsyncComponent(() => import('json-editor-vue')),
   },
 
   props: {
@@ -17,16 +17,16 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    value: {
+    modelValue: {
       type: [Array, Object],
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props, { emit }) {
     const input = (value: string | object) => {
-      emit('input', value);
+      emit('update:modelValue', value);
     };
 
     return { input };
diff --git a/apps/admin/src/components/entry/confirm-leave-dialog.vue b/apps/admin/src/components/entry/confirm-leave-dialog.vue
index 1eebe04961..137c9615c8 100644
--- a/apps/admin/src/components/entry/confirm-leave-dialog.vue
+++ b/apps/admin/src/components/entry/confirm-leave-dialog.vue
@@ -1,21 +1,20 @@
 <template>
-  <v-dialog max-width="350px" :value="value.dialog" @input="handleLeave">
+  <v-dialog max-width="350px" :model-value="modelValue.dialog" @update:model-value="handleLeave">
     <v-card>
       <v-card-title class="h2 justify-center">
         {{ $t('common.action.confirm.title') }}
       </v-card-title>
       <v-card-text class="px-6 py-4 d-flex justify-center">
-        <div class="subtitle-1">
+        <div class="text-subtitle-1">
           {{ $t('common.action.confirm.msg') }}
         </div>
       </v-card-text>
-      <v-container class="pa-6">
+      <v-card-text>
         <v-btn
           block
-          class="mb-2"
+          class="mb-4"
           color="warning"
-          dark
-          large
+          size="large"
           :title="$t('common.action.continue')"
           @click.stop="confirmLeave"
         >
@@ -24,14 +23,14 @@
         <v-btn
           block
           color="warning"
-          large
-          outlined
+          size="large"
           :title="$t('common.action.cancel')"
+          variant="outlined"
           @click.stop="cancelLeave"
         >
           {{ $t('common.action.cancel') }}
         </v-btn>
-      </v-container>
+      </v-card-text>
     </v-card>
   </v-dialog>
 </template>
@@ -46,13 +45,13 @@ export default defineComponent({
   name: 'ConfirmLeaveDialog',
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<RouteLeave>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   methods: {
     handleLeave(value: boolean) {
@@ -63,16 +62,16 @@ export default defineComponent({
     },
 
     cancelLeave() {
-      this.$emit('input', { dialog: false, to: null, confirmed: false });
+      this.$emit('update:modelValue', { dialog: false, to: null, confirmed: false });
     },
 
     async confirmLeave() {
-      const { dialog, to } = this.value;
+      const { dialog, to } = this.modelValue;
 
       if (!to)
         return;
 
-      this.$emit('input', { dialog, to, confirmed: true });
+      this.$emit('update:modelValue', { dialog, to, confirmed: true });
       // TODO: vue-router RawLocation and Route types are incompatible (RawLocation:name cannot be null)
       await this.$router.push({ ...to, name: to.name ?? undefined });
     },
diff --git a/apps/admin/src/components/entry/layout.vue b/apps/admin/src/components/entry/layout.vue
index a6d86527f9..5c2cc8dacd 100644
--- a/apps/admin/src/components/entry/layout.vue
+++ b/apps/admin/src/components/entry/layout.vue
@@ -1,143 +1,147 @@
 <template>
-  <div>
-    <v-card class="mb-4" outlined>
-      <v-toolbar flat>
-        <v-btn color="white" :title="$t(`common.action.back`)" :to="{ name: resource.name }">
-          <v-icon left>
-            $back
-          </v-icon>{{ $t(`common.action.back`) }}
-        </v-btn>
-        <v-btn
-          v-if="editsResource"
-          class="ml-3"
-          color="secondary"
-          :title="$t(`common.action.save`)"
-          @click="$emit('save')"
-        >
-          <v-icon left>
-            $save
-          </v-icon>{{ $t(`common.action.save`) }}
-        </v-btn>
-        <slot name="actions" />
-        <v-spacer />
-        <confirm-dialog
-          v-if="canHandleEntry('delete')"
-          color="error"
-          icon-left="$delete"
-          :label="$t('common.action.delete').toString()"
-          :typed-confirm="['surveys'].includes(resource.name) ? entry.name : undefined"
-          @confirm="remove"
-        >
-          {{ $t('common.action.confirm.delete', { name: entry.name ? entry.name : entry.id }) }}
-        </confirm-dialog>
-      </v-toolbar>
-    </v-card>
-    <v-card :flat="isMobile" :outlined="!isMobile" :tile="isMobile">
-      <v-tabs background-color="primary" dark>
-        <v-tab
-          v-for="tab in tabs"
-          :key="tab"
-          :title="tabTitle(tab)"
-          :to="{ name: `${resource.name}-${tab}`, params: { id } }"
-        >
-          {{ tabTitle(tab) }}
-        </v-tab>
-      </v-tabs>
-      <slot />
-    </v-card>
-    <slot name="addons" />
-    <confirm-leave-dialog
-      :value="routeLeave"
-      @input="$emit('update:routeLeave', $event)"
-    />
-  </div>
+  <v-card
+    class="mb-5 px-2"
+    :flat="$vuetify.display.mobile"
+    :rounded="$vuetify.display.mobile ? 0 : undefined"
+  >
+    <v-toolbar color="white">
+      <v-btn color="grey-darken-1" :title="$t(`common.action.back`)" :to="{ name: resource.name }" variant="flat">
+        <v-icon icon="$back" start />{{ $t(`common.action.back`) }}
+      </v-btn>
+      <v-btn
+        v-if="editsResource"
+        class="ml-3"
+        color="secondary"
+        :title="$t(`common.action.save`)"
+        variant="flat"
+        @click="$emit('save')"
+      >
+        <v-icon icon="$save" start />{{ $t(`common.action.save`) }}
+      </v-btn>
+      <slot name="actions" />
+      <v-spacer />
+      <confirm-dialog
+        v-if="canHandleEntry('delete')"
+        color="error"
+        icon-left="$delete"
+        :label="$t('common.action.delete')"
+        :typed-confirm="['surveys'].includes(resource.name) ? entry.name : undefined"
+        variant="flat"
+        @confirm="remove"
+      >
+        {{ $t('common.action.confirm.delete', { name: entry.name ? entry.name : entry.id }) }}
+      </confirm-dialog>
+    </v-toolbar>
+  </v-card>
+  <v-card :border="!$vuetify.display.mobile" :flat="$vuetify.display.mobile" :tile="$vuetify.display.mobile">
+    <v-tabs bg-color="primary">
+      <v-tab
+        v-for="tab in tabs"
+        :key="tab"
+        :title="tabTitle(tab)"
+        :to="{ name: `${resource.name}-${tab}`, params: tab === 'create' ? undefined : { id } }"
+        :value="tab"
+      >
+        {{ tabTitle(tab) }}
+      </v-tab>
+    </v-tabs>
+    <slot />
+  </v-card>
+  <slot name="addons" />
+  <confirm-leave-dialog
+    :model-value="routeLeave"
+    @update:model-value="$emit('update:routeLeave', $event)"
+  />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
 import has from 'lodash/has';
-import { defineComponent } from 'vue';
+import { computed, inject } from 'vue';
+import { useRouter } from 'vue-router';
 
 import type { RouteLeave } from '@intake24/admin/types';
 import type { Dictionary } from '@intake24/common/types';
-import { resource } from '@intake24/admin/mixins';
-import { useMessages } from '@intake24/admin/stores';
+import resources from '@intake24/admin/router/resources';
+import { useHttp } from '@intake24/admin/services';
+import { useMessages, useResource, useUser } from '@intake24/admin/stores';
+import { useI18n } from '@intake24/i18n';
 import { ConfirmDialog } from '@intake24/ui';
 
 import ConfirmLeaveDialog from './confirm-leave-dialog.vue';
 
-export default defineComponent({
-  name: 'EntryLayout',
+defineOptions({ name: 'EntryLayout' });
 
-  components: { ConfirmDialog, ConfirmLeaveDialog },
-
-  mixins: [resource],
-
-  inject: {
-    editsResource: { default: false },
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
   },
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    entry: {
-      type: Object as PropType<Dictionary>,
-      required: true,
-    },
-    routeLeave: {
-      type: Object as PropType<RouteLeave>,
-      default: () => ({
-        dialog: false,
-        to: null,
-        confirmed: false,
-      }),
-    },
+  entry: {
+    type: Object as PropType<Dictionary>,
+    required: true,
   },
-
-  emits: ['save', 'update:routeLeave'],
-
-  computed: {
-    isCreate(): boolean {
-      return this.id === 'create';
-    },
-    tabs(): string[] {
-      if (this.isCreate)
-        return ['create'];
-
-      const { securables, ownerId } = this.entry;
-      const { name, module } = this.resource;
-
-      return this.resource.routes.filter(
-        item =>
-          item !== 'create'
-          && this.can({ resource: module ?? name, action: item, securables, ownerId }),
-      );
-    },
+  routeLeave: {
+    type: Object as PropType<RouteLeave>,
+    default: () => ({
+      dialog: false,
+      to: null,
+      confirmed: false,
+    }),
   },
+});
 
-  methods: {
-    canHandleEntry(action: string) {
-      if (this.isCreate)
-        return false;
+defineEmits(['save', 'update:routeLeave']);
 
-      const { securables, ownerId } = this.entry;
-      return this.can({ action, securables, ownerId });
-    },
+const editsResource = inject('editsResource', false);
 
-    tabTitle(tab: string) {
-      const check = has(this.$i18n.messages[this.$i18n.locale], `${this.module}.${tab}.tab`);
-      return this.$t(check ? `${this.module}.${tab}.tab` : `common.action.${tab}`);
-    },
+const { i18n: { t, locale, messages } } = useI18n();
+const resource = useResource();
+const { can } = useUser();
+const http = useHttp();
+const router = useRouter();
 
-    async remove(): Promise<void> {
-      const { id, name } = this.entry;
+const resourceDef = computed(
+  () => resources.find(item => item.name === resource.name),
+);
 
-      await this.$http.delete(`${this.resource.api}/${this.id}`);
-      useMessages().success(this.$t('common.msg.deleted', { name: name ?? id }).toString());
-      await this.$router.push({ name: this.resource.name });
-    },
-  },
+const isCreate = computed(() => props.id === 'create');
+const tabs = computed(() => {
+  if (isCreate.value)
+    return ['create'];
+
+  if (!resourceDef.value)
+    return [];
+
+  const { securables, ownerId } = props.entry;
+  const { name, module, routes } = resourceDef.value;
+
+  return routes.filter(
+    item =>
+      item !== 'create'
+      && can({ resource: module ?? name, action: item, securables, ownerId }),
+  );
 });
+
+function canHandleEntry(action: string) {
+  if (isCreate.value)
+    return false;
+
+  const { securables, ownerId } = props.entry;
+  return can({ action, securables, ownerId });
+};
+
+function tabTitle(tab: string) {
+  // @ts-expect-error - i18n messages
+  const check = has(messages.value[locale.value], `${resource.name}.${tab}.tab`);
+  return t(check ? `${resource.name}.${tab}.tab` : `common.action.${tab}`);
+};
+
+async function remove() {
+  const { id, name } = props.entry;
+
+  await http.delete(`${resource.api}/${props.id}`);
+  useMessages().success(t('common.msg.deleted', { name: name ?? id }));
+  await router.push({ name: resource.name });
+};
 </script>
diff --git a/apps/admin/src/components/fdbs/add-food-dialog.vue b/apps/admin/src/components/fdbs/add-food-dialog.vue
index 2f88fb13f8..15d0e5e3c2 100644
--- a/apps/admin/src/components/fdbs/add-food-dialog.vue
+++ b/apps/admin/src/components/fdbs/add-food-dialog.vue
@@ -1,22 +1,18 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-btn v-bind="attrs" color="primary" rounded :title="$t('fdbs.foods.add')" v-on="on">
-        <v-icon left>
-          $add
-        </v-icon> {{ $t('fdbs.foods.add') }}
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-btn color="primary" rounded :title="$t('fdbs.foods.add')" v-bind="props">
+        <v-icon icon="$add" start /> {{ $t('fdbs.foods.add') }}
       </v-btn>
     </template>
-    <v-card :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t('fdbs.foods.add') }}
         </v-toolbar-title>
       </v-toolbar>
-      <v-form @keydown.native="clearError" @submit.prevent="confirm">
+      <v-form @keydown="clearError" @submit.prevent="confirm">
         <v-card-text class="pa-6">
           <v-row>
             <v-col cols="12">
@@ -26,7 +22,7 @@
                 hide-details="auto"
                 :label="$t('fdbs.foods.global.code')"
                 name="code"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
@@ -36,7 +32,7 @@
                 hide-details="auto"
                 :label="$t('fdbs.foods.global.name')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
@@ -46,7 +42,7 @@
                 :label="$t('fdbs.foods.global.foodGroup')"
                 name="foodGroupId"
                 resource="food-groups"
-                @input="form.errors.clear('foodGroupId')"
+                @update:model-value="form.errors.clear('foodGroupId')"
               />
             </v-col>
             <v-col cols="12">
@@ -62,22 +58,18 @@
         </v-card-text>
       </v-form>
       <v-card-actions>
-        <v-btn class="font-weight-bold" color="error" text @click.stop="close">
-          <v-icon left>
-            $cancel
-          </v-icon>{{ $t('common.action.cancel') }}
+        <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="close">
+          <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
         <v-btn
           class="font-weight-bold"
           color="info"
           :disabled="form.errors.any()"
-          text
+          variant="text"
           @click.stop="confirm"
         >
-          <v-icon left>
-            $success
-          </v-icon>{{ $t('common.action.ok') }}
+          <v-icon icon="$success" start />{{ $t('common.action.ok') }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -86,7 +78,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router';
 
 import type { FoodInput, FoodLocalEntry } from '@intake24/common/types/http/admin';
 import { SelectResource } from '@intake24/admin/components/dialogs';
@@ -132,7 +124,7 @@ export default defineComponent({
       const { id, name, main: { name: englishName = 'record' } = {} } = data;
 
       close();
-      useMessages().success(i18n.t('common.msg.created', { name: name ?? englishName }).toString());
+      useMessages().success(i18n.t('common.msg.created', { name: name ?? englishName }));
       await router.push({ name: `fdbs-foods`, params: { id: localeId, entryId: id } });
     };
 
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 210a0bbd1b..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
@@ -1,6 +1,6 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('fdbs.associatedFoods.title') }}
       </v-toolbar-title>
@@ -8,81 +8,69 @@
       <v-btn
         v-if="!disabled"
         color="primary"
-        fab
-        small
+        icon="$add"
+        size="small"
         :title="$t('fdbs.associatedFoods.add')"
         @click.stop="add"
-      >
-        <v-icon small>
-          $add
-        </v-icon>
-      </v-btn>
+      />
     </v-toolbar>
-    <v-list class="py-0" two-line>
-      <draggable v-model="items" handle=".drag-and-drop__handle" @end="update">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(item, index) in items"
-            :key="item._id"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ translate(item.genericName) }}</v-list-item-title>
-              <v-list-item-subtitle>{{ translate(item.text) }} </v-list-item-subtitle>
-              <v-messages
-                v-if="errors.has('associatedFoods', index)"
-                color="error"
-                :value="errors.get('associatedFoods', index)"
-              />
-            </v-list-item-content>
+    <v-list class="list-border py-0" lines="two">
+      <vue-draggable
+        v-model="items"
+        :animation="300"
+        handle=".drag-and-drop__handle"
+        @end="update"
+      >
+        <v-list-item
+          v-for="(item, index) in items"
+          :key="item._id"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+          </template>
+          <v-list-item-title>{{ translate(item.genericName) }}</v-list-item-title>
+          <v-list-item-subtitle>{{ translate(item.text) }} </v-list-item-subtitle>
+          <v-messages
+            v-if="errors.has('associatedFoods', index)"
+            color="error"
+            :value="errors.get('associatedFoods', index)"
+          />
+          <template #append>
             <v-list-item-action v-if="!disabled">
-              <v-btn icon :title="$t('fdbs.associatedFoods.edit')" @click.stop="edit(index, item)">
-                <v-icon color="secondary lighten-1">
-                  $edit
-                </v-icon>
-              </v-btn>
+              <v-btn icon="$edit" :title="$t('fdbs.associatedFoods.edit')" @click.stop="edit(index, item)" />
             </v-list-item-action>
             <v-list-item-action v-if="!disabled">
               <confirm-dialog
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('fdbs.associatedFoods.remove').toString()"
+                :label="$t('fdbs.associatedFoods.remove')"
                 @confirm="remove(index)"
               >
                 {{ $t('common.action.confirm.remove', { name: item.genericName }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <v-dialog
       v-model="dialog.show"
       fullscreen
-      hide-overlay
       persistent
+      :scrim="false"
       transition="dialog-bottom-transition"
     >
       <v-card tile>
         <v-toolbar color="secondary" dark>
-          <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-            <v-icon>$cancel</v-icon>
-          </v-btn>
+          <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
           <v-toolbar-title>
             {{ $t(`fdbs.associatedFoods.${dialog.index === -1 ? 'add' : 'edit'}`) }}
           </v-toolbar-title>
           <v-spacer />
           <v-toolbar-items>
-            <v-btn dark text :title="$t('common.action.ok')" @click.stop="save">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn :title="$t('common.action.ok')" variant="text" @click.stop="save">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-toolbar-items>
         </v-toolbar>
@@ -114,7 +102,7 @@
                   :label="$t('fdbs.categories._')"
                   name="associatedCategoryCode"
                   resource="categories"
-                  @input="clearFood"
+                  @update:model-value="clearFood"
                 >
                   <template #title>
                     {{ $t(`fdbs.categories.title`) }}
@@ -131,7 +119,7 @@
                   :label="$t('fdbs.foods._')"
                   name="associatedFoodCode"
                   resource="foods"
-                  @input="clearCategory"
+                  @update:model-value="clearCategory"
                 >
                   <template #title>
                     {{ $t(`fdbs.foods.title`) }}
@@ -147,17 +135,16 @@
               <v-col cols="12">
                 <language-selector
                   v-model="dialog.item.genericName"
-                  :label="$t('fdbs.associatedFoods.genericName').toString()"
+                  :label="$t('fdbs.associatedFoods.genericName')"
                   required
                 >
-                  <template v-for="lang in Object.keys(dialog.item.genericName)" #[`lang.${lang}`]>
+                  <template v-for="lang in Object.keys(dialog.item.genericName)" :key="lang" #[`lang.${lang}`]>
                     <v-text-field
-                      :key="lang"
                       v-model="dialog.item.genericName[lang]"
                       hide-details="auto"
                       :label="$t('fdbs.associatedFoods.genericName')"
                       :name="`genericName.${lang}`"
-                      outlined
+                      variant="outlined"
                     />
                   </template>
                 </language-selector>
@@ -165,33 +152,28 @@
               <v-col cols="12">
                 <language-selector
                   v-model="dialog.item.text"
-                  :label="$t('fdbs.associatedFoods.text').toString()"
+                  :label="$t('fdbs.associatedFoods.text')"
                   required
                 >
-                  <template v-for="lang in Object.keys(dialog.item.text)" #[`lang.${lang}`]>
+                  <template v-for="lang in Object.keys(dialog.item.text)" :key="lang" #[`lang.${lang}`]>
                     <v-text-field
-                      :key="lang"
                       v-model="dialog.item.text[lang]"
                       hide-details="auto"
                       :label="$t('fdbs.associatedFoods.text')"
                       :name="`text.${lang}`"
-                      outlined
+                      variant="outlined"
                     />
                   </template>
                 </language-selector>
               </v-col>
             </v-row>
             <v-card-actions>
-              <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-                <v-icon left>
-                  $cancel
-                </v-icon>{{ $t('common.action.cancel') }}
+              <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+                <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
               </v-btn>
               <v-spacer />
-              <v-btn class="font-weight-bold" color="info" text type="submit">
-                <v-icon left>
-                  $success
-                </v-icon>{{ $t('common.action.ok') }}
+              <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+                <v-icon icon="$success" start />{{ $t('common.action.ok') }}
               </v-btn>
             </v-card-actions>
           </v-container>
@@ -204,7 +186,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { Errors } from '@intake24/common/util';
 import { SelectResource } from '@intake24/admin/components/dialogs';
@@ -221,7 +203,7 @@ import { createDefaultAssociatedFood } from './associated-foods';
 export default defineComponent({
   name: 'AssociatedFoodList',
 
-  components: { ConfirmDialog, Draggable: draggable, LanguageSelector, SelectResource },
+  components: { ConfirmDialog, LanguageSelector, SelectResource, VueDraggable },
 
   props: {
     disabled: {
@@ -240,7 +222,7 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Array as PropType<AssociatedFoodItem[]>,
       required: true,
     },
diff --git a/apps/admin/src/components/fdbs/attribute-list.vue b/apps/admin/src/components/fdbs/attribute-list.vue
index 7771e6e518..8d6ce24085 100644
--- a/apps/admin/src/components/fdbs/attribute-list.vue
+++ b/apps/admin/src/components/fdbs/attribute-list.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('fdbs.attributes.title') }}
       </v-toolbar-title>
@@ -8,7 +8,7 @@
     <v-card-text>
       <v-row>
         <v-col cols="auto">
-          <v-btn :disabled="disabled" outlined @click="toggleInherit('sameAsBeforeOption')">
+          <v-btn :disabled="disabled" variant="outlined" @click="toggleInherit('sameAsBeforeOption')">
             {{ title('sameAsBeforeOption') }}
           </v-btn>
         </v-col>
@@ -21,13 +21,13 @@
             hide-details="auto"
             :label="$t('fdbs.attributes.sameAsBeforeOption')"
             name="attributes.sameAsBeforeOption"
-            @change="errors.clear('main.attributes.sameAsBeforeOption')"
+            @update:model-value="errors.clear('main.attributes.sameAsBeforeOption')"
           />
         </v-col>
       </v-row>
       <v-row>
         <v-col align-self="center" cols="auto">
-          <v-btn :disabled="disabled" outlined @click="toggleInherit('readyMealOption')">
+          <v-btn :disabled="disabled" variant="outlined" @click="toggleInherit('readyMealOption')">
             {{ title('readyMealOption') }}
           </v-btn>
         </v-col>
@@ -40,48 +40,48 @@
             hide-details="auto"
             :label="$t('fdbs.attributes.readyMealOption')"
             name="attributes.readyMealOption"
-            @change="errors.clear('main.attributes.readyMealOption')"
+            @update:model-value="errors.clear('main.attributes.readyMealOption')"
           />
         </v-col>
       </v-row>
       <v-row>
         <v-col align-self="center" cols="auto">
-          <v-btn :disabled="disabled" outlined @click="toggleInherit('reasonableAmount')">
+          <v-btn :disabled="disabled" variant="outlined" @click="toggleInherit('reasonableAmount')">
             {{ title('reasonableAmount') }}
           </v-btn>
         </v-col>
         <v-col align-self="center">
           <v-text-field
             v-model.number="attributes.reasonableAmount"
-            dense
+            density="compact"
             :disabled="disabled || isInherited('reasonableAmount')"
             :error-messages="errors.get('main.attributes.reasonableAmount')"
             hide-details="auto"
             :label="$t('fdbs.attributes.reasonableAmount')"
             name="attributes.reasonableAmount"
-            outlined
-            @input="errors.clear('main.attributes.reasonableAmount')"
+            variant="outlined"
+            @update:model-value="errors.clear('main.attributes.reasonableAmount')"
           />
         </v-col>
       </v-row>
       <v-row>
         <v-col align-self="center" cols="auto">
-          <v-btn :disabled="disabled" outlined @click="toggleInherit('useInRecipes')">
+          <v-btn :disabled="disabled" variant="outlined" @click="toggleInherit('useInRecipes')">
             {{ title('useInRecipes') }}
           </v-btn>
         </v-col>
         <v-col align-self="center" cols>
           <v-select
             v-model="attributes.useInRecipes"
-            dense
+            density="compact"
             :disabled="disabled || isInherited('useInRecipes')"
             :error-messages="errors.get('main.attributes.useInRecipes')"
             hide-details="auto"
             :items="useInRecipeTypeItems"
             :label="$t('fdbs.attributes.useInRecipes._')"
             name="attributes.useInRecipes"
-            outlined
-            @change="errors.clear('main.attributes.useInRecipes')"
+            variant="outlined"
+            @update:model-value="errors.clear('main.attributes.useInRecipes')"
           />
         </v-col>
       </v-row>
@@ -125,30 +125,30 @@ export default defineComponent({
       type: Object as PropType<Errors>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Object as PropType<Nullable<Attributes>>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props, { emit }) {
     const { i18n } = useI18n();
 
     const attributes = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(val) {
-        emit('input', val);
+        emit('update:modelValue', val);
       },
     });
 
     const useInRecipeTypeItems = computed(() =>
       Object.values(useInRecipeTypes).map(value => ({
         value,
-        text: i18n.t(`fdbs.attributes.useInRecipes.${value}`),
+        title: i18n.t(`fdbs.attributes.useInRecipes.${value}`),
       })),
     );
 
@@ -166,7 +166,7 @@ export default defineComponent({
 
     title(attribute: AttributeType): string {
       const key = this.attributes[attribute] === null ? 'override' : 'inherit';
-      return this.$t(`fdbs.attributes.${key}`).toString();
+      return this.$t(`fdbs.attributes.${key}`);
     },
 
     toggleInherit(attribute: AttributeType) {
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 02bf88c045..bad66676d2 100644
--- a/apps/admin/src/components/fdbs/categories/add-category-dialog.vue
+++ b/apps/admin/src/components/fdbs/categories/add-category-dialog.vue
@@ -1,15 +1,11 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-btn v-bind="attrs" color="primary" fab small :title="$t('fdbs.categories.add')" v-on="on">
-        <v-icon>$add</v-icon>
-      </v-btn>
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-btn color="primary" icon="$add" size="small" :title="$t('fdbs.categories.add')" v-bind="props" />
     </template>
-    <v-card :loading="loading" :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :loading="loading" :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t('fdbs.categories.title') }}
         </v-toolbar-title>
@@ -22,59 +18,46 @@
           hide-details="auto"
           :label="$t('common.search._')"
           :loading="loading"
-          outlined
           prepend-inner-icon="$search"
+          variant="outlined"
           @click:clear="clear"
         />
-        <v-alert v-if="isAlreadyIncluded" text type="error">
+        <v-alert v-if="isAlreadyIncluded" type="error">
           {{ $t('fdbs.categories.alreadyIncluded', { code: selectedItems[0].code }) }}
         </v-alert>
         <template v-if="items.length">
-          <v-list dense min-height="350px">
-            <v-list-item-group v-model="selected" multiple>
-              <template v-for="(item, idx) in items">
-                <v-list-item :key="item.code" :value="item.code">
-                  <template #default="{ active }">
-                    <v-list-item-action>
-                      <v-checkbox :input-value="active" />
-                    </v-list-item-action>
-                    <v-list-item-avatar>
-                      <v-icon>fas fa-list</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                      <v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
-                    </v-list-item-content>
-                  </template>
-                </v-list-item>
-                <v-divider v-if="idx + 1 < items.length" :key="`div-${item.code}`" />
+          <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-group>
+              <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" circle :length="lastPage" />
+            <v-pagination v-model="page" :length="lastPage" rounded />
           </div>
         </template>
-        <v-alert v-else color="secondary" text type="info">
+        <v-alert v-else color="secondary" type="info">
           {{ $t('fdbs.categories.none') }}
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn class="font-weight-bold" color="error" text @click.stop="close">
-          <v-icon left>
-            $cancel
-          </v-icon>{{ $t('common.action.cancel') }}
+        <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="close">
+          <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
         <v-btn
           class="font-weight-bold"
           color="info"
           :disabled="!selected.length || isAlreadyIncluded"
-          text
+          variant="text"
           @click.stop="confirm"
         >
-          <v-icon left>
-            $success
-          </v-icon>{{ $t('common.action.ok') }}
+          <v-icon icon="$success" start />{{ $t('common.action.ok') }}
         </v-btn>
       </v-card-actions>
     </v-card>
diff --git a/apps/admin/src/components/fdbs/categories/category-list.vue b/apps/admin/src/components/fdbs/categories/category-list.vue
index 188066d96d..b82457adff 100644
--- a/apps/admin/src/components/fdbs/categories/category-list.vue
+++ b/apps/admin/src/components/fdbs/categories/category-list.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card v-bind="{ flat, outlined, tile }">
-    <v-toolbar color="grey lighten-4" flat>
+    <v-toolbar color="grey-lighten-4" flat>
       <v-toolbar-title class="font-weight-medium">
         <slot name="title">
           {{ $t('fdbs.categories.title') }}
@@ -14,32 +14,29 @@
         @add="add"
       />
     </v-toolbar>
-    <v-list class="py-0">
-      <template v-for="(item, idx) in items">
-        <v-list-item :key="item.code" link>
-          <v-list-item-avatar>
-            <v-icon>$categories</v-icon>
-          </v-list-item-avatar>
-          <slot name="item.content" v-bind="{ item }">
-            <v-list-item-content>
-              <v-list-item-title>{{ item.code }} | {{ item.name }}</v-list-item-title>
-            </v-list-item-content>
-          </slot>
+    <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').toString()"
+              :label="$t('fdbs.categories.remove')"
               @confirm="remove(item.code)"
             >
               {{ $t('common.action.confirm.remove', { name: item.name }) }}
             </confirm-dialog>
           </v-list-item-action>
-        </v-list-item>
-        <v-divider v-if="idx + 1 < items.length" :key="`div-${item.code}`" />
-      </template>
+        </template>
+      </v-list-item>
     </v-list>
     <v-messages
       v-if="errors.has('main.parentCategories')"
@@ -87,17 +84,16 @@ export default defineComponent({
     tile: {
       type: Boolean,
     },
-    value: {
+    modelValue: {
       type: Array as PropType<CategoryListItem[]>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props, { emit }) {
-    const items = useVModel(props, 'value', emit, {
-      eventName: 'input',
+    const items = useVModel(props, 'modelValue', emit, {
       passive: true,
       deep: true,
     });
diff --git a/apps/admin/src/components/fdbs/copy-entry-dialog.vue b/apps/admin/src/components/fdbs/copy-entry-dialog.vue
index 567b6d7a58..ed6fb15acb 100644
--- a/apps/admin/src/components/fdbs/copy-entry-dialog.vue
+++ b/apps/admin/src/components/fdbs/copy-entry-dialog.vue
@@ -1,29 +1,24 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
       <v-btn
-        v-bind="attrs"
         class="ml-3"
         color="secondary"
-        outlined
         :title="$t(`fdbs.${type}.copy`)"
-        v-on="on"
+        variant="outlined"
+        v-bind="props"
       >
-        <v-icon left>
-          fas fa-copy
-        </v-icon>{{ $t(`fdbs.${type}.copy`) }}
+        <v-icon icon="fas fa-copy" start />{{ $t(`fdbs.${type}.copy`) }}
       </v-btn>
     </template>
-    <v-card :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t(`fdbs.${type}.copy`) }}
         </v-toolbar-title>
       </v-toolbar>
-      <v-form @keydown.native="clearError" @submit.prevent="confirm">
+      <v-form @keydown="clearError" @submit.prevent="confirm">
         <v-card-text class="pa-6">
           <v-row>
             <v-col cols="12">
@@ -33,7 +28,7 @@
                 hide-details="auto"
                 :label="$t(`fdbs.${type}.global.code`)"
                 name="code"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
@@ -43,29 +38,25 @@
                 hide-details="auto"
                 :label="$t(`fdbs.${type}.global.name`)"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
           </v-row>
         </v-card-text>
       </v-form>
       <v-card-actions class="pb-4">
-        <v-btn class="font-weight-bold" color="error" text @click.stop="close">
-          <v-icon left>
-            $cancel
-          </v-icon>{{ $t('common.action.cancel') }}
+        <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="close">
+          <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
         <v-btn
           class="font-weight-bold"
           color="info"
           :disabled="form.errors.any()"
-          text
+          variant="text"
           @click.stop="confirm"
         >
-          <v-icon left>
-            $success
-          </v-icon>{{ $t('common.action.confirm._') }}
+          <v-icon icon="$success" start />{{ $t('common.action.confirm._') }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -74,7 +65,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router';
 
 import type { FoodLocalCopyInput, SurveySchemeEntry } from '@intake24/common/types/http/admin';
 import { useForm } from '@intake24/admin/composables';
@@ -123,7 +114,7 @@ export default defineComponent({
       );
 
       close();
-      useMessages().success(i18n.t('common.msg.created', { name }).toString());
+      useMessages().success(i18n.t('common.msg.created', { name }));
       await router.push({ name: `fdbs-${type}`, params: { id: localeId, entryId: id } });
     };
 
diff --git a/apps/admin/src/components/fdbs/food-explorer.vue b/apps/admin/src/components/fdbs/food-explorer.vue
index e69e9beb28..f6642b65bf 100644
--- a/apps/admin/src/components/fdbs/food-explorer.vue
+++ b/apps/admin/src/components/fdbs/food-explorer.vue
@@ -5,17 +5,17 @@
         <food-search v-bind="{ localeId }" />
         <add-food-dialog v-bind="{ localeId }" />
       </div>
-      <v-menu bottom :close-on-content-click="false" left :nudge-width="200" offset-y>
-        <template #activator="{ on, attrs }">
-          <v-btn color="primary" fab small v-bind="attrs" v-on="on">
-            <v-icon>$options</v-icon>
-          </v-btn>
+      <v-menu :close-on-content-click="false" location="bottom left">
+        <template #activator="{ props }">
+          <v-btn color="primary" icon="$options" size="small" v-bind="props" />
         </template>
         <v-list>
           <v-list-item>
-            <v-list-item-action>
-              <v-switch v-model="showGlobalName" />
-            </v-list-item-action>
+            <template #prepend>
+              <v-list-item-action>
+                <v-switch v-model="showGlobalName" />
+              </v-list-item-action>
+            </template>
             <v-list-item-title>{{ $t('fdbs.showGlobalName') }}</v-list-item-title>
           </v-list-item>
         </v-list>
@@ -23,20 +23,23 @@
     </div>
     <v-divider class="my-3" />
     <v-treeview
+      v-model:opened="opened"
+      v-model:selected="selected"
       activatable
-      :active.sync="active"
       color="primary"
       dense
-      item-key="key"
+      item-title="name"
+      item-value="key"
       :items="items"
       :load-children="fetchCategoryContent"
-      :open.sync="open"
       transition
     >
-      <template #label="{ item }">
-        <v-icon v-if="!item.children" left>
+      <template #prepend="{ item }">
+        <v-icon v-if="item.type === 'foods'" start>
           $foods
         </v-icon>
+      </template>
+      <template #title="{ item }">
         <a @click="openItem(item)">{{ item[itemText] }}</a>
       </template>
     </v-treeview>
@@ -45,7 +48,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue';
-import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router/composables';
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 
 import type {
   CategoryContentsResponse,
@@ -83,8 +86,8 @@ export default defineComponent({
     const http = useHttp();
     const { i18n } = useI18n();
 
-    const active = ref<string[]>([]);
-    const open = ref<string[]>([]);
+    const selected = ref<string[]>([]);
+    const opened = ref<string[]>([]);
     const items = ref<TreeItem[]>([]);
     const showGlobalName = ref<boolean>(false);
     const selectedEntryId = ref<string | null>(null);
@@ -103,8 +106,8 @@ export default defineComponent({
         id: 'no-category',
         code: 'no-category',
         localeId: props.localeId,
-        name: i18n.t('fdbs.categories.noCategory').toString(),
-        englishName: i18n.t('fdbs.categories.noCategory').toString(),
+        name: i18n.t('fdbs.categories.noCategory'),
+        englishName: i18n.t('fdbs.categories.noCategory'),
         isHidden: false,
         children: [],
       };
@@ -137,7 +140,11 @@ export default defineComponent({
           type: 'categories',
           children: [],
         })),
-        ...foods.map(item => ({ ...item, key: randomString(8), type: 'foods' })),
+        ...foods.map(item => ({
+          ...item,
+          key: randomString(8),
+          type: 'foods',
+        })),
       );
     };
 
@@ -160,13 +167,13 @@ export default defineComponent({
 
       for (const child of children) {
         if (selectedEntryId.value === child.id) {
-          active.value = [child.key];
+          selected.value = [child.key];
           return true;
         }
 
         if (selectedEntryCategories.value.includes(child.code)) {
           await fetchCategoryContent(child);
-          open.value.push(child.key);
+          opened.value.push(child.key);
 
           if (!('children' in child) || !child.children.length)
             continue;
@@ -205,12 +212,12 @@ export default defineComponent({
     });
 
     return {
-      active,
       fetchCategoryContent,
       items,
       itemText,
-      open,
+      opened,
       openItem,
+      selected,
       showGlobalName,
       selectedEntryId,
       selectedEntryCategories,
diff --git a/apps/admin/src/components/fdbs/food-search.vue b/apps/admin/src/components/fdbs/food-search.vue
index 1b87248637..2097385f6a 100644
--- a/apps/admin/src/components/fdbs/food-search.vue
+++ b/apps/admin/src/components/fdbs/food-search.vue
@@ -1,17 +1,13 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="1000px">
-    <template #activator="{ attrs, on }">
-      <v-btn v-bind="attrs" color="primary" rounded :title="$t('fdbs.search._')" v-on="on">
-        <v-icon left>
-          $search
-        </v-icon> {{ $t('fdbs.search._') }}
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="1000px">
+    <template #activator="{ props: dProps }">
+      <v-btn color="primary" rounded :title="$t('fdbs.search._')" v-bind="dProps">
+        <v-icon icon="$search" start /> {{ $t('fdbs.search._') }}
       </v-btn>
     </template>
-    <v-card :loading="loading" :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :loading="loading" :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t('fdbs.search.title') }}
         </v-toolbar-title>
@@ -25,8 +21,8 @@
           hide-details="auto"
           :label="$t('common.search._')"
           :loading="loading"
-          outlined
           prepend-inner-icon="$search"
+          variant="outlined"
           @click:clear="clear"
         />
         <v-data-table
@@ -47,9 +43,9 @@
 
 <script lang="ts" setup>
 import { watchDebounced } from '@vueuse/core';
-import { defineComponent, nextTick, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-import { VTextField } from 'vuetify/lib';
+import { nextTick, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { VTextField } from 'vuetify/components';
 
 import type {
   CategoriesResponse,
@@ -59,11 +55,15 @@ import type {
 import { useHttp } from '@intake24/admin/services';
 import { useI18n } from '@intake24/i18n';
 
+import type { DataTableHeader } from '../data-tables';
+
 export type Category = CategoryListEntry & { resource: 'categories' };
 export type Food = FoodsResponse['data'][number] & { resource: 'foods' };
 
 export type FoodSearchItem = Category | Food;
 
+defineOptions({ name: 'FoodExplorerSearch' });
+
 const props = defineProps({
   localeId: {
     type: String,
@@ -85,11 +85,11 @@ const categories = ref<CategoriesResponse['data']>([]);
 const foods = ref<FoodsResponse['data']>([]);
 const items = ref<FoodSearchItem[]>([]);
 
-const headers = [
-  { text: '', value: 'resource', sortable: false },
-  { text: i18n.t('fdbs.foods.global.code'), value: 'code' },
-  { text: i18n.t('fdbs.foods.global.name'), value: 'englishName' },
-  { text: i18n.t('fdbs.foods.local.name'), value: 'name' },
+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() {
@@ -141,18 +141,18 @@ async function fetchItems() {
   }
 }
 
-async function selectItem(item: FoodSearchItem) {
+async function selectItem(event: PointerEvent, ops: { item: FoodSearchItem }) {
+  const { item: { id: entryId, resource } } = ops;
   dialog.value = false;
 
-  const name = `fdbs-${item.resource}`;
-  const entryId = item.id;
+  const name = `fdbs-${resource}`;
 
   if (route.name === name && route.params.entryId === entryId)
     return;
 
   await router.push({
-    name: `fdbs-${item.resource}`,
-    params: { id: props.localeId, entryId: item.id },
+    name: `fdbs-${resource}`,
+    params: { id: props.localeId, entryId },
   });
 }
 
@@ -169,17 +169,10 @@ watch(dialog, async (val) => {
     return;
 
   await nextTick();
-  // @ts-expect-error - vuetify types
   searchRef.value?.focus();
 });
 </script>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'FoodExplorerSearch',
-});
-</script>
-
 <style lang="scss">
 .v-data-table tr {
   cursor: pointer;
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 c08b1bdbb1..348ca33ab1 100644
--- a/apps/admin/src/components/fdbs/locales/add-locale-dialog.vue
+++ b/apps/admin/src/components/fdbs/locales/add-locale-dialog.vue
@@ -1,15 +1,11 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-btn v-bind="attrs" color="primary" fab small :title="$t('fdbs.categories.add')" v-on="on">
-        <v-icon>$add</v-icon>
-      </v-btn>
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-btn color="primary" icon="$add" size="small" :title="$t('fdbs.categories.add')" v-bind="props" />
     </template>
-    <v-card :loading="loading" :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :loading="loading" :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t('fdbs.categories.title') }}
         </v-toolbar-title>
@@ -22,61 +18,48 @@
           hide-details="auto"
           :label="$t('common.search._')"
           :loading="loading"
-          outlined
           prepend-inner-icon="$search"
+          variant="outlined"
           @click:clear="clear"
         />
-        <v-alert v-if="isAlreadyIncluded" text type="error">
+        <v-alert v-if="isAlreadyIncluded" type="error">
           {{ $t('fdbs.categories.alreadyIncluded', { code: selectedItems[0].code }) }}
         </v-alert>
         <template v-if="items.length">
-          <v-list dense min-height="350px">
-            <v-list-item-group v-model="selected" multiple>
-              <template v-for="(item, idx) in items">
-                <v-list-item :key="item.id" :value="item.id">
-                  <template #default="{ active }">
-                    <v-list-item-action>
-                      <v-checkbox :input-value="active" />
-                    </v-list-item-action>
-                    <v-list-item-avatar>
-                      <v-icon>$locales</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                      <v-list-item-title>
-                        {{ item.code }} | {{ item.englishName }}
-                      </v-list-item-title>
-                    </v-list-item-content>
-                  </template>
-                </v-list-item>
-                <v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
+          <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-group>
+              <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" circle :length="lastPage" />
+            <v-pagination v-model="page" :length="lastPage" rounded />
           </div>
         </template>
-        <v-alert v-else color="secondary" text type="info">
+        <v-alert v-else color="secondary" type="info">
           {{ $t('fdbs.categories.none') }}
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn class="font-weight-bold" color="error" text @click.stop="close">
-          <v-icon left>
-            $cancel
-          </v-icon>{{ $t('common.action.cancel') }}
+        <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="close">
+          <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
         <v-btn
           class="font-weight-bold"
           color="info"
           :disabled="!selected.length || isAlreadyIncluded"
-          text
+          variant="text"
           @click.stop="confirm"
         >
-          <v-icon left>
-            $success
-          </v-icon>{{ $t('common.action.ok') }}
+          <v-icon icon="$success" start />{{ $t('common.action.ok') }}
         </v-btn>
       </v-card-actions>
     </v-card>
diff --git a/apps/admin/src/components/fdbs/locales/locale-list.vue b/apps/admin/src/components/fdbs/locales/locale-list.vue
index b8e0fa955a..7aa5fe491b 100644
--- a/apps/admin/src/components/fdbs/locales/locale-list.vue
+++ b/apps/admin/src/components/fdbs/locales/locale-list.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
       <v-toolbar-title class="font-weight-medium">
         <slot name="title">
           {{ $t('fdbs.locales.title') }}
@@ -11,36 +11,33 @@
     </v-toolbar>
     <v-expansion-panels flat>
       <v-expansion-panel>
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t('fdbs.locales.description', { count: items.length }) }}
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
-          <v-list class="py-0" dense>
-            <template v-for="(item, idx) in items">
-              <v-list-item :key="item.id" link>
-                <v-list-item-icon>
-                  <v-icon>$locales</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  <v-list-item-title>{{ item.englishName }}</v-list-item-title>
-                </v-list-item-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <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').toString()"
+                    :label="$t('fdbs.locales.remove')"
                     small
                     @confirm="remove(item.id)"
                   >
                     {{ $t('common.action.confirm.remove', { name: item.englishName }) }}
                   </confirm-dialog>
                 </v-list-item-action>
-              </v-list-item>
-              <v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
-            </template>
+              </template>
+            </v-list-item>
           </v-list>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <v-messages
@@ -76,21 +73,21 @@ export default defineComponent({
       type: Object as PropType<Errors>,
       default: () => new Errors(),
     },
-    value: {
+    modelValue: {
       type: Array as PropType<FoodsLocaleAttributes[]>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props, { emit }) {
     const items = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(val) {
-        emit('input', val);
+        emit('update:modelValue', val);
       },
     });
 
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 99c4d8d770..99c519b6c5 100644
--- a/apps/admin/src/components/fdbs/nutrients/add-nutrient-dialog.vue
+++ b/apps/admin/src/components/fdbs/nutrients/add-nutrient-dialog.vue
@@ -1,15 +1,11 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-btn v-bind="attrs" color="primary" fab small :title="$t('fdbs.nutrients.add')" v-on="on">
-        <v-icon>$add</v-icon>
-      </v-btn>
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-btn color="primary" icon="$add" size="small" :title="$t('fdbs.nutrients.add')" v-bind="props" />
     </template>
-    <v-card :loading="loading" :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :loading="loading" :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t('fdbs.nutrients.title') }}
         </v-toolbar-title>
@@ -20,13 +16,13 @@
             <v-select
               v-model="selectedTableId"
               hide-details="auto"
-              item-text="description"
+              item-title="description"
               item-value="id"
               :items="nutrientTables"
               :label="$t('nutrient-tables._')"
               name="selectedTableId"
-              outlined
-              @change="fetch"
+              variant="outlined"
+              @update:model-value="fetch"
             />
           </v-col>
           <v-col cols="12">
@@ -37,148 +33,108 @@
               hide-details="auto"
               :label="$t('common.search._')"
               :loading="loading"
-              outlined
               prepend-inner-icon="$search"
+              variant="outlined"
               @click:clear="clear"
             />
           </v-col>
         </v-row>
-        <v-alert v-if="isAlreadyIncluded" text type="error">
-          {{ $t('fdbs.nutrients.alreadyIncluded', { id: selectedRecord?.id }) }}
+        <v-alert v-if="isAlreadyIncluded" type="error">
+          {{ $t('fdbs.nutrients.alreadyIncluded', { id: selected.at(0)?.id }) }}
         </v-alert>
         <template v-if="items.length">
-          <v-list dense min-height="350px">
-            <v-list-item-group v-model="selectedRecordId">
-              <template v-for="(item, idx) in items">
-                <v-list-item :key="item.id" :value="item.id">
-                  <template #default="{ active }">
-                    <v-list-item-action>
-                      <v-checkbox :input-value="active" />
-                    </v-list-item-action>
-                    <v-list-item-avatar>
-                      <v-icon>fas fa-list</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                      <v-list-item-title>
-                        {{ item.nutrientTableRecordId }} | {{ item.name }}
-                      </v-list-item-title>
-                    </v-list-item-content>
-                  </template>
-                </v-list-item>
-                <v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
+          <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-group>
+              <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" circle :length="lastPage" />
+            <v-pagination v-model="page" :length="lastPage" rounded />
           </div>
         </template>
-        <v-alert v-else color="secondary" text type="info">
+        <v-alert v-else color="secondary" type="info">
           {{ $t('fdbs.nutrients.none') }}
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn class="font-weight-bold" color="error" text @click.stop="close">
-          <v-icon left>
-            $cancel
-          </v-icon>{{ $t('common.action.cancel') }}
+        <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="close">
+          <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
         <v-btn
           class="font-weight-bold"
           color="info"
-          :disabled="!selectedRecordId || isAlreadyIncluded"
-          text
+          :disabled="!isSelected || isAlreadyIncluded"
+          variant="text"
           @click.stop="confirm"
         >
-          <v-icon left>
-            $success
-          </v-icon>{{ $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 298056f6ba..f670767f92 100644
--- a/apps/admin/src/components/fdbs/nutrients/nutrient-list.vue
+++ b/apps/admin/src/components/fdbs/nutrients/nutrient-list.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('fdbs.nutrients.title') }}
       </v-toolbar-title>
@@ -12,35 +12,32 @@
         @add="add"
       />
     </v-toolbar>
-    <v-list class="py-0" two-line>
-      <template v-for="(item, idx) in items">
-        <v-list-item :key="item.id" link>
-          <v-list-item-avatar>
-            <v-icon>$nutrient-types</v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <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>
-          </v-list-item-content>
+    <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').toString()"
+              :label="$t('fdbs.nutrients.remove')"
               @confirm="remove(item.id)"
             >
               {{ $t('common.action.confirm.remove', { name: item.name }) }}
             </confirm-dialog>
           </v-list-item-action>
-        </v-list-item>
-        <v-divider v-if="idx + 1 < items.length" :key="`div-${item.id}`" />
-      </template>
+        </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 },
 
@@ -81,23 +77,23 @@ export default defineComponent({
       type: Array as PropType<FoodDatabaseRefs['nutrientTables']>,
       default: () => [],
     },
-    value: {
+    modelValue: {
       type: Array as PropType<NutrientTableRecordAttributes[]>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props, { emit }) {
     const { i18n } = useI18n();
 
     const items = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(val) {
-        emit('input', val);
+        emit('update:modelValue', val);
       },
     });
 
@@ -112,7 +108,7 @@ export default defineComponent({
     const getNutrientTableName = (id: string) => {
       const table = props.nutrientTables.find(item => item.id === id);
 
-      return table?.description ?? i18n.t('common.not.found').toString();
+      return table?.description ?? i18n.t('common.not.found');
     };
 
     return { add, getNutrientTableName, items, remove };
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/as-served.vue b/apps/admin/src/components/fdbs/portion-sizes/parameters/as-served.vue
index a97bbb8705..d823f156e3 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/as-served.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/as-served.vue
@@ -36,7 +36,7 @@ export default defineComponent({
   components: { SelectResource },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<PortionSizeParameters['as-served']>,
       required: true,
     },
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/drink-scale.vue b/apps/admin/src/components/fdbs/portion-sizes/parameters/drink-scale.vue
index 128b4fb3be..fcb18ecab2 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/drink-scale.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/drink-scale.vue
@@ -59,7 +59,7 @@ export default defineComponent({
   components: { SelectResource },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<PortionSizeParameters['drink-scale']>,
       required: true,
     },
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/guide-image.vue b/apps/admin/src/components/fdbs/portion-sizes/parameters/guide-image.vue
index 03ae7b2f78..133de48a6c 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/guide-image.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/guide-image.vue
@@ -34,7 +34,7 @@ export default defineComponent({
   components: { SelectResource },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<PortionSizeParameters['guide-image']>,
       required: true,
     },
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/milk-in-a-hot-drink.vue b/apps/admin/src/components/fdbs/portion-sizes/parameters/milk-in-a-hot-drink.vue
index 83113f3fb1..5ebda73fdd 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/milk-in-a-hot-drink.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/milk-in-a-hot-drink.vue
@@ -4,12 +4,11 @@
       <language-selector
         v-model="parameters.options"
         :default="[]"
-        :label="$t('fdbs.portionSizes.methods.parent-food-portion.options').toString()"
+        :label="$t('fdbs.portionSizes.methods.parent-food-portion.options')"
         :required="true"
       >
-        <template v-for="lang in Object.keys(parameters.options)" #[`lang.${lang}`]>
+        <template v-for="lang in Object.keys(parameters.options)" :key="lang" #[`lang.${lang}`]>
           <options-list
-            :key="lang"
             :options="parameters.options[lang]"
             :rules="rules"
             @update:options="updateOption(lang, $event)"
@@ -37,7 +36,7 @@ export default defineComponent({
   components: { LanguageSelector, OptionsList },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<PortionSizeParameters['milk-in-a-hot-drink']>,
       required: true,
     },
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/milk-on-cereal.vue b/apps/admin/src/components/fdbs/portion-sizes/parameters/milk-on-cereal.vue
index f56fc86bde..344a412709 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/milk-on-cereal.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/milk-on-cereal.vue
@@ -22,7 +22,7 @@ export default defineComponent({
   name: 'MilkOnCerealParameters',
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<PortionSizeParameters['milk-on-cereal']>,
       required: true,
     },
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/no-parameters.vue b/apps/admin/src/components/fdbs/portion-sizes/parameters/no-parameters.vue
index 883789d66e..cd964b3186 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/no-parameters.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/no-parameters.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-alert text type="info">
+  <v-alert type="info">
     {{ $t('fdbs.portionSizes.noParameters') }}
   </v-alert>
 </template>
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/parent-food-portion.vue b/apps/admin/src/components/fdbs/portion-sizes/parameters/parent-food-portion.vue
index a4c69b600e..939977dd9c 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/parent-food-portion.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/parent-food-portion.vue
@@ -1,13 +1,11 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <v-tabs vertical>
-        <select-resource item-id="code" resource="categories" @input="addCategory">
-          <template #activator="{ attrs, on }">
-            <v-btn class="mb-4" color="primary" v-bind="attrs" v-on="on">
-              <v-icon left>
-                $add
-              </v-icon>
+      <v-tabs direction="vertical">
+        <select-resource item-id="code" resource="categories" @update:model-value="addCategory">
+          <template #activator="{ props }">
+            <v-btn class="mb-4" color="primary" v-bind="props">
+              <v-icon icon="$add" start />
               {{ $t(`fdbs.categories.add`) }}
             </v-btn>
           </template>
@@ -20,21 +18,18 @@
           </template>
         </select-resource>
         <v-tab v-for="(option, cat) in parameters.options" :key="cat">
-          <v-icon left>
-            $categories
-          </v-icon>{{ cat }}
+          <v-icon icon="$categories" start />{{ cat }}
         </v-tab>
-        <v-tab-item v-for="(option, cat) in parameters.options" :key="cat" class="pl-3">
+        <v-tabs-window-item v-for="(option, cat) in parameters.options" :key="cat" class="pl-3">
           <div class="d-flex flex-column">
             <language-selector
               v-model="parameters.options[cat]"
               :default="[]"
-              :label="$t('fdbs.portionSizes.methods.parent-food-portion.options').toString()"
+              :label="$t('fdbs.portionSizes.methods.parent-food-portion.options')"
               :required="true"
             >
-              <template v-for="lang in Object.keys(parameters.options[cat])" #[`lang.${lang}`]>
+              <template v-for="lang in Object.keys(parameters.options[cat])" :key="lang" #[`lang.${lang}`]>
                 <options-list
-                  :key="lang"
                   :options="parameters.options[cat][lang]"
                   :rules="rules"
                   @update:options="updateOption(cat, lang, $event)"
@@ -45,15 +40,13 @@
               class="align-self-end"
               color="error"
               :disabled="cat === '_default'"
-              text
+              variant="text"
               @click="removeCategory(cat)"
             >
-              <v-icon left>
-                $delete
-              </v-icon>{{ $t(`fdbs.categories.remove`) }}
+              <v-icon icon="$delete" start />{{ $t(`fdbs.categories.remove`) }}
             </v-btn>
           </div>
-        </v-tab-item>
+        </v-tabs-window-item>
       </v-tabs>
     </v-col>
   </v-row>
@@ -77,7 +70,7 @@ export default defineComponent({
   components: { LanguageSelector, OptionsList, SelectResource },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<PortionSizeParameters['parent-food-portion']>,
       required: true,
     },
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/pizza.vue b/apps/admin/src/components/fdbs/portion-sizes/parameters/pizza.vue
index 53bef5f76a..3bd67ed865 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/pizza.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/pizza.vue
@@ -22,7 +22,7 @@ export default defineComponent({
   name: 'PizzaParameters',
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<PortionSizeParameters['pizza']>,
       required: true,
     },
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 49bc5c3aee..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
@@ -4,17 +4,15 @@
       <v-btn
         class="mb-4 align-self-end"
         color="secondary"
-        outlined
         rounded
         :title="$t('standard-units.add')"
+        variant="outlined"
         @click="add"
       >
-        <v-icon left>
-          $add
-        </v-icon>
+        <v-icon icon="$add" start />
         {{ $t('standard-units.add') }}
       </v-btn>
-      <v-simple-table>
+      <v-table>
         <thead>
           <tr>
             <th />
@@ -24,8 +22,13 @@
             <th />
           </tr>
         </thead>
-        <draggable v-model="parameters.units" handle=".drag-and-drop__handle" tag="tbody">
-          <tr v-for="(unit, idx) in parameters.units" :key="unit.name" class="drag-and-drop__item">
+        <vue-draggable
+          v-model="parameters.units"
+          :animation="300"
+          handle=".drag-and-drop__handle"
+          tag="tbody"
+        >
+          <tr v-for="(unit, idx) in parameters.units" :key="unit.name">
             <td>
               <v-icon class="drag-and-drop__handle">
                 $handle
@@ -33,11 +36,9 @@
             </td>
             <td>
               <select-resource v-model="unit.name" resource="standard-units">
-                <template #activator="{ attrs, on }">
-                  <v-btn v-bind="attrs" text :title="$t('standard-units.add')" v-on="on">
-                    <v-icon left>
-                      $standard-units
-                    </v-icon>
+                <template #activator="{ props }">
+                  <v-btn v-bind="props" :title="$t('standard-units.add')" variant="text">
+                    <v-icon icon="$standard-units" start />
                     {{ unit.name }}
                   </v-btn>
                 </template>
@@ -46,7 +47,7 @@
             <td>
               <v-text-field
                 v-model.number="unit.weight"
-                dense
+                density="compact"
                 hide-details="auto"
                 :name="`unit${idx}-weight`"
                 :rules="weightRules"
@@ -64,15 +65,17 @@
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('standard-units.remove').toString()"
+                :label="$t('standard-units.remove')"
+                size="small"
+                variant="text"
                 @confirm="remove(idx)"
               >
                 {{ $t('common.action.confirm.delete', { name: unit.name }) }}
               </confirm-dialog>
             </td>
           </tr>
-        </draggable>
-      </v-simple-table>
+        </vue-draggable>
+      </v-table>
     </v-col>
   </v-row>
 </template>
@@ -80,7 +83,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { PortionSizeParameters } from '@intake24/common/surveys';
 import { SelectResource } from '@intake24/admin/components/dialogs';
@@ -91,10 +94,10 @@ import { useParameters } from './use-parameters';
 export default defineComponent({
   name: 'StandardPortionParameters',
 
-  components: { ConfirmDialog, Draggable: draggable, SelectResource },
+  components: { ConfirmDialog, SelectResource, VueDraggable },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<PortionSizeParameters['standard-portion']>,
       required: true,
     },
diff --git a/apps/admin/src/components/fdbs/portion-sizes/parameters/use-parameters.ts b/apps/admin/src/components/fdbs/portion-sizes/parameters/use-parameters.ts
index 6c57565135..9df6d8a6a3 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/parameters/use-parameters.ts
+++ b/apps/admin/src/components/fdbs/portion-sizes/parameters/use-parameters.ts
@@ -4,11 +4,11 @@ import { useVModel } from '@vueuse/core';
 import type { PortionSizeMethodId, PortionSizeParameters } from '@intake24/common/surveys';
 
 export type UserParametersProps<T extends PortionSizeMethodId> = {
-  value: PortionSizeParameters[T];
+  modelValue: PortionSizeParameters[T];
 };
 
 export function useParameters<T extends PortionSizeMethodId>(props: UserParametersProps<T>, { emit }: SetupContext) {
-  const parameters = useVModel(props, 'value', emit, { eventName: 'input' });
+  const parameters = useVModel(props, 'modelValue', emit);
 
   return {
     parameters,
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 04290d59c0..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
@@ -1,6 +1,6 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('fdbs.portionSizes.title') }}
       </v-toolbar-title>
@@ -8,61 +8,49 @@
       <v-btn
         v-if="!disabled"
         color="primary"
-        fab
-        small
+        icon="$add"
+        size="small"
         :title="$t('fdbs.portionSizes.add')"
         @click.stop="add"
-      >
-        <v-icon small>
-          $add
-        </v-icon>
-      </v-btn>
+      />
     </v-toolbar>
-    <v-list class="py-0" two-line>
-      <draggable v-model="items" handle=".drag-and-drop__handle">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(item, index) in items"
-            :key="item._id"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ $t(`prompts.portionSizeOption.selections.${item.description}`) }}
-              </v-list-item-title>
-              <v-list-item-subtitle>{{ item.method }} </v-list-item-subtitle>
-              <v-messages
-                v-if="errors.has('portionSizeMethods', index)"
-                color="error"
-                :value="errors.get('portionSizeMethods', index)"
-              />
-            </v-list-item-content>
+    <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">
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+          </template>
+          <v-list-item-title>
+            {{ $t(`prompts.portionSizeOption.selections.${item.description}`) }}
+          </v-list-item-title>
+          <v-list-item-subtitle>{{ item.method }} </v-list-item-subtitle>
+          <v-messages
+            v-if="errors.has('portionSizeMethods', index)"
+            color="error"
+            :value="errors.get('portionSizeMethods', index)"
+          />
+          <template #append>
             <v-list-item-action v-if="!disabled">
-              <v-btn icon :title="$t('fdbs.portionSizes.edit')" @click.stop="edit({ item, index })">
-                <v-icon color="secondary lighten-1">
-                  $edit
-                </v-icon>
-              </v-btn>
+              <v-btn icon="$edit" :title="$t('fdbs.portionSizes.edit')" @click.stop="edit({ item, index })" />
             </v-list-item-action>
             <v-list-item-action v-if="!disabled">
               <confirm-dialog
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('fdbs.portionSizes.remove').toString()"
+                :label="$t('fdbs.portionSizes.remove')"
                 @confirm="remove(index)"
               >
                 {{ $t('common.action.confirm.remove', { name: item.description }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <portion-size-method-selector ref="selector" @save="save" />
   </v-card>
@@ -72,7 +60,7 @@
 import type { PropType } from 'vue';
 import { deepEqual } from 'fast-equals';
 import { defineComponent, ref } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { Errors } from '@intake24/common/util';
 import { withIdAndOrder, withoutIdAndOrder } from '@intake24/admin/util';
@@ -88,7 +76,7 @@ import PortionSizeMethodSelector from './portion-size-method-selector.vue';
 export default defineComponent({
   name: 'PortionSizeMethodList',
 
-  components: { ConfirmDialog, Draggable: draggable, PortionSizeMethodSelector },
+  components: { ConfirmDialog, PortionSizeMethodSelector, VueDraggable },
 
   props: {
     disabled: {
@@ -103,16 +91,16 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Array as PropType<PortionSizeMethodItem[]>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props) {
-    const items = ref(props.value.map(withIdAndOrder));
+    const items = ref(props.modelValue.map(withIdAndOrder));
     const selector = ref<InstanceType<typeof PortionSizeMethodSelector>>();
 
     return { items, selector };
@@ -132,10 +120,10 @@ export default defineComponent({
       this.items = val.map(withIdAndOrder);
     },
     outputItems(val: PortionSizeMethodItem[]) {
-      if (deepEqual(val, this.value))
+      if (deepEqual(val, this.modelValue))
         return;
 
-      this.$emit('input', [...val]);
+      this.$emit('update:modelValue', [...val]);
     },
   },
 
diff --git a/apps/admin/src/components/fdbs/portion-sizes/portion-size-method-selector.vue b/apps/admin/src/components/fdbs/portion-sizes/portion-size-method-selector.vue
index 888e255c91..011dfe9542 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/portion-size-method-selector.vue
+++ b/apps/admin/src/components/fdbs/portion-sizes/portion-size-method-selector.vue
@@ -2,24 +2,20 @@
   <v-dialog
     v-model="dialog.show"
     fullscreen
-    hide-overlay
     persistent
+    :scrim="false"
     transition="dialog-bottom-transition"
   >
     <v-card tile>
       <v-toolbar color="secondary" dark>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
         <v-toolbar-title>
           {{ $t(`fdbs.portionSizes.${dialog.index === -1 ? 'add' : 'edit'}`) }}
         </v-toolbar-title>
         <v-spacer />
         <v-toolbar-items>
-          <v-btn dark text :title="$t('common.action.ok')" @click.stop="save">
-            <v-icon left>
-              $success
-            </v-icon>{{ $t('common.action.ok') }}
+          <v-btn :title="$t('common.action.ok')" variant="text" @click.stop="save">
+            <v-icon icon="$success" start />{{ $t('common.action.ok') }}
           </v-btn>
         </v-toolbar-items>
       </v-toolbar>
@@ -38,8 +34,8 @@
                     :items="estimationMethods"
                     :label="$t('fdbs.portionSizes.methods._')"
                     name="method"
-                    outlined
-                    @change="updateItemProps"
+                    variant="outlined"
+                    @update:model-value="updateItemProps"
                   />
                 </v-col>
                 <v-col cols="12">
@@ -49,7 +45,7 @@
                     :items="selections"
                     :label="$t('fdbs.portionSizes.description')"
                     name="description"
-                    outlined
+                    variant="outlined"
                   />
                 </v-col>
                 <v-col cols="12">
@@ -88,16 +84,12 @@
             </v-col>
           </v-row>
           <v-card-actions>
-            <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-              <v-icon left>
-                $cancel
-              </v-icon>{{ $t('common.action.cancel') }}
+            <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+              <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
             </v-btn>
             <v-spacer />
-            <v-btn class="font-weight-bold" color="info" text type="submit">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-card-actions>
         </v-container>
diff --git a/apps/admin/src/components/fdbs/portion-sizes/portion-sizes.ts b/apps/admin/src/components/fdbs/portion-sizes/portion-sizes.ts
index 7da8470572..8152c2737a 100644
--- a/apps/admin/src/components/fdbs/portion-sizes/portion-sizes.ts
+++ b/apps/admin/src/components/fdbs/portion-sizes/portion-sizes.ts
@@ -157,17 +157,17 @@ export function usePortionSizeMethods() {
 
   const estimationMethods = psmDefaults.map(({ method: value }) => ({
     value,
-    text: i18n.t(`fdbs.portionSizes.methods.${value}._`).toString(),
+    title: i18n.t(`fdbs.portionSizes.methods.${value}._`),
   }));
 
   const selections = Object.keys(portionSizeSelectionImages)
     .map(value => ({
       value,
-      text: i18n.t(`prompts.portionSizeOption.selections.${value}`).toString(),
+      title: i18n.t(`prompts.portionSizeOption.selections.${value}`),
     }))
-    .sort((a, b) => a.text.localeCompare(b.text)) as {
+    .sort((a, b) => a.title.localeCompare(b.title)) as {
     value: PortionSizeSelectionImage;
-    text: string;
+    title: string;
   }[];
 
   return { estimationMethods, selections };
diff --git a/apps/admin/src/components/feedback/cards/card-list.vue b/apps/admin/src/components/feedback/cards/card-list.vue
index c51dd1dafc..07cd452c95 100644
--- a/apps/admin/src/components/feedback/cards/card-list.vue
+++ b/apps/admin/src/components/feedback/cards/card-list.vue
@@ -1,26 +1,22 @@
 <template>
   <v-card flat tile>
-    <v-toolbar color="grey lighten-5" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-4" flat tile>
+      <v-icon color="secondary" end>
         fas fa-cloud-meatball
       </v-icon>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('feedback-schemes.cards.title') }}
       </v-toolbar-title>
       <v-spacer />
-      <v-btn color="primary" fab small :title="$t('feedback-schemes.cards.add')" @click.stop="add">
-        <v-icon small>
-          $add
-        </v-icon>
-      </v-btn>
+      <v-btn color="primary" icon="$add" size="small" :title="$t('feedback-schemes.cards.add')" @click.stop="add" />
       <options-menu>
-        <select-resource resource="feedback-schemes" return-object="cards" @input="load">
-          <template #activator="{ attrs, on }">
-            <v-list-item v-bind="attrs" link v-on="on">
+        <select-resource resource="feedback-schemes" return-object="cards" @update:model-value="load">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" link>
+              <template #prepend>
+                <v-icon icon="$download" />
+              </template>
               <v-list-item-title>
-                <v-icon left>
-                  $download
-                </v-icon>
                 {{ $t('feedback-schemes.load') }}
               </v-list-item-title>
             </v-list-item>
@@ -29,32 +25,31 @@
         <json-editor-dialog v-model="cards" />
       </options-menu>
     </v-toolbar>
-    <v-list two-line>
-      <draggable v-model="cards" handle=".drag-and-drop__handle">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(card, index) in cards"
-            :key="card.id"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ getListItemTitle(card) }}</v-list-item-title>
-              <v-list-item-subtitle>
-                {{ `Type: ${card.type}` }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
+    <v-list class="list-border" lines="two">
+      <vue-draggable
+        v-model="cards"
+        :animation="300"
+        handle=".drag-and-drop__handle"
+      >
+        <v-list-item
+          v-for="(card, index) in cards"
+          :key="card.id"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+          </template>
+          <v-list-item-title>{{ getListItemTitle(card) }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ `Type: ${card.type}` }}
+          </v-list-item-subtitle>
+          <template #append>
             <v-list-item-action>
               <v-btn
                 icon
                 :title="$t('feedback-schemes.cards.edit')"
                 @click.stop="edit({ card, index })"
               >
-                <v-icon color="secondary lighten-1">
+                <v-icon color="secondary-lighten-1">
                   $edit
                 </v-icon>
               </v-btn>
@@ -64,15 +59,15 @@
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('feedback-schemes.cards.remove').toString()"
+                :label="$t('feedback-schemes.cards.remove')"
                 @confirm="remove(index)"
               >
                 {{ $t('common.action.confirm.delete', { name: getListItemTitle(card) }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <card-selector ref="selector" :images="images" @save="save" />
   </v-card>
@@ -82,7 +77,7 @@
 import type { PropType } from 'vue';
 import { deepEqual } from 'fast-equals';
 import { defineComponent, ref } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { Card } from '@intake24/common/feedback';
 import type { FeedbackImage, NutrientTypeResponse } from '@intake24/common/types/http/admin';
@@ -101,12 +96,12 @@ export default defineComponent({
   name: 'CardList',
 
   components: {
-    Draggable: draggable,
     CardSelector,
     ConfirmDialog,
     JsonEditorDialog,
     OptionsMenu,
     SelectResource,
+    VueDraggable,
   },
 
   props: {
@@ -118,16 +113,16 @@ export default defineComponent({
       type: Array as PropType<NutrientTypeResponse[]>,
       default: () => [],
     },
-    value: {
+    modelValue: {
       type: Array as PropType<Card[]>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props) {
-    const cards = ref<Card[]>(props.value);
+    const cards = ref<Card[]>(props.modelValue);
     const selector = ref<InstanceType<typeof CardSelector>>();
 
     return { cards, selector };
@@ -182,7 +177,7 @@ export default defineComponent({
     },
 
     update() {
-      this.$emit('input', this.cards);
+      this.$emit('update:modelValue', this.cards);
     },
   },
 });
diff --git a/apps/admin/src/components/feedback/cards/card-selector.vue b/apps/admin/src/components/feedback/cards/card-selector.vue
index 9800e47985..b22f5fcdf4 100644
--- a/apps/admin/src/components/feedback/cards/card-selector.vue
+++ b/apps/admin/src/components/feedback/cards/card-selector.vue
@@ -2,29 +2,25 @@
   <v-dialog
     v-model="dialog.show"
     fullscreen
-    hide-overlay
     persistent
+    :scrim="false"
     transition="dialog-bottom-transition"
   >
     <v-card tile>
       <v-toolbar color="secondary" dark>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
         <v-toolbar-title>
           {{ $t(`feedback-schemes.cards.${dialog.index === -1 ? 'add' : 'edit'}`) }}
         </v-toolbar-title>
         <v-spacer />
         <v-toolbar-items>
-          <v-btn dark text :title="$t('common.action.ok')" @click.stop="save">
-            <v-icon left>
-              $success
-            </v-icon>{{ $t('common.action.ok') }}
+          <v-btn :title="$t('common.action.ok')" variant="text" @click.stop="save">
+            <v-icon icon="$success" start />{{ $t('common.action.ok') }}
           </v-btn>
         </v-toolbar-items>
         <template #extension>
           <v-container>
-            <v-tabs v-model="tab" background-color="secondary" dark>
+            <v-tabs v-model="tab" bg-color="secondary">
               <v-tab
                 v-for="item in cardSettings[dialog.card.type].tabs" :key="item"
                 :tab-value="item"
@@ -37,43 +33,41 @@
       </v-toolbar>
       <v-form ref="form" @submit.prevent="save">
         <v-container>
-          <v-tabs-items v-model="tab" class="pt-1">
-            <v-tab-item key="general" value="general">
+          <v-tabs-window v-model="tab" class="pt-1">
+            <v-tabs-window-item key="general" value="general">
               <v-container>
                 <v-row>
                   <v-col cols="12">
-                    <v-card outlined>
-                      <v-toolbar color="grey lighten-4" flat>
+                    <v-card border>
+                      <v-toolbar color="grey-lighten-4" flat>
                         <v-toolbar-title>
-                          <v-icon left>
-                            fas fa-cloud-meatball
-                          </v-icon>
+                          <v-icon icon="fas fa-cloud-meatball" start />
                           {{ $t(`feedback-schemes.cards.type`) }}
                         </v-toolbar-title>
                       </v-toolbar>
                       <v-item-group
                         v-model="dialog.card.type"
-                        active-class="primary"
-                        @change="updateCardProps"
+                        selected-class="primary"
+                        @update:model-value="updateCardProps"
                       >
                         <v-container>
                           <v-row>
                             <v-col v-for="card in cardDefaults" :key="card.type" cols="12" md="3">
-                              <v-item v-slot="{ active, toggle }" :value="card.type">
+                              <v-item v-slot="{ isSelected, toggle }" :value="card.type">
                                 <v-card
-                                  :color="active ? 'primary' : ''"
+                                  :color="isSelected ? 'primary' : 'secondary'"
                                   dark
                                   height="180"
                                   @click.stop="toggle"
                                 >
-                                  <v-card-title class="justify-center">
+                                  <v-card-title class="text-center">
                                     {{ $t(`feedback-schemes.cards.${card.type}.title`) }}
                                   </v-card-title>
                                   <v-card-subtitle class="text-center">
                                     {{ $t(`feedback-schemes.cards.${card.type}.subtitle`) }}
                                   </v-card-subtitle>
-                                  <v-card-text v-show="active" class="text-center">
-                                    <v-icon x-large>
+                                  <v-card-text v-show="isSelected" class="text-center">
+                                    <v-icon size="48">
                                       $check
                                     </v-icon>
                                   </v-card-text>
@@ -86,12 +80,10 @@
                     </v-card>
                   </v-col>
                   <v-col cols="12">
-                    <v-card outlined>
-                      <v-toolbar color="grey lighten-4" flat>
+                    <v-card border>
+                      <v-toolbar color="grey-lighten-4" flat>
+                        <v-icon icon="fas fa-gears" start />
                         <v-toolbar-title>
-                          <v-icon left>
-                            fas fa-gears
-                          </v-icon>
                           {{ $t(`feedback-schemes.cards.options`) }}
                         </v-toolbar-title>
                       </v-toolbar>
@@ -102,33 +94,37 @@
                               <v-select
                                 v-model="dialog.card.image"
                                 hide-details="auto"
-                                item-text="id"
+                                item-title="id"
                                 item-value="id"
                                 :items="images"
                                 :label="$t('feedback-schemes.cards.image')"
                                 name="image"
-                                outlined
+                                variant="outlined"
                               >
-                                <template #item="{ item }">
-                                  <v-avatar class="mr-4 my-2" tile>
-                                    <v-img :alt="item.id" :src="item.url" />
-                                  </v-avatar>
-                                  {{ item.id }}
+                                <template #item="{ item, props }">
+                                  <v-list-item v-bind="props">
+                                    <template #prepend>
+                                      <v-avatar class="mr-4 my-2" tile>
+                                        <v-img :alt="item.raw.id" :src="item.raw.url" />
+                                      </v-avatar>
+                                    </template>
+                                    <v-list-item-title>{{ item.raw.id }}</v-list-item-title>
+                                  </v-list-item>
                                 </template>
                               </v-select>
                             </v-col>
                             <v-col cols="12" md="6">
                               <v-expansion-panels>
                                 <v-expansion-panel key="color">
-                                  <v-expansion-panel-header>
+                                  <v-expansion-panel-title>
                                     {{ $t(`feedback-schemes.cards.color`) }}
-                                  </v-expansion-panel-header>
-                                  <v-expansion-panel-content>
+                                  </v-expansion-panel-title>
+                                  <v-expansion-panel-text>
                                     <v-color-picker
                                       v-model="dialog.card.color"
                                       show-swatches
                                     />
-                                  </v-expansion-panel-content>
+                                  </v-expansion-panel-text>
                                 </v-expansion-panel>
                               </v-expansion-panels>
                             </v-col>
@@ -147,24 +143,20 @@
                   </v-col>
                 </v-row>
               </v-container>
-            </v-tab-item>
+            </v-tabs-window-item>
             <component
               :is="dialog.card.type"
               v-model="dialog.card"
               @validate="validate"
             />
-          </v-tabs-items>
+          </v-tabs-window>
           <v-card-actions>
-            <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-              <v-icon left>
-                $cancel
-              </v-icon>{{ $t('common.action.cancel') }}
+            <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+              <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
             </v-btn>
             <v-spacer />
-            <v-btn class="font-weight-bold" color="info" text type="submit">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-card-actions>
         </v-container>
diff --git a/apps/admin/src/components/feedback/cards/card-types/character.vue b/apps/admin/src/components/feedback/cards/card-types/character.vue
index d4df144001..3a894ad117 100644
--- a/apps/admin/src/components/feedback/cards/card-types/character.vue
+++ b/apps/admin/src/components/feedback/cards/card-types/character.vue
@@ -1,22 +1,22 @@
 <template>
   <div>
-    <v-tab-item key="content" value="content">
+    <v-tabs-window-item key="content" value="content">
       <v-container>
         <v-row>
           <v-col cols="12" md="6">
             <v-autocomplete
+              v-model:search-input="nutrientTypeIdSearchInput"
               hide-details="auto"
-              item-text="description"
+              item-title="description"
               item-value="id"
               :items="nutrientTypes"
               :label="$t('nutrient-types._')"
+              :model-value="modelValue.nutrientTypeIds"
               multiple
               name="nutrientTypeIds"
-              outlined
               prepend-inner-icon="$nutrient-types"
-              :search-input.sync="nutrientTypeIdSearchInput"
-              :value="value.nutrientTypeIds"
-              @change="updateNutrientTypeId($event)"
+              variant="outlined"
+              @update:model-value="updateNutrientTypeId($event)"
             />
           </v-col>
         </v-row>
@@ -24,14 +24,14 @@
       <v-card-title>{{ $t('feedback-schemes.sentiments.title') }}</v-card-title>
       <v-container>
         <character-sentiments
-          :value="value.sentiments"
-          @update:sentiments="update('sentiments', $event)"
+          :model-value="modelValue.sentiments"
+          @update:model-value="update('sentiments', $event)"
         />
       </v-container>
-    </v-tab-item>
-    <v-tab-item key="json" value="json">
-      <json-editor v-bind="{ value }" @input="$emit('input', $event)" />
-    </v-tab-item>
+    </v-tabs-window-item>
+    <v-tabs-window-item key="json" value="json">
+      <json-editor v-bind="{ modelValue }" @update:model-value="$emit('update:modelValue', $event)" />
+    </v-tabs-window-item>
   </div>
 </template>
 
@@ -52,19 +52,21 @@ export default defineComponent({
   components: { CharacterSentiments, JsonEditor },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<Character>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const nutrientTypeIdSearchInput = ref<null | string>(null);
 
-    const nutrientTypes = computed<NutrientTypeAttributes>(() => useEntry().refs.nutrientTypes ?? []);
+    const nutrientTypes = computed<NutrientTypeAttributes[]>(() => useEntry().refs.nutrientTypes ?? []);
 
     const update = (field: string, value: any) => {
-      emit('input', { ...props.value, [field]: value });
+      emit('update:modelValue', { ...props.modelValue, [field]: value });
     };
 
     const updateNutrientTypeId = (value: string[]) => {
diff --git a/apps/admin/src/components/feedback/cards/card-types/five-a-day.vue b/apps/admin/src/components/feedback/cards/card-types/five-a-day.vue
index bcc6fcc1d2..a621ca702e 100644
--- a/apps/admin/src/components/feedback/cards/card-types/five-a-day.vue
+++ b/apps/admin/src/components/feedback/cards/card-types/five-a-day.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <card-unit v-bind="{ unit: value.unit }" @update:unit="update('unit', $event)" />
+    <card-unit v-bind="{ unit: modelValue.unit }" @update:unit="update('unit', $event)" />
     <card-thresholds
-      :thresholds="{ high: value.high, low: value.low }"
+      :thresholds="{ high: modelValue.high, low: modelValue.low }"
       @update:high="update('high', $event)"
       @update:low="update('low', $event)"
     />
-    <v-tab-item key="json" value="json">
-      <json-editor v-bind="{ value }" @input="$emit('input', $event)" />
-    </v-tab-item>
+    <v-tabs-window-item key="json" value="json">
+      <json-editor v-bind="{ modelValue }" @update:model-value="$emit('update:modelValue', $event)" />
+    </v-tabs-window-item>
   </div>
 </template>
 
@@ -27,15 +27,17 @@ export default defineComponent({
   components: { CardThresholds, CardUnit, JsonEditor },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<FiveADayCard>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const update = (field: string, value: any) => {
-      emit('input', { ...props.value, [field]: value });
+      emit('update:modelValue', { ...props.modelValue, [field]: value });
     };
 
     return { update };
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 a5a8f920cb..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
@@ -1,37 +1,34 @@
 <template>
   <div>
-    <card-unit v-bind="{ unit: value.unit }" @update:unit="update('unit', $event)" />
+    <card-unit v-bind="{ unit: modelValue.unit }" @update:unit="update('unit', $event)" />
     <card-thresholds
-      :thresholds="{ high: value.high, low: value.low }"
+      :thresholds="{ high: modelValue.high, low: modelValue.low }"
       @update:high="update('high', $event)"
       @update:low="update('low', $event)"
     />
-    <v-tab-item key="nutrients" value="nutrients">
+    <v-tabs-window-item key="nutrients" value="nutrients">
       <v-container>
         <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
                 >
-                  <v-list-item-avatar>
+                  <template #prepend>
                     <v-icon>$nutrient-types</v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
+                  </template>
+                  <v-list-item-title>
                     {{ nutrientType.description }}
-                  </v-list-item-content>
-                  <v-list-item-action>
-                    <v-btn icon :title="$t('nutrient-types.remove')" @click.stop="remove(idx)">
-                      <v-icon color="error">
-                        $delete
-                      </v-icon>
-                    </v-btn>
-                  </v-list-item-action>
+                  </v-list-item-title>
+                  <template #append>
+                    <v-list-item-action>
+                      <v-btn color="error" icon="$delete" :title="$t('nutrient-types.remove')" @click.stop="remove(idx)" />
+                    </v-list-item-action>
+                  </template>
                 </v-list-item>
               </transition-group>
             </v-list>
@@ -44,34 +41,35 @@
               clearable
               hide-details="auto"
               :label="$t('nutrient-types._')"
-              outlined
               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
                 >
-                  <v-list-item-avatar>
+                  <template #prepend>
                     <v-icon>$nutrient-types</v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
+                  </template>
+                  <v-list-item-title>
                     {{ nutrientType.description }}
-                  </v-list-item-content>
-                  <v-list-item-action>
-                    <v-btn
-                      icon
-                      :title="$t('nutrient-types.add')"
-                      @click.stop="add(nutrientType.id)"
-                    >
-                      <v-icon color="info">
-                        $add
-                      </v-icon>
-                    </v-btn>
-                  </v-list-item-action>
+                  </v-list-item-title>
+                  <template #append>
+                    <v-list-item-action>
+                      <v-btn
+                        icon
+                        :title="$t('nutrient-types.add')"
+                        @click.stop="add(nutrientType.id)"
+                      >
+                        <v-icon color="info">
+                          $add
+                        </v-icon>
+                      </v-btn>
+                    </v-list-item-action>
+                  </template>
                 </v-list-item>
               </transition-group>
               <v-skeleton-loader
@@ -83,17 +81,17 @@
           </v-col>
         </v-row>
       </v-container>
-    </v-tab-item>
-    <v-tab-item key="json" value="json">
-      <json-editor v-bind="{ value }" @input="$emit('input', $event)" />
-    </v-tab-item>
+    </v-tabs-window-item>
+    <v-tabs-window-item key="json" value="json">
+      <json-editor v-bind="{ modelValue }" @update:model-value="$emit('update:modelValue', $event)" />
+    </v-tabs-window-item>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
 import { watchDebounced } from '@vueuse/core';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import type { NutrientGroupCard } from '@intake24/common/feedback';
 import type { NutrientTypeResponse } from '@intake24/common/types/http/admin';
@@ -102,127 +100,109 @@ import { useEntry } from '@intake24/admin/stores';
 
 import { CardThresholds, CardUnit } from '../partials';
 
-export default defineComponent({
-  name: 'NutrientGroupCard',
+defineOptions({ name: 'NutrientGroupCard' });
 
-  components: { CardThresholds, CardUnit, JsonEditor },
-
-  props: {
-    value: {
-      type: Object as PropType<NutrientGroupCard>,
-      required: true,
-    },
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<NutrientGroupCard>,
+    required: true,
   },
+});
 
-  setup(props, { emit }) {
-    const currentNutrientTypeIds = ref([...props.value.nutrientTypes]);
-    const search = ref<string | null>(null);
-    const filteredNutrientTypes = ref<NutrientTypeResponse[]>([]);
-    const visibleNutrientTypes = ref<NutrientTypeResponse[]>([]);
+const emit = defineEmits(['update:modelValue']);
 
-    const allNutrientTypes = computed<NutrientTypeResponse[]>(
-      () => useEntry().refs.nutrientTypes ?? [],
-    );
+const currentNutrientTypeIds = ref([...props.modelValue.nutrientTypes]);
+const search = ref<string | null>(null);
+const filteredNutrientTypes = ref<NutrientTypeResponse[]>([]);
+const visibleNutrientTypes = ref<NutrientTypeResponse[]>([]);
 
-    const availableNutrientTypes = computed(() =>
-      allNutrientTypes.value.filter(
-        nutrient => !currentNutrientTypeIds.value.includes(nutrient.id),
-      ),
-    );
+const allNutrientTypes = computed<NutrientTypeResponse[]>(
+  () => useEntry().refs.nutrientTypes ?? [],
+);
 
-    const currentNutrientTypes = computed(() =>
-      currentNutrientTypeIds.value.reduce<NutrientTypeResponse[]>((acc, nutrientId) => {
-        const match = allNutrientTypes.value.find(nutrient => nutrient.id === nutrientId);
+const availableNutrientTypes = computed(() =>
+  allNutrientTypes.value.filter(
+    nutrient => !currentNutrientTypeIds.value.includes(nutrient.id),
+  ),
+);
 
-        if (match)
-          acc.push(match);
+const currentNutrientTypes = computed(() =>
+  currentNutrientTypeIds.value.reduce<NutrientTypeResponse[]>((acc, nutrientId) => {
+    const match = allNutrientTypes.value.find(nutrient => nutrient.id === nutrientId);
 
-        return acc;
-      }, []),
-    );
+    if (match)
+      acc.push(match);
 
-    const loadMoreNutrientTypes = () => {
-      const startIndex = visibleNutrientTypes.value.length;
-      const endIndex
+    return acc;
+  }, []),
+);
+
+function loadMoreNutrientTypes() {
+  const startIndex = visibleNutrientTypes.value.length;
+  const endIndex
         = startIndex + 15 > filteredNutrientTypes.value.length
           ? filteredNutrientTypes.value.length
           : startIndex + 15;
 
-      const items = filteredNutrientTypes.value.slice(startIndex, endIndex);
-      visibleNutrientTypes.value.push(...items);
-    };
-
-    const loadFilteredNutrientTypes = () => {
-      filteredNutrientTypes.value = search.value
-        ? availableNutrientTypes.value.filter(
-          nutrient => !!nutrient.description.match(new RegExp(search.value, 'i')),
-        )
-        : [...availableNutrientTypes.value];
-
-      visibleNutrientTypes.value = [];
-      loadMoreNutrientTypes();
-    };
-
-    const nutrientTypesAvailableToLoad = computed(
-      () => visibleNutrientTypes.value.length < filteredNutrientTypes.value.length,
-    );
-
-    const tryLoadMoreNutrientTypes = (entries: IntersectionObserverEntry[]) => {
-      if (entries[0].isIntersecting && nutrientTypesAvailableToLoad)
-        loadMoreNutrientTypes();
-    };
-
-    const update = (field: string, value: any) => {
-      emit('input', { ...props.value, [field]: value });
-    };
-
-    watch(
-      allNutrientTypes,
-      () => {
-        loadFilteredNutrientTypes();
-      },
-      { immediate: true },
-    );
-
-    watchDebounced(
-      search,
-      () => {
-        loadFilteredNutrientTypes();
-      },
-      { debounce: 500, maxWait: 1000 },
-    );
-
-    return {
-      currentNutrientTypeIds,
-      currentNutrientTypes,
-      allNutrientTypes,
-      availableNutrientTypes,
-      nutrientTypesAvailableToLoad,
-      search,
-      visibleNutrientTypes,
-      loadFilteredNutrientTypes,
-      loadMoreNutrientTypes,
-      tryLoadMoreNutrientTypes,
-      update,
-    };
-  },
+  const items = filteredNutrientTypes.value.slice(startIndex, endIndex);
+  visibleNutrientTypes.value.push(...items);
+}
+
+function loadFilteredNutrientTypes() {
+  filteredNutrientTypes.value = search.value
+    ? availableNutrientTypes.value.filter(
+      nutrient => !!nutrient.description.match(new RegExp(search.value, 'i')),
+    )
+    : [...availableNutrientTypes.value];
+
+  visibleNutrientTypes.value = [];
+  loadMoreNutrientTypes();
+}
+
+const nutrientTypesAvailableToLoad = computed(
+  () => visibleNutrientTypes.value.length < filteredNutrientTypes.value.length,
+);
 
-  methods: {
-    add(nutrientTypeId: string) {
-      this.currentNutrientTypeIds.push(nutrientTypeId);
+function tryLoadMoreNutrientTypes(isIntersecting: boolean) {
+  if (!isIntersecting || !nutrientTypesAvailableToLoad.value)
+    return;
 
-      this.loadFilteredNutrientTypes();
+  loadMoreNutrientTypes();
+}
 
-      this.update('nutrientTypes', this.currentNutrientTypeIds);
-    },
+function update(field: string, value: any) {
+  emit('update:modelValue', { ...props.modelValue, [field]: value });
+}
 
-    remove(index: number) {
-      this.currentNutrientTypeIds.splice(index, 1);
+function add(nutrientTypeId: string) {
+  currentNutrientTypeIds.value.push(nutrientTypeId);
 
-      this.loadFilteredNutrientTypes();
+  loadFilteredNutrientTypes();
 
-      this.update('nutrientTypes', this.currentNutrientTypeIds);
-    },
+  update('nutrientTypes', currentNutrientTypeIds.value);
+};
+
+function remove(index: number) {
+  currentNutrientTypeIds.value.splice(index, 1);
+
+  loadFilteredNutrientTypes();
+
+  update('nutrientTypes', currentNutrientTypeIds.value);
+};
+
+watch(
+  allNutrientTypes,
+  () => {
+    loadFilteredNutrientTypes();
   },
-});
+  { immediate: true },
+);
+
+watchDebounced(
+  search,
+  () => {
+    loadFilteredNutrientTypes();
+  },
+  { debounce: 500, maxWait: 1000 },
+);
 </script>
diff --git a/apps/admin/src/components/feedback/cards/partials/card-thresholds.vue b/apps/admin/src/components/feedback/cards/partials/card-thresholds.vue
index 199a24c1ba..16bc6a3dc6 100644
--- a/apps/admin/src/components/feedback/cards/partials/card-thresholds.vue
+++ b/apps/admin/src/components/feedback/cards/partials/card-thresholds.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="thresholds" value="thresholds">
+  <v-tabs-window-item key="thresholds" value="thresholds">
     <v-container>
       <v-row>
         <v-col v-for="(item, key) in { low, high }" :key="key" cols="12" md="6">
@@ -10,9 +10,9 @@
             <v-switch
               class="my-4"
               hide-details="auto"
-              :input-value="!!item"
               :label="$t('feedback-schemes.cards.thresholds.enabled')"
-              @change="toggleThreshold(key, $event)"
+              :model-value="!!item"
+              @update:model-value="toggleThreshold(key, $event)"
             />
             <template v-if="item">
               <v-slider
@@ -25,10 +25,11 @@
               />
               <language-selector
                 v-model="item.message"
-                :label="$t('feedback-schemes.cards.thresholds.message').toString()"
+                border
+                :label="$t('feedback-schemes.cards.thresholds.message')"
               >
-                <template v-for="lang in Object.keys(item.message)" #[`lang.${lang}`]>
-                  <html-editor :key="lang" v-model="item.message[lang]" />
+                <template v-for="lang in Object.keys(item.message)" :key="lang" #[`lang.${lang}`]>
+                  <html-editor v-model="item.message[lang]" />
                 </template>
               </language-selector>
             </template>
@@ -36,7 +37,7 @@
         </v-col>
       </v-row>
     </v-container>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/feedback/cards/partials/card-unit.vue b/apps/admin/src/components/feedback/cards/partials/card-unit.vue
index bc6672e60c..487f7ef3aa 100644
--- a/apps/admin/src/components/feedback/cards/partials/card-unit.vue
+++ b/apps/admin/src/components/feedback/cards/partials/card-unit.vue
@@ -1,29 +1,31 @@
 <template>
-  <v-tab-item key="unit" value="unit">
+  <v-tabs-window-item key="unit" value="unit">
     <language-selector
       v-model="internalUnit.name"
-      :label="$t('feedback-schemes.cards.unit.name').toString()"
+      border
+      class="mb-4"
+      :label="$t('feedback-schemes.cards.unit.name')"
     >
-      <template v-for="lang in Object.keys(internalUnit.name)" #[`lang.${lang}`]>
+      <template v-for="lang in Object.keys(internalUnit.name)" :key="lang" #[`lang.${lang}`]>
         <v-text-field
-          :key="lang"
           v-model="internalUnit.name[lang]"
           hide-details="auto"
           :label="$t('feedback-schemes.cards.unit.name')"
-          outlined
           :rules="nameRules"
+          variant="outlined"
         />
       </template>
     </language-selector>
     <language-selector
       v-model="internalUnit.description"
-      :label="$t('feedback-schemes.cards.unit.description').toString()"
+      border
+      :label="$t('feedback-schemes.cards.unit.description')"
     >
-      <template v-for="lang in Object.keys(internalUnit.description)" #[`lang.${lang}`]>
-        <html-editor :key="lang" v-model="internalUnit.description[lang]" />
+      <template v-for="lang in Object.keys(internalUnit.description)" :key="lang" #[`lang.${lang}`]>
+        <html-editor v-model="internalUnit.description[lang]" />
       </template>
     </language-selector>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
@@ -66,7 +68,7 @@ export default defineComponent({
       return this.nameRequired
         ? [
             (value: string | null): boolean | string =>
-              !!value || this.$t('feedback-schemes.cards.unit.required').toString(),
+              !!value || this.$t('feedback-schemes.cards.unit.required'),
           ]
         : [];
     },
diff --git a/apps/admin/src/components/feedback/cards/partials/character-sentiments.vue b/apps/admin/src/components/feedback/cards/partials/character-sentiments.vue
index 9f0b82ff50..dd20db0dc0 100644
--- a/apps/admin/src/components/feedback/cards/partials/character-sentiments.vue
+++ b/apps/admin/src/components/feedback/cards/partials/character-sentiments.vue
@@ -1,84 +1,79 @@
 <template>
-  <v-tabs vertical>
-    <v-btn class="my-4" color="secondary" @click="add">
-      <v-icon left>
-        $add
-      </v-icon>
-      {{ $t(`feedback-schemes.sentiments.add`) }}
-    </v-btn>
-    <v-tab v-for="(sentiment, index) in sentiments" :key="index">
-      <v-icon left>
-        fas fa-face-smile
-      </v-icon>
-      {{ `${$t(`feedback-schemes.sentiments._`)} ${index + 1}` }}
-    </v-tab>
-    <v-tab-item v-for="(sentiment, index) in sentiments" :key="index">
-      <v-card tile>
-        <v-card-title>
-          <v-icon left>
-            fas fa-face-smile
-          </v-icon>
-          {{ `${$t(`feedback-schemes.sentiments._`)} ${index + 1}` }}
-        </v-card-title>
-        <v-container fluid>
-          <v-row>
-            <v-col cols="12" md="6">
-              <v-select
-                v-model="sentiment.sentiment"
-                hide-details="auto"
-                :items="availableSentiments"
-                :label="$t('feedback-schemes.sentiments._')"
-                multiple
-                outlined
-              />
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-select
-                v-model="sentiment.sentimentType"
-                hide-details="auto"
-                :items="availableCharacterSentimentTypes"
-                :label="$t('feedback-schemes.characterSentimentTypes._')"
-                outlined
-              />
-            </v-col>
-            <v-col cols="12">
-              <language-selector v-model="sentiment.name" :label="$t('common.name').toString()">
-                <template v-for="lang in Object.keys(sentiment.name)" #[`lang.${lang}`]>
-                  <v-text-field
-                    :key="lang"
-                    v-model="sentiment.name[lang]"
-                    hide-details="auto"
-                    :label="$t('common.name')"
-                    outlined
-                  />
-                </template>
-              </language-selector>
-            </v-col>
-            <v-col cols="12">
-              <v-btn
-                block
-                color="error"
-                large
-                :title="$t(`feedback-schemes.sentiments.remove`)"
-                @click.stop="remove"
-              >
-                <v-icon left>
-                  $delete
-                </v-icon>
-                {{ $t(`feedback-schemes.sentiments.remove`) }}
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card>
-    </v-tab-item>
-  </v-tabs>
+  <div class="d-flex flex-row ga-2">
+    <v-tabs v-model="selectedSentiment" direction="vertical">
+      <v-btn class="mb-4" color="secondary" @click="add">
+        <v-icon icon="$add" start />
+        {{ $t(`feedback-schemes.sentiments.add`) }}
+      </v-btn>
+      <v-tab v-for="(sentiment, index) in sentiments" :key="index" :value="index">
+        <v-icon icon="fas fa-face-smile" start />
+        {{ `${$t(`feedback-schemes.sentiments._`)} ${index + 1}` }}
+      </v-tab>
+    </v-tabs>
+    <v-tabs-window v-model="selectedSentiment" class="flex-grow-1" vertical>
+      <v-tabs-window-item v-for="(sentiment, index) in sentiments" :key="index" :value="index">
+        <v-card border>
+          <v-card-title>
+            <v-icon icon="fas fa-face-smile" start />
+            {{ `${$t(`feedback-schemes.sentiments._`)} ${index + 1}` }}
+          </v-card-title>
+          <v-container fluid>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="sentiment.sentiment"
+                  hide-details="auto"
+                  :items="availableSentiments"
+                  :label="$t('feedback-schemes.sentiments._')"
+                  multiple
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="sentiment.sentimentType"
+                  hide-details="auto"
+                  :items="availableCharacterSentimentTypes"
+                  :label="$t('feedback-schemes.characterSentimentTypes._')"
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12">
+                <language-selector v-model="sentiment.name" :label="$t('common.name')">
+                  <template v-for="lang in Object.keys(sentiment.name)" :key="lang" #[`lang.${lang}`]>
+                    <v-text-field
+                      v-model="sentiment.name[lang]"
+                      hide-details="auto"
+                      :label="$t('common.name')"
+                      variant="outlined"
+                    />
+                  </template>
+                </language-selector>
+              </v-col>
+              <v-col cols="12">
+                <v-btn
+                  block
+                  color="error"
+                  size="large"
+                  :title="$t(`feedback-schemes.sentiments.remove`)"
+                  @click.stop="remove"
+                >
+                  <v-icon icon="$delete" start />
+                  {{ $t(`feedback-schemes.sentiments.remove`) }}
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card>
+      </v-tabs-window-item>
+    </v-tabs-window>
+  </div>
 </template>
 
 <script lang="ts">
 import type { PropType } from 'vue';
 import { deepEqual } from 'fast-equals';
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 
 import type { Character, CharacterSentiment } from '@intake24/common/feedback';
 import { LanguageSelector } from '@intake24/admin/components/forms';
@@ -97,25 +92,32 @@ export default defineComponent({
   components: { LanguageSelector },
 
   props: {
-    value: {
+    modelValue: {
       type: Array as PropType<Character['sentiments']>,
       required: true,
     },
   },
 
-  // TODO: check modelValue logic
-  emits: ['update:sentiments'],
+  emits: ['update:modelValue'],
+
+  setup() {
+    const selectedSentiment = ref(0);
+
+    return {
+      selectedSentiment,
+    };
+  },
 
   data() {
     return {
       characterSentimentDefaults,
-      sentiments: [...this.value],
+      sentiments: [...this.modelValue],
       availableSentiments: sentiments.map(value => ({
-        text: this.$t(`feedback-schemes.sentiments.${value}`),
+        title: this.$t(`feedback-schemes.sentiments.${value}`),
         value,
       })),
       availableCharacterSentimentTypes: characterSentimentTypes.map(value => ({
-        text: this.$t(`feedback-schemes.characterSentimentTypes.${value}`),
+        title: this.$t(`feedback-schemes.characterSentimentTypes.${value}`),
         value,
       })),
     };
@@ -146,7 +148,7 @@ export default defineComponent({
     },
 
     update() {
-      this.$emit('update:sentiments', this.sentiments);
+      this.$emit('update:modelValue', this.sentiments);
     },
   },
 });
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 8e7f239b19..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
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-toolbar color="grey lighten-5" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-4" flat tile>
+      <v-icon color="secondary" end>
         fas fa-people-arrows
       </v-icon>
       <v-toolbar-title class="font-weight-medium">
@@ -10,60 +10,56 @@
       <v-spacer />
       <v-btn
         color="primary"
-        fab
-        small
+        icon="$add"
+        size="small"
         :title="$t('feedback-schemes.demographic-groups.create')"
         @click.stop="add"
-      >
-        <v-icon small>
-          $add
-        </v-icon>
-      </v-btn>
+      />
       <options-menu>
         <select-resource
           resource="feedback-schemes"
           return-object="demographicGroups"
-          @input="load"
+          @update:model-value="load"
         >
-          <template #activator="{ attrs, on }">
-            <v-list-item v-bind="attrs" link v-on="on">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" link>
+              <template #prepend>
+                <v-icon icon="$download" />
+              </template>
               <v-list-item-title>
-                <v-icon left>
-                  $download
-                </v-icon>
                 {{ $t('feedback-schemes.load') }}
               </v-list-item-title>
             </v-list-item>
           </template>
         </select-resource>
-        <json-editor-dialog v-model="items" @input="update" />
+        <json-editor-dialog v-model="items" @update:model-value="update" />
       </options-menu>
     </v-toolbar>
-    <v-list two-line>
-      <draggable v-model="items" handle=".drag-and-drop__handle" @end="update">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(group, index) in items"
-            :key="group.id"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title class="font-weight-medium">
-                {{ getListItemTitle(group) }}
-              </v-list-item-title>
-            </v-list-item-content>
+    <v-list class="list-border" lines="two">
+      <vue-draggable
+        v-model="items"
+        :animation="300"
+        handle=".drag-and-drop__handle"
+        @end="update"
+      >
+        <v-list-item
+          v-for="(group, index) in items"
+          :key="group.id"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+          </template>
+          <v-list-item-title class="font-weight-medium">
+            {{ getListItemTitle(group) }}
+          </v-list-item-title>
+          <template #append>
             <v-list-item-action>
               <v-btn
                 icon
                 :title="$t('feedback-schemes.demographic-groups.edit')"
                 @click.stop="edit(index, group)"
               >
-                <v-icon color="secondary lighten-2">
+                <v-icon color="secondary-lighten-2">
                   $edit
                 </v-icon>
               </v-btn>
@@ -73,47 +69,41 @@
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('feedback-schemes.demographic-groups.remove').toString()"
+                :label="$t('feedback-schemes.demographic-groups.remove')"
                 @confirm="remove(index)"
               >
                 {{ $t('common.action.confirm.delete', { name: getListItemTitle(group) }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <v-dialog
       v-model="dialog.show"
       fullscreen
-      hide-overlay
       persistent
+      :scrim="false"
       transition="dialog-bottom-transition"
     >
       <v-card tile>
         <v-toolbar color="secondary" dark>
-          <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-            <v-icon>$cancel</v-icon>
-          </v-btn>
+          <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
           <v-toolbar-title>
-            <v-icon dark left>
-              fas fa-people-arrows
-            </v-icon>
+            <v-icon icon="fas fa-people-arrows" start />
             {{
               $t(`feedback-schemes.demographic-groups.${dialog.index === -1 ? 'create' : 'edit'}`)
             }}
           </v-toolbar-title>
           <v-spacer />
           <v-toolbar-items>
-            <v-btn dark text :title="$t('common.action.ok')" @click.stop="save">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn :title="$t('common.action.ok')" variant="text" @click.stop="save">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-toolbar-items>
           <template #extension>
             <v-container>
-              <v-tabs v-model="tab" background-color="secondary" dark>
+              <v-tabs v-model="tab" bg-color="secondary">
                 <v-tab v-for="item in ['general', 'sectors', 'json']" :key="item" :tab-value="item">
                   {{ $t(`feedback-schemes.demographic-groups.tabs.${item}`) }}
                 </v-tab>
@@ -123,8 +113,8 @@
         </v-toolbar>
         <v-form ref="form" @submit.prevent="save">
           <v-container>
-            <v-tabs-items v-model="tab" class="pt-1">
-              <v-tab-item key="general" value="general">
+            <v-tabs-window v-model="tab" class="pt-1">
+              <v-tabs-window-item key="general" value="general">
                 <v-container>
                   <v-row>
                     <v-col cols="12" md="6">
@@ -134,20 +124,20 @@
                         :items="cardTypes"
                         :label="$t('feedback-schemes.cards.type')"
                         name="type"
-                        outlined
+                        variant="outlined"
                       />
                     </v-col>
                     <v-col cols="12" md="6">
                       <v-autocomplete
                         v-model="dialog.item.nutrientTypeId"
                         hide-details="auto"
-                        item-text="description"
+                        item-title="description"
                         item-value="id"
                         :items="nutrientTypes"
                         :label="$t('nutrient-types._')"
                         name="nutrientTypeId"
-                        outlined
                         prepend-inner-icon="$nutrient-types"
+                        variant="outlined"
                       />
                     </v-col>
                     <v-col cols="12" md="6">
@@ -157,8 +147,8 @@
                         :items="nutrientRuleTypes"
                         :label="$t('feedback-schemes.nutrientRuleTypes._')"
                         name="nutrientRuleType"
-                        outlined
                         prepend-inner-icon="fas fa-divide"
+                        variant="outlined"
                       />
                     </v-col>
                     <v-col cols="12" md="6">
@@ -168,16 +158,20 @@
                         :items="sexes"
                         :label="$t('feedback-schemes.sexes._')"
                         name="sex"
-                        outlined
                         prepend-inner-icon="fas fa-genderless"
+                        variant="outlined"
                       >
-                        <template #item="{ item }">
-                          <span :class="`${item.icon} mr-3`" />
-                          {{ item.text }}
+                        <template #item="{ item, props }">
+                          <v-list-item v-bind="props">
+                            <template #prepend>
+                              <v-icon :icon="item.raw.icon" start />
+                            </template>
+                            <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                          </v-list-item>
                         </template>
                         <template #selection="{ item }">
-                          <span :class="`${item.icon} mr-3`" />
-                          {{ item.text }}
+                          <v-icon :icon="item.raw.icon" start />
+                          {{ item.raw.title }}
                         </template>
                       </v-select>
                     </v-col>
@@ -185,13 +179,13 @@
                       <v-select
                         v-model="dialog.item.physicalActivityLevelId"
                         hide-details="auto"
-                        item-text="name"
+                        item-title="name"
                         item-value="id"
                         :items="physicalActivityLevels"
                         :label="$t('feedback-schemes.physicalActivityLevels._')"
                         name="physicalActivityLevelId"
-                        outlined
                         prepend-inner-icon="fas fa-running"
+                        variant="outlined"
                       />
                     </v-col>
                     <v-col v-for="item in rangeType" :key="item" cols="12" md="6">
@@ -202,31 +196,27 @@
                     </v-col>
                   </v-row>
                 </v-container>
-              </v-tab-item>
-              <v-tab-item key="sectors" value="sectors">
+              </v-tabs-window-item>
+              <v-tabs-window-item key="sectors" value="sectors">
                 <v-container>
                   <demographic-group-sectors
                     v-model="dialog.item.scaleSectors"
                   />
                 </v-container>
-              </v-tab-item>
-              <v-tab-item key="json" value="json">
+              </v-tabs-window-item>
+              <v-tabs-window-item key="json" value="json">
                 <v-container>
                   <json-editor v-model="dialog.item" />
                 </v-container>
-              </v-tab-item>
-            </v-tabs-items>
+              </v-tabs-window-item>
+            </v-tabs-window>
             <v-card-actions>
-              <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-                <v-icon left>
-                  $cancel
-                </v-icon>{{ $t('common.action.cancel') }}
+              <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+                <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
               </v-btn>
               <v-spacer />
-              <v-btn class="font-weight-bold" color="info" text type="submit">
-                <v-icon left>
-                  $success
-                </v-icon>{{ $t('common.action.ok') }}
+              <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+                <v-icon icon="$success" start />{{ $t('common.action.ok') }}
               </v-btn>
             </v-card-actions>
           </v-container>
@@ -239,7 +229,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { computed, defineComponent, ref } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { NutrientTypeResponse } from '@intake24/common/types/http/admin';
 import type { PhysicalActivityLevelAttributes } from '@intake24/db';
@@ -260,13 +250,13 @@ export default defineComponent({
 
   components: {
     ConfirmDialog,
-    Draggable: draggable,
     DemographicGroupRange,
     DemographicGroupSectors,
     JsonEditor,
     JsonEditorDialog,
     OptionsMenu,
     SelectResource,
+    VueDraggable,
   },
 
   props: {
@@ -274,7 +264,7 @@ export default defineComponent({
       type: Array as PropType<NutrientTypeResponse[]>,
       default: () => [],
     },
-    value: {
+    modelValue: {
       type: Array as PropType<DemographicGroup[]>,
       required: true,
     },
@@ -290,7 +280,7 @@ export default defineComponent({
 
     const cardTypes = computed(() =>
       cardTypesRef.map(value => ({
-        text: i18n.t(`feedback-schemes.cards.${value}.title`).toString(),
+        title: i18n.t(`feedback-schemes.cards.${value}.title`),
         value,
       })),
     );
@@ -320,13 +310,13 @@ export default defineComponent({
   data() {
     return {
       nutrientRuleTypes: nutrientRuleTypes.map(value => ({
-        text: this.$t(`feedback-schemes.nutrientRuleTypes.${value}`),
+        title: this.$t(`feedback-schemes.nutrientRuleTypes.${value}`),
         value,
       })),
       sexes: [
-        { text: this.$t('common.not.selected'), value: null, icon: 'fas fa-genderless' },
+        { title: this.$t('common.not.selected'), value: null, icon: 'fas fa-genderless' },
         ...sexes.map(value => ({
-          text: this.$t(`feedback-schemes.sexes.${value}`),
+          title: this.$t(`feedback-schemes.sexes.${value}`),
           value,
           icon: value === 'm' ? 'fas fa-mars' : 'fas fa-venus',
         })),
diff --git a/apps/admin/src/components/feedback/demographic-groups/demographic-group-range.vue b/apps/admin/src/components/feedback/demographic-groups/demographic-group-range.vue
index bc13351e6a..efec229acc 100644
--- a/apps/admin/src/components/feedback/demographic-groups/demographic-group-range.vue
+++ b/apps/admin/src/components/feedback/demographic-groups/demographic-group-range.vue
@@ -4,31 +4,31 @@
       <v-switch
         class="my-4"
         hide-details="auto"
-        :input-value="!!value"
         :label="$t(`feedback-schemes.${type}._`)"
+        :model-value="!!modelValue"
         :prepend-inner-icon="getIcon(type)"
-        @change="toggleRange($event)"
+        @update:model-value="toggleRange($event)"
       />
     </v-col>
-    <v-col v-if="value" cols="12" md="6">
+    <v-col v-if="modelValue" cols="12" md="6">
       <v-text-field
         class="mb-4"
-        dense
+        density="compact"
         hide-details="auto"
         :label="$t('feedback-schemes.ranges.start')"
-        name="range.start"
-        outlined
-        :value="value.start"
-        @input="updateRange('start', $event)"
+        :model-value="modelValue.start"
+        :name="`${type}.range.start`"
+        variant="outlined"
+        @update:model-value="updateRange('start', $event)"
       />
       <v-text-field
-        dense
+        density="compact"
         hide-details="auto"
         :label="$t('feedback-schemes.ranges.end')"
-        name="range.end"
-        outlined
-        :value="value.end"
-        @input="updateRange('end', $event)"
+        :model-value="modelValue.end"
+        :name="`${type}.range.end`"
+        variant="outlined"
+        @update:model-value="updateRange('end', $event)"
       />
     </v-col>
   </v-row>
@@ -48,13 +48,13 @@ export default defineComponent({
       type: String as PropType<RangeType>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Object as PropType<Range | null>,
       default: null,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   data() {
     const defaultRange: Range = { start: 0, end: 0 };
@@ -74,13 +74,13 @@ export default defineComponent({
     },
 
     toggleRange(value: boolean) {
-      this.$emit('input', value ? this.defaultRange : null);
+      this.$emit('update:modelValue', value ? this.defaultRange : null);
     },
 
     updateRange(field: keyof Range, value: string) {
-      const range = { ...(this.value ?? this.defaultRange), [field]: Number.parseFloat(value) };
+      const range = { ...(this.modelValue ?? this.defaultRange), [field]: Number.parseFloat(value) };
 
-      this.$emit('input', range);
+      this.$emit('update:modelValue', range);
     },
   },
 });
diff --git a/apps/admin/src/components/feedback/demographic-groups/demographic-group-sectors.vue b/apps/admin/src/components/feedback/demographic-groups/demographic-group-sectors.vue
index 08f943a5c7..ffa6b58b03 100644
--- a/apps/admin/src/components/feedback/demographic-groups/demographic-group-sectors.vue
+++ b/apps/admin/src/components/feedback/demographic-groups/demographic-group-sectors.vue
@@ -1,133 +1,129 @@
 <template>
-  <v-tabs vertical>
-    <v-btn class="my-4" color="secondary" @click="add">
-      <v-icon left>
-        $add
-      </v-icon>
-      {{ $t(`feedback-schemes.demographic-groups.sectors.add`) }}
-    </v-btn>
-    <v-tab v-for="(sector, index) in sectors" :key="index">
-      <v-icon left>
-        fas fa-scale-balanced
-      </v-icon>
-      {{ `${$t(`feedback-schemes.demographic-groups.sectors._`)} ${index + 1}` }}
-    </v-tab>
-    <v-tab-item v-for="(sector, index) in sectors" :key="index">
-      <v-card tile>
-        <v-card-title>
-          <v-icon left>
-            fas fa-scale-balanced
-          </v-icon>
-          {{ `${$t(`feedback-schemes.demographic-groups.sectors._`)} ${index + 1}` }}
-        </v-card-title>
-        <v-container fluid>
-          <v-row>
-            <v-col cols="12" lg="4" md="6">
-              <v-select
-                v-model="sector.sentiment"
-                hide-details="auto"
-                :items="sentiments"
-                :label="$t('feedback-schemes.sentiments._')"
-                outlined
-              />
-            </v-col>
-            <v-col cols="12" lg="4" md="6">
-              <v-select
-                v-model="sector.intake"
-                hide-details="auto"
-                :items="intakes"
-                :label="$t('feedback-schemes.demographic-groups.intake')"
-                multiple
-                outlined
-              />
-            </v-col>
-            <v-col class="d-flex justify-end" cols="12" lg="4" md="6">
-              <div class="mr-4 subtitle-1">
-                <v-icon left>
-                  fas fa-left-right
-                </v-icon>
-                {{ $t('feedback-schemes.ranges._') }}
-              </div>
-              <div>
-                <v-text-field
-                  v-model.number="sector.range.start"
-                  class="mb-4"
-                  dense
+  <div class="d-flex flex-row ga-2">
+    <v-tabs v-model="selectedSector" direction="vertical">
+      <v-btn class="my-4" color="secondary" @click="add">
+        <v-icon icon="$add" start />
+        {{ $t(`feedback-schemes.demographic-groups.sectors.add`) }}
+      </v-btn>
+      <v-tab v-for="(sector, index) in sectors" :key="index">
+        <v-icon icon="fas fa-scale-balanced" start />
+        {{ `${$t(`feedback-schemes.demographic-groups.sectors._`)} ${index + 1}` }}
+      </v-tab>
+    </v-tabs>
+    <v-tabs-window v-model="selectedSector" class="flex-grow-1">
+      <v-tabs-window-item v-for="(sector, index) in sectors" :key="index">
+        <v-card tile>
+          <v-card-title>
+            <v-icon icon="fas fa-scale-balanced" start />
+            {{ `${$t(`feedback-schemes.demographic-groups.sectors._`)} ${index + 1}` }}
+          </v-card-title>
+          <v-container fluid>
+            <v-row>
+              <v-col cols="12" lg="4" md="6">
+                <v-select
+                  v-model="sector.sentiment"
                   hide-details="auto"
-                  :label="$t('feedback-schemes.ranges.start')"
-                  outlined
+                  :items="sentiments"
+                  :label="$t('feedback-schemes.sentiments._')"
+                  variant="outlined"
                 />
-                <v-text-field
-                  v-model.number="sector.range.end"
-                  dense
+              </v-col>
+              <v-col cols="12" lg="4" md="6">
+                <v-select
+                  v-model="sector.intake"
                   hide-details="auto"
-                  :label="$t('feedback-schemes.ranges.end')"
-                  outlined
+                  :items="intakes"
+                  :label="$t('feedback-schemes.demographic-groups.intake')"
+                  multiple
+                  variant="outlined"
                 />
-              </div>
-            </v-col>
-            <v-col cols="12">
-              <language-selector
-                v-model="sector.name"
-                :label="$t('feedback-schemes.demographic-groups.name').toString()"
-              >
-                <template v-for="lang in Object.keys(sector.name)" #[`lang.${lang}`]>
+              </v-col>
+              <v-col class="d-flex justify-end" cols="12" lg="4" md="6">
+                <div class="mr-4 text-subtitle-1">
+                  <v-icon icon="fas fa-left-right" start />
+                  {{ $t('feedback-schemes.ranges._') }}
+                </div>
+                <div>
                   <v-text-field
-                    :key="lang"
-                    v-model="sector.name[lang]"
+                    v-model.number="sector.range.start"
+                    class="mb-4"
+                    density="compact"
                     hide-details="auto"
-                    :label="$t('feedback-schemes.demographic-groups.name')"
-                    outlined
-                    :rules="nameRules"
+                    :label="$t('feedback-schemes.ranges.start')"
+                    variant="outlined"
                   />
-                </template>
-              </language-selector>
-            </v-col>
-            <v-col cols="12">
-              <language-selector
-                v-model="sector.summary"
-                :label="$t('feedback-schemes.demographic-groups.summary').toString()"
-              >
-                <template v-for="lang in Object.keys(sector.summary)" #[`lang.${lang}`]>
-                  <html-editor :key="lang" v-model="sector.summary[lang]" />
-                </template>
-              </language-selector>
-            </v-col>
-            <v-col cols="12">
-              <language-selector
-                v-model="sector.description"
-                :label="$t('feedback-schemes.demographic-groups.description').toString()"
-              >
-                <template v-for="lang in Object.keys(sector.description)" #[`lang.${lang}`]>
-                  <html-editor :key="lang" v-model="sector.description[lang]" />
-                </template>
-              </language-selector>
-            </v-col>
-            <v-col cols="12">
-              <v-btn
-                block
-                color="error"
-                large
-                :title="$t(`feedback-schemes.demographic-groups.sectors.remove`)"
-                @click.stop="remove"
-              >
-                <v-icon left>
-                  $delete
-                </v-icon>
-                {{ $t(`feedback-schemes.demographic-groups.sectors.remove`) }}
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card>
-    </v-tab-item>
-  </v-tabs>
+                  <v-text-field
+                    v-model.number="sector.range.end"
+                    density="compact"
+                    hide-details="auto"
+                    :label="$t('feedback-schemes.ranges.end')"
+                    variant="outlined"
+                  />
+                </div>
+              </v-col>
+              <v-col cols="12">
+                <language-selector
+                  v-model="sector.name"
+                  border
+                  :label="$t('feedback-schemes.demographic-groups.name')"
+                >
+                  <template v-for="lang in Object.keys(sector.name)" :key="lang" #[`lang.${lang}`]>
+                    <v-text-field
+                      v-model="sector.name[lang]"
+                      hide-details="auto"
+                      :label="$t('feedback-schemes.demographic-groups.name')"
+                      :rules="nameRules"
+                      variant="outlined"
+                    />
+                  </template>
+                </language-selector>
+              </v-col>
+              <v-col cols="12">
+                <language-selector
+                  v-model="sector.summary"
+                  border
+                  :label="$t('feedback-schemes.demographic-groups.summary')"
+                >
+                  <template v-for="lang in Object.keys(sector.summary)" :key="lang" #[`lang.${lang}`]>
+                    <html-editor v-model="sector.summary[lang]" />
+                  </template>
+                </language-selector>
+              </v-col>
+              <v-col cols="12">
+                <language-selector
+                  v-model="sector.description"
+                  border
+                  :label="$t('feedback-schemes.demographic-groups.description')"
+                >
+                  <template v-for="lang in Object.keys(sector.description)" :key="lang" #[`lang.${lang}`]>
+                    <html-editor v-model="sector.description[lang]" />
+                  </template>
+                </language-selector>
+              </v-col>
+              <v-col cols="12">
+                <v-btn
+                  block
+                  color="error"
+                  size="large"
+                  :title="$t(`feedback-schemes.demographic-groups.sectors.remove`)"
+                  @click.stop="remove"
+                >
+                  <v-icon icon="$delete" start />
+                  {{ $t(`feedback-schemes.demographic-groups.sectors.remove`) }}
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card>
+      </v-tabs-window-item>
+    </v-tabs-window>
+  </div>
 </template>
 
 <script lang="ts">
 import type { PropType } from 'vue';
 import { deepEqual } from 'fast-equals';
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 
 import type { RuleCallback } from '@intake24/admin/types';
 import type { DemographicGroupScaleSector } from '@intake24/common/feedback';
@@ -142,24 +138,32 @@ export default defineComponent({
   components: { HtmlEditor, LanguageSelector },
 
   props: {
-    value: {
+    modelValue: {
       type: Array as PropType<DemographicGroupScaleSector[]>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
+
+  setup() {
+    const selectedSector = ref(0);
+
+    return {
+      selectedSector,
+    };
+  },
 
   data() {
     return {
       demographicGroupScaleSectorDefaults,
-      sectors: this.value,
+      sectors: this.modelValue,
       intakes: ['summary', 'description'].map(value => ({
-        text: this.$t(`feedback-schemes.demographic-groups.${value}`),
+        title: this.$t(`feedback-schemes.demographic-groups.${value}`),
         value,
       })),
       sentiments: sentiments.map(value => ({
-        text: this.$t(`feedback-schemes.sentiments.${value}`),
+        title: this.$t(`feedback-schemes.sentiments.${value}`),
         value,
       })),
     };
@@ -169,7 +173,7 @@ export default defineComponent({
     nameRules(): RuleCallback[] {
       return [
         (value: string | null): boolean | string =>
-          !!value || this.$t('feedback-schemes.demographic-groups.required').toString(),
+          !!value || this.$t('feedback-schemes.demographic-groups.required'),
       ];
     },
   },
@@ -199,7 +203,7 @@ export default defineComponent({
     },
 
     update() {
-      this.$emit('input', this.sectors);
+      this.$emit('update:modelValue', this.sectors);
     },
   },
 });
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 2d76433ae1..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
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-toolbar color="grey lighten-5" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-4" flat tile>
+      <v-icon color="secondary" end>
         fas fa-square-root-alt
       </v-icon>
       <v-toolbar-title class="font-weight-medium">
@@ -10,63 +10,57 @@
       <v-spacer />
       <v-btn
         color="primary"
-        fab
-        small
+        icon="$add"
+        size="small"
         :title="$t('feedback-schemes.henry-coefficients.create')"
         @click.stop="add"
-      >
-        <v-icon small>
-          $add
-        </v-icon>
-      </v-btn>
+      />
       <options-menu>
         <select-resource
           resource="feedback-schemes"
           return-object="henryCoefficients"
-          @input="load"
+          @update:model-value="load"
         >
-          <template #activator="{ attrs, on }">
-            <v-list-item v-bind="attrs" link v-on="on">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" link>
+              <template #prepend>
+                <v-icon icon="$download" />
+              </template>
               <v-list-item-title>
-                <v-icon left>
-                  $download
-                </v-icon>
                 {{ $t('feedback-schemes.load') }}
               </v-list-item-title>
             </v-list-item>
           </template>
         </select-resource>
-        <json-editor-dialog v-model="items" @input="update" />
+        <json-editor-dialog v-model="items" @update:model-value="update" />
       </options-menu>
     </v-toolbar>
-    <v-list two-line>
-      <draggable v-model="items" handle=".drag-and-drop__handle" @end="update">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(coefficient, index) in items"
-            :key="coefficient.id"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-icon class="my-auto">
-              <v-icon>{{ getListItemIcon(coefficient) }}</v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-item-title class="font-weight-medium">
-                {{ getListItemTitle(coefficient) }}
-              </v-list-item-title>
-            </v-list-item-content>
+    <v-list class="list-border" lines="two">
+      <vue-draggable
+        v-model="items"
+        :animation="300"
+        handle=".drag-and-drop__handle"
+        @end="update"
+      >
+        <v-list-item
+          v-for="(coefficient, index) in items"
+          :key="coefficient.id"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+            <v-icon>{{ getListItemIcon(coefficient) }}</v-icon>
+          </template>
+          <v-list-item-title class="font-weight-medium">
+            {{ getListItemTitle(coefficient) }}
+          </v-list-item-title>
+          <template #append>
             <v-list-item-action>
               <v-btn
                 icon
                 :title="$t('feedback-schemes.henry-coefficients.edit')"
                 @click.stop="edit(index, coefficient)"
               >
-                <v-icon color="secondary lighten-2">
+                <v-icon color="secondary-lighten-2">
                   $edit
                 </v-icon>
               </v-btn>
@@ -76,27 +70,25 @@
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('feedback-schemes.henry-coefficients.remove').toString()"
+                :label="$t('feedback-schemes.henry-coefficients.remove')"
                 @confirm="remove(index)"
               >
                 {{ $t('common.action.confirm.delete', { name: getListItemTitle(coefficient) }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <v-dialog
       v-model="dialog.show"
-      :fullscreen="$vuetify.breakpoint.smAndDown"
+      :fullscreen="$vuetify.display.smAndDown"
       max-width="600px"
       persistent
     >
-      <v-card :tile="$vuetify.breakpoint.smAndDown">
+      <v-card :tile="$vuetify.display.smAndDown">
         <v-toolbar color="secondary" dark flat>
-          <v-icon dark left>
-            fas fa-square-root-alt
-          </v-icon>
+          <v-icon icon="fas fa-square-root-alt" start />
           <v-toolbar-title>
             {{
               $t(`feedback-schemes.henry-coefficients.${dialog.index === -1 ? 'create' : 'edit'}`)
@@ -115,15 +107,19 @@
                     :items="sexes"
                     :label="$t('feedback-schemes.sexes._')"
                     name="sex"
-                    outlined
+                    variant="outlined"
                   >
-                    <template #item="{ item }">
-                      <span :class="`${item.icon} mr-3`" />
-                      {{ item.text }}
+                    <template #item="{ item, props }">
+                      <v-list-item v-bind="props">
+                        <template #prepend>
+                          <v-icon :icon="item.raw.icon" start />
+                        </template>
+                        <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                      </v-list-item>
                     </template>
                     <template #selection="{ item }">
-                      <span :class="`${item.icon} mr-3`" />
-                      {{ item.text }}
+                      <v-icon :icon="item.raw.icon" start />
+                      {{ item.raw.title }}
                     </template>
                   </v-select>
                 </v-col>
@@ -138,7 +134,7 @@
                     hide-details="auto"
                     :label="$t('feedback-schemes.age.start')"
                     name="age.start"
-                    outlined
+                    variant="outlined"
                   />
                 </v-col>
                 <v-col cols="12" md="6">
@@ -147,7 +143,7 @@
                     hide-details="auto"
                     :label="$t('feedback-schemes.age.end')"
                     name="age.end"
-                    outlined
+                    variant="outlined"
                   />
                 </v-col>
                 <v-col cols="12" md="6">
@@ -156,7 +152,7 @@
                     hide-details="auto"
                     :label="$t('feedback-schemes.henry-coefficients.weightCoefficient')"
                     name="weightCoefficient"
-                    outlined
+                    variant="outlined"
                   />
                 </v-col>
                 <v-col cols="12" md="6">
@@ -165,7 +161,7 @@
                     hide-details="auto"
                     :label="$t('feedback-schemes.henry-coefficients.heightCoefficient')"
                     name="heightCoefficient"
-                    outlined
+                    variant="outlined"
                   />
                 </v-col>
                 <v-col cols="12" md="6">
@@ -174,23 +170,19 @@
                     hide-details="auto"
                     :label="$t('feedback-schemes.henry-coefficients.constant')"
                     name="constant"
-                    outlined
+                    variant="outlined"
                   />
                 </v-col>
               </v-row>
             </v-container>
           </v-card-text>
           <v-card-actions>
-            <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-              <v-icon left>
-                $cancel
-              </v-icon>{{ $t('common.action.cancel') }}
+            <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+              <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
             </v-btn>
             <v-spacer />
-            <v-btn class="font-weight-bold" color="info" text type="submit">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-card-actions>
         </v-form>
@@ -202,7 +194,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { HenryCoefficient, Sex } from '@intake24/common/feedback';
 import { OptionsMenu, SelectResource } from '@intake24/admin/components/dialogs';
@@ -216,10 +208,10 @@ import { getHenryCoefficientDefaults } from './henry-coefficient';
 export default defineComponent({
   name: 'HenryCoefficientList',
 
-  components: { ConfirmDialog, Draggable: draggable, JsonEditorDialog, OptionsMenu, SelectResource },
+  components: { ConfirmDialog, JsonEditorDialog, OptionsMenu, SelectResource, VueDraggable },
 
   props: {
-    value: {
+    modelValue: {
       type: Array as PropType<HenryCoefficient[]>,
       required: true,
     },
@@ -235,7 +227,7 @@ export default defineComponent({
   data() {
     return {
       sexes: sexes.map(value => ({
-        text: this.$t(`feedback-schemes.sexes.${value}`),
+        title: this.$t(`feedback-schemes.sexes.${value}`),
         value,
         icon: value === 'm' ? 'fas fa-mars' : 'fas fa-venus',
       })),
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 f490a6f654..e646446291 100644
--- a/apps/admin/src/components/feedback/meals/table-field-list.vue
+++ b/apps/admin/src/components/feedback/meals/table-field-list.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-toolbar color="grey lighten-5" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-4" flat tile>
+      <v-icon color="secondary" end>
         fas fa-table-list
       </v-icon>
       <v-toolbar-title class="font-weight-medium">
@@ -10,63 +10,54 @@
       <v-spacer />
       <v-btn
         color="primary"
-        fab
-        small
+        icon="$add"
+        size="small"
         :title="$t('feedback-schemes.meals.fields.create')"
         @click.stop="add"
-      >
-        <v-icon small>
-          $add
-        </v-icon>
-      </v-btn>
+      />
       <confirm-dialog
         color="error"
-        :label="$t('feedback-schemes.meals.fields.reset._').toString()"
+        :label="$t('feedback-schemes.meals.fields.reset._')"
         @confirm="resetList"
       >
-        <template #activator="{ attrs, on }">
+        <template #activator="{ props }">
           <v-btn
             class="ml-3"
             color="error"
-            fab
-            small
+            icon="$sync"
+            size="small"
             :title="$t('feedback-schemes.meals.fields.reset._')"
-            v-bind="attrs"
-            v-on="on"
-          >
-            <v-icon small>
-              $sync
-            </v-icon>
-          </v-btn>
+            v-bind="props"
+          />
         </template>
         {{ $t('feedback-schemes.meals.fields.reset.text') }}
       </confirm-dialog>
     </v-toolbar>
-    <v-list two-line>
-      <draggable v-model="items" handle=".drag-and-drop__handle" @end="update">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(item, index) in items"
-            :key="item.fieldId"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title class="font-weight-medium">
-                {{ item.header.en }}
-              </v-list-item-title>
-            </v-list-item-content>
+    <v-list class="list-border" lines="two">
+      <vue-draggable
+        v-model="items"
+        :animation="300"
+        handle=".drag-and-drop__handle"
+        @end="update"
+      >
+        <v-list-item
+          v-for="(item, index) in items"
+          :key="item.fieldId"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+          </template>
+          <v-list-item-title class="font-weight-medium">
+            {{ item.header.en }}
+          </v-list-item-title>
+          <template #append>
             <v-list-item-action>
               <v-btn
                 icon
                 :title="$t('feedback-schemes.meals.fields.edit')"
                 @click.stop="edit(index, item)"
               >
-                <v-icon color="secondary lighten-2">
+                <v-icon color="secondary-lighten-2">
                   $edit
                 </v-icon>
               </v-btn>
@@ -76,40 +67,34 @@
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('feedback-schemes.meals.fields.remove').toString()"
+                :label="$t('feedback-schemes.meals.fields.remove')"
                 @confirm="remove(index)"
               >
                 {{ $t('common.action.confirm.delete', { name: item.header.en }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <v-dialog
       v-model="dialog.show"
       fullscreen
-      hide-overlay
       persistent
+      :scrim="false"
       transition="dialog-bottom-transition"
     >
       <v-card tile>
         <v-toolbar color="secondary" dark>
-          <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-            <v-icon>$cancel</v-icon>
-          </v-btn>
+          <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
           <v-toolbar-title>
-            <v-icon dark left>
-              fas fa-table-list
-            </v-icon>
+            <v-icon icon="fas fa-table-list" start />
             {{ $t(`feedback-schemes.meals.fields.${dialog.index === -1 ? 'create' : 'edit'}`) }}
           </v-toolbar-title>
           <v-spacer />
           <v-toolbar-items>
-            <v-btn dark text :title="$t('common.action.ok')" @click.stop="save">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn :title="$t('common.action.ok')" variant="text" @click.stop="save">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-toolbar-items>
         </v-toolbar>
@@ -124,8 +109,8 @@
                     :items="tableFieldTypes"
                     :label="$t('feedback-schemes.meals.fields.types._')"
                     name="type"
-                    outlined
-                    @change="updateProps"
+                    variant="outlined"
+                    @update:model-value="updateProps"
                   />
                 </v-col>
                 <v-col cols="12" md="6">
@@ -133,16 +118,16 @@
                     <v-autocomplete
                       v-model="dialog.item.types"
                       hide-details="auto"
-                      item-text="description"
+                      item-title="description"
                       item-value="id"
                       :items="nutrientTypes"
                       :label="$t('nutrient-types.title')"
                       multiple
                       name="nutrientTypeId"
-                      outlined
                       prepend-inner-icon="$nutrient-types"
                       :rules="nutrientRules"
-                      @change="updateNutrientFields"
+                      variant="outlined"
+                      @update:model-value="updateNutrientFields"
                     />
                   </template>
                   <v-select
@@ -152,8 +137,8 @@
                     :items="tableFieldStandardIds"
                     :label="$t('feedback-schemes.meals.fields.id')"
                     name="fieldId"
-                    outlined
                     :rules="fieldIdRules"
+                    variant="outlined"
                   />
                   <v-text-field
                     v-else
@@ -161,45 +146,43 @@
                     :disabled="dialog.item.type === 'nutrient'"
                     hide-details="auto"
                     :label="$t('feedback-schemes.meals.fields.id')"
-                    outlined
                     :rules="fieldIdRules"
+                    variant="outlined"
                   />
                 </v-col>
                 <v-col cols="12" md="6">
-                  <v-card outlined>
+                  <v-card border>
                     <language-selector
                       v-model="dialog.item.header"
-                      :label="$t('feedback-schemes.meals.fields.header').toString()"
+                      :label="$t('feedback-schemes.meals.fields.header')"
                       :outlined="false"
                       required
                     >
-                      <template v-for="lang in Object.keys(dialog.item.header)" #[`lang.${lang}`]>
+                      <template v-for="lang in Object.keys(dialog.item.header)" :key="lang" #[`lang.${lang}`]>
                         <v-text-field
-                          :key="lang"
                           v-model="dialog.item.header[lang]"
                           hide-details="auto"
                           :label="$t('feedback-schemes.meals.fields.header')"
-                          outlined
+                          variant="outlined"
                         />
                       </template>
                     </language-selector>
                   </v-card>
                 </v-col>
                 <v-col cols="12" md="6">
-                  <v-card outlined>
+                  <v-card border>
                     <language-selector
                       v-model="dialog.item.value"
-                      :label="$t('feedback-schemes.meals.fields.value').toString()"
+                      :label="$t('feedback-schemes.meals.fields.value')"
                       :outlined="false"
                       required
                     >
-                      <template v-for="lang in Object.keys(dialog.item.value)" #[`lang.${lang}`]>
+                      <template v-for="lang in Object.keys(dialog.item.value)" :key="lang" #[`lang.${lang}`]>
                         <v-text-field
-                          :key="lang"
                           v-model="dialog.item.value[lang]"
                           hide-details="auto"
                           :label="$t('feedback-schemes.meals.fields.value')"
-                          outlined
+                          variant="outlined"
                         />
                       </template>
                     </language-selector>
@@ -208,16 +191,12 @@
               </v-row>
             </v-container>
             <v-card-actions>
-              <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-                <v-icon left>
-                  $cancel
-                </v-icon>{{ $t('common.action.cancel') }}
+              <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+                <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
               </v-btn>
               <v-spacer />
-              <v-btn class="font-weight-bold" color="info" text type="submit">
-                <v-icon left>
-                  $success
-                </v-icon>{{ $t('common.action.ok') }}
+              <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+                <v-icon icon="$success" start />{{ $t('common.action.ok') }}
               </v-btn>
             </v-card-actions>
           </v-container>
@@ -230,7 +209,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { computed, defineComponent, ref } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { MealTableField } from '@intake24/common/feedback';
 import type { NutrientTypeResponse } from '@intake24/common/types/http/admin';
@@ -245,7 +224,7 @@ import { getTableFieldDefaults } from './table-field';
 export default defineComponent({
   name: 'TableFieldList',
 
-  components: { ConfirmDialog, Draggable: draggable, LanguageSelector },
+  components: { ConfirmDialog, LanguageSelector, VueDraggable },
 
   props: {
     nutrientTypes: {
@@ -256,7 +235,7 @@ export default defineComponent({
       type: Array as PropType<MealTableField[]>,
       default: () => [],
     },
-    value: {
+    modelValue: {
       type: Array as PropType<MealTableField[]>,
       required: true,
     },
@@ -283,19 +262,19 @@ export default defineComponent({
     const tab = ref(0);
 
     const tableFieldTypes = mealTableFieldTypes.map(value => ({
-      text: i18n.t(`feedback-schemes.meals.fields.types.${value}`),
+      title: i18n.t(`feedback-schemes.meals.fields.types.${value}`),
       value,
     }));
 
     const tableFieldStandardIds = mealTableFieldStandardIds.map(value => ({
-      text: i18n.t(`feedback-schemes.meals.fields.types.${value}`),
+      title: i18n.t(`feedback-schemes.meals.fields.types.${value}`),
       value,
     }));
 
     const fieldIdRules = computed(() => [
       (value: string | null): boolean | string => {
         if (!value)
-          return i18n.t('feedback-schemes.meals.fields.validation.required').toString();
+          return i18n.t('feedback-schemes.meals.fields.validation.required');
 
         const {
           index,
@@ -305,14 +284,14 @@ export default defineComponent({
           (item, idx) => item.type === type && item.fieldId === fieldId && index !== idx,
         );
 
-        return match ? i18n.t('feedback-schemes.meals.fields.validation.unique').toString() : true;
+        return match ? i18n.t('feedback-schemes.meals.fields.validation.unique') : true;
       },
     ]);
 
     const nutrientRules = computed(() => [
       (value: string[]): boolean | string => {
         if (!value.length)
-          return i18n.t('nutrient-types.validation.required').toString();
+          return i18n.t('nutrient-types.validation.required');
 
         const { index } = dialog.value;
         const match = items.value.find(
@@ -322,7 +301,7 @@ export default defineComponent({
             && index !== idx,
         );
 
-        return match ? i18n.t('nutrient-types.validation.unique').toString() : true;
+        return match ? i18n.t('nutrient-types.validation.unique') : true;
       },
     ]);
 
diff --git a/apps/admin/src/components/feedback/preview/preview.vue b/apps/admin/src/components/feedback/preview/preview.vue
index 333dae820b..ddc906f5c5 100644
--- a/apps/admin/src/components/feedback/preview/preview.vue
+++ b/apps/admin/src/components/feedback/preview/preview.vue
@@ -1,26 +1,21 @@
 <template>
-  <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
-    <template #activator="{ attrs, on }">
-      <slot name="activator" v-bind="{ on, attrs }">
+  <v-dialog v-model="dialog" fullscreen :scrim="false" transition="dialog-bottom-transition">
+    <template #activator="{ props }">
+      <slot name="activator" v-bind="props">
         <v-btn
-          v-bind="attrs"
           class="ml-3"
           color="secondary"
           :title="$t('feedback-schemes.preview.title')"
-          v-on="on"
+          v-bind="props"
         >
-          <v-icon left>
-            $search
-          </v-icon>
+          <v-icon icon="$search" start />
           {{ $t('feedback-schemes.preview._') }}
         </v-btn>
       </slot>
     </template>
     <v-card tile>
       <v-toolbar color="secondary" dark>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>{{ $t('feedback-schemes.preview.title') }}</v-toolbar-title>
       </v-toolbar>
       <v-container class="pa-0" fluid>
diff --git a/apps/admin/src/components/forms/auto-complete.vue b/apps/admin/src/components/forms/auto-complete.vue
index 4075394f1d..40e1770f6b 100644
--- a/apps/admin/src/components/forms/auto-complete.vue
+++ b/apps/admin/src/components/forms/auto-complete.vue
@@ -14,19 +14,20 @@
       loading: isLoading,
       outlined,
       prependIcon,
-      value,
+      modelValue,
     }"
-    :search-input.sync="search"
-    @input="input($event)"
+    v-model:search="search"
+    @update:model-value="input($event)"
   />
 </template>
 
 <script lang="ts">
 import type { PropType } from 'vue';
-import debounce from 'lodash/debounce';
-import { defineComponent } from 'vue';
+import { watchDebounced } from '@vueuse/core';
+import { defineComponent, ref, watch } from 'vue';
 
 import type { Dictionary } from '@intake24/common/types';
+import { useHttp } from '@intake24/admin/services';
 
 export default defineComponent({
   name: 'AutoComplete',
@@ -41,7 +42,7 @@ export default defineComponent({
       default: false,
     },
     hideDetails: {
-      type: String,
+      type: String as PropType<'auto' | boolean | undefined>,
       default: 'auto',
     },
     hideNoData: {
@@ -76,7 +77,7 @@ export default defineComponent({
     prependIcon: {
       type: String,
     },
-    value: {
+    modelValue: {
       type: String as PropType<string | null>,
     },
     selected: {
@@ -87,74 +88,64 @@ export default defineComponent({
     },
   },
 
-  emits: ['input', 'update:object'],
+  emits: ['update:modelValue', 'update:object'],
 
-  data() {
-    const items: Dictionary[] = [];
+  setup(props, { emit }) {
+    const http = useHttp();
 
-    if (this.selected)
-      items.push(this.selected);
+    const isLoading = ref(false);
+    const search = ref<string | undefined>(undefined);
+    const items = ref<Dictionary[]>([]);
 
-    return {
-      isLoading: false,
-      items,
-      search: null as string | null,
-    };
-  },
-
-  watch: {
-    search(val) {
-      if (!val)
-        return;
+    if (props.selected)
+      items.value.push(props.selected);
 
-      // @ts-expect-error debounced
-      this.debouncedFetchItems();
-    },
-    selected(val) {
-      if (!val)
-        return;
+    function input(value: any) {
+      const object = items.value.find(item => item[props.itemValue] === value);
+      emit('update:modelValue', value);
+      emit('update:object', object);
+    };
 
-      this.items = [val];
-    },
-  },
+    function resolveResponseObject(data: any) {
+      if (!props.responseObject)
+        return data;
 
-  created() {
-    this.debouncedFetchItems = debounce(() => {
-      this.fetchItems();
-    }, 500);
-  },
+      const segments = props.responseObject.split('.');
+      return segments.reduce((acc, segment) => acc[segment], data);
+    };
 
-  methods: {
-    async fetchItems() {
-      if (this.isLoading)
+    async function fetchItems() {
+      if (isLoading.value)
         return;
 
-      this.isLoading = true;
-      const { search } = this;
+      isLoading.value = true;
 
       try {
-        const { data } = await this.$http.get(this.api, { params: { search } });
+        const { data } = await http.get(props.api, { params: { search: search.value } });
 
-        this.items = this.resolveResponseObject(data);
+        items.value = resolveResponseObject(data);
       }
       finally {
-        this.isLoading = false;
+        isLoading.value = false;
       }
-    },
+    };
 
-    input(value: any) {
-      const object = this.items.find(item => item[this.itemValue] === value);
-      this.$emit('input', value);
-      this.$emit('update:object', object);
-    },
+    watchDebounced(
+      search,
+      () => {
+        fetchItems();
+      },
+      { debounce: 500, maxWait: 2000 },
+    );
 
-    resolveResponseObject(data: any) {
-      if (!this.responseObject)
-        return data;
+    watch(() => props.selected, (val) => {
+      if (!val)
+        return;
 
-      const segments = this.responseObject.split('.');
-      return segments.reduce((acc, segment) => acc[segment], data);
-    },
+      items.value = [val];
+    });
+
+    return { isLoading, input, items, search };
   },
 });
 </script>
diff --git a/apps/admin/src/components/forms/date-picker.vue b/apps/admin/src/components/forms/date-picker.vue
index 99deefed0a..20026fac00 100644
--- a/apps/admin/src/components/forms/date-picker.vue
+++ b/apps/admin/src/components/forms/date-picker.vue
@@ -1,97 +1,91 @@
 <template>
-  <v-dialog ref="menu" v-model="dialog" persistent :return-value.sync="internalValue" width="290px">
-    <template #activator="{ attrs, on }">
+  <v-dialog v-model="dialog" persistent width="290px">
+    <template #activator="{ props }">
       <v-text-field
         :clearable="clearable"
         :error-messages="errorMessages"
         hide-details="auto"
         :label="label"
-        outlined
-        v-bind="attrs"
+        :model-value="formattedValue"
         prepend-inner-icon="fas fa-calendar-days"
         readonly
-        :value="formattedInternalValue"
-        v-on="on"
+        variant="outlined"
+        v-bind="props"
         @click:clear="internalValue = null"
       />
     </template>
     <v-date-picker v-model="internalValue" scrollable>
-      <v-btn class="font-weight-medium" color="error" text @click="dialog = false">
-        {{ $t('common.action.cancel') }}
-      </v-btn>
-      <v-spacer />
-      <v-btn
-        class="font-weight-medium"
-        color="secondary"
-        text
-        @click="$refs.menu.save(internalValue)"
-      >
-        {{ $t('common.action.ok') }}
-      </v-btn>
+      <template #actions>
+        <v-btn class="font-weight-medium" color="error" variant="text" @click="dialog = false">
+          {{ $t('common.action.cancel') }}
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          class="font-weight-medium"
+          color="secondary"
+          variant="text"
+          @click="update"
+        >
+          {{ $t('common.action.ok') }}
+        </v-btn>
+      </template>
     </v-date-picker>
   </v-dialog>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { useDate } from 'vuetify';
 
 import { formatDate } from '@intake24/admin/util';
 
-export default defineComponent({
-  name: 'DatePicker',
+defineOptions({ name: 'DatePicker' });
 
-  props: {
-    clearable: {
-      type: Boolean,
-    },
-    errorMessages: {
-      type: [String, Array] as PropType<string | string[]>,
-    },
-    label: {
-      type: String,
-    },
-    value: {
-      type: [Date, String] as PropType<string | Date | null>,
-    },
+const props = defineProps({
+  clearable: {
+    type: Boolean,
   },
+  errorMessages: {
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  label: {
+    type: String,
+  },
+  modelValue: {
+    type: [Date, String] as PropType<string | Date | null>,
+  },
+});
 
-  emits: ['input', 'change'],
-
-  setup(props, { emit }) {
-    // const menu = ref<InstanceType<typeof VMenu>>();
-    const toDate = (val: string | Date | null | undefined): string | null => {
-      if (val instanceof Date)
-        return val.toISOString().split('T')[0];
-
-      if (typeof val === 'string')
-        return val.substring(0, 10);
+const emit = defineEmits(['update:modelValue', 'change']);
 
-      return null;
-    };
-    const dialog = ref(false);
-    const internalValue = ref(toDate(props.value));
+const adapter = useDate();
 
-    const formattedInternalValue = computed(() => internalValue.value ? formatDate(internalValue.value, 'dd/MM/yyyy') : '');
+function toDate(val: string | Date | null | undefined): Date | null {
+  if (val instanceof Date)
+    return adapter.parseISO(val.toISOString().substring(0, 10)) as Date;
 
-    watch(() => props.value, (val) => {
-      if (val === internalValue.value)
-        return;
+  if (typeof val === 'string')
+    return adapter.parseISO(new Date(val).toISOString().substring(0, 10)) as Date;
 
-      internalValue.value = toDate(val);
-    });
+  return null;
+}
 
-    watch(internalValue, (val) => {
-      if (val === props.value)
-        return;
+const dialog = ref(false);
+const internalValue = ref(toDate(props.modelValue));
+const formattedValue = computed(() => props.modelValue ? formatDate(props.modelValue, 'dd/MM/yyyy') : '');
 
-      emit('input', val);
-      emit('change');
-    });
+watch(() => props.modelValue, (val) => {
+  if (toDate(val) === internalValue.value)
+    return;
 
-    return { dialog, formattedInternalValue, internalValue };
-  },
+  internalValue.value = toDate(val);
 });
+
+function update() {
+  emit('update:modelValue', internalValue.value ? adapter.toISO(internalValue.value).substring(0, 10) : null);
+  dialog.value = false;
+}
 </script>
 
 <style scoped></style>
diff --git a/apps/admin/src/components/forms/error-list.vue b/apps/admin/src/components/forms/error-list.vue
index 9b0dfd140f..f27a35874a 100644
--- a/apps/admin/src/components/forms/error-list.vue
+++ b/apps/admin/src/components/forms/error-list.vue
@@ -1,6 +1,6 @@
 <template>
   <component :is="tag" v-if="errors.length">
-    <v-alert v-for="error in errors" :key="error.path" class="my-2" dense text type="error">
+    <v-alert v-for="error in errors" :key="error.path" class="my-2" density="compact" type="error">
       {{ error.msg }}
     </v-alert>
   </component>
@@ -9,7 +9,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
-import { VCardText } from 'vuetify/lib';
+import { VCardText } from 'vuetify/components';
 
 import type { ValidationError } from '@intake24/common/util';
 
diff --git a/apps/admin/src/components/forms/language-selector.vue b/apps/admin/src/components/forms/language-selector.vue
index 300df0ea62..96dad449b9 100644
--- a/apps/admin/src/components/forms/language-selector.vue
+++ b/apps/admin/src/components/forms/language-selector.vue
@@ -1,24 +1,22 @@
 <template>
-  <v-card class="mb-4" v-bind="{ disabled, flat, outlined, tile }">
-    <v-toolbar color="grey lighten-4" v-bind="{ flat, tile }" flat>
-      <v-toolbar-title class="toolbar">
+  <v-card v-bind="{ border, disabled, flat, outlined, tile }">
+    <v-toolbar color="grey-lighten-4" v-bind="{ flat, tile }">
+      <v-toolbar-title class="">
         {{ label }}
       </v-toolbar-title>
       <v-spacer />
-      <v-menu bottom left>
-        <template #activator="{ attrs, on }">
+      <v-menu location="bottom left">
+        <template #activator="{ props }">
           <v-btn
+            class="me-2"
             color="primary"
             :disabled="!availableLanguages.length"
-            fab
-            small
-            v-bind="attrs"
-            v-on="on"
-          >
-            <v-icon>$add</v-icon>
-          </v-btn>
+            v-bind="props"
+            icon="$add"
+            size="small"
+          />
         </template>
-        <v-list class="grey lighten-3">
+        <v-list class="bg-grey-lighten-3">
           <v-list-item v-for="lang in availableLanguages" :key="lang.code" @click="add(lang.code)">
             <span :class="`fi fi-${lang.countryFlagCode} mr-3`" />
             <span class="font-weight-medium">{{ lang.englishName }}</span>
@@ -26,8 +24,7 @@
         </v-list>
       </v-menu>
       <template v-if="languages.length" #extension>
-        <v-tabs v-model="selected" background-color="grey lighten-4">
-          <v-tabs-slider />
+        <v-tabs v-model="selected" bg-color="grey-lighten-4">
           <v-tab v-for="lang in languages" :key="lang">
             <span :class="`fi fi-${getLanguageFlag(lang)} mr-3`" />
             <span class="font-weight-medium">{{ getLanguageName(lang) }}</span>
@@ -35,21 +32,19 @@
         </v-tabs>
       </template>
     </v-toolbar>
-    <v-tabs-items v-model="selected">
-      <v-tab-item v-for="lang in languages" :key="lang">
+    <v-tabs-window v-model="selected">
+      <v-tabs-window-item v-for="lang in languages" :key="lang">
         <v-card-text>
           <slot :lang="lang" :name="`lang.${lang}`" />
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn color="error" :disabled="isRemoveDisabled" text @click.stop="remove">
-            <v-icon left>
-              $delete
-            </v-icon>{{ $t('common.action.delete') }}
+          <v-btn color="error" :disabled="isRemoveDisabled" variant="text" @click.stop="remove">
+            <v-icon icon="$delete" start />{{ $t('common.action.delete') }}
           </v-btn>
         </v-card-actions>
-      </v-tab-item>
-    </v-tabs-items>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </v-card>
 </template>
 
@@ -71,15 +66,8 @@ export default defineComponent({
   name: 'LanguageSelector',
 
   props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: Object as PropType<
-        LocaleTranslation | RequiredLocaleTranslation | LocaleOptionList<ZodString | ZodNumber>
-      >,
-      required: true,
+    border: {
+      type: Boolean,
     },
     default: {
       type: [String, Array],
@@ -89,13 +77,22 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    modelValue: {
+      type: Object as PropType<
+        LocaleTranslation | RequiredLocaleTranslation | LocaleOptionList<ZodString | ZodNumber>
+      >,
+      required: true,
+    },
     flat: {
       type: Boolean,
       default: true,
     },
+    label: {
+      type: String,
+      required: true,
+    },
     outlined: {
       type: Boolean,
-      default: true,
     },
     required: {
       type: Boolean,
@@ -106,13 +103,13 @@ export default defineComponent({
     },
   },
 
-  emits: ['input', 'lang-add', 'lang-remove'],
+  emits: ['update:modelValue', 'lang-add', 'lang-remove'],
 
   setup(props, { emit }) {
     const selected = ref<number | undefined>(undefined);
     const doNotRemove = computed(() => (props.required ? [english.code] : []));
 
-    const languages = computed(() => Object.keys(props.value));
+    const languages = computed(() => Object.keys(props.modelValue));
 
     watch(
       () => languages.value.length,
@@ -142,7 +139,7 @@ export default defineComponent({
       allLanguages.value.find(lang => lang.code === code)?.englishName ?? english.englishName;
 
     const add = async (code: string) => {
-      emit('input', { ...props.value, [code]: props.default });
+      emit('update:modelValue', { ...props.modelValue, [code]: props.default });
       emit('lang-add', code);
     };
 
@@ -151,8 +148,8 @@ export default defineComponent({
         return;
 
       const code = languages.value[selected.value];
-      const { [code]: remove, ...rest } = props.value;
-      emit('input', { ...rest });
+      const { [code]: remove, ...rest } = props.modelValue;
+      emit('update:modelValue', { ...rest });
       emit('lang-remove', code);
     };
 
@@ -173,7 +170,4 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.toolbar {
-  font-size: 110%;
-}
 </style>
diff --git a/apps/admin/src/components/forms/submit-footer.vue b/apps/admin/src/components/forms/submit-footer.vue
index 4677d982ce..41e2ef76f3 100644
--- a/apps/admin/src/components/forms/submit-footer.vue
+++ b/apps/admin/src/components/forms/submit-footer.vue
@@ -5,14 +5,12 @@
         block
         :color="color"
         :disabled="disabled || isAppLoading"
-        :title="label"
+        size="x-large"
+        :title="label ?? $t('common.action.save')"
         type="submit"
-        x-large
       >
-        <v-icon left>
-          {{ icon }}
-        </v-icon>
-        {{ label }}
+        <v-icon :icon="icon" start />
+        {{ label ?? $t('common.action.save') }}
       </v-btn>
     </v-col>
   </v-row>
@@ -39,9 +37,6 @@ export default defineComponent({
     },
     label: {
       type: String,
-      default() {
-        return this.$t('common.action.save');
-      },
     },
     disabled: {
       type: Boolean,
diff --git a/apps/admin/src/components/gallery/gallery.vue b/apps/admin/src/components/gallery/gallery.vue
index 77d8e026f4..b336e1732d 100644
--- a/apps/admin/src/components/gallery/gallery.vue
+++ b/apps/admin/src/components/gallery/gallery.vue
@@ -6,7 +6,7 @@
       :selected="tracked"
       @refresh="refresh"
     />
-    <v-card :flat="isMobile" :outlined="!isMobile" :tile="isMobile">
+    <v-card :border="!$vuetify.display.mobile" :flat="$vuetify.display.mobile" :tile="$vuetify.display.mobile">
       <v-card-text>
         <data-table-filter
           :count="meta.total"
@@ -16,12 +16,12 @@
       </v-card-text>
     </v-card>
     <div v-show="meta.total" class="py-4 text-center">
-      <v-pagination v-model="page" circle :length="meta.lastPage" />
+      <v-pagination v-model="page" :length="meta.lastPage" rounded />
     </div>
     <v-container class="px-0">
       <v-row>
         <v-col v-for="item in items" :key="item.id" cols="12" lg="3" md="4" sm="6">
-          <v-card :flat="isMobile" height="100%" :outlined="!isMobile" :tile="isMobile">
+          <v-card :border="!$vuetify.display.mobile" :flat="$vuetify.display.mobile" height="100%" :tile="$vuetify.display.mobile">
             <router-link :to="{ name: `${module}-read`, params: { id: item.id } }">
               <v-img :src="item[imageUrl]" />
             </router-link>
@@ -42,12 +42,10 @@
                 v-if="can({ action: 'edit' })"
                 class="font-weight-bold"
                 color="info"
-                text
                 :to="{ name: `${module}-edit`, params: { id: item.id } }"
+                variant="text"
               >
-                <v-icon left>
-                  $edit
-                </v-icon>{{ $t(`common.action.edit`) }}
+                <v-icon icon="$edit" start />{{ $t(`common.action.edit`) }}
               </v-btn>
               <v-spacer />
               <confirm-dialog
@@ -55,7 +53,8 @@
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('common.action.delete').toString()"
+                :label="$t('common.action.delete')"
+                variant="text"
                 @confirm="remove(item)"
               >
                 {{ $t('common.action.confirm.delete', { name: item.id }) }}
@@ -65,7 +64,7 @@
         </v-col>
       </v-row>
       <div v-show="meta.total" class="py-4 text-center">
-        <v-pagination v-model="page" circle :length="meta.lastPage" />
+        <v-pagination v-model="page" :length="meta.lastPage" rounded />
       </div>
     </v-container>
   </div>
@@ -179,7 +178,7 @@ export default defineComponent({
       const { id, name } = item;
 
       await this.$http.delete(`${this.resource.api}/${id}`);
-      useMessages().success(this.$t('common.msg.deleted', { name: name ?? id }).toString());
+      useMessages().success(this.$t('common.msg.deleted', { name: name ?? id }));
       this.refresh();
     },
   },
diff --git a/apps/admin/src/components/jobs/params/clean-redis-store.vue b/apps/admin/src/components/jobs/params/clean-redis-store.vue
index da5c78e7b0..835546b205 100644
--- a/apps/admin/src/components/jobs/params/clean-redis-store.vue
+++ b/apps/admin/src/components/jobs/params/clean-redis-store.vue
@@ -11,7 +11,7 @@
             :label="$t('jobs.types.CleanRedisStore.stores._')"
             multiple
             name="store"
-            outlined
+            variant="outlined"
           />
         </v-col>
       </v-row>
@@ -35,7 +35,7 @@ export default defineComponent({
     return {
       stores: redisStoreTypes.map(value => ({
         value,
-        text: this.$t(`jobs.types.CleanRedisStore.stores.${value}`).toString(),
+        title: this.$t(`jobs.types.CleanRedisStore.stores.${value}`),
       })),
     };
   },
diff --git a/apps/admin/src/components/jobs/params/job-params.ts b/apps/admin/src/components/jobs/params/job-params.ts
index f6d03284b3..7fd81f8a36 100644
--- a/apps/admin/src/components/jobs/params/job-params.ts
+++ b/apps/admin/src/components/jobs/params/job-params.ts
@@ -12,7 +12,7 @@ export default <T>() =>
         type: Object as PropType<Errors>,
         required: true,
       },
-      value: {
+      modelValue: {
         type: Object as PropType<T>,
         required: true,
       },
@@ -22,15 +22,15 @@ export default <T>() =>
       },
     },
 
-    emits: ['input'],
+    emits: ['update:modelValue'],
 
     computed: {
       params: {
         get() {
-          return this.value;
+          return this.modelValue;
         },
         set(value: T) {
-          this.$emit('input', value);
+          this.$emit('update:modelValue', value);
         },
       },
     },
diff --git a/apps/admin/src/components/jobs/params/locale-copy.vue b/apps/admin/src/components/jobs/params/locale-copy.vue
index 2d00f31935..86110a1662 100644
--- a/apps/admin/src/components/jobs/params/locale-copy.vue
+++ b/apps/admin/src/components/jobs/params/locale-copy.vue
@@ -33,12 +33,12 @@
             :label="$t('jobs.types.LocaleCopy.subTasks._')"
             multiple
             name="subTasks"
-            outlined
             prepend-inner-icon="fas fa-list"
+            variant="outlined"
           >
             <template #selection="{ item, index }">
               <template v-if="index === 0">
-                <span v-if="params.subTasks.length === 1">{{ item.text }}</span>
+                <span v-if="params.subTasks.length === 1">{{ item.raw.title }}</span>
                 <span v-if="params.subTasks.length > 1">
                   {{ $t('common.selected', { count: params.subTasks.length }) }}
                 </span>
@@ -71,7 +71,7 @@ export default defineComponent({
     const { i18n } = useI18n();
 
     const subTasks = localeCopySubTasks.map(value => ({
-      text: i18n.t(`jobs.types.LocaleCopy.subTasks.${value}`).toString(),
+      title: i18n.t(`jobs.types.LocaleCopy.subTasks.${value}`),
       value,
     }));
 
diff --git a/apps/admin/src/components/jobs/params/locale-food-ranking-upload.vue b/apps/admin/src/components/jobs/params/locale-food-ranking-upload.vue
index d3284e13b6..7313d0d762 100644
--- a/apps/admin/src/components/jobs/params/locale-food-ranking-upload.vue
+++ b/apps/admin/src/components/jobs/params/locale-food-ranking-upload.vue
@@ -10,9 +10,9 @@
             hide-details="auto"
             :label="$t('common.file.csv')"
             name="file"
-            outlined
             prepend-icon=""
             prepend-inner-icon="fas fa-paperclip"
+            variant="outlined"
             @change="errors.clear('params.file')"
           />
         </v-col>
@@ -25,8 +25,8 @@
             :items="searchSortingAlgorithms"
             :label="$t('jobs.types.LocaleFoodRankingUpload.targetAlgorithm')"
             name="targetAlgorithm"
-            outlined
-            @change="errors.clear('params.targetAlgorithm')"
+            variant="outlined"
+            @update:model-value="errors.clear('params.targetAlgorithm')"
           />
         </v-col>
       </v-row>
@@ -36,6 +36,7 @@
             elevation="2"
             prominent
             type="warning"
+            variant="tonal"
           >
             <h4 class="mb-6">
               {{ $t('jobs.types.LocaleFoodRankingUpload.warningTitle') }}
@@ -71,7 +72,7 @@ export default defineComponent({
     return {
       searchSortingAlgorithms: searchSortingAlgorithms.map(value => ({
         value,
-        text: i18n.t(`surveys.search.algorithms.${value}`),
+        title: i18n.t(`surveys.search.algorithms.${value}`),
       })),
     };
   },
diff --git a/apps/admin/src/components/jobs/params/nutrient-table-data-import.vue b/apps/admin/src/components/jobs/params/nutrient-table-data-import.vue
index d6bc8b0ee5..0c802d412c 100644
--- a/apps/admin/src/components/jobs/params/nutrient-table-data-import.vue
+++ b/apps/admin/src/components/jobs/params/nutrient-table-data-import.vue
@@ -20,9 +20,9 @@
             hide-details="auto"
             :label="$t('common.file.csv')"
             name="file"
-            outlined
             prepend-icon=""
             prepend-inner-icon="fas fa-paperclip"
+            variant="outlined"
             @change="errors.clear('params.file')"
           />
         </v-col>
diff --git a/apps/admin/src/components/jobs/params/nutrient-table-mapping-import.vue b/apps/admin/src/components/jobs/params/nutrient-table-mapping-import.vue
index e949e60d80..4141751bb7 100644
--- a/apps/admin/src/components/jobs/params/nutrient-table-mapping-import.vue
+++ b/apps/admin/src/components/jobs/params/nutrient-table-mapping-import.vue
@@ -20,9 +20,9 @@
             hide-details="auto"
             :label="$t('common.file.csv')"
             name="file"
-            outlined
             prepend-icon=""
             prepend-inner-icon="fas fa-paperclip"
+            variant="outlined"
             @change="errors.clear('params.file')"
           />
         </v-col>
diff --git a/apps/admin/src/components/jobs/params/resource-export.vue b/apps/admin/src/components/jobs/params/resource-export.vue
index 0401d28057..1f0e3660d0 100644
--- a/apps/admin/src/components/jobs/params/resource-export.vue
+++ b/apps/admin/src/components/jobs/params/resource-export.vue
@@ -11,8 +11,8 @@
             :items="items"
             :label="$t('jobs.types.ResourceExport.resource')"
             name="resource"
-            outlined
             prepend-inner-icon="fas fa-list"
+            variant="outlined"
           />
         </v-col>
       </v-row>
@@ -39,7 +39,7 @@ export default defineComponent({
     const { can } = useUser();
 
     const items = resources.filter(item => can(`${item.split('.')[0]}|browse`)).map(value => ({
-      text: i18n.t(`${value}.title`).toString(),
+      title: i18n.t(`${value}.title`),
       value,
     }));
 
diff --git a/apps/admin/src/components/jobs/params/survey-data-export.vue b/apps/admin/src/components/jobs/params/survey-data-export.vue
index 03382add48..4fc575ed5e 100644
--- a/apps/admin/src/components/jobs/params/survey-data-export.vue
+++ b/apps/admin/src/components/jobs/params/survey-data-export.vue
@@ -17,7 +17,7 @@
             v-model="params.startDate"
             clearable
             :error-messages="errors.get('params.startDate')"
-            :label="$t('surveys.startDate').toString()"
+            :label="$t('surveys.startDate')"
           />
         </v-col>
         <v-col cols="12">
@@ -25,7 +25,7 @@
             v-model="params.endDate"
             clearable
             :error-messages="errors.get('params.endDate')"
-            :label="$t('surveys.endDate').toString()"
+            :label="$t('surveys.endDate')"
           />
         </v-col>
       </v-row>
diff --git a/apps/admin/src/components/jobs/params/survey-event-notification.vue b/apps/admin/src/components/jobs/params/survey-event-notification.vue
index 8312482ac7..f517d4030a 100644
--- a/apps/admin/src/components/jobs/params/survey-event-notification.vue
+++ b/apps/admin/src/components/jobs/params/survey-event-notification.vue
@@ -10,7 +10,7 @@
             hide-details="auto"
             :items="eventTypes"
             name="type"
-            outlined
+            variant="outlined"
           />
         </v-col>
         <v-col cols="12">
@@ -30,7 +30,7 @@
             hide-details="auto"
             :label="$t('surveys.submissions.id')"
             name="submissionId"
-            outlined
+            variant="outlined"
           />
           <v-text-field
             v-else
@@ -39,7 +39,7 @@
             hide-details="auto"
             :label="$t('surveys.sessions.id')"
             name="sessionId"
-            outlined
+            variant="outlined"
           />
         </v-col>
       </v-row>
diff --git a/apps/admin/src/components/jobs/params/survey-respondents-import.vue b/apps/admin/src/components/jobs/params/survey-respondents-import.vue
index 8cdabf2f09..4d6470a607 100644
--- a/apps/admin/src/components/jobs/params/survey-respondents-import.vue
+++ b/apps/admin/src/components/jobs/params/survey-respondents-import.vue
@@ -19,9 +19,9 @@
             hide-details="auto"
             :label="$t('common.file.csv')"
             name="file"
-            outlined
             prepend-icon=""
             prepend-inner-icon="fas fa-paperclip"
+            variant="outlined"
             @change="errors.clear('params.file')"
           />
         </v-col>
diff --git a/apps/admin/src/components/jobs/polls-job-list.vue b/apps/admin/src/components/jobs/polls-job-list.vue
index b11a476eeb..e307763ca1 100644
--- a/apps/admin/src/components/jobs/polls-job-list.vue
+++ b/apps/admin/src/components/jobs/polls-job-list.vue
@@ -1,24 +1,20 @@
 <template>
-  <v-list class two-line>
-    <template v-for="(job, idx) in jobs">
-      <v-list-item :key="job.id">
-        <v-list-item-avatar>
-          <v-icon class="grey" dark>
-            $jobs
-          </v-icon>
-        </v-list-item-avatar>
-        <v-list-item-content>
-          <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>
-        </v-list-item-content>
-        <v-list-item-action>
-          <v-chip small>
+  <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" small>
+          <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>
@@ -27,8 +23,7 @@
           <v-btn
             :disabled="!downloadUrlAvailable(job)"
             icon
-            large
-            link
+            size="large"
             :title="$t('common.action.download')"
             @click="download(job)"
           >
@@ -41,9 +36,9 @@
           <v-progress-circular
             v-if="(job.progress || 0) !== 1"
             color="info"
+            :model-value="Math.ceil((job.progress || 0) * 100)"
             :rotate="-90"
             :size="45"
-            :value="Math.ceil((job.progress || 0) * 100)"
             :width="6"
           >
             <span class="font-weight-bold text--primary">
@@ -51,17 +46,16 @@
             </span>
           </v-progress-circular>
           <template v-else>
-            <v-icon v-if="job.successful" color="success" large>
+            <v-icon v-if="job.successful" color="success" size="large">
               $check
             </v-icon>
-            <v-icon v-if="!job.successful" color="error" large>
+            <v-icon v-if="!job.successful" color="error" size="large">
               $times
             </v-icon>
           </template>
         </v-list-item-action>
-      </v-list-item>
-      <v-divider v-if="idx + 1 < jobs.length" :key="`div-${job.id}`" />
-    </template>
+      </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 aa3bbd0121..dace61698b 100644
--- a/apps/admin/src/components/lists/color-list.vue
+++ b/apps/admin/src/components/lists/color-list.vue
@@ -1,49 +1,43 @@
 <template>
   <div>
-    <v-list>
-      <draggable v-model="items" handle=".drag-and-drop__handle" @end="update">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(item, idx) in items"
-            :key="item._id"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-icon
+    <v-list class="list-border">
+      <vue-draggable
+        v-model="items"
+        :animation="300"
+        handle=".drag-and-drop__handle"
+        @end="update"
+      >
+        <v-list-item
+          v-for="(item, idx) in items"
+          :key="item._id"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+            <v-icon
               class="mx-2 my-auto pa-4 rounded-circle"
               :style="{ backgroundColor: item.color }"
             />
-            <v-list-item-content>
-              <v-list-item-title class="font-weight-medium">
-                {{ item.color }} ({{ lastLabel && idx + 1 === items.length ? lastLabel : idx + 1 }})
-              </v-list-item-title>
-            </v-list-item-content>
+          </template>
+          <v-list-item-title class="font-weight-medium">
+            {{ item.color }} ({{ lastLabel && idx + 1 === items.length ? lastLabel : idx + 1 }})
+          </v-list-item-title>
+          <template #append>
             <v-list-item-action>
-              <v-btn icon :title="$t('feedback-schemes.colors.edit')" @click.stop="edit(idx, item)">
-                <v-icon color="secondary lighten-2">
-                  $edit
-                </v-icon>
-              </v-btn>
+              <v-btn icon="$edit" :title="$t('feedback-schemes.colors.edit')" @click.stop="edit(idx, item)" />
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <v-dialog
       v-model="dialog.show"
-      :fullscreen="$vuetify.breakpoint.smAndDown"
+      :fullscreen="$vuetify.display.smAndDown"
       max-width="600px"
       persistent
     >
-      <v-card :tile="$vuetify.breakpoint.smAndDown">
+      <v-card :tile="$vuetify.display.smAndDown">
         <v-toolbar color="secondary" dark flat>
-          <v-icon dark left>
-            fas fa-palette
-          </v-icon>
+          <v-icon icon="fas fa-palette" start />
           <v-toolbar-title>
             {{ $t('feedback-schemes.colors.edit') }}
           </v-toolbar-title>
@@ -60,15 +54,15 @@
                     link
                     @click="dialog.item.color = color"
                   >
-                    <v-list-item-icon
-                      class="mx-2 my-auto pa-4 rounded-circle"
-                      :style="{ backgroundColor: color }"
-                    />
-                    <v-list-item-content>
-                      <v-list-item-title class="font-weight-medium text-uppercase">
-                        {{ key }}
-                      </v-list-item-title>
-                    </v-list-item-content>
+                    <template #prepend>
+                      <v-icon
+                        class="mx-2 my-auto pa-4 rounded-circle"
+                        :style="{ backgroundColor: color }"
+                      />
+                    </template>
+                    <v-list-item-title class="font-weight-medium text-uppercase">
+                      {{ key }}
+                    </v-list-item-title>
                   </v-list-item>
                 </v-list>
               </v-col>
@@ -78,16 +72,12 @@
             </v-row>
           </v-card-text>
           <v-card-actions>
-            <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-              <v-icon left>
-                $cancel
-              </v-icon>{{ $t('common.action.cancel') }}
+            <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+              <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
             </v-btn>
             <v-spacer />
-            <v-btn class="font-weight-bold" color="info" text type="submit">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-card-actions>
         </v-form>
@@ -99,7 +89,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import { useListWithDialog } from '@intake24/admin/composables';
 import { colors } from '@intake24/common/theme';
@@ -108,13 +98,13 @@ import { randomString } from '@intake24/common/util';
 export default defineComponent({
   name: 'ColorList',
 
-  components: { Draggable: draggable },
+  components: { VueDraggable },
 
   props: {
     lastLabel: {
       type: String,
     },
-    value: {
+    modelValue: {
       type: Array as PropType<string[]>,
       required: true,
     },
diff --git a/apps/admin/src/components/lists/meal-list.vue b/apps/admin/src/components/lists/meal-list.vue
index 43fcd1cf62..7c4c0e30a7 100644
--- a/apps/admin/src/components/lists/meal-list.vue
+++ b/apps/admin/src/components/lists/meal-list.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card flat tile>
-    <v-toolbar color="grey lighten-2" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-2" flat tile>
+      <v-icon color="secondary" end start>
         fas fa-hamburger
       </v-icon>
       <div class="d-flex flex-column">
@@ -11,41 +11,32 @@
         <span v-if="subtitle" class="text-subtitle-2">{{ subtitle }}</span>
       </div>
       <v-spacer />
-      <v-btn color="primary" fab small :title="$t('survey-schemes.meals.create')" @click.stop="add">
-        <v-icon small>
-          $add
-        </v-icon>
-      </v-btn>
+      <v-btn color="primary" icon="$add" size="small" :title="$t('survey-schemes.meals.create')" @click.stop="add" />
       <confirm-dialog
         color="error"
-        :label="$t('survey-schemes.meals.reset._').toString()"
+        :label="$t('survey-schemes.meals.reset._')"
         @confirm="resetList"
       >
-        <template #activator="{ attrs, on }">
+        <template #activator="{ props }">
           <v-btn
             class="ml-3"
             color="error"
-            fab
-            small
+            icon="$sync"
+            size="small"
             :title="$t('survey-schemes.meals.reset._')"
-            v-bind="attrs"
-            v-on="on"
-          >
-            <v-icon small>
-              $sync
-            </v-icon>
-          </v-btn>
+            v-bind="props"
+          />
         </template>
         {{ $t('survey-schemes.meals.reset.text') }}
       </confirm-dialog>
       <options-menu>
-        <select-resource resource="survey-schemes" return-object="meals" @input="load">
-          <template #activator="{ attrs, on }">
-            <v-list-item v-bind="attrs" link v-on="on">
+        <select-resource resource="survey-schemes" return-object="meals" @update:model-value="load">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" link>
+              <template #prepend>
+                <v-icon icon="$download" />
+              </template>
               <v-list-item-title>
-                <v-icon left>
-                  $download
-                </v-icon>
                 {{ $t('survey-schemes.load') }}
               </v-list-item-title>
             </v-list-item>
@@ -54,56 +45,49 @@
         <json-editor-dialog v-model="meals" />
       </options-menu>
     </v-toolbar>
-    <v-list two-line>
-      <draggable v-model="meals" handle=".drag-and-drop__handle">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(meal, index) in meals"
-            :key="meal.name.en"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ meal.name.en }}</v-list-item-title>
-              <v-list-item-subtitle>{{ meal.time }}</v-list-item-subtitle>
-            </v-list-item-content>
+    <v-list class="list-border" lines="two">
+      <vue-draggable
+        v-model="meals"
+        :animation="300"
+        handle=".drag-and-drop__handle"
+      >
+        <v-list-item
+          v-for="(meal, index) in meals"
+          :key="meal.name.en"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+          </template>
+          <v-list-item-title>{{ meal.name.en }}</v-list-item-title>
+          <v-list-item-subtitle>{{ meal.time }}</v-list-item-subtitle>
+          <template #append>
             <v-list-item-action>
-              <v-btn icon :title="$t('survey-schemes.meals.edit')" @click.stop="edit(index, meal)">
-                <v-icon color="secondary lighten-2">
-                  $edit
-                </v-icon>
-              </v-btn>
+              <v-btn icon="$edit" :title="$t('survey-schemes.meals.edit')" @click.stop="edit(index, meal)" />
             </v-list-item-action>
             <v-list-item-action>
               <confirm-dialog
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('survey-schemes.meals.remove').toString()"
+                :label="$t('survey-schemes.meals.remove')"
                 @confirm="remove(index)"
               >
                 {{ $t('common.action.confirm.delete', { name: meal.name.en }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <v-dialog
       v-model="dialog.show"
-      :fullscreen="$vuetify.breakpoint.smAndDown"
+      :fullscreen="$vuetify.display.smAndDown"
       max-width="600px"
       persistent
     >
-      <v-card :tile="$vuetify.breakpoint.smAndDown">
+      <v-card :tile="$vuetify.display.smAndDown">
         <v-toolbar color="secondary" dark flat>
-          <v-icon dark left>
-            fas fa-hamburger
-          </v-icon>
+          <v-icon icon="fas fa-hamburger" start />
           <v-toolbar-title>
             {{ $t(`survey-schemes.meals.${dialog.index === -1 ? 'create' : 'edit'}`) }}
           </v-toolbar-title>
@@ -112,39 +96,33 @@
         <v-form ref="form" @submit.prevent="save">
           <language-selector
             v-model="dialog.meal.name"
-            :label="$t('survey-schemes.meals.name').toString()"
+            :label="$t('survey-schemes.meals.name')"
             :outlined="false"
           >
-            <template v-for="lang in Object.keys(dialog.meal.name)" #[`lang.${lang}`]>
+            <template v-for="lang in Object.keys(dialog.meal.name)" :key="lang" #[`lang.${lang}`]>
               <v-text-field
-                :key="lang"
                 v-model="dialog.meal.name[lang]"
                 hide-details="auto"
                 :label="$t('survey-schemes.meals.name')"
-                outlined
                 :rules="rules(lang)"
+                variant="outlined"
               />
             </template>
           </language-selector>
-          <v-card-text>
+          <v-card-text class="d-flex justify-center align-center pa-0">
             <v-time-picker
               v-model="dialog.meal.time"
-              format="24hr"
               full-width
-              :landscape="$vuetify.breakpoint.smAndUp"
+              :landscape="$vuetify.display.smAndUp"
             />
           </v-card-text>
           <v-card-actions>
-            <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-              <v-icon left>
-                $cancel
-              </v-icon>{{ $t('common.action.cancel') }}
+            <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+              <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
             </v-btn>
             <v-spacer />
-            <v-btn class="font-weight-bold" color="info" text type="submit">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-card-actions>
         </v-form>
@@ -156,7 +134,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent, ref } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { Meal, Meals } from '@intake24/common/surveys';
 import { defaultMeals } from '@intake24/common/surveys';
@@ -178,11 +156,11 @@ export default defineComponent({
 
   components: {
     ConfirmDialog,
-    Draggable: draggable,
     JsonEditorDialog,
     LanguageSelector,
     OptionsMenu,
     SelectResource,
+    VueDraggable,
   },
 
   props: {
@@ -194,13 +172,13 @@ export default defineComponent({
       type: String as PropType<'full' | 'override'>,
       default: 'full',
     },
-    value: {
+    modelValue: {
       type: Array as PropType<Meal[]>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup() {
     const form = ref<InstanceType<typeof HTMLFormElement>>();
@@ -218,7 +196,7 @@ export default defineComponent({
     return {
       dialog: dialog(),
       newDialog: dialog,
-      meals: [...this.value],
+      meals: [...this.modelValue],
       defaultMeals,
     };
   },
@@ -230,19 +208,19 @@ export default defineComponent({
     title(): string {
       return this.$t(
         this.isOverrideMode ? 'survey-schemes.overrides.meals.title' : 'survey-schemes.meals.title',
-      ).toString();
+      );
     },
     subtitle() {
       if (!this.isOverrideMode)
         return undefined;
 
-      return this.$t('survey-schemes.overrides.meals.subtitle').toString();
+      return this.$t('survey-schemes.overrides.meals.subtitle');
     },
   },
 
   watch: {
     meals(val) {
-      this.$emit('input', val);
+      this.$emit('update:modelValue', val);
     },
   },
 
@@ -251,14 +229,14 @@ export default defineComponent({
       return [
         (value: string | null): boolean | string => {
           if (!value)
-            return this.$t('survey-schemes.meals.validation.required').toString();
+            return this.$t('survey-schemes.meals.validation.required');
 
           const { index } = this.dialog;
           const match = this.meals.find(
             (meal, idx) => value === meal.name[langId] && index !== idx,
           );
 
-          return match ? this.$t('survey-schemes.meals.validation.unique').toString() : true;
+          return match ? this.$t('survey-schemes.meals.validation.unique') : true;
         },
       ];
     },
diff --git a/apps/admin/src/components/lists/nutrient-list.vue b/apps/admin/src/components/lists/nutrient-list.vue
index cbcbc6c870..be72a331bc 100644
--- a/apps/admin/src/components/lists/nutrient-list.vue
+++ b/apps/admin/src/components/lists/nutrient-list.vue
@@ -1,90 +1,75 @@
 <template>
   <v-card flat tile>
-    <v-toolbar color="grey lighten-2" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-2" flat tile>
+      <v-icon color="secondary" end>
         $nutrient-types
       </v-icon>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('nutrient-types.title') }}
       </v-toolbar-title>
       <v-spacer />
-      <v-btn color="primary" fab small :title="$t('nutrient-types.create')" @click.stop="add">
-        <v-icon small>
-          $add
-        </v-icon>
-      </v-btn>
+      <v-btn color="primary" icon="$add" size="small" :title="$t('nutrient-types.create')" @click.stop="add" />
       <confirm-dialog
         color="error"
-        :label="$t('nutrient-types.reset._').toString()"
+        :label="$t('nutrient-types.reset._')"
         @confirm="resetList"
       >
-        <template #activator="{ attrs, on }">
+        <template #activator="{ props }">
           <v-btn
             class="ml-3"
             color="error"
-            fab
-            small
+            icon="$sync"
+            size="small"
             :title="$t('nutrient-types.reset._')"
-            v-bind="attrs"
-            v-on="on"
-          >
-            <v-icon small>
-              $sync
-            </v-icon>
-          </v-btn>
+            v-bind="props"
+          />
         </template>
         {{ $t('nutrient-types.reset.text') }}
       </confirm-dialog>
     </v-toolbar>
-    <v-list>
-      <draggable v-model="items" handle=".drag-and-drop__handle" @end="update">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(nutrientType, idx) in items"
-            :key="nutrientType.id.join(':')"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ nutrientType.name.en }}</v-list-item-title>
-            </v-list-item-content>
+    <v-list class="list-border">
+      <vue-draggable
+        v-model="items"
+        :animation="300"
+        handle=".drag-and-drop__handle"
+        @end="update"
+      >
+        <v-list-item
+          v-for="(nutrientType, idx) in items"
+          :key="nutrientType.id.join(':')"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+          </template>
+          <v-list-item-title>{{ nutrientType.name.en }}</v-list-item-title>
+          <template #append>
             <v-list-item-action>
-              <v-btn icon :title="$t('nutrient-types.edit')" @click.stop="edit(idx, nutrientType)">
-                <v-icon color="secondary lighten-2">
-                  $edit
-                </v-icon>
-              </v-btn>
+              <v-btn icon="$edit" :title="$t('nutrient-types.edit')" @click.stop="edit(idx, nutrientType)" />
             </v-list-item-action>
             <v-list-item-action>
               <confirm-dialog
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('nutrient-types.remove').toString()"
+                :label="$t('nutrient-types.remove')"
                 @confirm="remove(idx)"
               >
                 {{ $t('common.action.confirm.delete', { name: nutrientType.name.en }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <v-dialog
       v-model="dialog.show"
-      :fullscreen="$vuetify.breakpoint.smAndDown"
+      :fullscreen="$vuetify.display.smAndDown"
       max-width="600px"
       persistent
     >
-      <v-card :tile="$vuetify.breakpoint.smAndDown">
+      <v-card :tile="$vuetify.display.smAndDown">
         <v-toolbar color="secondary" dark flat>
-          <v-icon dark left>
-            $nutrient-types
-          </v-icon>
+          <v-icon icon="$nutrient-types" start />
           <v-toolbar-title>
             {{ $t(`nutrient-types.${dialog.index === -1 ? 'create' : 'edit'}`) }}
           </v-toolbar-title>
@@ -95,45 +80,41 @@
             <v-autocomplete
               v-model="dialog.item.id"
               hide-details="auto"
-              item-text="description"
+              item-title="description"
               item-value="id"
               :items="nutrientTypes"
               :label="$t('nutrient-types.title')"
               multiple
               name="nutrientTypeId"
-              outlined
               prepend-inner-icon="$nutrient-types"
               :rules="rules"
-              @change="updateNutrientLabel"
+              variant="outlined"
+              @update:model-value="updateNutrientLabel"
             />
           </v-card-text>
           <language-selector
             v-model="dialog.item.name"
-            :label="$t('nutrient-types.label').toString()"
+            :label="$t('nutrient-types.label')"
             :outlined="false"
             required
           >
-            <template v-for="lang in Object.keys(dialog.item.name)" #[`lang.${lang}`]>
+            <template v-for="lang in Object.keys(dialog.item.name)" :key="lang" #[`lang.${lang}`]>
               <v-text-field
-                :key="lang"
                 v-model="dialog.item.name[lang]"
                 hide-details="auto"
                 :label="$t('nutrient-types.label')"
-                outlined
+                variant="outlined"
               />
             </template>
           </language-selector>
           <v-card-actions>
-            <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-              <v-icon left>
-                $cancel
-              </v-icon>{{ $t('common.action.cancel') }}
+            <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+              <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
             </v-btn>
             <v-spacer />
-            <v-btn class="font-weight-bold" color="info" text type="submit">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+              <v-icon icon="$success" start />
+              {{ $t('common.action.ok') }}
             </v-btn>
           </v-card-actions>
         </v-form>
@@ -145,7 +126,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { Nutrient } from '@intake24/common/feedback';
 import type { NutrientTypeResponse } from '@intake24/common/types/http/admin';
@@ -157,7 +138,7 @@ import { LanguageSelector } from '../forms';
 export default defineComponent({
   name: 'NutrientTypeList',
 
-  components: { ConfirmDialog, Draggable: draggable, LanguageSelector },
+  components: { ConfirmDialog, LanguageSelector, VueDraggable },
 
   props: {
     nutrientTypes: {
@@ -168,7 +149,7 @@ export default defineComponent({
       type: Array as PropType<Nutrient[]>,
       default: () => [],
     },
-    value: {
+    modelValue: {
       type: Array as PropType<Nutrient[]>,
       required: true,
     },
@@ -225,7 +206,7 @@ export default defineComponent({
       return [
         (value: string[]): boolean | string => {
           if (!value.length)
-            return this.$t('nutrient-types.validation.required').toString();
+            return this.$t('nutrient-types.validation.required');
 
           const { index } = this.dialog;
           const match = this.items.find(
@@ -233,7 +214,7 @@ export default defineComponent({
               [...value].sort().join(':') === [...nutrientType.id].sort().join(':') && index !== idx,
           );
 
-          return match ? this.$t('nutrient-types.validation.unique').toString() : true;
+          return match ? this.$t('nutrient-types.validation.unique') : true;
         },
       ];
     },
diff --git a/apps/admin/src/components/lists/options-list.vue b/apps/admin/src/components/lists/options-list.vue
index 77be7e9111..b4b02b7637 100644
--- a/apps/admin/src/components/lists/options-list.vue
+++ b/apps/admin/src/components/lists/options-list.vue
@@ -8,61 +8,55 @@
           </div>
         </v-toolbar-title>
         <v-spacer />
-        <v-btn color="primary" fab small :title="$t('common.options.add')" @click.stop="add">
-          <v-icon small>
-            $add
-          </v-icon>
-        </v-btn>
+        <v-btn color="primary" icon="$add" size="small" :title="$t('common.options.add')" @click.stop="add" />
       </v-toolbar>
       <v-divider />
-      <v-list dense>
-        <draggable v-model="currentOptions" handle=".drag-and-drop__handle" @end="update">
-          <transition-group name="drag-and-drop" type="transition">
-            <v-list-item
-              v-for="(option, idx) in currentOptions"
-              :key="option.id"
-              class="drag-and-drop__item"
-              draggable
-              link
-              :ripple="false"
-            >
-              <v-list-item-avatar class="drag-and-drop__handle">
-                <v-icon>$handle</v-icon>
-              </v-list-item-avatar>
-              <v-list-item-content class="options-list__item flex-column flex-lg-row align-stretch align-lg-stretch">
-                <v-text-field
-                  v-model="option.label"
-                  dense
-                  hide-details="auto"
-                  :label="$t('common.options.label')"
-                  outlined
-                />
-                <v-text-field
-                  v-model="option.value"
-                  dense
-                  hide-details="auto"
-                  :label="$t('common.options.value')"
-                  outlined
-                  :rules="optionValueRules"
-                />
-                <v-switch
-                  v-if="exclusive"
-                  v-model="option.exclusive"
-                  class="mt-0"
-                  hide-details="auto"
-                  :label="$t('common.options.exclusive')"
-                />
-              </v-list-item-content>
+      <v-list class="list-border" density="compact">
+        <vue-draggable
+          v-model="currentOptions"
+          :animation="300"
+          handle=".drag-and-drop__handle"
+          @end="update"
+        >
+          <v-list-item
+            v-for="(option, idx) in currentOptions"
+            :key="option.id"
+            :ripple="false"
+          >
+            <template #prepend>
+              <v-avatar class="drag-and-drop__handle" icon="$handle" />
+            </template>
+            <div class="options-list__item flex-column flex-lg-row align-stretch align-lg-stretch">
+              <v-text-field
+                v-model="option.label"
+                density="compact"
+                hide-details="auto"
+                :label="$t('common.options.label')"
+                variant="outlined"
+              />
+              <v-text-field
+                v-model="option.value"
+                density="compact"
+                hide-details="auto"
+                :label="$t('common.options.value')"
+                :rules="optionValueRules"
+                variant="outlined"
+              />
+              <v-switch
+                v-if="exclusive"
+                v-model="option.exclusive"
+                class="mt-0"
+                hide-details="auto"
+                :label="$t('common.options.exclusive')"
+              />
+            </div>
+            <template #append>
               <v-list-item-action>
-                <v-btn icon :title="$t('common.options.remove')" @click.stop="remove(idx)">
-                  <v-icon color="error">
-                    $delete
-                  </v-icon>
-                </v-btn>
+                <v-btn color="error" icon="$delete" :title="$t('common.options.remove')" @click.stop="remove(idx)" />
               </v-list-item-action>
-            </v-list-item>
-          </transition-group>
-        </draggable>
+            </template>
+          </v-list-item>
+        </vue-draggable>
       </v-list>
     </v-col>
   </v-row>
@@ -73,7 +67,7 @@ import type { PropType } from 'vue';
 import type { ZodNumber, ZodString } from 'zod';
 import { deepEqual } from 'fast-equals';
 import { defineComponent } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { RuleCallback } from '@intake24/admin/types';
 import type { ListOption } from '@intake24/common/types';
@@ -82,7 +76,7 @@ import { toIndexedList } from '@intake24/admin/util';
 export default defineComponent({
   name: 'OptionsList',
 
-  components: { Draggable: draggable },
+  components: { VueDraggable },
 
   props: {
     exclusive: {
diff --git a/apps/admin/src/components/prompts/custom/checkbox-list-prompt.vue b/apps/admin/src/components/prompts/custom/checkbox-list-prompt.vue
index 9b9c750f30..a5d8d76659 100644
--- a/apps/admin/src/components/prompts/custom/checkbox-list-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/checkbox-list-prompt.vue
@@ -1,32 +1,31 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12">
         <v-switch
           hide-details="auto"
-          :input-value="other"
           :label="$t('survey-schemes.prompts.other')"
-          @change="update('other', $event)"
+          :model-value="other"
+          @update:model-value="update('other', $event)"
         />
       </v-col>
     </v-row>
     <language-selector
       :default="[]"
       :label="$t('common.options.title')"
+      :model-value="options"
       :required="true"
-      :value="options"
-      @input="update('options', $event)"
+      @update:model-value="update('options', $event)"
     >
-      <template v-for="lang in Object.keys(options)" #[`lang.${lang}`]>
+      <template v-for="lang in Object.keys(options)" :key="lang" #[`lang.${lang}`]>
         <options-list
-          :key="lang"
           exclusive
           :options="options[lang]"
           @update:options="updateLanguage('options', lang, $event)"
         />
       </template>
     </language-selector>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/custom/date-picker-prompt.vue b/apps/admin/src/components/prompts/custom/date-picker-prompt.vue
index 86d38d1d27..56b7c71557 100644
--- a/apps/admin/src/components/prompts/custom/date-picker-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/date-picker-prompt.vue
@@ -1,41 +1,41 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12" md="6">
         <v-text-field
           hide-details="auto"
           :label="$t('survey-schemes.prompts.date-picker-prompt.current')"
+          :model-value="current"
           name="current"
-          outlined
           prepend-inner-icon="fas fa-hourglass"
-          :value="current"
-          @input="updateNumber('current', $event)"
+          variant="outlined"
+          @update:model-value="updateNumber('current', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
         <v-text-field
           hide-details="auto"
           :label="$t('survey-schemes.prompts.date-picker-prompt.min')"
+          :model-value="min"
           name="min"
-          outlined
           prepend-inner-icon="fas fa-hourglass-start"
-          :value="min"
-          @input="updateNumber('min', $event)"
+          variant="outlined"
+          @update:model-value="updateNumber('min', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
         <v-text-field
           hide-details="auto"
           :label="$t('survey-schemes.prompts.date-picker-prompt.max')"
+          :model-value="max"
           name="max"
-          outlined
           prepend-inner-icon="fas fa-hourglass-end"
-          :value="max"
-          @input="updateNumber('max', $event)"
+          variant="outlined"
+          @update:model-value="updateNumber('max', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/custom/info-prompt.vue b/apps/admin/src/components/prompts/custom/info-prompt.vue
index 46e67dc5f7..41f1069126 100644
--- a/apps/admin/src/components/prompts/custom/info-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/info-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options" />
+  <v-tabs-window-item key="options" value="options" />
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/custom/no-more-information-prompt.vue b/apps/admin/src/components/prompts/custom/no-more-information-prompt.vue
index cfd1233b58..23c7d65376 100644
--- a/apps/admin/src/components/prompts/custom/no-more-information-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/no-more-information-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options" />
+  <v-tabs-window-item key="options" value="options" />
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/custom/radio-list-prompt.vue b/apps/admin/src/components/prompts/custom/radio-list-prompt.vue
index 8247eaea15..154a684304 100644
--- a/apps/admin/src/components/prompts/custom/radio-list-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/radio-list-prompt.vue
@@ -1,41 +1,40 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12">
         <v-select
           hide-details="auto"
           :items="orientations"
           :label="$t('survey-schemes.prompts.orientation._')"
-          outlined
-          :value="orientation"
-          @change="update('orientation', $event)"
+          :model-value="orientation"
+          variant="outlined"
+          @update:model-value="update('orientation', $event)"
         />
       </v-col>
       <v-col cols="12">
         <v-switch
           hide-details="auto"
-          :input-value="other"
           :label="$t('survey-schemes.prompts.other')"
-          @change="update('other', $event)"
+          :model-value="other"
+          @update:model-value="update('other', $event)"
         />
       </v-col>
     </v-row>
     <language-selector
       :default="[]"
       :label="$t('common.options.title')"
+      :model-value="options"
       :required="true"
-      :value="options"
-      @input="update('options', $event)"
+      @update:model-value="update('options', $event)"
     >
-      <template v-for="lang in Object.keys(options)" #[`lang.${lang}`]>
+      <template v-for="lang in Object.keys(options)" :key="lang" #[`lang.${lang}`]>
         <options-list
-          :key="lang"
           :options="options[lang]"
           @update:options="updateLanguage('options', lang, $event)"
         />
       </template>
     </language-selector>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/custom/select-prompt.vue b/apps/admin/src/components/prompts/custom/select-prompt.vue
index b8ecbf093d..c7ecc9640d 100644
--- a/apps/admin/src/components/prompts/custom/select-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/select-prompt.vue
@@ -1,31 +1,30 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12">
         <v-switch
           hide-details="auto"
-          :input-value="multiple"
           :label="$t('survey-schemes.prompts.multiple')"
-          @change="update('multiple', $event)"
+          :model-value="multiple"
+          @update:model-value="update('multiple', $event)"
         />
       </v-col>
     </v-row>
     <language-selector
       :default="[]"
-      :label="$t('common.options.title').toString()"
+      :label="$t('common.options.title')"
+      :model-value="options"
       :required="true"
-      :value="options"
-      @input="update('options', $event)"
+      @update:model-value="update('options', $event)"
     >
-      <template v-for="lang in Object.keys(options)" #[`lang.${lang}`]>
+      <template v-for="lang in Object.keys(options)" :key="lang" #[`lang.${lang}`]>
         <options-list
-          :key="lang"
           :options="options[lang]"
           @update:options="updateLanguage('options', lang, $event)"
         />
       </template>
     </language-selector>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/custom/slider-prompt.vue b/apps/admin/src/components/prompts/custom/slider-prompt.vue
index 9473db64eb..dc3caf5a9d 100644
--- a/apps/admin/src/components/prompts/custom/slider-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/slider-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12">
         <slider-settings
@@ -10,7 +10,7 @@
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/custom/textarea-prompt.vue b/apps/admin/src/components/prompts/custom/textarea-prompt.vue
index 06cb9efc11..068eb151bd 100644
--- a/apps/admin/src/components/prompts/custom/textarea-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/textarea-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options" />
+  <v-tabs-window-item key="options" value="options" />
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/custom/time-picker-prompt.vue b/apps/admin/src/components/prompts/custom/time-picker-prompt.vue
index 7e92d373c3..80e7ef4050 100644
--- a/apps/admin/src/components/prompts/custom/time-picker-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/time-picker-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-card-text>
       <v-row>
         <v-col cols="12" lg="4" md="6">
@@ -8,28 +8,28 @@
           </v-card-title>
           <v-select
             :items="[1, 5, 10, 15, 20, 30]"
-            outlined
+            :model-value="allowedMinutes"
             prepend-inner-icon="fas fa-stopwatch"
-            :value="allowedMinutes"
-            @input="update('allowedMinutes', $event)"
+            variant="outlined"
+            @update:model-value="update('allowedMinutes', $event)"
           >
             <template #item="{ item }">
-              <i18n path="survey-schemes.prompts.timePicker.allowedMinutes.item">
+              <i18n-t keypath="survey-schemes.prompts.timePicker.allowedMinutes.item">
                 <template #item>
                   <v-chip>
                     <span>{{ item }}</span>
                   </v-chip>
                 </template>
-              </i18n>
+              </i18n-t>
             </template>
             <template #selection="{ item }">
-              <i18n path="survey-schemes.prompts.timePicker.allowedMinutes.item">
+              <i18n-t keypath="survey-schemes.prompts.timePicker.allowedMinutes.item">
                 <template #item>
                   <v-chip>
                     <span>{{ item }}</span>
                   </v-chip>
                 </template>
-              </i18n>
+              </i18n-t>
             </template>
           </v-select>
         </v-col>
@@ -41,8 +41,8 @@
             class="d-flex"
             color="primary"
             mandatory
-            :value="format"
-            @change="update('format', $event)"
+            :model-value="format"
+            @update:model-value="update('format', $event)"
           >
             <v-btn
               class="px-10 flex-grow-1 flex-md-grow-0"
@@ -62,7 +62,7 @@
         </v-col>
       </v-row>
     </v-card-text>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/custom/yes-no-prompt.vue b/apps/admin/src/components/prompts/custom/yes-no-prompt.vue
index 1f5fe617dc..e074e1e044 100644
--- a/apps/admin/src/components/prompts/custom/yes-no-prompt.vue
+++ b/apps/admin/src/components/prompts/custom/yes-no-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options" />
+  <v-tabs-window-item key="options" value="options" />
 </template>
 
 <script lang="ts">
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 924bd0d395..1cc42581a9 100644
--- a/apps/admin/src/components/prompts/list/load-prompt-dialog.vue
+++ b/apps/admin/src/components/prompts/list/load-prompt-dialog.vue
@@ -1,22 +1,20 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <slot name="activator" v-bind="{ on, attrs }">
-        <v-list-item v-bind="attrs" link v-on="on">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <slot name="activator" v-bind="{ props }">
+        <v-list-item link v-bind="props">
+          <template #prepend>
+            <v-icon icon="$download" start />
+          </template>
           <v-list-item-title>
-            <v-icon left>
-              $download
-            </v-icon>
             {{ $t('survey-schemes.prompts.templates.add') }}
           </v-list-item-title>
         </v-list-item>
       </slot>
     </template>
-    <v-card :loading="loading" :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :loading="loading" :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="cancel">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="cancel" />
         <v-toolbar-title>
           {{ $t('survey-schemes.prompts.templates.title') }}
         </v-toolbar-title>
@@ -29,226 +27,186 @@
           hide-details="auto"
           :label="$t('common.search._')"
           :loading="loading"
-          outlined
           prepend-inner-icon="$search"
+          variant="outlined"
           @click:append="fetch"
           @click:clear="clear"
           @keyup.enter="fetch"
         />
-        <v-alert v-if="promptAlreadyExists" text type="error">
+        <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 min-height="350px" two-line>
-            <v-list-item-group v-model="selectedId">
-              <template v-for="(prompt, idx) in prompts">
-                <v-list-item :key="prompt.id" :value="prompt.id">
-                  <template #default="{ active }">
-                    <v-list-item-action>
-                      <v-checkbox :input-value="active" />
-                    </v-list-item-action>
-                    <v-list-item-avatar>
-                      <v-icon>fas fa-question-circle</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                      <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-content>
-                  </template>
-                </v-list-item>
-                <v-divider v-if="idx + 1 < prompts.length" :key="`div-${prompt.id}`" />
+          <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-group>
+              <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" circle :length="lastPage" />
+            <v-pagination v-model="page" :length="lastPage" rounded />
           </div>
         </template>
-        <v-alert v-else color="secondary" text type="info">
+        <v-alert v-else color="secondary" type="info">
           {{ $t('survey-schemes.prompts.templates.none') }}
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn class="font-weight-bold" color="error" text @click.stop="cancel">
-          <v-icon left>
-            $cancel
-          </v-icon>{{ $t('common.action.cancel') }}
+        <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="cancel">
+          <v-icon icon="$cancel" start />
+          {{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
         <v-btn
           class="font-weight-bold"
           color="info"
-          :disabled="!selectedId || promptAlreadyExists"
-          text
+          :disabled="!isSelected || promptAlreadyExists"
+          variant="text"
           @click.stop="confirm"
         >
-          <v-icon left>
-            $success
-          </v-icon>{{ $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 { watchDebounced } from '@vueuse/core';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import type { Prompt } from '@intake24/common/prompts';
 import type { SurveySchemeTemplates } from '@intake24/common/types/http/admin';
 import { useHttp } from '@intake24/admin/services';
 import { copy } from '@intake24/common/util';
 
-export default defineComponent({
-  name: 'LoadPromptDialog',
+defineOptions({ name: 'LoadPromptDialog' });
 
-  props: {
-    schemeId: {
-      type: String,
-      required: true,
-    },
-    promptIds: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-    items: {
-      type: Array as PropType<Prompt[]>,
-    },
+const props = defineProps({
+  schemeId: {
+    type: String,
+    required: true,
   },
-
-  emits: ['load'],
-
-  setup(props) {
-    const http = useHttp();
-
-    const dialog = ref(false);
-    const loading = ref(false);
-
-    const page = ref<number>(1);
-    const lastPage = ref<number | undefined>();
-    const search = ref<string | null>(null);
-
-    const prompts = ref<Prompt[]>([]);
-    const selectedId = ref<string | undefined>();
-
-    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 fetchLocally = async (search: string | null, page: number, limit = 5) => {
-      const currentPage = page - 1;
-
-      const filtered = (props.items ?? []).filter(currentItem =>
-        search ? currentItem.name.match(new RegExp(search, 'i')) : true,
-      );
-
-      const items = filtered.slice(currentPage * limit, currentPage * limit + limit);
-      const lastPage = Math.floor(filtered.length / limit) + 1;
-
-      return { items, lastPage };
-    };
-
-    const fetchFromApi = async (search: string | null, page: number, limit = 5) => {
-      const {
-        data: {
-          data: items,
-          meta: { lastPage },
-        },
-      } = await http.get<SurveySchemeTemplates>(
-        `admin/survey-schemes/${props.schemeId}/templates`,
-        { params: { search, page, limit } },
-      );
-
-      return { items, lastPage };
-    };
-
-    const fetch = async () => {
-      loading.value = true;
-
-      try {
-        const result = props.items
-          ? await fetchLocally(search.value, page.value)
-          : await fetchFromApi(search.value, page.value);
-
-        prompts.value = result.items;
-        lastPage.value = result.lastPage;
-      }
-      finally {
-        loading.value = false;
-      }
-    };
-
-    const clear = async () => {
-      search.value = null;
-      await fetch();
-    };
-
-    watch(dialog, async (val) => {
-      if (val && !prompts.value.length)
-        await fetch();
-    });
-
-    watch(page, async () => {
-      await fetch();
-    });
-
-    watchDebounced(
-      search,
-      () => {
-        page.value = 1;
-        fetch();
-      },
-      { debounce: 500, maxWait: 2000 },
-    );
-
-    return {
-      dialog,
-      loading,
-      prompts,
-      selectedId,
-      page,
-      lastPage,
-      search,
-      promptAlreadyExists,
-      selectedPrompt,
-      fetch,
-      clear,
-    };
+  promptIds: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  items: {
+    type: Array as PropType<Prompt[]>,
   },
+});
 
-  methods: {
-    close() {
-      this.selectedId = undefined;
-      this.dialog = false;
-    },
+const emit = defineEmits(['load']);
 
-    cancel() {
-      this.close();
-    },
+const http = useHttp();
+
+const dialog = ref(false);
+const loading = ref(false);
+
+const page = ref<number>(1);
+const lastPage = ref<number | undefined>();
+const search = ref<string | null>(null);
 
-    confirm() {
-      if (!this.selectedPrompt)
-        return;
+const prompts = ref<Prompt[]>([]);
+const selected = ref<Prompt[]>([]);
 
-      this.$emit('load', copy(this.selectedPrompt));
-      this.close();
+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;
+
+  const filtered = (props.items ?? []).filter(currentItem =>
+    search ? currentItem.name.match(new RegExp(search, 'i')) : true,
+  );
+
+  const items = filtered.slice(currentPage * limit, currentPage * limit + limit);
+  const lastPage = Math.floor(filtered.length / limit) + 1;
+
+  return { items, lastPage };
+}
+
+async function fetchFromApi(search: string | null, page: number, limit = 5) {
+  const {
+    data: {
+      data: items,
+      meta: { lastPage },
     },
-  },
+  } = await http.get<SurveySchemeTemplates>(
+    `admin/survey-schemes/${props.schemeId}/templates`,
+    { params: { search, page, limit } },
+  );
+
+  return { items, lastPage };
+}
+
+async function fetch() {
+  loading.value = true;
+
+  try {
+    const result = props.items
+      ? await fetchLocally(search.value, page.value)
+      : await fetchFromApi(search.value, page.value);
+
+    prompts.value = result.items;
+    lastPage.value = result.lastPage;
+  }
+  finally {
+    loading.value = false;
+  }
+}
+
+function close() {
+  selected.value = [];
+  dialog.value = false;
+};
+
+function cancel() {
+  close();
+};
+
+function confirm() {
+  if (!isSelected.value)
+    return;
+
+  emit('load', copy(selected.value.at(0)));
+  close();
+};
+
+async function clear() {
+  search.value = null;
+  await fetch();
+}
+
+watch(dialog, async (val) => {
+  if (val && !prompts.value.length)
+    await fetch();
+});
+
+watch(page, async () => {
+  await fetch();
 });
+
+watchDebounced(
+  search,
+  () => {
+    page.value = 1;
+    fetch();
+  },
+  { debounce: 500, maxWait: 2000 },
+);
 </script>
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 a96230eb5f..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,234 +1,196 @@
 <template>
-  <v-list-item class="drag-and-drop__item" draggable link>
-    <v-list-item-avatar class="drag-and-drop__handle">
-      <v-icon>$handle</v-icon>
-    </v-list-item-avatar>
-    <v-list-item-content>
-      <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-content>
-    <v-list-item-content v-if="!isOverrideMode && hasTemplate">
-      <v-list-item-subtitle>
-        <v-icon :color="isInSyncWithTemplate ? `success` : `warning`" left>
-          $sync
-        </v-icon>
-        <span color="success">
-          {{ $t(`survey-scheme-prompts.sync.${isInSyncWithTemplate ? 'true' : 'false'}`) }}
-        </span>
-      </v-list-item-subtitle>
-    </v-list-item-content>
-    <v-list-item-action>
-      <v-btn icon :title="$t('survey-schemes.prompts.edit')" @click.stop="edit">
-        <v-icon color="secondary lighten-1">
-          $edit
-        </v-icon>
-      </v-btn>
-    </v-list-item-action>
-    <v-list-item-action v-if="!isOverrideMode">
-      <v-menu
-        v-model="contextMenu"
-        close-on-click
-        close-on-content-click
-        max-width="600px"
-        offset-y
-      >
-        <template #activator="{ attrs, on }">
-          <v-btn icon v-bind="attrs" v-on="on">
-            <v-icon color="secondary lighten-1">
-              $options
-            </v-icon>
-          </v-btn>
-        </template>
-        <v-list>
-          <v-list-item link @click="copy">
-            <v-list-item-title>
-              <v-icon left>
-                fas fa-copy
+  <v-list-item>
+    <template #prepend>
+      <v-avatar class="drag-and-drop__handle" icon="$handle" />
+    </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-subtitle v-if="!isOverrideMode && hasTemplate">
+      <v-icon :color="isInSyncWithTemplate ? `success` : `warning`" start>
+        $sync
+      </v-icon>
+      <span color="success">
+        {{ $t(`survey-scheme-prompts.sync.${isInSyncWithTemplate ? 'true' : 'false'}`) }}
+      </span>
+    </v-list-item-subtitle>
+    <template #append>
+      <v-list-item-action>
+        <v-btn icon="$edit" :title="$t('survey-schemes.prompts.edit')" @click.stop="edit" />
+      </v-list-item-action>
+      <v-list-item-action v-if="!isOverrideMode">
+        <v-menu
+          v-model="contextMenu"
+          close-on-content-click
+          max-width="600px"
+          :persistent="false"
+        >
+          <template #activator="{ props }">
+            <v-btn icon v-bind="props">
+              <v-icon color="secondary-lighten-1">
+                $options
               </v-icon>
-              {{ $t('survey-schemes.prompts.copy') }}
-            </v-list-item-title>
-          </v-list-item>
-          <confirm-dialog
-            color="secondary lighten-1"
-            :label="$t('survey-schemes.prompts.move').toString()"
-            max-width="450px"
-            @close="clearMoveToSection"
-            @confirm="move"
-          >
-            <template #activator="{ attrs, on }">
-              <v-list-item link v-bind="attrs" v-on="on">
-                <v-list-item-title>
-                  <v-icon left>
-                    fas fa-exchange-alt
-                  </v-icon>
-                  {{ $t('survey-schemes.prompts.move') }}
-                </v-list-item-title>
-              </v-list-item>
-            </template>
-            <v-select
-              v-model="moveToSection"
-              hide-details="auto"
-              :items="moveSections"
-              :label="$t('survey-schemes.prompts.section')"
-              outlined
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item link @click="copy">
+              <v-list-item-title>
+                <v-icon icon="fas fa-copy" start />
+                {{ $t('survey-schemes.prompts.copy') }}
+              </v-list-item-title>
+            </v-list-item>
+            <confirm-dialog
+              color="secondary-lighten-1"
+              :label="$t('survey-schemes.prompts.move')"
+              max-width="450px"
+              @close="clearMoveToSection"
+              @confirm="move"
+            >
+              <template #activator="{ props }">
+                <v-list-item link v-bind="props">
+                  <v-list-item-title>
+                    <v-icon icon="fas fa-exchange-alt" start />
+                    {{ $t('survey-schemes.prompts.move') }}
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+              <v-select
+                v-model="moveToSection"
+                hide-details="auto"
+                :items="moveSections"
+                :label="$t('survey-schemes.prompts.section')"
+                variant="outlined"
+              />
+            </confirm-dialog>
+            <save-as-template-dialog
+              v-if="can('survey-scheme-prompts|create') && !hasTemplate"
+              :prompt="prompt"
             />
-          </confirm-dialog>
-          <save-as-template-dialog
-            v-if="can('survey-scheme-prompts|create') && !hasTemplate"
-            :prompt="prompt"
-          />
-          <confirm-dialog
-            v-if="hasTemplate && !isInSyncWithTemplate"
-            color="secondary lighten-1"
-            :label="$t('survey-scheme-prompts.sync.synchronize').toString()"
-            max-width="450px"
-            @confirm="sync"
-          >
-            <template #activator="{ attrs, on }">
-              <v-list-item v-bind="attrs" link v-on="on">
-                <v-list-item-title>
-                  <v-icon left>
-                    $sync
-                  </v-icon>
-                  {{ $t('survey-scheme-prompts.sync.synchronize') }}
-                </v-list-item-title>
-              </v-list-item>
-            </template>
-            {{ $t('survey-scheme-prompts.sync.confirm') }}
-          </confirm-dialog>
-        </v-list>
-      </v-menu>
-    </v-list-item-action>
-    <v-list-item-action>
-      <confirm-dialog
-        color="error"
-        icon
-        icon-left="$delete"
-        :label="$t('survey-schemes.prompts.remove').toString()"
-        @confirm="remove"
-      >
-        {{ $t('common.action.confirm.delete', { name: prompt.name }) }}
-      </confirm-dialog>
-    </v-list-item-action>
+            <confirm-dialog
+              v-if="hasTemplate && !isInSyncWithTemplate"
+              color="secondary-lighten-1"
+              :label="$t('survey-scheme-prompts.sync.synchronize')"
+              max-width="450px"
+              @confirm="sync"
+            >
+              <template #activator="{ props }">
+                <v-list-item v-bind="props" link>
+                  <v-list-item-title>
+                    <v-icon icon="$sync" start />
+                    {{ $t('survey-scheme-prompts.sync.synchronize') }}
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+              {{ $t('survey-scheme-prompts.sync.confirm') }}
+            </confirm-dialog>
+          </v-list>
+        </v-menu>
+      </v-list-item-action>
+      <v-list-item-action>
+        <confirm-dialog
+          color="error"
+          icon
+          icon-left="$delete"
+          :label="$t('survey-schemes.prompts.remove')"
+          @confirm="remove"
+        >
+          {{ $t('common.action.confirm.delete', { name: prompt.name }) }}
+        </confirm-dialog>
+      </v-list-item-action>
+    </template>
   </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 f01bc1833a..199e1713fc 100644
--- a/apps/admin/src/components/prompts/list/prompt-list.vue
+++ b/apps/admin/src/components/prompts/list/prompt-list.vue
@@ -1,83 +1,89 @@
 <template>
-  <v-stepper v-model="open" class="pb-6" flat non-linear tile vertical>
-    <v-stepper-step v-bind="{ step }" class="py-2 pointer" @click.stop="toggle">
-      <v-toolbar flat tile>
-        <v-toolbar-title class="font-weight-medium">
-          {{ title }}
+  <v-expansion-panel :value="isOverrideMode ? 'override' : section">
+    <v-expansion-panel-title>
+      <div class="d-flex flex-row justify-content-space-between">
+        <v-avatar class="mr-3" color="primary" size="28">
+          <span class="text-white font-weight-medium text-h6">{{ step }}</span>
+        </v-avatar>
+        <div class="d-flex flex-column">
+          <div class="text-h6">
+            {{ title }}
+          </div>
           <div class="text-subtitle-2">
             {{ subtitle }}
           </div>
-        </v-toolbar-title>
-        <v-spacer />
-        <template v-if="isOpened">
-          <v-btn
-            v-if="!isOverrideMode"
-            color="primary"
-            fab
-            small
-            :title="$t('survey-schemes.prompts.create')"
-            @click.stop="create"
-          >
-            <v-icon small>
-              $add
-            </v-icon>
-          </v-btn>
-          <options-menu>
-            <load-prompt-dialog
-              :items="isOverrideMode ? templates : undefined"
-              :prompt-ids="promptIds"
-              :scheme-id="$route.params.id"
-              @load="load"
-            />
-            <json-editor-dialog v-model="prompts" />
-          </options-menu>
-        </template>
-        <v-icon :class="{ 'fa-rotate-180': isOpened, 'ml-4': isOpened }">
-          $expand
-        </v-icon>
-      </v-toolbar>
-    </v-stepper-step>
-    <v-stepper-content v-bind="{ step }">
-      <v-list two-line>
-        <draggable v-model="prompts" handle=".drag-and-drop__handle">
-          <transition-group name="drag-and-drop" type="transition">
-            <prompt-list-item
-              v-for="(prompt, index) in prompts"
-              :key="`${prompt.id}:${prompt.name}`"
-              v-bind="{ mode, prompt, index, templates }"
-              :move-sections="moveSections(prompt)"
-              @prompt:copy="copy"
-              @prompt:edit="edit"
-              @prompt:move="move"
-              @prompt:remove="remove"
-              @prompt:sync="sync"
+        </div>
+      </div>
+      <template #actions="{ expanded }">
+        <div class="d-flex align-center">
+          <template v-if="expanded">
+            <v-btn
+              v-if="!isOverrideMode"
+              color="primary"
+              icon="$add"
+              size="small"
+              :title="$t('survey-schemes.prompts.create')"
+              @click.stop="create"
             />
-          </transition-group>
-        </draggable>
+            <options-menu>
+              <load-prompt-dialog
+                :items="isOverrideMode ? templates : undefined"
+                :prompt-ids="promptIds"
+                :scheme-id="$route.params.id"
+                @load="load"
+              />
+              <json-editor-dialog v-model="prompts" />
+            </options-menu>
+          </template>
+          <v-icon class="ms-2" :icon="expanded ? '$expand' : '$collapse'" />
+        </div>
+      </template>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
+      <v-list class="list-border" lines="two">
+        <vue-draggable
+          v-model="prompts"
+          :animation="300"
+          handle=".drag-and-drop__handle"
+        >
+          <prompt-list-item
+            v-for="(prompt, index) in prompts"
+            :key="`${prompt.id}:${prompt.name}`"
+            v-bind="{ mode, prompt, index, templates }"
+            :move-sections="moveSections(prompt)"
+            @prompt:copy="copy"
+            @prompt:edit="edit"
+            @prompt:move="move"
+            @prompt:remove="remove"
+            @prompt:sync="sync"
+          />
+        </vue-draggable>
       </v-list>
-    </v-stepper-content>
-    <prompt-selector ref="selector" v-bind="{ mode, section, promptIds }" @save="save" />
-  </v-stepper>
+      <prompt-selector ref="selector" v-bind="{ mode, section, promptIds }" @save="save" />
+    </v-expansion-panel-text>
+  </v-expansion-panel>
+  <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 draggable from 'vuedraggable';
+import { computed, ref, watch } from 'vue';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { SinglePrompt } from '@intake24/common/prompts';
 import type { MealSection, PromptSection, SurveyPromptSection } from '@intake24/common/surveys';
 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';
 import PromptListItem from './prompt-list-item.vue';
 
-export type MoveSection = { value: string; text: string };
+export type MoveSection = { value: string; title: string };
 
 export type PromptEvent = {
   index: number;
@@ -88,163 +94,124 @@ export interface PromptMoveEvent extends PromptEvent {
   section: MealSection | SurveyPromptSection;
 }
 
-export default defineComponent({
-  name: 'PromptList',
+defineOptions({ name: 'PromptList' });
 
-  components: {
-    Draggable: draggable,
-    JsonEditorDialog,
-    LoadPromptDialog,
-    OptionsMenu,
-    PromptListItem,
-    PromptSelector,
+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`,
-      ).toString();
-    },
-    subtitle(): string {
-      return this.$t(
-        this.isOverrideMode
-          ? `survey-schemes.overrides.prompts.subtitle`
-          : `survey-schemes.prompts.${this.section}.subtitle`,
-      ).toString();
-    },
-  },
+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,
-        text: this.$t(`survey-schemes.prompts.${item}.title`).toString(),
-      }));
-    },
-
-    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>
 
 <style lang="scss">
-.pointer {
-  cursor: pointer;
-}
 </style>
diff --git a/apps/admin/src/components/prompts/list/save-as-template-dialog.vue b/apps/admin/src/components/prompts/list/save-as-template-dialog.vue
index df1e2360c7..5d49f5acab 100644
--- a/apps/admin/src/components/prompts/list/save-as-template-dialog.vue
+++ b/apps/admin/src/components/prompts/list/save-as-template-dialog.vue
@@ -1,20 +1,18 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-list-item v-bind="attrs" :disabled="disabled" link v-on="on">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-list-item :disabled="disabled" link v-bind="props">
         <v-list-item-title>
-          <v-icon :disabled="disabled" left>
+          <v-icon :disabled="disabled" start>
             $save
           </v-icon>
           {{ $t('survey-schemes.prompts.templates.saveAs._') }}
         </v-list-item-title>
       </v-list-item>
     </template>
-    <v-card :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="cancel">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="cancel" />
         <v-toolbar-title>
           {{ $t('survey-schemes.prompts.templates.saveAs.title') }}
         </v-toolbar-title>
@@ -29,7 +27,7 @@
               :label="$t('survey-schemes.prompts.internal.id._')"
               :messages="$t('survey-schemes.prompts.internal.id.hint')"
               name="id"
-              outlined
+              variant="outlined"
             />
           </v-col>
           <v-col cols="12">
@@ -40,26 +38,22 @@
               :label="$t('survey-schemes.prompts.internal.name._')"
               :messages="$t('survey-schemes.prompts.internal.name.hint')"
               name="name"
-              outlined
+              variant="outlined"
             />
           </v-col>
           <v-col cols="12">
-            <v-checkbox v-model="redirect" :label="$t('common.redirect')" />
+            <v-checkbox-btn v-model="redirect" :label="$t('common.redirect')" />
           </v-col>
         </v-row>
       </v-card-text>
       <error-list :errors="nonInputErrors" tag="v-card-text" />
       <v-card-actions class="pb-4">
-        <v-btn class="font-weight-bold" color="error" text @click.stop="cancel">
-          <v-icon left>
-            $cancel
-          </v-icon>{{ $t('common.action.cancel') }}
+        <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="cancel">
+          <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
-        <v-btn class="font-weight-bold" color="info" text @click.stop="confirm">
-          <v-icon left>
-            $success
-          </v-icon>{{ $t('survey-schemes.prompts.templates.saveAs._') }}
+        <v-btn class="font-weight-bold" color="info" variant="text" @click.stop="confirm">
+          <v-icon icon="$success" start />{{ $t('survey-schemes.prompts.templates.saveAs._') }}
         </v-btn>
       </v-card-actions>
     </v-card>
diff --git a/apps/admin/src/components/prompts/partials/barcode-settings.vue b/apps/admin/src/components/prompts/partials/barcode-settings.vue
index dfc5cace49..30e01b08ad 100644
--- a/apps/admin/src/components/prompts/partials/barcode-settings.vue
+++ b/apps/admin/src/components/prompts/partials/barcode-settings.vue
@@ -1,9 +1,7 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
-      <v-icon left>
-        fas fa-barcode
-      </v-icon>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
+      <v-icon icon="fas fa-barcode" start />
       <v-toolbar-title>
         {{ $t('survey-schemes.prompts.barcodes.title') }}
       </v-toolbar-title>
@@ -12,35 +10,35 @@
       <v-select
         :items="barcodes"
         :label="$t('survey-schemes.prompts.barcodes.providers._')"
+        :model-value="barcode.type"
         name="barcode"
-        outlined
-        :value="barcode.type"
-        @input="update('type', $event)"
+        variant="outlined"
+        @update:model-value="update('type', $event)"
       />
       <template v-if="barcode.type !== 'none'">
         <v-select
 
           :items="readers"
           :label="$t('survey-schemes.prompts.barcodes.readers._')"
+          :model-value="barcode.readers"
           multiple
           name="readers"
-          outlined
-          :value="barcode.readers"
-          @input="update('readers', $event)"
+          variant="outlined"
+          @update:model-value="update('readers', $event)"
         />
         <v-label>{{ $t('survey-schemes.prompts.barcodes.feedback._') }}</v-label>
         <v-switch
           hide-details="auto"
-          :input-value="barcode.feedback.vibration"
           :label="$t('survey-schemes.prompts.barcodes.feedback.vibration')"
-          @change="update('feedback', { ...barcode.feedback, vibration: $event })"
+          :model-value="barcode.feedback.vibration"
+          @update:model-value="update('feedback', { ...barcode.feedback, vibration: $event })"
         />
         <v-switch
           disabled
           hide-details="auto"
-          :input-value="barcode.feedback.audio"
           :label="$t('survey-schemes.prompts.barcodes.feedback.audio')"
-          @change="update('feedback', { ...barcode.feedback, audio: $event })"
+          :model-value="barcode.feedback.audio"
+          @update:model-value="update('feedback', { ...barcode.feedback, audio: $event })"
         />
       </template>
     </v-card-text>
@@ -72,7 +70,7 @@ export default defineComponent({
     const { i18n } = useI18n();
 
     const barcodes = barcodeScanners.map(value => ({
-      text: i18n.t(`survey-schemes.prompts.barcodes.providers.${value}`).toString(),
+      title: i18n.t(`survey-schemes.prompts.barcodes.providers.${value}`),
       value,
     }));
 
diff --git a/apps/admin/src/components/prompts/partials/base-prompt.ts b/apps/admin/src/components/prompts/partials/base-prompt.ts
index 5cb413250d..fd5fd35de9 100644
--- a/apps/admin/src/components/prompts/partials/base-prompt.ts
+++ b/apps/admin/src/components/prompts/partials/base-prompt.ts
@@ -5,18 +5,18 @@ export default defineComponent({
 
   methods: {
     update(field: string, value: any) {
-      this.$emit(`update:${field}`, value);
+      this.$emit('update:options', { [field]: value });
     },
     updateNumber(field: string, value: any, fallback = null) {
       const number = Number(value);
-      this.$emit(`update:${field}`, Number.isNaN(number) ? fallback : number);
+      this.$emit('update:options', { [field]: Number.isNaN(number) ? fallback : number });
     },
     updateInteger(field: string, value: any, fallback = null) {
       const integer = Number.parseInt(value, 10);
-      this.$emit(`update:${field}`, Number.isNaN(integer) ? fallback : integer);
+      this.$emit('update:options', { [field]: Number.isNaN(integer) ? fallback : integer });
     },
     updateLanguage(field: string, lang: string, value: any) {
-      this.$emit(`update:${field}`, { ...this.$props[field], [lang]: value });
+      this.$emit('update:options', { [field]: { ...this.$props[field], [lang]: value } });
     },
   },
 });
diff --git a/apps/admin/src/components/prompts/partials/conditions/boolean-check.vue b/apps/admin/src/components/prompts/partials/conditions/boolean-check.vue
index 4211e7705c..b66bbc7578 100644
--- a/apps/admin/src/components/prompts/partials/conditions/boolean-check.vue
+++ b/apps/admin/src/components/prompts/partials/conditions/boolean-check.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <v-checkbox v-model="currentValue.value" :label="$t('survey-schemes.conditions.showIfTrue')" @change="update(currentValue)" />
+      <v-checkbox-btn v-model="currentValue.value" :label="$t('survey-schemes.conditions.showIfTrue')" @update:model-value="update(currentValue)" />
     </v-col>
   </v-row>
 </template>
@@ -15,17 +15,19 @@ export default defineComponent({
   name: 'BooleanPropertyCheck',
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<BooleanPropertyCheck>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
-    const currentValue = ref(props.value);
+    const currentValue = ref(props.modelValue);
 
     const update = (value: BooleanPropertyCheck) => {
-      emit('update:value', value);
+      emit('update:modelValue', value);
     };
     return { update, currentValue };
   },
diff --git a/apps/admin/src/components/prompts/partials/conditions/flag-check.vue b/apps/admin/src/components/prompts/partials/conditions/flag-check.vue
index bfd9796bbd..5e449446ad 100644
--- a/apps/admin/src/components/prompts/partials/conditions/flag-check.vue
+++ b/apps/admin/src/components/prompts/partials/conditions/flag-check.vue
@@ -5,12 +5,12 @@
         v-model="currentValue.flagId"
         hide-details="auto"
         :label="$t('survey-schemes.conditions.flag.id')"
-        outlined
+        variant="outlined"
         @change="update(currentValue)"
       />
     </v-col>
     <v-col cols="12" md="6">
-      <v-checkbox v-model="currentValue.value" :label="$t('survey-schemes.conditions.flag.showIfSet')" @change="update(currentValue)" />
+      <v-checkbox-btn v-model="currentValue.value" :label="$t('survey-schemes.conditions.flag.showIfSet')" @update:model-value="update(currentValue)" />
     </v-col>
   </v-row>
 </template>
@@ -24,17 +24,19 @@ export default defineComponent({
   name: 'FlagPropertyCheck',
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<FlagPropertyCheck>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
-    const currentValue = ref(props.value);
+    const currentValue = ref(props.modelValue);
 
     const update = (value: FlagPropertyCheck) => {
-      emit('update:value', value);
+      emit('update:modelValue', value);
     };
     return { update, currentValue };
   },
diff --git a/apps/admin/src/components/prompts/partials/conditions/food-completion-check.vue b/apps/admin/src/components/prompts/partials/conditions/food-completion-check.vue
index 1ece11e1b1..28885dbe44 100644
--- a/apps/admin/src/components/prompts/partials/conditions/food-completion-check.vue
+++ b/apps/admin/src/components/prompts/partials/conditions/food-completion-check.vue
@@ -7,8 +7,8 @@
         item-value="state"
         :items="completionStateSelectList"
         :label="$t('survey-schemes.conditions.property.foodCompletion')"
-        outlined
-        @change="update(currentValue)"
+        variant="outlined"
+        @update:model-value="update(currentValue)"
       />
     </v-col>
   </v-row>
@@ -24,21 +24,23 @@ export default defineComponent({
   name: 'FoodCompletionPropertyCheck',
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<MealCompletionPropertyCheck>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const { i18n } = useI18n();
 
-    const currentValue = ref(props.value);
+    const currentValue = ref(props.modelValue);
 
-    const completionStateSelectList = foodCompletionStateOptions.map(state => ({ state, text: i18n.t(`survey-schemes.conditions.foodCompletion.${state}`).toString() }));
+    const completionStateSelectList = foodCompletionStateOptions.map(state => ({ state, title: i18n.t(`survey-schemes.conditions.foodCompletion.${state}`) }));
 
     const update = (value: MealCompletionPropertyCheck) => {
-      emit('update:value', value);
+      emit('update:modelValue', value);
     };
     return { completionStateSelectList, update, currentValue };
   },
diff --git a/apps/admin/src/components/prompts/partials/conditions/meal-completion-check.vue b/apps/admin/src/components/prompts/partials/conditions/meal-completion-check.vue
index 37d79da149..8a9671e925 100644
--- a/apps/admin/src/components/prompts/partials/conditions/meal-completion-check.vue
+++ b/apps/admin/src/components/prompts/partials/conditions/meal-completion-check.vue
@@ -7,8 +7,8 @@
         item-value="state"
         :items="completionStateSelectList"
         :label="$t('survey-schemes.conditions.property.mealCompletion')"
-        outlined
-        @change="update(currentValue)"
+        variant="outlined"
+        @update:model-value="update(currentValue)"
       />
     </v-col>
   </v-row>
@@ -24,21 +24,23 @@ export default defineComponent({
   name: 'MealCompletionPropertyCheck',
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<MealCompletionPropertyCheck>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const { i18n } = useI18n();
 
-    const currentValue = ref(props.value);
+    const currentValue = ref(props.modelValue);
 
-    const completionStateSelectList = foodCompletionStateOptions.map(state => ({ state, text: i18n.t(`survey-schemes.conditions.foodCompletion.${state}`).toString() }));
+    const completionStateSelectList = foodCompletionStateOptions.map(state => ({ state, title: i18n.t(`survey-schemes.conditions.foodCompletion.${state}`) }));
 
     const update = (value: MealCompletionPropertyCheck) => {
-      emit('update:value', value);
+      emit('update:modelValue', value);
     };
     return { completionStateSelectList, update, currentValue };
   },
diff --git a/apps/admin/src/components/prompts/partials/conditions/prompt-answer-check.vue b/apps/admin/src/components/prompts/partials/conditions/prompt-answer-check.vue
index 3bdd97180d..6ede75ac81 100644
--- a/apps/admin/src/components/prompts/partials/conditions/prompt-answer-check.vue
+++ b/apps/admin/src/components/prompts/partials/conditions/prompt-answer-check.vue
@@ -5,7 +5,7 @@
         v-model="currentValue.promptId"
         hide-details="auto"
         :label="$t('survey-schemes.conditions.promptAnswer.promptId')"
-        outlined
+        variant="outlined"
         @change="update(currentValue)"
       />
     </v-col>
@@ -16,20 +16,20 @@
         item-value="op"
         :items="conditionOps"
         :label="$t('survey-schemes.conditions.ops._')"
-        outlined
-        @change="update(currentValue)"
+        variant="outlined"
+        @update:model-value="update(currentValue)"
       >
-        <template #item="{ item }">
-          <v-icon left>
-            {{ item.icon }}
-          </v-icon>
-          {{ item.text }}
+        <template #item="{ item, props }">
+          <v-list-item v-bind="props">
+            <template #prepend>
+              <v-icon :icon="item.raw.icon" start />
+            </template>
+            <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+          </v-list-item>
         </template>
         <template #selection="{ item }">
-          <v-icon left>
-            {{ item.icon }}
-          </v-icon>
-          {{ item.text }}
+          <v-icon :icon="item.raw.icon" start />
+          {{ item.raw.title }}
         </template>
       </v-select>
     </v-col>
@@ -46,14 +46,14 @@
       />
     </v-col>
     <v-col cols="12" md="6">
-      <v-checkbox v-model="currentValue.required" :label="$t('survey-schemes.conditions.promptAnswer.required')" @change="update(currentValue)" />
+      <v-checkbox v-model="currentValue.required" :label="$t('survey-schemes.conditions.promptAnswer.required')" @update:model-value="update(currentValue)" />
     </v-col>
   </v-row>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType, ref } from 'vue';
-import { VCombobox, VTextField } from 'vuetify/lib';
+import { VCombobox, VTextField } from 'vuetify/components';
 
 import type {
   PromptAnswerPropertyCheck,
@@ -66,19 +66,21 @@ export default defineComponent({
   components: { VTextField, VCombobox },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<PromptAnswerPropertyCheck>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const { conditionOps } = useSelects();
 
-    const currentValue = ref(props.value);
+    const currentValue = ref(props.modelValue);
 
     const update = (value: PromptAnswerPropertyCheck) => {
-      emit('update:value', value);
+      emit('update:modelValue', value);
     };
 
     const comboOps = ['setEq', 'in', 'notIn'];
diff --git a/apps/admin/src/components/prompts/partials/conditions/summary.vue b/apps/admin/src/components/prompts/partials/conditions/summary.vue
index 22f6e5d957..5cf00ad55f 100644
--- a/apps/admin/src/components/prompts/partials/conditions/summary.vue
+++ b/apps/admin/src/components/prompts/partials/conditions/summary.vue
@@ -3,7 +3,7 @@
     <v-label class="mr-2">{{ $t(`survey-schemes.conditions.showIf`) }}</v-label>
     <v-label v-dompurify-html:i18n="info.summaryHtml" />
     <div v-if="info.showOp">
-      <v-icon left right small>{{ info.icon }}</v-icon>
+      <v-icon end size="small" start>{{ info.icon }}</v-icon>
       <v-label class="align-baseline">{{ info.check.value || '?' }}</v-label>
       <v-label
         v-if="info.showNotRequired" v-dompurify-html:i18n="$t(`survey-schemes.conditions.summary.notRequired`)" class="ml-2 align-baseline"
@@ -34,34 +34,34 @@ export default defineComponent({
   setup(props) {
     const { i18n } = useI18n();
     const getSummaryHtml = (condition: Condition): string => {
-      const object = i18n.t(`survey-schemes.conditions.object.${condition.object}`).toString().toLocaleLowerCase();
-      const property = i18n.t(`survey-schemes.conditions.property.${condition.property.id}`).toString().toLocaleLowerCase();
+      const object = i18n.t(`survey-schemes.conditions.object.${condition.object}`).toLocaleLowerCase();
+      const property = i18n.t(`survey-schemes.conditions.property.${condition.property.id}`).toLocaleLowerCase();
 
       switch (condition.property.type) {
         case 'flag': {
           return condition.property.check.value
-            ? i18n.t(`survey-schemes.conditions.summary.flag.set`, { id: condition.property.check.flagId || '?', object }).toString()
-            : i18n.t(`survey-schemes.conditions.summary.flag.notSet`, { id: condition.property.check.flagId || '?', object }).toString();
+            ? i18n.t(`survey-schemes.conditions.summary.flag.set`, { id: condition.property.check.flagId || '?', object })
+            : i18n.t(`survey-schemes.conditions.summary.flag.notSet`, { id: condition.property.check.flagId || '?', object });
         }
         case 'tag': {
           return condition.property.check.value
-            ? i18n.t(`survey-schemes.conditions.summary.tag.present`, { id: condition.property.check.tagId || '?', object }).toString()
-            : i18n.t(`survey-schemes.conditions.summary.tag.absent`, { id: condition.property.check.tagId || '?', object }).toString();
+            ? i18n.t(`survey-schemes.conditions.summary.tag.present`, { id: condition.property.check.tagId || '?', object })
+            : i18n.t(`survey-schemes.conditions.summary.tag.absent`, { id: condition.property.check.tagId || '?', object });
         }
         case 'boolean': {
-          const value = (condition.property.check.value ? i18n.t(`common.yes`) : i18n.t(`common.no`)).toString().toLocaleLowerCase();
-          return i18n.t(`survey-schemes.conditions.summary.boolean`, { object, property, value }).toString();
+          const value = (condition.property.check.value ? i18n.t(`common.yes`) : i18n.t(`common.no`)).toLocaleLowerCase();
+          return i18n.t(`survey-schemes.conditions.summary.boolean`, { object, property, value });
         }
         case 'value':
-          return i18n.t(`survey-schemes.conditions.summary.value`, { object, property }).toString();
+          return i18n.t(`survey-schemes.conditions.summary.value`, { object, property });
         case 'promptAnswer':
-          return i18n.t(`survey-schemes.conditions.summary.promptAnswer`, { object, property, promptId: condition.property.check.promptId || '?' }).toString();
+          return i18n.t(`survey-schemes.conditions.summary.promptAnswer`, { object, property, promptId: condition.property.check.promptId || '?' });
         case 'userField':
-          return i18n.t(`survey-schemes.conditions.summary.userField`, { object, property, field: condition.property.check.field || '?' }).toString();
+          return i18n.t(`survey-schemes.conditions.summary.userField`, { object, property, field: condition.property.check.field || '?' });
         case 'mealCompletion':
-          return i18n.t(`survey-schemes.conditions.summary.mealCompletion.${condition.property.check.completionState}`, { object }).toString();
+          return i18n.t(`survey-schemes.conditions.summary.mealCompletion.${condition.property.check.completionState}`, { object });
         case 'foodCompletion':
-          return i18n.t(`survey-schemes.conditions.summary.foodCompletion.${condition.property.check.completionState}`, { object }).toString();
+          return i18n.t(`survey-schemes.conditions.summary.foodCompletion.${condition.property.check.completionState}`, { object });
         default:
           throw new Error(`Unexpected condition property type: ${condition.property.type}`);
       }
diff --git a/apps/admin/src/components/prompts/partials/conditions/tag-check.vue b/apps/admin/src/components/prompts/partials/conditions/tag-check.vue
index d7e918800e..dd6e91df1e 100644
--- a/apps/admin/src/components/prompts/partials/conditions/tag-check.vue
+++ b/apps/admin/src/components/prompts/partials/conditions/tag-check.vue
@@ -5,12 +5,12 @@
         v-model="currentValue.tagId"
         hide-details="auto"
         :label="$t('survey-schemes.conditions.tag.id')"
-        outlined
+        variant="outlined"
         @change="update(currentValue)"
       />
     </v-col>
     <v-col cols="12" md="6">
-      <v-checkbox v-model="currentValue.value" :label="$t('survey-schemes.conditions.tag.showIfSet')" @change="update(currentValue)" />
+      <v-checkbox-btn v-model="currentValue.value" :label="$t('survey-schemes.conditions.tag.showIfSet')" @update:model-value="update(currentValue)" />
     </v-col>
   </v-row>
 </template>
@@ -24,17 +24,19 @@ export default defineComponent({
   name: 'TagPropertyCheck',
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<TagPropertyCheck>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
-    const currentValue = ref(props.value);
+    const currentValue = ref(props.modelValue);
 
     const update = (value: TagPropertyCheck) => {
-      emit('update:value', value);
+      emit('update:modelValue', value);
     };
     return { update, currentValue };
   },
diff --git a/apps/admin/src/components/prompts/partials/conditions/user-field-check.vue b/apps/admin/src/components/prompts/partials/conditions/user-field-check.vue
index 48837fef98..7282300ce5 100644
--- a/apps/admin/src/components/prompts/partials/conditions/user-field-check.vue
+++ b/apps/admin/src/components/prompts/partials/conditions/user-field-check.vue
@@ -3,13 +3,12 @@
     <v-col cols="12" md="6">
       <v-combobox
         v-model="currentValue.field"
-        deletable-chips
+        closable-chips
         hide-details="auto"
         :items="standardUserFields"
         :label="$t('survey-schemes.conditions.userField.field')"
-        outlined
-        small-chips
-        @change="update(currentValue)"
+        variant="outlined"
+        @update:model-value="update(currentValue)"
       />
     </v-col>
     <v-col cols="12" md="6">
@@ -19,20 +18,20 @@
         item-value="op"
         :items="conditionOps"
         :label="$t('survey-schemes.conditions.ops._')"
-        outlined
-        @change="update(currentValue)"
+        variant="outlined"
+        @update:model-value="update(currentValue)"
       >
-        <template #item="{ item }">
-          <v-icon left>
-            {{ item.icon }}
-          </v-icon>
-          {{ item.text }}
+        <template #item="{ item, props }">
+          <v-list-item v-bind="props">
+            <template #prepend>
+              <v-icon :icon="item.raw.icon" start />
+            </template>
+            <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+          </v-list-item>
         </template>
         <template #selection="{ item }">
-          <v-icon left>
-            {{ item.icon }}
-          </v-icon>
-          {{ item.text }}
+          <v-icon :icon="item.raw.icon" start />
+          {{ item.raw.title }}
         </template>
       </v-select>
     </v-col>
@@ -53,7 +52,7 @@
 
 <script lang="ts">
 import { defineComponent, type PropType, ref } from 'vue';
-import { VCombobox, VTextField } from 'vuetify/lib';
+import { VCombobox, VTextField } from 'vuetify/components';
 
 import { useSelects } from '@intake24/admin/composables';
 import {
@@ -67,19 +66,21 @@ export default defineComponent({
   components: { VTextField, VCombobox },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<UserFieldPropertyCheck>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const { conditionOps } = useSelects();
 
-    const currentValue = ref(props.value);
+    const currentValue = ref(props.modelValue);
 
     const update = (value: UserFieldPropertyCheck) => {
-      emit('update:value', value);
+      emit('update:modelValue', value);
     };
 
     const comboOps = ['setEq', 'in', 'notIn'];
diff --git a/apps/admin/src/components/prompts/partials/conditions/value-check.vue b/apps/admin/src/components/prompts/partials/conditions/value-check.vue
index da8d4d7009..226df26d60 100644
--- a/apps/admin/src/components/prompts/partials/conditions/value-check.vue
+++ b/apps/admin/src/components/prompts/partials/conditions/value-check.vue
@@ -7,20 +7,20 @@
         item-value="op"
         :items="conditionOps"
         :label="$t('survey-schemes.conditions.ops._')"
-        outlined
-        @change="update(currentValue)"
+        variant="outlined"
+        @update:model-value="update(currentValue)"
       >
-        <template #item="{ item }">
-          <v-icon left>
-            {{ item.icon }}
-          </v-icon>
-          {{ item.text }}
+        <template #item="{ item, props }">
+          <v-list-item v-bind="props">
+            <template #prepend>
+              <v-icon :icon="item.raw.icon" start />
+            </template>
+            <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+          </v-list-item>
         </template>
         <template #selection="{ item }">
-          <v-icon left>
-            {{ item.icon }}
-          </v-icon>
-          {{ item.text }}
+          <v-icon :icon="item.raw.icon" start />
+          {{ item.raw.title }}
         </template>
       </v-select>
     </v-col>
@@ -39,7 +39,7 @@
 
 <script lang="ts">
 import { defineComponent, type PropType, ref } from 'vue';
-import { VCombobox, VTextField } from 'vuetify/lib';
+import { VCombobox, VTextField } from 'vuetify/components';
 
 import type { ValuePropertyCheck } from '@intake24/common/prompts';
 import { useSelects } from '@intake24/admin/composables';
@@ -50,19 +50,21 @@ export default defineComponent({
   components: { VTextField, VCombobox },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<ValuePropertyCheck>,
       required: true,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const { conditionOps } = useSelects();
 
-    const currentValue = ref(props.value);
+    const currentValue = ref(props.modelValue);
 
     const update = (value: ValuePropertyCheck) => {
-      emit('update:value', value);
+      emit('update:modelValue', value);
     };
 
     const comboOps = ['setEq', 'in', 'notIn'];
diff --git a/apps/admin/src/components/prompts/partials/counter-settings.vue b/apps/admin/src/components/prompts/partials/counter-settings.vue
index 3e07c56a41..86e637691e 100644
--- a/apps/admin/src/components/prompts/partials/counter-settings.vue
+++ b/apps/admin/src/components/prompts/partials/counter-settings.vue
@@ -1,9 +1,7 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
-      <v-icon left>
-        fas fa-calculator
-      </v-icon>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
+      <v-icon icon="fas fa-calculator" start />
       <v-toolbar-title>
         {{ $t('survey-schemes.prompts.counter.title') }}
       </v-toolbar-title>
@@ -17,8 +15,8 @@
               hide-details="auto"
               :label="$t('survey-schemes.prompts.counter.current')"
               name="current"
-              outlined
               :rules="isNumber"
+              variant="outlined"
             />
             <v-text-field
               v-model.number="counter.min"
@@ -26,8 +24,8 @@
               hide-details="auto"
               :label="$t('survey-schemes.prompts.counter.min')"
               name="min"
-              outlined
               :rules="isNumber"
+              variant="outlined"
             />
             <v-text-field
               v-model.number="counter.max"
@@ -35,8 +33,8 @@
               hide-details="auto"
               :label="$t('survey-schemes.prompts.counter.max')"
               name="max"
-              outlined
               :rules="isNumber"
+              variant="outlined"
             />
           </v-card-text>
         </v-col>
diff --git a/apps/admin/src/components/prompts/partials/external-source-settings.vue b/apps/admin/src/components/prompts/partials/external-source-settings.vue
index 716d8d1141..954140d002 100644
--- a/apps/admin/src/components/prompts/partials/external-source-settings.vue
+++ b/apps/admin/src/components/prompts/partials/external-source-settings.vue
@@ -1,9 +1,7 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
-      <v-icon left>
-        fas fa-globe
-      </v-icon>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
+      <v-icon icon="fas fa-globe" start />
       <v-toolbar-title>
         {{ $t('survey-schemes.prompts.externalSources.title') }}
       </v-toolbar-title>
@@ -12,20 +10,20 @@
       <v-select
         :items="sources"
         :label="$t('survey-schemes.prompts.externalSources.sources._')"
+        :model-value="source.type"
         name="source"
-        outlined
-        :value="source.type"
-        @input="update('type', $event)"
+        variant="outlined"
+        @update:model-value="update('type', $event)"
       />
       <template v-if="source.type === 'open-food-facts'">
         <v-combobox
 
           :items="countries"
           :label="$t('survey-schemes.prompts.externalSources.countries._')"
+          :model-value="source.country"
           name="country"
-          outlined
-          :value="source.country"
-          @input="update('country', $event)"
+          variant="outlined"
+          @update:model-value="update('country', $event)"
         />
         <v-toolbar flat tile>
           <v-toolbar-title class="font-weight-medium">
@@ -34,8 +32,8 @@
             </div>
           </v-toolbar-title>
           <v-spacer />
-          <v-btn color="primary" fab small :title="$t('common.options.add')" @click.stop="addQuery">
-            <v-icon small>
+          <v-btn color="primary" size="small" :title="$t('common.options.add')" @click.stop="addQuery">
+            <v-icon size="small">
               $add
             </v-icon>
           </v-btn>
@@ -47,29 +45,27 @@
           link
           :ripple="false"
         >
-          <v-list-item-content class="d-flex flex-row align-stretch ga-2">
+          <div class="d-flex flex-row align-stretch ga-2">
             <v-text-field
               v-model="item.key"
-              dense
+              density="compact"
               hide-details="auto"
               :label="$t('common.options.key')"
-              outlined
+              variant="outlined"
             />
             <v-text-field
               v-model="item.value"
-              dense
+              density="compact"
               hide-details="auto"
               :label="$t('common.options.value')"
-              outlined
+              variant="outlined"
             />
-          </v-list-item-content>
-          <v-list-item-action>
-            <v-btn icon :title="$t('common.options.remove')" @click.stop="removeQuery(idx)">
-              <v-icon color="error">
-                $delete
-              </v-icon>
-            </v-btn>
-          </v-list-item-action>
+          </div>
+          <template #append>
+            <v-list-item-action>
+              <v-btn color="error" icon="$delete" :title="$t('common.options.remove')" @click.stop="removeQuery(idx)" />
+            </v-list-item-action>
+          </template>
         </v-list-item>
       </template>
     </v-card-text>
@@ -101,7 +97,7 @@ export default defineComponent({
     const { i18n } = useI18n();
 
     const sources = externalSources.map(value => ({
-      text: i18n.t(`survey-schemes.prompts.externalSources.sources.${value}`).toString(),
+      title: i18n.t(`survey-schemes.prompts.externalSources.sources.${value}`),
       value,
     }));
 
diff --git a/apps/admin/src/components/prompts/partials/food-browser-settings.vue b/apps/admin/src/components/prompts/partials/food-browser-settings.vue
index 8edd5f71ae..bbfb7494fd 100644
--- a/apps/admin/src/components/prompts/partials/food-browser-settings.vue
+++ b/apps/admin/src/components/prompts/partials/food-browser-settings.vue
@@ -1,9 +1,7 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
-      <v-icon left>
-        $search
-      </v-icon>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
+      <v-icon icon="$search" start />
       <v-toolbar-title>
         {{ $t('survey-schemes.prompts.foodBrowser._') }}
       </v-toolbar-title>
@@ -12,15 +10,15 @@
       <v-label>{{ $t('survey-schemes.prompts.foodBrowser.categoriesFirst._') }}</v-label>
       <v-switch
         hide-details="auto"
-        :input-value="categoriesFirst.browse"
         :label="$t('survey-schemes.prompts.foodBrowser.categoriesFirst.browse')"
-        @change="update('browse', $event)"
+        :model-value="categoriesFirst.browse"
+        @update:model-value="update('browse', $event)"
       />
       <v-switch
         hide-details="auto"
-        :input-value="categoriesFirst.search"
         :label="$t('survey-schemes.prompts.foodBrowser.categoriesFirst.search')"
-        @change="update('search', $event)"
+        :model-value="categoriesFirst.search"
+        @update:model-value="update('search', $event)"
       />
     </v-card-text>
   </v-card>
diff --git a/apps/admin/src/components/prompts/partials/image-map-settings.vue b/apps/admin/src/components/prompts/partials/image-map-settings.vue
index 9bedf57c2b..eeadd863e9 100644
--- a/apps/admin/src/components/prompts/partials/image-map-settings.vue
+++ b/apps/admin/src/components/prompts/partials/image-map-settings.vue
@@ -1,9 +1,7 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
-      <v-icon left>
-        $image-maps
-      </v-icon>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
+      <v-icon icon="$image-maps" start />
       <v-toolbar-title>
         {{ $t('survey-schemes.prompts.imageMap._') }}
       </v-toolbar-title>
@@ -11,15 +9,15 @@
     <v-card-text>
       <v-switch
         hide-details="auto"
-        :input-value="imageMap.labels"
         :label="$t('survey-schemes.prompts.imageMap.labels')"
-        @change="update('labels', $event)"
+        :model-value="imageMap.labels"
+        @update:model-value="update('labels', $event)"
       />
       <v-switch
         hide-details="auto"
-        :input-value="imageMap.pinchZoom"
         :label="$t('survey-schemes.prompts.imageMap.pinchZoom')"
-        @change="update('pinchZoom', $event)"
+        :model-value="imageMap.pinchZoom"
+        @update:model-value="update('pinchZoom', $event)"
       />
     </v-card-text>
   </v-card>
diff --git a/apps/admin/src/components/prompts/partials/prompt-actions.vue b/apps/admin/src/components/prompts/partials/prompt-actions.vue
index 80411291be..f97cf83da4 100644
--- a/apps/admin/src/components/prompts/partials/prompt-actions.vue
+++ b/apps/admin/src/components/prompts/partials/prompt-actions.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-tab-item key="actions" value="actions">
+  <v-tabs-window-item key="actions" value="actions">
     <v-col cols="12">
       <v-switch
         v-model="toggle"
         hide-details="auto"
         :label="$t('survey-schemes.actions.enable')"
-        @change="changeToggle"
+        @update:model-value="changeToggle"
       />
     </v-col>
     <template v-if="currentActions">
@@ -19,166 +19,168 @@
       <v-card-subtitle>
         {{ $t(`survey-schemes.actions.title`) }}
       </v-card-subtitle>
-      <v-tabs vertical>
-        <v-btn class="mb-4" color="primary" @click="add">
-          <v-icon left>
-            $add
-          </v-icon>
-          {{ $t(`survey-schemes.actions.add`) }}
-        </v-btn>
-        <draggable v-model="currentActions.items" handle=".drag-and-drop__handle" @end="update">
-          <transition-group name="drag-and-drop" type="transition">
-            <v-tab v-for="(item, idx) in currentActions.items" :key="item.id" class="d-flex ga-3">
-              <v-icon class="drag-and-drop__handle flex-grow-0">
-                $handle
-              </v-icon>
-              <div class="flex-grow-1">
-                <v-icon left>
-                  fas fa-location-arrow
+      <div class="d-flex flex-row ga-2">
+        <div>
+          <v-btn class="mb-4" color="primary" @click="add">
+            <v-icon icon="$add" start />
+            {{ $t(`survey-schemes.actions.add`) }}
+          </v-btn>
+          <v-tabs v-model="selectedAction" direction="vertical">
+            <vue-draggable
+              v-model="currentActions.items"
+              :animation="300"
+              handle=".drag-and-drop__handle"
+              @end="update"
+            >
+              <v-tab v-for="(action, idx) in currentActions.items" :key="action.id" class="d-flex ga-3" :value="action.id">
+                <v-icon class="drag-and-drop__handle">
+                  $handle
                 </v-icon>
-                {{ $t(`survey-schemes.actions.types.${item.type}`) }}({{ idx + 1 }})
-              </div>
-            </v-tab>
-          </transition-group>
-        </draggable>
-        <v-tab-item v-for="(action, idx) in currentActions.items" :key="action.id">
-          <v-card class="mx-4" outlined>
-            <v-card-title>
-              <v-icon left>
-                fas fa-location-arrow
-              </v-icon>
-              {{ $t(`survey-schemes.actions.types._`) }} #{{ idx + 1 }}
-            </v-card-title>
-            <v-container>
-              <v-row>
-                <v-col cols="12" md="6">
-                  <v-select
-                    v-model="action.type"
-                    hide-details="auto"
-                    :items="availableActions"
-                    :label="$t('survey-schemes.actions.types._')"
-                    outlined
-                  />
-                  <div class="d-flex flex-row align-center">
-                    <div class="mr-4">
-                      {{ $t('survey-schemes.actions.layouts._') }}
-                    </div>
-                    <v-checkbox
-                      v-for="layout in layouts"
-                      :key="layout.value"
-                      v-model="action.layout"
-                      class="mr-2"
-                      :label="layout.text"
-                      :value="layout.value"
+                {{ $t(`survey-schemes.actions.types.${action.type}`) }}({{ idx + 1 }})
+              </v-tab>
+            </vue-draggable>
+          </v-tabs>
+        </div>
+        <v-tabs-window v-model="selectedAction" class="flex-grow-1">
+          <v-tabs-window-item v-for="(action, idx) in currentActions.items" :key="action.id" :value="action.id">
+            <v-card border>
+              <v-card-title>
+                <v-icon icon="fas fa-location-arrow" start />
+                {{ $t(`survey-schemes.actions.types._`) }} #{{ idx + 1 }}
+              </v-card-title>
+              <v-container>
+                <v-row>
+                  <v-col cols="12" md="6">
+                    <v-select
+                      v-model="action.type"
+                      hide-details="auto"
+                      :items="availableActions"
+                      :label="$t('survey-schemes.actions.types._')"
+                      variant="outlined"
                     />
-                  </div>
-                  <v-select
-                    v-model="action.variant"
-                    class="mb-4"
-                    hide-details="auto"
-                    :items="actionVariants"
-                    :label="$t('survey-schemes.actions.variants._')"
-                    outlined
-                  />
-                  <v-select
-                    v-model="action.color"
-                    class="mb-4"
-                    hide-details="auto"
-                    :items="colors"
-                    :label="$t('survey-schemes.actions.color')"
-                    outlined
-                  >
-                    <template #item="{ item }">
-                      <span
-                        class="mr-2 pa-4 rounded-circle"
-                        :style="{ backgroundColor: item.color }"
-                      />
-                      {{ item.text }}
-                    </template>
-                    <template #selection="{ item }">
-                      <span
-                        class="mr-2 pa-4 rounded-circle"
-                        :style="{ backgroundColor: item.color }"
-                      />
-                      {{ item.text }}
-                    </template>
-                  </v-select>
-                  <v-text-field
-                    v-model="action.icon"
-                    hide-details="auto"
-                    :label="$t('survey-schemes.actions.icon')"
-                    outlined
-                  />
-                </v-col>
-                <v-col cols="12" md="6">
-                  <language-selector
-                    v-model="action.text"
-                    :label="$t('survey-schemes.actions.text').toString()"
-                    :required="true"
-                  >
-                    <template v-for="lang in Object.keys(action.text)" #[`lang.${lang}`]>
-                      <v-text-field
-                        :key="lang"
-                        v-model="action.text[lang]"
-                        hide-details="auto"
-                        :label="$t('survey-schemes.actions.text')"
-                        outlined
-                        :rules="[]"
+                    <div class="d-flex flex-row align-center">
+                      <div class="mr-4">
+                        {{ $t('survey-schemes.actions.layouts._') }}
+                      </div>
+                      <v-checkbox-btn
+                        v-for="layout in layouts"
+                        :key="layout.value"
+                        v-model="action.layout"
+                        class="mr-2"
+                        :label="layout.title"
+                        :value="layout.value"
                       />
-                    </template>
-                  </language-selector>
-                  <language-selector
-                    v-model="action.label"
-                    :label="$t('survey-schemes.actions.label').toString()"
-                  >
-                    <template v-for="lang in Object.keys(action.label)" #[`lang.${lang}`]>
-                      <v-text-field
-                        :key="lang"
-                        v-model="action.label[lang]"
-                        hide-details="auto"
-                        :label="$t('survey-schemes.actions.label')"
-                        outlined
-                        :rules="[]"
-                      />
-                    </template>
-                  </language-selector>
-                </v-col>
-              </v-row>
-              <v-row>
-                <v-col cols="12">
-                  <json-editor-dialog v-model="action.params">
-                    <template #activator="{ attrs, on }">
-                      <v-btn v-bind="attrs" large outlined text v-on="on">
-                        <v-icon left>
-                          fas fa-code
-                        </v-icon>
-                        {{ $t('survey-schemes.actions.parameters') }}
-                      </v-btn>
-                    </template>
-                  </json-editor-dialog>
-                </v-col>
-              </v-row>
-            </v-container>
-            <v-card-actions>
-              <v-spacer />
-              <v-btn class="font-weight-bold" color="error" text @click="remove(idx)">
-                <v-icon left>
-                  $delete
-                </v-icon>{{ $t('survey-schemes.actions.remove') }}
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-tab-item>
-      </v-tabs>
+                    </div>
+                    <v-select
+                      v-model="action.variant"
+                      class="mb-4"
+                      hide-details="auto"
+                      :items="actionVariants"
+                      :label="$t('survey-schemes.actions.variants._')"
+                      variant="outlined"
+                    />
+                    <v-select
+                      v-model="action.color"
+                      class="mb-4"
+                      hide-details="auto"
+                      :items="colors"
+                      :label="$t('survey-schemes.actions.color')"
+                      variant="outlined"
+                    >
+                      <template #item="{ item, props }">
+                        <v-list-item v-bind="props">
+                          <template #prepend>
+                            <span
+                              class="mr-2 pa-4 rounded-circle"
+                              :style="{ backgroundColor: item.raw.color }"
+                            />
+                          </template>
+                          <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                        </v-list-item>
+                      </template>
+                      <template #selection="{ item }">
+                        <span
+                          class="mr-2 pa-4 rounded-circle"
+                          :style="{ backgroundColor: item.raw.color }"
+                        />
+                        {{ item.raw.title }}
+                      </template>
+                    </v-select>
+                    <v-text-field
+                      v-model="action.icon"
+                      hide-details="auto"
+                      :label="$t('survey-schemes.actions.icon')"
+                      variant="outlined"
+                    />
+                  </v-col>
+                  <v-col cols="12" md="6">
+                    <language-selector
+                      v-model="action.text"
+                      border
+                      class="mb-4"
+                      :label="$t('survey-schemes.actions.text')"
+                      :required="true"
+                    >
+                      <template v-for="lang in Object.keys(action.text)" :key="lang" #[`lang.${lang}`]>
+                        <v-text-field
+                          v-model="action.text[lang]"
+                          hide-details="auto"
+                          :label="$t('survey-schemes.actions.text')"
+                          :rules="[]"
+                          variant="outlined"
+                        />
+                      </template>
+                    </language-selector>
+                    <language-selector
+                      v-model="action.label"
+                      border
+                      :label="$t('survey-schemes.actions.label')"
+                    >
+                      <template v-for="lang in Object.keys(action.label)" :key="lang" #[`lang.${lang}`]>
+                        <v-text-field
+                          v-model="action.label[lang]"
+                          hide-details="auto"
+                          :label="$t('survey-schemes.actions.label')"
+                          :rules="[]"
+                          variant="outlined"
+                        />
+                      </template>
+                    </language-selector>
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="12">
+                    <json-editor-dialog v-model="action.params">
+                      <template #activator="{ props }">
+                        <v-btn v-bind="props" size="large" variant="text">
+                          <v-icon icon="fas fa-code" start />
+                          {{ $t('survey-schemes.actions.parameters') }}
+                        </v-btn>
+                      </template>
+                    </json-editor-dialog>
+                  </v-col>
+                </v-row>
+              </v-container>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn class="font-weight-bold" color="error" variant="text" @click="remove(idx)">
+                  <v-icon icon="$delete" start />
+                  {{ $t('survey-schemes.actions.remove') }}
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </div>
     </template>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
 import type { PropType } from 'vue';
 import { deepEqual } from 'fast-equals';
-import { defineComponent } from 'vue';
-import draggable from 'vuedraggable';
+import { computed, defineComponent, ref } from 'vue';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import { JsonEditorDialog } from '@intake24/admin/components/editors';
 import { LanguageSelector } from '@intake24/admin/components/forms';
@@ -190,7 +192,7 @@ import { copy, randomString } from '@intake24/common/util';
 export default defineComponent({
   name: 'PromptActions',
 
-  components: { Draggable: draggable, JsonEditorDialog, LanguageSelector },
+  components: { JsonEditorDialog, LanguageSelector, VueDraggable },
 
   props: {
     actions: {
@@ -200,39 +202,35 @@ export default defineComponent({
 
   emits: ['update:actions'],
 
-  setup() {
+  setup(props) {
     const { actions: availableActions, actionVariants, colors, layouts } = useSelects();
 
+    const currentActions = ref(props.actions ? { ...props.actions, items: withIdList(props.actions.items) } : undefined);
+    const selectedAction = ref(currentActions.value?.items.length ? currentActions.value.items[0].id : undefined);
+    const toggle = ref(!!props.actions);
+
+    const outputActions = computed(() => {
+      if (!currentActions.value)
+        return undefined;
+
+      return {
+        ...currentActions.value,
+        items: currentActions.value.items.map(({ id, ...rest }) => copy(rest)),
+      };
+    });
+
     return {
       actionVariants,
       availableActions,
       colors,
+      currentActions,
       layouts,
+      outputActions,
+      selectedAction,
+      toggle,
     };
   },
 
-  data() {
-    return {
-      toggle: !!this.actions,
-      currentActions: this.actions
-        ? { ...this.actions, items: withIdList(this.actions.items) }
-        : undefined,
-    };
-  },
-
-  computed: {
-    outputActions(): Actions | undefined {
-      const { currentActions } = this;
-      if (!currentActions)
-        return undefined;
-
-      return {
-        ...currentActions,
-        items: currentActions.items.map(({ id, ...rest }) => rest),
-      };
-    },
-  },
-
   watch: {
     actions(val) {
       if (deepEqual(val, this.outputActions))
diff --git a/apps/admin/src/components/prompts/partials/prompt-conditions.vue b/apps/admin/src/components/prompts/partials/prompt-conditions.vue
index 63d7f64551..0df141ab05 100644
--- a/apps/admin/src/components/prompts/partials/prompt-conditions.vue
+++ b/apps/admin/src/components/prompts/partials/prompt-conditions.vue
@@ -1,96 +1,101 @@
 <template>
-  <v-tab-item key="conditions" value="conditions">
-    <v-tabs v-model="selectedCondition" vertical>
-      <v-btn class="my-4" color="primary" @click="add">
-        <v-icon left>
-          $add
-        </v-icon>
-        {{ $t(`survey-schemes.conditions.add`) }}
-      </v-btn>
-      <draggable v-model="currentConditions" @end="update">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-tab v-for="condition in currentConditions" :key="condition.id">
-            <div v-if="condition.orPrevious" style="position: absolute; top: -0.6em;">
-              OR
-            </div>
-            {{ $t(`survey-schemes.conditions.property.${condition.property.id}`) }}
-          </v-tab>
-        </transition-group>
-      </draggable>
-      <v-tab-item v-for="(condition, idx) in currentConditions" :key="condition.id">
-        <v-card class="mx-4" outlined>
-          <v-card-title>
-            <v-icon left>
-              fas fa-location-arrow
-            </v-icon>
-            {{ $t(`survey-schemes.conditions.property.${condition.property.id}`) }}
-          </v-card-title>
-          <v-card-text class="px-0">
-            <condition-summary :condition="condition" />
-          </v-card-text>
-          <v-card-text>
-            <v-row v-if="idx !== 0">
-              <v-col cols="12" md="6">
-                <v-checkbox
-
-                  v-model="condition.orPrevious"
-                  class="mt-0"
-                  hide-details="auto"
-                  :label="$t(`survey-schemes.conditions.orPrevious`)"
-                  outlined
-                />
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col cols="12" md="6">
-                <v-select
-                  hide-details="auto"
-                  item-value="object"
-                  :items="objectSelectList"
-                  :label="$t('survey-schemes.conditions.object._')"
-                  outlined
-                  :value="condition.object"
-                  @change="updatePromptConditionObject(idx, $event)"
-                />
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-select
-                  hide-details="auto"
-                  item-value="type"
-                  :items="propertySelectList[condition.object]"
-                  :label="$t('survey-schemes.conditions.property._')"
-                  outlined
-                  :value="condition.property.id"
-                  @change="updatePromptConditionProperty(idx, $event)"
-                />
-              </v-col>
-            </v-row>
-          </v-card-text>
-          <v-card-title>{{ $t(`survey-schemes.conditions._`) }}</v-card-title>
-          <v-card-text>
-            <component :is="condition.property.type" :value.sync="condition.property.check" />
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer />
-            <v-btn class="font-weight-bold" color="error" text @click="remove(idx)">
-              <v-icon left>
-                $delete
+  <v-tabs-window-item key="conditions" value="conditions">
+    <div class="d-flex flex-row ga-2">
+      <div>
+        <v-btn class="my-4 ignore-item" color="primary" @click="add">
+          <v-icon icon="$add" start />
+          {{ $t(`survey-schemes.conditions.add`) }}
+        </v-btn>
+        <v-tabs v-model="selectedCondition" direction="vertical">
+          <vue-draggable
+            v-model="currentConditions"
+            :animation="300"
+            class="d-flex flex-column"
+            handle=".drag-and-drop__handle"
+            @end="update"
+          >
+            <v-tab v-for="condition in currentConditions" :key="condition.id" :class="{ 'mt-4': condition.orPrevious }" :value="condition.id">
+              <v-chip v-if="condition.orPrevious" class="font-weight-medium position-absolute" style="top: -1.5em;">
+                OR
+              </v-chip>
+              <v-icon class="drag-and-drop__handle" start>
+                $handle
               </v-icon>
-              {{ $t('survey-schemes.conditions.remove') }}
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-tab-item>
-    </v-tabs>
-  </v-tab-item>
+              {{ $t(`survey-schemes.conditions.property.${condition.property.id}`) }}
+            </v-tab>
+          </vue-draggable>
+        </v-tabs>
+      </div>
+      <v-tabs-window v-model="selectedCondition" class="flex-grow-1">
+        <v-tabs-window-item v-for="(condition, idx) in currentConditions" :key="condition.id" :value="condition.id">
+          <v-card border>
+            <v-card-title>
+              <v-icon icon="fas fa-location-arrow" start />
+              {{ $t(`survey-schemes.conditions.property.${condition.property.id}`) }}
+            </v-card-title>
+            <v-card-text class="px-0">
+              <condition-summary :condition="condition" />
+            </v-card-text>
+            <v-card-text>
+              <v-row v-if="idx !== 0">
+                <v-col cols="12" md="6">
+                  <v-checkbox-btn
+                    v-model="condition.orPrevious"
+                    hide-details="auto"
+                    :label="$t(`survey-schemes.conditions.orPrevious`)"
+                    outlined
+                  />
+                </v-col>
+              </v-row>
+              <v-row>
+                <v-col cols="12" md="6">
+                  <v-select
+                    hide-details="auto"
+                    item-value="object"
+                    :items="objectSelectList"
+                    :label="$t('survey-schemes.conditions.object._')"
+                    :model-value="condition.object"
+                    variant="outlined"
+                    @update:model-value="updatePromptConditionObject(idx, $event)"
+                  />
+                </v-col>
+                <v-col cols="12" md="6">
+                  <v-select
+                    hide-details="auto"
+                    item-value="type"
+                    :items="propertySelectList[condition.object]"
+                    :label="$t('survey-schemes.conditions.property._')"
+                    :model-value="condition.property.id"
+                    variant="outlined"
+                    @update:model-value="updatePromptConditionProperty(idx, $event)"
+                  />
+                </v-col>
+              </v-row>
+            </v-card-text>
+            <v-card-title>{{ $t(`survey-schemes.conditions._`) }}</v-card-title>
+            <v-card-text>
+              <component :is="condition.property.type" v-model="condition.property.check" />
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn class="font-weight-bold" color="error" variant="text" @click="remove(idx)">
+                <v-icon icon="$delete" start />
+                {{ $t('survey-schemes.conditions.remove') }}
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-tabs-window-item>
+      </v-tabs-window>
+    </div>
+  </v-tabs-window-item>
 </template>
 
 <script lang='ts'>
 import type { PropType } from 'vue';
 import { deepEqual } from 'fast-equals';
 import { mapValues } from 'lodash';
-import { defineComponent } from 'vue';
-import draggable from 'vuedraggable';
+import { computed, defineComponent, ref, watch } from 'vue';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import { withIdList } from '@intake24/admin/util';
 import {
@@ -106,13 +111,18 @@ import {
 import { foodSections, mealSections, type PromptSection } from '@intake24/common/surveys';
 import { randomString } from '@intake24/common/util';
 import { copy } from '@intake24/common/util/objects';
+import { useI18n } from '@intake24/i18n';
 
 import conditionPartials from './conditions';
 
 export default defineComponent({
   name: 'PromptConditions',
 
-  components: { Draggable: draggable, ...conditionPartials.check, ConditionSummary: conditionPartials.summary },
+  components: {
+    ...conditionPartials.check,
+    ConditionSummary: conditionPartials.summary,
+    VueDraggable,
+  },
 
   props: {
     conditions: {
@@ -127,50 +137,73 @@ export default defineComponent({
 
   emits: ['update:conditions'],
 
-  data() {
-    return {
-      currentConditions: withIdList(this.conditions),
-      selectedCondition: 0,
-    };
-  },
+  setup(props, { emit }) {
+    const { i18n: { t } } = useI18n();
+
+    const currentConditions = ref(withIdList(props.conditions));
+    const selectedCondition = ref(currentConditions.value.length ? currentConditions.value[0].id : undefined);
 
-  computed: {
-    objectSelectList(): { object: ConditionObjectId; text: string }[] {
+    const objectSelectList = computed(() => {
       const allowedObjects: ConditionObjectId[] = ['survey'];
 
-      if (this.promptSection !== undefined) {
-        if ((mealSections as readonly string[]).includes(this.promptSection))
+      if (props.promptSection !== undefined) {
+        if ((mealSections as readonly string[]).includes(props.promptSection))
           allowedObjects.push('meal');
 
-        if ((foodSections as readonly string[]).includes(this.promptSection))
+        if ((foodSections as readonly string[]).includes(props.promptSection))
           allowedObjects.push('food');
       }
 
-      return allowedObjects.map (object => ({ object, text: this.$t(`survey-schemes.conditions.object.${object}`).toString() }));
-    },
+      return allowedObjects.map (object => ({ object, title: t(`survey-schemes.conditions.object.${object}`) }));
+    });
 
-    propertySelectList(): Record<ConditionObjectId, { type: string; text: string }[]> {
-      return mapValues(promptConditionDefaults, properties => Object.keys(properties).map(id => ({ type: id, text: this.$t(`survey-schemes.conditions.property.${id}`).toString() })));
-    },
+    const propertySelectList = computed(() => {
+      return mapValues(promptConditionDefaults, properties => Object.keys(properties).map(id => ({ type: id, title: t(`survey-schemes.conditions.property.${id}`) })));
+    });
 
-    outputConditions(): Condition[] {
-      return this.currentConditions.map(({ id, ...rest }) => rest);
-    },
-  },
+    const outputConditions = computed(() => currentConditions.value.map(({ id, ...rest }) => copy(rest)));
+
+    const add = () => {
+      const defaultObject = conditionObjectIds[0];
+
+      const length = currentConditions.value.push(copy({
+        id: randomString(6),
+        ...getConditionDefaults(defaultObject, getDefaultConditionProperty(defaultObject)),
+      }));
 
-  watch: {
-    conditions(val) {
-      if (deepEqual(val, this.outputConditions))
+      selectedCondition.value = length - 1;
+    };
+
+    const remove = (index: number) => {
+      currentConditions.value.splice(index, 1);
+      if (currentConditions.value.length > 0)
+        currentConditions.value[0].orPrevious = false;
+    };
+
+    const update = () => {
+      emit('update:conditions', outputConditions.value);
+    };
+
+    watch(currentConditions, (val) => {
+      if (deepEqual(val, outputConditions.value))
         return;
 
-      this.currentConditions = withIdList(val);
-    },
-    outputConditions: {
-      handler() {
-        this.update();
-      },
-      deep: true,
-    },
+      emit('update:conditions', val);
+    });
+
+    watch(outputConditions, () => {
+      update();
+    }, { deep: true });
+
+    return {
+      add,
+      currentConditions,
+      selectedCondition,
+      objectSelectList,
+      propertySelectList,
+      remove,
+      update,
+    };
   },
 
   methods: {
@@ -211,27 +244,6 @@ export default defineComponent({
         copy({ ...getConditionDefaults(currentCondition.object, newPropertyId as ObjectPropertyId<ConditionObjectId>), id: currentCondition.id }),
       );
     },
-
-    add() {
-      const defaultObject = conditionObjectIds[0];
-
-      const length = this.currentConditions.push(copy({
-        id: randomString(6),
-        ...getConditionDefaults(defaultObject, getDefaultConditionProperty(defaultObject)),
-      }));
-
-      this.selectedCondition = length - 1;
-    },
-
-    remove(index: number) {
-      this.currentConditions.splice(index, 1);
-      if (this.currentConditions.length > 0)
-        this.currentConditions[0].orPrevious = false;
-    },
-
-    update() {
-      this.$emit('update:conditions', this.outputConditions);
-    },
   },
 });
 </script>
diff --git a/apps/admin/src/components/prompts/partials/prompt-content.vue b/apps/admin/src/components/prompts/partials/prompt-content.vue
index f5c78195b1..507eb7f6ad 100644
--- a/apps/admin/src/components/prompts/partials/prompt-content.vue
+++ b/apps/admin/src/components/prompts/partials/prompt-content.vue
@@ -1,96 +1,93 @@
 <template>
-  <v-tab-item key="content" value="content">
-    <v-tabs vertical>
-      <v-tab v-for="key in keys" :key="key" class="justify-start">
-        <v-icon left>
-          $languages
-        </v-icon>{{ key }}
-      </v-tab>
-      <v-tab-item v-for="key in keys" :key="key" class="pl-3">
-        <v-card outlined>
-          <v-toolbar color="grey lighten-4" flat>
-            <v-toolbar-title>
-              <i18n path="survey-schemes.i18n.core">
-                <template #key>
-                  <span class="font-weight-medium">{{ key }}</span>
+  <v-tabs-window-item key="content" value="content">
+    <div class="d-flex flex-row">
+      <v-tabs v-model="selectedKey" direction="vertical">
+        <v-tab v-for="key in keys" :key="key" class="justify-start">
+          <v-icon icon="$languages" start />{{ key }}
+        </v-tab>
+      </v-tabs>
+      <v-tabs-window v-model="selectedKey" class="flex-grow-1">
+        <v-tabs-window-item v-for="key in keys" :key="key" class="pl-3">
+          <v-card border>
+            <v-toolbar color="grey-lighten-4" flat>
+              <v-toolbar-title>
+                <i18n-t keypath="survey-schemes.i18n.core">
+                  <template #key>
+                    <span class="font-weight-medium">{{ key }}</span>
+                  </template>
+                </i18n-t>
+              </v-toolbar-title>
+            </v-toolbar>
+            <v-alert
+              v-for="lang in getAvailableLanguages(key, items)"
+              :key="lang"
+              class="mb-0"
+              tile
+              type="info"
+            >
+              <template #prepend>
+                <span :class="`fi fi-${lang} mr-3`" />
+              </template>
+              <template #default>
+                <template v-if="$t(`prompts.${promptType}.${key}`, lang)">
+                  <div
+                    v-if="key.includes('description')"
+                    v-html="$t(`prompts.${promptType}.${key}`, lang)"
+                  />
+                  <div v-else>
+                    {{ $t(`prompts.${promptType}.${key}`, lang) }}
+                  </div>
                 </template>
-              </i18n>
-            </v-toolbar-title>
-          </v-toolbar>
-          <v-alert
-            v-for="lang in getAvailableLanguages(key, items)"
-            :key="lang"
-            class="mb-0"
-            text
-            tile
-            type="info"
-          >
-            <template #prepend>
-              <span :class="`fi fi-${lang} mr-3`" />
-            </template>
-            <template #default>
-              <template v-if="$t(`prompts.${promptType}.${key}`, lang)">
-                <div
-                  v-if="key.includes('description')"
-                  v-html="$t(`prompts.${promptType}.${key}`, lang)"
-                />
                 <div v-else>
-                  {{ $t(`prompts.${promptType}.${key}`, lang) }}
+                  {{ $t('survey-schemes.i18n.none') }}
                 </div>
               </template>
-              <div v-else>
-                {{ $t('survey-schemes.i18n.none') }}
-              </div>
+            </v-alert>
+            <template v-if="items[key]">
+              <language-selector
+                v-if="items[key]"
+                v-model="items[key]"
+                :label="$t(`survey-schemes.i18n.custom`, { key })"
+                :outlined="false"
+                tile
+                @lang-add="loadLanguage"
+                @lang-remove="removeKey(key)"
+              >
+                <template v-for="lang in Object.keys(items[key])" :key="lang" #[`lang.${lang}`]>
+                  <html-editor
+                    v-if="richTextOnly.includes(key.toString())"
+                    v-model="items[key][lang]"
+                  />
+                  <v-text-field
+                    v-else
+                    v-model="items[key][lang]"
+                    hide-details="auto"
+                    :label="$t(`survey-schemes.i18n.custom`, { key })"
+                    variant="outlined"
+                  />
+                </template>
+              </language-selector>
             </template>
-          </v-alert>
-          <template v-if="items[key]">
-            <language-selector
-              v-if="items[key]"
-              v-model="items[key]"
-              :label="$t(`survey-schemes.i18n.custom`, { key }).toString()"
-              :outlined="false"
-              tile
-              @lang-add="loadLanguage"
-              @lang-remove="removeKey(key)"
-            >
-              <template v-for="lang in Object.keys(items[key])" #[`lang.${lang}`]>
-                <html-editor
-                  v-if="richTextOnly.includes(key.toString())"
-                  :key="lang"
-                  v-model="items[key][lang]"
-                />
-                <v-text-field
-                  v-else
-                  :key="lang"
-                  v-model="items[key][lang]"
-                  hide-details="auto"
-                  :label="$t(`survey-schemes.i18n.custom`, { key }).toString()"
-                  outlined
-                />
-              </template>
-            </language-selector>
-          </template>
-          <v-card v-else flat link min-height="100px" @click="addKey(key)">
-            <v-card-title class="d-flex justify-center font-weight-medium">
-              {{ $t('survey-schemes.i18n.init') }}
-            </v-card-title>
-            <v-card-text class="d-flex justify-center align-center">
-              <v-btn color="secondary" fab x-large>
-                <v-icon>$add</v-icon>
-              </v-btn>
-            </v-card-text>
+            <v-card v-else flat link min-height="100px" @click="addKey(key)">
+              <v-card-title class="d-flex justify-center font-weight-medium">
+                {{ $t('survey-schemes.i18n.init') }}
+              </v-card-title>
+              <v-card-text class="d-flex justify-center align-center">
+                <v-btn color="secondary" icon="$add" size="x-large" />
+              </v-card-text>
+            </v-card>
           </v-card>
-        </v-card>
-      </v-tab-item>
-    </v-tabs>
-  </v-tab-item>
+        </v-tabs-window-item>
+      </v-tabs-window>
+    </div>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
 import type { PropType } from 'vue';
 import { useVModel } from '@vueuse/core';
 import get from 'lodash/get';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 
 import type { BasePrompt, ComponentType } from '@intake24/common/prompts';
 import { HtmlEditor } from '@intake24/admin/components/editors';
@@ -124,11 +121,12 @@ export default defineComponent({
     const promptType = computed(() => getPromptType(props.component));
 
     const keys = computed(() => {
-      const messageObject = get(i18n.messages.en, `prompts.${promptType.value}`) as object;
+      const messageObject = get(i18n.messages.value.en, `prompts.${promptType.value}`) as object;
       if (messageObject === undefined)
         console.error(`Missing translation object: ${`prompts.${promptType.value}`}`);
       return getObjectNestedKeys(messageObject);
     });
+    const selectedKey = ref(keys.value.length ? keys.value[0] : undefined);
 
     const loadLanguage = async (code: string) => {
       await loadAdminLanguage(code);
@@ -162,6 +160,7 @@ export default defineComponent({
       promptType,
       removeKey,
       richTextOnly,
+      selectedKey,
     };
   },
 });
diff --git a/apps/admin/src/components/prompts/partials/prompt-json.vue b/apps/admin/src/components/prompts/partials/prompt-json.vue
index 0e6dd119d5..22876c9eae 100644
--- a/apps/admin/src/components/prompts/partials/prompt-json.vue
+++ b/apps/admin/src/components/prompts/partials/prompt-json.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-tab-item key="json" value="json">
-    <json-editor v-bind="{ value }" @input="$emit('input', $event)" />
-  </v-tab-item>
+  <v-tabs-window-item key="json" value="json">
+    <json-editor v-bind="{ modelValue }" @update:model-value="$emit('update:modelValue', $event)" />
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
@@ -17,11 +17,13 @@ export default defineComponent({
   components: { JsonEditor },
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<Prompt>,
       required: true,
     },
   },
+
+  emits: ['update:modelValue'],
 });
 </script>
 
diff --git a/apps/admin/src/components/prompts/partials/prompt-validation.vue b/apps/admin/src/components/prompts/partials/prompt-validation.vue
index e3bc27aa45..2e732750c4 100644
--- a/apps/admin/src/components/prompts/partials/prompt-validation.vue
+++ b/apps/admin/src/components/prompts/partials/prompt-validation.vue
@@ -1,31 +1,30 @@
 <template>
-  <v-tab-item key="validation" value="validation">
+  <v-tabs-window-item key="validation" value="validation">
     <v-row>
       <v-col cols="12">
         <v-switch
           hide-details="auto"
-          :input-value="validation.required"
           :label="$t('survey-schemes.prompts.validation.required')"
+          :model-value="validation.required"
           name="validation.required"
-          @change="update('required', $event)"
+          @update:model-value="update('required', $event)"
         />
       </v-col>
       <v-col cols="12">
         <language-selector
           :disabled="!validation.required"
-          :label="$t('survey-schemes.prompts.validation.message').toString()"
-          :value="validation.message"
-          @input="update('message', $event)"
+          :label="$t('survey-schemes.prompts.validation.message')"
+          :model-value="validation.message"
+          @update:model-value="update('message', $event)"
         >
-          <template v-for="lang in Object.keys(validation.message)" #[`lang.${lang}`]>
+          <template v-for="lang in Object.keys(validation.message)" :key="lang" #[`lang.${lang}`]>
             <v-text-field
-              :key="lang"
               :disabled="!validation.required"
               hide-details="auto"
               :label="$t('survey-schemes.prompts.validation.message')"
-              outlined
-              :value="validation.message[lang]"
-              @input="updateLanguage('message', lang, $event)"
+              :model-value="validation.message[lang]"
+              variant="outlined"
+              @update:model-value="updateLanguage('message', lang, $event)"
             />
           </template>
         </language-selector>
@@ -35,25 +34,25 @@
           <v-text-field
             hide-details="auto"
             :label="$t('survey-schemes.prompts.validation.min')"
+            :model-value="validation.min"
             name="validation.min"
-            outlined
-            :value="validation.min"
-            @input="update('min', toInteger($event))"
+            variant="outlined"
+            @update:model-value="update('min', toInteger($event))"
           />
         </v-col>
         <v-col cols="6">
           <v-text-field
             hide-details="auto"
             :label="$t('survey-schemes.prompts.validation.max')"
+            :model-value="validation.max"
             name="validation.max"
-            outlined
-            :value="validation.max"
-            @input="update('max', toInteger($event))"
+            variant="outlined"
+            @update:model-value="update('max', toInteger($event))"
           />
         </v-col>
       </template>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
@@ -80,6 +79,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['update:validation'],
+
   setup(props, { emit }) {
     const toInteger = (value: string): number | null => {
       const val = Number.parseInt(value);
diff --git a/apps/admin/src/components/prompts/partials/slider-settings.vue b/apps/admin/src/components/prompts/partials/slider-settings.vue
index c54ae40c82..b9875c4b6e 100644
--- a/apps/admin/src/components/prompts/partials/slider-settings.vue
+++ b/apps/admin/src/components/prompts/partials/slider-settings.vue
@@ -1,9 +1,7 @@
 <template>
-  <v-card outlined>
-    <v-toolbar color="grey lighten-4" flat>
-      <v-icon left>
-        fas fa-sliders
-      </v-icon>
+  <v-card border>
+    <v-toolbar color="grey-lighten-4" flat>
+      <v-icon icon="fas fa-sliders" start />
       <v-toolbar-title>
         {{ $t('survey-schemes.prompts.slider.title') }}
       </v-toolbar-title>
@@ -23,15 +21,15 @@
               </v-tab>
             </v-tabs>
             <v-card-text>
-              <v-tabs-items v-model="tab" class="pt-1">
-                <v-tab-item v-for="item in tabs" :key="item" :value="item">
+              <v-tabs-window v-model="tab" class="pt-1">
+                <v-tabs-window-item v-for="item in tabs" :key="item" :value="item">
                   <v-text-field
                     hide-details="auto"
                     :label="$t(`survey-schemes.prompts.slider.${item}.value`)"
-                    :name="item"
-                    outlined
-                    :value="slider[item].value"
-                    @input="
+                    :model-value="slider[item].value"
+                    :name="`${item}.value`"
+                    variant="outlined"
+                    @update:model-value="
                       slider[item].value = Number.isNaN(parseFloat($event))
                         ? null
                         : parseFloat($event)
@@ -40,23 +38,23 @@
                   <v-switch
                     class="mb-4"
                     hide-details="auto"
-                    :input-value="slider[item].label"
                     :label="$t(`survey-schemes.prompts.slider.${item}.label`)"
-                    @change="updateLabel(item, $event)"
+                    :model-value="slider[item].label"
+                    @update:model-value="updateLabel(item, $event)"
                   />
                   <language-selector
                     v-if="slider[item].label"
                     v-model="slider[item].label"
-                    :label="$t(`survey-schemes.prompts.slider.${tab}.label`).toString()"
+                    :label="$t(`survey-schemes.prompts.slider.${item}.label`)"
                   >
-                    <template v-for="lang in Object.keys(slider[item].label)" #[`lang.${lang}`]>
+                    <template v-for="lang in Object.keys(slider[item].label)" :key="lang" #[`lang.${lang}`]>
                       <v-text-field
-                        :key="lang"
+
                         v-model="slider[item].label[lang]"
                         hide-details="auto"
                         :label="$t(`survey-schemes.prompts.slider.${item}.label`)"
-                        :name="`${item}.${lang}`"
-                        outlined
+                        :name="`${item}.label.${lang}`"
+                        variant="outlined"
                       />
                     </template>
                   </language-selector>
@@ -65,12 +63,12 @@
                     v-model.number="slider[item].size"
                     hide-details="auto"
                     :label="$t(`survey-schemes.prompts.slider.${item}.size`)"
-                    name="current"
-                    outlined
+                    :name="`${item}.size`"
                     :rules="isNumber"
+                    variant="outlined"
                   />
-                </v-tab-item>
-              </v-tabs-items>
+                </v-tabs-window-item>
+              </v-tabs-window>
             </v-card-text>
           </v-card>
         </v-col>
@@ -82,8 +80,8 @@
               hide-details="auto"
               :label="$t('survey-schemes.prompts.slider.step')"
               name="step"
-              outlined
               :rules="isNumber"
+              variant="outlined"
             />
             <v-switch
               v-if="!hideConfirm"
diff --git a/apps/admin/src/components/prompts/partials/use-base-prompt.ts b/apps/admin/src/components/prompts/partials/use-base-prompt.ts
index 0c3524572a..d4e82a2ee1 100644
--- a/apps/admin/src/components/prompts/partials/use-base-prompt.ts
+++ b/apps/admin/src/components/prompts/partials/use-base-prompt.ts
@@ -1,19 +1,19 @@
 import type { SetupContext } from 'vue';
 
-export function useBasePrompt(props: any, context: SetupContext) {
+export function useBasePrompt(props: any, context: SetupContext<'update:options'[]>) {
   const update = (field: string, value: any) => {
-    context.emit(`update:${field}`, value);
+    context.emit('update:options', { [field]: value });
   };
   const updateNumber = (field: string, value: any, fallback = null) => {
     const number = Number(value);
-    context.emit(`update:${field}`, Number.isNaN(number) ? fallback : number);
+    context.emit('update:options', { [field]: Number.isNaN(number) ? fallback : number });
   };
   const updateInteger = (field: string, value: any, fallback = null) => {
     const integer = Number.parseInt(value, 10);
-    context.emit(`update:${field}`, Number.isNaN(integer) ? fallback : integer);
+    context.emit('update:options', { [field]: Number.isNaN(integer) ? fallback : integer });
   };
   const updateLanguage = (field: string, lang: string, value: any) => {
-    context.emit(`update:${field}`, { ...props[field], [lang]: value });
+    context.emit('update:options', { [field]: { ...props[field], [lang]: value } });
   };
 
   return { update, updateNumber, updateInteger, updateLanguage };
diff --git a/apps/admin/src/components/prompts/portion-size/as-served-prompt.vue b/apps/admin/src/components/prompts/portion-size/as-served-prompt.vue
index 167fd5b67d..43959fc1e6 100644
--- a/apps/admin/src/components/prompts/portion-size/as-served-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/as-served-prompt.vue
@@ -1,22 +1,22 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
         <v-switch
           hide-details="auto"
-          :input-value="badges"
           :label="$t('survey-schemes.prompts.badges')"
-          @change="update('badges', $event)"
+          :model-value="badges"
+          @update:model-value="update('badges', $event)"
         />
         <v-switch
           hide-details="auto"
-          :input-value="leftovers"
           :label="$t('survey-schemes.prompts.leftovers')"
-          @change="update('leftovers', $event)"
+          :model-value="leftovers"
+          @update:model-value="update('leftovers', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/cereal-prompt.vue b/apps/admin/src/components/prompts/portion-size/cereal-prompt.vue
index ca94ddea8b..12aca98f62 100644
--- a/apps/admin/src/components/prompts/portion-size/cereal-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/cereal-prompt.vue
@@ -1,25 +1,25 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
         <v-switch
           hide-details="auto"
-          :input-value="badges"
           :label="$t('survey-schemes.prompts.badges')"
-          @change="update('badges', $event)"
+          :model-value="badges"
+          @update:model-value="update('badges', $event)"
         />
         <v-switch
           hide-details="auto"
-          :input-value="leftovers"
           :label="$t('survey-schemes.prompts.leftovers')"
-          @change="update('leftovers', $event)"
+          :model-value="leftovers"
+          @update:model-value="update('leftovers', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
-        <image-map-settings :image-map="imageMap" @update:imageMap="update('imageMap', $event)" />
+        <image-map-settings :image-map="imageMap" @update:image-map="update('imageMap', $event)" />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/direct-weight-prompt.vue b/apps/admin/src/components/prompts/portion-size/direct-weight-prompt.vue
index 4f01361ee6..c2739ac996 100644
--- a/apps/admin/src/components/prompts/portion-size/direct-weight-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/direct-weight-prompt.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" />
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/drink-scale-prompt.vue b/apps/admin/src/components/prompts/portion-size/drink-scale-prompt.vue
index 62301e8558..36687894c7 100644
--- a/apps/admin/src/components/prompts/portion-size/drink-scale-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/drink-scale-prompt.vue
@@ -1,28 +1,28 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
         <v-switch
           hide-details="auto"
-          :input-value="badges"
           :label="$t('survey-schemes.prompts.badges')"
-          @change="update('badges', $event)"
+          :model-value="badges"
+          @update:model-value="update('badges', $event)"
         />
         <v-switch
           class="mt-4"
           hide-details="auto"
-          :input-value="leftovers"
           :label="$t('survey-schemes.prompts.leftovers')"
-          @change="update('leftovers', $event)"
+          :model-value="leftovers"
+          @update:model-value="update('leftovers', $event)"
         />
         <v-select
           class="mt-4"
           hide-details="auto"
           :items="multipleItems"
           :label="$t('survey-schemes.prompts.drink-scale-prompt.multiple')"
-          outlined
-          :value="typeof multiple === 'boolean' ? false : multiple.type"
-          @change="updateMultiple($event)"
+          :model-value="typeof multiple === 'boolean' ? false : multiple.type"
+          variant="outlined"
+          @update:model-value="updateMultiple($event)"
         />
         <component
           :is="multiple.type"
@@ -33,10 +33,10 @@
         />
       </v-col>
       <v-col cols="12" md="6">
-        <image-map-settings :image-map="imageMap" @update:imageMap="update('imageMap', $event)" />
+        <image-map-settings :image-map="imageMap" @update:image-map="update('imageMap', $event)" />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
@@ -87,7 +87,7 @@ export default defineComponent({
     const multipleTypes = [false, 'slider', 'counter'] as const;
     const multipleItems = multipleTypes.map(value => ({
       value,
-      text: value ? i18n.t(`survey-schemes.prompts.${value}._`) : i18n.t('common.disabled'),
+      title: value ? i18n.t(`survey-schemes.prompts.${value}._`) : i18n.t('common.disabled'),
     }));
 
     const updateMultiple = (value: typeof multipleTypes[number]) => {
diff --git a/apps/admin/src/components/prompts/portion-size/guide-image-prompt.vue b/apps/admin/src/components/prompts/portion-size/guide-image-prompt.vue
index 31347c8305..6c0f36e7f6 100644
--- a/apps/admin/src/components/prompts/portion-size/guide-image-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/guide-image-prompt.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <v-tab-item key="options" value="options">
+    <v-tabs-window-item key="options" value="options">
       <v-row class="mb-3">
         <v-col cols="12" md="6">
-          <v-card outlined>
-            <v-toolbar color="grey lighten-4" flat>
+          <v-card border>
+            <v-toolbar color="grey-lighten-4" flat>
               <v-toolbar-title class="font-weight-medium">
                 {{ $t('survey-schemes.prompts.linkedQuantity.title') }}
               </v-toolbar-title>
@@ -15,59 +15,53 @@
             <v-card-text>
               <v-switch
                 hide-details="auto"
-                :input-value="linkedQuantity.auto"
                 :label="$t('survey-schemes.prompts.linkedQuantity.auto')"
-                @change="update('linkedQuantity', { ...linkedQuantity, auto: $event })"
+                :model-value="linkedQuantity.auto"
+                @update:model-value="update('linkedQuantity', { ...linkedQuantity, auto: $event })"
               />
             </v-card-text>
             <category-list
               class="mb-6"
               flat
+              :model-value="linkedQuantity.source.map((code) => ({ code, name: code }))"
               tile
-              :value="linkedQuantity.source.map((code) => ({ code, name: code }))"
-              @input="updateLQSource"
+              @update:model-value="updateLQSource"
             >
               <template #title>
                 {{ $t('survey-schemes.prompts.linkedQuantity.source') }}
               </template>
               <template #[`item.content`]="{ item }">
-                <v-list-item-content>
-                  <v-list-item-title>
-                    {{ $t('fdbs.categories._') }}: {{ item.code }}
-                  </v-list-item-title>
-                </v-list-item-content>
+                <v-list-item-title>
+                  {{ $t('fdbs.categories._') }}: {{ item.code }}
+                </v-list-item-title>
               </template>
             </category-list>
             <category-list
               flat
+              :model-value="linkedQuantity.parent.map((item) => ({ name: item.code, ...item }))"
               tile
-              :value="linkedQuantity.parent.map((item) => ({ name: item.code, ...item }))"
-              @input="updateLQParent"
+              @update:model-value="updateLQParent"
             >
               <template #title>
                 {{ $t('survey-schemes.prompts.linkedQuantity.parent') }}
               </template>
               <template #[`item.content`]="{ item }">
-                <v-list-item-content>
-                  <v-list-item-title>
-                    {{ $t('fdbs.categories._') }}: {{ item.code }}
-                  </v-list-item-title>
-                  <v-list-item-subtitle>
-                    {{ $t('standard-units._') }}: {{ item.unit ?? $t('common.not.assigned') }}
-                  </v-list-item-subtitle>
-                </v-list-item-content>
+                <v-list-item-title>
+                  {{ $t('fdbs.categories._') }}: {{ item.code }}
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  {{ $t('standard-units._') }}: {{ item.unit ?? $t('common.not.assigned') }}
+                </v-list-item-subtitle>
               </template>
               <template #[`item.action`]="{ item }">
                 <select-resource
                   v-if="!item.unit"
                   item-name="id"
                   resource="standard-units"
-                  @input="updateLQUnit(item.code, $event)"
+                  @update:model-value="updateLQUnit(item.code, $event)"
                 >
-                  <template #activator="{ attrs, on }">
-                    <v-btn icon v-bind="attrs" :title="$t('standard-units.add')" v-on="on">
-                      <v-icon>$standard-units</v-icon>
-                    </v-btn>
+                  <template #activator="{ props }">
+                    <v-btn icon="$standard-units" v-bind="props" :title="$t('standard-units.add')" />
                   </template>
                 </select-resource>
               </template>
@@ -75,18 +69,18 @@
           </v-card>
         </v-col>
         <v-col cols="12" md="6">
-          <image-map-settings :image-map="imageMap" @update:imageMap="update('imageMap', $event)" />
+          <image-map-settings :image-map="imageMap" @update:image-map="update('imageMap', $event)" />
         </v-col>
         <v-col cols="12" md="6">
           <v-switch
             hide-details="auto"
-            :input-value="badges"
             :label="$t('survey-schemes.prompts.badges')"
-            @change="update('badges', $event)"
+            :model-value="badges"
+            @update:model-value="update('badges', $event)"
           />
         </v-col>
       </v-row>
-    </v-tab-item>
+    </v-tabs-window-item>
   </div>
 </template>
 
diff --git a/apps/admin/src/components/prompts/portion-size/milk-in-a-hot-drink-prompt.vue b/apps/admin/src/components/prompts/portion-size/milk-in-a-hot-drink-prompt.vue
index 29b4c1a7f0..7274ba42a1 100644
--- a/apps/admin/src/components/prompts/portion-size/milk-in-a-hot-drink-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/milk-in-a-hot-drink-prompt.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
         <v-switch
           hide-details="auto"
-          :input-value="badges"
           :label="$t('survey-schemes.prompts.badges')"
-          @change="update('badges', $event)"
+          :model-value="badges"
+          @update:model-value="update('badges', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
@@ -14,13 +14,13 @@
           hide-details="auto"
           :items="orientations"
           :label="$t('survey-schemes.prompts.orientation._')"
-          outlined
-          :value="orientation"
-          @change="update('orientation', $event)"
+          :model-value="orientation"
+          variant="outlined"
+          @update:model-value="update('orientation', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/milk-on-cereal-prompt.vue b/apps/admin/src/components/prompts/portion-size/milk-on-cereal-prompt.vue
index 767c644c7e..5de2658ee4 100644
--- a/apps/admin/src/components/prompts/portion-size/milk-on-cereal-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/milk-on-cereal-prompt.vue
@@ -1,19 +1,19 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
         <v-switch
           hide-details="auto"
-          :input-value="badges"
           :label="$t('survey-schemes.prompts.badges')"
-          @change="update('badges', $event)"
+          :model-value="badges"
+          @update:model-value="update('badges', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
-        <image-map-settings :image-map="imageMap" @update:imageMap="update('imageMap', $event)" />
+        <image-map-settings :image-map="imageMap" @update:image-map="update('imageMap', $event)" />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/missing-food-prompt.vue b/apps/admin/src/components/prompts/portion-size/missing-food-prompt.vue
index fe678d41d1..8b426eb276 100644
--- a/apps/admin/src/components/prompts/portion-size/missing-food-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/missing-food-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12" md="6">
         <barcode-settings
@@ -8,7 +8,7 @@
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/parent-food-portion-prompt.vue b/apps/admin/src/components/prompts/portion-size/parent-food-portion-prompt.vue
index c5f80daedc..d1a4421e8e 100644
--- a/apps/admin/src/components/prompts/portion-size/parent-food-portion-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/parent-food-portion-prompt.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
         <v-switch
           hide-details="auto"
-          :input-value="badges"
           :label="$t('survey-schemes.prompts.badges')"
-          @change="update('badges', $event)"
+          :model-value="badges"
+          @update:model-value="update('badges', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
@@ -14,13 +14,13 @@
           hide-details="auto"
           :items="orientations"
           :label="$t('survey-schemes.prompts.orientation._')"
-          outlined
-          :value="orientation"
-          @change="update('orientation', $event)"
+          :model-value="orientation"
+          variant="outlined"
+          @update:model-value="update('orientation', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/pizza-prompt.vue b/apps/admin/src/components/prompts/portion-size/pizza-prompt.vue
index 628f59656d..d6552f457c 100644
--- a/apps/admin/src/components/prompts/portion-size/pizza-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/pizza-prompt.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
-        <image-map-settings :image-map="imageMap" @update:imageMap="update('imageMap', $event)" />
+        <image-map-settings :image-map="imageMap" @update:image-map="update('imageMap', $event)" />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/pizza-v2-prompt.vue b/apps/admin/src/components/prompts/portion-size/pizza-v2-prompt.vue
index f8025e2672..4760827f27 100644
--- a/apps/admin/src/components/prompts/portion-size/pizza-v2-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/pizza-v2-prompt.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
-        <image-map-settings :image-map="imageMap" @update:imageMap="update('imageMap', $event)" />
+        <image-map-settings :image-map="imageMap" @update:image-map="update('imageMap', $event)" />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/portion-size-option-prompt.vue b/apps/admin/src/components/prompts/portion-size/portion-size-option-prompt.vue
index 029a3369a2..7fdb54d165 100644
--- a/apps/admin/src/components/prompts/portion-size/portion-size-option-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/portion-size-option-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options" />
+  <v-tabs-window-item key="options" value="options" />
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/recipe-builder-prompt.vue b/apps/admin/src/components/prompts/portion-size/recipe-builder-prompt.vue
index ff0634df4a..d068314ef6 100644
--- a/apps/admin/src/components/prompts/portion-size/recipe-builder-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/recipe-builder-prompt.vue
@@ -1,14 +1,14 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
         <food-browser-settings
           :categories-first="categoriesFirst"
-          @update:categoriesFirst="update('categoriesFirst', $event)"
+          @update:categories-first="update('categoriesFirst', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/portion-size/standard-portion-prompt.vue b/apps/admin/src/components/prompts/portion-size/standard-portion-prompt.vue
index 94d906d55f..7e4d22a5c2 100644
--- a/apps/admin/src/components/prompts/portion-size/standard-portion-prompt.vue
+++ b/apps/admin/src/components/prompts/portion-size/standard-portion-prompt.vue
@@ -1,16 +1,16 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12" md="6">
         <v-switch
           hide-details="auto"
-          :input-value="badges"
           :label="$t('survey-schemes.prompts.badges')"
-          @change="update('badges', $event)"
+          :model-value="badges"
+          @update:model-value="update('badges', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/prompt-selector.vue b/apps/admin/src/components/prompts/prompt-selector.vue
index c97bbe4bcb..aa52fd3012 100644
--- a/apps/admin/src/components/prompts/prompt-selector.vue
+++ b/apps/admin/src/components/prompts/prompt-selector.vue
@@ -2,31 +2,27 @@
   <v-dialog
     v-model="dialog.show"
     fullscreen
-    hide-overlay
     no-click-animation
     persistent
     :retain-focus="false"
+    :scrim="false"
     transition="dialog-bottom-transition"
   >
     <v-card tile>
       <v-toolbar color="secondary" dark>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
         <v-toolbar-title>
           {{ $t(`survey-schemes.prompts.${dialog.index === -1 ? 'create' : 'edit'}`) }}
         </v-toolbar-title>
         <v-spacer />
         <v-toolbar-items>
-          <v-btn dark text :title="$t('common.action.ok')" @click.stop="save">
-            <v-icon left>
-              $success
-            </v-icon>{{ $t('common.action.ok') }}
+          <v-btn :title="$t('common.action.ok')" variant="text" @click.stop="save">
+            <v-icon icon="$success" start />{{ $t('common.action.ok') }}
           </v-btn>
         </v-toolbar-items>
         <template #extension>
-          <v-container :fluid="$vuetify.breakpoint.mdAndDown">
-            <v-tabs v-model="tab" background-color="secondary" dark>
+          <v-container :fluid="$vuetify.display.mdAndDown">
+            <v-tabs v-model="tab" bg-color="secondary">
               <v-tab
                 v-for="item in promptSettings[dialog.prompt.component].tabs"
                 :key="item"
@@ -39,17 +35,17 @@
         </template>
       </v-toolbar>
       <v-form ref="form" @submit.prevent="save">
-        <v-container class="prompt-container" :fluid="$vuetify.breakpoint.mdAndDown">
-          <v-tabs-items v-model="tab" class="pt-1 flex-grow-1">
-            <v-tab-item key="general" value="general">
+        <v-container class="prompt-container" :fluid="$vuetify.display.mdAndDown">
+          <v-tabs-window v-model="tab" class="pt-1 flex-grow-1">
+            <v-tabs-window-item key="general" value="general">
               <v-row>
                 <v-col cols="12">
-                  <v-card outlined>
-                    <v-toolbar color="grey lighten-4" flat>
+                  <v-card border>
+                    <v-toolbar color="grey-lighten-4" flat>
+                      <v-icon end>
+                        fas fa-fingerprint
+                      </v-icon>
                       <v-toolbar-title>
-                        <v-icon left>
-                          fas fa-fingerprint
-                        </v-icon>
                         {{ $t('survey-schemes.prompts.internal._') }}
                       </v-toolbar-title>
                     </v-toolbar>
@@ -62,7 +58,7 @@
                             hide-details="auto"
                             :label="$t('survey-schemes.prompts.internal.id._')"
                             :messages="$t('survey-schemes.prompts.internal.id.hint')"
-                            outlined
+                            variant="outlined"
                           />
                         </v-col>
                         <v-col cols="12" md="6">
@@ -72,7 +68,7 @@
                             hide-details="auto"
                             :label="$t('survey-schemes.prompts.internal.name._')"
                             :messages="$t('survey-schemes.prompts.internal.name.hint')"
-                            outlined
+                            variant="outlined"
                           />
                         </v-col>
                         <v-col v-if="dialog.prompt.type === 'custom'" cols="12" md="6">
@@ -82,7 +78,7 @@
                             hide-details="auto"
                             :label="$t('survey-schemes.prompts.internal.group._')"
                             :messages="$t('survey-schemes.prompts.internal.group.hint')"
-                            outlined
+                            variant="outlined"
                           />
                         </v-col>
                       </v-row>
@@ -90,12 +86,12 @@
                   </v-card>
                 </v-col>
                 <v-col v-if="!isOverrideMode" cols="12">
-                  <v-card outlined>
-                    <v-toolbar color="grey lighten-4" flat>
+                  <v-card border>
+                    <v-toolbar color="grey-lighten-4" flat>
+                      <v-icon end>
+                        fas fa-circle-question
+                      </v-icon>
                       <v-toolbar-title>
-                        <v-icon left>
-                          fas fa-circle-question
-                        </v-icon>
                         {{ $t(`survey-schemes.prompts.type`) }}
                       </v-toolbar-title>
                       <template #extension>
@@ -112,53 +108,50 @@
                     </v-toolbar>
                     <v-item-group
                       v-model="dialog.prompt.component"
-                      active-class="primary"
-                      @change="updatePromptProps"
+                      selected-class="primary"
+                      @update:model-value="updatePromptProps"
                     >
-                      <v-tabs-items v-model="promptTypeTab">
+                      <v-tabs-window v-model="promptTypeTab">
                         <prompt-type-selector
                           v-for="(items, type) in availableGroupedPrompts"
                           :key="type"
                           v-bind="{ prompts: items, type }"
                         />
-                      </v-tabs-items>
+                      </v-tabs-window>
                     </v-item-group>
                   </v-card>
                 </v-col>
               </v-row>
-            </v-tab-item>
+            </v-tabs-window-item>
             <prompt-content
+              v-model:i18n="dialog.prompt.i18n"
               :component="dialog.prompt.component"
-              :i18n.sync="dialog.prompt.i18n"
             />
-            <prompt-actions :actions.sync="dialog.prompt.actions" />
-            <prompt-conditions :conditions.sync="dialog.prompt.conditions" :prompt-section="section" />
+            <prompt-actions v-model:actions="dialog.prompt.actions" />
+            <prompt-conditions v-model:conditions="dialog.prompt.conditions" :prompt-section="section" />
             <prompt-validation
               v-if="
                 'validation' in dialog.prompt
                   && promptSettings[dialog.prompt.component].tabs.includes('validation')
               "
+              v-model:validation="dialog.prompt.validation"
               :limits="dialog.prompt.component === 'checkbox-list-prompt'"
-              :validation.sync="dialog.prompt.validation"
             />
             <component
               :is="dialog.prompt.component"
-              v-bind.sync="dialog.prompt"
+              v-bind="dialog.prompt"
+              @update:options="updateOptions"
               @validate="validate"
             />
             <prompt-json v-model="dialog.prompt" />
-          </v-tabs-items>
+          </v-tabs-window>
           <v-card-actions>
-            <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-              <v-icon left>
-                $cancel
-              </v-icon>{{ $t('common.action.cancel') }}
+            <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+              <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
             </v-btn>
             <v-spacer />
-            <v-btn class="font-weight-bold" color="info" text type="submit">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-card-actions>
         </v-container>
@@ -386,6 +379,10 @@ export default defineComponent({
       this.form?.resetValidation();
     },
 
+    updateOptions(options: Partial<Prompt>) {
+      this.dialog.prompt = merge<Prompt>(this.dialog.prompt, options);
+    },
+
     validate() {
       this.form?.validate();
     },
diff --git a/apps/admin/src/components/prompts/prompt-type-selector.vue b/apps/admin/src/components/prompts/prompt-type-selector.vue
index 4f903d3c2d..7830fb4682 100644
--- a/apps/admin/src/components/prompts/prompt-type-selector.vue
+++ b/apps/admin/src/components/prompts/prompt-type-selector.vue
@@ -1,26 +1,26 @@
 <template>
-  <v-tab-item :key="type">
+  <v-tabs-window-item :key="type">
     <v-container>
-      <v-alert v-if="prompts.length === 0" color="secondary" text type="info">
+      <v-alert v-if="prompts.length === 0" color="secondary" type="info">
         {{ $t(`survey-schemes.prompts.${type}.noPrompts`) }}
       </v-alert>
       <v-row v-else>
         <v-col v-for="prompt in prompts" :key="prompt.id" cols="12" md="3">
-          <v-item v-slot="{ active, toggle }" :value="prompt.component">
+          <v-item v-slot="{ isSelected, toggle }" :value="prompt.component">
             <v-card
-              :color="active ? 'primary' : ''"
+              :color="isSelected ? 'primary' : 'secondary'"
               dark
               height="180"
-              @click.stop="tryToggle(active, toggle)"
+              @click.stop="tryToggle(isSelected, toggle)"
             >
-              <v-card-title class="justify-center">
+              <v-card-title class="text-center">
                 {{ $t(`survey-schemes.prompts.${prompt.id}.title`) }}
               </v-card-title>
               <v-card-subtitle class="text-center">
                 {{ $t(`survey-schemes.prompts.${prompt.id}.subtitle`) }}
               </v-card-subtitle>
-              <v-card-text v-show="active" class="text-center">
-                <v-icon x-large>
+              <v-card-text v-show="isSelected" class="text-center">
+                <v-icon size="48">
                   $check
                 </v-icon>
               </v-card-text>
@@ -29,7 +29,7 @@
         </v-col>
       </v-row>
     </v-container>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
@@ -53,11 +53,11 @@ export default defineComponent({
   },
 
   methods: {
-    tryToggle(active: boolean, toggle: () => void) {
+    tryToggle(active?: boolean, toggle?: () => void) {
       if (active)
         return;
 
-      toggle();
+      toggle?.();
     },
   },
 });
diff --git a/apps/admin/src/components/prompts/standard/addon-foods-prompt.vue b/apps/admin/src/components/prompts/standard/addon-foods-prompt.vue
index 2e4c74a493..2436741e50 100644
--- a/apps/admin/src/components/prompts/standard/addon-foods-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/addon-foods-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-container>
       <v-row>
         <v-col cols="12" md="6">
@@ -9,17 +9,17 @@
             hide-details="auto"
             :items="triggers"
             :label="$t('survey-schemes.prompts.addon-foods-prompt.trigger.type')"
-            outlined
-            :value="trigger.type"
-            @change="update('trigger', { ...trigger, type: $event })"
+            :model-value="trigger.type"
+            variant="outlined"
+            @update:model-value="update('trigger', { ...trigger, type: $event })"
           />
           <v-text-field
             :disabled="['afp', 'any'].includes(trigger.type)"
             hide-details="auto"
             :label="$t('survey-schemes.prompts.addon-foods-prompt.trigger.value')"
-            outlined
-            :value="trigger.value"
-            @input="update('trigger', { ...trigger, value: $event })"
+            :model-value="trigger.value"
+            variant="outlined"
+            @update:model-value="update('trigger', { ...trigger, value: $event })"
           />
         </v-col>
         <v-col cols="12" md="6">
@@ -29,29 +29,29 @@
             hide-details="auto"
             :items="['category', 'food']"
             :label="$t('survey-schemes.prompts.addon-foods-prompt.lookup.type')"
-            outlined
-            :value="lookup.type"
-            @change="update('lookup', { ...lookup, type: $event })"
+            :model-value="lookup.type"
+            variant="outlined"
+            @update:model-value="update('lookup', { ...lookup, type: $event })"
           />
           <v-text-field
             hide-details="auto"
             :label="$t('survey-schemes.prompts.addon-foods-prompt.lookup.value')"
-            outlined
-            :value="lookup.value"
-            @input="update('lookup', { ...lookup, value: $event })"
+            :model-value="lookup.value"
+            variant="outlined"
+            @update:model-value="update('lookup', { ...lookup, value: $event })"
           />
         </v-col>
         <v-col cols="12" md="6">
           <v-switch
             hide-details="auto"
-            :input-value="multiple"
             :label="$t('survey-schemes.prompts.addon-foods-prompt.multiple')"
-            @change="update('multiple', $event)"
+            :model-value="multiple"
+            @update:model-value="update('multiple', $event)"
           />
         </v-col>
       </v-row>
     </v-container>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
@@ -87,7 +87,7 @@ export default defineComponent({
     const { i18n } = useI18n();
 
     const triggers = addonFoodTriggers.map(value => ({
-      text: i18n.t(`survey-schemes.prompts.addon-foods-prompt.trigger.${value}`).toString(),
+      title: i18n.t(`survey-schemes.prompts.addon-foods-prompt.trigger.${value}`),
       value,
     }));
 
diff --git a/apps/admin/src/components/prompts/standard/aggregate-choice-prompt.vue b/apps/admin/src/components/prompts/standard/aggregate-choice-prompt.vue
index 263149700a..ae11427d5d 100644
--- a/apps/admin/src/components/prompts/standard/aggregate-choice-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/aggregate-choice-prompt.vue
@@ -1,24 +1,23 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <language-selector
       :default="[]"
       flat
-      :label="$t('common.options.title').toString()"
-      :value="options"
-      @input="update('options', $event)"
+      :label="$t('common.options.title')"
+      :model-value="options"
+      @update:model-value="update('options', $event)"
     >
-      <template v-for="lang in Object.keys(options)" #[`lang.${lang}`]>
+      <template v-for="lang in Object.keys(options)" :key="lang" #[`lang.${lang}`]>
         <options-list
-          :key="lang"
           :options="options[lang]"
           @update:options="updateLanguage('options', lang, $event)"
         />
       </template>
     </language-selector>
 
-    <v-card outlined>
+    <v-card border>
       <v-card-title>
-        <v-checkbox v-model="filterEnabled" label="Ask only for specific foods" @change="updateFilterEnabled($event)" />
+        <v-checkbox-btn v-model="filterEnabled" label="Ask only for specific foods" @update:model-value="updateFilterEnabled($event)" />
       </v-card-title>
       <div v-if="foodFilter !== undefined">
         <v-card-text class="px-0">
@@ -32,9 +31,9 @@
                 item-value="object"
                 :items="objectSelectList"
                 :label="$t('survey-schemes.conditions.object._')"
-                outlined
-                :value="foodFilter.object"
-                @change="updateFilterObject($event)"
+                :model-value="foodFilter.object"
+                variant="outlined"
+                @update:model-value="updateFilterObject($event)"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -43,20 +42,20 @@
                 item-value="type"
                 :items="propertySelectList[foodFilter.object]"
                 :label="$t('survey-schemes.conditions.property._')"
-                outlined
-                :value="foodFilter.property.id"
-                @change="updateFilterProperty($event)"
+                :model-value="foodFilter.property.id"
+                variant="outlined"
+                @update:model-value="updateFilterProperty($event)"
               />
             </v-col>
           </v-row>
         </v-container>
         <v-card-title>{{ $t(`survey-schemes.conditions._`) }}</v-card-title>
         <v-card-text>
-          <component :is="foodFilter.property.type" :value="foodFilter.property.check" @update="updateFilterCheck($event)" />
+          <component :is="foodFilter.property.type" :model-value="foodFilter.property.check" @update="updateFilterCheck($event)" />
         </v-card-text>
       </div>
     </v-card>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
@@ -69,17 +68,15 @@ import { OptionsList } from '@intake24/admin/components/lists';
 import conditionPartials from '@intake24/admin/components/prompts/partials/conditions';
 import { type Condition, conditionObjectHasProperty, type ConditionObjectId, getConditionDefaults, getDefaultConditionProperty, type ObjectPropertyId, promptConditionDefaults } from '@intake24/common/prompts';
 import { copy } from '@intake24/common/util';
-import { useI18n } from '@intake24/i18n/index';
+import { useI18n } from '@intake24/i18n';
 
-import { basePrompt } from '../partials';
+import { useBasePrompt } from '../partials';
 
 export default defineComponent({
   name: 'AggregateChoicePrompt',
 
   components: { OptionsList, LanguageSelector, ...conditionPartials.check, ConditionSummary: conditionPartials.summary },
 
-  mixins: [basePrompt],
-
   props: {
     options: {
       type: Object as PropType<LocaleOptionList>,
@@ -90,21 +87,24 @@ export default defineComponent({
     },
   },
 
-  setup(props, { emit }) {
+  emits: ['close', 'update:options'],
+
+  setup(props, ctx) {
     const { i18n } = useI18n();
+    const { update, updateLanguage } = useBasePrompt(props, ctx);
 
     const allowedConditionObjects = ['meal', 'food'] as const;
 
-    const objectSelectList: { object: ConditionObjectId; text: string }[]
-      = allowedConditionObjects.map(object => ({ object, text: i18n.t(`survey-schemes.conditions.object.${object}`).toString() }));
+    const objectSelectList: { object: ConditionObjectId; title: string }[]
+      = allowedConditionObjects.map(object => ({ object, title: i18n.t(`survey-schemes.conditions.object.${object}`) }));
 
-    const propertySelectList: Record<ConditionObjectId, { type: string; text: string }[]>
-      = mapValues(promptConditionDefaults, properties => Object.keys(properties).map(id => ({ type: id, text: i18n.t(`survey-schemes.conditions.property.${id}`).toString() })));
+    const propertySelectList: Record<ConditionObjectId, { type: string; title: string }[]>
+      = mapValues(promptConditionDefaults, properties => Object.keys(properties).map(id => ({ type: id, title: i18n.t(`survey-schemes.conditions.property.${id}`) })));
 
     const filterEnabled = ref(props.foodFilter !== undefined);
 
     const updateFoodFilter = (newFilter: Condition | undefined) => {
-      emit('update:foodFilter', newFilter);
+      update('foodFilter', newFilter);
     };
 
     const updateFilterObject = (newObjectId: ConditionObjectId) => {
@@ -155,6 +155,8 @@ export default defineComponent({
       updateFilterCheck,
       filterEnabled,
       updateFilterEnabled,
+      update,
+      updateLanguage,
     };
   },
 });
diff --git a/apps/admin/src/components/prompts/standard/associated-foods-prompt.vue b/apps/admin/src/components/prompts/standard/associated-foods-prompt.vue
index b2664dd129..70f1cd364a 100644
--- a/apps/admin/src/components/prompts/standard/associated-foods-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/associated-foods-prompt.vue
@@ -1,22 +1,22 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12" md="6">
         <v-switch
           hide-details="auto"
-          :input-value="multiple"
           :label="$t('survey-schemes.prompts.associated-foods-prompt.multiple')"
-          @change="update('multiple', $event)"
+          :model-value="multiple"
+          @update:model-value="update('multiple', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
         <food-browser-settings
           :categories-first="categoriesFirst"
-          @update:categoriesFirst="update('categoriesFirst', $event)"
+          @update:categories-first="update('categoriesFirst', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/edit-meal-prompt.vue b/apps/admin/src/components/prompts/standard/edit-meal-prompt.vue
index cc491ffa52..4300ddda4a 100644
--- a/apps/admin/src/components/prompts/standard/edit-meal-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/edit-meal-prompt.vue
@@ -1,16 +1,16 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12">
         <v-switch
           hide-details="auto"
-          :input-value="separateDrinks"
           :label="$t('survey-schemes.prompts.edit-meal-prompt.separateDrinks')"
-          @change="update('separateDrinks', $event)"
+          :model-value="separateDrinks"
+          @update:model-value="update('separateDrinks', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/external-source-prompt.vue b/apps/admin/src/components/prompts/standard/external-source-prompt.vue
index f0a35f56cf..62996f9355 100644
--- a/apps/admin/src/components/prompts/standard/external-source-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/external-source-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-card-text>
       <v-row>
         <v-col cols="12" md="6">
@@ -16,7 +16,7 @@
         </v-col>
       </v-row>
     </v-card-text>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/final-prompt.vue b/apps/admin/src/components/prompts/standard/final-prompt.vue
index cbc7d39249..0ad7f09957 100644
--- a/apps/admin/src/components/prompts/standard/final-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/final-prompt.vue
@@ -1,24 +1,22 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12" md="6">
         <v-card-title>
-          <v-icon left>
-            fas fa-star-half-stroke
-          </v-icon>
+          <v-icon icon="fas fa-star-half-stroke" start />
           {{ $t('survey-schemes.prompts.final-prompt.rating.title') }}
         </v-card-title>
         <v-card-text>
           <v-switch
             hide-details="auto"
-            :input-value="rating"
             :label="$t('survey-schemes.prompts.final-prompt.rating._')"
-            @change="update('rating', $event)"
+            :model-value="rating"
+            @update:model-value="update('rating', $event)"
           />
         </v-card-text>
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/food-search-prompt.vue b/apps/admin/src/components/prompts/standard/food-search-prompt.vue
index 7c2a0fd4da..e3ea35b611 100644
--- a/apps/admin/src/components/prompts/standard/food-search-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/food-search-prompt.vue
@@ -1,28 +1,28 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12" md="6">
         <v-switch
           hide-details="auto"
-          :input-value="allowBrowsing"
           :label="$t('survey-schemes.prompts.food-search-prompt.allowBrowsing')"
-          @change="update('allowBrowsing', $event)"
+          :model-value="allowBrowsing"
+          @update:model-value="update('allowBrowsing', $event)"
         />
         <v-switch
           hide-details="auto"
-          :input-value="dualLanguage"
           :label="$t('survey-schemes.prompts.food-search-prompt.dualLanguage')"
-          @change="update('dualLanguage', $event)"
+          :model-value="dualLanguage"
+          @update:model-value="update('dualLanguage', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
         <food-browser-settings
           :categories-first="categoriesFirst"
-          @update:categoriesFirst="update('categoriesFirst', $event)"
+          @update:categories-first="update('categoriesFirst', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/general-associated-foods-prompt.vue b/apps/admin/src/components/prompts/standard/general-associated-foods-prompt.vue
index 8bd091f7f2..e6c70acf8d 100644
--- a/apps/admin/src/components/prompts/standard/general-associated-foods-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/general-associated-foods-prompt.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-container>
       <v-row>
         <v-col cols="12" md="6">
           <v-text-field
             hide-details="auto"
             :label="$t('survey-schemes.prompts.general-associated-foods-prompt.categoryCode')"
-            :value="categoryCode"
+            :model-value="categoryCode"
             @change="update('categoryCode', $event)"
           />
         </v-col>
@@ -15,18 +15,17 @@
         <v-col cols="12" md="6">
           <language-selector
             :default="[]"
-            :label="$t('survey-schemes.prompts.general-associated-foods-prompt.promptText').toString()"
-            :value="promptText"
-            @input="update('promptText', $event)"
+            :label="$t('survey-schemes.prompts.general-associated-foods-prompt.promptText')"
+            :model-value="promptText"
+            @update:model-value="update('promptText', $event)"
           >
-            <template v-for="lang in Object.keys(promptText)" #[`lang.${lang}`]>
+            <template v-for="lang in Object.keys(promptText)" :key="lang" #[`lang.${lang}`]>
               <v-text-field
-                :key="lang"
                 hide-details="auto"
+                :model-value="promptText[lang]"
                 :name="`promptText.${lang}`"
-                outlined
-                :value="promptText[lang]"
-                @input="updateLanguage('promptText', lang, $event)"
+                variant="outlined"
+                @update:model-value="updateLanguage('promptText', lang, $event)"
               />
             </template>
           </language-selector>
@@ -36,18 +35,17 @@
         <v-col cols="12" md="6">
           <language-selector
             :default="[]"
-            :label="$t('survey-schemes.prompts.general-associated-foods-prompt.genericName').toString()"
-            :value="genericName"
-            @input="update('genericName', $event)"
+            :label="$t('survey-schemes.prompts.general-associated-foods-prompt.genericName')"
+            :model-value="genericName"
+            @update:model-value="update('genericName', $event)"
           >
-            <template v-for="lang in Object.keys(genericName)" #[`lang.${lang}`]>
+            <template v-for="lang in Object.keys(genericName)" :key="lang" #[`lang.${lang}`]>
               <v-text-field
-                :key="lang"
                 hide-details="auto"
+                :model-value="genericName[lang]"
                 :name="`genericName.${lang}`"
-                outlined
-                :value="genericName[lang]"
-                @input="updateLanguage('genericName', lang, $event)"
+                variant="outlined"
+                @update:model-value="updateLanguage('genericName', lang, $event)"
               />
             </template>
           </language-selector>
@@ -57,9 +55,9 @@
         <v-col cols="12" md="6">
           <v-switch
             hide-details="auto"
-            :input-value="multiple"
             :label="$t('survey-schemes.prompts.general-associated-foods-prompt.multiple')"
-            @change="update('multiple', $event)"
+            :model-value="multiple"
+            @update:model-value="update('multiple', $event)"
           />
         </v-col>
       </v-row>
@@ -67,9 +65,9 @@
         <v-col cols="12" md="6">
           <v-switch
             hide-details="auto"
-            :input-value="skipPortionSize"
             :label="$t('survey-schemes.prompts.general-associated-foods-prompt.skipPortionSize')"
-            @change="update('skipPortionSize', $event)"
+            :model-value="skipPortionSize"
+            @update:model-value="update('skipPortionSize', $event)"
           />
         </v-col>
       </v-row>
@@ -78,12 +76,12 @@
         <v-col cols="12" md="6">
           <food-browser-settings
             :categories-first="categoriesFirst"
-            @update:categoriesFirst="update('categoriesFirst', $event)"
+            @update:categories-first="update('categoriesFirst', $event)"
           />
         </v-col>
       </v-row>
     </v-container>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/meal-add-prompt.vue b/apps/admin/src/components/prompts/standard/meal-add-prompt.vue
index fe65b7c2d1..9db3d92bd5 100644
--- a/apps/admin/src/components/prompts/standard/meal-add-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/meal-add-prompt.vue
@@ -1,22 +1,22 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12">
         <v-switch
           hide-details="auto"
-          :input-value="custom"
           :label="$t('survey-schemes.prompts.meal-add-prompt.custom')"
-          @change="update('custom', $event)"
+          :model-value="custom"
+          @update:model-value="update('custom', $event)"
         />
         <v-switch
           hide-details="auto"
-          :input-value="unique"
           :label="$t('survey-schemes.prompts.meal-add-prompt.unique')"
-          @change="update('unique', $event)"
+          :model-value="unique"
+          @update:model-value="update('unique', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/meal-duration-prompt.vue b/apps/admin/src/components/prompts/standard/meal-duration-prompt.vue
index 843a085e8b..af38edab5f 100644
--- a/apps/admin/src/components/prompts/standard/meal-duration-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/meal-duration-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row class="mb-3">
       <v-col cols="12">
         <slider-settings
@@ -10,7 +10,7 @@
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/meal-gap-prompt.vue b/apps/admin/src/components/prompts/standard/meal-gap-prompt.vue
index 77d7ed5056..4cef301141 100644
--- a/apps/admin/src/components/prompts/standard/meal-gap-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/meal-gap-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-card-text>
       <v-row>
         <v-col cols="12" md="6">
@@ -7,12 +7,11 @@
             {{ $t('survey-schemes.prompts.meal-gap-prompt.startTime') }}
           </v-card-title>
           <v-time-picker
-            format="24hr"
             full-width
             :label="$t('survey-schemes.prompts.meal-gap-prompt.startTime')"
-            :landscape="$vuetify.breakpoint.smAndUp"
-            :value="startTime"
-            @input="update('startTime', $event)"
+            :landscape="$vuetify.display.smAndUp"
+            :model-value="startTime"
+            @update:model-value="update('startTime', $event)"
           />
         </v-col>
         <v-col cols="12" md="6">
@@ -20,12 +19,11 @@
             {{ $t('survey-schemes.prompts.meal-gap-prompt.endTime') }}
           </v-card-title>
           <v-time-picker
-            format="24hr"
             full-width
             :label="$t('survey-schemes.prompts.meal-gap-prompt.endTime')"
-            :landscape="$vuetify.breakpoint.smAndUp"
-            :value="endTime"
-            @input="update('endTime', $event)"
+            :landscape="$vuetify.display.smAndUp"
+            :model-value="endTime"
+            @update:model-value="update('endTime', $event)"
           />
         </v-col>
         <v-col cols="12" md="6">
@@ -33,16 +31,16 @@
           <v-text-field
             hide-details="auto"
             :label="$t('survey-schemes.prompts.meal-gap-prompt.gap')"
+            :model-value="gap"
             name="gap"
-            outlined
             :rules="gapRules"
-            :value="gap"
-            @input="updateGapValue"
+            variant="outlined"
+            @update:model-value="updateGapValue"
           />
         </v-col>
       </v-row>
     </v-card-text>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/meal-time-prompt.vue b/apps/admin/src/components/prompts/standard/meal-time-prompt.vue
index 584b981332..0094dc7509 100644
--- a/apps/admin/src/components/prompts/standard/meal-time-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/meal-time-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-card-text>
       <v-row>
         <v-col cols="12" lg="4" md="6">
@@ -8,28 +8,32 @@
           </v-card-title>
           <v-select
             :items="[1, 5, 10, 15, 20, 30]"
-            outlined
+            :model-value="allowedMinutes"
             prepend-inner-icon="fas fa-stopwatch"
-            :value="allowedMinutes"
-            @input="update('allowedMinutes', $event)"
+            variant="outlined"
+            @update:model-value="update('allowedMinutes', $event)"
           >
-            <template #item="{ item }">
-              <i18n path="survey-schemes.prompts.timePicker.allowedMinutes.item">
-                <template #item>
-                  <v-chip>
-                    <span>{{ item }}</span>
-                  </v-chip>
-                </template>
-              </i18n>
+            <template #item="{ item, props }">
+              <v-list-item v-bind="props">
+                <v-list-item-title>
+                  <i18n-t keypath="survey-schemes.prompts.timePicker.allowedMinutes.item">
+                    <template #item>
+                      <v-chip class="mx-1">
+                        <span>{{ item.raw }}</span>
+                      </v-chip>
+                    </template>
+                  </i18n-t>
+                </v-list-item-title>
+              </v-list-item>
             </template>
             <template #selection="{ item }">
-              <i18n path="survey-schemes.prompts.timePicker.allowedMinutes.item">
+              <i18n-t keypath="survey-schemes.prompts.timePicker.allowedMinutes.item">
                 <template #item>
-                  <v-chip>
-                    <span>{{ item }}</span>
+                  <v-chip class="mx-1">
+                    <span>{{ item.raw }}</span>
                   </v-chip>
                 </template>
-              </i18n>
+              </i18n-t>
             </template>
           </v-select>
         </v-col>
@@ -41,8 +45,8 @@
             class="d-flex"
             color="primary"
             mandatory
-            :value="format"
-            @change="update('format', $event)"
+            :model-value="format"
+            @update:model-value="update('format', $event)"
           >
             <v-btn
               class="px-10 flex-grow-1 flex-md-grow-0"
@@ -62,7 +66,7 @@
         </v-col>
       </v-row>
     </v-card-text>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/ready-meal-prompt.vue b/apps/admin/src/components/prompts/standard/ready-meal-prompt.vue
index 9b37207e28..c1fa64ee40 100644
--- a/apps/admin/src/components/prompts/standard/ready-meal-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/ready-meal-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options" />
+  <v-tabs-window-item key="options" value="options" />
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/recall-date-prompt.vue b/apps/admin/src/components/prompts/standard/recall-date-prompt.vue
index 79ab7dc91b..8c00cf4d1b 100644
--- a/apps/admin/src/components/prompts/standard/recall-date-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/recall-date-prompt.vue
@@ -1,38 +1,38 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12" md="6">
         <v-text-field
           hide-details="auto"
           :label="$t('survey-schemes.prompts.date-picker-prompt.current')"
+          :model-value="current"
           name="current"
-          outlined
-          :value="current"
-          @input="updateNumber('current', $event)"
+          variant="outlined"
+          @update:model-value="updateNumber('current', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
         <v-text-field
           hide-details="auto"
           :label="$t('survey-schemes.prompts.date-picker-prompt.min')"
+          :model-value="min"
           name="min"
-          outlined
-          :value="min"
-          @input="updateNumber('min', $event)"
+          variant="outlined"
+          @update:model-value="updateNumber('min', $event)"
         />
       </v-col>
       <v-col cols="12" md="6">
         <v-text-field
           hide-details="auto"
           :label="$t('survey-schemes.prompts.date-picker-prompt.max')"
+          :model-value="max"
           name="max"
-          outlined
-          :value="max"
-          @input="updateNumber('max', $event)"
+          variant="outlined"
+          @update:model-value="updateNumber('max', $event)"
         />
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/redirect-prompt.vue b/apps/admin/src/components/prompts/standard/redirect-prompt.vue
index 74eb1a07c5..4620c7b555 100644
--- a/apps/admin/src/components/prompts/standard/redirect-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/redirect-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12" md="6">
         <v-card-title>{{ $t('survey-schemes.prompts.redirect-prompt.url.title') }}</v-card-title>
@@ -12,11 +12,11 @@
             hide-details="auto"
             :hint="$t('survey-schemes.prompts.redirect-prompt.url.hint')"
             :label="$t('survey-schemes.prompts.redirect-prompt.url._')"
+            :model-value="url"
             name="url"
-            outlined
             persistent-hint
-            :value="url"
-            @input="update('url', $event)"
+            variant="outlined"
+            @update:model-value="update('url', $event)"
           />
           <v-combobox
             class="mb-4"
@@ -24,49 +24,47 @@
             :hint="$t('survey-schemes.prompts.redirect-prompt.identifier.hint')"
             :items="identifiers"
             :label="$t('survey-schemes.prompts.redirect-prompt.identifier._')"
-            outlined
+            :model-value="identifier"
             persistent-hint
-            :value="identifier"
-            @change="updateIdentifier"
+            variant="outlined"
+            @update:model-value="updateIdentifier"
           />
           <v-text-field
             class="mb-4"
             hide-details="auto"
             :label="$t('survey-schemes.prompts.redirect-prompt.timer._')"
+            :model-value="timer"
             name="timer"
-            outlined
             :rules="timerRules"
-            :value="timer"
-            @input="updateTimerValue"
+            variant="outlined"
+            @update:model-value="updateTimerValue"
           />
           <v-select
             :items="targets"
             :label="$t('survey-schemes.prompts.redirect-prompt.target._')"
-            outlined
+            :model-value="target"
             prepend-inner-icon="fa-solid fa-arrow-up-right-from-square"
-            :value="target"
-            @change="update('target', $event)"
+            variant="outlined"
+            @update:model-value="update('target', $event)"
           />
         </v-card-text>
       </v-col>
       <v-col cols="12" md="6">
         <v-card-title>
-          <v-icon left>
-            fas fa-star-half-stroke
-          </v-icon>
+          <v-icon icon="fas fa-star-half-stroke" start />
           {{ $t('survey-schemes.prompts.final-prompt.rating.title') }}
         </v-card-title>
         <v-card-text>
           <v-switch
             hide-details="auto"
-            :input-value="rating"
             :label="$t('survey-schemes.prompts.final-prompt.rating._')"
-            @change="update('rating', $event)"
+            :model-value="rating"
+            @update:model-value="update('rating', $event)"
           />
         </v-card-text>
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
@@ -110,11 +108,11 @@ export default defineComponent({
   setup() {
     const { i18n } = useI18n();
     const identifiers = ['userId', 'username', 'urlAuthToken'].map(value => ({
-      text: i18n.t(`survey-schemes.prompts.redirect-prompt.identifier.options.${value}`),
+      title: i18n.t(`survey-schemes.prompts.redirect-prompt.identifier.options.${value}`),
       value,
     }));
     const targets = ['_self', '_blank'].map(value => ({
-      text: i18n.t(`survey-schemes.prompts.redirect-prompt.target.${value}`),
+      title: i18n.t(`survey-schemes.prompts.redirect-prompt.target.${value}`),
       value,
     }));
 
diff --git a/apps/admin/src/components/prompts/standard/review-confirm-prompt.vue b/apps/admin/src/components/prompts/standard/review-confirm-prompt.vue
index 97d7d26bf1..362b78cdfe 100644
--- a/apps/admin/src/components/prompts/standard/review-confirm-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/review-confirm-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options" />
+  <v-tabs-window-item key="options" value="options" />
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/same-as-before-prompt.vue b/apps/admin/src/components/prompts/standard/same-as-before-prompt.vue
index f677cfd8ac..c3045b4a8d 100644
--- a/apps/admin/src/components/prompts/standard/same-as-before-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/same-as-before-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options" />
+  <v-tabs-window-item key="options" value="options" />
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/split-food-prompt.vue b/apps/admin/src/components/prompts/standard/split-food-prompt.vue
index 1b8f463aa9..3ff5a1e199 100644
--- a/apps/admin/src/components/prompts/standard/split-food-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/split-food-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options" />
+  <v-tabs-window-item key="options" value="options" />
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/prompts/standard/submit-prompt.vue b/apps/admin/src/components/prompts/standard/submit-prompt.vue
index 4c3fb476ac..a5f09c7314 100644
--- a/apps/admin/src/components/prompts/standard/submit-prompt.vue
+++ b/apps/admin/src/components/prompts/standard/submit-prompt.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tab-item key="options" value="options">
+  <v-tabs-window-item key="options" value="options">
     <v-row>
       <v-col cols="12" md="6">
         <v-card-title>{{ $t('survey-schemes.prompts.submit-prompt.review.title') }}</v-card-title>
@@ -8,24 +8,24 @@
         </v-card-subtitle>
         <v-card-text>
           <v-select
-            v-for="key in Object.keys(review)"
+            v-for="key in keys"
             :key="key"
             :items="options"
             :label="$t(`survey-schemes.actions.layouts.${key}`)"
-            outlined
+            :model-value="review[key]"
             :prepend-inner-icon="`$${key}`"
-            :value="review[key]"
-            @change="update('review', { ...review, [key]: $event })"
+            variant="outlined"
+            @update:model-value="update('review', { ...review, [key]: $event })"
           />
         </v-card-text>
       </v-col>
     </v-row>
-  </v-tab-item>
+  </v-tabs-window-item>
 </template>
 
 <script lang="ts">
 import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 
 import type { Prompts } from '@intake24/common/prompts';
 import { reviewOptions } from '@intake24/common/prompts';
@@ -33,6 +33,8 @@ import { useI18n } from '@intake24/i18n';
 
 import { basePrompt } from '../partials';
 
+type Key = keyof Prompts['submit-prompt']['review'];
+
 export default defineComponent({
   name: 'SubmitPrompt',
 
@@ -45,15 +47,17 @@ export default defineComponent({
     },
   },
 
-  setup() {
+  setup(props) {
     const { i18n } = useI18n();
 
     const options = reviewOptions.map(value => ({
-      text: i18n.t(`survey-schemes.prompts.submit-prompt.review.${value}`),
+      title: i18n.t(`survey-schemes.prompts.submit-prompt.review.${value}`),
       value,
     }));
 
-    return { options };
+    const keys = computed(() => Object.keys(props.review) as Key[]);
+
+    return { keys, options };
   },
 });
 </script>
diff --git a/apps/admin/src/components/schemes/copy-scheme-dialog.vue b/apps/admin/src/components/schemes/copy-scheme-dialog.vue
index 26921dfa60..3d92441f4a 100644
--- a/apps/admin/src/components/schemes/copy-scheme-dialog.vue
+++ b/apps/admin/src/components/schemes/copy-scheme-dialog.vue
@@ -1,23 +1,18 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
       <v-btn
-        v-bind="attrs"
         class="ml-3"
         color="secondary"
         :title="$t(`${resource}.copy._`)"
-        v-on="on"
+        v-bind="props"
       >
-        <v-icon left>
-          fas fa-copy
-        </v-icon>{{ $t(`${resource}.copy._`) }}
+        <v-icon icon="fas fa-copy" start />{{ $t(`${resource}.copy._`) }}
       </v-btn>
     </template>
-    <v-card :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t(`${resource}.copy.title`) }}
         </v-toolbar-title>
@@ -31,31 +26,27 @@
               hide-details="auto"
               :label="$t(`${resource}.copy.name`)"
               name="name"
-              outlined
+              variant="outlined"
             />
           </v-col>
           <!-- <v-col cols="12">
-            <v-checkbox v-model="redirect" :label="$t('common.redirect')"></v-checkbox>
+            <v-checkbox-btn v-model="redirect" :label="$t('common.redirect')"></v-checkbox-btn>
           </v-col> -->
         </v-row>
       </v-card-text>
       <v-card-actions class="pb-4">
-        <v-btn class="font-weight-bold" color="error" text @click.stop="close">
-          <v-icon left>
-            $cancel
-          </v-icon>{{ $t('common.action.cancel') }}
+        <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="close">
+          <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
         </v-btn>
         <v-spacer />
         <v-btn
           class="font-weight-bold"
           color="info"
           :disabled="form.errors.any()"
-          text
+          variant="text"
           @click.stop="confirm"
         >
-          <v-icon left>
-            $success
-          </v-icon>{{ $t(`${resource}.copy._`) }}
+          <v-icon icon="$success" start />{{ $t(`${resource}.copy._`) }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -64,7 +55,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRoute, useRouter } from 'vue-router';
 
 import type { SurveySchemeEntry } from '@intake24/common/types/http/admin';
 import { createForm } from '@intake24/admin/util';
@@ -108,7 +99,7 @@ export default defineComponent({
       const { id } = await form.post<SurveySchemeEntry>(`admin/${resource}/${schemeId}/copy`);
 
       close();
-      useMessages().success(i18n.t('common.msg.created', { name }).toString());
+      useMessages().success(i18n.t('common.msg.created', { name }));
 
       if (redirect.value)
         await router.push({ name: name ?? `${resource}-read`, params: { id } });
diff --git a/apps/admin/src/components/schemes/data-export-nutrients.vue b/apps/admin/src/components/schemes/data-export-nutrients.vue
index 34edfad3bd..d0ab22cfbf 100644
--- a/apps/admin/src/components/schemes/data-export-nutrients.vue
+++ b/apps/admin/src/components/schemes/data-export-nutrients.vue
@@ -4,14 +4,14 @@
     class="mb-3"
     clearable
     hide-details="auto"
-    item-text="description"
+    item-title="description"
     item-value="id"
     :items="nutrientTables"
     :label="$t('nutrient-tables._')"
     name="nutrientTableId"
-    outlined
     prepend-inner-icon="$nutrient-tables"
-    @change="fetchNutrientTypes"
+    variant="outlined"
+    @update:model-value="fetchNutrientTypes"
   />
 </template>
 
@@ -27,13 +27,13 @@ export default defineComponent({
   name: 'DataExportNutrients',
 
   props: {
-    value: {
+    modelValue: {
       type: Array as PropType<ExportField[]>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props, { emit }) {
     const http = useHttp();
@@ -59,7 +59,7 @@ export default defineComponent({
       });
 
       const types = data.map(({ id, description }) => ({ id, label: description }));
-      emit('input', types);
+      emit('update:modelValue', types);
     };
 
     onMounted(async () => {
diff --git a/apps/admin/src/components/securables/owner-dialog.vue b/apps/admin/src/components/securables/owner-dialog.vue
index 5bfa985151..ecd10b9d04 100644
--- a/apps/admin/src/components/securables/owner-dialog.vue
+++ b/apps/admin/src/components/securables/owner-dialog.vue
@@ -1,26 +1,22 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-btn class="ml-3" link text v-bind="attrs" v-on="on">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-btn class="ml-3" variant="text" v-bind="props">
         <v-icon class="mr-2">
           fas fa-user-shield
         </v-icon>
         {{ owner ? owner.name : $t('common.none') }}
       </v-btn>
     </template>
-    <v-card :loading="isLoading" :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :loading="isLoading" :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
         <v-toolbar-title>
           {{ $t('securables.owner.title') }}
         </v-toolbar-title>
         <template #extension>
           <div class="mx-auto">
-            <v-icon left>
-              $search
-            </v-icon>{{ $t('securables.search') }}
+            <v-icon icon="$search" start />{{ $t('securables.search') }}
           </div>
         </template>
       </v-toolbar>
@@ -36,13 +32,13 @@
                   :error-messages="form.errors.get('userId')"
                   hide-no-data
                   hide-selected
-                  item-text="email"
+                  item-title="email"
                   item-value="id"
-                  :label="$t('common.email').toString()"
+                  :label="$t('common.email')"
                   name="userId"
                   prepend-inner-icon="fas fa-user-shield"
                   :selected="owner"
-                  @input="form.errors.clear('userId')"
+                  @update:model-value="form.errors.clear('userId')"
                   @update:object="internalOwner = $event"
                 />
               </v-col>
@@ -50,22 +46,18 @@
           </v-card-text>
         </v-container>
         <v-card-actions>
-          <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-            <v-icon left>
-              $cancel
-            </v-icon>{{ $t('common.action.cancel') }}
+          <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+            <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
           </v-btn>
           <v-spacer />
           <v-btn
             class="font-weight-bold"
             color="info"
             :disabled="form.errors.any()"
-            text
             type="submit"
+            variant="text"
           >
-            <v-icon left>
-              $save
-            </v-icon>{{ $t('common.action.save') }}
+            <v-icon icon="$save" start />{{ $t('common.action.save') }}
           </v-btn>
         </v-card-actions>
       </v-form>
diff --git a/apps/admin/src/components/securables/securable.vue b/apps/admin/src/components/securables/securable.vue
index 83e5407546..f5d9175755 100644
--- a/apps/admin/src/components/securables/securable.vue
+++ b/apps/admin/src/components/securables/securable.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-toolbar color="grey lighten-5" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-4" flat tile>
+      <v-icon color="secondary" end>
         fas fa-shield-halved
       </v-icon>
       <v-toolbar-title class="font-weight-medium">
@@ -10,7 +10,7 @@
       <v-spacer />
       <div class="d-flex align-center font-weight-medium text-button">
         {{ $t('securables.owner._') }}:
-        <owner-dialog v-bind="{ api, owner, resource }" ref="ownerDialog" />
+        <owner-dialog v-bind="{ api, owner, resource }" />
       </div>
     </v-toolbar>
     <embedded-data-table v-bind="{ apiUrl: api, headers }" ref="table">
@@ -36,7 +36,7 @@
           :title="$t('common.action.edit')"
           @click.stop="editUser(item)"
         >
-          <v-icon dark>
+          <v-icon>
             $edit
           </v-icon>
         </v-btn>
@@ -44,7 +44,7 @@
           color="error"
           icon
           icon-left="$delete"
-          :label="$t('common.action.delete').toString()"
+          :label="$t('common.action.delete')"
           @confirm="removeUser(item.id)"
         >
           {{ $t('common.action.confirm.delete', { name: item.name ? item.name : item.id }) }}
@@ -62,10 +62,11 @@ import type { SecurableType } from '@intake24/common/security';
 import type { UserSecurableListEntry } from '@intake24/common/types/http/admin';
 import { securableDefs } from '@intake24/common/security';
 import { getResourceFromSecurable } from '@intake24/common/util';
+import { useI18n } from '@intake24/i18n';
 import { ConfirmDialog } from '@intake24/ui';
 
 import type { Owner } from './owner-dialog.vue';
-import { EmbeddedDataTable } from '../data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '../data-tables';
 import OwnerDialog from './owner-dialog.vue';
 import UserDialog from './user-dialog.vue';
 
@@ -89,10 +90,39 @@ export default defineComponent({
   },
 
   setup() {
+    const { i18n: { t } } = useI18n();
+
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
     const userDialog = ref<InstanceType<typeof UserDialog>>();
 
-    return { table, userDialog };
+    const headers: DataTableHeader[] = [
+      {
+        title: t('users.name'),
+        sortable: true,
+        key: 'name',
+        align: 'start',
+      },
+      {
+        title: t('common.email'),
+        sortable: true,
+        key: 'email',
+        align: 'start',
+      },
+      {
+        title: t('securables.actions._'),
+        sortable: false,
+        key: 'securables',
+        align: 'start',
+      },
+      {
+        title: t('common.action._'),
+        sortable: false,
+        key: 'action',
+        align: 'end',
+      },
+    ];
+
+    return { headers, table, userDialog };
   },
 
   data() {
@@ -103,32 +133,6 @@ export default defineComponent({
     return {
       resource,
       actions,
-      headers: [
-        {
-          text: this.$t('users.name'),
-          sortable: true,
-          value: 'name',
-          align: 'start',
-        },
-        {
-          text: this.$t('common.email'),
-          sortable: true,
-          value: 'email',
-          align: 'start',
-        },
-        {
-          text: this.$t('securables.actions._'),
-          sortable: false,
-          value: 'securables',
-          align: 'start',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
     };
   },
 
diff --git a/apps/admin/src/components/securables/user-dialog.vue b/apps/admin/src/components/securables/user-dialog.vue
index c91f9ceb43..01db731dd9 100644
--- a/apps/admin/src/components/securables/user-dialog.vue
+++ b/apps/admin/src/components/securables/user-dialog.vue
@@ -1,47 +1,39 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
       <v-btn
         class="font-weight-bold"
         color="secondary"
-        outlined
-        v-bind="attrs"
-        v-on="on"
+        variant="outlined"
+
+        v-bind="props"
         @click.stop="add"
       >
-        <v-icon left>
-          fas fa-user-plus
-        </v-icon>{{ $t('securables.add') }}
+        <v-icon icon="fas fa-user-plus" start />{{ $t('securables.add') }}
       </v-btn>
     </template>
-    <v-card :loading="isLoading" :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :loading="isLoading" :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
         <v-toolbar-title>
           {{ $t(`securables.${isEdit ? 'edit' : 'add'}`) }}
         </v-toolbar-title>
         <template v-if="!isEdit" #extension>
           <v-tabs v-model="tab" grow>
             <v-tab key="search">
-              <v-icon left>
-                $search
-              </v-icon>
+              <v-icon icon="$search" start />
               {{ $t('securables.search') }}
             </v-tab>
             <v-tab key="create">
-              <v-icon left>
-                fas fa-user-plus
-              </v-icon>
+              <v-icon icon="fas fa-user-plus" start />
               {{ $t('securables.create') }}
             </v-tab>
           </v-tabs>
         </template>
       </v-toolbar>
-      <v-form @keydown.native="clearError" @submit.prevent="save">
-        <v-tabs-items v-model="tab">
-          <v-tab-item key="search">
+      <v-form @keydown="clearError" @submit.prevent="save">
+        <v-tabs-window v-model="tab">
+          <v-tabs-window-item key="search">
             <v-card-text>
               <v-row>
                 <v-col cols="12">
@@ -51,10 +43,10 @@
                       :error-messages="form.errors.get('userId')"
                       hide-details="auto"
                       :label="$t('common.email')"
+                      :model-value="`${selected.email} / ${selected.name}`"
                       name="userId"
-                      outlined
                       prepend-inner-icon="fas fa-user"
-                      :value="`${selected.email} / ${selected.name}`"
+                      variant="outlined"
                     />
                   </template>
                   <template v-else>
@@ -65,19 +57,19 @@
                       :error-messages="form.errors.get('userId')"
                       hide-no-data
                       hide-selected
-                      item-text="email"
+                      item-title="email"
                       item-value="id"
-                      :label="$t('common.email').toString()"
+                      :label="$t('common.email')"
                       name="userId"
                       prepend-inner-icon="fas fa-users"
-                      @input="form.errors.clear('userId')"
+                      @update:model-value="form.errors.clear('userId')"
                     />
                   </template>
                 </v-col>
               </v-row>
             </v-card-text>
-          </v-tab-item>
-          <v-tab-item key="create">
+          </v-tabs-window-item>
+          <v-tabs-window-item key="create">
             <v-card flat>
               <v-card-text>
                 <v-row>
@@ -88,8 +80,8 @@
                       hide-details="auto"
                       :label="$t('common.email')"
                       name="email"
-                      outlined
                       prepend-inner-icon="fas fa-at"
+                      variant="outlined"
                     />
                   </v-col>
                   <v-col cols="12">
@@ -99,8 +91,8 @@
                       hide-details="auto"
                       :label="$t('users.name')"
                       name="name"
-                      outlined
                       prepend-inner-icon="fas fa-user"
+                      variant="outlined"
                     />
                   </v-col>
                   <v-col cols="12">
@@ -110,50 +102,46 @@
                       hide-details="auto"
                       :label="$t('common.phone')"
                       name="phone"
-                      outlined
                       prepend-inner-icon="fas fa-phone"
+                      variant="outlined"
                     />
                   </v-col>
                 </v-row>
               </v-card-text>
             </v-card>
-          </v-tab-item>
-        </v-tabs-items>
+          </v-tabs-window-item>
+        </v-tabs-window>
+        <v-card-title>{{ $t('securables.actions.title') }}</v-card-title>
         <v-card-text>
-          <v-card-title>{{ $t('securables.actions.title') }}</v-card-title>
-          <v-row no-gutters>
+          <v-row dense>
             <v-col v-for="action in actions" :key="action" cols="12" sm="6">
-              <v-checkbox
+              <v-checkbox-btn
                 v-model="form.actions"
-                dense
+                hide-details="auto"
                 :label="$t(`securables.actions.${action}`)"
                 :prepend-inner-icon="
                   form.actions.includes(action) ? `fas fa-unlock` : `fas fa-lock`
                 "
                 :value="action"
-                @change="form.errors.clear('actions')"
+                @update:model-value="form.errors.clear('actions')"
               />
             </v-col>
           </v-row>
           <error-list :errors="nonInputErrors" />
         </v-card-text>
         <v-card-actions>
-          <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-            <v-icon left>
-              $cancel
-            </v-icon>{{ $t('common.action.cancel') }}
+          <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+            <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
           </v-btn>
           <v-spacer />
           <v-btn
             class="font-weight-bold"
             color="info"
             :disabled="form.errors.any()"
-            text
             type="submit"
+            variant="text"
           >
-            <v-icon left>
-              $save
-            </v-icon>{{ $t('common.action.save') }}
+            <v-icon icon="$save" start />{{ $t('common.action.save') }}
           </v-btn>
         </v-card-actions>
       </v-form>
diff --git a/apps/admin/src/components/sidebar/menu-item.vue b/apps/admin/src/components/sidebar/menu-item.vue
index b83a7434e5..d18a1c752e 100644
--- a/apps/admin/src/components/sidebar/menu-item.vue
+++ b/apps/admin/src/components/sidebar/menu-item.vue
@@ -1,11 +1,11 @@
 <template>
   <v-list-item link :to="{ name: item.name }">
-    <v-list-item-action>
-      <v-icon>{{ item.icon }}</v-icon>
-    </v-list-item-action>
-    <v-list-item-content>
-      <v-list-item-title>{{ title }}</v-list-item-title>
-    </v-list-item-content>
+    <template #prepend>
+      <v-icon size="small">
+        {{ item.icon }}
+      </v-icon>
+    </template>
+    <v-list-item-title>{{ title }}</v-list-item-title>
   </v-list-item>
 </template>
 
@@ -23,19 +23,16 @@ export default defineComponent({
       type: Object as PropType<Resource>,
       required: true,
     },
-    active: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   computed: {
     title(): string {
       const { name, title } = this.item;
-      return this.$t(title ?? `${name}.title`).toString();
+      return this.$t(title ?? `${name}.title`);
     },
   },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+</style>
diff --git a/apps/admin/src/components/sidebar/menu-tree.vue b/apps/admin/src/components/sidebar/menu-tree.vue
index b4714423ab..5b21994c53 100644
--- a/apps/admin/src/components/sidebar/menu-tree.vue
+++ b/apps/admin/src/components/sidebar/menu-tree.vue
@@ -1,12 +1,17 @@
 <template>
-  <v-list dense nav>
-    <v-list-group color="grey lighten-1" :prepend-icon="icon" value="true">
-      <template #activator>
-        <v-list-item-title>{{ $t(`common.${name}`) }}</v-list-item-title>
+  <v-list density="compact" nav :opened="[name]">
+    <v-list-group color="grey-lighten-1" :value="name">
+      <template #activator="{ props }">
+        <v-list-item v-bind="props">
+          <template #prepend>
+            <v-icon size="small">
+              {{ icon }}
+            </v-icon>
+          </template>
+          {{ $t(`common.${name}`) }}
+        </v-list-item>
       </template>
-      <v-list-item-group>
-        <menu-item v-for="item in items" :key="item.name" :item="item" />
-      </v-list-item-group>
+      <menu-item v-for="item in items" :key="item.name" :item="item" />
     </v-list-group>
   </v-list>
 </template>
diff --git a/apps/admin/src/components/toolbar/action-mixin.ts b/apps/admin/src/components/toolbar/action-mixin.ts
index 6af7d7b9a4..cf6f59ceb6 100644
--- a/apps/admin/src/components/toolbar/action-mixin.ts
+++ b/apps/admin/src/components/toolbar/action-mixin.ts
@@ -10,9 +10,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    routePrefix: {
-      type: String,
-    },
   },
 
   emits: ['action'],
@@ -21,8 +18,8 @@ export default defineComponent({
     icon(): string {
       return `$${this.action}`;
     },
-    route(): string | null | undefined {
-      return this.routePrefix ?? this.$route.name;
+    route(): string | undefined {
+      return this.$route.name?.toString();
     },
   },
 
diff --git a/apps/admin/src/components/toolbar/create.vue b/apps/admin/src/components/toolbar/create.vue
index 667ae02907..d2e6036923 100644
--- a/apps/admin/src/components/toolbar/create.vue
+++ b/apps/admin/src/components/toolbar/create.vue
@@ -2,11 +2,9 @@
   <v-btn
     color="primary"
     :title="$t(`${module}.create`)"
-    :to="{ name: `${route}-create`, params: { id: 'create' } }"
+    :to="{ name: `${route}-create` }"
   >
-    <v-icon left>
-      {{ icon }}
-    </v-icon>
+    <v-icon :icon="icon" start />
     {{ $t(`${module}.create`) }}
   </v-btn>
 </template>
diff --git a/apps/admin/src/components/toolbar/edit.vue b/apps/admin/src/components/toolbar/edit.vue
index 44e844fcdb..9d6d1fe1bb 100644
--- a/apps/admin/src/components/toolbar/edit.vue
+++ b/apps/admin/src/components/toolbar/edit.vue
@@ -5,9 +5,7 @@
     :title="$t('common.action.edit')"
     @click.stop="onClick"
   >
-    <v-icon left>
-      {{ icon }}
-    </v-icon>
+    <v-icon :icon="icon" start />
     {{ $t('common.action.edit') }}
   </v-btn>
 </template>
diff --git a/apps/admin/src/components/toolbar/read.vue b/apps/admin/src/components/toolbar/read.vue
index 6897d3820f..ed4906756e 100644
--- a/apps/admin/src/components/toolbar/read.vue
+++ b/apps/admin/src/components/toolbar/read.vue
@@ -5,9 +5,7 @@
     :title="$t('common.action.read')"
     @click.stop="onClick"
   >
-    <v-icon left>
-      {{ icon }}
-    </v-icon>
+    <v-icon :icon="icon" start />
     {{ $t('common.action.read') }}
   </v-btn>
 </template>
diff --git a/apps/admin/src/components/toolbar/tool-bar.vue b/apps/admin/src/components/toolbar/tool-bar.vue
index 5bfcb7746f..8272da6b6a 100644
--- a/apps/admin/src/components/toolbar/tool-bar.vue
+++ b/apps/admin/src/components/toolbar/tool-bar.vue
@@ -1,11 +1,14 @@
 <template>
-  <v-card v-if="currentActions.length" class="mb-4" outlined>
-    <v-toolbar>
-      <template v-for="action in ['create', 'read', 'edit']">
+  <v-card
+    v-if="currentActions.length" class="mb-5 px-2"
+    :flat="$vuetify.display.mobile"
+    :rounded="$vuetify.display.mobile ? 0 : undefined"
+  >
+    <v-toolbar color="white">
+      <template v-for="action in ['create', 'read', 'edit']" :key="action">
         <component
           :is="action"
           v-if="currentActions.includes(action)"
-          :key="action"
           :action="action"
           class="mr-2"
           :disabled="selected.length !== 1"
@@ -18,7 +21,8 @@
         color="error"
         :disabled="!selected.length"
         icon-left="$delete"
-        :label="$t('common.action.delete').toString()"
+        :label="$t('common.action.delete')"
+        variant="flat"
         @confirm="onDelete"
       >
         {{ $t('common.action.confirm.multi.delete', { count: selected.length }) }}
@@ -29,7 +33,6 @@
 
 <script lang="ts">
 import type { PropType } from 'vue';
-import type { Location } from 'vue-router';
 import upperFirst from 'lodash/upperFirst';
 import { defineComponent } from 'vue';
 
@@ -63,9 +66,6 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    routePrefix: {
-      type: String,
-    },
   },
 
   emits: ['refresh'],
@@ -74,8 +74,8 @@ export default defineComponent({
     currentActions(): string[] {
       return this.actions.filter(action => this.can({ action }));
     },
-    route(): string | null | undefined {
-      return this.routePrefix ?? this.$route.name;
+    route() {
+      return this.$route.name?.toString() ?? this.module;
     },
   },
 
@@ -90,7 +90,7 @@ export default defineComponent({
       if (!id)
         return;
 
-      await this.$router.push({ name: `${this.route}-read`, params: { id } } as Location);
+      await this.$router.push({ name: `${this.route}-read`, params: { id } });
     },
 
     async onEdit() {
@@ -98,7 +98,7 @@ export default defineComponent({
       if (!id)
         return;
 
-      await this.$router.push({ name: `${this.route}-edit`, params: { id } } as Location);
+      await this.$router.push({ name: `${this.route}-edit`, params: { id } });
     },
 
     async onDelete() {
@@ -107,13 +107,13 @@ export default defineComponent({
         return;
 
       await this.$http.delete(this.api, { params: { id } });
-      useMessages().success(this.$t('common.msg.multi.deleted').toString());
+      useMessages().success(this.$t('common.msg.multi.deleted'));
       this.onDraw();
     },
 
     getOneSelected() {
       if (this.selected.length !== 1) {
-        useMessages().info(this.$t('Select one item to view/edit details.').toString());
+        useMessages().info(this.$t('Select one item to view/edit details.'));
         return false;
       }
       return this.selected[0];
@@ -121,7 +121,7 @@ export default defineComponent({
 
     getAtLeastOneSelected() {
       if (!this.selected.length) {
-        useMessages().info(this.$t('Select at least one item.').toString());
+        useMessages().info(this.$t('Select at least one item.'));
         return false;
       }
       return this.selected;
diff --git a/apps/admin/src/components/user/mfa/duo.vue b/apps/admin/src/components/user/mfa/duo.vue
index 9f30bc0510..436d589932 100644
--- a/apps/admin/src/components/user/mfa/duo.vue
+++ b/apps/admin/src/components/user/mfa/duo.vue
@@ -1,46 +1,40 @@
 <template>
-  <v-stepper v-model="progress" flat vertical>
-    <v-stepper-step :complete="progress > 1" step="1">
-      {{ $t('user.mfa.devices.init.title') }}
-    </v-stepper-step>
-    <v-stepper-content step="1">
-      <v-row>
-        <v-col cols="12" sm="6">
-          <v-btn block class="my-4" color="secondary" rounded @click="challenge">
-            {{ $t('user.mfa.devices.init._') }}
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-stepper-content>
-    <v-stepper-step :complete="progress > 2" step="2">
-      {{ $t('user.mfa.devices.name.title') }}
-    </v-stepper-step>
-    <v-stepper-content step="2">
-      <v-container>
+  <v-stepper-vertical v-model="progress" flat hide-actions>
+    <template #default="{ step }">
+      <v-stepper-vertical-item :complete="step > 1" :title="$t('user.mfa.devices.init.title')" value="1">
         <v-row>
-          <v-col cols="12" sm="8">
-            <v-form @submit.prevent="verify">
-              <v-text-field
-                v-model="form.name"
-                :error-messages="form.errors.get('name')"
-                hide-details="auto"
-                :label="$t('user.mfa.devices.name._')"
-                name="name"
-                outlined
-                @input="form.errors.clear('name')"
-              />
-              <v-btn block class="my-4" color="secondary" rounded type="submit">
-                {{ $t('user.mfa.devices.verify') }}
-              </v-btn>
-            </v-form>
+          <v-col cols="12" sm="6">
+            <v-btn block class="my-4" color="secondary" rounded @click="challenge">
+              {{ $t('user.mfa.devices.init._') }}
+            </v-btn>
           </v-col>
         </v-row>
-      </v-container>
-    </v-stepper-content>
-    <v-stepper-step :complete="progress >= 3" step="3">
-      {{ $t('user.mfa.devices.registered') }}
-    </v-stepper-step>
-  </v-stepper>
+      </v-stepper-vertical-item>
+      <v-stepper-vertical-item :complete="step > 2" :title="$t('user.mfa.devices.name.title')" value="2">
+        <v-container>
+          <v-row>
+            <v-col cols="12" sm="8">
+              <v-form @submit.prevent="verify">
+                <v-text-field
+                  v-model="form.name"
+                  :error-messages="form.errors.get('name')"
+                  hide-details="auto"
+                  :label="$t('user.mfa.devices.name._')"
+                  name="name"
+                  variant="outlined"
+                  @update:model-value="form.errors.clear('name')"
+                />
+                <v-btn block class="my-4" color="secondary" rounded type="submit">
+                  {{ $t('user.mfa.devices.verify') }}
+                </v-btn>
+              </v-form>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-stepper-vertical-item>
+      <v-stepper-vertical-item :complete="step >= 3" :title="$t('user.mfa.devices.registered')" value="3" />
+    </template>
+  </v-stepper-vertical>
 </template>
 
 <script lang="ts">
@@ -55,6 +49,8 @@ import { createForm } from '@intake24/admin/util';
 export default defineComponent({
   name: 'DuoDevice',
 
+  emits: ['registered'],
+
   data() {
     return {
       url: 'admin/user/mfa/providers/duo',
diff --git a/apps/admin/src/components/user/mfa/fido.vue b/apps/admin/src/components/user/mfa/fido.vue
index 1787031cad..dc003207e3 100644
--- a/apps/admin/src/components/user/mfa/fido.vue
+++ b/apps/admin/src/components/user/mfa/fido.vue
@@ -1,54 +1,48 @@
 <template>
-  <v-stepper v-model="progress" flat vertical>
-    <v-stepper-step :complete="progress > 1" step="1">
-      {{ $t('user.mfa.devices.init.title') }}
-    </v-stepper-step>
-    <v-stepper-content step="1">
-      <v-row>
-        <v-col cols="12" sm="6">
-          <v-btn
-            block
-            class="my-4"
-            color="secondary"
-            :loading="!!regChallenge"
-            rounded
-            @click="challenge"
-          >
-            {{ $t('user.mfa.devices.init._') }}
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-stepper-content>
-    <v-stepper-step :complete="progress > 2" step="2">
-      {{ $t('user.mfa.devices.name.title') }}
-    </v-stepper-step>
-    <v-stepper-content step="2">
-      <v-container>
+  <v-stepper-vertical v-model="progress" flat hide-actions>
+    <template #default="{ step }">
+      <v-stepper-vertical-item :complete="step > 1" :title="$t('user.mfa.devices.init.title')" value="1">
         <v-row>
-          <v-col cols="12" sm="8">
-            <v-form @submit.prevent="verify">
-              <v-text-field
-                v-model="form.name"
-                class="my-2"
-                :error-messages="form.errors.get('name')"
-                hide-details="auto"
-                :label="$t('user.mfa.devices.name._')"
-                name="name"
-                outlined
-                @input="form.errors.clear('name')"
-              />
-              <v-btn block class="my-4" color="secondary" rounded type="submit">
-                {{ $t('user.mfa.devices.verify') }}
-              </v-btn>
-            </v-form>
+          <v-col cols="12" sm="6">
+            <v-btn
+              block
+              class="my-4"
+              color="secondary"
+              :loading="!!regChallenge"
+              rounded
+              @click="challenge"
+            >
+              {{ $t('user.mfa.devices.init._') }}
+            </v-btn>
           </v-col>
         </v-row>
-      </v-container>
-    </v-stepper-content>
-    <v-stepper-step :complete="progress >= 3" step="3">
-      {{ $t('user.mfa.devices.registered') }}
-    </v-stepper-step>
-  </v-stepper>
+      </v-stepper-vertical-item>
+      <v-stepper-vertical-item :complete="step > 2" :title="$t('user.mfa.devices.name.title')" value="2">
+        <v-container>
+          <v-row>
+            <v-col cols="12" sm="8">
+              <v-form @submit.prevent="verify">
+                <v-text-field
+                  v-model="form.name"
+                  class="my-2"
+                  :error-messages="form.errors.get('name')"
+                  hide-details="auto"
+                  :label="$t('user.mfa.devices.name._')"
+                  name="name"
+                  variant="outlined"
+                  @update:model-value="form.errors.clear('name')"
+                />
+                <v-btn block class="my-4" color="secondary" rounded type="submit">
+                  {{ $t('user.mfa.devices.verify') }}
+                </v-btn>
+              </v-form>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-stepper-vertical-item>
+      <v-stepper-vertical-item :complete="step >= 3" :title="$t('user.mfa.devices.registered')" value="3" />
+    </template>
+  </v-stepper-vertical>
 </template>
 
 <script lang="ts">
@@ -69,6 +63,8 @@ export interface FIDOForm extends Omit<FIDORegistrationVerificationRequest, 'res
 export default defineComponent({
   name: 'FidoDevice',
 
+  emits: ['registered'],
+
   data() {
     return {
       url: 'admin/user/mfa/providers/fido',
diff --git a/apps/admin/src/components/user/mfa/mfa.vue b/apps/admin/src/components/user/mfa/mfa.vue
index 1bb14cc9eb..b555814426 100644
--- a/apps/admin/src/components/user/mfa/mfa.vue
+++ b/apps/admin/src/components/user/mfa/mfa.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <v-subheader>{{ $t('user.mfa.title') }}</v-subheader>
+    <v-list>
+      <v-list-subheader>{{ $t('user.mfa.title') }}</v-list-subheader>
+    </v-list>
     <v-card-text class="d-flex flex-row align-center justify-space-between">
       <v-switch
         v-model="status"
@@ -9,9 +11,9 @@
         hide-details="auto"
         :label="$t(`user.mfa.${status ? 'disable' : 'enable'}`)"
         name="status"
-        @change="toggle"
+        @update:model-value="toggle"
       />
-      <v-alert v-if="!devices.length" class="my-auto ml-4" dense text type="info">
+      <v-alert v-if="!devices.length" class="my-auto ml-4" density="compact" type="info">
         {{ $t('user.mfa.disabled') }}
       </v-alert>
     </v-card-text>
@@ -20,42 +22,35 @@
         {{ $t('user.mfa.devices.title') }}
       </v-toolbar-title>
       <v-spacer />
-      <v-dialog v-model="dialog" :fullscreen="isMobile" max-width="600px">
-        <template #activator="{ attrs, on }">
+      <v-dialog v-model="dialog" :fullscreen="$vuetify.display.mobile" max-width="600px">
+        <template #activator="{ props }">
           <v-btn
-            v-bind="attrs"
-            color="secondary"
-            outlined
+
+            color="primary"
             rounded
             :title="$t('user.mfa.devices.add')"
-            v-on="on"
+            variant="flat"
+            v-bind="props"
           >
-            <v-icon left>
-              $add
-            </v-icon>
+            <v-icon icon="$add" start />
             {{ $t('user.mfa.devices.add') }}
           </v-btn>
         </template>
-        <v-card :tile="isMobile">
+        <v-card :tile="$vuetify.display.mobile">
           <v-toolbar color="secondary" dark flat>
-            <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-              <v-icon>$cancel</v-icon>
-            </v-btn>
+            <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
             <v-toolbar-title>
               {{ $t('user.mfa.devices.add') }}
             </v-toolbar-title>
           </v-toolbar>
-          <v-tabs v-model="tab" background-color="secondary" dark grow @change="clear">
-            <v-tabs-slider />
-            <v-tab v-for="provider in providers" :key="provider" :href="`#${provider}`">
-              <v-icon left>
-                {{ `$${provider}` }}
-              </v-icon>
+          <v-tabs v-model="tab" bg-color="secondary" grow @update:model-value="clear">
+            <v-tab v-for="provider in providers" :key="provider">
+              <v-icon :icon="`$${provider}`" start />
               {{ $t(`user.mfa.providers.${provider}._`) }}
             </v-tab>
           </v-tabs>
-          <v-tabs-items v-model="tab">
-            <v-tab-item v-for="provider in providers" :key="provider" :value="provider">
+          <v-tabs-window v-model="tab">
+            <v-tabs-window-item v-for="provider in providers" :key="provider" :value="provider">
               <v-card flat>
                 <v-card-title class="text-h5 font-weight-bold mb-2">
                   {{ $t(`user.mfa.providers.${provider}.title`) }}
@@ -65,28 +60,26 @@
                 </v-card-subtitle>
                 <component :is="provider" ref="providerRefs" @registered="add" />
               </v-card>
-            </v-tab-item>
-          </v-tabs-items>
+            </v-tabs-window-item>
+          </v-tabs-window>
         </v-card>
       </v-dialog>
     </v-toolbar>
-    <v-list flat>
-      <transition-group v-if="devices.length" name="drag-and-drop" type="transition">
-        <template v-for="(device, idx) in devices">
-          <v-list-item :key="device.id" link>
-            <v-list-item-avatar>
-              <v-icon :title="$t(`user.mfa.providers.${device.provider}._`)">
-                {{ `$${device.provider}` }}
-              </v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <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>
-            </v-list-item-content>
+    <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" outlined>
+              <v-chip v-if="device.preferred" color="secondary" variant="outlined">
                 {{ $t('user.mfa.devices.preferred._') }}
               </v-chip>
               <confirm-dialog
@@ -94,7 +87,7 @@
                 color="secondary"
                 icon
                 icon-left="far fa-circle-up"
-                :label="$t('user.mfa.devices.preferred.promote').toString()"
+                :label="$t('user.mfa.devices.preferred.promote')"
                 @confirm="promote(device.id, idx)"
               >
                 {{ $t('user.mfa.devices.preferred.promoteConfirm', { name: device.name }) }}
@@ -105,20 +98,17 @@
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('user.mfa.devices.remove').toString()"
+                :label="$t('user.mfa.devices.remove')"
                 @confirm="remove(device.id)"
               >
                 {{ $t('common.action.confirm.delete', { name: device.name }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-          <v-divider v-if="idx + 1 < devices.length" :key="`div-${device.id}`" />
-        </template>
+          </template>
+        </v-list-item>
       </transition-group>
       <v-list-item v-else>
-        <v-list-item-content>
-          <v-list-item-title>{{ $t('user.mfa.devices.none') }}</v-list-item-title>
-        </v-list-item-content>
+        <v-list-item-title>{{ $t('user.mfa.devices.none') }}</v-list-item-title>
       </v-list-item>
     </v-list>
   </div>
@@ -181,7 +171,7 @@ export default defineComponent({
 
     async toggle() {
       if (!this.devices.length) {
-        useMessages().info(this.$t('user.mfa.devices.none').toString());
+        useMessages().info(this.$t('user.mfa.devices.none'));
         return;
       }
 
@@ -190,7 +180,7 @@ export default defineComponent({
       }
       catch (err) {
         if (isAxiosError(err) && err.response?.status === HttpStatusCode.Forbidden) {
-          useMessages().info(this.$t('user.mfa.devices.none').toString());
+          useMessages().info(this.$t('user.mfa.devices.none'));
           return;
         }
 
diff --git a/apps/admin/src/components/user/mfa/otp.vue b/apps/admin/src/components/user/mfa/otp.vue
index a33426f826..304550f446 100644
--- a/apps/admin/src/components/user/mfa/otp.vue
+++ b/apps/admin/src/components/user/mfa/otp.vue
@@ -1,66 +1,60 @@
 <template>
-  <v-stepper v-model="progress" flat vertical>
-    <v-stepper-step :complete="progress > 1" step="1">
-      {{ $t('user.mfa.devices.init.title') }}
-    </v-stepper-step>
-    <v-stepper-content step="1">
-      <v-row>
-        <v-col cols="12" sm="6">
-          <v-btn
-            block
-            class="my-4"
-            color="secondary"
-            :loading="!!regChallenge"
-            rounded
-            @click="challenge"
-          >
-            {{ $t('user.mfa.devices.init._') }}
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-stepper-content>
-    <v-stepper-step :complete="progress > 2" step="2">
-      {{ $t('user.mfa.devices.qr.title') }}
-    </v-stepper-step>
-    <v-stepper-content step="2">
-      <v-row>
-        <v-col cols="12" order="last" order-sm="first" sm="6">
-          <v-form @submit.prevent="verify">
-            <v-text-field
-              v-model="form.name"
-              class="my-2"
-              :error-messages="form.errors.get('name')"
-              hide-details="auto"
-              :label="$t('user.mfa.devices.name._')"
-              name="name"
-              outlined
-              @input="form.errors.clear('name')"
-            />
-            <p class="my-2 text-subtitle-2">
-              {{ $t('user.mfa.devices.qr.text') }}
-            </p>
-            <v-otp-input
-              v-model="form.token"
-              :error-messages="form.errors.get('token')"
-              hide-details="auto"
-              length="6"
-              name="token"
-              @input="form.errors.clear('token')"
-            />
-            <v-btn block class="my-4" color="secondary" rounded type="submit">
-              {{ $t('user.mfa.devices.verify') }}
+  <v-stepper-vertical v-model="progress" flat hide-actions>
+    <template #default="{ step }">
+      <v-stepper-vertical-item :complete="step > 1" :title="$t('user.mfa.devices.init.title')" value="1">
+        <v-row>
+          <v-col cols="12" sm="6">
+            <v-btn
+              block
+              class="my-4"
+              color="secondary"
+              :loading="!!regChallenge"
+              rounded
+              @click="challenge"
+            >
+              {{ $t('user.mfa.devices.init._') }}
             </v-btn>
-          </v-form>
-        </v-col>
-        <v-col cols="12" order="first" order-sm="last" sm="6">
-          <v-img v-if="regChallenge" :aspect-ratio="1 / 1" :src="regChallenge?.qrCode" />
-        </v-col>
-      </v-row>
-    </v-stepper-content>
-    <v-stepper-step :complete="progress >= 3" step="3">
-      {{ $t('user.mfa.devices.registered') }}
-    </v-stepper-step>
-  </v-stepper>
+          </v-col>
+        </v-row>
+      </v-stepper-vertical-item>
+      <v-stepper-vertical-item :complete="step > 2" :title="$t('user.mfa.devices.qr.title')" value="2">
+        <v-row>
+          <v-col cols="12" order="last" order-sm="first" sm="6">
+            <v-form @submit.prevent="verify">
+              <v-text-field
+                v-model="form.name"
+                class="my-2"
+                :error-messages="form.errors.get('name')"
+                hide-details="auto"
+                :label="$t('user.mfa.devices.name._')"
+                name="name"
+                variant="outlined"
+                @update:model-value="form.errors.clear('name')"
+              />
+              <p class="my-2 text-subtitle-2">
+                {{ $t('user.mfa.devices.qr.text') }}
+              </p>
+              <v-otp-input
+                v-model="form.token"
+                :error-messages="form.errors.get('token')"
+                hide-details="auto"
+                length="6"
+                name="token"
+                @input="form.errors.clear('token')"
+              />
+              <v-btn block class="my-4" color="secondary" rounded type="submit">
+                {{ $t('user.mfa.devices.verify') }}
+              </v-btn>
+            </v-form>
+          </v-col>
+          <v-col cols="12" order="first" order-sm="last" sm="6">
+            <v-img v-if="regChallenge" :aspect-ratio="1 / 1" :src="regChallenge?.qrCode" />
+          </v-col>
+        </v-row>
+      </v-stepper-vertical-item>
+      <v-stepper-vertical-item :complete="step >= 3" :title="$t('user.mfa.devices.registered')" value="3" />
+    </template>
+  </v-stepper-vertical>
 </template>
 
 <script lang="ts">
diff --git a/apps/admin/src/components/user/password.vue b/apps/admin/src/components/user/password.vue
index f144575e7c..4782484f5a 100644
--- a/apps/admin/src/components/user/password.vue
+++ b/apps/admin/src/components/user/password.vue
@@ -1,20 +1,18 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="500px">
-    <template #activator="{ attrs, on }">
-      <v-btn v-bind="attrs" outlined :title="$t('common.password.change')" v-on="on">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="500px">
+    <template #activator="{ props }">
+      <v-btn :title="$t('common.password.change')" variant="outlined" v-bind="props">
         {{ $t('common.password.change') }}
       </v-btn>
     </template>
-    <v-card :loading="loading" :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :loading="loading" :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="cancel">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="cancel" />
         <v-toolbar-title>
           {{ $t('common.password.change') }}
         </v-toolbar-title>
       </v-toolbar>
-      <v-form @keydown.native="form.errors.clear($event.target.name)" @submit.prevent="submit">
+      <v-form @keydown="form.errors.clear($event.target.name)" @submit.prevent="submit">
         <input
           autocomplete="username email"
           class="d-none"
@@ -27,55 +25,67 @@
             <v-col cols="12">
               <v-text-field
                 v-model="form.passwordCurrent"
-                :append-icon="showPassword.current ? 'fas fa-eye' : 'fas fa-eye-slash'"
                 autocomplete="current-password"
                 :error-messages="form.errors.get('passwordCurrent')"
                 hide-details="auto"
                 :label="$t('common.password.current')"
                 name="passwordCurrent"
-                outlined
                 prepend-inner-icon="fas fa-key"
                 required
                 :type="showPassword.current ? 'text' : 'password'"
-                @click:append="showPassword.current = !showPassword.current"
-              />
+                variant="outlined"
+              >
+                <template #append-inner>
+                  <v-icon class="me-2" @click="showPassword.current = !showPassword.current">
+                    {{ showPassword.current ? 'fas fa-eye' : 'fas fa-eye-slash' }}
+                  </v-icon>
+                </template>
+              </v-text-field>
             </v-col>
             <v-col cols="12">
               <v-text-field
                 v-model="form.password"
-                :append-icon="showPassword.password ? 'fas fa-eye' : 'fas fa-eye-slash'"
                 autocomplete="new-password"
                 :error-messages="form.errors.get('password')"
                 hide-details="auto"
                 :label="$t('common.password.new')"
                 name="password"
-                outlined
                 prepend-inner-icon="fas fa-key"
                 required
                 :type="showPassword.password ? 'text' : 'password'"
-                @click:append="showPassword.password = !showPassword.password"
-              />
+                variant="outlined"
+              >
+                <template #append-inner>
+                  <v-icon class="me-2" @click="showPassword.password = !showPassword.password">
+                    {{ showPassword.password ? 'fas fa-eye' : 'fas fa-eye-slash' }}
+                  </v-icon>
+                </template>
+              </v-text-field>
             </v-col>
             <v-col cols="12">
               <v-text-field
                 v-model="form.passwordConfirm"
-                :append-icon="showPassword.confirm ? 'fas fa-eye' : 'fas fa-eye-slash'"
                 autocomplete="new-password"
                 :error-messages="form.errors.get('passwordConfirm')"
                 hide-details="auto"
                 :label="$t('common.password.confirm')"
                 name="passwordConfirm"
-                outlined
                 prepend-inner-icon="fas fa-key"
                 required
                 :type="showPassword.confirm ? 'text' : 'password'"
-                @click:append="showPassword.confirm = !showPassword.confirm"
-              />
+                variant="outlined"
+              >
+                <template #append-inner>
+                  <v-icon class="me-2" @click="showPassword.confirm = !showPassword.confirm">
+                    {{ showPassword.confirm ? 'fas fa-eye' : 'fas fa-eye-slash' }}
+                  </v-icon>
+                </template>
+              </v-text-field>
             </v-col>
           </v-row>
         </v-card-text>
         <v-card-actions class="px-6 pb-6">
-          <v-btn color="primary" type="submit" width="100%" x-large>
+          <v-btn color="primary" size="x-large" type="submit" variant="flat" width="100%">
             {{ $t('common.password.update') }}
           </v-btn>
         </v-card-actions>
@@ -133,7 +143,7 @@ export default defineComponent({
       try {
         await this.form.post('user/password');
         this.close();
-        useMessages().success(this.$t('common.password.updated').toString());
+        useMessages().success(this.$t('common.password.updated'));
       }
       finally {
         this.loading = false;
diff --git a/apps/admin/src/components/web-push/web-push.vue b/apps/admin/src/components/web-push/web-push.vue
index 97a1c2f5fe..83cc0a043a 100644
--- a/apps/admin/src/components/web-push/web-push.vue
+++ b/apps/admin/src/components/web-push/web-push.vue
@@ -1,27 +1,25 @@
 <template>
   <v-alert
     v-if="isWebPushSupported"
-    border="left"
+    border="start"
     class="my-4"
+    closable
     color="primary"
-    dark
-    dismissible
-    outlined
     prominent
     type="info"
   >
-    <p class="subtitle-1">
+    <p class="text-subtitle-1">
       Application can send you push notifications.
     </p>
-    <p class="caption">
+    <p class="text-caption">
       Push notifications can let you know when result is ready so you don't have to manually check
       for it. E.g. if you submit a job, which runs in background and is finished later. You don't
       have to re-check the status as you will get notified with push notification.
     </p>
-    <v-divider class="my-4 primary" style="opacity: 0.5" />
+    <v-divider class="my-4 bg-primary" style="opacity: 0.5" />
     <v-row v-if="isPermissionGranted" align="center" no-gutters>
       <v-col class="grow">
-        <div class="subtitle-2">
+        <div class="text-subtitle-2">
           Push notifications are allowed. You can give it a test to see how it will look like.
         </div>
       </v-col>
@@ -33,7 +31,7 @@
     </v-row>
     <v-row v-else align="center" no-gutters>
       <v-col class="grow">
-        <div class="subtitle-2">
+        <div class="text-subtitle-2">
           Click on "Allow PUSH" and confirm the notification in browser's pop-up.
         </div>
       </v-col>
diff --git a/apps/admin/src/composables/entry/use-entry-fetch.ts b/apps/admin/src/composables/entry/use-entry-fetch.ts
index 6d34fd5733..ab294d9300 100644
--- a/apps/admin/src/composables/entry/use-entry-fetch.ts
+++ b/apps/admin/src/composables/entry/use-entry-fetch.ts
@@ -1,4 +1,4 @@
-import { onBeforeRouteLeave } from 'vue-router/composables';
+import { onBeforeRouteLeave } from 'vue-router';
 
 import resources from '@intake24/admin/router/resources';
 import { useEntry } from '@intake24/admin/stores';
diff --git a/apps/admin/src/composables/entry/use-entry-form.ts b/apps/admin/src/composables/entry/use-entry-form.ts
index ba2ed43cd8..9ea4be5b44 100644
--- a/apps/admin/src/composables/entry/use-entry-form.ts
+++ b/apps/admin/src/composables/entry/use-entry-form.ts
@@ -2,7 +2,7 @@ import type { Method } from 'axios';
 import { deepEqual } from 'fast-equals';
 import pick from 'lodash/pick';
 import { computed, reactive, ref, toRefs, watch } from 'vue';
-import { useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router';
 
 import type { FormConfig } from '@intake24/admin/util';
 import {
@@ -74,7 +74,7 @@ export function useEntryForm<F extends object, E extends object>(props: UseStore
       data = await form[editMethod]<EntryState>(`${resource.api}/${entryId.value}`);
 
       const { id, name } = data;
-      useMessages().success(i18n.t('common.msg.updated', { name: name ?? id }).toString());
+      useMessages().success(i18n.t('common.msg.updated', { name: name ?? id }));
     }
     else {
       data = await form.post<EntryState>(`${resource.api}`);
@@ -82,7 +82,7 @@ export function useEntryForm<F extends object, E extends object>(props: UseStore
       const { id, name } = data;
       await router.push({ name: `${resource.name}-edit`, params: { id } });
 
-      useMessages().success(i18n.t('common.msg.created', { name: name ?? id }).toString());
+      useMessages().success(i18n.t('common.msg.created', { name: name ?? id }));
     }
 
     setEntry(data);
diff --git a/apps/admin/src/composables/entry/use-entry-watch.ts b/apps/admin/src/composables/entry/use-entry-watch.ts
index ce2e29b253..675aadc5f6 100644
--- a/apps/admin/src/composables/entry/use-entry-watch.ts
+++ b/apps/admin/src/composables/entry/use-entry-watch.ts
@@ -1,14 +1,15 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { NavigationGuardNext, Route } from 'vue-router';
+import type { NavigationGuardNext, RouteLocationNormalized, RouteLocationNormalizedLoaded } from 'vue-router';
 import { computed, ref } from 'vue';
-import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router/composables';
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
 
+import type { RouteLeave } from '@intake24/admin/types';
 import { copy } from '@intake24/common/util';
 
 export function useEntryWatch(originalEntry: Ref<object>, changed?: ComputedRef<boolean>) {
-  const routeLeave = ref({
+  const routeLeave = ref<RouteLeave>({
     dialog: false,
-    to: null as Route | null,
+    to: null,
     confirmed: false,
   });
 
@@ -18,7 +19,7 @@ export function useEntryWatch(originalEntry: Ref<object>, changed?: ComputedRef<
     originalEntry.value = copy(data);
   };
 
-  const beforeRouteCheck = (to: Route, from: Route, next: NavigationGuardNext) => {
+  const beforeRouteCheck = (to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded, next: NavigationGuardNext) => {
     if (routeLeave.value.confirmed) {
       routeLeave.value = { dialog: false, to: null, confirmed: false };
       next();
diff --git a/apps/admin/src/composables/use-list-with-dialog.ts b/apps/admin/src/composables/use-list-with-dialog.ts
index db734f2a72..ebd05ba2ad 100644
--- a/apps/admin/src/composables/use-list-with-dialog.ts
+++ b/apps/admin/src/composables/use-list-with-dialog.ts
@@ -5,7 +5,7 @@ import { computed, ref, toRefs, watch } from 'vue';
 import { copy } from '@intake24/common/util';
 
 export type ListProps<O> = {
-  value: O[];
+  modelValue: O[];
   defaults?: O[];
 };
 
@@ -18,11 +18,11 @@ export type ListOps<I, O = I> = {
 // TODO: fix generic types casting
 
 export function useListWithDialog<I, O = I>(props: ListProps<O>, context: SetupContext, ops: ListOps<I, O>) {
-  const { value } = toRefs(props);
+  const { modelValue } = toRefs(props);
   const { newItem, transformIn, transformOut } = ops;
   const form = ref<InstanceType<typeof HTMLFormElement>>();
 
-  const items = ref(copy(transformIn ? value.value.map(transformIn) : value.value)) as Ref<
+  const items = ref(copy(transformIn ? modelValue.value.map(transformIn) : modelValue.value)) as Ref<
     UnwrapRef<I>[]
   >;
 
@@ -40,7 +40,7 @@ export function useListWithDialog<I, O = I>(props: ListProps<O>, context: SetupC
     item: newItem(),
   });
 
-  watch(value, (val) => {
+  watch(modelValue, (val) => {
     if (deepEqual(val, outputItems.value))
       return;
 
@@ -56,7 +56,7 @@ export function useListWithDialog<I, O = I>(props: ListProps<O>, context: SetupC
   };
 
   const update = () => {
-    context.emit('input', outputItems.value);
+    context.emit('update:modelValue', outputItems.value);
   };
 
   const load = (list: UnwrapRef<I>[]) => {
diff --git a/apps/admin/src/composables/use-selects.ts b/apps/admin/src/composables/use-selects.ts
index 3ca01e7b56..683761f272 100644
--- a/apps/admin/src/composables/use-selects.ts
+++ b/apps/admin/src/composables/use-selects.ts
@@ -10,68 +10,69 @@ import { useI18n } from '@intake24/i18n';
 import { opToIconMap } from './op-icon-map';
 
 export function useSelects() {
-  const { i18n } = useI18n();
+  const { i18n: { messages, locale, t } } = useI18n();
 
   const actions = actionTypeRefs.map(value => ({
     value,
-    text: i18n.t(`survey-schemes.actions.types.${value}`).toString(),
+    title: t(`survey-schemes.actions.types.${value}`),
   }));
 
   const actionVariants = actionVariantRefs.map(value => ({
     value,
-    text: i18n.t(`survey-schemes.actions.variants.${value}`).toString(),
+    title: t(`survey-schemes.actions.variants.${value}`),
   }));
 
   const colors = Object.entries(themeColors).map(([key, color]) => ({
     value: key,
-    text: key.toUpperCase(),
+    title: key.toUpperCase(),
     color,
   }));
 
-  const conditionOps: { icon: string; op: ConditionOpCode; text: string }[] = conditionOpCodes.map(op => ({
+  const conditionOps: { icon: string; op: ConditionOpCode; title: string }[] = conditionOpCodes.map(op => ({
     icon: opToIconMap[op],
     op,
-    text: i18n.t(`survey-schemes.conditions.ops.${op}`).toString(),
+    title: t(`survey-schemes.conditions.ops.${op}`),
   }));
 
   const flags = orderBy(
-    Object.entries(i18n.messages[i18n.locale].flags).map(([key, value]) => ({
+    // @ts-expect-error - i18n messages
+    Object.entries(messages.value[locale.value].flags).map(([key, value]) => ({
       value: key,
-      text: value,
+      title: value,
     })),
-    'text',
+    'title',
   );
 
   const layouts = promptLayouts.map(value => ({
     value,
-    text: i18n.t(`survey-schemes.actions.layouts.${value}`).toString(),
+    title: t(`survey-schemes.actions.layouts.${value}`),
   }));
 
   const orientations = ['column', 'row'].map(value => ({
-    text: i18n.t(`survey-schemes.prompts.orientation.${value}`),
+    title: t(`survey-schemes.prompts.orientation.${value}`),
     value,
   }));
 
   const textDirections = textDirectionRefs.map(value => ({
     value,
-    text: i18n.t(`languages.textDirections.${value}`).toString(),
+    title: t(`languages.textDirections.${value}`),
     icon: value === 'ltr' ? 'fas fa-right-long' : 'fas fa-left-long',
   }));
 
   const visibilities = recordVisibilities.map(value => ({
     value,
-    text: i18n.t(`securables.visibility.${value}`).toString(),
+    title: t(`securables.visibility.${value}`),
     icon: value === 'restricted' ? 'fas fa-eye-slash' : 'fas fa-eye',
   }));
 
   const schemeTypes = schemeTypeRefs.map(value => ({
     value,
-    text: i18n.t(`survey-schemes.settings.types.${value}`),
+    title: t(`survey-schemes.settings.types.${value}`),
   }));
 
   const recallFlows = recallFlowRefs.map(value => ({
     value,
-    text: i18n.t(`survey-schemes.settings.flows.${value}`),
+    title: t(`survey-schemes.settings.flows.${value}`),
   }));
 
   return {
diff --git a/apps/admin/src/i18n/index.ts b/apps/admin/src/i18n/index.ts
index 2ba3c6655c..001574a81f 100644
--- a/apps/admin/src/i18n/index.ts
+++ b/apps/admin/src/i18n/index.ts
@@ -1,9 +1,12 @@
+import type { DefaultLocaleMessageSchema } from 'vue-i18n';
+
 import { merge } from '@intake24/common/util';
-import { i18n } from '@intake24/i18n';
+import { defaultMessages, i18n } from '@intake24/i18n';
 import enAdmin from '@intake24/i18n/admin/en';
 import enShared from '@intake24/i18n/shared/en';
 
-const messages = merge(enShared, enAdmin);
-i18n.setLocaleMessage('en', messages);
+const messages = merge(enShared, enAdmin) as DefaultLocaleMessageSchema;
+i18n.global.setLocaleMessage('en', messages);
+defaultMessages.setMessages('en', messages);
 
 export default i18n;
diff --git a/apps/admin/src/main.ts b/apps/admin/src/main.ts
index acaad70b35..b6ca45316a 100644
--- a/apps/admin/src/main.ts
+++ b/apps/admin/src/main.ts
@@ -1,7 +1,4 @@
-import './bootstrap';
-
-import type { Route } from 'vue-router';
-import Vue from 'vue';
+import { createApp } from 'vue';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import VueGtag from 'vue-gtag';
 
@@ -9,40 +6,47 @@ import pinia from '@intake24/ui/stores/bootstrap';
 
 import App from './app.vue';
 import i18n from './i18n';
+import { auth, loading, module } from './mixins';
 import vuetify from './plugins/vuetify';
 import router from './router';
-import { errorHandler, httpService /* , warnHandler */ } from './services';
-
-Vue.config.productionTip = false;
-Vue.config.errorHandler = errorHandler;
-// Vue.config.warnHandler = warnHandler;
-Vue.prototype.$http = httpService;
-
-Vue.use(
-  VueGtag,
-  {
-    enabled: !!import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
-    bootstrap: !!import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
-    appName: import.meta.env.VITE_APP_NAME,
-    config: {
-      id: import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
-    },
-    pageTrackerTemplate: (to: Route) => ({
-      page_title: i18n.t(to.meta?.title).toString(),
-      page_path: to.path,
-    }),
+import guards from './router/guards';
+import { errorHandler, httpService } from './services';
+import { useAuth } from './stores';
+
+guards(router);
+
+const app = createApp(App);
+
+app.config.errorHandler = errorHandler;
+// app.config.warnHandler = warnHandler;
+
+app.config.globalProperties.$http = httpService;
+
+// @ts-expect-error vue mixin type issue
+app.mixin(auth);
+// @ts-expect-error vue mixin type issue
+app.mixin(loading);
+// @ts-expect-error vue mixin type issue
+app.mixin(module);
+
+app.use(router);
+app.use(pinia);
+app.use(i18n);
+app.use(vuetify);
+app.use(VueGtag, {
+  enabled: !!import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
+  bootstrap: !!import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
+  appName: import.meta.env.VITE_APP_NAME,
+  config: {
+    id: import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
   },
-  router,
-).use(VueDOMPurifyHTML, {
+}, router);
+app.use(VueDOMPurifyHTML, {
   i18n: {
     ALLOWED_TAGS: ['b', 'i', 'strong', 'em', 'p', 'u'],
   },
 });
 
-new Vue({
-  i18n,
-  pinia,
-  router,
-  vuetify,
-  render: h => h(App),
-}).$mount('#app');
+app.mount('#app');
+
+app.config.globalProperties.$http.init(router, useAuth);
diff --git a/apps/admin/src/mixins/index.ts b/apps/admin/src/mixins/index.ts
index c219e3d246..7121f49676 100644
--- a/apps/admin/src/mixins/index.ts
+++ b/apps/admin/src/mixins/index.ts
@@ -1,6 +1,5 @@
 export { default as auth } from './auth';
 export { default as handlesLoading } from './handles-loading';
-export { default as isMobile } from './is-mobile';
 export { default as loading } from './loading';
 export { default as module } from './module';
 export { default as resource } from './resource';
diff --git a/apps/admin/src/mixins/is-mobile.ts b/apps/admin/src/mixins/is-mobile.ts
deleted file mode 100644
index 61f5fb6739..0000000000
--- a/apps/admin/src/mixins/is-mobile.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  computed: {
-    isMobile(): boolean {
-      return this.$vuetify.breakpoint.mobile;
-    },
-  },
-});
diff --git a/apps/admin/src/plugins/vuetify.ts b/apps/admin/src/plugins/vuetify.ts
index 34e7240dfc..d7c76d47cc 100644
--- a/apps/admin/src/plugins/vuetify.ts
+++ b/apps/admin/src/plugins/vuetify.ts
@@ -1,23 +1,93 @@
-// import type { Icons } from 'vuetify';
-import Vue from 'vue';
-import Vuetify from 'vuetify/lib';
+import 'vuetify/styles';
+
+import type { IconAliases } from 'vuetify';
+import { createVuetify } from 'vuetify';
+import * as directives from 'vuetify/directives';
+import { aliases, fa } from 'vuetify/iconsets/fa';
+import { VDateInput } from 'vuetify/labs/VDateInput';
+import { VStepperVertical, VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
+import { VTimePicker } from 'vuetify/labs/VTimePicker';
+import { VTreeview } from 'vuetify/labs/VTreeview';
 
-import type { Dictionary } from '@intake24/common/types';
 import { colors } from '@intake24/common/theme';
 
 import resources from '../router/resources';
 
-const resourceIcons = resources.reduce<Dictionary>((acc, resource) => {
+const resourceIcons = resources.reduce<Partial<IconAliases>>((acc, resource) => {
   acc[resource.name] = resource.icon;
   return acc;
 }, {});
 
-Vue.use(Vuetify);
-
-export default new Vuetify({
+export default createVuetify({
+  components: {
+    VDateInput,
+    VStepperVertical,
+    VStepperVerticalItem,
+    VTimePicker,
+    VTreeview,
+  },
+  directives,
+  defaults: {
+    VAlert: {
+      variant: 'tonal',
+    },
+    VBtn: {
+      variant: 'flat',
+    },
+    VCardActions: {
+      VBtn: {
+        variant: 'flat',
+      },
+    },
+    VCombobox: {
+      variant: 'outlined',
+    },
+    VDataTableServer: {
+      VBtn: {
+        icon: true,
+        variant: 'text',
+        size: 'small',
+      },
+    },
+    VFileInput: {
+      variant: 'outlined',
+    },
+    VListItemAction: {
+      VBtn: {
+        variant: 'text',
+        size: 'small',
+      },
+    },
+    VSelect: {
+      variant: 'outlined',
+    },
+    VSwitch: {
+      color: 'primary',
+    },
+    VTextField: {
+      variant: 'outlined',
+    },
+    VTextarea: {
+      variant: 'outlined',
+    },
+    VTimePicker: {
+      format: '24hr',
+      title: '',
+    },
+    VToolbar: {
+      class: ['px-2'],
+      VBtn: {
+        variant: 'flat',
+      },
+    },
+  },
+  display: {
+    mobileBreakpoint: 'md',
+  },
   icons: {
-    iconfont: 'fa',
-    values: {
+    defaultSet: 'fa',
+    aliases: {
+      ...aliases,
       add: 'fas fa-plus',
       cancel: 'fas fa-circle-xmark',
       check: 'fas fa-check-circle',
@@ -52,11 +122,14 @@ export default new Vuetify({
       categories: 'fas fa-list',
       foods: 'fas fa-drumstick-bite',
     },
+    sets: {
+      fa,
+    },
   },
   theme: {
     themes: {
       light: {
-        ...colors,
+        colors,
       },
     },
   },
diff --git a/apps/admin/src/router/guards.ts b/apps/admin/src/router/guards.ts
index 25039ff97f..ef5bde35f7 100644
--- a/apps/admin/src/router/guards.ts
+++ b/apps/admin/src/router/guards.ts
@@ -1,4 +1,4 @@
-import type Router from 'vue-router';
+import type { Router } from 'vue-router';
 
 import { useAuth, useResource, useUser } from '../stores';
 import resources from './resources';
@@ -46,8 +46,10 @@ export default (router: Router): void => {
     next();
   });
 
-  router.afterEach(async (to) => {
-    const { meta: { module } = {} } = to;
+  router.beforeResolve(async (to) => {
+    const {
+      meta: { module },
+    } = to;
 
     // Update module/resource name
     const name = module.parent ?? module.current;
@@ -55,7 +57,7 @@ export default (router: Router): void => {
 
     const resourceStore = useResource();
 
-    if (!resourceStore.name !== name)
+    if (resourceStore.name !== name)
       resourceStore.update({ name, api: resource?.api ?? `admin/${name}`, refs: resource?.refs });
   });
 };
diff --git a/apps/admin/src/router/index.ts b/apps/admin/src/router/index.ts
index 1c8db0b508..5456dc48b7 100644
--- a/apps/admin/src/router/index.ts
+++ b/apps/admin/src/router/index.ts
@@ -1,12 +1,10 @@
-import type { RouteConfig } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
 import { singular } from 'pluralize';
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 
 import views from '@intake24/admin/views';
 
 import type { Resource } from '../types';
-import guards from './guards';
 import resources from './resources';
 
 export interface GenerateRoutesOps extends Resource {
@@ -17,7 +15,9 @@ function isVueComponent(object: any) {
   if (typeof object === 'function')
     return true;
 
-  const { render } = object;
+  const { render, setup } = object;
+  if (setup && typeof setup === 'function')
+    return true;
   if (render && typeof render === 'function')
     return true;
 
@@ -26,7 +26,7 @@ function isVueComponent(object: any) {
 
 function generateResourceRoutes(resourceName: string, pathSegments: string[], viewsPath: any, options: GenerateRoutesOps) {
   const { parent, securable } = options;
-  const routerRoutes: RouteConfig[] = [];
+  const routerRoutes: RouteRecordRaw[] = [];
 
   const resourceRoutes = Object.keys(viewsPath);
   const name = parent ? `${parent}-${resourceName}` : resourceName;
@@ -89,11 +89,9 @@ function generateResourceRoutes(resourceName: string, pathSegments: string[], vi
   return routerRoutes;
 }
 
-Vue.use(VueRouter);
-
 const { authentication } = views;
 
-const routes: RouteConfig[] = [
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'login',
@@ -229,14 +227,7 @@ resources.forEach((item) => {
   routes.push(...generateResourceRoutes(name, [`/${first}`, ...rest], resourceViews, item));
 });
 
-routes.push({ path: '*', name: '404', redirect: '/' });
-
-const router = new VueRouter({
-  mode: 'history',
-  base: import.meta.env.VITE_APP_BASE_URL ?? '/',
+export default createRouter({
+  history: createWebHistory(import.meta.env.VITE_APP_BASE_URL ?? '/'),
   routes,
 });
-
-guards(router);
-
-export default router;
diff --git a/apps/admin/src/router/resources.ts b/apps/admin/src/router/resources.ts
index 5c7dbcd0ae..a6971eb9af 100644
--- a/apps/admin/src/router/resources.ts
+++ b/apps/admin/src/router/resources.ts
@@ -59,7 +59,7 @@ export const resources: Resource[] = [
   {
     group: 'fdb',
     name: 'standard-units',
-    icon: 'fa-cubes-stacked',
+    icon: 'fas fa-cubes-stacked',
     api: 'admin/standard-units',
     generateRoutes: true,
     routes: [...routes, 'categories', 'foods'],
diff --git a/apps/admin/src/scss/app.scss b/apps/admin/src/scss/app.scss
index 56e642674a..c7e75d2c76 100644
--- a/apps/admin/src/scss/app.scss
+++ b/apps/admin/src/scss/app.scss
@@ -1,42 +1,44 @@
-@import 'vuetify/src/styles/styles.sass';
+@use 'settings';
+@import 'variables';
 
 // Libs
 @import 'fontawesome';
 @import 'flags';
 
-.list-bordered {
-  > :not(:last-child) {
-    border-bottom: 1px solid map-get($grey, 'lighten-3');
-  }
+// Not padded sidebar
+.v-list-group__items .v-list-item {
+  padding-inline-start: 8px !important;
 }
 
-.list-item-border {
-  &:not(:last-child) {
-    border-bottom: 1px solid map-get($grey, 'lighten-3');
+.list-border {
+  .v-list-item: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($grey, 'lighten-3');
-  }
+.list-item-border:not(:last-child) {
+  border-bottom: 1px solid map-get(settings.$grey, 'lighten-3');
+}
 
-  .drag-and-drop__handle {
-    cursor: move;
-  }
+// Drag & drop lists
+.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/scss/fontawesome.scss b/apps/admin/src/scss/fontawesome.scss
index 76a3e37090..5ed6840b10 100644
--- a/apps/admin/src/scss/fontawesome.scss
+++ b/apps/admin/src/scss/fontawesome.scss
@@ -1,4 +1,5 @@
 $fa-font-path: '../node_modules/@fortawesome/fontawesome-free/webfonts';
+$fa-display: inline-flex;
 
 @import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
 @import '../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
diff --git a/apps/admin/src/scss/settings.scss b/apps/admin/src/scss/settings.scss
new file mode 100644
index 0000000000..c3c66859fd
--- /dev/null
+++ b/apps/admin/src/scss/settings.scss
@@ -0,0 +1,41 @@
+$font: Rubik, sans-serif;
+
+@forward 'vuetify/settings' with (
+  $body-font-family: $font,
+  $button-font-weight: 600,
+
+  $card-title-word-break: break-word,
+  $card-title-padding: 1rem 1rem 0.5rem 1rem,
+
+  $breadcrumbs-padding-y: 18px,
+  $breadcrumbs-padding-x: 6px,
+
+  $expansion-panel-title-font-size: 1rem,
+
+  $typography: (
+    'h1': (
+      'size': 2rem,
+      'line-height': 2.5rem,
+    ),
+    'h2': (
+      'size': 1.75rem,
+      'line-height': 2rem,
+    ),
+    'h3': (
+      'size': 1.5rem,
+      'line-height': 2rem,
+    ),
+    'h4': (
+      'size': 1.3rem,
+      'line-height': 1.5rem,
+    ),
+    'h5': (
+      'size': 1.2rem,
+      'line-height': 1.5rem,
+    ),
+    'h6': (
+      'size': 1rem,
+      'line-height': 1.5rem,
+    ),
+  )
+);
diff --git a/apps/admin/src/scss/vuetify.scss b/apps/admin/src/scss/vuetify.scss
deleted file mode 100644
index 5cdaa7bb3f..0000000000
--- a/apps/admin/src/scss/vuetify.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import 'vuetify/src/styles/styles.sass';
-
-$body-font-family: Rubik, sans-serif;
-$heading-font-family: $body-font-family;
-
-$material-light: (
-  'background': #f5f5f5,
-);
-
-$fab-icon-sizes: (
-  'x-small': 16,
-  'small': 18,
-  'default': 20,
-  'large': 28,
-  'x-large': 32,
-);
-
-$btn-font-weight: 600;
-
-$breadcrumbs-item-large-font-size: 20px;
-$breadcrumbs-padding: 18px 6px;
-
-$icon-size: 20px;
-$icon-size-dense: 18px;
-
-$headings: (
-  'h1': (
-    'size': 2rem,
-    'line-height': 2.5rem,
-  ),
-  'h2': (
-    'size': 1.75rem,
-    'line-height': 2rem,
-  ),
-  'h3': (
-    'size': 1.5rem,
-    'line-height': 2rem,
-  ),
-  'h4': (
-    'size': 1.3rem,
-    'line-height': 1.5rem,
-  ),
-  'h5': (
-    'size': 1.2rem,
-    'line-height': 1.5rem,
-  ),
-  'h6': (
-    'size': 1rem,
-    'line-height': 1.5rem,
-  ),
-);
-
-$utilities: (
-  'gap': (
-    responsive: true,
-    property: gap,
-    class: ga,
-    values: $spacers,
-  ),
-  'gap-column': (
-    responsive: true,
-    property: column-gap,
-    class: gc,
-    values: $spacers,
-  ),
-  'gap-row': (
-    responsive: true,
-    property: row-gap,
-    class: gr,
-    values: $spacers,
-  ),
-);
diff --git a/apps/admin/src/shims-vue.d.ts b/apps/admin/src/shims-vue.d.ts
deleted file mode 100644
index 5424484583..0000000000
--- a/apps/admin/src/shims-vue.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-
-  export default Vue;
-}
diff --git a/apps/admin/src/stores/entry.ts b/apps/admin/src/stores/entry.ts
index f556989f4c..2bab506412 100644
--- a/apps/admin/src/stores/entry.ts
+++ b/apps/admin/src/stores/entry.ts
@@ -2,7 +2,7 @@ import axios, { HttpStatusCode } from 'axios';
 import { defineStore } from 'pinia';
 
 import type { Dictionary } from '@intake24/common/types';
-import type { UserSecurableAttributes } from '@intake24/db';
+import type { UserSecurableAttributes } from '@intake24/common/types/http/admin';
 
 import { httpService } from '../services';
 import { useResource } from './resource';
diff --git a/apps/admin/src/types/common.ts b/apps/admin/src/types/common.ts
index 90b1d9ec21..46bedf6850 100644
--- a/apps/admin/src/types/common.ts
+++ b/apps/admin/src/types/common.ts
@@ -1,4 +1,4 @@
-import type { Route } from 'vue-router';
+import type { RouteLocationNormalized } from 'vue-router';
 
 export interface Resource {
   group: string;
@@ -16,7 +16,7 @@ export interface Resource {
 
 export type RouteLeave = {
   dialog: boolean;
-  to: Route | null;
+  to: RouteLocationNormalized | null;
   confirmed: boolean;
 };
 
diff --git a/apps/admin/src/globals.d.ts b/apps/admin/src/types/globals.d.ts
similarity index 69%
rename from apps/admin/src/globals.d.ts
rename to apps/admin/src/types/globals.d.ts
index 662b499e3a..61c340b8e9 100644
--- a/apps/admin/src/globals.d.ts
+++ b/apps/admin/src/types/globals.d.ts
@@ -1,17 +1,14 @@
 import type { HttpClient, Permission } from '@intake24/ui/types';
 
-declare module 'vue/types/vue' {
-  interface Vue {
+declare module 'vue' {
+  interface ComponentCustomProperties {
     $http: HttpClient;
 
     // authMixin
     can: (permission: string | string[] | Permission) => boolean;
 
     // loadingMixin
-    isAppLoading: () => boolean;
-
-    // isMobile mixin
-    isMobile: () => boolean;
+    isAppLoading: boolean;
 
     // moduleMixin
     module: string;
diff --git a/apps/admin/src/types/vite-env.d.ts b/apps/admin/src/types/vite-env.d.ts
new file mode 100644
index 0000000000..587eba8a03
--- /dev/null
+++ b/apps/admin/src/types/vite-env.d.ts
@@ -0,0 +1,26 @@
+/// <reference types="vite/client" />
+
+import type { CaptchaProvider } from '@intake24/common/security';
+
+interface ImportMetaEnv {
+  readonly VITE_APP_NAME: string;
+  readonly VITE_APP_BASE_URL: string;
+  readonly VITE_APP_PREFIX: string;
+
+  readonly VITE_API_HOST: string;
+  readonly VITE_API_URL: string;
+
+  readonly VITE_ACL_SIGNUP_ENABLED: string;
+
+  readonly VITE_CAPTCHA_PROVIDER: CaptchaProvider;
+  readonly VITE_CAPTCHA_SITEKEY: string;
+
+  readonly VITE_GOOGLE_ANALYTICS_ID: string;
+  readonly VITE_STRICH_KEY: string;
+  readonly VITE_WEBPUSH_PUBLIC_KEY: string;
+
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/apps/admin/src/types/vue-router.d.ts b/apps/admin/src/types/vue-router.d.ts
new file mode 100644
index 0000000000..2f8b4f18f6
--- /dev/null
+++ b/apps/admin/src/types/vue-router.d.ts
@@ -0,0 +1,13 @@
+import 'vue-router';
+
+export {};
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    module: { current: string; parent?: string };
+    public?: boolean;
+    title?: string;
+    perm?: string;
+    action?: string;
+  }
+}
diff --git a/apps/admin/src/util/objects.ts b/apps/admin/src/util/objects.ts
index f5742bbc4d..256a95f06c 100644
--- a/apps/admin/src/util/objects.ts
+++ b/apps/admin/src/util/objects.ts
@@ -1,11 +1,11 @@
-import { randomString } from '@intake24/common/util';
+import { copy, randomString } from '@intake24/common/util';
 
 export function toIndexedList<T extends object>(items: T[]): (T & { id: number })[] {
   return items.map((item, idx) => ({ ...item, id: idx }));
 }
 
 export function withIdList<T extends object>(items: T[]): (T & { id: string })[] {
-  return items.map(item => ({ ...item, id: randomString(6) }));
+  return items.map(item => copy({ ...item, id: randomString(6) }));
 }
 
 export const withId = <T>(item: T): T & { _id: string } => ({ ...item, _id: randomString(6) });
diff --git a/apps/admin/src/views/authentication/login.vue b/apps/admin/src/views/authentication/login.vue
index 45b696aeb2..19d115225a 100644
--- a/apps/admin/src/views/authentication/login.vue
+++ b/apps/admin/src/views/authentication/login.vue
@@ -1,9 +1,9 @@
 <template>
   <app-entry-screen
-    :subtitle="$t('common.login.subtitle').toString()"
-    :title="$t('common._').toString()"
+    :subtitle="$t('common.login.subtitle')"
+    :title="$t('common._')"
   >
-    <v-form @keydown.native="errors.clear($event.target.name)" @submit.prevent="login">
+    <v-form @keydown="errors.clear($event.target.name)" @submit.prevent="login">
       <v-card-text>
         <v-container>
           <v-row>
@@ -15,31 +15,35 @@
                 hide-details="auto"
                 :label="$t('common.email')"
                 name="email"
-                outlined
                 prepend-inner-icon="fas fa-envelope"
                 required
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
               <v-text-field
                 v-model="password"
-                :append-icon="showPassword ? 'fa-eye' : 'fa-eye-slash'"
                 autocomplete="current-password"
                 :error-messages="errors.get('password')"
                 hide-details="auto"
                 :label="$t('common.password._')"
                 name="password"
-                outlined
                 prepend-inner-icon="fas fa-key"
                 required
                 :type="showPassword ? 'text' : 'password'"
-                @click:append="showPassword = !showPassword"
-              />
+                variant="outlined"
+              >
+                <template #append-inner>
+                  <v-icon class="me-2" @click="showPassword = !showPassword">
+                    {{ showPassword ? 'fas fa-eye' : 'fas fa-eye-slash' }}
+                  </v-icon>
+                </template>
+              </v-text-field>
               <v-btn
                 class="mt-2 font-weight-bold"
                 color="info"
-                text
                 :to="{ name: 'password-request' }"
+                variant="text"
               >
                 {{ $t('common.password.forgot') }}
               </v-btn>
@@ -47,7 +51,7 @@
           </v-row>
           <v-row justify="center">
             <v-col cols="12">
-              <v-btn block color="primary" :disabled="isAppLoading" rounded type="submit" x-large>
+              <v-btn block color="primary" :disabled="isAppLoading" rounded size="x-large" type="submit">
                 {{ $t('common.login._') }}
               </v-btn>
             </v-col>
@@ -57,14 +61,14 @@
     </v-form>
     <template v-if="signupEnabled">
       <v-divider class="mx-6" />
-      <v-card-title class="text-h3 font-weight-medium justify-center pt-6">
+      <v-card-title class="text-h3 font-weight-medium text-center pt-6">
         {{ $t('common.signup.noAccount') }}
       </v-card-title>
       <v-card-text>
         <v-container>
           <v-row justify="center">
             <v-col cols="12">
-              <v-btn block color="primary" outlined rounded :to="{ name: 'signup' }" x-large>
+              <v-btn block color="primary" rounded size="x-large" :to="{ name: 'signup' }" variant="outlined">
                 {{ $t('common.signup._') }}
               </v-btn>
             </v-col>
@@ -75,7 +79,7 @@
     <mfa-dialog
       v-if="auth.mfa"
       :auth-data="auth.mfa"
-      :value="!!auth.mfa"
+      :model-value="!!auth.mfa"
       @close="clearMFAChallenge"
     />
   </app-entry-screen>
diff --git a/apps/admin/src/views/authentication/mfa-dialog.vue b/apps/admin/src/views/authentication/mfa-dialog.vue
index 0446d78494..b6b5b21d9a 100644
--- a/apps/admin/src/views/authentication/mfa-dialog.vue
+++ b/apps/admin/src/views/authentication/mfa-dialog.vue
@@ -1,24 +1,22 @@
 <template>
-  <v-dialog v-bind="{ value }" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <v-card :tile="$vuetify.breakpoint.smAndDown">
+  <v-dialog v-bind="{ modelValue }" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <v-card :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>{{ $t('common.mfa.title') }}</v-toolbar-title>
       </v-toolbar>
       <v-row no-gutters>
         <v-col cols="12" sm="6">
-          <v-sheet color="grey lighten-3 fill-height">
+          <v-sheet color="grey-lighten-3">
             <v-card-text class="d-flex justify-center align-center">
               <v-card v-if="provider === 'duo'" flat tile>
-                <v-sheet class="d-flex flex-column align-center py-6" color="grey lighten-3">
+                <v-sheet class="d-flex flex-column align-center py-6" color="grey-lighten-3">
                   <v-progress-circular
                     class="mb-4"
                     color="primary"
+                    :model-value="duo.value"
                     :rotate="-90"
                     :size="200"
-                    :value="duo.value"
                     :width="20"
                   >
                     <div class="d-flex align-center flex-column">
@@ -34,7 +32,7 @@
                 </v-sheet>
               </v-card>
               <v-card v-if="provider === 'fido'" flat link tile @click="fidoChallenge">
-                <v-sheet class="d-flex flex-column align-center py-6" color="grey lighten-3">
+                <v-sheet class="d-flex flex-column align-center py-6" color="grey-lighten-3">
                   <v-icon class="provider-icon mb-6" color="secondary">
                     $fido
                   </v-icon>
@@ -59,7 +57,7 @@
                     hide-details="auto"
                     length="6"
                     name="token"
-                    @input="otp.errors.clear('token')"
+                    @update:model-value="otp.errors.clear('token')"
                   />
                   <v-btn block color="secondary" rounded type="submit">
                     {{ $t('common.action.confirm._') }}
@@ -70,29 +68,23 @@
           </v-sheet>
         </v-col>
         <v-col cols="12" sm="6">
-          <v-list-item-group
-            active-class="grey--text lighten-3"
-            :value="deviceId"
+          <v-list
+            v-model="deviceId"
+            class="list-border"
+            lines="two"
             @change="selectDevice"
           >
-            <v-list subheader two-line>
-              <v-subheader>{{ $t('common.mfa.devices') }}</v-subheader>
-              <template v-for="(device, idx) in authData.devices">
-                <v-list-item :key="device.id" link :value="device.id">
-                  <v-list-item-avatar>
-                    <v-icon :title="$t(`user.mfa.providers.${device.provider}._`)">
-                      {{ `$${device.provider}` }}
-                    </v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title>{{ device.name }}</v-list-item-title>
-                    <v-list-item-subtitle>{{ device.provider }}</v-list-item-subtitle>
-                  </v-list-item-content>
-                </v-list-item>
-                <v-divider v-if="idx < authData.devices.length + 1" :key="`div-${device.id}`" />
+            <v-list-subheader>{{ $t('common.mfa.devices') }}</v-list-subheader>
+            <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>
-          </v-list-item-group>
+              <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>
     </v-card>
@@ -117,7 +109,7 @@ export default defineComponent({
       type: Object as PropType<MFAAuthResponse>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Boolean,
       required: true,
     },
@@ -146,7 +138,7 @@ export default defineComponent({
   },
 
   watch: {
-    value: {
+    modelValue: {
       immediate: true,
       async handler(val, oldVal) {
         if (!val || oldVal || !this.authData.challenge)
@@ -165,7 +157,7 @@ export default defineComponent({
     },
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.clearDuoInterval();
   },
 
@@ -175,7 +167,7 @@ export default defineComponent({
     },
 
     fail() {
-      useMessages().error(this.$t('common.mfa.error').toString());
+      useMessages().error(this.$t('common.mfa.error'));
       this.close();
     },
 
@@ -228,7 +220,7 @@ export default defineComponent({
         await this.finalizeLogin();
       }
       catch {
-        useMessages().error(this.$t('common.mfa.error').toString());
+        useMessages().error(this.$t('common.mfa.error'));
       }
     },
 
diff --git a/apps/admin/src/views/authentication/password-request.vue b/apps/admin/src/views/authentication/password-request.vue
index 7fb2ae300e..f4f6d69a3d 100644
--- a/apps/admin/src/views/authentication/password-request.vue
+++ b/apps/admin/src/views/authentication/password-request.vue
@@ -1,7 +1,7 @@
 <template>
   <app-entry-screen
-    :subtitle="$t('common.password.request.subtitle').toString()"
-    :title="$t('common.password.request._').toString()"
+    :subtitle="$t('common.password.request.subtitle')"
+    :title="$t('common.password.request._')"
   >
     <v-card-text v-if="submitted" class="pa-6">
       <p class="text-h5 ma-4">
@@ -11,7 +11,7 @@
         {{ $t('common.spam') }}
       </p>
     </v-card-text>
-    <v-form v-else @keydown.native="form.errors.clear($event.target.name)" @submit.prevent="submit">
+    <v-form v-else @keydown="form.errors.clear($event.target.name)" @submit.prevent="submit">
       <v-card-text>
         <v-container>
           <v-row>
@@ -22,15 +22,15 @@
                 hide-details="auto"
                 :label="$t('common.email')"
                 name="email"
-                outlined
                 prepend-inner-icon="fas fa-envelope"
                 required
+                variant="outlined"
               />
             </v-col>
           </v-row>
           <v-row justify="center">
             <v-col cols="12">
-              <v-btn block color="primary" :disabled="isAppLoading" rounded type="submit" x-large>
+              <v-btn block color="primary" :disabled="isAppLoading" rounded size="x-large" type="submit">
                 {{ $t('common.password.request.send') }}
               </v-btn>
             </v-col>
@@ -40,10 +40,8 @@
       <captcha ref="captchaEl" @expired="expired" @verified="verified" />
     </v-form>
     <v-card-actions>
-      <v-btn color="info" exact text :to="{ name: 'login' }">
-        <v-icon left>
-          fas fa-angles-left
-        </v-icon>
+      <v-btn color="info" exact :to="{ name: 'login' }" variant="text">
+        <v-icon icon="fas fa-angles-left" start />
         {{ $t('common.login.back') }}
       </v-btn>
     </v-card-actions>
@@ -103,7 +101,7 @@ export default defineComponent({
       catch (err) {
         if (this.form.errors.has('captcha')) {
           this.form.errors.clear('captcha');
-          useMessages().error(this.$t('common.password.request.captcha').toString());
+          useMessages().error(this.$t('common.password.request.captcha'));
         }
         else {
           throw err;
diff --git a/apps/admin/src/views/authentication/password-reset.vue b/apps/admin/src/views/authentication/password-reset.vue
index e228f146e0..b4e135b522 100644
--- a/apps/admin/src/views/authentication/password-reset.vue
+++ b/apps/admin/src/views/authentication/password-reset.vue
@@ -1,9 +1,9 @@
 <template>
   <app-entry-screen
-    :subtitle="$t('common.password.reset.subtitle').toString()"
-    :title="$t('common.password.reset._').toString()"
+    :subtitle="$t('common.password.reset.subtitle')"
+    :title="$t('common.password.reset._')"
   >
-    <v-form @keydown.native="form.errors.clear($event.target.name)" @submit.prevent="submit">
+    <v-form @keydown="form.errors.clear($event.target.name)" @submit.prevent="submit">
       <v-card-text>
         <v-container>
           <v-row>
@@ -15,9 +15,9 @@
                 hide-details="auto"
                 :label="$t('common.email')"
                 name="email"
-                outlined
                 prepend-inner-icon="fas fa-envelope"
                 required
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
@@ -28,10 +28,10 @@
                 hide-details="auto"
                 :label="$t('common.password._')"
                 name="password"
-                outlined
                 prepend-inner-icon="fas fa-key"
                 required
                 type="password"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
@@ -42,17 +42,17 @@
                 hide-details="auto"
                 :label="$t('common.password.confirm')"
                 name="passwordConfirm"
-                outlined
                 prepend-inner-icon="fas fa-key"
                 required
                 type="password"
+                variant="outlined"
               />
             </v-col>
             <error-list :errors="nonInputErrors" tag="v-col" />
           </v-row>
           <v-row justify="center">
             <v-col cols="12">
-              <v-btn block color="primary" :disabled="isAppLoading" rounded type="submit" x-large>
+              <v-btn block color="primary" :disabled="isAppLoading" rounded size="x-large" type="submit">
                 {{ $t('common.password.reset._') }}
               </v-btn>
             </v-col>
@@ -61,10 +61,8 @@
       </v-card-text>
     </v-form>
     <v-card-actions>
-      <v-btn color="info" exact text :to="{ name: 'login' }">
-        <v-icon left>
-          fas fa-angles-left
-        </v-icon>
+      <v-btn color="info" exact :to="{ name: 'login' }" variant="text">
+        <v-icon icon="fas fa-angles-left" start />
         {{ $t('common.login.back') }}
       </v-btn>
     </v-card-actions>
@@ -123,7 +121,7 @@ export default defineComponent({
   methods: {
     async submit() {
       await this.form.post('password/reset');
-      useMessages().success(this.$t('common.password.changed').toString());
+      useMessages().success(this.$t('common.password.changed'));
       await this.$router.push({ name: 'login' });
     },
   },
diff --git a/apps/admin/src/views/authentication/signup.vue b/apps/admin/src/views/authentication/signup.vue
index 178e1e943a..4331d82eda 100644
--- a/apps/admin/src/views/authentication/signup.vue
+++ b/apps/admin/src/views/authentication/signup.vue
@@ -1,10 +1,10 @@
 <template>
   <app-entry-screen
-    max-width="800px"
-    :subtitle="$t('common.signup.subtitle').toString()"
-    :title="$t('common.signup._').toString()"
+    :subtitle="$t('common.signup.subtitle')"
+    :title="$t('common.signup._')"
+    width="800px"
   >
-    <v-form @keydown.native="form.errors.clear($event.target.name)" @submit.prevent="submit">
+    <v-form @keydown="form.errors.clear($event.target.name)" @submit.prevent="submit">
       <v-card-text>
         <v-container>
           <v-row>
@@ -16,9 +16,9 @@
                 hide-details="auto"
                 :label="$t('users.name')"
                 name="name"
-                outlined
                 prepend-inner-icon="fas fa-user"
                 required
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" sm="6">
@@ -29,9 +29,9 @@
                 hide-details="auto"
                 :label="$t('common.phone')"
                 name="phone"
-                outlined
                 prepend-inner-icon="fas fa-phone"
                 required
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" sm="6">
@@ -42,9 +42,9 @@
                 hide-details="auto"
                 :label="$t('common.email')"
                 name="email"
-                outlined
                 prepend-inner-icon="fas fa-envelope"
                 required
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" sm="6">
@@ -55,54 +55,62 @@
                 hide-details="auto"
                 :label="$t('common.emailConfirm')"
                 name="emailConfirm"
-                outlined
                 prepend-inner-icon="fas fa-envelope"
                 required
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" sm="6">
               <v-text-field
                 v-model="form.password"
-                :append-icon="show.password ? 'fas fa-eye' : 'fas fa-eye-slash'"
+
                 autocomplete="new-password"
                 :error-messages="form.errors.get('password')"
                 hide-details="auto"
                 :label="$t('common.password._')"
                 name="password"
-                outlined
                 prepend-inner-icon="fas fa-key"
                 required
                 :type="show.password ? 'text' : 'password'"
-                @click:append="show.password = !show.password"
-              />
+                variant="outlined"
+              >
+                <template #append-inner>
+                  <v-icon class="me-2" @click="show.password = !show.password">
+                    {{ show.password ? 'fas fa-eye' : 'fas fa-eye-slash' }}
+                  </v-icon>
+                </template>
+              </v-text-field>
             </v-col>
             <v-col cols="12" sm="6">
               <v-text-field
                 v-model="form.passwordConfirm"
-                :append-icon="show.passwordConfirm ? 'fas fa-eye' : 'fas fa-eye-slash'"
                 autocomplete="new-password"
                 :error-messages="form.errors.get('passwordConfirm')"
                 hide-details="auto"
                 :label="$t('common.password.confirm')"
                 name="passwordConfirm"
-                outlined
                 prepend-inner-icon="fas fa-key"
                 required
                 :type="show.passwordConfirm ? 'text' : 'password'"
-                @click:append="show.passwordConfirm = !show.passwordConfirm"
-              />
+                variant="outlined"
+              >
+                <template #append-inner>
+                  <v-icon class="me-2" @click="show.passwordConfirm = !show.passwordConfirm">
+                    {{ show.passwordConfirm ? 'fas fa-eye' : 'fas fa-eye-slash' }}
+                  </v-icon>
+                </template>
+              </v-text-field>
             </v-col>
             <v-col cols="12">
-              <v-checkbox
+              <v-checkbox-btn
                 v-model="form.terms"
-                class="mt-0"
                 :error-messages="form.errors.get('terms')"
                 hide-details="auto"
                 name="terms"
-                @change="form.errors.clear('terms')"
+                @update:model-value="form.errors.clear('terms')"
               >
                 <template #label>
-                  <i18n path="common.terms.text" tag="div">
+                  <i18n-t keypath="common.terms.text" tag="div">
                     <template #privacy>
                       <a href="https://intake24.org/privacy" target="_blank" @click.stop>
                         {{ $t('common.terms.privacy') }}
@@ -113,14 +121,14 @@
                         {{ $t('common.terms.tos') }}
                       </a>
                     </template>
-                  </i18n>
+                  </i18n-t>
                 </template>
-              </v-checkbox>
+              </v-checkbox-btn>
             </v-col>
           </v-row>
           <v-row justify="center">
             <v-col cols="12" sm="6">
-              <v-btn block color="primary" :disabled="isAppLoading" rounded type="submit" x-large>
+              <v-btn block color="primary" :disabled="isAppLoading" rounded size="x-large" type="submit">
                 {{ $t('common.signup._') }}
               </v-btn>
             </v-col>
@@ -130,10 +138,8 @@
       <captcha ref="captchaEl" @expired="expired" @verified="verified" />
     </v-form>
     <v-card-actions>
-      <v-btn color="info" exact text :to="{ name: 'login' }">
-        <v-icon left>
-          fas fa-angles-left
-        </v-icon>
+      <v-btn color="info" exact :to="{ name: 'login' }" variant="text">
+        <v-icon icon="fas fa-angles-left" start />
         {{ $t('common.login.back') }}
       </v-btn>
     </v-card-actions>
@@ -212,7 +218,7 @@ export default defineComponent({
       catch (err) {
         if (this.form.errors.has('captcha')) {
           this.form.errors.clear('captcha');
-          useMessages().error(this.$t('common.password.request.captcha').toString());
+          useMessages().error(this.$t('common.password.request.captcha'));
         }
         else {
           throw err;
diff --git a/apps/admin/src/views/authentication/verify.vue b/apps/admin/src/views/authentication/verify.vue
index 2c5b17ba39..885a522b78 100644
--- a/apps/admin/src/views/authentication/verify.vue
+++ b/apps/admin/src/views/authentication/verify.vue
@@ -1,7 +1,7 @@
 <template>
   <app-entry-screen
-    :subtitle="$t('common.verify.subtitle').toString()"
-    :title="$t('common.verify._').toString()"
+    :subtitle="$t('common.verify.subtitle')"
+    :title="$t('common.verify._')"
   >
     <v-card-text class="px-6">
       <p class="text-subtitle-2">
@@ -17,9 +17,9 @@
               block
               color="primary"
               :disabled="isAppLoading"
-              outlined
               rounded
-              x-large
+              size="x-large"
+              variant="outlined"
               @click="resend"
             >
               {{ $t('common.verify.resend') }}
@@ -71,7 +71,7 @@ export default defineComponent({
   methods: {
     async resend() {
       await this.$http.post('admin/user/verify', {}, { withLoading: true });
-      useMessages().success(this.$t('common.verify.resent').toString());
+      useMessages().success(this.$t('common.verify.resent'));
     },
 
     async verify(token: string) {
diff --git a/apps/admin/src/views/fdbs/browse.vue b/apps/admin/src/views/fdbs/browse.vue
index ddbe592360..3a12d2c8c1 100644
--- a/apps/admin/src/views/fdbs/browse.vue
+++ b/apps/admin/src/views/fdbs/browse.vue
@@ -5,49 +5,42 @@
       {{ item.code }}
     </template>
     <template #[`item.action`]="{ item }">
-      <v-btn color="secondary" icon :to="{ name: 'fdbs-food-list', params: { id: item.id } }">
+      <v-btn color="secondary" icon :to="{ name: 'fdbs-food-list', params: { id: item.id } }" variant="text">
         <v-icon>far fa-file</v-icon>
       </v-btn>
     </template>
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'FoodDbList' });
 
-export default defineComponent({
-  name: 'FoodDbList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('locales.code'),
-          sortable: true,
-          value: 'code',
-        },
-        {
-          text: this.$t('locales.englishName'),
-          sortable: true,
-          value: 'englishName',
-        },
-        {
-          text: this.$t('locales.localName'),
-          sortable: true,
-          value: 'localName',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('locales.code'),
+    sortable: true,
+    key: 'code',
+  },
+  {
+    title: t('locales.englishName'),
+    sortable: true,
+    key: 'englishName',
+  },
+  {
+    title: t('locales.localName'),
+    sortable: true,
+    key: 'localName',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/fdbs/category-or-food/category.vue b/apps/admin/src/views/fdbs/category-or-food/category.vue
index 548b39a136..7c886100fd 100644
--- a/apps/admin/src/views/fdbs/category-or-food/category.vue
+++ b/apps/admin/src/views/fdbs/category-or-food/category.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div v-if="isEntryLoaded" flat>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
-        <v-card class="mb-6" outlined>
-          <v-toolbar color="grey lighten-4" flat>
+      <v-form @keydown="clearError" @submit.prevent="submit">
+        <v-card border class="mb-6">
+          <v-toolbar color="grey-lighten-4" flat>
             <v-toolbar-title class="font-weight-medium">
               {{ $t('fdbs.categories.global._') }}
             </v-toolbar-title>
@@ -18,7 +18,7 @@
                   hide-details="auto"
                   :label="$t('fdbs.categories.global.code')"
                   name="main.code"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
               <v-col cols="12">
@@ -29,7 +29,7 @@
                   hide-details="auto"
                   :label="$t('fdbs.categories.global.name')"
                   name="main.name"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
               <v-col align-self="center" cols="12" md="6">
@@ -41,14 +41,14 @@
                   hide-details="auto"
                   :label="$t('fdbs.categories.global.isHidden')"
                   name="main.isHidden"
-                  @change="form.errors.clear('allowGenUsers')"
+                  @update:model-value="form.errors.clear('allowGenUsers')"
                 />
               </v-col>
             </v-row>
           </v-card-text>
         </v-card>
-        <v-card class="mb-6" outlined>
-          <v-toolbar color="grey lighten-4" flat>
+        <v-card border class="mb-6">
+          <v-toolbar color="grey-lighten-4" flat>
             <v-toolbar-title class="font-weight-medium">
               {{ $t('fdbs.categories.local._') }}
             </v-toolbar-title>
@@ -62,7 +62,7 @@
                   hide-details="auto"
                   :label="$t('fdbs.categories.local.name')"
                   name="name"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
             </v-row>
@@ -71,13 +71,13 @@
                 <v-combobox
                   v-model="form.tags"
                   chips
-                  deletable-chips
+                  closable-chips
                   :error-messages="form.errors.get('tags')"
                   hide-details="auto"
                   :label="$t('fdbs.categories.local.tags')"
                   multiple
                   name="tags"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
             </v-row>
@@ -105,10 +105,8 @@
         />
       </v-form>
       <div class="d-flex">
-        <v-btn color="secondary" outlined @click="submit">
-          <v-icon left>
-            $save
-          </v-icon>{{ $t(`common.action.save`) }}
+        <v-btn color="secondary" variant="outlined" @click="submit">
+          <v-icon icon="$save" start />{{ $t(`common.action.save`) }}
         </v-btn>
         <copy-entry-dialog v-bind="{ entryId, localeId: id, type }" />
         <v-spacer />
@@ -124,7 +122,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue';
-import { onBeforeRouteUpdate } from 'vue-router/composables';
+import { onBeforeRouteUpdate } from 'vue-router';
 
 import type {
   CategoryLocalEntry,
@@ -232,7 +230,7 @@ export default defineComponent({
 
       const { name, main: { name: englishName = 'record' } = {} } = data;
 
-      useMessages().success(i18n.t('common.msg.updated', { name: name ?? englishName }).toString());
+      useMessages().success(i18n.t('common.msg.updated', { name: name ?? englishName }));
     };
 
     onMounted(async () => {
diff --git a/apps/admin/src/views/fdbs/category-or-food/food.vue b/apps/admin/src/views/fdbs/category-or-food/food.vue
index 3530e52bf5..73c083015e 100644
--- a/apps/admin/src/views/fdbs/category-or-food/food.vue
+++ b/apps/admin/src/views/fdbs/category-or-food/food.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div v-if="isEntryLoaded">
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
-        <v-card class="mb-6" outlined>
-          <v-toolbar color="grey lighten-4" flat>
+      <v-form @keydown="clearError" @submit.prevent="submit">
+        <v-card border class="mb-6">
+          <v-toolbar color="grey-lighten-4" flat>
             <v-toolbar-title class="font-weight-medium">
               {{ $t('fdbs.foods.global._') }}
             </v-toolbar-title>
@@ -18,7 +18,7 @@
                   hide-details="auto"
                   :label="$t('fdbs.foods.global.code')"
                   name="main.code"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
               <v-col cols="12">
@@ -29,7 +29,7 @@
                   hide-details="auto"
                   :label="$t('fdbs.foods.global.name')"
                   name="main.name"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
               <v-col cols="12">
@@ -41,14 +41,14 @@
                   :label="$t('fdbs.foods.global.foodGroup')"
                   name="main.foodGroup"
                   resource="food-groups"
-                  @input="form.errors.clear('main.foodGroupId')"
+                  @update:model-value="form.errors.clear('main.foodGroupId')"
                 />
               </v-col>
             </v-row>
           </v-card-text>
         </v-card>
-        <v-card class="mb-6" outlined>
-          <v-toolbar color="grey lighten-4" flat>
+        <v-card border class="mb-6">
+          <v-toolbar color="grey-lighten-4" flat>
             <v-toolbar-title class="font-weight-medium">
               {{ $t('fdbs.foods.local._') }}
             </v-toolbar-title>
@@ -62,7 +62,7 @@
                   hide-details="auto"
                   :label="$t('fdbs.foods.local.name')"
                   name="name"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
             </v-row>
@@ -71,13 +71,13 @@
                 <v-combobox
                   v-model="form.tags"
                   chips
-                  deletable-chips
+                  closable-chips
                   :error-messages="form.errors.get('tags')"
                   hide-details="auto"
                   :label="$t('fdbs.foods.local.tags')"
                   multiple
                   name="tags"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
             </v-row>
@@ -124,17 +124,15 @@
         />
       </v-form>
       <div class="d-flex">
-        <v-btn color="secondary" outlined type="submit" @click="submit">
-          <v-icon left>
-            $save
-          </v-icon>{{ $t(`common.action.save`) }}
+        <v-btn color="secondary" type="submit" variant="outlined" @click="submit">
+          <v-icon icon="$save" start />{{ $t(`common.action.save`) }}
         </v-btn>
         <copy-entry-dialog v-bind="{ entryId, localeId: id, type }" />
         <v-spacer />
         <confirm-dialog
           color="error"
           icon-left="$delete"
-          :label="$t('common.action.delete').toString()"
+          :label="$t('common.action.delete')"
           @confirm="remove"
         >
           {{ $t('common.action.confirm.delete', { name: entry?.name }) }}
@@ -151,7 +149,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue';
-import { onBeforeRouteUpdate, useRouter } from 'vue-router/composables';
+import { onBeforeRouteUpdate, useRouter } from 'vue-router';
 
 import type {
   FoodDatabaseRefs,
@@ -276,14 +274,14 @@ export default defineComponent({
 
       const { name, main: { name: englishName = 'record' } = {} } = data;
 
-      useMessages().success(i18n.t('common.msg.updated', { name: name ?? englishName }).toString());
+      useMessages().success(i18n.t('common.msg.updated', { name: name ?? englishName }));
     };
 
     const remove = async () => {
       await http.delete(`admin/fdbs/${props.id}/${type}/${props.entryId}`);
 
       useMessages().success(
-        i18n.t('common.msg.deleted', { name: entry.value?.main?.name }).toString(),
+        i18n.t('common.msg.deleted', { name: entry.value?.main?.name }),
       );
 
       await router.push({
diff --git a/apps/admin/src/views/fdbs/read.vue b/apps/admin/src/views/fdbs/read.vue
index 8ca5bdf2f2..32fbbf6b43 100644
--- a/apps/admin/src/views/fdbs/read.vue
+++ b/apps/admin/src/views/fdbs/read.vue
@@ -6,9 +6,14 @@
       </v-col>
       <v-divider vertical />
       <v-col cols="7" lg="8" xl="8">
-        <v-scroll-y-transition mode="out-in">
+        <!-- <v-scroll-y-transition mode="out-in">
           <router-view />
-        </v-scroll-y-transition>
+        </v-scroll-y-transition> -->
+        <router-view v-slot="{ Component }">
+          <v-scroll-y-transition mode="out-in">
+            <component :is="Component" />
+          </v-scroll-y-transition>
+        </router-view>
       </v-col>
     </v-row>
   </layout>
diff --git a/apps/admin/src/views/feedback-schemes/browse.vue b/apps/admin/src/views/feedback-schemes/browse.vue
index 121165831b..9d57e11dcf 100644
--- a/apps/admin/src/views/feedback-schemes/browse.vue
+++ b/apps/admin/src/views/feedback-schemes/browse.vue
@@ -2,37 +2,30 @@
   <data-table :headers="headers" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'FeedbackSchemeList' });
 
-export default defineComponent({
-  name: 'FeedbackSchemeList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('feedback-schemes.types._'),
-          sortable: true,
-          value: 'type',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.name'),
+    sortable: true,
+    key: 'name',
+  },
+  {
+    title: t('feedback-schemes.types._'),
+    sortable: true,
+    key: 'type',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/feedback-schemes/cards/browse.vue b/apps/admin/src/views/feedback-schemes/cards/browse.vue
index 11dad7c438..4dec5f0760 100644
--- a/apps/admin/src/views/feedback-schemes/cards/browse.vue
+++ b/apps/admin/src/views/feedback-schemes/cards/browse.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <template #actions>
       <preview :feedback-scheme="currentFeedbackScheme" :images="refs?.images" />
     </template>
diff --git a/apps/admin/src/views/feedback-schemes/demographic-groups/browse.vue b/apps/admin/src/views/feedback-schemes/demographic-groups/browse.vue
index 4503bca7ba..712de87d16 100644
--- a/apps/admin/src/views/feedback-schemes/demographic-groups/browse.vue
+++ b/apps/admin/src/views/feedback-schemes/demographic-groups/browse.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <template #actions>
       <preview :feedback-scheme="currentFeedbackScheme" :images="refs?.images" />
     </template>
diff --git a/apps/admin/src/views/feedback-schemes/form.vue b/apps/admin/src/views/feedback-schemes/form.vue
index 4cdf507406..06829c432c 100644
--- a/apps/admin/src/views/feedback-schemes/form.vue
+++ b/apps/admin/src/views/feedback-schemes/form.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <template #actions>
       <copy-scheme-dialog
         v-if="canHandleEntry('copy')"
@@ -8,7 +8,7 @@
       />
       <preview v-if="!isCreate" :feedback-scheme="currentFeedbackScheme" :images="refs?.images" />
     </template>
-    <v-form @keydown.native="clearError" @submit.prevent="submit">
+    <v-form @keydown="clearError" @submit.prevent="submit">
       <v-container fluid>
         <v-card-text>
           <v-row>
@@ -19,7 +19,7 @@
                 hide-details="auto"
                 :label="$t('common.name')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -30,8 +30,8 @@
                 :items="types"
                 :label="$t('feedback-schemes.types._')"
                 name="type"
-                outlined
-                @change="form.errors.clear('type')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('type')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -43,13 +43,13 @@
                 :label="$t('feedback-schemes.outputs.title')"
                 multiple
                 name="outputs"
-                outlined
                 prepend-inner-icon="fas fa-right-from-bracket"
-                @change="form.errors.clear('outputs')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('outputs')"
               >
                 <template #selection="{ item, index }">
                   <template v-if="index === 0">
-                    <span v-if="form.outputs.length === 1">{{ item.text }}</span>
+                    <span v-if="form.outputs.length === 1">{{ item.raw.title }}</span>
                     <span v-if="form.outputs.length > 1">
                       {{ $t('common.selected', { count: form.outputs.length }) }}
                     </span>
@@ -65,20 +65,20 @@
                 :items="visibilities"
                 :label="$t('securables.visibility._')"
                 name="visibility"
-                outlined
-                @change="form.errors.clear('visibility')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('visibility')"
               >
-                <template #item="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <v-icon :icon="item.raw.icon" start />
+                    </template>
+                    <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  </v-list-item>
                 </template>
                 <template #selection="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                  <v-icon :icon="item.raw.icon" start />
+                  {{ item.raw.title }}
                 </template>
               </v-select>
             </v-col>
@@ -92,51 +92,48 @@
                 :label="$t('feedback-schemes.physicalDataFields.title')"
                 multiple
                 name="physicalDataFields"
-                outlined
                 prepend-inner-icon="fas fa-person-circle-question"
-                @change="form.errors.clear('physicalDataFields')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('physicalDataFields')"
               >
                 <template #selection="{ item, index }">
                   <template v-if="index === 0">
-                    <span v-if="form.physicalDataFields.length === 1">{{ item.text }}</span>
+                    <span v-if="form.physicalDataFields.length === 1">{{ item.raw.title }}</span>
                     <span v-if="form.physicalDataFields.length > 1">
                       {{ $t('common.selected', { count: form.physicalDataFields.length }) }}
                     </span>
                   </template>
                 </template>
               </v-select>
-              <template v-for="(value, key) in requiredPhysicalDataFields">
+              <template v-for="(value, key) in requiredPhysicalDataFields" :key="key">
                 <v-alert
                   v-if="!value && form.physicalDataFields.includes(key)"
-                  :key="key"
-                  class="text-caption"
-                  dense
-                  text
+                  class="text-caption mb-1"
+                  density="compact"
                   type="info"
                 >
-                  <i18n path="feedback-schemes.physicalDataFields.notRequired">
+                  <i18n-t keypath="feedback-schemes.physicalDataFields.notRequired">
                     <template #field>
                       <span class="font-weight-medium">
                         "{{ $t(`feedback-schemes.physicalDataFields.${key}`) }}"
                       </span>
                     </template>
-                  </i18n>
+                  </i18n-t>
                 </v-alert>
                 <v-alert
                   v-if="value && !form.physicalDataFields.includes(key)"
                   :key="key"
-                  class="text-caption"
-                  dense
-                  text
+                  class="text-caption mb-1"
+                  density="compact"
                   type="warning"
                 >
-                  <i18n path="feedback-schemes.physicalDataFields.required">
+                  <i18n-t keypath="feedback-schemes.physicalDataFields.required">
                     <template #field>
                       <span class="font-weight-medium">
                         "{{ $t(`feedback-schemes.physicalDataFields.${key}`) }}"
                       </span>
                     </template>
-                  </i18n>
+                  </i18n-t>
                 </v-alert>
               </template>
             </v-col>
@@ -213,12 +210,12 @@ export default defineComponent({
 
     const types = feedbackTypes.map(value => ({
       value,
-      text: i18n.t(`feedback-schemes.types.${value}`),
+      title: i18n.t(`feedback-schemes.types.${value}`),
     }));
 
     const outputs = feedbackOutputs.map(value => ({
       value,
-      text: i18n.t(`feedback-schemes.outputs.${value}`),
+      title: i18n.t(`feedback-schemes.outputs.${value}`),
     }));
 
     const { canHandleEntry, entry, entryLoaded, isCreate, refs } = useEntry<FeedbackSchemeEntry, FeedbackSchemeRefs>(props);
@@ -240,7 +237,7 @@ export default defineComponent({
 
     const physicalDataFields = feedbackPhysicalDataFields.map(value => ({
       value,
-      text: i18n.t(`feedback-schemes.physicalDataFields.${value}`),
+      title: i18n.t(`feedback-schemes.physicalDataFields.${value}`),
     }));
 
     const currentFeedbackScheme = computed<FeedbackSchemeEntry>(
diff --git a/apps/admin/src/views/feedback-schemes/henry-coefficients/browse.vue b/apps/admin/src/views/feedback-schemes/henry-coefficients/browse.vue
index 62ef1b2d52..0be8f221dc 100644
--- a/apps/admin/src/views/feedback-schemes/henry-coefficients/browse.vue
+++ b/apps/admin/src/views/feedback-schemes/henry-coefficients/browse.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <template #actions>
       <preview :feedback-scheme="currentFeedbackScheme" :images="refs?.images" />
     </template>
diff --git a/apps/admin/src/views/feedback-schemes/meals/browse.vue b/apps/admin/src/views/feedback-schemes/meals/browse.vue
index 1b27690d5d..8c389058a5 100644
--- a/apps/admin/src/views/feedback-schemes/meals/browse.vue
+++ b/apps/admin/src/views/feedback-schemes/meals/browse.vue
@@ -2,14 +2,14 @@
   <layout
     v-if="entryLoaded && refsLoaded"
     v-bind="{ id, entry }"
-    :route-leave.sync="routeLeave"
+    v-model:route-leave="routeLeave"
     @save="submit"
   >
     <template #actions>
       <preview :feedback-scheme="currentFeedbackScheme" :images="refs?.images" />
     </template>
-    <v-toolbar color="grey lighten-5" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-4" flat tile>
+      <v-icon color="secondary" end>
         fas fa-sort-amount-down
       </v-icon>
       <v-toolbar-title class="font-weight-medium">
@@ -17,13 +17,13 @@
       </v-toolbar-title>
       <v-spacer />
       <options-menu>
-        <select-resource resource="feedback-schemes" return-object="meals" @input="load">
-          <template #activator="{ attrs, on }">
-            <v-list-item v-bind="attrs" link v-on="on">
+        <select-resource resource="feedback-schemes" return-object="meals" @update:model-value="load">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" link>
+              <template #prepend>
+                <v-icon icon="$download" />
+              </template>
               <v-list-item-title>
-                <v-icon left>
-                  $download
-                </v-icon>
                 {{ $t('feedback-schemes.load') }}
               </v-list-item-title>
             </v-list-item>
@@ -33,9 +33,9 @@
       </options-menu>
     </v-toolbar>
 
-    <v-form @keydown.native="clearError" @submit.prevent="submit">
-      <v-toolbar color="grey lighten-5" flat tile>
-        <v-icon color="secondary" left>
+    <v-form @keydown="clearError" @submit.prevent="submit">
+      <v-toolbar color="grey-lighten-4" flat tile>
+        <v-icon color="secondary" end>
           fas fa-chart-pie
         </v-icon>
         <v-toolbar-title class="font-weight-medium">
@@ -45,8 +45,8 @@
       <v-container fluid>
         <v-row>
           <v-col cols="12" md="6">
-            <v-toolbar color="grey lighten-2" flat tile>
-              <v-icon color="secondary" left>
+            <v-toolbar color="grey-lighten-2" flat tile>
+              <v-icon color="secondary" end>
                 fas fa-palette
               </v-icon>
               <v-toolbar-title class="font-weight-medium">
@@ -55,15 +55,15 @@
               <v-spacer />
               <v-text-field
                 v-model.number="colorMax"
-                background-color="grey lighten-5"
-                dense
+                bg-color="grey lighten-5"
+                density="compact"
                 hide-details
                 :label="$t('feedback-schemes.meals.colors._')"
                 name="colorMax"
-                outlined
                 :rules="maxRules"
                 single-line
                 :style="{ maxWidth: '75px' }"
+                variant="outlined"
               />
             </v-toolbar>
             <error-list :errors="nonInputErrors" />
@@ -149,7 +149,7 @@ export default defineComponent({
 
     const maxRules = computed<RuleCallback[]>(() => [
       (value: string | null): boolean | string =>
-        Number.isInteger(value) || i18n.t('feedback-schemes.colors.max.required').toString(),
+        Number.isInteger(value) || i18n.t('feedback-schemes.colors.max.required'),
     ]);
 
     const currentFeedbackScheme = computed(() => ({ ...entry.value, ...form.getData() }));
diff --git a/apps/admin/src/views/feedback-schemes/read.vue b/apps/admin/src/views/feedback-schemes/read.vue
index d0e1500458..ce2bbbf1bb 100644
--- a/apps/admin/src/views/feedback-schemes/read.vue
+++ b/apps/admin/src/views/feedback-schemes/read.vue
@@ -8,7 +8,7 @@
       />
       <preview :feedback-scheme="entry" :images="refs.images" />
     </template>
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.name') }}</th>
@@ -39,7 +39,7 @@
           <td>{{ $t(`securables.visibility.${entry.visibility}`) }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/feedback-schemes/sections.vue b/apps/admin/src/views/feedback-schemes/sections.vue
index b39cbf2359..1f7ddb6d05 100644
--- a/apps/admin/src/views/feedback-schemes/sections.vue
+++ b/apps/admin/src/views/feedback-schemes/sections.vue
@@ -1,26 +1,23 @@
 <template>
   <v-card flat tile>
-    <v-toolbar color="grey lighten-3" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-3" flat tile>
+      <v-icon color="secondary" end>
         fas fa-bars-staggered
       </v-icon>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('feedback-schemes.sections.title') }}
       </v-toolbar-title>
       <v-spacer />
-      <v-menu close-on-click left offset-y>
-        <template #activator="{ attrs, on }">
+      <v-menu location="left" :persistent="false">
+        <template #activator="{ props }">
           <v-btn
-            v-bind="attrs"
             class="ml-3"
             color="primary"
-            fab
-            small
+            icon="$add"
+            size="small"
             :title=" $t('feedback-schemes.sections.add')"
-            v-on="on"
-          >
-            <v-icon>$add</v-icon>
-          </v-btn>
+            v-bind="props"
+          />
         </template>
         <v-list>
           <v-list-item v-for="section in availableSections" :key="section.id" link @click="add(section.id)">
@@ -31,48 +28,44 @@
         </v-list>
       </v-menu>
       <options-menu>
-        <select-resource resource="feedback-schemes" return-object="sections" @input="load">
-          <template #activator="{ attrs, on }">
-            <v-list-item v-bind="attrs" link v-on="on">
+        <select-resource resource="feedback-schemes" return-object="sections" @update:model-value="load">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" link>
+              <template #prepend>
+                <v-icon icon="$download" />
+              </template>
               <v-list-item-title>
-                <v-icon left>
-                  $download
-                </v-icon>
                 {{ $t('feedback-schemes.load') }}
               </v-list-item-title>
             </v-list-item>
           </template>
         </select-resource>
-        <json-editor-dialog v-model="items" @input="update" />
+        <json-editor-dialog v-model="items" @update:model-value="update" />
       </options-menu>
     </v-toolbar>
-    <v-list class="py-0">
-      <draggable
+    <v-list class="list-border py-0">
+      <vue-draggable
         v-model="items"
+        :animation="300"
         handle=".drag-and-drop__handle"
         @end="update"
       >
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(section, index) in sections"
-            :key="section.id"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>fas fa-grip-vertical</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ section.title }}</v-list-item-title>
-            </v-list-item-content>
+        <v-list-item
+          v-for="(section, index) in sections"
+          :key="section.id"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+          </template>
+          <v-list-item-title>{{ section.title }}</v-list-item-title>
+          <template #append>
             <v-list-item-action>
               <v-btn
                 icon
                 :title="$t('feedback-schemes.sections.edit')"
                 @click.stop="edit(index, items[index])"
               >
-                <v-icon color="secondary lighten-2">
+                <v-icon color="secondary-lighten-2">
                   $edit
                 </v-icon>
               </v-btn>
@@ -82,48 +75,42 @@
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('feedback-schemes.sections.remove').toString()"
+                :label="$t('feedback-schemes.sections.remove')"
                 @confirm="remove(index)"
               >
                 {{ $t('common.action.confirm.delete', { name: section.title }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
     <v-dialog
       v-if="typeof dialog.item !== 'string'"
       v-model="dialog.show"
       fullscreen
-      hide-overlay
       persistent
+      :scrim="false"
       transition="dialog-bottom-transition"
     >
       <v-card tile>
         <v-toolbar color="secondary" dark>
-          <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-            <v-icon>$cancel</v-icon>
-          </v-btn>
+          <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
           <v-toolbar-title>
-            <v-icon dark left>
-              fas fa-bars-staggered
-            </v-icon>
+            <v-icon icon="fas fa-bars-staggered" start />
             {{
               $t(`feedback-schemes.sections.${dialog.index === -1 ? 'add' : 'edit'}`)
             }}
           </v-toolbar-title>
           <v-spacer />
           <v-toolbar-items>
-            <v-btn dark text :title="$t('common.action.ok')" @click.stop="save">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn :title="$t('common.action.ok')" variant="text" @click.stop="save">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-toolbar-items>
           <template #extension>
             <v-container>
-              <v-tabs v-model="tab" background-color="secondary" dark>
+              <v-tabs v-model="tab" bg-color="secondary">
                 <v-tab v-for="item in ['general', 'json']" :key="item" :tab-value="item">
                   {{ $t(`feedback-schemes.sections.tabs.${item}`) }}
                 </v-tab>
@@ -133,48 +120,46 @@
         </v-toolbar>
         <v-form ref="form" @submit.prevent="save">
           <v-container>
-            <v-tabs-items v-model="tab" class="pt-1">
-              <v-tab-item key="general" value="general">
+            <v-tabs-window v-model="tab" class="pt-1">
+              <v-tabs-window-item key="general" value="general">
                 <language-selector
                   v-model="dialog.item.title"
-                  :label="$t('feedback-schemes.custom.header').toString()"
+                  border
+                  class="mb-4"
+                  :label="$t('feedback-schemes.custom.header')"
                 >
-                  <template v-for="lang in Object.keys(dialog.item.title)" #[`lang.${lang}`]>
+                  <template v-for="lang in Object.keys(dialog.item.title)" :key="lang" #[`lang.${lang}`]>
                     <v-text-field
-                      :key="lang"
                       v-model="dialog.item.title[lang]"
                       hide-details="auto"
                       :label="$t('feedback-schemes.custom.header')"
-                      outlined
+                      variant="outlined"
                     />
                   </template>
                 </language-selector>
                 <language-selector
                   v-model="dialog.item.content"
-                  :label="$t('feedback-schemes.custom.content').toString()"
+                  border
+                  :label="$t('feedback-schemes.custom.content')"
                 >
-                  <template v-for="lang in Object.keys(dialog.item.content)" #[`lang.${lang}`]>
-                    <html-editor :key="lang" v-model="dialog.item.content[lang]" />
+                  <template v-for="lang in Object.keys(dialog.item.content)" :key="lang" #[`lang.${lang}`]>
+                    <html-editor v-model="dialog.item.content[lang]" />
                   </template>
                 </language-selector>
-              </v-tab-item>
-              <v-tab-item key="json" value="json">
+              </v-tabs-window-item>
+              <v-tabs-window-item key="json" value="json">
                 <v-container>
                   <json-editor v-model="dialog.item" />
                 </v-container>
-              </v-tab-item>
-            </v-tabs-items>
+              </v-tabs-window-item>
+            </v-tabs-window>
             <v-card-actions>
-              <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-                <v-icon left>
-                  $cancel
-                </v-icon>{{ $t('common.action.cancel') }}
+              <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+                <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
               </v-btn>
               <v-spacer />
-              <v-btn class="font-weight-bold" color="info" text type="submit">
-                <v-icon left>
-                  $success
-                </v-icon>{{ $t('common.action.ok') }}
+              <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+                <v-icon icon="$success" start />{{ $t('common.action.ok') }}
               </v-btn>
             </v-card-actions>
           </v-container>
@@ -186,8 +171,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-import Draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
+import { useRoute, useRouter } from 'vue-router';
 
 import type {
   FeedbackSection,
@@ -209,17 +194,17 @@ export default defineComponent({
 
   components: {
     ConfirmDialog,
-    Draggable,
     HtmlEditor,
     JsonEditor,
     JsonEditorDialog,
     LanguageSelector,
     OptionsMenu,
     SelectResource,
+    VueDraggable,
   },
 
   props: {
-    value: {
+    modelValue: {
       type: Array as PropType<FeedbackSection[]>,
       required: true,
     },
@@ -268,10 +253,10 @@ export default defineComponent({
     };
 
     const availableSections = computed(() => {
-      const usedSections = props.value.filter(section => typeof section === 'string');
+      const usedSections = props.modelValue.filter(section => typeof section === 'string');
       return ['custom', ...feedbackStandardSections.filter(section => !usedSections.includes(section))].map(id => ({
         id,
-        title: i18n.t(`feedback-schemes.${kebabCase(id)}.title`).toString(),
+        title: i18n.t(`feedback-schemes.${kebabCase(id)}.title`),
       }) as { id: FeedbackStandardSection | 'custom'; title: string });
     });
 
diff --git a/apps/admin/src/views/feedback-schemes/top-foods/browse.vue b/apps/admin/src/views/feedback-schemes/top-foods/browse.vue
index 216abcd8cb..2d09612d2b 100644
--- a/apps/admin/src/views/feedback-schemes/top-foods/browse.vue
+++ b/apps/admin/src/views/feedback-schemes/top-foods/browse.vue
@@ -2,14 +2,14 @@
   <layout
     v-if="entryLoaded && refsLoaded"
     v-bind="{ id, entry }"
-    :route-leave.sync="routeLeave"
+    v-model:route-leave="routeLeave"
     @save="submit"
   >
     <template #actions>
       <preview :feedback-scheme="currentFeedbackScheme" :images="refs?.images" />
     </template>
-    <v-toolbar color="grey lighten-5" flat tile>
-      <v-icon color="secondary" left>
+    <v-toolbar color="grey-lighten-4" flat tile>
+      <v-icon color="secondary" end>
         fas fa-sort-amount-down
       </v-icon>
       <v-toolbar-title class="font-weight-medium">
@@ -17,13 +17,13 @@
       </v-toolbar-title>
       <v-spacer />
       <options-menu>
-        <select-resource resource="feedback-schemes" return-object="topFoods" @input="load">
-          <template #activator="{ attrs, on }">
-            <v-list-item v-bind="attrs" link v-on="on">
+        <select-resource resource="feedback-schemes" return-object="topFoods" @update:model-value="load">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" link>
+              <template #prepend>
+                <v-icon icon="$download" />
+              </template>
               <v-list-item-title>
-                <v-icon left>
-                  $download
-                </v-icon>
                 {{ $t('feedback-schemes.load') }}
               </v-list-item-title>
             </v-list-item>
@@ -32,12 +32,12 @@
         <json-editor-dialog v-model="form.topFoods" />
       </options-menu>
     </v-toolbar>
-    <v-form @keydown.native="clearError" @submit.prevent="submit">
+    <v-form @keydown="clearError" @submit.prevent="submit">
       <v-container fluid>
         <v-row>
           <v-col cols="12" md="6">
-            <v-toolbar color="grey lighten-2" flat tile>
-              <v-icon color="secondary" left>
+            <v-toolbar color="grey-lighten-2" flat tile>
+              <v-icon color="secondary" end>
                 fas fa-palette
               </v-icon>
               <v-toolbar-title class="font-weight-medium">
@@ -46,22 +46,22 @@
               <v-spacer />
               <v-text-field
                 v-model.number="form.topFoods.max"
-                background-color="grey lighten-5"
-                dense
+                bg-color="grey lighten-5"
+                density="compact"
                 :error-messages="form.errors.get('topFoods.max')"
                 hide-details
                 :label="$t('feedback-schemes.top-foods.max._')"
                 name="topFoods.max"
-                outlined
                 :rules="topFoodsMaxRules"
                 single-line
                 :style="{ maxWidth: '75px' }"
+                variant="outlined"
               />
             </v-toolbar>
             <error-list :errors="nonInputErrors" />
             <color-list
               v-model="form.topFoods.colors"
-              :last-label="$t('feedback-schemes.top-foods.other').toString()"
+              :last-label="$t('feedback-schemes.top-foods.other')"
             />
           </v-col>
           <v-divider vertical />
@@ -137,7 +137,7 @@ export default defineComponent({
 
     const topFoodsMaxRules = computed<RuleCallback[]>(() => [
       (value: string | null): boolean | string =>
-        Number.isInteger(value) || i18n.t('feedback-schemes.colors.max.required').toString(),
+        Number.isInteger(value) || i18n.t('feedback-schemes.colors.max.required'),
     ]);
 
     const currentFeedbackScheme = computed(() => ({ ...entry.value, ...form.getData() }));
diff --git a/apps/admin/src/views/food-groups/browse.vue b/apps/admin/src/views/food-groups/browse.vue
index c2baa05b60..81d1d224ca 100644
--- a/apps/admin/src/views/food-groups/browse.vue
+++ b/apps/admin/src/views/food-groups/browse.vue
@@ -2,37 +2,30 @@
   <data-table :headers="headers" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'FoodGroupList' });
 
-export default defineComponent({
-  name: 'FoodGroupList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('common.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.id'),
+    sortable: true,
+    key: 'id',
+  },
+  {
+    title: t('common.name'),
+    sortable: true,
+    key: 'name',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/food-groups/form.vue b/apps/admin/src/views/food-groups/form.vue
index d475556ec6..8a4c2c5f6c 100644
--- a/apps/admin/src/views/food-groups/form.vue
+++ b/apps/admin/src/views/food-groups/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12">
@@ -11,7 +11,7 @@
                 hide-details="auto"
                 :label="$t('common.name')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/food-groups/read.vue b/apps/admin/src/views/food-groups/read.vue
index 1f10c0ee62..e7dc5eb6d7 100644
--- a/apps/admin/src/views/food-groups/read.vue
+++ b/apps/admin/src/views/food-groups/read.vue
@@ -1,13 +1,13 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.name') }}</th>
           <td>{{ entry.name }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/images/as-served-sets/create.vue b/apps/admin/src/views/images/as-served-sets/create.vue
index 770d3d4b0b..edf814f244 100644
--- a/apps/admin/src/views/images/as-served-sets/create.vue
+++ b/apps/admin/src/views/images/as-served-sets/create.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -11,8 +11,8 @@
                 hide-details="auto"
                 :label="$t('as-served-sets.id')"
                 name="id"
-                outlined
                 prepend-inner-icon="$as-served-sets"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -22,9 +22,9 @@
                 hide-details="auto"
                 :label="$t('as-served-sets.selectionImage')"
                 name="selectionImage"
-                outlined
                 prepend-icon=""
                 prepend-inner-icon="fas fa-paperclip"
+                variant="outlined"
                 @change="form.errors.clear('selectionImage')"
               />
             </v-col>
@@ -35,8 +35,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/images/as-served-sets/edit.vue b/apps/admin/src/views/images/as-served-sets/edit.vue
index f417f71092..bf7cd4878e 100644
--- a/apps/admin/src/views/images/as-served-sets/edit.vue
+++ b/apps/admin/src/views/images/as-served-sets/edit.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,8 +12,8 @@
                 hide-details="auto"
                 :label="$t('as-served-sets.id')"
                 name="id"
-                outlined
                 prepend-inner-icon="$as-served-sets"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -23,8 +23,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/images/as-served-sets/images.vue b/apps/admin/src/views/images/as-served-sets/images.vue
index 34152ef30c..701319f7ed 100644
--- a/apps/admin/src/views/images/as-served-sets/images.vue
+++ b/apps/admin/src/views/images/as-served-sets/images.vue
@@ -3,7 +3,7 @@
     <v-card-title>{{ $t('as-served-sets.images.title') }}</v-card-title>
     <v-row>
       <v-col v-for="image in images" :key="image.id" cols="12" md="4" sm="6">
-        <v-card flat min-height="200px" outlined>
+        <v-card border flat min-height="200px">
           <v-img :src="image.mainImageUrl" />
           <v-divider />
           <v-card-text>
@@ -14,9 +14,9 @@
                   :disabled="disabled"
                   hide-details="auto"
                   :label="$t('as-served-sets.weight')"
-                  name="description"
-                  outlined
-                  @input="updateImages"
+                  :name="`description-${image.id}`"
+                  variant="outlined"
+                  @update:model-value="updateImages"
                 />
               </v-col>
               <v-col align-self="center" class="d-flex justify-end" cols="3">
@@ -25,16 +25,12 @@
                   color="error"
                   icon
                   icon-left="$delete"
-                  :label="$t('as-served-sets.images.delete').toString()"
+                  :label="$t('as-served-sets.images.delete')"
                   @confirm="removeImage(image.id)"
                 >
                   {{ $t('common.action.confirm.delete', { name: 'selected image' }) }}
-                  <template #activator="{ attrs, on }">
-                    <v-btn class="ml-auto" icon large v-bind="attrs" v-on="on">
-                      <v-icon color="error">
-                        $delete
-                      </v-icon>
-                    </v-btn>
+                  <template #activator="{ props }">
+                    <v-btn class="ml-auto" v-bind="props" color="error" icon="$delete" size="large" variant="text" />
                   </template>
                 </confirm-dialog>
               </v-col>
@@ -44,18 +40,16 @@
       </v-col>
       <v-col v-if="!disabled" cols="12" md="4" sm="6">
         <v-card
+          border
           flat
           height="100%"
           link
           :loading="loading"
-          outlined
           :title="$t('as-served-sets.images.add')"
           @click.stop="addImage"
         >
           <div class="d-flex justify-center align-center upload-input-wrapper">
-            <v-btn color="primary" fab x-large>
-              <v-icon>$add</v-icon>
-            </v-btn>
+            <v-btn color="primary" icon="$add" size="x-large" />
           </div>
         </v-card>
         <label class="d-none" for="fileInput">
diff --git a/apps/admin/src/views/images/as-served-sets/read.vue b/apps/admin/src/views/images/as-served-sets/read.vue
index 8f63d564a1..2c3c25ef9f 100644
--- a/apps/admin/src/views/images/as-served-sets/read.vue
+++ b/apps/admin/src/views/images/as-served-sets/read.vue
@@ -2,7 +2,7 @@
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
     <v-row>
       <v-col cols="12" md="6">
-        <v-simple-table>
+        <v-table>
           <tbody>
             <tr>
               <th>{{ $t('as-served-sets.id') }}</th>
@@ -13,7 +13,7 @@
               <td>{{ entry.description }}</td>
             </tr>
           </tbody>
-        </v-simple-table>
+        </v-table>
       </v-col>
       <v-col cols="12" md="6">
         <v-card-title>{{ $t('as-served-sets.selectionImage') }}</v-card-title>
diff --git a/apps/admin/src/views/images/drinkware-sets/components/DrinkwareObjectChooser.vue b/apps/admin/src/views/images/drinkware-sets/components/DrinkwareObjectChooser.vue
index fbdc4092d8..d4d44b8bef 100644
--- a/apps/admin/src/views/images/drinkware-sets/components/DrinkwareObjectChooser.vue
+++ b/apps/admin/src/views/images/drinkware-sets/components/DrinkwareObjectChooser.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue';
-import type { VImg } from 'vuetify/lib';
+import type { VImg } from 'vuetify/components';
 import { useElementSize } from '@vueuse/core';
 import { computed, defineComponent, onMounted, ref } from 'vue';
 
@@ -125,7 +125,7 @@ export default defineComponent({
     select(idx: number, id: string) {
       this.$emit('select', idx, id);
 
-      if (!this.isMobile)
+      if (!this.$vuetify.display.mobile)
         this.confirm();
     },
   },
diff --git a/apps/admin/src/views/images/drinkware-sets/components/SlidingScaleEditor.vue b/apps/admin/src/views/images/drinkware-sets/components/SlidingScaleEditor.vue
index 11b8ae48c5..c52a873ce2 100644
--- a/apps/admin/src/views/images/drinkware-sets/components/SlidingScaleEditor.vue
+++ b/apps/admin/src/views/images/drinkware-sets/components/SlidingScaleEditor.vue
@@ -28,14 +28,14 @@
       </v-card>
       <v-card v-if="scale.version === 2" flat>
         <v-card-subtitle class="pa-0">
-          <v-alert class="pa-2" color="#ddd" dense icon="fas fa-info-circle">
+          <v-alert class="pa-2" color="#ddd" density="compact" icon="fas fa-info-circle">
             <span v-html="$t('drinkware-sets.slidingScale.editInstructions')" />
           </v-alert>
         </v-card-subtitle>
         <v-switch
           v-if="overlayImageUrl"
           v-model="showOverlayImage"
-          dense
+          density="compact"
           :label="$t('drinkware-sets.slidingScale.fillableAreaToggle')"
         />
         <v-card-actions class="wrap-actions">
@@ -46,26 +46,24 @@
           </v-btn>
           <v-spacer />
           <v-dialog v-model="clearScaleDialog" width="500px">
-            <template #activator="{ on, attrs }">
+            <template #activator="{ props }">
               <v-btn
-                v-bind="attrs"
                 color="error"
                 :disabled="outlineCoordinates.length === 0"
-                v-on="on"
+                v-bind="props"
               >
                 <v-icon class="mr-2">
                   fas fa-x
                 </v-icon>{{ $t('drinkware-sets.slidingScale.deleteAll') }}
               </v-btn>
             </template>
-
             <template #default>
               <v-card>
                 <v-card-title class="h2 justify-center">
                   {{ $t('drinkware-sets.clearScaleDialog.title') }}
                 </v-card-title>
                 <v-card-text class="px-6 py-4 d-flex justify-center">
-                  <div class="subtitle-1">
+                  <div class="text-subtitle-1">
                     {{ $t('drinkware-sets.clearScaleDialog.msg') }}
                   </div>
                 </v-card-text>
@@ -74,8 +72,7 @@
                     block
                     class="mb-2"
                     color="warning"
-                    dark
-                    large
+                    size="large"
                     :title="$t('common.action.delete')"
                     @click="clearScale()"
                   >
@@ -84,9 +81,9 @@
                   <v-btn
                     block
                     color="warning"
-                    large
-                    outlined
+                    size="large"
                     :title="$t('common.action.cancel')"
+                    variant="outlined"
                     @click="clearScaleDialog = false"
                   >
                     {{ $t('common.action.cancel') }}
@@ -140,18 +137,18 @@
 
     <v-expansion-panels v-if="scale.version === 2" flat>
       <v-expansion-panel>
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t('drinkware-sets.slidingScale.replaceBaseImage') }}
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <v-file-input
             v-model="newBaseImageFile"
             hide-details="auto"
             :label="$t('image-maps.baseImage')"
             name="baseImage"
-            outlined
             prepend-icon=""
             prepend-inner-icon="fas fa-paperclip"
+            variant="outlined"
           />
           <v-btn class="mt-4" :disabled="!newBaseImageFile" @click="replaceBaseImage">
             <v-icon class="mr-2">
@@ -159,18 +156,18 @@
             </v-icon>
             {{ $t('drinkware-sets.slidingScale.replaceButtonLabel') }}
           </v-btn>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
   </v-card>
 </template>
 
 <script lang="ts">
-import type { VImg } from 'vuetify/lib';
+import type { VImg } from 'vuetify/components';
 import { useElementSize } from '@vueuse/core';
 import { flatten, uniqueId } from 'lodash';
 import chunk from 'lodash/chunk';
-import Vue, { computed, defineComponent, onMounted, ref, toRef, watch } from 'vue';
+import { computed, defineComponent, onMounted, ref, toRef, watch } from 'vue';
 
 import type { DrinkwareSetEntry } from '@intake24/common/types/http/admin';
 import ImagePlaceholder from '@intake24/admin/components/util/ImagePlaceholder.vue';
@@ -253,7 +250,7 @@ export default defineComponent({
 
       overlayImageUrl.value = v1.overlayImageUrl;
 
-      Vue.set(entry.scales, scaleIndex.value, {
+      entry.scales.splice(scaleIndex.value, 1, {
         version: 2,
         choiceId: v1.choiceId,
         label: v1.label,
@@ -305,7 +302,7 @@ export default defineComponent({
 
     const onScaleMouseMove = (e: MouseEvent) => {
       if (dragging) {
-        Vue.set(outlineCoordinates.value, selectedVertexIndex.value, [
+        outlineCoordinates.value.splice(selectedVertexIndex.value, 1, [
           e.offsetX / width.value,
           e.offsetY / height.value,
         ]);
diff --git a/apps/admin/src/views/images/drinkware-sets/components/VolumeSamplesTable.vue b/apps/admin/src/views/images/drinkware-sets/components/VolumeSamplesTable.vue
index c34b87b0cc..f1ee8a881c 100644
--- a/apps/admin/src/views/images/drinkware-sets/components/VolumeSamplesTable.vue
+++ b/apps/admin/src/views/images/drinkware-sets/components/VolumeSamplesTable.vue
@@ -13,23 +13,17 @@
     </v-card-subtitle>
     <v-card-actions>
       <v-btn @click="onAddRow">
-        <v-icon left>
-          fas fa-plus
-        </v-icon>
+        <v-icon icon="fas fa-plus" start />
       </v-btn>
       <v-btn @click="onRemoveLastRow">
-        <v-icon left>
-          fas fa-trash
-        </v-icon>{{ $t('drinkware-sets.volumeTable.removeRow') }}
+        <v-icon icon="fas fa-trash" start />{{ $t('drinkware-sets.volumeTable.removeRow') }}
       </v-btn>
       <v-btn :disabled="pasteDisabled" @click="onPasteData">
-        <v-icon left>
-          fas fa-clipboard
-        </v-icon>{{ $t('drinkware-sets.volumeTable.paste') }}
+        <v-icon icon="fas fa-clipboard" start />{{ $t('drinkware-sets.volumeTable.paste') }}
       </v-btn>
     </v-card-actions>
     <v-card-text>
-      <v-simple-table>
+      <v-table>
         <thead>
           <tr>
             <th class="text-left">
@@ -45,28 +39,28 @@
             <td>
               <v-text-field
                 v-model="volumeSampleRows[index][0]"
-                background-color="#0000"
-                dense
+                bg-color="#0000"
+                density="compact"
                 flat
                 hide-details
-                solo
+                variant="solo"
                 @change="onDataChanged"
               />
             </td>
             <td>
               <v-text-field
                 v-model="volumeSampleRows[index][1]"
-                background-color="#0000"
-                dense
+                bg-color="#0000"
+                density="compact"
                 flat
                 hide-details
-                solo
+                variant="solo"
                 @change="onDataChanged"
               />
             </td>
           </tr>
         </tbody>
-      </v-simple-table>
+      </v-table>
     </v-card-text>
   </v-card>
 </template>
diff --git a/apps/admin/src/views/images/drinkware-sets/create.vue b/apps/admin/src/views/images/drinkware-sets/create.vue
index 2d52da627d..3d6258cc09 100644
--- a/apps/admin/src/views/images/drinkware-sets/create.vue
+++ b/apps/admin/src/views/images/drinkware-sets/create.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -11,8 +11,8 @@
                 hide-details="auto"
                 :label="$t('drinkware-sets.id')"
                 name="id"
-                outlined
                 prepend-inner-icon="$drinkware-sets"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -24,7 +24,7 @@
                 :label="$t('image-maps.id')"
                 name="imageMapId"
                 resource="image-maps"
-                @input="form.errors.clear('imageMapId')"
+                @update:model-value="form.errors.clear('imageMapId')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -34,8 +34,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/images/drinkware-sets/edit.vue b/apps/admin/src/views/images/drinkware-sets/edit.vue
index 37f1f8ab42..3581e85961 100644
--- a/apps/admin/src/views/images/drinkware-sets/edit.vue
+++ b/apps/admin/src/views/images/drinkware-sets/edit.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,8 +12,8 @@
                 hide-details="auto"
                 :label="$t('drinkware-sets.id')"
                 name="id"
-                outlined
                 prepend-inner-icon="$drinkware-sets"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -24,8 +24,8 @@
                 hide-details="auto"
                 :label="$t('image-maps._')"
                 name="imageMapId"
-                outlined
                 prepend-inner-icon="$image-maps"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -35,8 +35,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -66,15 +66,15 @@
                 <v-card-text>
                   <language-selector
                     v-model="selectedScale.label"
-                    :label="$t('guide-images.objects.label._').toString()"
+                    border
+                    :label="$t('guide-images.objects.label._')"
                   >
-                    <template v-for="lang in Object.keys(selectedScale.label)" #[`lang.${lang}`]>
+                    <template v-for="lang in Object.keys(selectedScale.label)" :key="lang" #[`lang.${lang}`]>
                       <v-text-field
-                        :key="lang"
                         v-model="selectedScale.label[lang]"
                         hide-details="auto"
                         :label="$t('guide-images.objects.label._')"
-                        outlined
+                        variant="outlined"
                       />
                     </template>
                   </language-selector>
@@ -122,16 +122,16 @@
                       hide-details="auto"
                       :label="$t('image-maps.baseImage')"
                       name="baseImage"
-                      outlined
                       prepend-icon=""
                       prepend-inner-icon="fas fa-paperclip"
+                      variant="outlined"
                     />
                   </v-card-text>
                   <v-card-actions>
                     <v-btn
                       color="primary"
                       :disabled="!baseImageFiles[selectedObjectId]"
-                      large
+                      size="large"
                       @click="createSlidingScale(selectedObjectId)"
                     >
                       <v-icon class="mr-2">
@@ -146,7 +146,7 @@
               <div v-if="selectedObjectId !== undefined && selectedScaleIndex !== -1">
                 <sliding-scale-editor
                   :scale-index="selectedScaleIndex"
-                  @baseImageChanged="onBaseImageChanged"
+                  @base-image-changed="onBaseImageChanged"
                 />
 
                 <v-card flat>
@@ -161,7 +161,7 @@
                       item-value="method"
                       :items="volumeMethodSelectList"
                       :label="$t('drinkware-sets.volumeMethod.title')"
-                      outlined
+                      variant="outlined"
                     />
                   </v-card-text>
                 </v-card>
@@ -358,10 +358,10 @@ export default defineComponent({
     const volumeMethodSelectList
      = [{
        method: 'lookUpTable',
-       text: i18n.t('drinkware-sets.volumeMethod.lookUpTable'),
+       title: i18n.t('drinkware-sets.volumeMethod.lookUpTable'),
      }, {
        method: 'cylindrical',
-       text: i18n.t('drinkware-sets.volumeMethod.cylindrical'),
+       title: i18n.t('drinkware-sets.volumeMethod.cylindrical'),
      }];
 
     return {
diff --git a/apps/admin/src/views/images/drinkware-sets/read.vue b/apps/admin/src/views/images/drinkware-sets/read.vue
index 4f98db5dc1..9edbd1bf8c 100644
--- a/apps/admin/src/views/images/drinkware-sets/read.vue
+++ b/apps/admin/src/views/images/drinkware-sets/read.vue
@@ -2,7 +2,7 @@
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
     <v-row>
       <v-col cols="12">
-        <v-simple-table>
+        <v-table>
           <tbody>
             <tr>
               <th>{{ $t('drinkware-sets.id') }}</th>
@@ -14,10 +14,10 @@
             </tr>
             <tr>
               <th>{{ $t('guide-images._') }}</th>
-              <td>{{ entry.guideImageId }}</td>
+              <td>{{ entry.imageMapId }}</td>
             </tr>
           </tbody>
-        </v-simple-table>
+        </v-table>
       </v-col>
     </v-row>
   </layout>
diff --git a/apps/admin/src/views/images/guide-drawer.vue b/apps/admin/src/views/images/guide-drawer.vue
index 61b6a7fef0..7ba258da3c 100644
--- a/apps/admin/src/views/images/guide-drawer.vue
+++ b/apps/admin/src/views/images/guide-drawer.vue
@@ -33,27 +33,26 @@
       <v-container fluid>
         <v-row>
           <v-col v-for="(object, idx) in objects" :key="object.id" cols="12" lg="4" sm="6">
-            <v-item v-slot="{ active }">
-              <v-card flat min-height="200px" outlined>
+            <v-item v-slot="{ isSelected }">
+              <v-card border flat min-height="200px">
                 <v-toolbar
-                  :color="active ? `primary` : `ternary`"
-                  :dark="active"
+                  :color="isSelected ? `primary` : `ternary`"
+                  :dark="isSelected"
                   flat
                   :style="{ cursor: 'pointer' }"
                   @click="selectObject(idx)"
                 >
-                  <v-icon left>
-                    fas fa-draw-polygon
-                  </v-icon>{{ $t('guide-images.objects.id') }}:
+                  <v-icon icon="fas fa-draw-polygon" start />{{ $t('guide-images.objects.id') }}:
                   {{ object.id }}
                   <v-spacer />
                   <confirm-dialog
                     v-if="isImageMap && !disabled"
                     color="error"
                     icon
-                    :icon-color="active ? `white` : `error`"
+                    :icon-color="isSelected ? `white` : `error`"
                     icon-left="$delete"
-                    :label="$t('guide-images.objects.delete').toString()"
+                    :label="$t('guide-images.objects.delete')"
+                    variant="text"
                     @confirm="removeObject(idx)"
                   >
                     {{ $t('common.action.confirm.delete', { name: entry.id }) }}
@@ -68,8 +67,8 @@
                         :disabled="isGuideImage || disabled"
                         hide-details="auto"
                         :label="$t('common.description')"
-                        name="description"
-                        outlined
+                        :name="`description-${object.id}`"
+                        variant="outlined"
                       />
                     </v-col>
                     <v-col v-if="isGuideImage" cols="12">
@@ -78,27 +77,27 @@
                         :disabled="isImageMap || disabled"
                         hide-details="auto"
                         :label="$t('guide-images.objects.weight')"
-                        name="weight"
-                        outlined
+                        :name="`weight-${object.id}`"
                         prepend-inner-icon="fas fa-scale-balanced"
+                        variant="outlined"
                       />
                     </v-col>
                     <v-col cols="12">
                       <language-selector
                         v-model="object.label"
+                        border
                         :disabled="disabled"
-                        :label="$t('guide-images.objects.label._').toString()"
+                        :label="$t('guide-images.objects.label._')"
                       >
-                        <template v-for="lang in Object.keys(object.label)" #[`lang.${lang}`]>
+                        <template v-for="lang in Object.keys(object.label)" :key="lang" #[`lang.${lang}`]>
                           <v-text-field
-                            :key="lang"
                             v-model="object.label[lang]"
                             hide-details="auto"
                             :hint="isGuideImage ? $t('guide-images.objects.label.hint') : undefined"
                             :label="$t('guide-images.objects.label._')"
-                            outlined
                             :persistent-hint="isGuideImage"
-                            @input="updateObjects"
+                            variant="outlined"
+                            @update:model-value="updateObjects"
                           />
                         </template>
                       </language-selector>
@@ -110,18 +109,16 @@
           </v-col>
           <v-col v-if="isImageMap && !disabled" cols="12" lg="4" sm="6">
             <v-card
+              border
               class="d-flex justify-center align-center"
               flat
               height="100%"
               link
               min-height="200px"
-              outlined
               :title="$t('guide-images.objects.add')"
               @click.stop="addObject"
             >
-              <v-btn color="primary" fab x-large>
-                <v-icon>$add</v-icon>
-              </v-btn>
+              <v-btn color="primary" icon="$add" size="x-large" />
             </v-card>
           </v-col>
         </v-row>
@@ -132,7 +129,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue';
-import type { VImg } from 'vuetify/lib';
+import type { VImg } from 'vuetify/components';
 import { useElementSize, watchDebounced } from '@vueuse/core';
 import chunk from 'lodash/chunk';
 import debounce from 'lodash/debounce';
diff --git a/apps/admin/src/views/images/guide-images/create.vue b/apps/admin/src/views/images/guide-images/create.vue
index 188eb0d81e..fbb6679d67 100644
--- a/apps/admin/src/views/images/guide-images/create.vue
+++ b/apps/admin/src/views/images/guide-images/create.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -11,8 +11,8 @@
                 hide-details="auto"
                 :label="$t('guide-images.id')"
                 name="id"
-                outlined
                 prepend-inner-icon="$guide-images"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -24,7 +24,7 @@
                 :label="$t('image-maps.id')"
                 name="imageMapId"
                 resource="image-maps"
-                @input="form.errors.clear('imageMapId')"
+                @update:model-value="form.errors.clear('imageMapId')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -34,8 +34,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/images/guide-images/edit.vue b/apps/admin/src/views/images/guide-images/edit.vue
index fc53c3a071..7576871621 100644
--- a/apps/admin/src/views/images/guide-images/edit.vue
+++ b/apps/admin/src/views/images/guide-images/edit.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,8 +12,8 @@
                 hide-details="auto"
                 :label="$t('guide-images.id')"
                 name="id"
-                outlined
                 prepend-inner-icon="$guide-images"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -24,8 +24,8 @@
                 hide-details="auto"
                 :label="$t('image-maps._')"
                 name="imageMapId"
-                outlined
                 prepend-inner-icon="$image-maps"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -35,8 +35,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/images/guide-images/read.vue b/apps/admin/src/views/images/guide-images/read.vue
index a86e45f1f5..e4ac93f386 100644
--- a/apps/admin/src/views/images/guide-images/read.vue
+++ b/apps/admin/src/views/images/guide-images/read.vue
@@ -2,7 +2,7 @@
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
     <v-row>
       <v-col cols="12">
-        <v-simple-table>
+        <v-table>
           <tbody>
             <tr>
               <th>{{ $t('guide-images.id') }}</th>
@@ -17,7 +17,7 @@
               <td>{{ entry.imageMapId }}</td>
             </tr>
           </tbody>
-        </v-simple-table>
+        </v-table>
       </v-col>
     </v-row>
     <guide-drawer v-bind="{ entry, disabled: true, resource: 'guide-images' }" />
diff --git a/apps/admin/src/views/images/image-maps/create.vue b/apps/admin/src/views/images/image-maps/create.vue
index 7ccf3db087..fe2843ff94 100644
--- a/apps/admin/src/views/images/image-maps/create.vue
+++ b/apps/admin/src/views/images/image-maps/create.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -11,7 +11,7 @@
                 hide-details="auto"
                 :label="$t('image-maps.id')"
                 name="id"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -21,9 +21,9 @@
                 hide-details="auto"
                 :label="$t('image-maps.baseImage')"
                 name="baseImage"
-                outlined
                 prepend-icon=""
                 prepend-inner-icon="fas fa-paperclip"
+                variant="outlined"
                 @change="form.errors.clear('baseImage')"
               />
             </v-col>
@@ -34,8 +34,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/images/image-maps/edit.vue b/apps/admin/src/views/images/image-maps/edit.vue
index ac32b3889f..8ca00c44b1 100644
--- a/apps/admin/src/views/images/image-maps/edit.vue
+++ b/apps/admin/src/views/images/image-maps/edit.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,7 +12,7 @@
                 hide-details="auto"
                 :label="$t('image-maps.id')"
                 name="id"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -22,8 +22,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/images/image-maps/read.vue b/apps/admin/src/views/images/image-maps/read.vue
index af2b277579..2c7b44bc81 100644
--- a/apps/admin/src/views/images/image-maps/read.vue
+++ b/apps/admin/src/views/images/image-maps/read.vue
@@ -2,7 +2,7 @@
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
     <v-row>
       <v-col cols="12">
-        <v-simple-table>
+        <v-table>
           <tbody>
             <tr>
               <th>{{ $t('image-maps.id') }}</th>
@@ -13,7 +13,7 @@
               <td>{{ entry.description }}</td>
             </tr>
           </tbody>
-        </v-simple-table>
+        </v-table>
       </v-col>
     </v-row>
     <guide-drawer v-bind="{ entry, disabled: true, resource: 'image-maps' }" />
diff --git a/apps/admin/src/views/jobs/browse.vue b/apps/admin/src/views/jobs/browse.vue
index 88d0480a76..26c9877616 100644
--- a/apps/admin/src/views/jobs/browse.vue
+++ b/apps/admin/src/views/jobs/browse.vue
@@ -17,62 +17,48 @@
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import { DataTable } from '@intake24/admin/components/data-tables';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useDateTime } from '@intake24/admin/composables';
+import { useI18n } from '@intake24/i18n';
 
-export default defineComponent({
-  name: 'JobList',
-
-  components: { DataTable },
+defineOptions({ name: 'JobList' });
 
-  setup() {
-    const { formatDateTime } = useDateTime();
+const { i18n: { t } } = useI18n();
+const { formatDateTime } = useDateTime();
 
-    return {
-      formatDateTime,
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.id'),
+    sortable: true,
+    key: 'id',
   },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('common.type'),
-          sortable: true,
-          value: 'type',
-        },
-        {
-          text: this.$t('users._'),
-          sortable: true,
-          value: 'userId',
-        },
-        {
-          text: this.$t('common.startedAt'),
-          sortable: true,
-          value: 'startedAt',
-        },
-        {
-          text: this.$t('common.status'),
-          sortable: false,
-          value: 'successful',
-          align: 'center',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+  {
+    title: t('common.type'),
+    sortable: true,
+    key: 'type',
+  },
+  {
+    title: t('users._'),
+    sortable: true,
+    key: 'userId',
+  },
+  {
+    title: t('common.startedAt'),
+    sortable: true,
+    key: 'startedAt',
+  },
+  {
+    title: t('common.status'),
+    sortable: false,
+    key: 'successful',
+    align: 'center',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/jobs/read.vue b/apps/admin/src/views/jobs/read.vue
index d48b021e39..dc60173ad5 100644
--- a/apps/admin/src/views/jobs/read.vue
+++ b/apps/admin/src/views/jobs/read.vue
@@ -6,13 +6,13 @@
         :activator-class="['ml-2']"
         color="primary"
         icon-left="fas fa-play"
-        :label="$t('jobs.repeat._').toString()"
+        :label="$t('jobs.repeat._')"
         @confirm="repeat"
       >
         {{ $t('jobs.repeat.confirm') }}
       </confirm-dialog>
     </template>
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.id') }}</th>
@@ -34,8 +34,7 @@
               v-if="downloadUrlAvailable(entry)"
               class="ml-2"
               icon
-              large
-              link
+              size="large"
               :title="$t('common.action.download')"
               @click="download(entry)"
             >
@@ -52,10 +51,10 @@
           <td>{{ entry.progress }}</td>
           <th>{{ $t('jobs.successful') }}</th>
           <td>
-            <v-icon v-if="entry.successful" color="success" left>
+            <v-icon v-if="entry.successful" color="success" start>
               $check
             </v-icon>
-            <v-icon v-else color="error" left>
+            <v-icon v-else color="error" start>
               $times
             </v-icon>
             {{ $t(`common.${entry.successful}`) }}
@@ -94,7 +93,7 @@
           </td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/languages/browse.vue b/apps/admin/src/views/languages/browse.vue
index 553c9d60e0..348ed93f58 100644
--- a/apps/admin/src/views/languages/browse.vue
+++ b/apps/admin/src/views/languages/browse.vue
@@ -7,42 +7,35 @@
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'LanguageList' });
 
-export default defineComponent({
-  name: 'LanguageList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('languages.code'),
-          sortable: true,
-          value: 'code',
-        },
-        {
-          text: this.$t('languages.englishName'),
-          sortable: true,
-          value: 'englishName',
-        },
-        {
-          text: this.$t('languages.localName'),
-          sortable: true,
-          value: 'localName',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('languages.code'),
+    sortable: true,
+    key: 'code',
+  },
+  {
+    title: t('languages.englishName'),
+    sortable: true,
+    key: 'englishName',
+  },
+  {
+    title: t('languages.localName'),
+    sortable: true,
+    key: 'localName',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/languages/form.vue b/apps/admin/src/views/languages/form.vue
index 6f0e96af17..553ad1c02b 100644
--- a/apps/admin/src/views/languages/form.vue
+++ b/apps/admin/src/views/languages/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,8 +12,8 @@
                 hide-details="auto"
                 :label="$t('languages.code')"
                 name="code"
-                outlined
                 prepend-inner-icon="$languages"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -24,16 +24,20 @@
                 :items="flags"
                 :label="$t('languages.countryFlagCode')"
                 name="countryFlagCode"
-                outlined
-                @change="form.errors.clear('countryFlagCode')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('countryFlagCode')"
               >
-                <template #item="{ item }">
-                  <span :class="`fi fi-${item.value} mr-3`" />
-                  {{ item.text }}
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <span :class="`fi fi-${item.raw.value} mr-3`" />
+                    </template>
+                    <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  </v-list-item>
                 </template>
                 <template #selection="{ item }">
-                  <span :class="`fi fi-${item.value} mr-3`" />
-                  {{ item.text }}
+                  <span :class="`fi fi-${item.raw.value} mr-3`" />
+                  {{ item.raw.title }}
                 </template>
               </v-select>
             </v-col>
@@ -44,7 +48,7 @@
                 hide-details="auto"
                 :label="$t('languages.englishName')"
                 name="englishName"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -54,7 +58,7 @@
                 hide-details="auto"
                 :label="$t('languages.localName')"
                 name="localName"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -65,20 +69,20 @@
                 :items="textDirections"
                 :label="$t('languages.textDirections._')"
                 name="textDirection"
-                outlined
-                @change="form.errors.clear('textDirection')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('textDirection')"
               >
-                <template #item="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <v-icon :icon="item.raw.icon" start />
+                    </template>
+                    <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  </v-list-item>
                 </template>
                 <template #selection="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                  <v-icon :icon="item.raw.icon" start />
+                  {{ item.raw.title }}
                 </template>
               </v-select>
             </v-col>
@@ -90,20 +94,20 @@
                 :items="visibilities"
                 :label="$t('securables.visibility._')"
                 name="visibility"
-                outlined
-                @change="form.errors.clear('visibility')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('visibility')"
               >
-                <template #item="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <v-icon :icon="item.raw.icon" start />
+                    </template>
+                    <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  </v-list-item>
                 </template>
                 <template #selection="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                  <v-icon :icon="item.raw.icon" start />
+                  {{ item.raw.title }}
                 </template>
               </v-select>
             </v-col>
diff --git a/apps/admin/src/views/languages/read.vue b/apps/admin/src/views/languages/read.vue
index c32cca9ade..83bfa7204d 100644
--- a/apps/admin/src/views/languages/read.vue
+++ b/apps/admin/src/views/languages/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('languages.code') }}</th>
@@ -30,7 +30,7 @@
           <td>{{ $t(`securables.visibility.${entry.visibility}`) }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/languages/translations/browse.vue b/apps/admin/src/views/languages/translations/browse.vue
index 18842baf37..b6535e8f86 100644
--- a/apps/admin/src/views/languages/translations/browse.vue
+++ b/apps/admin/src/views/languages/translations/browse.vue
@@ -1,6 +1,6 @@
 <template>
-  <layout v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="save">
-    <v-toolbar bottom color="grey lighten-5" flat tile>
+  <layout v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="save">
+    <v-toolbar color="grey-lighten-4" flat tile>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('languages.translations.title') }}
       </v-toolbar-title>
@@ -8,20 +8,21 @@
       <template v-if="form.translations.length">
         <confirm-dialog
           color="primary"
-          fab
           icon
           icon-left="fas fa-rotate"
-          :label="$t('common.action.sync').toString()"
+          :label="$t('common.action.sync')"
+          size="small"
           @confirm="sync"
         >
           {{ $t('languages.translations.sync') }}
         </confirm-dialog>
         <confirm-dialog
+          class="ms-2"
           color="error"
-          fab
           icon
           icon-left="$delete"
-          :label="$t('common.action.delete').toString()"
+          :label="$t('common.action.delete')"
+          size="small"
           @confirm="remove"
         >
           {{ $t('languages.translations.delete') }}
@@ -29,29 +30,24 @@
       </template>
     </v-toolbar>
     <error-list :errors="nonInputErrors" tag="v-card-text" />
-    <v-list v-if="form.translations.length" two-line>
+    <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
       >
-        <v-list-item-avatar>
+        <template #prepend>
           <v-icon>fas fa-language</v-icon>
-        </v-list-item-avatar>
-        <v-list-item-content>
-          <v-list-item-title>
-            {{ $t(`languages.translations.applications.${translation.application}`) }} |
-            {{ getSectionTitle(translation.section) }}
-          </v-list-item-title>
-        </v-list-item-content>
-        <v-list-item-action>
-          <v-btn icon :title="$t('languages.translations.edit')" @click.stop="edit(translation)">
-            <v-icon color="secondary lighten-2">
-              $edit
-            </v-icon>
-          </v-btn>
-        </v-list-item-action>
+        </template>
+        <v-list-item-title>
+          {{ $t(`languages.translations.applications.${translation.application}`) }} |
+          {{ getSectionTitle(translation.section) }}
+        </v-list-item-title>
+        <template #append>
+          <v-list-item-action>
+            <v-btn icon="$edit" :title="$t('languages.translations.edit')" @click.stop="edit(translation)" />
+          </v-list-item-action>
+        </template>
       </v-list-item>
     </v-list>
     <v-card v-else flat link min-height="100px" @click="create">
@@ -59,9 +55,7 @@
         {{ $t('languages.translations.create') }}
       </v-card-title>
       <v-card-text class="d-flex justify-center align-center">
-        <v-btn color="secondary" fab x-large>
-          <v-icon>$add</v-icon>
-        </v-btn>
+        <v-btn color="secondary" icon="$add" size="x-large" />
       </v-card-text>
     </v-card>
     <translation-section
@@ -84,6 +78,7 @@ import type { LanguageTranslationAttributes } from '@intake24/db';
 import { formMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch, useEntryForm } from '@intake24/admin/composables';
 import { copy } from '@intake24/common/util';
+import { useI18n } from '@intake24/i18n';
 import { ConfirmDialog } from '@intake24/ui';
 import { useMessages } from '@intake24/ui/stores';
 
@@ -99,6 +94,8 @@ export default defineComponent({
   mixins: [formMixin],
 
   setup(props) {
+    const { i18n } = useI18n();
+
     const messages = useMessages();
     const { entry, entryLoaded } = useEntry<LanguageEntry>(props);
     useEntryFetch(props);
@@ -110,7 +107,24 @@ export default defineComponent({
       nonInputErrorKeys: ['translations'],
     });
 
-    return { entry, entryLoaded, form, nonInputErrors, routeLeave, toForm, messages };
+    function getSectionTitle(key: string) {
+      const check = has(i18n.messages.value[i18n.locale.value], `${key}.title`);
+      if (check)
+        return i18n.t(`${key}.title`);
+
+      return i18n.t(`languages.translations.sections.${key}`);
+    };
+
+    return {
+      entry,
+      entryLoaded,
+      form,
+      nonInputErrors,
+      routeLeave,
+      toForm,
+      messages,
+      getSectionTitle,
+    };
   },
 
   data() {
@@ -128,14 +142,6 @@ export default defineComponent({
   },
 
   methods: {
-    getSectionTitle(key: string): string {
-      const check = has(this.$i18n.messages[this.$i18n.locale], `${key}.title`);
-      if (check)
-        return this.$t(`${key}.title`).toString();
-
-      return this.$t(`languages.translations.sections.${key}`).toString();
-    },
-
     edit(translation: LanguageTranslationAttributes) {
       this.selected = translation;
     },
@@ -153,7 +159,7 @@ export default defineComponent({
 
     notify(action: string) {
       this.messages.success(
-        this.$t(`languages.translations.${action}`, { name: this.entry.englishName }).toString(),
+        this.$t(`languages.translations.${action}`, { name: this.entry.englishName }),
       );
     },
 
diff --git a/apps/admin/src/views/languages/translations/translation-section.vue b/apps/admin/src/views/languages/translations/translation-section.vue
index 6fbffc9886..33023cebed 100644
--- a/apps/admin/src/views/languages/translations/translation-section.vue
+++ b/apps/admin/src/views/languages/translations/translation-section.vue
@@ -1,10 +1,9 @@
 <script lang="ts">
-import type { CreateElement, PropType, VNode, VNodeChildren } from 'vue';
-import type { LocaleMessageObject } from 'vue-i18n';
+import type { PropType, VNodeChild } from 'vue';
 import has from 'lodash/has';
 import isPlainObject from 'lodash/isPlainObject';
 import pick from 'lodash/pick';
-import { defineComponent } from 'vue';
+import { computed, defineComponent, h, ref, watch } from 'vue';
 import {
   VBtn,
   VCard,
@@ -17,12 +16,12 @@ import {
   VSpacer,
   VTextField,
   VToolbar,
-  VToolbarItems,
   VToolbarTitle,
-} from 'vuetify/lib';
+} from 'vuetify/components';
 
 import type { LanguageTranslationAttributes } from '@intake24/db';
 import { copy } from '@intake24/common/util';
+import { type LocaleMessageDictionary, useI18n } from '@intake24/i18n';
 
 import IntersectableSkeleton from './intersectable-skeleton.vue';
 
@@ -39,108 +38,76 @@ export default defineComponent({
 
   emits: ['close', 'update'],
 
-  data() {
-    return {
-      dialog: false,
-      messages: {
-        chunk: 10,
-        all: {} as LocaleMessageObject,
-        loaded: {} as LocaleMessageObject,
-      },
-    };
-  },
+  setup(props, { emit }) {
+    const { i18n } = useI18n();
 
-  computed: {
-    allKeys(): string[] {
-      return Object.keys(this.messages.all);
-    },
-    loadedKeys(): string[] {
-      return Object.keys(this.messages.loaded);
-    },
-    messagesAvailableToLoad(): boolean {
-      return this.loadedKeys.length < this.allKeys.length;
-    },
-  },
+    const dialog = ref(false);
+    const chunk = 10;
+    const allMessages = ref<LocaleMessageDictionary<any>>({});
+    const loadedMessages = ref<LocaleMessageDictionary<any>>({});
 
-  watch: {
-    dialog(val: boolean) {
-      if (!val)
-        this.$emit('close');
-    },
-    translation(val: LanguageTranslationAttributes | null) {
-      if (!val)
+    const sectionTitle = computed(() => {
+      const key = props.translation?.section;
+      if (!key)
+        return '';
+
+      // @ts-expect-error - i18n types
+      const check = has(i18n.messages.value[i18n.locale.value], `${key}.title`);
+      if (check)
+        return i18n.t(`${key}.title`);
+
+      return i18n.t(`languages.translations.sections.${key}`);
+    });
+
+    const allKeys = computed(() => Object.keys(allMessages.value));
+    const loadedKeys = computed(() => Object.keys(loadedMessages.value));
+    const messagesAvailableToLoad = computed(() => loadedKeys.value.length < allKeys.value.length);
+
+    function loadMoreMessages(isIntersecting: boolean) {
+      if (!isIntersecting || !messagesAvailableToLoad.value)
         return;
 
-      this.messages = {
-        chunk: 10,
-        all: copy(val.messages),
-        loaded: {},
-      };
-      this.dialog = true;
-    },
-  },
+      const startIndex = loadedKeys.value.length;
+      const endIndex
+          = startIndex + chunk > allKeys.value.length
+            ? allKeys.value.length
+            : startIndex + chunk;
 
-  methods: {
-    loadMoreMessages(entries: IntersectionObserverEntry[]) {
-      if (entries[0].isIntersecting && this.messagesAvailableToLoad) {
-        const startIndex = this.loadedKeys.length;
-        const endIndex
-          = startIndex + this.messages.chunk > this.allKeys.length
-            ? this.allKeys.length
-            : startIndex + this.messages.chunk;
-
-        const items = this.allKeys.slice(startIndex, endIndex);
-        this.messages.loaded = { ...this.messages.loaded, ...pick(this.messages.all, items) };
-      }
-    },
+      const items = allKeys.value.slice(startIndex, endIndex);
+      loadedMessages.value = { ...loadedMessages.value, ...pick(allMessages.value, items) };
+    };
 
-    close() {
-      this.dialog = false;
-    },
+    function close() {
+      dialog.value = false;
+    };
 
-    cancel(event: Event) {
+    function cancel(event: Event) {
       event.stopPropagation();
 
-      this.close();
-    },
+      close();
+    };
 
-    save(event: Event) {
+    function save(event: Event) {
       event.stopPropagation();
 
-      if (!this.translation)
+      if (!props.translation)
         return;
 
-      const {
-        translation: { id },
-        messages: { all, loaded },
-      } = this;
-
-      this.$emit('update', { id, messages: { ...all, ...loaded } });
-      this.close();
-    },
-
-    getSectionTitle(): string {
-      const key = this.translation?.section;
-      if (!key)
-        return '';
-
-      const check = has(this.$i18n.messages[this.$i18n.locale], `${key}.title`);
-      if (check)
-        return this.$t(`${key}.title`).toString();
+      const { translation: { id } } = props;
 
-      return this.$t(`languages.translations.sections.${key}`).toString();
-    },
+      emit('update', { id, messages: { ...allMessages.value, ...loadedMessages.value } });
+      close();
+    };
 
-    createInputs(
-      h: CreateElement,
-      translations: LocaleMessageObject,
+    function createInputs(
+      translations: LocaleMessageDictionary<any>,
       path: string[] = [],
-    ): VNodeChildren {
+    ): VNodeChild[] {
       const items = Object.keys(translations);
-      if (!items.length || this.translation === null)
+      if (!items.length || props.translation === null)
         return [];
 
-      const section = this.translation?.section;
+      const section = props.translation?.section;
       if (!section)
         return [];
 
@@ -148,107 +115,115 @@ export default defineComponent({
         const fullPath = [section, ...path, item].join('.');
 
         if (isPlainObject(translations[item]))
-          return this.createInputs(h, translations[item] as LocaleMessageObject, [...path, item]);
-
-        return h(VCol, { props: { cols: 12 } }, [
-          h(VTextField, {
-            props: {
-              messages: this.$t(fullPath).toString(),
-              label: fullPath,
-              outlined: true,
-              value: translations[item],
-            },
-            on: {
-              input: (event: string) => {
-                translations[item] = event;
-              },
-            },
-          }),
-        ]);
+          return createInputs(translations[item], [...path, item]);
+
+        return h(VCol, { cols: 12 }, () => h(VTextField, {
+          messages: i18n.t(fullPath),
+          label: fullPath,
+          outlined: true,
+          modelValue: translations[item],
+          'onUpdate:modelValue': (event: string) => {
+            translations[item] = event;
+          },
+        }));
       });
 
       return inputs;
-    },
-  },
+    };
+
+    watch(dialog, (val) => {
+      if (!val)
+        emit('close');
+    });
+
+    watch(() => props.translation, (val) => {
+      if (!val)
+        return;
 
-  render(h: CreateElement): VNode {
-    return h(
+      allMessages.value = copy(val.messages);
+      loadedMessages.value = {};
+      dialog.value = true;
+    });
+
+    return () => h(
       VDialog,
       {
-        props: {
-          fullscreen: true,
-          hideOverlay: true,
-          value: this.dialog,
-          transition: 'dialog-bottom-transition',
-        },
-        on: {
-          input: (event: boolean) => {
-            this.dialog = event;
-          },
+        fullscreen: true,
+        hideOverlay: true,
+        modelValue: dialog.value,
+        transition: 'dialog-bottom-transition',
+        'onUpdate:modelValue': (event: boolean) => {
+          dialog.value = event;
         },
       },
-      [
-        h(VCard, { props: { tile: true } }, [
-          h(VToolbar, { props: { dark: true, color: 'secondary' } }, [
-            h(
-              VBtn,
-              {
-                props: {
-                  title: this.$t('common.action.cancel'),
-                  icon: true,
-                  dark: true,
-                },
-                on: {
-                  click: this.cancel,
-                },
-              },
-              [h(VIcon, '$cancel')],
-            ),
-            h(VToolbarTitle, this.getSectionTitle()),
-            h(VSpacer),
-            h(VToolbarItems, [
+      {
+        default: () => [
+          h(VCard, {
+            tile: true,
+          }, {
+            default: () => [
               h(
-                VBtn,
+                VToolbar,
+                { color: 'secondary' },
                 {
-                  props: {
-                    title: this.$t('common.action.ok'),
-                    dark: true,
-                    text: true,
-                  },
-                  on: {
-                    click: this.save,
-                  },
+                  default: () => [
+                    h(
+                      VBtn,
+                      {
+                        title: i18n.t('common.action.cancel'),
+                        icon: '$cancel',
+                        variant: 'plain',
+                        onClick: cancel,
+                      },
+                    ),
+                    h(VToolbarTitle, () => sectionTitle.value),
+                    h(VSpacer),
+                    h(
+                      VBtn,
+                      {
+                        title: i18n.t('common.action.ok'),
+                        variant: 'text',
+                        onClick: save,
+                      },
+                      {
+                        default: () => [
+                          h(VIcon, { start: true }, () => '$success'),
+                          i18n.t('common.action.ok'),
+                        ],
+                      },
+                    ),
+                  ],
                 },
-                [
-                  h(VIcon, { props: { left: true } }, '$success'),
-                  this.$t('common.action.ok').toString(),
-                ],
               ),
-            ]),
-          ]),
-          h(VContainer, [
-            h(
-              VCardTitle,
-              `${this.$t('languages.translations.title').toString()} - ${this.getSectionTitle()}`,
-            ),
-            h(VRow, [
-              this.createInputs(h, this.messages.loaded),
-              ...[
-                this.messagesAvailableToLoad
-                  ? h(VCol, { props: { cols: 12 } }, [
-                    h(IntersectableSkeleton, {
-                      props: { type: 'list-item' },
-                      on: {
-                        intersected: this.loadMoreMessages,
-                      },
-                    }),
-                  ])
-                  : undefined,
-              ].filter(Boolean),
-            ]),
-          ]),
-        ]),
-      ],
+              h(VContainer, null, {
+                default: () => [
+                  h(
+                    VCardTitle,
+                    () => `${i18n.t('languages.translations.title')} - ${sectionTitle.value}`,
+                  ),
+                  h(VRow, null, {
+                    default: () => [
+                      createInputs(loadedMessages.value),
+                      ...[
+                        messagesAvailableToLoad.value
+                          ? h(VCol, { cols: 12 }, {
+                            default: () => [
+                              h(IntersectableSkeleton, {
+                                type: 'list-item',
+                                onIntersected: loadMoreMessages,
+                              }),
+                            ],
+                          })
+                          : undefined,
+                      ].filter(Boolean),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      },
     );
   },
 });
diff --git a/apps/admin/src/views/locales/browse.vue b/apps/admin/src/views/locales/browse.vue
index 212fa4ac4b..de11a0796c 100644
--- a/apps/admin/src/views/locales/browse.vue
+++ b/apps/admin/src/views/locales/browse.vue
@@ -7,42 +7,35 @@
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'LocaleList' });
 
-export default defineComponent({
-  name: 'LocaleList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('locales.code'),
-          sortable: true,
-          value: 'code',
-        },
-        {
-          text: this.$t('locales.englishName'),
-          sortable: true,
-          value: 'englishName',
-        },
-        {
-          text: this.$t('locales.localName'),
-          sortable: true,
-          value: 'localName',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('locales.code'),
+    sortable: true,
+    key: 'code',
+  },
+  {
+    title: t('locales.englishName'),
+    sortable: true,
+    key: 'englishName',
+  },
+  {
+    title: t('locales.localName'),
+    sortable: true,
+    key: 'localName',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/locales/food-ranking/browse.vue b/apps/admin/src/views/locales/food-ranking/browse.vue
index 153ca89f2a..8be7058c30 100644
--- a/apps/admin/src/views/locales/food-ranking/browse.vue
+++ b/apps/admin/src/views/locales/food-ranking/browse.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-toolbar bottom color="grey lighten-5" flat tile>
+    <v-toolbar color="grey-lighten-4" flat tile>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('locales.food-ranking.title') }}
       </v-toolbar-title>
@@ -9,10 +9,10 @@
       <v-card-title>{{ $t('locales.food-ranking.description') }} </v-card-title>
       <v-card-actions>
         <csv-upload
-          :dialog-title="$t('locales.food-ranking.upload').toString()"
+          :dialog-title="$t('locales.food-ranking.upload')"
           :endpoint="endpoint"
           job-type="LocaleFoodRankingUpload"
-          :label="$t('locales.food-ranking.upload').toString()"
+          :label="$t('locales.food-ranking.upload')"
           :survey-id="id"
         />
       </v-card-actions>
diff --git a/apps/admin/src/views/locales/form.vue b/apps/admin/src/views/locales/form.vue
index bd216f2d58..40d1787652 100644
--- a/apps/admin/src/views/locales/form.vue
+++ b/apps/admin/src/views/locales/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,8 +12,8 @@
                 hide-details="auto"
                 :label="$t('locales.code')"
                 name="code"
-                outlined
                 prepend-inner-icon="$locales"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -27,7 +27,7 @@
                 :label="$t('locales.prototypeLocaleId')"
                 name="prototypeLocaleId"
                 resource="locales"
-                @input="form.errors.clear('prototypeLocaleId')"
+                @update:model-value="form.errors.clear('prototypeLocaleId')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -37,7 +37,7 @@
                 hide-details="auto"
                 :label="$t('locales.englishName')"
                 name="englishName"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -47,7 +47,7 @@
                 hide-details="auto"
                 :label="$t('locales.localName')"
                 name="localName"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -60,7 +60,7 @@
                 :label="$t('locales.respondentLanguageId')"
                 name="respondentLanguageId"
                 resource="languages"
-                @input="form.errors.clear('respondentLanguageId')"
+                @update:model-value="form.errors.clear('respondentLanguageId')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -73,7 +73,7 @@
                 :label="$t('locales.adminLanguageId')"
                 name="adminLanguageId"
                 resource="languages"
-                @input="form.errors.clear('adminLanguageId')"
+                @update:model-value="form.errors.clear('adminLanguageId')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -84,16 +84,20 @@
                 :items="flags"
                 :label="$t('locales.countryFlagCode')"
                 name="countryFlagCode"
-                outlined
-                @change="form.errors.clear('countryFlagCode')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('countryFlagCode')"
               >
-                <template #item="{ item }">
-                  <span :class="`fi fi-${item.value} mr-3`" />
-                  {{ item.text }}
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <span :class="`fi fi-${item.raw.value} mr-3`" />
+                    </template>
+                    <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  </v-list-item>
                 </template>
                 <template #selection="{ item }">
-                  <span :class="`fi fi-${item.value} mr-3`" />
-                  {{ item.text }}
+                  <span :class="`fi fi-${item.raw.value} mr-3`" />
+                  {{ item.raw.title }}
                 </template>
               </v-select>
             </v-col>
@@ -105,20 +109,20 @@
                 :items="textDirections"
                 :label="$t('languages.textDirections._')"
                 name="textDirection"
-                outlined
-                @change="form.errors.clear('textDirection')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('textDirection')"
               >
-                <template #item="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <v-icon :icon="item.raw.icon" start />
+                    </template>
+                    <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  </v-list-item>
                 </template>
                 <template #selection="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                  <v-icon :icon="item.raw.icon" start />
+                  {{ item.raw.title }}
                 </template>
               </v-select>
             </v-col>
@@ -130,20 +134,20 @@
                 :items="visibilities"
                 :label="$t('securables.visibility._')"
                 name="visibility"
-                outlined
-                @change="form.errors.clear('visibility')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('visibility')"
               >
-                <template #item="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <v-icon :icon="item.raw.icon" start />
+                    </template>
+                    <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  </v-list-item>
                 </template>
                 <template #selection="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                  <v-icon :icon="item.raw.icon" start />
+                  {{ item.raw.title }}
                 </template>
               </v-select>
             </v-col>
@@ -164,17 +168,21 @@
                 hide-details="auto"
                 :items="foodIndexLanguageBackends"
                 :label="$t('locales.foodIndex.languageBackend')"
-                name="textDirection"
-                outlined
-                @change="form.errors.clear('foodIndexLanguageBackendId')"
+                name="foodIndexLanguageBackendId"
+                variant="outlined"
+                @update:model-value="form.errors.clear('foodIndexLanguageBackendId')"
               >
-                <template #item="{ item }">
-                  <span :class="`fi fi-${item.value} mr-3`" />
-                  {{ item.text }}
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <span :class="`fi fi-${item.raw.value} mr-3`" />
+                    </template>
+                    <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  </v-list-item>
                 </template>
                 <template #selection="{ item }">
-                  <span :class="`fi fi-${item.value} mr-3`" />
-                  {{ item.text }}
+                  <span :class="`fi fi-${item.raw.value} mr-3`" />
+                  {{ item.raw.title }}
                 </template>
               </v-select>
             </v-col>
@@ -260,11 +268,11 @@ export default defineComponent({
   computed: {
     foodIndexLanguageBackends() {
       if (!this.refs.foodIndexLanguageBackends)
-        return [{ value: 'en', text: this.$t('common.none').toString() }];
+        return [{ value: 'en', title: this.$t('common.none') }];
 
       return this.refs.foodIndexLanguageBackends.map(backend => ({
         value: backend.id,
-        text: backend.name,
+        title: backend.name,
       }));
     },
   },
diff --git a/apps/admin/src/views/locales/read.vue b/apps/admin/src/views/locales/read.vue
index 0a283987ab..a8df64c3c1 100644
--- a/apps/admin/src/views/locales/read.vue
+++ b/apps/admin/src/views/locales/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('locales.code') }}</th>
@@ -59,7 +59,7 @@
           <td>{{ $t(`securables.visibility.${entry.visibility}`) }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/locales/recipe-foods/browse.vue b/apps/admin/src/views/locales/recipe-foods/browse.vue
index 2b5fbfe6d8..675eebec8d 100644
--- a/apps/admin/src/views/locales/recipe-foods/browse.vue
+++ b/apps/admin/src/views/locales/recipe-foods/browse.vue
@@ -1,106 +1,101 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="save">
-    <v-toolbar bottom color="grey lighten-5" flat tile>
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="save">
+    <v-toolbar color="grey-lighten-4" flat tile>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('locales.recipe-foods.title') }}
       </v-toolbar-title>
       <v-spacer />
       <v-btn
-        class="ml-3"
         color="secondary"
-        fab
-        small
+        icon="$add"
+        size="small"
         :title="$t('locales.recipe-foods.add')"
         @click.stop="add"
-      >
-        <v-icon>$add</v-icon>
-      </v-btn>
+      />
     </v-toolbar>
-    <v-list>
-      <v-list-item v-for="(item, idx) in form.items" :key="idx" class="list-item-border">
-        <v-list-item-avatar>
+    <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>
-        </v-list-item-avatar>
-        <v-list-item-content>
-          <v-container class="px-0">
-            <div class="text-h4 font-weight-medium mb-4">
-              {{ item.name }}
-            </div>
-            <v-row col="12">
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model.trim="item.name"
-                  hide-details="auto"
-                  :label="$t('locales.recipe-foods.title')"
-                  name="special"
-                  outlined
-                />
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model.trim="item.code"
-                  hide-details="auto"
-                  :label="$t('locales.recipe-foods.code')"
-                  name="code"
-                  outlined
-                  prepend-inner-icon="fa-sharp fa-regular fa-dollar-sign"
-                />
-              </v-col>
-            </v-row>
-            <v-row justify="center">
-              <v-col cols="12" md="4">
-                <v-text-field
-                  v-model.trim="item.recipeWord"
-                  hide-details="auto"
-                  :label="$t('locales.recipe-foods.special')"
-                  name="special"
-                  outlined
-                />
-              </v-col>
-              <v-col cols="12" md="8">
-                <v-select
-                  v-if="form.synonymsSets"
-                  v-model="item.synonymsId"
-                  hide-details="auto"
-                  :hint="`${item.synonymSet?.synonyms}, ${item.synonymSet?.id}`"
-                  item-text="synonyms"
-                  item-value="id"
-                  :items="form.synonymsSets"
-                  :label="$t('locales.recipe-foods.synonymsId')"
-                  outlined
-                  single-line
-                />
-              </v-col>
-            </v-row>
-            <v-row justify="center">
-              <v-col cols="12" md="4">
-                <v-btn
-                  block
-                  color="primary"
-                  :disabled="form.errors.any() || isAppLoading || !item.id"
-                  :title="$t('locales.recipe-foods.steps')"
-                  type="button"
-                  @click.stop="() => openStepsDialog(item.id, item.code, item)"
-                >
-                  <v-icon left>
-                    fas fa-arrow-down-1-9
-                  </v-icon>{{ $t('locales.recipe-foods.steps') }}
-                </v-btn>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-list-item-content>
-        <v-list-item-action>
-          <confirm-dialog
-            color="error"
-            icon
-            icon-left="$delete"
-            :label="$t('locales.recipe-foods.remove').toString()"
-            @confirm="remove(idx)"
-          >
-            {{ $t('common.action.confirm.delete', { name: item.recipeWord }) }}
-          </confirm-dialog>
-        </v-list-item-action>
+        </template>
+        <v-container class="px-0">
+          <div class="text-h4 font-weight-medium mb-4">
+            {{ item.name }}
+          </div>
+          <v-row col="12">
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model.trim="item.name"
+                hide-details="auto"
+                :label="$t('locales.recipe-foods.title')"
+                name="special"
+                variant="outlined"
+              />
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model.trim="item.code"
+                hide-details="auto"
+                :label="$t('locales.recipe-foods.code')"
+                name="code"
+                prepend-inner-icon="fa-sharp fa-regular fa-dollar-sign"
+                variant="outlined"
+              />
+            </v-col>
+          </v-row>
+          <v-row justify="center">
+            <v-col cols="12" md="4">
+              <v-text-field
+                v-model.trim="item.recipeWord"
+                hide-details="auto"
+                :label="$t('locales.recipe-foods.special')"
+                name="special"
+                variant="outlined"
+              />
+            </v-col>
+            <v-col cols="12" md="8">
+              <v-select
+                v-if="form.synonymsSets"
+                v-model="item.synonymsId"
+                hide-details="auto"
+                :hint="`${item.synonymSet?.synonyms}, ${item.synonymSet?.id}`"
+                item-title="synonyms"
+                item-value="id"
+                :items="form.synonymsSets"
+                :label="$t('locales.recipe-foods.synonymsId')"
+                single-line
+                variant="outlined"
+              />
+            </v-col>
+          </v-row>
+          <v-row justify="center">
+            <v-col cols="12" md="4">
+              <v-btn
+                block
+                color="primary"
+                :disabled="form.errors.any() || isAppLoading || !item.id"
+                :title="$t('locales.recipe-foods.steps')"
+                type="button"
+                @click.stop="() => openStepsDialog(item.id, item.code, item)"
+              >
+                <v-icon icon="fas fa-arrow-down-1-9" start />{{ $t('locales.recipe-foods.steps') }}
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
+        <template #append>
+          <v-list-item-action>
+            <confirm-dialog
+              color="error"
+              icon
+              icon-left="$delete"
+              :label="$t('locales.recipe-foods.remove')"
+              @confirm="remove(idx)"
+            >
+              {{ $t('common.action.confirm.delete', { name: item.recipeWord }) }}
+            </confirm-dialog>
+          </v-list-item-action>
+        </template>
         <steps-dialog
           v-if="dialog && item.id === activeRecipeFoodId"
           v-bind="{
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 d97bd8c6ef..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,15 +1,13 @@
 <template>
   <v-dialog
-    v-if="$props.dialog"
-    v-model="$props.dialog"
-    :fullscreen="$vuetify.breakpoint.smAndDown"
+    v-if="dialog"
+    :fullscreen="$vuetify.display.smAndDown"
     max-width="700px"
+    :model-value="dialog"
   >
-    <v-card class="dialog-card" :tile="$vuetify.breakpoint.smAndDown">
-      <v-toolbar class="sticky-toolbar" color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="$emit('close')">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+    <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') }}
         </v-toolbar-title>
@@ -18,137 +16,132 @@
           {{ $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-item-content class="v-list-item-content">
-            <v-container class="px-2">
-              <v-subheader class="text-h4 font-weight-medium mb-4 px-0">
-                <v-avatar class="mr-3" color="primary" size="28">
-                  <span class="white--text font-weight-medium text-h6">{{ item.order }}</span>
-                </v-avatar>
-                {{ translate(item.name) }}
-              </v-subheader>
-              <v-row col="12">
-                <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model.trim="item.code"
-                    hide-details="auto"
-                    :label="$t('locales.recipe-foods.step_code')"
-                    name="special"
-                    outlined
-                    readonly
-                  />
-                </v-col>
-                <v-col cols="12" md="6">
-                  <v-text-field
-                    v-model.trim="item.order"
-                    hide-details="auto"
-                    :label="$t('locales.recipe-foods.order')"
-                    name="code"
-                    outlined
-                    readonly
-                  />
-                </v-col>
-                <v-col cols="12">
-                  <language-selector
-                    v-model="item.name"
-                    :label="$t('locales.recipe-foods.name').toString()"
-                    required
-                  >
-                    <template v-for="lang in Object.keys(item.name)" #[`lang.${lang}`]>
-                      <v-text-field
-                        :key="lang"
-                        v-model="item.name[lang]"
-                        :error-messages="form.errors.get(`estimateIn.${lang}`)"
-                        hide-details="auto"
-                        :name="`estimateIn.${lang}`"
-                        outlined
-                        @input="form.errors.clear(`estimateIn.${lang}`)"
-                      />
-                    </template>
-                  </language-selector>
-                </v-col>
-                <v-col cols="12">
-                  <language-selector
-                    v-model="item.name"
-                    :label="$t('locales.recipe-foods.description').toString()"
-                    required
-                  >
-                    <template v-for="lang in Object.keys(item.name)" #[`lang.${lang}`]>
-                      <v-text-field
-                        :key="lang"
-                        v-model="item.description[lang]"
-                        :error-messages="form.errors.get(`recipe-foods.${lang}`)"
-                        hide-details="auto"
-                        :name="`recipe-foods.${lang}`"
-                        outlined
-                        @input="form.errors.clear(`recipe-foods.${lang}`)"
-                      />
-                    </template>
-                  </language-selector>
-                </v-col>
-              </v-row>
-              <v-row col="12">
-                <v-col cols="12" md="6">
-                  <v-switch
-                    v-model="item.repeatable"
-                    hide-details="auto"
-                    :label="$t('locales.recipe-foods.repeat')"
-                    name="repeatable"
-                  />
-                  <v-switch
-                    v-model="item.required"
-                    hide-details="auto"
-                    :label="$t('locales.recipe-foods.require')"
-                    name="required"
-                  />
-                </v-col>
-                <v-col cols="12" md="6">
-                  <select-resource
-                    v-model.trim="item.categoryCode"
-                    activator-class="mb-2"
-                    item-id="code"
-                    :label="$t('locales.recipe-foods.ingredientsCategory')"
-                    name="ingredientsCategoryCode"
-                    resource="categories"
-                  >
-                    <template #title>
-                      {{ $t(`fdbs.categories.title`) }}
-                    </template>
-                    <template #item="{ item: resItem }">
-                      <v-list-item-title>{{ resItem.code }}</v-list-item-title>
-                      <v-list-item-subtitle>{{ resItem.name }}</v-list-item-subtitle>
-                    </template>
-                  </select-resource>
-                </v-col>
-              </v-row>
-            </v-container>
-          </v-list-item-content>
-          <v-list-item-action class="v-list-item-action">
-            <v-btn
-              block
-              class="full-width-btn"
-              elevation="0"
-              :title="$t('locales.recipe-foods.remove')"
-              @click.stop="removeStep(idx)"
-            >
-              <v-icon color="error">
-                $delete
-              </v-icon>
-            </v-btn>
-          </v-list-item-action>
+      <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-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model.trim="item.code"
+                  hide-details="auto"
+                  :label="$t('locales.recipe-foods.step_code')"
+                  name="special"
+                  readonly
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model.trim="item.order"
+                  hide-details="auto"
+                  :label="$t('locales.recipe-foods.order')"
+                  name="code"
+                  readonly
+                  variant="outlined"
+                />
+              </v-col>
+              <v-col cols="12">
+                <language-selector
+                  v-model="item.name"
+                  border
+                  :label="$t('locales.recipe-foods.name')"
+                  required
+                >
+                  <template v-for="lang in Object.keys(item.name)" :key="lang" #[`lang.${lang}`]>
+                    <v-text-field
+                      v-model="item.name[lang]"
+                      :error-messages="form.errors.get(`estimateIn.${lang}`)"
+                      hide-details="auto"
+                      :name="`estimateIn.${lang}`"
+                      variant="outlined"
+                      @update:model-value="form.errors.clear(`estimateIn.${lang}`)"
+                    />
+                  </template>
+                </language-selector>
+              </v-col>
+              <v-col cols="12">
+                <language-selector
+                  v-model="item.name"
+                  border
+                  :label="$t('locales.recipe-foods.description')"
+                  required
+                >
+                  <template v-for="lang in Object.keys(item.name)" :key="lang" #[`lang.${lang}`]>
+                    <v-text-field
+                      v-model="item.description[lang]"
+                      :error-messages="form.errors.get(`recipe-foods.${lang}`)"
+                      hide-details="auto"
+                      :name="`recipe-foods.${lang}`"
+                      variant="outlined"
+                      @update:model-value="form.errors.clear(`recipe-foods.${lang}`)"
+                    />
+                  </template>
+                </language-selector>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-switch
+                  v-model="item.repeatable"
+                  hide-details="auto"
+                  :label="$t('locales.recipe-foods.repeat')"
+                  name="repeatable"
+                />
+                <v-switch
+                  v-model="item.required"
+                  hide-details="auto"
+                  :label="$t('locales.recipe-foods.require')"
+                  name="required"
+                />
+              </v-col>
+              <v-col cols="12" md="6">
+                <select-resource
+                  v-model.trim="item.categoryCode"
+                  activator-class="mb-2"
+                  item-id="code"
+                  :label="$t('locales.recipe-foods.ingredientsCategory')"
+                  name="ingredientsCategoryCode"
+                  resource="categories"
+                >
+                  <template #title>
+                    {{ $t(`fdbs.categories.title`) }}
+                  </template>
+                  <template #item="{ item: resItem }">
+                    <v-list-item-title>{{ resItem.code }}</v-list-item-title>
+                    <v-list-item-subtitle>{{ resItem.name }}</v-list-item-subtitle>
+                  </template>
+                </select-resource>
+              </v-col>
+            </v-row>
+          </v-container>
+          <template #append>
+            <v-list-item-action class="v-list-item-action">
+              <v-btn
+                block
+                class="full-width-btn"
+                color="grey-lighten-3"
+                :title="$t('locales.recipe-foods.remove')"
+                variant="flat"
+                @click.stop="removeStep(idx)"
+              >
+                <v-icon color="error" icon="$delete" />
+              </v-btn>
+            </v-list-item-action>
+          </template>
         </v-list-item>
         <v-spacer class="pa-2" />
         <div class="justify-center d-flex">
           <v-btn
-            class="display-1"
+            class="text-h4"
             color="primary"
-            fab
+            icon="$add"
             :title="$t('locales.recipe-foods.add')"
             @click.stop="addStep"
-          >
-            <v-icon>$add</v-icon>
-          </v-btn>
+          />
         </div>
       </v-list>
     </v-card>
@@ -204,6 +197,9 @@ export default defineComponent({
       default: () => [],
     },
   },
+
+  emits: ['close', 'update-steps'],
+
   setup(props, { emit }) {
     const { translate } = useI18n();
 
@@ -255,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 79f361db0e..39e99c4119 100644
--- a/apps/admin/src/views/locales/split-lists/browse.vue
+++ b/apps/admin/src/views/locales/split-lists/browse.vue
@@ -1,66 +1,67 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="save">
-    <v-toolbar bottom color="grey lighten-5" flat tile>
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="save">
+    <v-toolbar color="grey-lighten-4" flat tile>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('locales.split-lists.title') }}
       </v-toolbar-title>
       <v-spacer />
       <v-btn
-        class="ml-3"
         color="primary"
-        fab
-        small
+        icon="$add"
+        size="small"
         :title="$t('locales.split-lists.add')"
         @click.stop="add"
-      >
-        <v-icon>$add</v-icon>
-      </v-btn>
+      />
     </v-toolbar>
-    <v-list>
-      <v-list-item v-for="(item, idx) in form.items" :key="idx" class="list-item-border">
-        <v-list-item-avatar>
+    <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>
-        </v-list-item-avatar>
-        <v-list-item-content>
-          <v-row>
-            <v-col cols="12" md="4">
-              <v-text-field
-                v-model.trim="item.firstWord"
-                hide-details="auto"
-                :label="$t('locales.split-lists.firstWord')"
-                name="firstWord"
-                outlined
-              />
-            </v-col>
-            <v-col cols="12" md>
-              <v-text-field
-                v-model.trim="item.words"
-                hide-details="auto"
-                :label="$t('locales.split-lists.words')"
-                name="words"
-                outlined
-              />
-            </v-col>
-          </v-row>
-        </v-list-item-content>
-        <v-list-item-action>
-          <confirm-dialog
-            color="error"
-            icon
-            icon-left="$delete"
-            :label="$t('locales.split-lists.remove').toString()"
-            @confirm="remove(idx)"
-          >
-            {{ $t('common.action.confirm.delete', { name: item.firstWord }) }}
-          </confirm-dialog>
-        </v-list-item-action>
+        </template>
+        <v-row>
+          <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"
+              variant="outlined"
+            />
+          </v-col>
+          <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"
+              variant="outlined"
+            />
+          </v-col>
+        </v-row>
+        <template #append>
+          <v-list-item-action>
+            <confirm-dialog
+              color="error"
+              icon
+              icon-left="$delete"
+              :label="$t('locales.split-lists.remove')"
+              @confirm="remove(idx)"
+            >
+              {{ $t('common.action.confirm.delete', { name: item.firstWord }) }}
+            </confirm-dialog>
+          </v-list-item-action>
+        </template>
       </v-list-item>
     </v-list>
   </layout>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted } from 'vue';
 
 import type {
   LocaleEntry,
@@ -69,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';
 
@@ -82,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<
@@ -92,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 2357de2e4e..6001f646d5 100644
--- a/apps/admin/src/views/locales/split-words/browse.vue
+++ b/apps/admin/src/views/locales/split-words/browse.vue
@@ -1,46 +1,45 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="save">
-    <v-toolbar bottom color="grey lighten-5" flat tile>
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="save">
+    <v-toolbar color="grey-lighten-4" flat tile>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('locales.split-words.title') }}
       </v-toolbar-title>
       <v-spacer />
       <v-btn
-        class="ml-3"
         color="primary"
-        fab
-        small
+        icon="$add"
+        size="small"
         :title="$t('locales.split-words.add')"
         @click.stop="add"
-      >
-        <v-icon>$add</v-icon>
-      </v-btn>
+      />
     </v-toolbar>
-    <v-list>
-      <v-list-item v-for="(item, idx) in form.items" :key="idx" class="list-item-border">
-        <v-list-item-avatar>
+    <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>
-        </v-list-item-avatar>
-        <v-list-item-content>
-          <v-text-field
-            v-model="item.words"
-            hide-details="auto"
-            :label="$t('locales.split-words.words')"
-            name="words"
-            outlined
-          />
-        </v-list-item-content>
-        <v-list-item-action>
-          <confirm-dialog
-            color="error"
-            icon
-            icon-left="$delete"
-            :label="$t('locales.split-words.remove').toString()"
-            @confirm="remove(idx)"
-          >
-            {{ $t('common.action.confirm.delete', { name: item.words }) }}
-          </confirm-dialog>
-        </v-list-item-action>
+        </template>
+        <v-text-field
+          v-model="item.words"
+          class="my-1"
+          density="compact"
+          hide-details="auto"
+          :label="$t('locales.split-words.words')"
+          name="words"
+          variant="outlined"
+        />
+        <template #append>
+          <v-list-item-action>
+            <confirm-dialog
+              color="error"
+              icon
+              icon-left="$delete"
+              :label="$t('locales.split-words.remove')"
+              @confirm="remove(idx)"
+            >
+              {{ $t('common.action.confirm.delete', { name: item.words }) }}
+            </confirm-dialog>
+          </v-list-item-action>
+        </template>
       </v-list-item>
     </v-list>
   </layout>
diff --git a/apps/admin/src/views/locales/synonym-sets/browse.vue b/apps/admin/src/views/locales/synonym-sets/browse.vue
index dbcc338d92..9484e30110 100644
--- a/apps/admin/src/views/locales/synonym-sets/browse.vue
+++ b/apps/admin/src/views/locales/synonym-sets/browse.vue
@@ -1,46 +1,45 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="save">
-    <v-toolbar bottom color="grey lighten-5" flat tile>
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="save">
+    <v-toolbar color="grey-lighten-4" flat tile>
       <v-toolbar-title class="font-weight-medium">
         {{ $t('locales.synonym-sets.title') }}
       </v-toolbar-title>
       <v-spacer />
       <v-btn
-        class="ml-3"
         color="primary"
-        fab
-        small
+        icon="$add"
+        size="small"
         :title="$t('locales.synonym-sets.add')"
         @click.stop="add"
-      >
-        <v-icon>$add</v-icon>
-      </v-btn>
+      />
     </v-toolbar>
-    <v-list>
-      <v-list-item v-for="(item, idx) in form.items" :key="idx" class="list-item-border">
-        <v-list-item-avatar>
+    <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>
-        </v-list-item-avatar>
-        <v-list-item-content>
-          <v-text-field
-            v-model.trim="item.synonyms"
-            hide-details="auto"
-            :label="$t('locales.synonym-sets.synonyms')"
-            name="synonyms"
-            outlined
-          />
-        </v-list-item-content>
-        <v-list-item-action>
-          <confirm-dialog
-            color="error"
-            icon
-            icon-left="$delete"
-            :label="$t('locales.synonym-sets.remove').toString()"
-            @confirm="remove(idx)"
-          >
-            {{ $t('common.action.confirm.delete', { name: item.synonyms }) }}
-          </confirm-dialog>
-        </v-list-item-action>
+        </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"
+          variant="outlined"
+        />
+        <template #append>
+          <v-list-item-action>
+            <confirm-dialog
+              color="error"
+              icon
+              icon-left="$delete"
+              :label="$t('locales.synonym-sets.remove')"
+              @confirm="remove(idx)"
+            >
+              {{ $t('common.action.confirm.delete', { name: item.synonyms }) }}
+            </confirm-dialog>
+          </v-list-item-action>
+        </template>
       </v-list-item>
     </v-list>
   </layout>
diff --git a/apps/admin/src/views/locales/tasks/browse.vue b/apps/admin/src/views/locales/tasks/browse.vue
index ac1f45b057..7e67bdedc3 100644
--- a/apps/admin/src/views/locales/tasks/browse.vue
+++ b/apps/admin/src/views/locales/tasks/browse.vue
@@ -1,7 +1,7 @@
 <template>
   <layout v-bind="{ id, entry }">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-row>
           <v-col cols="12" md="6">
             <v-card-title>{{ $t('locales.tasks.title') }}</v-card-title>
@@ -12,9 +12,9 @@
                 :items="jobTypeList"
                 :label="$t('locales.tasks._')"
                 name="job"
-                outlined
                 prepend-inner-icon="$jobs"
-                @change="updateJob"
+                variant="outlined"
+                @update:model-value="updateJob"
               />
             </v-card-text>
           </v-col>
@@ -27,7 +27,7 @@
               :errors="form.errors"
               name="params"
               :refs="refs"
-              @input="form.errors.clear(paramErrors)"
+              @update:model-value="form.errors.clear(paramErrors)"
             />
           </v-col>
         </v-row>
@@ -37,13 +37,11 @@
               block
               color="primary"
               :disabled="form.errors.any() || jobInProgress || isAppLoading"
+              size="x-large"
               :title="$t('common.action.upload')"
               type="submit"
-              x-large
             >
-              <v-icon left>
-                fas fa-play
-              </v-icon>{{ $t('common.action.submit') }}
+              <v-icon icon="fas fa-play" start />{{ $t('common.action.submit') }}
             </v-btn>
           </v-col>
         </v-row>
@@ -80,7 +78,7 @@ export default defineComponent({
     const { i18n } = useI18n();
 
     const jobTypeList = computed(() =>
-      localeJobs.map(value => ({ value, text: i18n.t(`jobs.types.${value}._`) })),
+      localeJobs.map(value => ({ value, title: i18n.t(`jobs.types.${value}._`) })),
     );
     const jobQuery = computed(() => ({ localeId: props.id }));
 
diff --git a/apps/admin/src/views/nutrient-tables/browse.vue b/apps/admin/src/views/nutrient-tables/browse.vue
index 8c3aaafa76..f84130c509 100644
--- a/apps/admin/src/views/nutrient-tables/browse.vue
+++ b/apps/admin/src/views/nutrient-tables/browse.vue
@@ -2,37 +2,30 @@
   <data-table :headers="headers" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'NutrientTableList' });
 
-export default defineComponent({
-  name: 'NutrientTableList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('common.description'),
-          sortable: true,
-          value: 'description',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.id'),
+    sortable: true,
+    key: 'id',
+  },
+  {
+    title: t('common.description'),
+    sortable: true,
+    key: 'description',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/nutrient-tables/form.vue b/apps/admin/src/views/nutrient-tables/form.vue
index 90e79da797..638677772c 100644
--- a/apps/admin/src/views/nutrient-tables/form.vue
+++ b/apps/admin/src/views/nutrient-tables/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-title>{{ $t('nutrient-tables._') }}</v-card-title>
         <v-card-text>
           <v-row>
@@ -13,7 +13,7 @@
                 hide-details="auto"
                 :label="$t('common.id')"
                 name="id"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -23,8 +23,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -39,7 +39,7 @@
                 hide-details="auto"
                 :label="$t('nutrient-tables.mapping.source.idColumnOffset')"
                 name="csvMapping.idColumnOffset"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -49,7 +49,7 @@
                 hide-details="auto"
                 :label="$t('nutrient-tables.mapping.source.descriptionColumnOffset')"
                 name="csvMapping.descriptionColumnOffset"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -59,7 +59,7 @@
                 hide-details="auto"
                 :label="$t('nutrient-tables.mapping.source.localDescriptionColumnOffset')"
                 name="csvMapping.localDescriptionColumnOffset"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -69,7 +69,7 @@
                 hide-details="auto"
                 :label="$t('nutrient-tables.mapping.source.rowOffset')"
                 name="csvMapping.rowOffset"
-                outlined
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -81,21 +81,18 @@
           <v-spacer />
           <v-btn
             color="primary"
-            outlined
             rounded
             :title="$t('nutrient-tables.mapping.fields.create')"
             @click.stop="addField"
           >
-            <v-icon left>
-              $add
-            </v-icon>{{ $t('nutrient-tables.mapping.fields.create') }}
+            <v-icon icon="$add" start />{{ $t('nutrient-tables.mapping.fields.create') }}
           </v-btn>
         </v-toolbar>
         <v-card-text>
-          <v-alert v-if="form.errors.has('csvMappingFields')" border="left" outlined type="error">
+          <v-alert v-if="form.errors.has('csvMappingFields')" border="start" type="error">
             {{ form.errors.get('csvMappingFields') }}
           </v-alert>
-          <v-simple-table>
+          <v-table>
             <thead>
               <tr>
                 <th>{{ $t('nutrient-tables.mapping.fields.fieldName') }}</th>
@@ -108,37 +105,35 @@
                 <td class="py-2">
                   <v-text-field
                     v-model="field.fieldName"
-                    dense
+                    density="compact"
                     hide-details="auto"
                     :label="$t('nutrient-tables.mapping.fields.fieldName')"
-                    name="fieldName"
-                    outlined
+                    :name="`fieldName-${idx}`"
+                    variant="outlined"
                   />
                 </td>
                 <td class="py-2">
                   <v-text-field
                     v-model="field.columnOffset"
-                    dense
+                    density="compact"
                     hide-details="auto"
                     :label="$t('nutrient-tables.mapping.fields.columnOffset')"
-                    name="columnOffset"
-                    outlined
+                    :name="`field-columnOffset-${idx}`"
+                    variant="outlined"
                   />
                 </td>
                 <td class="py-2">
                   <v-btn
-                    icon
+                    color="error"
+                    icon="$delete"
                     :title="$t('nutrient-tables.mapping.fields.delete')"
+                    variant="text"
                     @click="removeField(idx)"
-                  >
-                    <v-icon color="error">
-                      $delete
-                    </v-icon>
-                  </v-btn>
+                  />
                 </td>
               </tr>
             </tbody>
-          </v-simple-table>
+          </v-table>
         </v-card-text>
         <v-toolbar flat tile>
           <v-toolbar-title>
@@ -147,26 +142,22 @@
           <v-spacer />
           <v-btn
             color="primary"
-            outlined
             rounded
             :title="$t('nutrient-tables.mapping.nutrients.create')"
             @click.stop="addNutrient"
           >
-            <v-icon left>
-              $add
-            </v-icon>{{ $t('nutrient-tables.mapping.nutrients.create') }}
+            <v-icon icon="$add" start />{{ $t('nutrient-tables.mapping.nutrients.create') }}
           </v-btn>
         </v-toolbar>
         <v-card-text>
           <v-alert
             v-if="form.errors.has('csvMappingNutrients')"
-            border="left"
-            outlined
+            border="start"
             type="error"
           >
             {{ form.errors.get('csvMappingNutrients') }}
           </v-alert>
-          <v-simple-table>
+          <v-table>
             <thead>
               <tr>
                 <th>{{ $t('nutrient-tables.mapping.nutrients.nutrient') }}</th>
@@ -175,40 +166,38 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(nutrient, idx) in nutrients.items" :key="`csv-mapping-nutrients-${idx}`">
+              <tr v-for="(nutrient, idx) in nutrients" :key="nutrient.nutrientTypeId">
                 <td class="py-2">
                   <v-select
                     v-model="nutrient.nutrientTypeId"
-                    dense
+                    density="compact"
                     hide-details="auto"
-                    item-text="description"
+                    item-title="description"
                     item-value="id"
                     :items="refs.nutrientTypes"
                     :label="$t('nutrient-tables.mapping.nutrients.nutrient')"
-                    name="nutrient"
-                    outlined
+                    :name="`nutrient-${idx}`"
+                    variant="outlined"
                   />
                 </td>
                 <td class="py-2">
                   <v-text-field
                     v-model="nutrient.columnOffset"
-                    dense
+                    density="compact"
                     hide-details="auto"
                     :label="$t('nutrient-tables.mapping.nutrients.columnOffset')"
-                    name="columnOffset"
-                    outlined
+                    :name="`nutrient-columnOffset-${idx}`"
+                    variant="outlined"
                   />
                 </td>
                 <td class="py-2">
                   <v-btn
-                    icon
+                    color="error"
+                    icon="$delete"
                     :title="$t('nutrient-tables.mapping.nutrients.delete')"
+                    variant="text"
                     @click="removeNutrient(idx)"
-                  >
-                    <v-icon color="error">
-                      $delete
-                    </v-icon>
-                  </v-btn>
+                  />
                 </td>
               </tr>
               <v-skeleton-loader
@@ -217,7 +206,7 @@
                 type="table-row"
               />
             </tbody>
-          </v-simple-table>
+          </v-table>
         </v-card-text>
         <v-card-text>
           <submit-footer :disabled="form.errors.any()" />
@@ -228,7 +217,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref, watch } from 'vue';
 
 import type { NutrientTableEntry, NutrientTableRefs } from '@intake24/common/types/http/admin';
 import { formMixin } from '@intake24/admin/components/entry';
@@ -334,82 +323,71 @@ export default defineComponent({
       config: { transform: transformOut },
     });
 
+    const chunk = 10;
+    const nutrients = ref<CsvMappingNutrient[]>([]);
+
+    const nutrientsAvailableToLoad = computed(() => nutrients.value.length < form.data.csvMappingNutrients.length);
+
+    function loadMoreNutrients(isIntersecting: boolean) {
+      if (!isIntersecting || !nutrientsAvailableToLoad.value)
+        return;
+
+      const startIndex = nutrients.value.length;
+      const endIndex
+          = startIndex + chunk > form.data.csvMappingNutrients.length
+            ? form.data.csvMappingNutrients.length
+            : startIndex + chunk;
+
+      const items = form.csvMappingNutrients.slice(startIndex, endIndex);
+      nutrients.value.push(...items);
+    };
+
+    function addField() {
+      form.csvMappingFields.push({ fieldName: 'new_field', columnOffset: 'A' });
+    };
+
+    function removeField(index: number) {
+      form.csvMappingFields.splice(index, 1);
+    };
+
+    function addNutrient() {
+      form.csvMappingNutrients.push({
+        nutrientTypeId: refs.value.nutrientTypes[0].id,
+        columnOffset: 'A',
+      });
+    };
+
+    function removeNutrient(index: number) {
+      form.csvMappingNutrients.splice(index, 1);
+    };
+
+    watch(() => form.csvMappingFields, () => {
+      form.errors.clear('csvMappingFields');
+    });
+
+    watch(() => form.data.csvMappingNutrients, () => {
+      form.errors.clear('csvMappingNutrients');
+    });
+
     return {
+      addField,
+      addNutrient,
       entry,
       entryLoaded,
       isEdit,
+      loadMoreNutrients,
+      nutrientsAvailableToLoad,
+      nutrients,
       refs,
       refsLoaded,
       clearError,
       form,
+      removeField,
+      removeNutrient,
       routeLeave,
       submit,
     };
   },
-
-  data() {
-    return {
-      nutrients: {
-        chunk: 10,
-        items: [] as CsvMappingNutrient[],
-      },
-    };
-  },
-
-  computed: {
-    nutrientsAvailableToLoad(): boolean {
-      return this.nutrients.items.length < this.form.csvMappingNutrients.length;
-    },
-  },
-
-  watch: {
-    'form.csvMappingFields': {
-      handler() {
-        this.form.errors.clear('csvMappingFields');
-      },
-      deep: true,
-    },
-    'form.csvMappingNutrients': {
-      handler() {
-        this.form.errors.clear('csvMappingNutrients');
-      },
-      deep: true,
-    },
-  },
-
-  methods: {
-    loadMoreNutrients(entries: IntersectionObserverEntry[]) {
-      if (entries[0].isIntersecting && this.nutrientsAvailableToLoad) {
-        const startIndex = this.nutrients.items.length;
-        const endIndex
-          = startIndex + this.nutrients.chunk > this.form.csvMappingNutrients.length
-            ? this.form.csvMappingNutrients.length
-            : startIndex + this.nutrients.chunk;
-
-        const items = this.form.csvMappingNutrients.slice(startIndex, endIndex);
-        this.nutrients.items.push(...items);
-      }
-    },
-
-    addField() {
-      this.form.csvMappingFields.push({ fieldName: 'new_field', columnOffset: 'A' });
-    },
-
-    removeField(index: number) {
-      this.form.csvMappingFields.splice(index, 1);
-    },
-
-    addNutrient() {
-      this.form.csvMappingNutrients.push({
-        nutrientTypeId: this.refs.nutrientTypes[0].id,
-        columnOffset: 'A',
-      });
-    },
-
-    removeNutrient(index: number) {
-      this.form.csvMappingNutrients.splice(index, 1);
-    },
-  },
 });
 </script>
 
diff --git a/apps/admin/src/views/nutrient-tables/read.vue b/apps/admin/src/views/nutrient-tables/read.vue
index 1769cd31ed..fb6eb0da71 100644
--- a/apps/admin/src/views/nutrient-tables/read.vue
+++ b/apps/admin/src/views/nutrient-tables/read.vue
@@ -1,7 +1,7 @@
 <template>
   <layout v-if="entryLoaded && refsLoaded" v-bind="{ id, entry }">
     <v-card-title>{{ $t('nutrient-tables._') }}</v-card-title>
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.id') }}</th>
@@ -12,9 +12,9 @@
           <td>{{ entry.description }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
     <v-card-title>{{ $t('nutrient-tables.mapping.source._') }}</v-card-title>
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('nutrient-tables.mapping.source.idColumnOffset') }}</th>
@@ -33,9 +33,9 @@
           <td>{{ entry.csvMapping.rowOffset }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
     <v-card-title>{{ $t('nutrient-tables.mapping.fields._') }}</v-card-title>
-    <v-simple-table>
+    <v-table>
       <thead>
         <tr>
           <th>{{ $t('nutrient-tables.mapping.fields.fieldName') }}</th>
@@ -48,9 +48,9 @@
           <td>{{ offsetToExcelColumn(field.columnOffset) }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
     <v-card-title>{{ $t('nutrient-tables.mapping.nutrients._') }}</v-card-title>
-    <v-simple-table>
+    <v-table>
       <thead>
         <tr>
           <th>{{ $t('nutrient-tables.mapping.nutrients.nutrient') }}</th>
@@ -63,7 +63,7 @@
           <td>{{ offsetToExcelColumn(nutrient.columnOffset) }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/nutrient-tables/tasks/browse.vue b/apps/admin/src/views/nutrient-tables/tasks/browse.vue
index bc7f9cd48e..2e8fe1eacc 100644
--- a/apps/admin/src/views/nutrient-tables/tasks/browse.vue
+++ b/apps/admin/src/views/nutrient-tables/tasks/browse.vue
@@ -1,7 +1,7 @@
 <template>
   <layout v-bind="{ id, entry }">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-row>
           <v-col cols="12" md="6">
             <v-card-title>{{ $t('nutrient-tables.tasks.title') }}</v-card-title>
@@ -12,9 +12,9 @@
                 :items="jobTypeList"
                 :label="$t('nutrient-tables.tasks._')"
                 name="job"
-                outlined
                 prepend-inner-icon="$jobs"
-                @change="updateJob"
+                variant="outlined"
+                @update:model-value="updateJob"
               />
             </v-card-text>
           </v-col>
@@ -27,7 +27,7 @@
               :errors="form.errors"
               name="params"
               :refs="refs"
-              @input="form.errors.clear(paramErrors)"
+              @update:model-value="form.errors.clear(paramErrors)"
             />
           </v-col>
         </v-row>
@@ -37,13 +37,11 @@
               block
               color="primary"
               :disabled="form.errors.any() || jobInProgress || isAppLoading"
+              size="x-large"
               :title="$t('common.action.upload')"
               type="submit"
-              x-large
             >
-              <v-icon left>
-                fas fa-play
-              </v-icon>{{ $t('common.action.submit') }}
+              <v-icon icon="fas fa-play" start />{{ $t('common.action.submit') }}
             </v-btn>
           </v-col>
         </v-row>
@@ -84,7 +82,7 @@ export default defineComponent({
     const { i18n } = useI18n();
 
     const jobTypeList = computed(() =>
-      nutrientTableJobs.map(value => ({ value, text: i18n.t(`jobs.types.${value}._`) })),
+      nutrientTableJobs.map(value => ({ value, title: i18n.t(`jobs.types.${value}._`) })),
     );
     const jobQuery = computed(() => ({ nutrientTableId: props.id }));
 
diff --git a/apps/admin/src/views/nutrient-types/browse.vue b/apps/admin/src/views/nutrient-types/browse.vue
index 31bb849688..6cd111c270 100644
--- a/apps/admin/src/views/nutrient-types/browse.vue
+++ b/apps/admin/src/views/nutrient-types/browse.vue
@@ -6,42 +6,35 @@
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'NutrientTypeList' });
 
-export default defineComponent({
-  name: 'NutrientTypeList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('nutrient-types.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('common.description'),
-          sortable: true,
-          value: 'description',
-        },
-        {
-          text: this.$t('nutrient-units._'),
-          sortable: true,
-          value: 'unitId',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('nutrient-types.id'),
+    sortable: true,
+    key: 'id',
+  },
+  {
+    title: t('common.description'),
+    sortable: true,
+    key: 'description',
+  },
+  {
+    title: t('nutrient-units._'),
+    sortable: true,
+    key: 'unitId',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/nutrient-types/form.vue b/apps/admin/src/views/nutrient-types/form.vue
index aeb498c2c9..b2647c8a55 100644
--- a/apps/admin/src/views/nutrient-types/form.vue
+++ b/apps/admin/src/views/nutrient-types/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,8 +12,8 @@
                 hide-details="auto"
                 :label="$t('nutrient-types.id')"
                 name="id"
-                outlined
                 prepend-inner-icon="$nutrient-types"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -23,8 +23,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -32,14 +32,14 @@
                 v-model="form.unitId"
                 :error-messages="form.errors.get('unitId')"
                 hide-details="auto"
-                item-text="description"
+                item-title="description"
                 item-value="id"
                 :items="nutrientUnits"
                 :label="$t('nutrient-units._')"
                 name="unitId"
-                outlined
                 prepend-inner-icon="$nutrient-units"
-                @change="form.errors.clear('unitId')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('unitId')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -49,8 +49,8 @@
                 hide-details="auto"
                 :label="$t('nutrient-types.kcalPerUnit')"
                 name="kcalPerUnit"
-                outlined
                 prepend-inner-icon="fas fa-bolt"
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -108,7 +108,7 @@ export default defineComponent({
 
   computed: {
     nutrientUnits() {
-      const nutrientUnits = [{ id: null, description: this.$t('common.none').toString() }];
+      const nutrientUnits = [{ id: null, description: this.$t('common.none') }];
 
       if (!this.refs.units)
         return nutrientUnits;
diff --git a/apps/admin/src/views/nutrient-types/read.vue b/apps/admin/src/views/nutrient-types/read.vue
index 6726840ba1..08267e01da 100644
--- a/apps/admin/src/views/nutrient-types/read.vue
+++ b/apps/admin/src/views/nutrient-types/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('nutrient-types.id') }}</th>
@@ -19,7 +19,7 @@
           <td>{{ entry.kcalPerUnit || $t('common.none') }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/nutrient-units/browse.vue b/apps/admin/src/views/nutrient-units/browse.vue
index 71c796efd4..282f0f96e2 100644
--- a/apps/admin/src/views/nutrient-units/browse.vue
+++ b/apps/admin/src/views/nutrient-units/browse.vue
@@ -2,42 +2,35 @@
   <data-table :headers="headers" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'NutrientUnitList' });
 
-export default defineComponent({
-  name: 'NutrientUnitList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('nutrient-units.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('common.description'),
-          sortable: true,
-          value: 'description',
-        },
-        {
-          text: this.$t('nutrient-units.symbol'),
-          sortable: true,
-          value: 'symbol',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('nutrient-units.id'),
+    sortable: true,
+    key: 'id',
+  },
+  {
+    title: t('common.description'),
+    sortable: true,
+    key: 'description',
+  },
+  {
+    title: t('nutrient-units.symbol'),
+    sortable: true,
+    key: 'symbol',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/nutrient-units/form.vue b/apps/admin/src/views/nutrient-units/form.vue
index 853de9fbb9..446a888d08 100644
--- a/apps/admin/src/views/nutrient-units/form.vue
+++ b/apps/admin/src/views/nutrient-units/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,8 +12,8 @@
                 hide-details="auto"
                 :label="$t('nutrient-units.id')"
                 name="id"
-                outlined
                 prepend-inner-icon="$nutrient-units"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -23,8 +23,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -34,8 +34,8 @@
                 hide-details="auto"
                 :label="$t('nutrient-units.symbol')"
                 name="symbol"
-                outlined
-                prepend-inner-icon="fa-square-root-variable"
+                prepend-inner-icon="fas fa-square-root-variable"
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/nutrient-units/read.vue b/apps/admin/src/views/nutrient-units/read.vue
index f268cb8354..fd5e6d9058 100644
--- a/apps/admin/src/views/nutrient-units/read.vue
+++ b/apps/admin/src/views/nutrient-units/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('nutrient-units.id') }}</th>
@@ -15,7 +15,7 @@
           <td>{{ entry.symbol }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/permissions/browse.vue b/apps/admin/src/views/permissions/browse.vue
index cd00146519..732dad9960 100644
--- a/apps/admin/src/views/permissions/browse.vue
+++ b/apps/admin/src/views/permissions/browse.vue
@@ -1,47 +1,42 @@
 <template>
   <data-table :headers="headers">
     <template #[`item.createdAt`]="{ item }">
-      {{ new Date(item.createdAt).toLocaleString() }}
+      {{ formatDateTime(item.createdAt) }}
     </template>
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useDateTime } from '@intake24/admin/composables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'PermissionList' });
 
-export default defineComponent({
-  name: 'PermissionList',
+const { i18n: { t } } = useI18n();
+const { formatDateTime } = useDateTime();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('common.displayName'),
-          sortable: true,
-          value: 'displayName',
-        },
-        {
-          text: this.$t('common.createdAt'),
-          sortable: true,
-          value: 'createdAt',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.name'),
+    sortable: true,
+    key: 'name',
+  },
+  {
+    title: t('common.displayName'),
+    sortable: true,
+    key: 'displayName',
+  },
+  {
+    title: t('common.createdAt'),
+    sortable: true,
+    key: 'createdAt',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/permissions/form.vue b/apps/admin/src/views/permissions/form.vue
index 7c6f0fb8bf..420626a734 100644
--- a/apps/admin/src/views/permissions/form.vue
+++ b/apps/admin/src/views/permissions/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12">
@@ -12,7 +12,7 @@
                 hide-details="auto"
                 :label="$t('common.name')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
@@ -22,7 +22,7 @@
                 hide-details="auto"
                 :label="$t('common.displayName')"
                 name="displayName"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
@@ -32,8 +32,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/permissions/read.vue b/apps/admin/src/views/permissions/read.vue
index d9ffb50003..2cf1d67234 100644
--- a/apps/admin/src/views/permissions/read.vue
+++ b/apps/admin/src/views/permissions/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.name') }}</th>
@@ -15,7 +15,7 @@
           <td>{{ entry.description }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/permissions/roles/browse.vue b/apps/admin/src/views/permissions/roles/browse.vue
index 9f09489d83..564e1fadbe 100644
--- a/apps/admin/src/views/permissions/roles/browse.vue
+++ b/apps/admin/src/views/permissions/roles/browse.vue
@@ -18,7 +18,7 @@
 import { defineComponent } from 'vue';
 
 import type { PermissionEntry } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { Edit, Read } from '@intake24/admin/components/data-tables/action-bar';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch } from '@intake24/admin/composables';
@@ -37,10 +37,10 @@ export default defineComponent({
     const user = useUser();
 
     const actions = ['read', 'edit'].filter(action => user.can(`roles|${action}`));
-    const headers = [
-      { text: i18n.t('common.name'), sortable: true, value: 'name' },
-      { text: i18n.t('common.displayName'), sortable: true, value: 'displayName' },
-      { text: i18n.t('common.action._'), sortable: false, value: 'action', align: 'right' },
+    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);
diff --git a/apps/admin/src/views/permissions/users/browse.vue b/apps/admin/src/views/permissions/users/browse.vue
index 739e52591e..40bb9102a2 100644
--- a/apps/admin/src/views/permissions/users/browse.vue
+++ b/apps/admin/src/views/permissions/users/browse.vue
@@ -18,7 +18,7 @@
 import { defineComponent } from 'vue';
 
 import type { PermissionEntry } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { Edit, Read } from '@intake24/admin/components/data-tables/action-bar';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch } from '@intake24/admin/composables';
@@ -38,10 +38,10 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`users|${action}`));
 
-    const headers = [
-      { text: i18n.t('users.name'), sortable: true, value: 'name' },
-      { text: i18n.t('common.email'), sortable: true, value: 'email' },
-      { text: i18n.t('common.action._'), sortable: false, value: 'action', align: 'right' },
+    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);
diff --git a/apps/admin/src/views/roles/browse.vue b/apps/admin/src/views/roles/browse.vue
index 204f882a9d..4a9ebd2c26 100644
--- a/apps/admin/src/views/roles/browse.vue
+++ b/apps/admin/src/views/roles/browse.vue
@@ -1,47 +1,42 @@
 <template>
   <data-table :headers="headers">
     <template #[`item.createdAt`]="{ item }">
-      {{ new Date(item.createdAt).toLocaleString() }}
+      {{ formatDateTime(item.createdAt) }}
     </template>
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useDateTime } from '@intake24/admin/composables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'RoleList' });
 
-export default defineComponent({
-  name: 'RoleList',
+const { i18n: { t } } = useI18n();
+const { formatDateTime } = useDateTime();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('common.displayName'),
-          sortable: true,
-          value: 'displayName',
-        },
-        {
-          text: this.$t('common.createdAt'),
-          sortable: true,
-          value: 'createdAt',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.name'),
+    sortable: true,
+    key: 'name',
+  },
+  {
+    title: t('common.displayName'),
+    sortable: true,
+    key: 'displayName',
+  },
+  {
+    title: t('common.createdAt'),
+    sortable: true,
+    key: 'createdAt',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/roles/form.vue b/apps/admin/src/views/roles/form.vue
index e4c49c3a1b..31d8a8c533 100644
--- a/apps/admin/src/views/roles/form.vue
+++ b/apps/admin/src/views/roles/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12">
@@ -12,7 +12,7 @@
                 hide-details="auto"
                 :label="$t('common.name')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
@@ -22,7 +22,7 @@
                 hide-details="auto"
                 :label="$t('common.displayName')"
                 name="displayName"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
@@ -32,8 +32,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -57,11 +57,11 @@
               </v-card>
             </v-col>
           </v-row>
-          <template v-for="group in ['resources', 'surveys', 'fdbs']">
-            <v-card-title :key="`${group}-title`" cols="12">
+          <template v-for="group in ['resources', 'surveys', 'fdbs']" :key="`${group}-title`">
+            <v-card-title cols="12">
               <v-card-title>{{ $t(`permissions.groups.${group}`) }}</v-card-title>
             </v-card-title>
-            <v-row :key="`${group}-content`">
+            <v-row>
               <v-col v-for="(pModule, key) in permissions[group]" :key="key" cols="4">
                 <v-card height="100%">
                   <v-card-title>
diff --git a/apps/admin/src/views/roles/permissions/browse.vue b/apps/admin/src/views/roles/permissions/browse.vue
index 0600019a6e..392b9de2c8 100644
--- a/apps/admin/src/views/roles/permissions/browse.vue
+++ b/apps/admin/src/views/roles/permissions/browse.vue
@@ -18,7 +18,7 @@
 import { defineComponent } from 'vue';
 
 import type { RoleEntry } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { Edit, Read } from '@intake24/admin/components/data-tables/action-bar';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch } from '@intake24/admin/composables';
@@ -38,10 +38,10 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`permissions|${action}`));
 
-    const headers = [
-      { text: i18n.t('common.name'), sortable: true, value: 'name' },
-      { text: i18n.t('common.displayName'), sortable: true, value: 'displayName' },
-      { text: i18n.t('common.action._'), sortable: false, value: 'action', align: 'right' },
+    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);
diff --git a/apps/admin/src/views/roles/read.vue b/apps/admin/src/views/roles/read.vue
index 5a536cd7fc..24264fbf6c 100644
--- a/apps/admin/src/views/roles/read.vue
+++ b/apps/admin/src/views/roles/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.name') }}</th>
@@ -15,7 +15,7 @@
           <td>{{ entry.description }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/roles/users/browse.vue b/apps/admin/src/views/roles/users/browse.vue
index b6dd5e182e..3db69a18dd 100644
--- a/apps/admin/src/views/roles/users/browse.vue
+++ b/apps/admin/src/views/roles/users/browse.vue
@@ -18,7 +18,7 @@
 import { defineComponent } from 'vue';
 
 import type { RoleEntry } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { Edit, Read } from '@intake24/admin/components/data-tables/action-bar';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch } from '@intake24/admin/composables';
@@ -38,10 +38,10 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`users|${action}`));
 
-    const headers = [
-      { text: i18n.t('users.name'), sortable: true, value: 'name' },
-      { text: i18n.t('common.email'), sortable: true, value: 'email' },
-      { text: i18n.t('common.action._'), sortable: false, value: 'action', align: 'right' },
+    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);
diff --git a/apps/admin/src/views/sign-in-logs/browse.vue b/apps/admin/src/views/sign-in-logs/browse.vue
index d83deec579..76e1fc6049 100644
--- a/apps/admin/src/views/sign-in-logs/browse.vue
+++ b/apps/admin/src/views/sign-in-logs/browse.vue
@@ -14,66 +14,52 @@
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import { DataTable } from '@intake24/admin/components/data-tables';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useDateTime } from '@intake24/admin/composables';
+import { useI18n } from '@intake24/i18n';
 
-export default defineComponent({
-  name: 'SignInLogList',
-
-  components: { DataTable },
+defineOptions({ name: 'SignInLogList' });
 
-  setup() {
-    const { formatDateTime } = useDateTime();
+const { i18n: { t } } = useI18n();
+const { formatDateTime } = useDateTime();
 
-    return {
-      formatDateTime,
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.id'),
+    sortable: true,
+    key: 'id',
   },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('users.id'),
-          sortable: true,
-          value: 'userId',
-        },
-        {
-          text: this.$t('sign-in-logs.provider'),
-          sortable: true,
-          value: 'provider',
-        },
-        {
-          text: this.$t('sign-in-logs.providerKey'),
-          sortable: true,
-          value: 'providerKey',
-        },
-        {
-          text: this.$t('sign-in-logs.successful'),
-          sortable: false,
-          value: 'successful',
-        },
-        {
-          text: this.$t('sign-in-logs.date'),
-          sortable: true,
-          value: 'date',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+  {
+    title: t('users.id'),
+    sortable: true,
+    key: 'userId',
+  },
+  {
+    title: t('sign-in-logs.provider'),
+    sortable: true,
+    key: 'provider',
+  },
+  {
+    title: t('sign-in-logs.providerKey'),
+    sortable: true,
+    key: 'providerKey',
+  },
+  {
+    title: t('sign-in-logs.successful'),
+    sortable: false,
+    key: 'successful',
+  },
+  {
+    title: t('sign-in-logs.date'),
+    sortable: true,
+    key: 'date',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/sign-in-logs/read.vue b/apps/admin/src/views/sign-in-logs/read.vue
index fc6113c043..d3254dc046 100644
--- a/apps/admin/src/views/sign-in-logs/read.vue
+++ b/apps/admin/src/views/sign-in-logs/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.id') }}</th>
@@ -53,7 +53,7 @@
           </td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/standard-units/browse.vue b/apps/admin/src/views/standard-units/browse.vue
index 7e17fd1e2c..d734e05ce9 100644
--- a/apps/admin/src/views/standard-units/browse.vue
+++ b/apps/admin/src/views/standard-units/browse.vue
@@ -2,37 +2,30 @@
   <data-table :headers="headers" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'StandardUnitList' });
 
-export default defineComponent({
-  name: 'StandardUnitList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('standard-units.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('common.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('standard-units.id'),
+    sortable: true,
+    key: 'id',
+  },
+  {
+    title: t('common.name'),
+    sortable: true,
+    key: 'name',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    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 58aeaec67f..918a56acca 100644
--- a/apps/admin/src/views/standard-units/categories/browse.vue
+++ b/apps/admin/src/views/standard-units/categories/browse.vue
@@ -20,10 +20,11 @@
 import { defineComponent, ref } from 'vue';
 
 import type { StandardUnitAttributes } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { Read } from '@intake24/admin/components/data-tables/action-bar';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch } from '@intake24/admin/composables';
+import { useI18n } from '@intake24/i18n';
 
 export default defineComponent({
   name: 'StandardUnitCategories',
@@ -33,50 +34,49 @@ export default defineComponent({
   mixins: [detailMixin],
 
   setup(props) {
+    const { i18n: { t } } = useI18n();
+
     const { entry, entryLoaded } = useEntry<StandardUnitAttributes>(props);
     useEntryFetch(props);
 
+    const headers: DataTableHeader[] = [
+      {
+        title: t('fdbs.categories.global.code'),
+        sortable: true,
+        key: 'categoryCode',
+      },
+      {
+        title: t('locales.code'),
+        sortable: true,
+        key: 'localeCode',
+      },
+      {
+        title: t('fdbs.categories.local.id'),
+        sortable: true,
+        key: 'id',
+      },
+      {
+        title: t('fdbs.categories.local.name'),
+        sortable: true,
+        key: 'name',
+      },
+      {
+        title: t('common.action._'),
+        sortable: false,
+        key: 'action',
+        align: 'end',
+      },
+    ];
+
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
 
     const updateTable = async () => {
       await table.value?.fetch();
     };
 
-    return { entry, entryLoaded, table, updateTable };
+    return { headers, entry, entryLoaded, table, updateTable };
   },
 
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('fdbs.categories.global.code'),
-          sortable: true,
-          value: 'categoryCode',
-        },
-        {
-          text: this.$t('locales.code'),
-          sortable: true,
-          value: 'localeCode',
-        },
-        {
-          text: this.$t('fdbs.categories.local.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('fdbs.categories.local.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
-  },
 });
 </script>
 
diff --git a/apps/admin/src/views/standard-units/foods/browse.vue b/apps/admin/src/views/standard-units/foods/browse.vue
index a82b285655..fdd2c03c31 100644
--- a/apps/admin/src/views/standard-units/foods/browse.vue
+++ b/apps/admin/src/views/standard-units/foods/browse.vue
@@ -20,10 +20,11 @@
 import { defineComponent, ref } from 'vue';
 
 import type { StandardUnitAttributes } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { Read } from '@intake24/admin/components/data-tables/action-bar';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch } from '@intake24/admin/composables';
+import { useI18n } from '@intake24/i18n';
 
 export default defineComponent({
   name: 'StandardUnitFoods',
@@ -33,49 +34,46 @@ export default defineComponent({
   mixins: [detailMixin],
 
   setup(props) {
+    const { i18n: { t } } = useI18n();
     const { entry, entryLoaded } = useEntry<StandardUnitAttributes>(props);
     useEntryFetch(props);
 
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
 
+    const headers: DataTableHeader[] = [
+      {
+        title: t('fdbs.foods.global.code'),
+        sortable: true,
+        key: 'foodCode',
+      },
+      {
+        title: t('locales.code'),
+        sortable: true,
+        key: 'localeCode',
+      },
+      {
+        title: t('fdbs.foods.local.id'),
+        sortable: true,
+        key: 'id',
+      },
+      {
+        title: t('fdbs.foods.local.name'),
+        sortable: true,
+        key: 'name',
+      },
+      {
+        title: t('common.action._'),
+        sortable: false,
+        key: 'action',
+        align: 'end',
+      },
+    ];
+
     const updateTable = async () => {
       await table.value?.fetch();
     };
 
-    return { entry, entryLoaded, table, updateTable };
-  },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('fdbs.foods.global.code'),
-          sortable: true,
-          value: 'foodCode',
-        },
-        {
-          text: this.$t('locales.code'),
-          sortable: true,
-          value: 'localeCode',
-        },
-        {
-          text: this.$t('fdbs.foods.local.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('fdbs.foods.local.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+    return { entry, entryLoaded, headers, table, updateTable };
   },
 });
 </script>
diff --git a/apps/admin/src/views/standard-units/form.vue b/apps/admin/src/views/standard-units/form.vue
index 260f3c4870..a2e49ded0a 100644
--- a/apps/admin/src/views/standard-units/form.vue
+++ b/apps/admin/src/views/standard-units/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,8 +12,8 @@
                 hide-details="auto"
                 :label="$t('standard-units.id')"
                 name="id"
-                outlined
                 prepend-inner-icon="$standard-units"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -23,24 +23,24 @@
                 hide-details="auto"
                 :label="$t('common.name')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12">
               <language-selector
                 v-model="form.estimateIn"
-                :label="$t('standard-units.estimateIn').toString()"
+                border
+                :label="$t('standard-units.estimateIn')"
                 required
               >
-                <template v-for="lang in Object.keys(form.estimateIn)" #[`lang.${lang}`]>
+                <template v-for="lang in Object.keys(form.estimateIn)" :key="lang" #[`lang.${lang}`]>
                   <v-text-field
-                    :key="lang"
                     v-model="form.estimateIn[lang]"
                     :error-messages="form.errors.get(`estimateIn.${lang}`)"
                     hide-details="auto"
                     :name="`estimateIn.${lang}`"
-                    outlined
-                    @input="form.errors.clear(`estimateIn.${lang}`)"
+                    variant="outlined"
+                    @update:model-value="form.errors.clear(`estimateIn.${lang}`)"
                   />
                 </template>
               </language-selector>
@@ -48,18 +48,18 @@
             <v-col cols="12">
               <language-selector
                 v-model="form.howMany"
-                :label="$t('standard-units.howMany').toString()"
+                border
+                :label="$t('standard-units.howMany')"
                 required
               >
-                <template v-for="lang in Object.keys(form.howMany)" #[`lang.${lang}`]>
+                <template v-for="lang in Object.keys(form.howMany)" :key="lang" #[`lang.${lang}`]>
                   <v-text-field
-                    :key="lang"
                     v-model="form.howMany[lang]"
                     :error-messages="form.errors.get(`howMany.${lang}`)"
                     hide-details="auto"
                     :name="`howMany.${lang}`"
-                    outlined
-                    @input="form.errors.clear(`howMany.${lang}`)"
+                    variant="outlined"
+                    @update:model-value="form.errors.clear(`howMany.${lang}`)"
                   />
                 </template>
               </language-selector>
diff --git a/apps/admin/src/views/standard-units/read.vue b/apps/admin/src/views/standard-units/read.vue
index 542a8f71ca..47b30ca42b 100644
--- a/apps/admin/src/views/standard-units/read.vue
+++ b/apps/admin/src/views/standard-units/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('standard-units.id') }}</th>
@@ -19,7 +19,7 @@
           <td>{{ entry.howMany.en }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/survey-scheme-prompts/browse.vue b/apps/admin/src/views/survey-scheme-prompts/browse.vue
index a1f1151700..3d5145c07d 100644
--- a/apps/admin/src/views/survey-scheme-prompts/browse.vue
+++ b/apps/admin/src/views/survey-scheme-prompts/browse.vue
@@ -9,47 +9,40 @@
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'SchemePromptList' });
 
-export default defineComponent({
-  name: 'SchemePromptList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('survey-schemes.prompts.internal.id._'),
-          sortable: true,
-          value: 'promptId',
-        },
-        {
-          text: this.$t('survey-schemes.prompts.internal.name._'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('survey-schemes.prompts.type'),
-          sortable: false,
-          value: 'type',
-        },
-        {
-          text: this.$t('survey-schemes.prompts.component'),
-          sortable: false,
-          value: 'component',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('survey-schemes.prompts.internal.id._'),
+    sortable: true,
+    key: 'promptId',
+  },
+  {
+    title: t('survey-schemes.prompts.internal.name._'),
+    sortable: true,
+    key: 'name',
+  },
+  {
+    title: t('survey-schemes.prompts.type'),
+    sortable: false,
+    key: 'type',
+  },
+  {
+    title: t('survey-schemes.prompts.component'),
+    sortable: false,
+    key: 'component',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/survey-scheme-prompts/form.vue b/apps/admin/src/views/survey-scheme-prompts/form.vue
index 6a0190d566..ca63f9c67d 100644
--- a/apps/admin/src/views/survey-scheme-prompts/form.vue
+++ b/apps/admin/src/views/survey-scheme-prompts/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,7 +12,7 @@
                 :label="$t('survey-schemes.prompts.internal.id._')"
                 :messages="$t('survey-schemes.prompts.internal.id.hint')"
                 name="id"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -23,14 +23,12 @@
                 :label="$t('survey-schemes.prompts.internal.name._')"
                 :messages="$t('survey-schemes.prompts.internal.name.hint')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col align="center">
-              <v-btn class="pa-6" color="secondary" outlined x-large @click="edit">
-                <v-icon left>
-                  $edit
-                </v-icon>{{ $t('survey-scheme-prompts.editTemplate') }}
+              <v-btn class="pa-6" color="secondary" size="x-large" variant="outlined" @click="edit">
+                <v-icon icon="$edit" start />{{ $t('survey-scheme-prompts.editTemplate') }}
               </v-btn>
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/survey-scheme-prompts/read.vue b/apps/admin/src/views/survey-scheme-prompts/read.vue
index 6d8a895f2b..911f524504 100644
--- a/apps/admin/src/views/survey-scheme-prompts/read.vue
+++ b/apps/admin/src/views/survey-scheme-prompts/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('survey-schemes.prompts.internal.id._') }}</th>
@@ -19,9 +19,9 @@
           <td>{{ entry.prompt.type }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </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-scheme-prompts/sync.vue b/apps/admin/src/views/survey-scheme-prompts/sync.vue
index dbce5500ca..d95ebc82be 100644
--- a/apps/admin/src/views/survey-scheme-prompts/sync.vue
+++ b/apps/admin/src/views/survey-scheme-prompts/sync.vue
@@ -6,54 +6,54 @@
       }}
     </v-card-title>
     <v-card-text v-if="!schemes.length">
-      <v-alert color="secondary" text type="info">
+      <v-alert color="secondary" type="info">
         {{ $t(`survey-scheme-prompts.sync.noSchemes`) }}
       </v-alert>
     </v-card-text>
-    <v-list two-line>
+    <v-list lines="two">
       <v-list-item
         v-for="scheme in schemes"
         :key="scheme.id"
         :class="scheme.synced ? `green lighten-5` : `ternary`"
       >
-        <v-list-item-avatar>
+        <template #prepend>
           <v-icon>fas fa-route</v-icon>
-        </v-list-item-avatar>
-        <v-list-item-content>
-          <v-list-item-title class="mb-2">
-            {{ $t('survey-schemes._') }}: {{ scheme.name }}
-          </v-list-item-title>
-          <v-list-item-subtitle>
-            {{ $t('common.status') }}: {{ $t(`survey-scheme-prompts.sync.${scheme.synced}`) }}
-          </v-list-item-subtitle>
-        </v-list-item-content>
-        <v-list-item-action>
-          <v-icon
-            v-if="scheme.synced"
-            color="success"
-            large
-            :title="$t('survey-scheme-prompts.sync.true')"
-          >
-            fa-check-circle
-          </v-icon>
-          <confirm-dialog
-            v-else
-            color="warning"
-            icon
-            icon-left="$sync"
-            :label="$t('survey-scheme-prompts.sync.synchronize').toString()"
-            @confirm="sync(scheme)"
-          >
-            <template #activator="{ attrs, on }">
-              <v-btn v-bind="attrs" icon :title="$t('survey-scheme-prompts.sync.false')" v-on="on">
-                <v-icon color="warning" large>
-                  $sync
-                </v-icon>
-              </v-btn>
-            </template>
-            {{ $t('survey-scheme-prompts.sync.confirm') }}
-          </confirm-dialog>
-        </v-list-item-action>
+        </template>
+        <v-list-item-title class="mb-2">
+          {{ $t('survey-schemes._') }}: {{ scheme.name }}
+        </v-list-item-title>
+        <v-list-item-subtitle>
+          {{ $t('common.status') }}: {{ $t(`survey-scheme-prompts.sync.${scheme.synced}`) }}
+        </v-list-item-subtitle>
+        <template #append>
+          <v-list-item-action>
+            <v-icon
+              v-if="scheme.synced"
+              color="success"
+              size="large"
+              :title="$t('survey-scheme-prompts.sync.true')"
+            >
+              fa-check-circle
+            </v-icon>
+            <confirm-dialog
+              v-else
+              color="warning"
+              icon
+              icon-left="$sync"
+              :label="$t('survey-scheme-prompts.sync.synchronize')"
+              @confirm="sync(scheme)"
+            >
+              <template #activator="{ props }">
+                <v-btn v-bind="props" icon :title="$t('survey-scheme-prompts.sync.false')">
+                  <v-icon color="warning" size="large">
+                    $sync
+                  </v-icon>
+                </v-btn>
+              </template>
+              {{ $t('survey-scheme-prompts.sync.confirm') }}
+            </confirm-dialog>
+          </v-list-item-action>
+        </template>
       </v-list-item>
     </v-list>
   </layout>
diff --git a/apps/admin/src/views/survey-schemes/browse.vue b/apps/admin/src/views/survey-schemes/browse.vue
index ba66750821..c2ed845749 100644
--- a/apps/admin/src/views/survey-schemes/browse.vue
+++ b/apps/admin/src/views/survey-schemes/browse.vue
@@ -2,37 +2,30 @@
   <data-table :headers="headers" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'SurveySchemeList' });
 
-export default defineComponent({
-  name: 'SurveySchemeList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('survey-schemes.settings.types._'),
-          sortable: true,
-          value: 'settings.type',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.name'),
+    sortable: true,
+    key: 'name',
+  },
+  {
+    title: t('survey-schemes.settings.types._'),
+    sortable: true,
+    key: 'settings.type',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    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 315bf22fab..3ee2ef9817 100644
--- a/apps/admin/src/views/survey-schemes/data-export/browse.vue
+++ b/apps/admin/src/views/survey-schemes/data-export/browse.vue
@@ -1,47 +1,39 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-card-title>{{ $t('survey-schemes.data-export.title') }}</v-card-title>
     <v-card-text>
-      <ul>
-        <li>List of export sections to be exported</li>
-        <li>Export sections can be re-ordered using drag & drop</li>
-        <li>Each section can be modified to define specific fields and order for export</li>
-      </ul>
+      <p>List of export sections to be exported.</p>
+      <p>Export sections can be re-ordered using drag & drop.</p>
+      <p>Each section can be modified to define specific fields and order for export.</p>
     </v-card-text>
-    <v-toolbar color="grey lighten-2" flat tile>
+    <v-toolbar color="grey-lighten-2" flat tile>
       <v-toolbar-title class="font-weight-medium">
         {{ $t(`survey-schemes.data-export.sections._`) }}
       </v-toolbar-title>
       <v-spacer />
-      <v-menu v-if="availableSections.length" bottom :close-on-content-click="false" left offset-y>
-        <template #activator="{ on, attrs }">
-          <v-btn color="primary" fab small v-bind="attrs" :title="$t('survey-schemes.data-export.add')" v-on="on">
-            <v-icon>$add</v-icon>
-          </v-btn>
+      <v-menu v-if="availableSections.length" :close-on-content-click="false" location="bottom left">
+        <template #activator="{ props }">
+          <v-btn color="primary" icon="$add" size="small" :title="$t('survey-schemes.data-export.add')" v-bind="props" />
         </template>
-        <v-list dense>
+        <v-list density="compact">
           <v-list-item v-for="section in availableSections" :key="section.id" link>
-            <v-list-item-content>
-              <v-list-item-title>{{ section.text }}</v-list-item-title>
-            </v-list-item-content>
-            <v-list-item-action class="my-1">
-              <v-btn icon :title="$t('survey-schemes.data-export.add')">
-                <v-icon color="secondary lighten-1" @click.stop="add(section.id)">
-                  $add
-                </v-icon>
-              </v-btn>
-            </v-list-item-action>
+            <v-list-item-title>{{ section.title }}</v-list-item-title>
+            <template #append>
+              <v-list-item-action class="my-1">
+                <v-btn icon="$add" :title="$t('survey-schemes.data-export.add')" @click.stop="add(section.id)" />
+              </v-list-item-action>
+            </template>
           </v-list-item>
         </v-list>
       </v-menu>
       <options-menu>
-        <select-resource resource="survey-schemes" return-object="dataExport" @input="load">
-          <template #activator="{ attrs, on }">
-            <v-list-item v-bind="attrs" link v-on="on">
+        <select-resource resource="survey-schemes" return-object="dataExport" @update:model-value="load">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" link>
+              <template #prepend>
+                <v-icon icon="$download" />
+              </template>
               <v-list-item-title>
-                <v-icon left>
-                  $download
-                </v-icon>
                 {{ $t('survey-schemes.load') }}
               </v-list-item-title>
             </v-list-item>
@@ -56,31 +48,30 @@
       @close="close"
       @update="update"
     />
-    <v-list two-line>
-      <draggable v-model="form.dataExport" handle=".drag-and-drop__handle">
-        <transition-group name="drag-and-drop" type="transition">
-          <v-list-item
-            v-for="(section, idx) in form.dataExport"
-            :key="section.id"
-            class="drag-and-drop__item"
-            draggable
-            link
-          >
-            <v-list-item-avatar class="drag-and-drop__handle">
-              <v-icon>$handle</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ $t(`survey-schemes.data-export.sections.${section.id}`) }}
-              </v-list-item-title>
-            </v-list-item-content>
+    <v-list class="list-border" lines="two">
+      <vue-draggable
+        v-model="form.dataExport"
+        :animation="300"
+        handle=".drag-and-drop__handle"
+      >
+        <v-list-item
+          v-for="(section, idx) in form.dataExport"
+          :key="section.id"
+        >
+          <template #prepend>
+            <v-avatar class="drag-and-drop__handle" icon="$handle" />
+          </template>
+          <v-list-item-title>
+            {{ $t(`survey-schemes.data-export.sections.${section.id}`) }}
+          </v-list-item-title>
+          <template #append>
             <v-list-item-action>
               <v-btn
                 icon
                 :title="$t('survey-schemes.data-export.edit')"
                 @click.stop="edit(section)"
               >
-                <v-icon color="secondary lighten-2">
+                <v-icon color="secondary-lighten-2">
                   $edit
                 </v-icon>
               </v-btn>
@@ -90,22 +81,22 @@
                 color="error"
                 icon
                 icon-left="$delete"
-                :label="$t('survey-schemes.data-export.remove').toString()"
+                :label="$t('survey-schemes.data-export.remove')"
                 @confirm="remove(idx)"
               >
                 {{ $t('common.action.confirm.remove', { name: $t(`survey-schemes.data-export.sections.${section.id}`) }) }}
               </confirm-dialog>
             </v-list-item-action>
-          </v-list-item>
-        </transition-group>
-      </draggable>
+          </template>
+        </v-list-item>
+      </vue-draggable>
     </v-list>
   </layout>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type {
   SurveySchemeEntry,
@@ -129,7 +120,14 @@ export type SurveySchemeDataExportForm = Pick<SurveySchemeForm, 'dataExport'>;
 export default defineComponent({
   name: 'SurveySchemeDataExport',
 
-  components: { ConfirmDialog, Draggable: draggable, DataExportSection, JsonEditorDialog, OptionsMenu, SelectResource },
+  components: {
+    ConfirmDialog,
+    DataExportSection,
+    JsonEditorDialog,
+    OptionsMenu,
+    SelectResource,
+    VueDraggable,
+  },
 
   mixins: [formMixin],
 
@@ -161,7 +159,7 @@ export default defineComponent({
 
       return exportSectionIds
         .filter(id => !used.includes(id))
-        .map(id => ({ id, text: i18n.t(`survey-schemes.data-export.sections.${id}`) }));
+        .map(id => ({ id, title: i18n.t(`survey-schemes.data-export.sections.${id}`) }));
     });
 
     const add = (section: ExportSectionId) => {
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 16d01e349b..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
@@ -2,24 +2,20 @@
   <v-dialog
     v-model="dialog"
     fullscreen
-    hide-overlay
     persistent
+    :scrim="false"
     transition="dialog-bottom-transition"
   >
     <v-card v-if="dialog" tile>
       <v-toolbar color="secondary" dark>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="cancel">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="cancel" />
         <v-toolbar-title>
           {{ $t(`survey-schemes.data-export.sections.${section?.id}`) }}
         </v-toolbar-title>
         <v-spacer />
         <v-toolbar-items>
-          <v-btn dark text :title="$t('common.action.ok')" @click.stop="save">
-            <v-icon left>
-              $success
-            </v-icon>{{ $t('common.action.ok') }}
+          <v-btn :title="$t('common.action.ok')" variant="text" @click.stop="save">
+            <v-icon icon="$success" start />{{ $t('common.action.ok') }}
           </v-btn>
         </v-toolbar-items>
       </v-toolbar>
@@ -27,52 +23,47 @@
         <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 two-line>
-              <draggable v-model="fields" handle=".drag-and-drop__handle">
-                <transition-group name="drag-and-drop" type="transition">
-                  <v-list-item
-                    v-for="(field, index) in fields"
-                    :key="field.id"
-                    class="drag-and-drop__item"
-                    draggable
-                    link
-                  >
-                    <v-list-item-avatar class="drag-and-drop__handle" size="32">
-                      <v-icon>$handle</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                      <v-list-item-subtitle class="mb-1">
-                        <span class="text--secondary">{{ $t('survey-schemes.data-export.fields.id') }}:</span>
-                        {{ field.id }}
-                      </v-list-item-subtitle>
-                      <v-list-item-subtitle>
-                        <span class="text--secondary">
-                          {{ $t('survey-schemes.data-export.fields.label') }}:
-                        </span>
-                        {{ field.label }}
-                      </v-list-item-subtitle>
-                    </v-list-item-content>
+            <v-list class="list-border" lines="two">
+              <vue-draggable
+                v-model="fields"
+                :animation="300"
+                handle=".drag-and-drop__handle"
+              >
+                <v-list-item
+                  v-for="(field, index) in fields"
+                  :key="field.id"
+                >
+                  <template #prepend>
+                    <v-avatar class="drag-and-drop__handle" icon="$handle" />
+                  </template>
+                  <v-list-item-subtitle class="mb-1">
+                    <span class="text--secondary">{{ $t('survey-schemes.data-export.fields.id') }}:</span>
+                    {{ field.id }}
+                  </v-list-item-subtitle>
+                  <v-list-item-subtitle>
+                    <span class="text--secondary">
+                      {{ $t('survey-schemes.data-export.fields.label') }}:
+                    </span>
+                    {{ field.label }}
+                  </v-list-item-subtitle>
+                  <template #append>
                     <v-list-item-action>
                       <v-btn
                         icon
                         :title="$t('common.action.edit')"
                         @click.stop="editOpen(index, field)"
                       >
-                        <v-icon color="secondary lighten-2">
+                        <v-icon color="secondary-lighten-2">
                           $edit
                         </v-icon>
                       </v-btn>
                     </v-list-item-action>
                     <v-list-item-action>
-                      <v-btn icon :title="$t('common.action.remove')" @click.stop="remove(index)">
-                        <v-icon color="error">
-                          $delete
-                        </v-icon>
-                      </v-btn>
+                      <v-btn color="error" icon="$delete" :title="$t('common.action.remove')" @click.stop="remove(index)" />
                     </v-list-item-action>
-                  </v-list-item>
-                </transition-group>
-              </draggable>
+                  </template>
+                </v-list-item>
+              </vue-draggable>
             </v-list>
           </v-col>
           <v-divider vertical />
@@ -87,36 +78,31 @@
               clearable
               hide-details="auto"
               :label="$t('survey-schemes.data-export.fields.label')"
-              outlined
               prepend-inner-icon="$search"
+              variant="outlined"
             />
-            <v-list two-line>
+            <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-content>
-                    <v-list-item-subtitle class="mb-1">
-                      <span class="text--secondary">{{ $t('survey-schemes.data-export.fields.id') }}:</span>
-                      {{ field.id }}
-                    </v-list-item-subtitle>
-                    <v-list-item-subtitle>
-                      <span class="text--secondary">
-                        {{ $t('survey-schemes.data-export.fields.label') }}:
-                      </span>
-                      {{ field.label }}
-                    </v-list-item-subtitle>
-                  </v-list-item-content>
-                  <v-list-item-action>
-                    <v-btn icon :title="$t('common.action.add')" @click.stop="add(field)">
-                      <v-icon color="info">
-                        $add
-                      </v-icon>
-                    </v-btn>
-                  </v-list-item-action>
+                  <v-list-item-subtitle class="mb-1">
+                    <span class="text--secondary">{{ $t('survey-schemes.data-export.fields.id') }}:</span>
+                    {{ field.id }}
+                  </v-list-item-subtitle>
+                  <v-list-item-subtitle>
+                    <span class="text--secondary">
+                      {{ $t('survey-schemes.data-export.fields.label') }}:
+                    </span>
+                    {{ field.label }}
+                  </v-list-item-subtitle>
+                  <template #append>
+                    <v-list-item-action>
+                      <v-btn color="info" icon="$add" :title="$t('common.action.add')" @click.stop="add(field)" />
+                    </v-list-item-action>
+                  </template>
                 </v-list-item>
               </transition-group>
               <v-skeleton-loader
@@ -140,7 +126,7 @@
                   hide-details="auto"
                   :label="$t('survey-schemes.data-export.fields.id')"
                   name="id"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
               <v-col cols="12">
@@ -149,22 +135,18 @@
                   hide-details="auto"
                   :label="$t('survey-schemes.data-export.fields.label')"
                   name="label"
-                  outlined
+                  variant="outlined"
                 />
               </v-col>
             </v-row>
           </v-card-text>
           <v-card-actions>
-            <v-btn class="font-weight-bold" color="error" text @click.stop="editReset">
-              <v-icon left>
-                $cancel
-              </v-icon>{{ $t('common.action.cancel') }}
+            <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="editReset">
+              <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
             </v-btn>
             <v-spacer />
-            <v-btn class="font-weight-bold" color="info" text @click.stop="editConfirm">
-              <v-icon left>
-                $success
-              </v-icon>{{ $t('common.action.ok') }}
+            <v-btn class="font-weight-bold" color="info" variant="text" @click.stop="editConfirm">
+              <v-icon icon="$success" start />{{ $t('common.action.ok') }}
             </v-btn>
           </v-card-actions>
         </v-card>
@@ -177,7 +159,7 @@
 import type { PropType } from 'vue';
 import { watchDebounced } from '@vueuse/core';
 import { computed, defineComponent, ref, watch } from 'vue';
-import draggable from 'vuedraggable';
+import { VueDraggable } from 'vue-draggable-plus';
 
 import type { ExportField, ExportSection } from '@intake24/common/surveys';
 import { DataExportNutrients } from '@intake24/admin/components/schemes';
@@ -185,7 +167,7 @@ import { DataExportNutrients } from '@intake24/admin/components/schemes';
 export default defineComponent({
   name: 'DataExportSection',
 
-  components: { Draggable: draggable, DataExportNutrients },
+  components: { DataExportNutrients, VueDraggable },
 
   props: {
     section: {
@@ -244,7 +226,7 @@ export default defineComponent({
       () => visibleFields.value.length < filteredFields.value.length,
     );
 
-    const tryLoadMoreFields = (entries: IntersectionObserverEntry[]) => {
+    const tryLoadMoreFields = (isIntersecting: boolean, entries: IntersectionObserverEntry[]) => {
       if (entries[0].isIntersecting && fieldsAvailableToLoad)
         loadMoreFields();
     };
diff --git a/apps/admin/src/views/survey-schemes/form.vue b/apps/admin/src/views/survey-schemes/form.vue
index 2ebf40580c..0600046732 100644
--- a/apps/admin/src/views/survey-schemes/form.vue
+++ b/apps/admin/src/views/survey-schemes/form.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <template #actions>
       <copy-scheme-dialog
         v-if="canHandleEntry('copy')"
@@ -7,7 +7,7 @@
         :scheme-id="id"
       />
     </template>
-    <v-form @keydown.native="clearError" @submit.prevent="submit">
+    <v-form @keydown="clearError" @submit.prevent="submit">
       <v-card-text>
         <v-container fluid>
           <v-row>
@@ -18,7 +18,7 @@
                 hide-details="auto"
                 :label="$t('common.name')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -30,20 +30,20 @@
                 :items="visibilities"
                 :label="$t('securables.visibility._')"
                 name="visibility"
-                outlined
-                @change="form.errors.clear('visibility')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('visibility')"
               >
-                <template #item="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <v-icon :icon="item.raw.icon" start />
+                    </template>
+                    <v-list-item-title>{{ item.raw.title }}</v-list-item-title>
+                  </v-list-item>
                 </template>
                 <template #selection="{ item }">
-                  <v-icon left>
-                    {{ item.icon }}
-                  </v-icon>
-                  {{ item.text }}
+                  <v-icon :icon="item.raw.icon" start />
+                  {{ item.raw.title }}
                 </template>
               </v-select>
             </v-col>
@@ -60,8 +60,8 @@
                 :items="schemeTypes"
                 :label="$t('survey-schemes.settings.types._')"
                 name="settings.type"
-                outlined
-                @change="form.errors.clear('settings.type')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('settings.type')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -72,8 +72,8 @@
                 :items="recallFlows"
                 :label="$t('survey-schemes.settings.flows._')"
                 name="settings.flow"
-                outlined
-                @change="form.errors.clear('settings.flow')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('settings.flow')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -82,7 +82,7 @@
                 hide-details="auto"
                 :label="$t('survey-schemes.settings.recallDate')"
                 name="settings.recallDate"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -90,14 +90,14 @@
                 v-model="form.settings.languages"
                 :error-messages="form.errors.get('settings.language')"
                 hide-details="auto"
-                item-text="englishName"
+                item-title="englishName"
                 item-value="code"
                 :items="languages"
                 :label="$t('survey-schemes.settings.languages')"
                 multiple
                 name="settings.languages"
-                outlined
-                @change="form.errors.clear('settings.languages')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('settings.languages')"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/survey-schemes/prompts/browse.vue b/apps/admin/src/views/survey-schemes/prompts/browse.vue
index 407bc4f5c1..b439c6c86f 100644
--- a/apps/admin/src/views/survey-schemes/prompts/browse.vue
+++ b/apps/admin/src/views/survey-schemes/prompts/browse.vue
@@ -1,18 +1,18 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
-    <v-toolbar color="grey lighten-5" flat tile>
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
+    <v-toolbar color="grey-lighten-4" flat tile>
       <v-toolbar-title class="font-weight-medium">
         {{ $t(`survey-schemes.prompts.title`) }}
       </v-toolbar-title>
       <v-spacer />
       <options-menu>
-        <select-resource resource="survey-schemes" return-object="prompts" @input="load">
-          <template #activator="{ attrs, on }">
-            <v-list-item v-bind="attrs" link v-on="on">
+        <select-resource resource="survey-schemes" return-object="prompts" @update:model-value="load">
+          <template #activator="{ props }">
+            <v-list-item v-bind="props" link>
+              <template #prepend>
+                <v-icon icon="$download" />
+              </template>
               <v-list-item-title>
-                <v-icon left>
-                  $download
-                </v-icon>
                 {{ $t('survey-schemes.load') }}
               </v-list-item-title>
             </v-list-item>
@@ -21,24 +21,30 @@
         <json-editor-dialog v-model="form.prompts" />
       </options-menu>
     </v-toolbar>
-    <prompt-list
-      v-for="(section, index) in promptSections"
-      :key="section"
-      v-bind="{
-        section,
-        step: index + 1,
-        promptIds,
-        templates,
-        items: isMealSection(section) ? form.prompts.meals[section] : form.prompts[section],
-      }"
-      @move="move"
-      @update:items="updateItems(section, $event)"
-    />
+    <v-expansion-panels
+      v-model="panels"
+      flat
+      multiple
+    >
+      <prompt-list
+        v-for="(section, index) in promptSections"
+        :key="section"
+        v-bind="{
+          section,
+          step: index + 1,
+          promptIds,
+          templates,
+          modelValue: isMealSection(section) ? form.prompts.meals[section] : form.prompts[section],
+        }"
+        @move="move"
+        @update:model-value="updateItems(section, $event)"
+      />
+    </v-expansion-panels>
   </layout>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 
 import type { PromptMoveEvent } from '@intake24/admin/components/prompts/list/prompt-list.vue';
 import type { SinglePrompt } from '@intake24/common/prompts';
@@ -82,6 +88,8 @@ export default defineComponent({
       loadCallback,
     });
 
+    const panels = ref([...promptSections]);
+
     return {
       promptSections,
       entry,
@@ -90,6 +98,7 @@ export default defineComponent({
       refsLoaded,
       clearError,
       form,
+      panels,
       routeLeave,
       submit,
     };
diff --git a/apps/admin/src/views/survey-schemes/read.vue b/apps/admin/src/views/survey-schemes/read.vue
index db9966ee1e..adfae9f313 100644
--- a/apps/admin/src/views/survey-schemes/read.vue
+++ b/apps/admin/src/views/survey-schemes/read.vue
@@ -7,7 +7,7 @@
         :scheme-id="id"
       />
     </template>
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.name') }}</th>
@@ -26,7 +26,7 @@
           <td>{{ $t(`securables.visibility.${entry.visibility}`) }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/surveys/browse.vue b/apps/admin/src/views/surveys/browse.vue
index 6ead610067..a13eccaf3f 100644
--- a/apps/admin/src/views/surveys/browse.vue
+++ b/apps/admin/src/views/surveys/browse.vue
@@ -9,47 +9,40 @@
   </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'SurveyList' });
 
-export default defineComponent({
-  name: 'SurveyList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('surveys.id'),
-          sortable: true,
-          value: 'slug',
-        },
-        {
-          text: this.$t('common.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('locales._'),
-          sortable: true,
-          value: 'locale',
-        },
-        {
-          text: this.$t('survey-schemes._'),
-          sortable: true,
-          value: 'surveyScheme',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('surveys.id'),
+    sortable: true,
+    key: 'slug',
+  },
+  {
+    title: t('common.name'),
+    sortable: true,
+    key: 'name',
+  },
+  {
+    title: t('locales._'),
+    sortable: true,
+    key: 'locale',
+  },
+  {
+    title: t('survey-schemes._'),
+    sortable: true,
+    key: 'surveyScheme',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/surveys/form.vue b/apps/admin/src/views/surveys/form.vue
index ac6900abe8..2273d33903 100644
--- a/apps/admin/src/views/surveys/form.vue
+++ b/apps/admin/src/views/surveys/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form autocomplete="off" @keydown.native="clearError" @submit.prevent="submit">
+      <v-form autocomplete="off" @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -12,7 +12,7 @@
                 hide-details="auto"
                 :label="$t('surveys.id')"
                 name="slug"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -22,7 +22,7 @@
                 hide-details="auto"
                 :label="$t('surveys.name')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -34,7 +34,7 @@
                 :label="$t('locales._')"
                 name="localeId"
                 resource="locales"
-                @input="form.errors.clear('localeId')"
+                @update:model-value="form.errors.clear('localeId')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -45,14 +45,14 @@
                 :label="$t('survey-schemes._')"
                 name="surveySchemeId"
                 resource="survey-schemes"
-                @input="form.errors.clear('surveySchemeId')"
+                @update:model-value="form.errors.clear('surveySchemeId')"
               />
             </v-col>
             <v-col cols="12" md="6">
               <date-picker
                 v-model="form.startDate"
                 :error-messages="form.errors.get('startDate')"
-                :label="$t('surveys.startDate').toString()"
+                :label="$t('surveys.startDate')"
                 @change="form.errors.clear('startDate')"
               />
             </v-col>
@@ -60,7 +60,7 @@
               <date-picker
                 v-model="form.endDate"
                 :error-messages="form.errors.get('endDate')"
-                :label="$t('surveys.endDate').toString()"
+                :label="$t('surveys.endDate')"
                 @change="form.errors.clear('endDate')"
               />
             </v-col>
@@ -72,8 +72,8 @@
                 hide-details="auto"
                 :label="$t('surveys.supportEmail')"
                 name="supportEmail"
-                outlined
                 prepend-inner-icon="fas fa-envelope"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -84,9 +84,9 @@
                 :items="surveyStates"
                 :label="$t('surveys.states._')"
                 name="state"
-                outlined
                 prepend-inner-icon="fas fa-spinner"
-                @change="form.errors.clear('state')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('state')"
               />
             </v-col>
             <v-col v-show="form.state === 'suspended'" cols="12">
@@ -96,7 +96,7 @@
                 hide-details="auto"
                 :label="$t('surveys.suspensionReason')"
                 name="suspensionReason"
-                outlined
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -113,7 +113,7 @@
                 hide-details="auto"
                 :label="$t('surveys.search.collectData')"
                 name="searchCollectData"
-                @change="form.errors.clear('searchSettings.collectData')"
+                @update:model-value="form.errors.clear('searchSettings.collectData')"
               />
               <v-slider
                 v-model.number="form.searchSettings.maxResults"
@@ -133,7 +133,7 @@
                 <v-icon
                   @click="showInformationPopup('sortingAlgorithmInfo')"
                 >
-                  fa-circle-question
+                  fas fa-circle-question
                 </v-icon>
                 <v-label class="ml-2">
                   {{ $t('surveys.search.sortingAlgorithm') }}
@@ -142,20 +142,20 @@
               <v-select
                 v-model="form.searchSettings.sortingAlgorithm"
                 class="mt-2"
-                dense
+                density="compact"
                 :error-messages="form.errors.get('searchSettings.sortingAlgorithm')"
                 hide-details="auto"
                 :items="searchSortingAlgorithms"
                 name="searchSortingAlgorithm"
-                outlined
                 prepend-inner-icon="fas fa-arrow-up-wide-short"
-                @change="form.errors.clear('searchSettings.sortingAlgorithm')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('searchSettings.sortingAlgorithm')"
               />
               <div class="mt-4">
                 <v-icon
                   @click="showInformationPopup('matchScoreWeightInfo')"
                 >
-                  fa-circle-question
+                  fas fa-circle-question
                 </v-icon>
                 <v-label class="ml-2">
                   {{ $t('surveys.search.matchScoreWeight') }}
@@ -172,10 +172,10 @@
                 thumb-label
               >
                 <template #prepend>
-                  <v-subheader>{{ $t('surveys.search.foodOrdering') }}</v-subheader>
+                  <v-list-subheader>{{ $t('surveys.search.foodOrdering') }}</v-list-subheader>
                 </template>
                 <template #append>
-                  <v-subheader>{{ $t('surveys.search.matchQuality') }}</v-subheader>
+                  <v-list-subheader>{{ $t('surveys.search.matchQuality') }}</v-list-subheader>
                 </template>
               </v-slider>
               <div class="text-h6 mb-10 mt-4 underline">
@@ -183,7 +183,7 @@
                   class="mr-3"
                   @click="showInformationPopup('matchQualityInfo')"
                 >
-                  fa-circle-question
+                  fas fa-circle-question
                 </v-icon>{{ $t('surveys.search.matchQualityCriteria') }}
               </div>
               <v-slider
@@ -235,7 +235,7 @@
                   class="mr-3"
                   @click="showInformationPopup('spellingCorrectionInfo')"
                 >
-                  fa-circle-question
+                  fas fa-circle-question
                 </v-icon>{{ $t('surveys.search.spellingCorrection') }}
               </div>
               <v-switch
@@ -245,7 +245,7 @@
                 hide-details="auto"
                 :label="$t('surveys.search.enableEditDistance')"
                 name="searchEnableEditDistance"
-                @change="form.errors.clear('searchSettings.enableEditDistance')"
+                @update:model-value="form.errors.clear('searchSettings.enableEditDistance')"
               />
               <v-slider
                 v-model.number="form.searchSettings.minWordLength1"
@@ -255,7 +255,7 @@
                 :label="$t('surveys.search.minWordLength1')"
                 max="10"
                 min="2"
-                name="searchMatchScoreWeight"
+                name="searchMinWordLength1"
                 thumb-label="always"
               />
               <v-slider
@@ -266,10 +266,9 @@
                 :label="$t('surveys.search.minWordLength2')"
                 max="10"
                 min="3"
-                name="searchMatchScoreWeight"
+                name="searchMinWordLength2"
                 thumb-label="always"
               />
-
               <v-switch
                 v-model="form.searchSettings.enablePhonetic"
                 class="my-6"
@@ -277,7 +276,7 @@
                 hide-details="auto"
                 :label="$t('surveys.search.enablePhonetic')"
                 name="searchEnablePhonetic"
-                @change="form.errors.clear('searchSettings.enablePhonetic')"
+                @update:model-value="form.errors.clear('searchSettings.enablePhonetic')"
               />
               <v-slider
                 v-model.number="form.searchSettings.minWordLengthPhonetic"
@@ -296,21 +295,21 @@
               <v-select
                 v-model="form.searchSettings.spellingCorrectionPreference"
                 class="mt-2"
-                dense
+                density="compact"
                 :error-messages="form.errors.get('searchSettings.spellingCorrectionPreference')"
                 hide-details="auto"
                 :items="spellingCorrectionOptions"
                 name="searchSpellingCorrectionPreference"
-                outlined
                 prepend-inner-icon="fas fa-arrow-up-wide-short"
-                @change="form.errors.clear('searchSettings.spellingCorrectionPreference')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('searchSettings.spellingCorrectionPreference')"
               />
               <div class="text-h6 mb-4 mt-4 underline">
                 <v-icon
                   class="mr-3"
                   @click="showInformationPopup('relevantCategoriesInfo')"
                 >
-                  fa-circle-question
+                  fas fa-circle-question
                 </v-icon>{{ $t('surveys.search.relevantCategories') }}
               </div>
               <v-switch
@@ -320,7 +319,7 @@
                 hide-details="auto"
                 :label="$t('surveys.search.enableRelevantCategories')"
                 name="searchEnableRelevantCategories"
-                @change="form.errors.clear('searchSettings.enableRelevantCategories')"
+                @update:model-value="form.errors.clear('searchSettings.enableRelevantCategories')"
               />
               <v-slider
                 v-model.number="form.searchSettings.relevantCategoryDepth"
@@ -335,8 +334,8 @@
               />
               <information-popup v-if="infoComponentType" :component-type="`${infoComponentType}`" :open="infoPopupOpen" :title="$t(`surveys.search.information.${infoComponentType}.title`)" @close="hideInformationPopup" />
             </v-col>
-            <v-col :cols="$vuetify.breakpoint.mdAndUp ? `auto` : '12'">
-              <v-divider :vertical="$vuetify.breakpoint.mdAndUp" />
+            <v-col :cols="$vuetify.display.mdAndUp ? `auto` : '12'">
+              <v-divider :vertical="$vuetify.display.mdAndUp" />
             </v-col>
             <v-col cols="12" md>
               <div class="text-h5 mb-4">
@@ -348,7 +347,7 @@
                 hide-details="auto"
                 :label="$t('surveys.users.personalIdentifiers')"
                 name="userPersonalIdentifiers"
-                @change="form.errors.clear('userPersonalIdentifiers')"
+                @update:model-value="form.errors.clear('userPersonalIdentifiers')"
               />
               <v-switch
                 v-model="form.userCustomFields"
@@ -356,7 +355,7 @@
                 hide-details="auto"
                 :label="$t('surveys.users.customFields')"
                 name="userCustomFields"
-                @change="form.errors.clear('userCustomFields')"
+                @update:model-value="form.errors.clear('userCustomFields')"
               />
             </v-col>
           </v-row>
@@ -373,7 +372,7 @@
                 hide-details="auto"
                 :label="$t('surveys.auth.captcha')"
                 name="authCaptcha"
-                @change="form.errors.clear('authCaptcha')"
+                @update:model-value="form.errors.clear('authCaptcha')"
               />
               <v-text-field
                 v-model="form.authUrlTokenCharset"
@@ -382,8 +381,8 @@
                 hide-details="auto"
                 :label="$t('surveys.auth.urlTokenCharset')"
                 name="authUrlTokenCharset"
-                outlined
                 prepend-inner-icon="fas fa-font"
+                variant="outlined"
               />
               <v-text-field
                 v-model.number="form.authUrlTokenLength"
@@ -392,8 +391,8 @@
                 hide-details="auto"
                 :label="$t('surveys.auth.urlTokenLength')"
                 name="authUrlTokenLength"
-                outlined
                 prepend-inner-icon="fas fa-ruler-horizontal"
+                variant="outlined"
               />
               <v-text-field
                 v-model="form.authUrlDomainOverride"
@@ -401,12 +400,12 @@
                 hide-details="auto"
                 :label="$t('surveys.auth.urlDomainOverride')"
                 name="authUrlDomainOverride"
-                outlined
                 prepend-inner-icon="fas fa-up-right-from-square"
+                variant="outlined"
               />
             </v-col>
-            <v-col :cols="$vuetify.breakpoint.mdAndUp ? `auto` : '12'">
-              <v-divider :vertical="$vuetify.breakpoint.mdAndUp" />
+            <v-col :cols="$vuetify.display.mdAndUp ? `auto` : '12'">
+              <v-divider :vertical="$vuetify.display.mdAndUp" />
             </v-col>
             <v-col cols="12" md>
               <div class="text-h5 mb-4">
@@ -419,7 +418,7 @@
                 hide-details="auto"
                 :label="$t('surveys.submissionLimits.maxDaily')"
                 name="maximumDailySubmissions"
-                outlined
+                variant="outlined"
               />
               <v-text-field
                 v-model.number="form.maximumTotalSubmissions"
@@ -428,7 +427,7 @@
                 hide-details="auto"
                 :label="$t('surveys.submissionLimits.maxTotal')"
                 name="maximumTotalSubmissions"
-                outlined
+                variant="outlined"
               />
               <v-text-field
                 v-model.number="form.minimumSubmissionInterval"
@@ -436,7 +435,7 @@
                 hide-details="auto"
                 :label="$t('surveys.submissionLimits.minInterval')"
                 name="minimumSubmissionInterval"
-                outlined
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -453,7 +452,7 @@
                 hide-details="auto"
                 :label="$t('surveys.externalComm.allowGenUsers')"
                 name="allowGenUsers"
-                @change="form.errors.clear('allowGenUsers')"
+                @update:model-value="form.errors.clear('allowGenUsers')"
               />
               <v-text-field
                 v-model="form.genUserKey"
@@ -464,19 +463,19 @@
                 hide-details="auto"
                 :label="$t('surveys.externalComm.genUserKey')"
                 name="genUserKey"
-                outlined
                 :type="showGenUserKey ? 'text' : 'password'"
+                variant="outlined"
                 @click:append="showGenUserKey = !showGenUserKey"
               />
               <event-notifications
                 v-model="form.notifications"
                 :error-messages="form.errors.get('notifications')"
                 name="notifications"
-                @input="form.errors.clear('notifications')"
+                @update:model-value="form.errors.clear('notifications')"
               />
             </v-col>
-            <v-col :cols="$vuetify.breakpoint.mdAndUp ? `auto` : '12'">
-              <v-divider :vertical="$vuetify.breakpoint.mdAndUp" />
+            <v-col :cols="$vuetify.display.mdAndUp ? `auto` : '12'">
+              <v-divider :vertical="$vuetify.display.mdAndUp" />
             </v-col>
             <v-col cols="12" md>
               <div class="text-h5 mb-4">
@@ -489,7 +488,7 @@
                 hide-details="auto"
                 :label="$t('surveys.session.store')"
                 name="session.store"
-                @change="form.errors.clear('session.store')"
+                @update:model-value="form.errors.clear('session.store')"
               />
               <v-text-field
                 v-model="form.session.age"
@@ -499,8 +498,8 @@
                 :hint="$t('surveys.session.age.hint')"
                 :label="$t('surveys.session.age._')"
                 name="session.age"
-                outlined
                 prepend-inner-icon="fas fa-stopwatch"
+                variant="outlined"
               />
               <v-text-field
                 v-model="form.session.fixed"
@@ -509,8 +508,8 @@
                 :hint="$t('surveys.session.fixed.hint')"
                 :label="$t('surveys.session.fixed._')"
                 name="session.fixed"
-                outlined
                 prepend-inner-icon="fas fa-stopwatch"
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -528,7 +527,7 @@
                 :label="$t('feedback-schemes._')"
                 name="feedbackSchemeId"
                 resource="feedback-schemes"
-                @input="form.errors.clear('feedbackSchemeId')"
+                @update:model-value="form.errors.clear('feedbackSchemeId')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -539,7 +538,7 @@
                 hide-details="auto"
                 :label="$t('surveys.feedback.numberOfSubmissions')"
                 name="numberOfSubmissionsForFeedback"
-                outlined
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -650,20 +649,10 @@ export default defineComponent({
     const infoComponentType = ref(undefined as string | undefined);
     const infoPopupOpen = ref(false);
 
-    const loadCallback = (data: SurveyEntry) => {
-      const { startDate, endDate, ...rest } = data;
-      return {
-        ...rest,
-        startDate: new Date(data.startDate).toISOString().split('T')[0],
-        endDate: new Date(data.endDate).toISOString().split('T')[0],
-      };
-    };
-
     useEntryFetch(props);
     const { clearError, form, routeLeave, submit } = useEntryForm<SurveyForm, SurveyEntry>(props, {
       data: surveyForm,
       editMethod: 'patch',
-      loadCallback,
     });
 
     const showInformationPopup = (type: string) => {
@@ -698,15 +687,15 @@ export default defineComponent({
       showGenUserKey: false,
       surveyStates: surveyStates.map(value => ({
         value,
-        text: this.$t(`surveys.states.${value}`),
+        title: this.$t(`surveys.states.${value}`),
       })),
       searchSortingAlgorithms: searchSortingAlgorithms.map(value => ({
         value,
-        text: this.$t(`surveys.search.algorithms.${value}`),
+        title: this.$t(`surveys.search.algorithms.${value}`),
       })),
       spellingCorrectionOptions: spellingCorrectionPreferences.map(value => ({
         value,
-        text: this.$t(`surveys.search.spellingCorrectionOptions.${value}`),
+        title: this.$t(`surveys.search.spellingCorrectionOptions.${value}`),
       })),
     };
   },
diff --git a/apps/admin/src/views/surveys/overrides/browse.vue b/apps/admin/src/views/surveys/overrides/browse.vue
index 3f5bde7b50..1c7c88a06e 100644
--- a/apps/admin/src/views/surveys/overrides/browse.vue
+++ b/apps/admin/src/views/surveys/overrides/browse.vue
@@ -1,5 +1,5 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-card-title>{{ $t('survey-schemes.overrides.title') }}</v-card-title>
     <v-card-subtitle>
       {{ $t('survey-schemes.overrides.subtitle') }}
@@ -9,8 +9,8 @@
         {{ $t(`survey-schemes.${item}.title`) }}
       </v-tab>
     </v-tabs>
-    <v-tabs-items v-model="tab">
-      <v-tab-item key="settings" value="settings">
+    <v-tabs-window v-model="tab">
+      <v-tabs-window-item key="settings" value="settings">
         <v-card>
           <v-card-title>{{ $t('survey-schemes.overrides.settings.title') }}</v-card-title>
           <v-card-text>
@@ -24,8 +24,8 @@
                   :items="schemeTypes"
                   :label="$t('survey-schemes.settings.types._')"
                   name="settings.type"
-                  outlined
-                  @change="form.errors.clear('settings.type')"
+                  variant="outlined"
+                  @update:model-value="form.errors.clear('settings.type')"
                 />
               </override-field>
               <override-field v-model="switches.flow" @change="toggle('flow', $event)">
@@ -37,8 +37,8 @@
                   :items="recallFlows"
                   :label="$t('survey-schemes.settings.flows._')"
                   name="settings.flow"
-                  outlined
-                  @change="form.errors.clear('settings.flow')"
+                  variant="outlined"
+                  @update:model-value="form.errors.clear('settings.flow')"
                 />
               </override-field>
               <override-field v-model="switches.recallDate" @change="toggle('recallDate', $event)">
@@ -48,7 +48,7 @@
                   hide-details="auto"
                   :label="$t('survey-schemes.settings.recallDate')"
                   name="settings.recallDate"
-                  outlined
+                  variant="outlined"
                 />
               </override-field>
               <override-field v-model="switches.languages" @change="toggle('languages', $event)">
@@ -57,36 +57,38 @@
                   :disabled="!switches.languages"
                   :error-messages="form.errors.get('settings.languages')"
                   hide-details="auto"
-                  item-text="englishName"
+                  item-title="englishName"
                   item-value="code"
                   :items="languages"
                   :label="$t('survey-schemes.settings.languages')"
                   multiple
                   name="settings.languages"
-                  outlined
-                  @change="form.errors.clear('settings.languages')"
+                  variant="outlined"
+                  @update:model-value="form.errors.clear('settings.languages')"
                 />
               </override-field>
             </v-row>
           </v-card-text>
         </v-card>
-      </v-tab-item>
-      <v-tab-item key="prompts" value="prompts">
-        <prompt-list
-          v-bind="{ mode: 'override', promptIds, templates: prompts }"
-          :items.sync="form.surveySchemeOverrides.prompts"
-        />
-      </v-tab-item>
-      <v-tab-item key="meals" value="meals">
+      </v-tabs-window-item>
+      <v-tabs-window-item key="prompts" value="prompts">
+        <v-expansion-panels v-model="panels" flat>
+          <prompt-list
+            v-bind="{ mode: 'override', promptIds, templates: prompts }"
+            v-model="form.surveySchemeOverrides.prompts"
+          />
+        </v-expansion-panels>
+      </v-tabs-window-item>
+      <v-tabs-window-item key="meals" value="meals">
         <meal-list
           v-model="form.surveySchemeOverrides.meals"
           mode="override"
           :scheme-id="entry.surveySchemeId"
         />
-      </v-tab-item>
-    </v-tabs-items>
+      </v-tabs-window-item>
+    </v-tabs-window>
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <submit-footer :disabled="form.errors.any()" />
         </v-card-text>
@@ -148,6 +150,7 @@ export default defineComponent({
       form.surveySchemeOverrides.settings = rest;
     };
 
+    const panels = ref(['override']);
     const promptIds = computed(() => form.surveySchemeOverrides.prompts.map(({ id }) => id));
     const prompts = computed(() => entryLoaded.value ? flattenScheme(entry.value.surveyScheme.prompts) : []);
 
@@ -157,6 +160,7 @@ export default defineComponent({
       clearError,
       form,
       languages,
+      panels,
       prompts,
       promptIds,
       recallFlows,
diff --git a/apps/admin/src/views/surveys/overrides/override-field.vue b/apps/admin/src/views/surveys/overrides/override-field.vue
index c5d9af6c11..c0149f9fb1 100644
--- a/apps/admin/src/views/surveys/overrides/override-field.vue
+++ b/apps/admin/src/views/surveys/overrides/override-field.vue
@@ -4,8 +4,8 @@
       class="mt-0"
       :disabled="disabled"
       hide-details="auto"
-      :input-value="value"
-      @change="input"
+      :model-value="modelValue"
+      @update:model-value="input"
     />
     <slot />
   </v-col>
@@ -22,16 +22,18 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    value: {
+    modelValue: {
       type: Boolean,
       required: true,
     },
   },
 
+  emits: ['change', 'update:modelValue'],
+
   setup(props, { emit }) {
     const input = (value: boolean) => {
       emit('change', value);
-      emit('input', value);
+      emit('update:modelValue', value);
     };
 
     return { input };
diff --git a/apps/admin/src/views/surveys/read.vue b/apps/admin/src/views/surveys/read.vue
index f68acae8ff..fcc03a4c33 100644
--- a/apps/admin/src/views/surveys/read.vue
+++ b/apps/admin/src/views/surveys/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('surveys.id') }}</th>
@@ -87,7 +87,7 @@
           <td>{{ entry.searchSettings.matchScoreWeight }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/surveys/respondents/browse.vue b/apps/admin/src/views/surveys/respondents/browse.vue
index 2ffdc25459..62cba70fdd 100644
--- a/apps/admin/src/views/surveys/respondents/browse.vue
+++ b/apps/admin/src/views/surveys/respondents/browse.vue
@@ -7,24 +7,20 @@
       track-by="userId"
     >
       <template #header-add>
-        <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-          <template #activator="{ attrs, on }">
-            <v-btn class="font-weight-bold" color="secondary" text v-bind="attrs" v-on="on">
-              <v-icon left>
-                fas fa-user-plus
-              </v-icon>{{ $t('surveys.respondents.add') }}
+        <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+          <template #activator="{ props }">
+            <v-btn class="font-weight-bold" color="secondary" variant="text" v-bind="props">
+              <v-icon icon="fas fa-user-plus" start />{{ $t('surveys.respondents.add') }}
             </v-btn>
           </template>
-          <v-card :loading="loading" :tile="$vuetify.breakpoint.smAndDown">
+          <v-card :loading="loading" :tile="$vuetify.display.smAndDown">
             <v-toolbar color="secondary" dark flat>
-              <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="reset">
-                <v-icon>$cancel</v-icon>
-              </v-btn>
+              <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="reset" />
               <v-toolbar-title>
                 {{ $t(`surveys.respondents.${isCreate ? 'add' : 'edit'}`) }}
               </v-toolbar-title>
             </v-toolbar>
-            <v-form autocomplete="off" @keydown.native="clearError" @submit.prevent="saveRespondent">
+            <v-form autocomplete="off" @keydown="clearError" @submit.prevent="saveRespondent">
               <v-card-title>
                 {{ $t('users.identifiers.title') }}
               </v-card-title>
@@ -38,8 +34,8 @@
                   hide-details="auto"
                   :label="$t('users.username')"
                   name="username"
-                  outlined
                   prepend-inner-icon="fas fa-user-secret"
+                  variant="outlined"
                 />
                 <v-text-field
                   v-model="form.password"
@@ -49,9 +45,9 @@
                   hide-details="auto"
                   :label="$t('common.password._')"
                   name="password"
-                  outlined
                   prepend-inner-icon="fas fa-unlock"
                   type="password"
+                  variant="outlined"
                 />
                 <v-text-field
                   v-model="form.passwordConfirm"
@@ -60,9 +56,9 @@
                   hide-details="auto"
                   :label="$t('common.password.confirm')"
                   name="passwordConfirm"
-                  outlined
                   prepend-inner-icon="fas fa-unlock"
                   type="password"
+                  variant="outlined"
                 />
               </v-card-text>
               <template v-if="entry.userPersonalIdentifiers">
@@ -77,8 +73,8 @@
                     hide-details="auto"
                     :label="$t('users.name')"
                     name="name"
-                    outlined
                     prepend-inner-icon="fas fa-user"
+                    variant="outlined"
                   />
                   <v-text-field
                     v-model="form.email"
@@ -87,8 +83,8 @@
                     hide-details="auto"
                     :label="$t('common.email')"
                     name="email"
-                    outlined
                     prepend-inner-icon="fas fa-at"
+                    variant="outlined"
                   />
                   <v-text-field
                     v-model="form.phone"
@@ -96,8 +92,8 @@
                     hide-details="auto"
                     :label="$t('common.phone')"
                     name="phone"
-                    outlined
                     prepend-inner-icon="fas fa-phone"
+                    variant="outlined"
                   />
                 </v-card-text>
               </template>
@@ -107,43 +103,39 @@
                     {{ $t('users.customFields.title') }}
                   </div>
                   <v-spacer />
-                  <v-btn color="primary" fab small :title="$t('users.customFields.add')" @click.stop="addCustomField">
-                    <v-icon small>
-                      $add
-                    </v-icon>
-                  </v-btn>
+                  <v-btn color="primary" icon="$add" size="small" :title="$t('users.customFields.add')" @click.stop="addCustomField" />
                 </v-toolbar>
                 <v-card-text>
-                  <template v-for="(field, idx) in form.customFields">
-                    <v-row :key="`r1-${idx}`" dense>
+                  <template v-for="(field, idx) in form.customFields" :key="`r-${idx}`">
+                    <v-row dense>
                       <v-col cols="12" md="4">
                         <v-text-field
                           v-model="field.name"
-                          dense
+                          density="compact"
                           :error-messages="form.errors.get(`customFields.${idx}.name`)"
                           hide-details="auto"
                           :label="$t('users.customFields.name')"
-                          outlined
+                          variant="outlined"
                         />
                       </v-col>
                       <v-col cols="12" md="8">
                         <v-text-field
                           v-model="field.value"
-                          dense
+                          density="compact"
                           :error-messages="form.errors.get(`customFields.${idx}.value`)"
                           hide-details="auto"
                           :label="$t('users.customFields.value')"
-                          outlined
+                          variant="outlined"
                         />
                       </v-col>
                     </v-row>
-                    <v-row :key="`r2-${idx}`" dense justify="space-between">
+                    <v-row dense justify="space-between">
                       <v-col cols="auto">
-                        <v-checkbox v-model="field.public" class="mt-0" hide-details="auto" :label="$t('users.customFields.public')" />
+                        <v-checkbox-btn v-model="field.public" hide-details="auto" :label="$t('users.customFields.public')" />
                       </v-col>
                       <v-col cols="auto">
-                        <v-btn color="error" text :title="$t('users.customFields.remove')" @click.stop="removeCustomField(idx)">
-                          <v-icon color="error" left>
+                        <v-btn color="error" :title="$t('users.customFields.remove')" variant="text" @click.stop="removeCustomField(idx)">
+                          <v-icon color="error" start>
                             $delete
                           </v-icon>
                           {{ $t('common.action.remove') }}
@@ -155,26 +147,20 @@
               </template>
               <v-divider />
               <v-card-actions>
-                <v-btn class="font-weight-bold" color="error" text @click.stop="reset">
-                  <v-icon left>
-                    $cancel
-                  </v-icon>{{ $t('common.action.cancel') }}
+                <v-btn class="font-weight-bold" color="error" variant="text" @click.stop="reset">
+                  <v-icon icon="$cancel" start />{{ $t('common.action.cancel') }}
                 </v-btn>
                 <v-spacer />
-                <v-btn class="font-weight-bold" color="info" text type="submit">
-                  <v-icon left>
-                    $save
-                  </v-icon>{{ $t('common.action.save') }}
+                <v-btn class="font-weight-bold" color="info" type="submit" variant="text">
+                  <v-icon icon="$save" start />{{ $t('common.action.save') }}
                 </v-btn>
               </v-card-actions>
             </v-form>
           </v-card>
         </v-dialog>
-        <v-menu close-on-click close-on-content-click offset-y>
-          <template #activator="{ attrs, on }">
-            <v-btn class="font-weight-bold" color="secondary" v-bind="attrs" icon v-on="on">
-              <v-icon>$options</v-icon>
-            </v-btn>
+        <v-menu close-on-content-click :persistent="false">
+          <template #activator="{ props }">
+            <v-btn class="font-weight-bold" color="secondary" icon="$options" v-bind="props" variant="text" />
           </template>
           <v-list>
             <respondents-upload :survey-id="id" />
@@ -183,42 +169,32 @@
         </v-menu>
       </template>
       <template #[`item.surveyAuthUrl`]="{ item }">
-        <v-btn :href="item.surveyAuthUrl" icon link target="_blank">
+        <v-btn :href="item.surveyAuthUrl" icon target="_blank">
           <v-icon>fas fa-arrow-up-right-from-square</v-icon>
         </v-btn>
-        <v-btn icon @click="toClipboard(item.surveyAuthUrl)">
-          <v-icon>fas fa-clipboard</v-icon>
-        </v-btn>
+        <v-btn icon="fas fa-clipboard" @click="toClipboard(item.surveyAuthUrl)" />
       </template>
       <template #[`item.feedbackAuthUrl`]="{ item }">
-        <v-btn :href="item.feedbackAuthUrl" icon link target="_blank">
+        <v-btn :href="item.feedbackAuthUrl" icon target="_blank">
           <v-icon>fas fa-arrow-up-right-from-square</v-icon>
         </v-btn>
-        <v-btn icon @click="toClipboard(item.feedbackAuthUrl)">
-          <v-icon>fas fa-clipboard</v-icon>
-        </v-btn>
+        <v-btn icon="fas fa-clipboard" @click="toClipboard(item.feedbackAuthUrl)" />
       </template>
       <template #[`item.action`]="{ item }">
-        <v-menu close-on-click close-on-content-click offset-y>
-          <template #activator="{ attrs, on }">
-            <v-btn class="font-weight-bold" color="secondary" v-bind="attrs" icon v-on="on">
-              <v-icon>$options</v-icon>
-            </v-btn>
+        <v-menu close-on-content-click :persistent="false">
+          <template #activator="{ props }">
+            <v-btn class="font-weight-bold" color="secondary" icon="$options" v-bind="props" />
           </template>
           <v-list>
             <respondent-feedback :survey-id="id" :user="item" />
           </v-list>
         </v-menu>
-        <v-btn color="secondary" icon :title="$t('common.action.edit')" @click.stop="editRespondent(item)">
-          <v-icon dark>
-            $edit
-          </v-icon>
-        </v-btn>
+        <v-btn color="secondary" icon="$edit" :title="$t('common.action.edit')" @click.stop="editRespondent(item)" />
         <confirm-dialog
           color="error"
           icon
           icon-left="$delete"
-          :label="$t('common.action.delete').toString()"
+          :label="$t('common.action.delete')"
           @confirm="removeRespondent(item)"
         >
           {{ $t('common.action.confirm.delete', { name: item.username }) }}
@@ -237,7 +213,7 @@ import type {
   RespondentListEntry,
   SurveyEntry,
 } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch, useForm } from '@intake24/admin/composables';
 import { useHttp } from '@intake24/admin/services';
@@ -284,40 +260,40 @@ export default defineComponent({
     async function toClipboard(data: string) {
       await clipboard.toClipboard(
         data,
-        i18n.t('surveys.respondents.authUrls.copiedToClipboard').toString(),
+        i18n.t('surveys.respondents.authUrls.copiedToClipboard'),
       );
     }
 
-    const headers = [
+    const headers: DataTableHeader[] = [
       {
-        text: i18n.t('users.aliases.username'),
+        title: i18n.t('users.aliases.username'),
         sortable: true,
-        value: 'username',
+        key: 'username',
         align: 'start',
       },
       {
-        text: i18n.t('users.aliases.urlAuthToken'),
+        title: i18n.t('users.aliases.urlAuthToken'),
         sortable: false,
-        value: 'urlAuthToken',
+        key: 'urlAuthToken',
         align: 'start',
       },
       {
-        text: i18n.t('surveys.respondents.authUrls.surveyAuthUrl'),
+        title: i18n.t('surveys.respondents.authUrls.surveyAuthUrl'),
         sortable: false,
-        value: 'surveyAuthUrl',
+        key: 'surveyAuthUrl',
         align: 'start',
       },
       {
-        text: i18n.t('surveys.respondents.authUrls.feedbackAuthUrl'),
+        title: i18n.t('surveys.respondents.authUrls.feedbackAuthUrl'),
         sortable: false,
-        value: 'feedbackAuthUrl',
+        key: 'feedbackAuthUrl',
         align: 'start',
       },
       {
-        text: i18n.t('common.action._'),
+        title: i18n.t('common.action._'),
         sortable: false,
-        value: 'action',
-        align: 'right',
+        key: 'action',
+        align: 'end',
       },
     ];
 
@@ -390,14 +366,14 @@ export default defineComponent({
           `admin/surveys/${props.id}/respondents/${form.username}`,
         );
 
-        useMessages().success(i18n.t('common.msg.updated', { name }).toString());
+        useMessages().success(i18n.t('common.msg.updated', { name }));
       }
       else {
         const { username: name } = await form.post<RespondentEntry>(
           `admin/surveys/${props.id}/respondents`,
         );
 
-        useMessages().success(i18n.t('common.msg.created', { name }).toString());
+        useMessages().success(i18n.t('common.msg.created', { name }));
       }
 
       dialog.value = false;
@@ -406,7 +382,7 @@ export default defineComponent({
 
     async function removeRespondent({ username: name }: RespondentListEntry) {
       await http.delete(`admin/surveys/${props.id}/respondents/${name}`);
-      useMessages().success(i18n.t('common.msg.deleted', { name }).toString());
+      useMessages().success(i18n.t('common.msg.deleted', { name }));
 
       await updateTable();
     };
diff --git a/apps/admin/src/views/surveys/respondents/respondent-feedback.vue b/apps/admin/src/views/surveys/respondents/respondent-feedback.vue
index 5e756b587f..1a1f9e30cc 100644
--- a/apps/admin/src/views/surveys/respondents/respondent-feedback.vue
+++ b/apps/admin/src/views/surveys/respondents/respondent-feedback.vue
@@ -1,20 +1,16 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-list-item key="respondentsFeedback" v-bind="attrs" link v-on="on">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-list-item key="respondentsFeedback" link v-bind="props">
         <v-list-item-title>
-          <v-icon left>
-            fas fa-comments
-          </v-icon>
+          <v-icon icon="fas fa-comments" start />
           {{ $t('surveys.respondents.feedback._') }}
         </v-list-item-title>
       </v-list-item>
     </template>
-    <v-card :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
         <v-toolbar-title>
           {{ $t(`surveys.respondents.feedback.title`) }}
         </v-toolbar-title>
@@ -22,30 +18,26 @@
       <v-card-title>
         {{ $t(`surveys.respondents.feedback.details`) }}
       </v-card-title>
-      <v-simple-table class="mx-4">
+      <v-table class="mx-4">
         <tbody>
           <tr>
             <th>{{ $t(`users.username`) }}</th>
             <th>{{ user.username }}</th>
           </tr>
         </tbody>
-      </v-simple-table>
+      </v-table>
       <v-container>
         <v-card-text>
           <v-row>
             <v-col cols="12" sm="6">
-              <v-btn block :href="user.feedbackAuthUrl" outlined target="_blank" x-large>
-                <v-icon left>
-                  fas fa-up-right-from-square
-                </v-icon>
+              <v-btn block :href="user.feedbackAuthUrl" size="x-large" target="_blank" variant="outlined">
+                <v-icon icon="fas fa-up-right-from-square" start />
                 {{ $t(`surveys.respondents.feedback.open`) }}
               </v-btn>
             </v-col>
             <v-col cols="12" sm="6">
-              <v-btn block outlined x-large @click.stop="download">
-                <v-icon left>
-                  $download
-                </v-icon>
+              <v-btn block size="x-large" variant="outlined" @click.stop="download">
+                <v-icon icon="$download" start />
                 {{ $t(`surveys.respondents.feedback.download`) }}
               </v-btn>
             </v-col>
@@ -67,20 +59,20 @@
                   hide-details="auto"
                   :label="$t('common.email')"
                   name="email"
-                  outlined
                   prepend-inner-icon="fas fa-envelope"
-                  @input="form.errors.clear('email')"
+                  variant="outlined"
+                  @update:model-value="form.errors.clear('email')"
                 />
               </v-col>
               <v-col cols="12" sm="auto">
                 <v-radio-group
                   v-model="form.copy"
                   :error-messages="form.errors.get('copy')"
+                  inline
                   :label="$t('surveys.respondents.feedback.email.copy._')"
                   mandatory
                   name="copy"
-                  row
-                  @change="form.errors.clear('copy')"
+                  @update:model-value="form.errors.clear('copy')"
                 >
                   <v-radio :label="$t('surveys.respondents.feedback.email.copy.none')" value="none" />
                   <v-radio :label="$t('surveys.respondents.feedback.email.copy.cc')" value="cc" />
@@ -88,10 +80,8 @@
                 </v-radio-group>
               </v-col>
               <v-col class="ml-auto" cols="12" sm="auto">
-                <v-btn block color="primary" :disabled="form.errors.any()" type="submit" x-large>
-                  <v-icon left>
-                    fas fa-envelope
-                  </v-icon>
+                <v-btn block color="primary" :disabled="form.errors.any()" size="x-large" type="submit">
+                  <v-icon icon="fas fa-envelope" start />
                   {{ $t('surveys.respondents.feedback.email.sent') }}
                 </v-btn>
               </v-col>
@@ -100,7 +90,7 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn class="font-weight-bold" color="info" text @click.stop="close">
+          <v-btn class="font-weight-bold" color="info" variant="text" @click.stop="close">
             {{ $t('common.action.close') }}
           </v-btn>
         </v-card-actions>
diff --git a/apps/admin/src/views/surveys/respondents/respondents-auth-url-export.vue b/apps/admin/src/views/surveys/respondents/respondents-auth-url-export.vue
index 2832de37f7..c0ad317834 100644
--- a/apps/admin/src/views/surveys/respondents/respondents-auth-url-export.vue
+++ b/apps/admin/src/views/surveys/respondents/respondents-auth-url-export.vue
@@ -1,20 +1,16 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-list-item key="authUrls" v-bind="attrs" link v-on="on">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-list-item key="authUrls" link v-bind="props">
         <v-list-item-title>
-          <v-icon left>
-            $download
-          </v-icon>
+          <v-icon icon="$download" start />
           {{ $t('surveys.respondents.authUrls._') }}
         </v-list-item-title>
       </v-list-item>
     </template>
-    <v-card :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-icon dark left>
-          $download
-        </v-icon>
+        <v-icon icon="$download" start />
         <v-toolbar-title>
           {{ $t(`surveys.respondents.authUrls.title`) }}
         </v-toolbar-title>
@@ -23,10 +19,8 @@
         <v-container>
           <v-row justify="center">
             <v-col cols="12" md="6" sm="8">
-              <v-btn block color="primary" :disabled="jobInProgress" x-large @click="submit">
-                <v-icon left>
-                  $download
-                </v-icon>
+              <v-btn block color="primary" :disabled="jobInProgress" size="x-large" @click="submit">
+                <v-icon icon="$download" start />
                 {{ $t('surveys.respondents.authUrls.submit') }}
               </v-btn>
             </v-col>
@@ -36,7 +30,7 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn class="font-weight-bold" color="info" text @click.stop="close">
+        <v-btn class="font-weight-bold" color="info" variant="text" @click.stop="close">
           {{ $t('common.action.close') }}
         </v-btn>
       </v-card-actions>
diff --git a/apps/admin/src/views/surveys/respondents/respondents-upload.vue b/apps/admin/src/views/surveys/respondents/respondents-upload.vue
index fc1571f8e9..a2917aeb50 100644
--- a/apps/admin/src/views/surveys/respondents/respondents-upload.vue
+++ b/apps/admin/src/views/surveys/respondents/respondents-upload.vue
@@ -1,20 +1,16 @@
 <template>
-  <v-dialog v-model="dialog" :fullscreen="$vuetify.breakpoint.smAndDown" max-width="600px">
-    <template #activator="{ attrs, on }">
-      <v-list-item key="respondentsUpload" v-bind="attrs" link v-on="on">
+  <v-dialog v-model="dialog" :fullscreen="$vuetify.display.smAndDown" max-width="600px">
+    <template #activator="{ props }">
+      <v-list-item key="respondentsUpload" link v-bind="props">
         <v-list-item-title>
-          <v-icon left>
-            $upload
-          </v-icon>
+          <v-icon icon="$upload" start />
           {{ $t('surveys.respondents.upload._') }}
         </v-list-item-title>
       </v-list-item>
     </template>
-    <v-card :tile="$vuetify.breakpoint.smAndDown">
+    <v-card :tile="$vuetify.display.smAndDown">
       <v-toolbar color="secondary" dark flat>
-        <v-icon dark left>
-          $upload
-        </v-icon>
+        <v-icon icon="$upload" start />
         <v-toolbar-title>
           {{ $t(`surveys.respondents.upload.title`) }}
         </v-toolbar-title>
@@ -30,17 +26,15 @@
                   hide-details="auto"
                   :label="$t('common.file.csv')"
                   name="file"
-                  outlined
                   prepend-icon=""
                   prepend-inner-icon="fas fa-file-csv"
+                  variant="outlined"
                   @change="form.errors.clear('file')"
                 />
               </v-col>
               <v-col cols="12" sm="auto">
-                <v-btn block color="primary" :disabled="jobInProgress" type="submit" x-large>
-                  <v-icon left>
-                    $upload
-                  </v-icon>
+                <v-btn block color="primary" :disabled="jobInProgress" size="x-large" type="submit">
+                  <v-icon icon="$upload" start />
                   {{ $t('surveys.respondents.upload.submit') }}
                 </v-btn>
               </v-col>
@@ -50,7 +44,7 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn class="font-weight-bold" color="info" text @click.stop="close">
+          <v-btn class="font-weight-bold" color="info" variant="text" @click.stop="close">
             {{ $t('common.action.close') }}
           </v-btn>
         </v-card-actions>
diff --git a/apps/admin/src/views/surveys/sessions/browse.vue b/apps/admin/src/views/surveys/sessions/browse.vue
index d2f7ec0027..e0cb1d08ac 100644
--- a/apps/admin/src/views/surveys/sessions/browse.vue
+++ b/apps/admin/src/views/surveys/sessions/browse.vue
@@ -10,35 +10,31 @@
       <template #[`item.action`]="{ item }">
         <v-btn
           color="secondary"
-          icon
+          icon="$read"
           :title="$t('common.action.read')"
           @click.stop="detail(item.id)"
-        >
-          <v-icon>$read</v-icon>
-        </v-btn>
+        />
         <confirm-dialog
           color="error"
           icon
           icon-left="$delete"
-          :label="$t('common.action.delete').toString()"
+          :label="$t('common.action.delete')"
           @confirm="remove(item.id)"
         >
           {{ $t('common.action.confirm.delete', { name: item.id }) }}
         </confirm-dialog>
       </template>
     </embedded-data-table>
-    <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
+    <v-dialog v-model="dialog" fullscreen :scrim="false" transition="dialog-bottom-transition">
       <v-card tile>
         <v-toolbar color="secondary" dark>
-          <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-            <v-icon>$cancel</v-icon>
-          </v-btn>
+          <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
           <v-toolbar-title>
             {{ selected.id }}
           </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>
@@ -49,10 +45,11 @@
 import { defineComponent, ref } from 'vue';
 
 import type { SurveyEntry, SurveySubmissionEntry } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { JsonEditor } from '@intake24/admin/components/editors';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useDateTime, useEntry, useEntryFetch } from '@intake24/admin/composables';
+import { useI18n } from '@intake24/i18n';
 import { ConfirmDialog } from '@intake24/ui';
 import { useMessages } from '@intake24/ui/stores';
 
@@ -64,61 +61,64 @@ export default defineComponent({
   mixins: [detailMixin],
 
   setup(props) {
+    const { i18n: { t } } = useI18n();
     const { formatDateTime } = useDateTime();
 
     const { entry, entryLoaded } = useEntry<SurveyEntry>(props);
     useEntryFetch(props);
 
+    const headers: DataTableHeader[] = [
+      {
+        title: t('surveys.sessions.id'),
+        sortable: true,
+        key: 'id',
+        align: 'start',
+      },
+      {
+        title: t('users.id'),
+        sortable: true,
+        key: 'userId',
+        align: 'start',
+      },
+      {
+        title: t('users.aliases.username'),
+        sortable: true,
+        key: 'username',
+        align: 'start',
+      },
+      {
+        title: t('common.createdAt'),
+        sortable: true,
+        key: 'createdAt',
+        align: 'start',
+      },
+      {
+        title: t('common.updatedAt'),
+        sortable: true,
+        key: 'updatedAt',
+        align: 'start',
+      },
+      {
+        title: t('common.action._'),
+        sortable: false,
+        key: 'action',
+        align: 'end',
+      },
+    ];
+
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
 
     return {
-      formatDateTime,
       entry,
       entryLoaded,
+      formatDateTime,
+      headers,
       table,
     };
   },
 
   data() {
     return {
-      headers: [
-        {
-          text: this.$t('surveys.sessions.id'),
-          sortable: true,
-          value: 'id',
-          align: 'start',
-        },
-        {
-          text: this.$t('users.id'),
-          sortable: true,
-          value: 'userId',
-          align: 'start',
-        },
-        {
-          text: this.$t('users.aliases.username'),
-          sortable: true,
-          value: 'username',
-          align: 'start',
-        },
-        {
-          text: this.$t('common.createdAt'),
-          sortable: true,
-          value: 'createdAt',
-          align: 'start',
-        },
-        {
-          text: this.$t('common.updatedAt'),
-          sortable: true,
-          value: 'updatedAt',
-          align: 'start',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
       dialog: false,
       selected: {} as SurveySubmissionEntry,
     };
@@ -152,7 +152,7 @@ export default defineComponent({
 
     async remove(submissionId: string) {
       await this.$http.delete(`${this.baseAPI}/${submissionId}`);
-      useMessages().success(this.$t(`common.msg.deleted`, { name: submissionId }).toString());
+      useMessages().success(this.$t(`common.msg.deleted`, { name: submissionId }));
       await this.table?.fetch();
     },
   },
diff --git a/apps/admin/src/views/surveys/submissions/browse.vue b/apps/admin/src/views/surveys/submissions/browse.vue
index 386ce9838b..d2c2a62037 100644
--- a/apps/admin/src/views/surveys/submissions/browse.vue
+++ b/apps/admin/src/views/surveys/submissions/browse.vue
@@ -10,35 +10,31 @@
       <template #[`item.action`]="{ item }">
         <v-btn
           color="secondary"
-          icon
+          icon="$read"
           :title="$t('common.action.read')"
           @click.stop="detail(item.id)"
-        >
-          <v-icon>$read</v-icon>
-        </v-btn>
+        />
         <confirm-dialog
           color="error"
           icon
           icon-left="$delete"
-          :label="$t('common.action.delete').toString()"
+          :label="$t('common.action.delete')"
           @confirm="remove(item.id)"
         >
           {{ $t('common.action.confirm.delete', { name: item.id }) }}
         </confirm-dialog>
       </template>
     </embedded-data-table>
-    <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
+    <v-dialog v-model="dialog" fullscreen :scrim="false" transition="dialog-bottom-transition">
       <v-card tile>
         <v-toolbar color="secondary" dark>
-          <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-            <v-icon>$cancel</v-icon>
-          </v-btn>
+          <v-btn icon="$cancel" :title="$t('common.action.cancel')" variant="plain" @click.stop="close" />
           <v-toolbar-title>
             {{ selected.id }}
           </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>
@@ -49,10 +45,11 @@
 import { defineComponent, ref } from 'vue';
 
 import type { SurveyEntry, SurveySubmissionEntry } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { JsonEditor } from '@intake24/admin/components/editors';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useDateTime, useEntry, useEntryFetch } from '@intake24/admin/composables';
+import { useI18n } from '@intake24/i18n';
 import { ConfirmDialog } from '@intake24/ui';
 import { useMessages } from '@intake24/ui/stores';
 
@@ -64,61 +61,64 @@ export default defineComponent({
   mixins: [detailMixin],
 
   setup(props) {
+    const { i18n: { t } } = useI18n();
     const { formatDateTime } = useDateTime();
 
     const { entry, entryLoaded } = useEntry<SurveyEntry>(props);
     useEntryFetch(props);
 
+    const headers: DataTableHeader[] = [
+      {
+        title: t('surveys.submissions.id'),
+        sortable: true,
+        key: 'id',
+        align: 'start',
+      },
+      {
+        title: t('users.id'),
+        sortable: true,
+        key: 'userId',
+        align: 'start',
+      },
+      {
+        title: t('users.aliases.username'),
+        sortable: true,
+        key: 'username',
+        align: 'start',
+      },
+      {
+        title: t('surveys.submissions.startTime'),
+        sortable: true,
+        key: 'startTime',
+        align: 'start',
+      },
+      {
+        title: t('surveys.submissions.endTime'),
+        sortable: true,
+        key: 'endTime',
+        align: 'start',
+      },
+      {
+        title: t('common.action._'),
+        sortable: false,
+        key: 'action',
+        align: 'end',
+      },
+    ];
+
     const table = ref<InstanceType<typeof EmbeddedDataTable>>();
 
     return {
       formatDateTime,
       entry,
       entryLoaded,
+      headers,
       table,
     };
   },
 
   data() {
     return {
-      headers: [
-        {
-          text: this.$t('surveys.submissions.id'),
-          sortable: true,
-          value: 'id',
-          align: 'start',
-        },
-        {
-          text: this.$t('users.id'),
-          sortable: true,
-          value: 'userId',
-          align: 'start',
-        },
-        {
-          text: this.$t('users.aliases.username'),
-          sortable: true,
-          value: 'username',
-          align: 'start',
-        },
-        {
-          text: this.$t('surveys.submissions.startTime'),
-          sortable: true,
-          value: 'startTime',
-          align: 'start',
-        },
-        {
-          text: this.$t('surveys.submissions.endTime'),
-          sortable: true,
-          value: 'endTime',
-          align: 'start',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
       dialog: false,
       selected: {} as SurveySubmissionEntry,
     };
@@ -152,7 +152,7 @@ export default defineComponent({
 
     async remove(submissionId: string) {
       await this.$http.delete(`${this.baseAPI}/${submissionId}`);
-      useMessages().success(this.$t(`common.msg.deleted`, { name: submissionId }).toString());
+      useMessages().success(this.$t(`common.msg.deleted`, { name: submissionId }));
       await this.table?.fetch();
     },
   },
diff --git a/apps/admin/src/views/surveys/tasks/browse.vue b/apps/admin/src/views/surveys/tasks/browse.vue
index 5ca0879f56..613ab29cf4 100644
--- a/apps/admin/src/views/surveys/tasks/browse.vue
+++ b/apps/admin/src/views/surveys/tasks/browse.vue
@@ -1,7 +1,7 @@
 <template>
   <layout v-bind="{ id, entry }">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-row>
           <v-col cols="12" md="6">
             <v-card-title>{{ $t('surveys.tasks.title') }}</v-card-title>
@@ -12,9 +12,9 @@
                 :items="jobTypeList"
                 :label="$t('surveys.tasks._')"
                 name="job"
-                outlined
                 prepend-inner-icon="$jobs"
-                @change="updateJob"
+                variant="outlined"
+                @update:model-value="updateJob"
               />
             </v-card-text>
           </v-col>
@@ -26,7 +26,7 @@
               :disabled="disabledJobParams[form.type]"
               :errors="form.errors"
               name="params"
-              @input="form.errors.clear(paramErrors)"
+              @update:model-value="form.errors.clear(paramErrors)"
             />
           </v-col>
         </v-row>
@@ -36,13 +36,11 @@
               block
               color="primary"
               :disabled="form.errors.any() || jobInProgress || isAppLoading"
+              size="x-large"
               :title="$t('common.action.upload')"
               type="submit"
-              x-large
             >
-              <v-icon left>
-                fas fa-play
-              </v-icon>{{ $t('common.action.submit') }}
+              <v-icon icon="fas fa-play" start />{{ $t('common.action.submit') }}
             </v-btn>
           </v-col>
         </v-row>
@@ -78,7 +76,7 @@ export default defineComponent({
   setup(props) {
     const { i18n } = useI18n();
     const jobTypeList = computed(() =>
-      surveyJobs.map(value => ({ value, text: i18n.t(`jobs.types.${value}._`) })),
+      surveyJobs.map(value => ({ value, title: i18n.t(`jobs.types.${value}._`) })),
     );
     const jobQuery = computed(() => ({ surveyId: props.id }));
 
@@ -89,8 +87,8 @@ export default defineComponent({
       SurveyAuthUrlsExport: { surveyId: props.id },
       SurveyDataExport: {
         surveyId: props.id,
-        startDate: new Date(entry.value.startDate),
-        endDate: new Date(entry.value.endDate),
+        startDate: entry.value.startDate,
+        endDate: entry.value.endDate,
       },
       SurveyNutrientsRecalculation: { surveyId: props.id },
       SurveyRatingsExport: { surveyId: props.id },
diff --git a/apps/admin/src/views/tasks/browse.vue b/apps/admin/src/views/tasks/browse.vue
index 3241c45e7a..226faa5f54 100644
--- a/apps/admin/src/views/tasks/browse.vue
+++ b/apps/admin/src/views/tasks/browse.vue
@@ -14,59 +14,51 @@
   </data-table>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import cronstrue from 'cronstrue';
-import { defineComponent } from 'vue';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-export default defineComponent({
-  name: 'TaskList',
+defineOptions({ name: 'TaskList' });
 
-  components: { DataTable },
+const { i18n: { t } } = useI18n();
 
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('tasks.job'),
-          sortable: true,
-          value: 'job',
-        },
-        {
-          text: this.$t('tasks.schedule'),
-          sortable: false,
-          value: 'schedule',
-        },
-        {
-          text: this.$t('tasks.cron'),
-          sortable: false,
-          value: 'cron',
-        },
-        {
-          text: this.$t('common.action.active'),
-          sortable: false,
-          value: 'active',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.name'),
+    sortable: true,
+    key: 'name',
   },
-
-  methods: {
-    readableCron(cron: string): string {
-      return cronstrue.toString(cron, { use24HourTimeFormat: true });
-    },
+  {
+    title: t('tasks.job'),
+    sortable: true,
+    key: 'job',
+  },
+  {
+    title: t('tasks.schedule'),
+    sortable: false,
+    key: 'schedule',
+  },
+  {
+    title: t('tasks.cron'),
+    sortable: false,
+    key: 'cron',
   },
-});
+  {
+    title: t('common.action.active'),
+    sortable: false,
+    key: 'active',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
+  },
+];
+
+function readableCron(cron: string) {
+  return cronstrue.toString(cron, { use24HourTimeFormat: true });
+}
 </script>
diff --git a/apps/admin/src/views/tasks/form.vue b/apps/admin/src/views/tasks/form.vue
index bdb5e10152..60885929e7 100644
--- a/apps/admin/src/views/tasks/form.vue
+++ b/apps/admin/src/views/tasks/form.vue
@@ -1,19 +1,19 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <template #actions>
       <confirm-dialog
         v-if="!isCreate && can({ action: 'edit' })"
         :activator-class="['ml-2']"
         color="primary"
         icon-left="fas fa-play"
-        :label="$t('tasks.run._').toString()"
+        :label="$t('tasks.run._')"
         @confirm="triggerJob"
       >
         {{ $t('tasks.run.confirm') }}
       </confirm-dialog>
     </template>
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12" md="6">
@@ -23,7 +23,7 @@
                 hide-details="auto"
                 :label="$t('common.name')"
                 name="name"
-                outlined
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -34,9 +34,9 @@
                 :items="jobs"
                 :label="$t('tasks.job')"
                 name="job"
-                outlined
                 prepend-inner-icon="$jobs"
-                @change="jobChanged"
+                variant="outlined"
+                @update:model-value="jobChanged"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -46,8 +46,8 @@
                 hide-details="auto"
                 :label="$t('tasks.cron')"
                 name="cron"
-                outlined
                 prepend-inner-icon="far fa-clock"
+                variant="outlined"
               >
                 <template #append>
                   <pre>{{ readableCron }}</pre>
@@ -56,7 +56,7 @@
             </v-col>
             <v-col v-if="form.active" cols="12" md="6">
               <div class="d-flex align-center" style="height: 100%">
-                <span v-if="entry.bullJob" class="subtitle-1">
+                <span v-if="entry.bullJob" class="text-subtitle-1">
                   {{ $t('tasks.run.next') }}: {{ formatDateTime(new Date(entry.bullJob.next)) }}
                 </span>
               </div>
@@ -77,8 +77,8 @@
                 hide-details="auto"
                 :label="$t('common.description')"
                 name="description"
-                outlined
                 prepend-inner-icon="$description"
+                variant="outlined"
               />
             </v-col>
           </v-row>
@@ -88,7 +88,7 @@
             v-model="form.params"
             :errors="form.errors"
             name="params"
-            @input="form.errors.clear(paramErrors)"
+            @update:model-value="form.errors.clear(paramErrors)"
           />
           <submit-footer :disabled="form.errors.any()" />
         </v-card-text>
@@ -141,7 +141,7 @@ export default defineComponent({
     useEntryFetch(props);
 
     const jobs = computed(() =>
-      jobTypes.map(value => ({ value, text: i18n.t(`jobs.types.${value}._`).toString() })),
+      jobTypes.map(value => ({ value, title: i18n.t(`jobs.types.${value}._`) })),
     );
 
     const { clearError, form, routeLeave, submit } = useEntryForm<TaskForm, TaskResponse>(props, {
@@ -184,7 +184,7 @@ export default defineComponent({
         return cronstrue.toString(this.form.cron, { use24HourTimeFormat: true });
       }
       catch {
-        return this.$t('tasks.invalidCron').toString();
+        return this.$t('tasks.invalidCron');
       }
     },
   },
diff --git a/apps/admin/src/views/tasks/read.vue b/apps/admin/src/views/tasks/read.vue
index 6a5444191f..342741f402 100644
--- a/apps/admin/src/views/tasks/read.vue
+++ b/apps/admin/src/views/tasks/read.vue
@@ -6,13 +6,13 @@
         :activator-class="['ml-2']"
         color="primary"
         icon-left="fas fa-play"
-        :label="$t('tasks.run._').toString()"
+        :label="$t('tasks.run._')"
         @confirm="triggerJob"
       >
         {{ $t('tasks.run.confirm') }}
       </confirm-dialog>
     </template>
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.name') }}</th>
@@ -31,10 +31,10 @@
         <tr>
           <th>{{ $t('common.action.active') }}</th>
           <td>
-            <v-icon v-if="entry.active" color="success" left>
+            <v-icon v-if="entry.active" color="success" start>
               $check
             </v-icon>
-            <v-icon v-else color="error" left>
+            <v-icon v-else color="error" start>
               $times
             </v-icon>
             {{ $t(`common.${entry.active}`) }}
@@ -49,7 +49,7 @@
           <td>{{ entry.description }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/user/jobs/browse.vue b/apps/admin/src/views/user/jobs/browse.vue
index 92e0c4306d..dc291edbfd 100644
--- a/apps/admin/src/views/user/jobs/browse.vue
+++ b/apps/admin/src/views/user/jobs/browse.vue
@@ -1,75 +1,59 @@
 <template>
-  <div>
-    <h2 class="mb-4">
-      {{ $t('user.profile') }}
-    </h2>
-    <data-table :actions="['create', 'download', 'read']" api-url="admin/user/jobs" :headers="headers">
-      <template #[`item.successful`]="{ item }">
-        <v-icon v-if="item.successful" color="success">
-          $check
-        </v-icon>
-        <v-icon v-else color="error">
-          $times
-        </v-icon>
-      </template>
-      <template #[`item.startedAt`]="{ item }">
-        {{ formatDateTime(item.startedAt) }}
-      </template>
-    </data-table>
-  </div>
+  <h2 class="mb-4">
+    {{ $t('user.profile') }}
+  </h2>
+  <data-table :actions="['create', 'download', 'read']" api-url="admin/user/jobs" :headers="headers">
+    <template #[`item.successful`]="{ item }">
+      <v-icon v-if="item.successful" color="success">
+        $check
+      </v-icon>
+      <v-icon v-else color="error">
+        $times
+      </v-icon>
+    </template>
+    <template #[`item.startedAt`]="{ item }">
+      {{ formatDateTime(item.startedAt) }}
+    </template>
+  </data-table>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import { DataTable } from '@intake24/admin/components/data-tables';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
 import { useDateTime } from '@intake24/admin/composables';
+import { useI18n } from '@intake24/i18n';
 
-export default defineComponent({
-  name: 'UserJobList',
-
-  components: { DataTable },
+defineOptions({ name: 'UserJobList' });
 
-  setup() {
-    const { formatDateTime } = useDateTime();
+const { i18n: { t } } = useI18n();
+const { formatDateTime } = useDateTime();
 
-    return {
-      formatDateTime,
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('common.id'),
+    sortable: true,
+    key: 'id',
   },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('common.id'),
-          sortable: true,
-          value: 'id',
-        },
-        {
-          text: this.$t('common.type'),
-          sortable: true,
-          value: 'type',
-        },
-        {
-          text: this.$t('common.startedAt'),
-          sortable: true,
-          value: 'startedAt',
-        },
-        {
-          text: this.$t('common.status'),
-          sortable: false,
-          value: 'successful',
-          align: 'center',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+  {
+    title: t('common.type'),
+    sortable: true,
+    key: 'type',
+  },
+  {
+    title: t('common.startedAt'),
+    sortable: true,
+    key: 'startedAt',
+  },
+  {
+    title: t('common.status'),
+    sortable: false,
+    key: 'successful',
+    align: 'center',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/user/jobs/create.vue b/apps/admin/src/views/user/jobs/create.vue
index 268e00a9eb..38ce839975 100644
--- a/apps/admin/src/views/user/jobs/create.vue
+++ b/apps/admin/src/views/user/jobs/create.vue
@@ -1,22 +1,20 @@
 <template>
   <div>
-    <v-card class="mb-4" outlined>
+    <v-card border class="mb-4">
       <v-toolbar flat>
         <v-btn color="white" :title="$t(`common.action.back`)" :to="{ name: 'user.jobs' }">
-          <v-icon left>
-            $back
-          </v-icon>{{ $t(`common.action.back`) }}
+          <v-icon icon="$back" start />{{ $t(`common.action.back`) }}
         </v-btn>
       </v-toolbar>
     </v-card>
-    <v-card :flat="isMobile" :outlined="!isMobile" :tile="isMobile">
-      <v-tabs background-color="primary" dark>
+    <v-card :border="!$vuetify.display.mobile" :flat="$vuetify.display.mobile" :tile="$vuetify.display.mobile">
+      <v-tabs bg-color="primary">
         <v-tab :key="$t('user.jobs.create')" :title="$t('user.jobs.create')">
           {{ $t('user.jobs.create') }}
         </v-tab>
       </v-tabs>
       <v-container fluid>
-        <v-form @keydown.native="clearError" @submit.prevent="submit">
+        <v-form @keydown="clearError" @submit.prevent="submit">
           <v-row>
             <v-col cols="12" md="6">
               <v-card-title>{{ $t('user.jobs.title') }}</v-card-title>
@@ -27,9 +25,9 @@
                   :items="jobTypeList"
                   :label="$t('user.jobs._')"
                   name="job"
-                  outlined
                   prepend-inner-icon="$jobs"
-                  @change="updateJob"
+                  variant="outlined"
+                  @update:model-value="updateJob"
                 />
               </v-card-text>
             </v-col>
@@ -41,7 +39,7 @@
                 :disabled="disabledJobParams[form.type]"
                 :errors="form.errors"
                 name="params"
-                @input="form.errors.clear(paramErrors)"
+                @update:model-value="form.errors.clear(paramErrors)"
               />
             </v-col>
           </v-row>
@@ -51,13 +49,11 @@
                 block
                 color="primary"
                 :disabled="form.errors.any() || jobInProgress || isAppLoading"
+                size="x-large"
                 :title="$t('common.action.upload')"
                 type="submit"
-                x-large
               >
-                <v-icon left>
-                  fas fa-play
-                </v-icon>{{ $t('common.action.submit') }}
+                <v-icon icon="fas fa-play" start />{{ $t('common.action.submit') }}
               </v-btn>
             </v-col>
           </v-row>
@@ -95,7 +91,7 @@ export default defineComponent({
     const { i18n } = useI18n();
 
     const jobTypeList = computed(() =>
-      userJobs.map(value => ({ value, text: i18n.t(`jobs.types.${value}._`) })),
+      userJobs.map(value => ({ value, title: i18n.t(`jobs.types.${value}._`) })),
     );
 
     const defaultJobsParams = computed<Pick<JobParams, UserJob>>(() => ({
diff --git a/apps/admin/src/views/user/jobs/read.vue b/apps/admin/src/views/user/jobs/read.vue
index e9d5d53f1c..893999d295 100644
--- a/apps/admin/src/views/user/jobs/read.vue
+++ b/apps/admin/src/views/user/jobs/read.vue
@@ -6,13 +6,13 @@
         :activator-class="['ml-2']"
         color="primary"
         icon-left="fas fa-play"
-        :label="$t('jobs.repeat._').toString()"
+        :label="$t('jobs.repeat._')"
         @confirm="repeat"
       >
         {{ $t('jobs.repeat.confirm') }}
       </confirm-dialog>
     </template>
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('common.id') }}</th>
@@ -34,8 +34,7 @@
               v-if="downloadUrlAvailable(entry)"
               class="ml-2"
               icon
-              large
-              link
+              size="large"
               :title="$t('common.action.download')"
               @click="download(entry)"
             >
@@ -52,10 +51,10 @@
           <td>{{ entry.progress }}</td>
           <th>{{ $t('jobs.successful') }}</th>
           <td>
-            <v-icon v-if="entry.successful" color="success" left>
+            <v-icon v-if="entry.successful" color="success" start>
               $check
             </v-icon>
-            <v-icon v-else color="error" left>
+            <v-icon v-else color="error" start>
               $times
             </v-icon>
             {{ $t(`common.${entry.successful}`) }}
@@ -94,7 +93,7 @@
           </td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
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 bdae7021c2..31ab97e9c1 100644
--- a/apps/admin/src/views/user/personal-access-tokens/browse.vue
+++ b/apps/admin/src/views/user/personal-access-tokens/browse.vue
@@ -1,151 +1,142 @@
 <template>
-  <div>
-    <h2 class="mb-4">
-      {{ $t('user.profile') }}
-    </h2>
-    <v-card :flat="isMobile" :outlined="!isMobile" :tile="isMobile">
-      <v-toolbar flat>
-        <v-toolbar-title class="font-weight-medium text-h6">
-          <slot name="title">
-            {{ $t('user.personalAccessTokens.title') }}
-          </slot>
-        </v-toolbar-title>
-        <v-spacer />
-        <v-dialog v-model="dialog" max-width="500px" persistent>
-          <template #activator="{ attrs, on }">
-            <v-btn
-              v-bind="attrs"
-              color="primary"
-              fab
-              small
-              :title="$t('user.personalAccessTokens.issue')"
-              v-on="on"
-            >
-              <v-icon>$add</v-icon>
-            </v-btn>
-          </template>
-          <v-card :loading="false" :tile="$vuetify.breakpoint.smAndDown">
-            <v-toolbar color="secondary" dark flat>
-              <v-btn dark icon :title="$t('common.action.close')" @click.stop="close">
-                <v-icon>$cancel</v-icon>
+  <h2 class="mb-4">
+    {{ $t('user.profile') }}
+  </h2>
+  <v-card :border="!$vuetify.display.mobile" :flat="$vuetify.display.mobile" :tile="$vuetify.display.mobile">
+    <v-toolbar flat>
+      <v-toolbar-title class="font-weight-medium text-h6">
+        <slot name="title">
+          {{ $t('user.personalAccessTokens.title') }}
+        </slot>
+      </v-toolbar-title>
+      <v-spacer />
+      <v-dialog v-model="dialog" max-width="500px" persistent>
+        <template #activator="{ props }">
+          <v-btn
+            color="primary"
+            icon
+            :title="$t('user.personalAccessTokens.issue')"
+            v-bind="props"
+          >
+            <v-icon color="white">
+              $add
+            </v-icon>
+          </v-btn>
+        </template>
+        <v-card :loading="false" :tile="$vuetify.display.smAndDown">
+          <v-toolbar color="secondary" dark flat>
+            <v-btn icon="$cancel" :title="$t('common.action.close')" @click.stop="close" />
+            <v-toolbar-title>{{ $t('user.personalAccessTokens.issue') }}</v-toolbar-title>
+          </v-toolbar>
+          <v-card-text class="pa-6">
+            <template v-if="jwt">
+              <v-alert class="mb-4" type="warning">
+                {{ $t('user.personalAccessTokens.save') }}
+              </v-alert>
+              <v-textarea
+                auto-grow
+                class="mb-4"
+                hide-details
+                :model-value="jwt"
+                name="jwt"
+                readonly
+                variant="outlined"
+              />
+              <v-btn block color="info" size="large" @click="toClipboard(jwt)">
+                <v-icon icon="fas fa-clipboard" start />
+                {{ $t('common.clipboard._') }}
               </v-btn>
-              <v-toolbar-title>{{ $t('user.personalAccessTokens.issue') }}</v-toolbar-title>
-            </v-toolbar>
-            <v-card-text class="pa-6">
-              <template v-if="jwt">
-                <v-alert type="warning">
-                  {{ $t('user.personalAccessTokens.save') }}
-                </v-alert>
-                <v-textarea
-                  auto-grow
-                  class="mb-4"
-                  hide-details
-                  name="jwt"
-                  outlined
-                  readonly
-                  :value="jwt"
-                />
-                <v-btn block color="info" large @click="toClipboard(jwt)">
-                  <v-icon left>
-                    fas fa-clipboard
-                  </v-icon>
-                  {{ $t('common.clipboard._') }}
-                </v-btn>
-              </template>
-              <v-form v-else @keydown.native="clearError" @submit.prevent="submit">
-                <v-text-field
-                  v-model="form.name"
-                  class="mb-4"
-                  :error-messages="form.errors.get('name')"
-                  hide-details="auto"
-                  :label="$t('common.name')"
-                  name="name"
-                  outlined
-                />
-                <v-text-field
-                  append-icon="fas fa-calendar-alt"
-                  class="mb-4"
+            </template>
+            <v-form v-else @keydown="clearError" @submit.prevent="submit">
+              <v-text-field
+                v-model="form.name"
+                class="mb-4"
+                :error-messages="form.errors.get('name')"
+                hide-details="auto"
+                :label="$t('common.name')"
+                name="name"
+                variant="outlined"
+              />
+              <v-text-field
+                append-icon="fas fa-calendar-alt"
+                class="mb-4"
+                :error-messages="form.errors.get('expiresAt')"
+                hide-details="auto"
+                :label="$t('common.expiresAt')"
+                :model-value="formatDate(form.expiresAt, 'dd/MM/yyyy')"
+                name="expiresAt"
+                readonly
+                variant="outlined"
+                @click:append="datePicker = !datePicker"
+                @focusin="datePicker = true"
+              />
+              <v-expand-transition>
+                <v-date-picker
+                  v-show="datePicker"
+                  v-model="form.expiresAt"
                   :error-messages="form.errors.get('expiresAt')"
                   hide-details="auto"
-                  :label="$t('common.expiresAt')"
-                  name="name"
-                  outlined
-                  readonly
-                  :value="formatDate(form.expiresAt, 'dd/MM/yyyy')"
-                  @click:append="datePicker = !datePicker"
-                  @focusin="datePicker = true"
+                  name="expiresAt"
+                  scrollable
+                  width="auto"
+                  @update:model-value="datePicker = false"
                 />
-                <v-expand-transition>
-                  <v-date-picker
-                    v-show="datePicker"
-                    v-model="form.expiresAt"
-                    :error-messages="form.errors.get('expiresAt')"
-                    hide-details="auto"
-                    name="expiresAt"
-                    scrollable
-                    width="auto"
-                    @input="datePicker = false"
-                  />
-                </v-expand-transition>
-                <v-btn
-                  block
-                  color="primary"
-                  large
-                  :title="$t('user.personalAccessTokens.issue')"
-                  type="submit"
-                >
-                  {{ $t('user.personalAccessTokens.issue') }}
-                </v-btn>
-              </v-form>
-            </v-card-text>
-          </v-card>
-        </v-dialog>
-      </v-toolbar>
-      <v-list two-line>
-        <v-list-item
-          v-for="(token, idx) in tokens"
-          :key="token.id"
-          class="list-item-border"
-          :disabled="token.revoked"
-          link
-        >
-          <v-list-item-avatar>
-            <v-icon class="secondary" dark>
-              fas fa-key
-            </v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>{{ token.name }}</v-list-item-title>
-            <v-list-item-subtitle v-if="token.revoked">
-              {{ $t('user.personalAccessTokens.revoked') }}
-            </v-list-item-subtitle>
-            <v-list-item-subtitle v-else>
-              {{ $t('common.expiresAt') }}: {{ formatDate(token.expiresAt, 'dd/MM/yyyy') }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+              </v-expand-transition>
+              <v-btn
+                block
+                color="primary"
+                size="large"
+                :title="$t('user.personalAccessTokens.issue')"
+                type="submit"
+              >
+                {{ $t('user.personalAccessTokens.issue') }}
+              </v-btn>
+            </v-form>
+          </v-card-text>
+        </v-card>
+      </v-dialog>
+    </v-toolbar>
+    <v-list class="list-border" lines="two">
+      <v-list-item
+        v-for="(token, idx) in tokens"
+        :key="token.id"
+        :disabled="token.revoked"
+        link
+      >
+        <template #prepend>
+          <v-avatar color="secondary" icon="fas fa-key" />
+        </template>
+        <v-list-item-title>{{ token.name }}</v-list-item-title>
+        <v-list-item-subtitle v-if="token.revoked">
+          {{ $t('user.personalAccessTokens.revoked') }}
+        </v-list-item-subtitle>
+        <v-list-item-subtitle v-else>
+          {{ $t('common.expiresAt') }}: {{ formatDate(token.expiresAt, 'dd/MM/yyyy') }}
+        </v-list-item-subtitle>
+        <template #append>
           <v-list-item-action>
-            <v-icon
+            <v-btn
               v-if="token.revoked"
-              color="secondary"
-              :title="$t('user.personalAccessTokens.revoked').toString()"
-            >
-              fas fa-ban
-            </v-icon>
+              color="error"
+              disabled
+              icon="fas fa-ban"
+              :title="$t('user.personalAccessTokens.revoked')"
+            />
             <confirm-dialog
               v-else
               color="error"
               icon
               icon-left="$delete"
-              :label="$t('user.personalAccessTokens.revoke').toString()"
+              :label="$t('user.personalAccessTokens.revoke')"
               @confirm="revoke(idx)"
             >
               {{ $t('common.action.confirm.revoke', { name: token.name }) }}
             </confirm-dialog>
           </v-list-item-action>
-        </v-list-item>
-      </v-list>
-    </v-card>
-  </div>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-card>
 </template>
 
 <script lang="ts">
@@ -181,7 +172,7 @@ export default defineComponent({
     const datePicker = ref(false);
 
     const { form, clearError } = useForm({
-      data: { name: '', expiresAt: addYears(new Date(), 1).toISOString().slice(0, 10) },
+      data: { name: '', expiresAt: addYears(new Date(), 1) },
     });
 
     const close = () => {
@@ -202,7 +193,7 @@ export default defineComponent({
       await http.delete(`admin/user/personal-access-tokens/${id}`);
       tokens.value[idx].revoked = true;
 
-      useMessages().success(i18n.t('common.msg.revoked', { name }).toString());
+      useMessages().success(i18n.t('common.msg.revoked', { name }));
     };
 
     const getTokens = async () => {
diff --git a/apps/admin/src/views/user/profile.vue b/apps/admin/src/views/user/profile.vue
index db4e39e852..92d16fca4b 100644
--- a/apps/admin/src/views/user/profile.vue
+++ b/apps/admin/src/views/user/profile.vue
@@ -3,123 +3,99 @@
     <h2 class="mb-4">
       {{ $t('user.profile') }}
     </h2>
-    <v-card v-if="profile" :flat="isMobile" :outlined="!isMobile" :tile="isMobile">
-      <v-list subheader two-line>
-        <v-subheader>{{ $t('user.info') }}</v-subheader>
+    <v-card v-if="profile" :border="!$vuetify.display.mobile" :flat="$vuetify.display.mobile" :tile="$vuetify.display.mobile">
+      <v-list lines="two">
+        <v-list-subheader>{{ $t('user.info') }}</v-list-subheader>
         <v-list-item>
-          <v-list-item-avatar>
-            <v-icon class="secondary" dark>
-              fas fa-envelope
-            </v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>{{ $t('user.email') }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ profile.email || $t('common.not.provided') }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+          <template #prepend>
+            <v-avatar color="secondary" icon="fas fa-envelope" />
+          </template>
+          <v-list-item-title>{{ $t('user.email') }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ profile.email || $t('common.not.provided') }}
+          </v-list-item-subtitle>
         </v-list-item>
         <v-list-item>
-          <v-list-item-avatar>
-            <v-icon class="secondary" dark>
-              fas fa-user
-            </v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>{{ $t('user.name') }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ profile.name || $t('common.not.provided') }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+          <template #prepend>
+            <v-avatar color="secondary" icon="fas fa-user" />
+          </template>
+          <v-list-item-title>{{ $t('user.name') }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ profile.name || $t('common.not.provided') }}
+          </v-list-item-subtitle>
         </v-list-item>
         <v-list-item>
-          <v-list-item-avatar>
-            <v-icon class="secondary" dark>
-              fas fa-phone
-            </v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>{{ $t('user.phone') }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ profile.phone ?? $t('common.not.provided') }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+          <template #prepend>
+            <v-avatar color="secondary" icon="fas fa-phone" />
+          </template>
+          <v-list-item-title>{{ $t('user.phone') }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ profile.phone ?? $t('common.not.provided') }}
+          </v-list-item-subtitle>
         </v-list-item>
         <v-list-item>
-          <v-list-item-avatar>
-            <v-icon class="secondary" dark>
-              fas fa-key
-            </v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>
-              <user-password :email="profile.email" />
-            </v-list-item-title>
-          </v-list-item-content>
+          <template #prepend>
+            <v-avatar color="secondary" icon="fas fa-key" />
+          </template>
+          <v-list-item-title>
+            <user-password :email="profile.email" />
+          </v-list-item-title>
         </v-list-item>
       </v-list>
       <v-divider />
-      <v-list subheader two-line>
-        <v-subheader>{{ $t('user.access') }}</v-subheader>
+      <v-list lines="two">
+        <v-list-subheader>{{ $t('user.access') }}</v-list-subheader>
         <v-list-item>
-          <v-list-item-avatar>
-            <v-icon class="secondary" dark>
-              fas fa-users
-            </v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>{{ $t('user.roles') }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ roles.length ? roles.join(', ') : '' }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+          <template #prepend>
+            <v-avatar color="secondary" icon="fas fa-users" />
+          </template>
+          <v-list-item-title>{{ $t('user.roles') }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ roles.length ? roles.join(', ') : '' }}
+          </v-list-item-subtitle>
         </v-list-item>
         <v-list-item>
-          <v-list-item-avatar>
-            <v-icon class="secondary" dark>
-              fas fa-eye-slash
-            </v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title>{{ $t('user.permissions') }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ permissions.length ? permissions.join(', ') : '' }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+          <template #prepend>
+            <v-avatar color="secondary" icon="fas fa-eye-slash" />
+          </template>
+          <v-list-item-title>{{ $t('user.permissions') }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ permissions.length ? permissions.join(', ') : '' }}
+          </v-list-item-subtitle>
         </v-list-item>
       </v-list>
       <v-divider />
       <v-row no-gutters>
         <v-col cols="12" md="6">
-          <v-list flat subheader two-line>
-            <v-subheader>{{ $t('user.settings') }}</v-subheader>
+          <v-list lines="two">
+            <v-list-subheader>{{ $t('user.settings') }}</v-list-subheader>
             <v-list-item>
-              <v-list-item-avatar>
-                <v-icon class="secondary" dark>
-                  fas fa-language
-                </v-icon>
-              </v-list-item-avatar>
-              <v-list-item-content>
-                <v-select
-                  hide-details="auto"
-                  item-text="englishName"
-                  item-value="code"
-                  :items="languages"
-                  :label="$t('user.languages._')"
-                  outlined
-                  :value="language"
-                  @change="updateLanguage"
-                >
-                  <template #item="{ item }">
-                    <span :class="`fi fi-${item.countryFlagCode} mr-3`" />
-                    {{ item.englishName }}
-                  </template>
-                  <template #selection="{ item }">
-                    <span :class="`fi fi-${item.countryFlagCode} mr-3`" />
-                    {{ item.englishName }}
-                  </template>
-                </v-select>
-              </v-list-item-content>
+              <template #prepend>
+                <v-avatar color="secondary" icon="fas fa-language" />
+              </template>
+              <v-select
+                hide-details="auto"
+                item-title="englishName"
+                item-value="code"
+                :items="languages"
+                :label="$t('user.languages._')"
+                :model-value="language"
+                variant="outlined"
+                @update:model-value="updateLanguage"
+              >
+                <template #item="{ item, props }">
+                  <v-list-item v-bind="props">
+                    <template #prepend>
+                      <span :class="`fi fi-${item.raw.countryFlagCode} mr-3`" />
+                    </template>
+                    <v-list-item-title>{{ item.raw.englishName }}</v-list-item-title>
+                  </v-list-item>
+                </template>
+                <template #selection="{ item }">
+                  <span :class="`fi fi-${item.raw.countryFlagCode} mr-3`" />
+                  {{ item.raw.englishName }}
+                </template>
+              </v-select>
             </v-list-item>
           </v-list>
         </v-col>
diff --git a/apps/admin/src/views/users/browse.vue b/apps/admin/src/views/users/browse.vue
index 35331bb062..20b2799308 100644
--- a/apps/admin/src/views/users/browse.vue
+++ b/apps/admin/src/views/users/browse.vue
@@ -2,37 +2,30 @@
   <data-table :headers="headers" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { DataTable, type DataTableHeader } from '@intake24/admin/components/data-tables';
+import { useI18n } from '@intake24/i18n';
 
-import { DataTable } from '@intake24/admin/components/data-tables';
+defineOptions({ name: 'UserList' });
 
-export default defineComponent({
-  name: 'UserList',
+const { i18n: { t } } = useI18n();
 
-  components: { DataTable },
-
-  data() {
-    return {
-      headers: [
-        {
-          text: this.$t('users.name'),
-          sortable: true,
-          value: 'name',
-        },
-        {
-          text: this.$t('common.email'),
-          sortable: true,
-          value: 'email',
-        },
-        {
-          text: this.$t('common.action._'),
-          sortable: false,
-          value: 'action',
-          align: 'right',
-        },
-      ],
-    };
+const headers: DataTableHeader[] = [
+  {
+    title: t('users.name'),
+    sortable: true,
+    key: 'name',
+  },
+  {
+    title: t('common.email'),
+    sortable: true,
+    key: 'email',
+  },
+  {
+    title: t('common.action._'),
+    sortable: false,
+    key: 'action',
+    align: 'end',
   },
-});
+];
 </script>
diff --git a/apps/admin/src/views/users/form.vue b/apps/admin/src/views/users/form.vue
index 4e8594ea46..ad19f68a28 100644
--- a/apps/admin/src/views/users/form.vue
+++ b/apps/admin/src/views/users/form.vue
@@ -1,7 +1,7 @@
 <template>
-  <layout v-if="entryLoaded" v-bind="{ id, entry }" :route-leave.sync="routeLeave" @save="submit">
+  <layout v-if="entryLoaded" v-bind="{ id, entry }" v-model:route-leave="routeLeave" @save="submit">
     <v-container fluid>
-      <v-form @keydown.native="clearError" @submit.prevent="submit">
+      <v-form @keydown="clearError" @submit.prevent="submit">
         <v-card-text>
           <v-row>
             <v-col cols="12">
@@ -11,8 +11,8 @@
                 hide-details="auto"
                 :label="$t('users.name')"
                 name="name"
-                outlined
                 prepend-inner-icon="fas fa-signature"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -23,8 +23,8 @@
                 hide-details="auto"
                 :label="$t('common.email')"
                 name="email"
-                outlined
                 prepend-inner-icon="fas fa-envelope"
+                variant="outlined"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -34,8 +34,8 @@
                 hide-details="auto"
                 :label="$t('common.phone')"
                 name="phone"
-                outlined
                 prepend-inner-icon="fas fa-phone"
+                variant="outlined"
               />
             </v-col>
             <template v-if="isCreate">
@@ -47,9 +47,9 @@
                   hide-details="auto"
                   :label="$t('common.password._')"
                   name="password"
-                  outlined
                   prepend-inner-icon="fas fa-key"
                   type="password"
+                  variant="outlined"
                 />
               </v-col>
               <v-col cols="12" md="6">
@@ -60,9 +60,9 @@
                   hide-details="auto"
                   :label="$t('common.password.confirm')"
                   name="passwordConfirm"
-                  outlined
                   prepend-inner-icon="fas fa-key"
                   type="password"
+                  variant="outlined"
                 />
               </v-col>
             </template>
@@ -71,19 +71,19 @@
                 v-model="form.roles"
                 :error-messages="form.errors.get('roles')"
                 hide-details="auto"
-                item-text="displayName"
+                item-title="displayName"
                 item-value="id"
                 :items="refs.roles"
                 :label="$t('users.roles._')"
                 multiple
                 name="roles"
-                outlined
                 prepend-inner-icon="$roles"
-                @change="form.errors.clear('roles')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('roles')"
               >
                 <template #selection="{ item, index }">
                   <template v-if="index === 0">
-                    <span v-if="form.roles.length === 1">{{ item.displayName }}</span>
+                    <span v-if="form.roles.length === 1">{{ item.raw.displayName }}</span>
                     <span v-if="form.roles.length > 1">{{ form.roles.length }} selected </span>
                   </template>
                 </template>
@@ -94,20 +94,20 @@
                 v-model="form.permissions"
                 :error-messages="form.errors.get('permissions')"
                 hide-details="auto"
-                item-text="displayName"
+                item-title="displayName"
                 item-value="id"
                 :items="refs.permissions"
                 :label="$t('users.permissions._')"
                 :messages="$t('users.permissions.hint')"
                 multiple
                 name="permissions"
-                outlined
                 prepend-inner-icon="$permissions"
-                @change="form.errors.clear('permissions')"
+                variant="outlined"
+                @update:model-value="form.errors.clear('permissions')"
               >
                 <template #selection="{ item, index }">
                   <template v-if="index === 0">
-                    <span v-if="form.permissions.length === 1">{{ item.displayName }}</span>
+                    <span v-if="form.permissions.length === 1">{{ item.raw.displayName }}</span>
                     <span v-if="form.permissions.length > 1">{{ form.permissions.length }} selected
                     </span>
                   </template>
@@ -121,7 +121,7 @@
                 hide-details="auto"
                 :label="$t('users.mfa._')"
                 name="multiFactorAuthentication"
-                @change="form.errors.clear('multiFactorAuthentication')"
+                @update:model-value="form.errors.clear('multiFactorAuthentication')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -131,7 +131,7 @@
                 hide-details="auto"
                 :label="$t('users.verified')"
                 name="verifiedAt"
-                @change="toggle('verifiedAt')"
+                @update:model-value="toggle('verifiedAt')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -141,7 +141,7 @@
                 hide-details="auto"
                 :label="$t('users.disabled')"
                 name="disabledAt"
-                @change="toggle('disabledAt')"
+                @update:model-value="toggle('disabledAt')"
               />
             </v-col>
           </v-row>
@@ -153,7 +153,7 @@
                 hide-details="auto"
                 :label="$t('users.notifications.email')"
                 name="emailNotifications"
-                @change="form.errors.clear('emailNotifications')"
+                @update:model-value="form.errors.clear('emailNotifications')"
               />
             </v-col>
             <v-col cols="12" md="6">
@@ -163,7 +163,7 @@
                 hide-details="auto"
                 :label="$t('users.notifications.sms')"
                 name="smsNotifications"
-                @change="form.errors.clear('smsNotifications')"
+                @update:model-value="form.errors.clear('smsNotifications')"
               />
             </v-col>
           </v-row>
diff --git a/apps/admin/src/views/users/permissions/browse.vue b/apps/admin/src/views/users/permissions/browse.vue
index f94024314b..531a5d5639 100644
--- a/apps/admin/src/views/users/permissions/browse.vue
+++ b/apps/admin/src/views/users/permissions/browse.vue
@@ -18,7 +18,7 @@
 import { defineComponent } from 'vue';
 
 import type { UserEntry } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { Edit, Read } from '@intake24/admin/components/data-tables/action-bar';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch } from '@intake24/admin/composables';
@@ -38,10 +38,10 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`permissions|${action}`));
 
-    const headers = [
-      { text: i18n.t('common.name'), sortable: true, value: 'name' },
-      { text: i18n.t('common.displayName'), sortable: true, value: 'displayName' },
-      { text: i18n.t('common.action._'), sortable: false, value: 'action', align: 'right' },
+    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);
diff --git a/apps/admin/src/views/users/read.vue b/apps/admin/src/views/users/read.vue
index 52f2e06870..b0bcee69ad 100644
--- a/apps/admin/src/views/users/read.vue
+++ b/apps/admin/src/views/users/read.vue
@@ -1,6 +1,6 @@
 <template>
   <layout v-if="entryLoaded" v-bind="{ id, entry }">
-    <v-simple-table>
+    <v-table>
       <tbody>
         <tr>
           <th>{{ $t('users.name') }}</th>
@@ -39,11 +39,11 @@
           <td>{{ entry.smsNotifications ? $t('common.yes') : $t('common.no') }}</td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
     <v-card-title>
       {{ $t('users.customFields.title') }}
     </v-card-title>
-    <v-simple-table>
+    <v-table>
       <thead>
         <tr>
           <th>{{ $t('users.customFields.name') }}</th>
@@ -63,11 +63,11 @@
           </td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
     <v-card-title>
       {{ $t('users.aliases.title') }}
     </v-card-title>
-    <v-simple-table>
+    <v-table>
       <thead>
         <tr>
           <th>{{ $t('users.aliases.surveyId') }}</th>
@@ -89,7 +89,7 @@
           </td>
         </tr>
       </tbody>
-    </v-simple-table>
+    </v-table>
   </layout>
 </template>
 
diff --git a/apps/admin/src/views/users/roles/browse.vue b/apps/admin/src/views/users/roles/browse.vue
index ab81f88533..1d96496533 100644
--- a/apps/admin/src/views/users/roles/browse.vue
+++ b/apps/admin/src/views/users/roles/browse.vue
@@ -18,7 +18,7 @@
 import { defineComponent } from 'vue';
 
 import type { UserEntry } from '@intake24/common/types/http/admin';
-import { EmbeddedDataTable } from '@intake24/admin/components/data-tables';
+import { type DataTableHeader, EmbeddedDataTable } from '@intake24/admin/components/data-tables';
 import { Edit, Read } from '@intake24/admin/components/data-tables/action-bar';
 import { detailMixin } from '@intake24/admin/components/entry';
 import { useEntry, useEntryFetch } from '@intake24/admin/composables';
@@ -38,10 +38,10 @@ export default defineComponent({
 
     const actions = ['read', 'edit'].filter(action => user.can(`roles|${action}`));
 
-    const headers = [
-      { text: i18n.t('common.name'), sortable: true, value: 'name' },
-      { text: i18n.t('common.displayName'), sortable: true, value: 'displayName' },
-      { text: i18n.t('common.action._'), sortable: false, value: 'action', align: 'right' },
+    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);
diff --git a/apps/admin/tsconfig.app.json b/apps/admin/tsconfig.app.json
new file mode 100644
index 0000000000..08affdd478
--- /dev/null
+++ b/apps/admin/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@intake24/admin/*": ["./src/*"],
+      "@intake24/common/*": ["../../packages/common/src/*"],
+      "@intake24/i18n/*": ["../../packages/i18n/src/*"],
+      "@intake24/ui/*": ["../../packages/ui/src/*"],
+      "@intake24/*": ["../../packages/*/src"]
+    }
+  },
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ]
+}
diff --git a/apps/admin/tsconfig.json b/apps/admin/tsconfig.json
index 1304e88141..d85c910cb6 100644
--- a/apps/admin/tsconfig.json
+++ b/apps/admin/tsconfig.json
@@ -1,14 +1,11 @@
 {
-  "extends": "../../packages/ui/tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@intake24/admin/*": ["src/*"],
-      "@intake24/common/*": ["../../packages/common/src/*"],
-      "@intake24/i18n/*": ["../../packages/i18n/src/*"],
-      "@intake24/ui/*": ["../../packages/ui/src/*"],
-      "@intake24/*": ["../../packages/*/src"]
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
     }
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  ],
+  "files": []
 }
diff --git a/apps/admin/tsconfig.node.json b/apps/admin/tsconfig.node.json
new file mode 100644
index 0000000000..6175f032cb
--- /dev/null
+++ b/apps/admin/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "noEmit": true
+  },
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "package.json"
+  ]
+}
diff --git a/apps/admin/tsconfig.tc.json b/apps/admin/tsconfig.tc.json
new file mode 100644
index 0000000000..21397ed3f8
--- /dev/null
+++ b/apps/admin/tsconfig.tc.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../packages/ui/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@intake24/admin/*": ["./src/*"],
+      "@intake24/common/*": ["../../packages/common/src/*"],
+      "@intake24/i18n/*": ["../../packages/i18n/src/*"],
+      "@intake24/ui/*": ["../../packages/ui/src/*"],
+      "@intake24/*": ["../../packages/*/src"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/apps/admin/vite.config.ts b/apps/admin/vite.config.ts
index 4d3709841f..ffce5c5b1e 100644
--- a/apps/admin/vite.config.ts
+++ b/apps/admin/vite.config.ts
@@ -1,13 +1,14 @@
 import childProcess from 'node:child_process';
 import { fileURLToPath, URL } from 'node:url';
 
-import vue from '@vitejs/plugin-vue2';
-import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
-import Components from 'unplugin-vue-components/vite';
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import vue from '@vitejs/plugin-vue';
 import { defineConfig, loadEnv } from 'vite';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import mkcert from 'vite-plugin-mkcert';
 import { VitePWA } from 'vite-plugin-pwa';
+import vueDevToolsPlugin from 'vite-plugin-vue-devtools';
+import vuetify from 'vite-plugin-vuetify';
 import webfontDownload from 'vite-plugin-webfont-dl';
 
 import { isCaptchaProvider, resolveCaptchaScript } from '../../packages/common/src/security';
@@ -34,12 +35,14 @@ export default defineConfig(({ mode }) => {
     DEV_MKCERT_PATH,
     VITE_APP_NAME: appName,
     VITE_CAPTCHA_PROVIDER: captchaProvider,
+    VUE_DEV_TOOLS,
   } = loadEnv(mode, process.cwd(), '');
 
   const sourcemap = !!(PRODUCTION_SOURCE_MAP === 'true');
   const disablePwa = !!(DISABLE_PWA === 'true');
   const emptyOutDir = !!(EMPTY_OUT_DIR === 'true');
   const https = !!(DEV_HTTPS === 'true');
+  const vueDevTools = !!(VUE_DEV_TOOLS === 'true');
 
   if (captchaProvider && !isCaptchaProvider(captchaProvider))
     throw new Error('Invalid Captcha provider');
@@ -53,17 +56,6 @@ export default defineConfig(({ mode }) => {
         '@intake24/ui': fileURLToPath(new URL('../../packages/ui/src', import.meta.url)),
       },
     },
-    css: {
-      preprocessorOptions: {
-        sass: {
-          additionalData: [
-            '@import "./src/scss/vuetify"',
-            '@import "vuetify/src/styles/settings/_variables"',
-            '',
-          ].join('\n'),
-        },
-      },
-    },
     base,
     build: {
       emptyOutDir,
@@ -105,14 +97,16 @@ export default defineConfig(({ mode }) => {
     },
     plugins: [
       vue(),
-      Components({
-        resolvers: [VuetifyResolver()],
-        directoryAsNamespace: true,
+      vuetify({
+        autoImport: true,
+        styles: { configFile: 'src/scss/settings.scss' },
       }),
-      https ? mkcert({ savePath: DEV_MKCERT_PATH }) : undefined,
+      VueI18nPlugin({ jitCompilation: true }),
       webfontDownload([
         'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
       ]),
+      vueDevTools ? vueDevToolsPlugin() : undefined,
+      https ? mkcert({ savePath: DEV_MKCERT_PATH }) : undefined,
       createHtmlPlugin({
         inject: {
           data: {
diff --git a/apps/api/package.json b/apps/api/package.json
index e2acbe5a0a..9de42d9f1e 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -37,10 +37,10 @@
     "@simplewebauthn/server": "^10.0.1",
     "@ts-rest/core": "^3.51.0",
     "@ts-rest/express": "^3.51.0",
-    "awilix": "^11.0.0",
+    "awilix": "^12.0.1",
     "axios": "^1.7.7",
     "body-parser": "^1.20.3",
-    "bullmq": "^5.14.0",
+    "bullmq": "^5.16.0",
     "clean-css": "^5.3.3",
     "connect-redis": "^7.1.1",
     "cookie-parser": "^1.4.6",
@@ -49,7 +49,7 @@
     "dotenv": "^16.4.5",
     "dotenv-expand": "^11.0.6",
     "express": "^4.21.0",
-    "express-rate-limit": "^7.4.0",
+    "express-rate-limit": "^7.4.1",
     "express-session": "^1.18.0",
     "express-validator": "^7.2.0",
     "fast-csv": "^5.0.1",
@@ -78,12 +78,12 @@
     "pg": "^8.13.0",
     "pg-hstore": "^2.3.4",
     "pluralize": "^8.0.0",
-    "puppeteer": "^23.4.1",
+    "puppeteer": "^23.5.0",
     "qrcode": "^1.5.4",
     "rate-limit-redis": "^4.2.0",
     "reflect-metadata": "^0.2.2",
     "safe-stable-stringify": "^2.5.0",
-    "sequelize": "^6.37.3",
+    "sequelize": "^6.37.4",
     "sequelize-typescript": "^2.1.6",
     "sharp": "^0.33.5",
     "slugify": "^1.6.6",
@@ -108,7 +108,7 @@
     "@types/jest": "^29.5.13",
     "@types/jsdom": "^21.1.7",
     "@types/jsonwebtoken": "^9.0.7",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/morgan": "^1.9.9",
     "@types/ms": "^0.7.34",
     "@types/multer": "^1.4.12",
diff --git a/apps/api/src/http/controllers/admin/fdbs/category.controller.ts b/apps/api/src/http/controllers/admin/fdbs/category.controller.ts
index 5e5207802a..495c68b313 100644
--- a/apps/api/src/http/controllers/admin/fdbs/category.controller.ts
+++ b/apps/api/src/http/controllers/admin/fdbs/category.controller.ts
@@ -103,7 +103,7 @@ function adminCategoryController({
     const canUpdateMain = !!(
       main?.code
       && ((await aclService.hasPermission('locales|food-list'))
-      || (await CategoryLocal.count({ where: { categoryCode: main.code } })) === 1)
+        || (await CategoryLocal.count({ where: { categoryCode: main.code } })) === 1)
     );
 
     const categoryLocal = await adminCategoryService.updateCategory(
diff --git a/apps/api/src/http/controllers/admin/fdbs/food.controller.ts b/apps/api/src/http/controllers/admin/fdbs/food.controller.ts
index 140bf58b27..430a2e24e8 100644
--- a/apps/api/src/http/controllers/admin/fdbs/food.controller.ts
+++ b/apps/api/src/http/controllers/admin/fdbs/food.controller.ts
@@ -91,7 +91,7 @@ function adminFoodController({
     const canUpdateMain = !!(
       main?.code
       && ((await aclService.hasPermission('locales|food-list'))
-      || (await FoodLocal.count({ where: { foodCode: main.code } })) === 1)
+        || (await FoodLocal.count({ where: { foodCode: main.code } })) === 1)
     );
 
     const foodLocal = await adminFoodService.updateFood(
diff --git a/apps/api/src/http/routers/i18n.router.ts b/apps/api/src/http/routers/i18n.router.ts
index 175245e771..1057a0df97 100644
--- a/apps/api/src/http/routers/i18n.router.ts
+++ b/apps/api/src/http/routers/i18n.router.ts
@@ -2,7 +2,7 @@ import { initServer } from '@ts-rest/express';
 import { pick } from 'lodash';
 
 import type { Includeable } from '@intake24/db';
-import type { LocaleMessageObject } from '@intake24/i18n';
+import type { LocaleMessageDictionary } from '@intake24/i18n';
 import { NotFoundError } from '@intake24/api/http/errors';
 import { contract } from '@intake24/common/contracts';
 import { Language } from '@intake24/db';
@@ -45,7 +45,7 @@ export function i18n() {
           'textDirection',
         ]),
         messages:
-          language.translations?.reduce<LocaleMessageObject>((acc, { section, messages }) => {
+          language.translations?.reduce<LocaleMessageDictionary<any>>((acc, { section, messages }) => {
             acc[section] = messages;
             return acc;
           }, {}) ?? {},
diff --git a/apps/api/src/services/admin/language.service.ts b/apps/api/src/services/admin/language.service.ts
index 76ab9471d9..f9e5b6599a 100644
--- a/apps/api/src/services/admin/language.service.ts
+++ b/apps/api/src/services/admin/language.service.ts
@@ -9,19 +9,9 @@ import type {
   LanguageTranslationCreationAttributes,
   WhereOptions,
 } from '@intake24/db';
-import type { LocaleMessages } from '@intake24/i18n';
 import { ForbiddenError, NotFoundError } from '@intake24/api/http/errors';
 import { Language, LanguageTranslation } from '@intake24/db';
-import { admin, api, compareMessageKeys, mergeTranslations, shared, survey } from '@intake24/i18n';
-
-export function getDefaultI18nMessages(language = 'en') {
-  return {
-    admin: admin[language] ?? admin.en,
-    api: api[language] ?? api.en,
-    shared: shared[language] ?? shared.en,
-    survey: survey[language] ?? survey.en,
-  };
-}
+import { compareMessageKeys, getDefaultI18nMessages, mergeTranslations } from '@intake24/i18n';
 
 function languageService({
   i18nStore,
@@ -33,11 +23,11 @@ function languageService({
    * Get the in-code language for initialization (en or any other existing language)
    *
    * @param {string} languageId
-   * @returns {Record<Application, LocaleMessages>}
+   * @returns
    */
   const languageForInitialization = async (
     languageId: string,
-  ): Promise<Record<Application, LocaleMessages>> => {
+  ) => {
     const language = await Language.findByPk(languageId, { attributes: ['id', 'code'] });
     if (!language)
       return getDefaultI18nMessages();
diff --git a/apps/api/webpack.config.js b/apps/api/webpack.config.js
index ce2f2bbc30..c6d7d89969 100644
--- a/apps/api/webpack.config.js
+++ b/apps/api/webpack.config.js
@@ -11,7 +11,10 @@ module.exports = (env) => {
   const inspectBreak = !!NODE_INSPECT_BREAK;
   const mode = NODE_ENV === 'test' ? 'none' : NODE_ENV;
 
-  const plugins = [new ForkTsCheckerWebpackPlugin(), new WebpackBar({ name: 'Server' })];
+  const plugins = [
+    new ForkTsCheckerWebpackPlugin({ typescript: { memoryLimit: 3072 } }),
+    new WebpackBar({ name: 'Server' }),
+  ];
 
   if (isDev) {
     plugins.push(
diff --git a/apps/cli/package.json b/apps/cli/package.json
index 9c72d432a4..8192cbb84b 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -39,14 +39,14 @@
     "pg-hstore": "^2.3.4",
     "reflect-metadata": "^0.2.2",
     "remove-bom-stream": "^2.0.0",
-    "sequelize": "^6.37.3",
+    "sequelize": "^6.37.4",
     "sequelize-typescript": "^2.1.6",
     "web-push": "^3.6.7"
   },
   "devDependencies": {
     "@types/decompress": "^4.2.7",
     "@types/fs-extra": "^11.0.4",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/node": "^22.7.4",
     "@types/validator": "^13.12.2",
     "@types/web-push": "^3.6.3",
diff --git a/apps/survey/.env-template b/apps/survey/.env-template
index 6c96a024f2..e5d3bbea32 100644
--- a/apps/survey/.env-template
+++ b/apps/survey/.env-template
@@ -22,6 +22,7 @@ LEGACY=false
 
 # Vue.js dev server vars
 DEV_HTTPS=false
+VUE_DEV_TOOLS=false
 
 # Vite public vars
 VITE_APP_NAME=Intake24 Survey
diff --git a/apps/survey/env.d.ts b/apps/survey/env.d.ts
new file mode 100644
index 0000000000..f8ecee2d93
--- /dev/null
+++ b/apps/survey/env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="@intlify/unplugin-vue-i18n/messages" />
+/// <reference types="type-fest" />
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vuetify" />
diff --git a/apps/survey/package.json b/apps/survey/package.json
index c05a026ebb..16345c00eb 100644
--- a/apps/survey/package.json
+++ b/apps/survey/package.json
@@ -17,14 +17,14 @@
     "build-only": "vite build",
     "generate-pwa-assets": "pwa-assets-generator",
     "start": "node server/index.js",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit -p tsconfig.tc.json"
   },
   "dependencies": {
-    "@coddicat/vue-pinch-scroll-zoom": "^3.3.4",
+    "@coddicat/vue-pinch-scroll-zoom": "^4.7.1",
     "@flatten-js/core": "^1.6.2",
     "@fortawesome/fontawesome-free": "^6.6.0",
     "@vueuse/core": "^11.1.0",
-    "awesome-phonenumber": "^7.1.0",
+    "awesome-phonenumber": "^7.2.0",
     "axios": "^1.7.7",
     "axios-retry": "^4.5.0",
     "date-fns": "^4.1.0",
@@ -35,29 +35,32 @@
     "helmet": "^8.0.0",
     "lodash": "^4.17.21",
     "pinia": "^2.2.4",
-    "pinia-plugin-persistedstate": "^4.0.2",
+    "pinia-plugin-persistedstate": "^4.1.1",
     "uuid": "^10.0.0",
-    "vue": "^2.7.16",
-    "vue-gtag": "^1.16.1",
-    "vue-i18n": "^8.28.2",
-    "vue-router": "^3.6.5",
-    "vuetify": "^2.7.2"
+    "vue": "^3.5.11",
+    "vue-gtag": "^2.0.1",
+    "vue-i18n": "^9.14.1",
+    "vue-router": "^4.4.5",
+    "vuetify": "^3.7.2"
   },
   "devDependencies": {
     "@iconify-json/fluent": "^1.2.2",
     "@iconify-json/game-icons": "^1.2.0",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/node": "^22.7.4",
     "@types/uuid": "^10.0.0",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vitejs/plugin-legacy": "^5.4.2",
-    "@vitejs/plugin-vue2": "^2.3.1",
-    "@vue/compiler-sfc": "^2.7.16",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/tsconfig": "^0.5.1",
     "cross-env": "^7.0.3",
     "jsdom": "^25.0.1",
-    "sass": "~1.32.13",
+    "sass": "^1.79.4",
     "terser": "^5.34.1",
+    "type-fest": "^4.26.1",
     "typescript": "^5.6.2",
     "unplugin-icons": "^0.19.3",
     "unplugin-vue-components": "^0.27.4",
@@ -65,8 +68,10 @@
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-mkcert": "^1.17.6",
     "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-vue-devtools": "^7.4.6",
+    "vite-plugin-vuetify": "^2.0.4",
     "vite-plugin-webfont-dl": "^3.9.5",
-    "vitest": "^2.1.1",
+    "vitest": "^2.1.2",
     "vue-tsc": "^2.1.6",
     "workbox-window": "^7.1.0",
     "zod": "^3.23.8"
diff --git a/apps/survey/src/app.vue b/apps/survey/src/app.vue
index 1525d5e608..1bf830413b 100644
--- a/apps/survey/src/app.vue
+++ b/apps/survey/src/app.vue
@@ -1,165 +1,147 @@
 <template>
-  <v-app :class="{ mobile: isMobile }">
+  <v-app :class="{ mobile: $vuetify.display.mobile }">
     <loader :show="isAppLoading" />
-    <v-navigation-drawer v-model="sidebar" app :height="windowInnerHeight">
+    <v-navigation-drawer v-model="sidebar">
       <template v-if="loggedIn && surveyId">
         <v-list>
           <v-list-item link :to="{ name: 'survey-profile', params: { surveyId } }">
-            <v-list-item-avatar>
-              <v-icon color="info" large>
-                fas fa-circle-user
-              </v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title class="font-weight-medium text-h6">
-                {{ userName ?? $t('profile._') }}
-              </v-list-item-title>
-            </v-list-item-content>
+            <template #prepend>
+              <v-icon color="info" icon="fas fa-circle-user" size="30" />
+            </template>
+            <v-list-item-title class="font-weight-medium text-h6">
+              {{ userName ?? $t('profile._') }}
+            </v-list-item-title>
           </v-list-item>
         </v-list>
         <v-divider />
       </template>
-      <v-list dense nav>
-        <v-list-item-group>
+      <v-list density="compact" nav>
+        <v-list-item
+          link
+          :to="
+            loggedIn && surveyId
+              ? { name: 'survey-home', params: { surveyId } }
+              : { name: 'home' }
+          "
+        >
+          <template #prepend>
+            <v-icon icon="$home" />
+          </template>
+          <v-list-item-title>{{ $t('common.home') }}</v-list-item-title>
+        </v-list-item>
+        <template v-if="loggedIn && surveyId">
           <v-list-item
+            v-if="recallAllowed"
             link
-            :to="
-              loggedIn && surveyId
-                ? { name: 'survey-home', params: { surveyId } }
-                : { name: 'home' }
-            "
+            :to="{ name: 'survey-recall', params: { surveyId } }"
           >
-            <v-list-item-action>
-              <v-icon>$home</v-icon>
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>{{ $t('common.home') }}</v-list-item-title>
-            </v-list-item-content>
+            <template #prepend>
+              <v-icon icon="$survey" />
+            </template>
+            <v-list-item-title>{{ $t('recall._') }}</v-list-item-title>
           </v-list-item>
-          <template v-if="loggedIn && surveyId">
-            <v-list-item
-              v-if="recallAllowed"
-              link
-              :to="{ name: 'survey-recall', params: { surveyId } }"
-            >
-              <v-list-item-action>
-                <v-icon>$survey</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('recall._') }}</v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item
-              v-if="feedbackAllowed"
-              link
-              :to="{ name: 'feedback-home', params: { surveyId } }"
-            >
-              <v-list-item-action>
-                <v-icon>$feedback</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('feedback._') }}</v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </template>
-        </v-list-item-group>
+          <v-list-item
+            v-if="feedbackAllowed"
+            link
+            :to="{ name: 'feedback-home', params: { surveyId } }"
+          >
+            <template #prepend>
+              <v-icon icon="$feedback" />
+            </template>
+            <v-list-item-title>{{ $t('feedback._') }}</v-list-item-title>
+          </v-list-item>
+        </template>
       </v-list>
       <template #append>
         <div v-if="loggedIn" class="pa-2">
           <confirm-dialog
-            :label="$t('common.logout._').toString()"
+            :label="$t('common.logout._')"
             @confirm="logout"
           >
-            <template #activator="{ attrs, on }">
-              <v-btn v-bind="attrs" block color="grey darken-2" rounded text v-on="on">
-                <v-icon left>
-                  $logout
-                </v-icon>
-                <span class="mr-2">{{ $t('common.logout._') }}</span>
+            <template #activator="{ props }">
+              <v-btn v-bind="props" block color="grey-darken-2" rounded variant="tonal">
+                <v-icon icon="$logout" start />
+                <span class="me-2">{{ $t('common.logout._') }}</span>
               </v-btn>
             </template>
             {{ $t('common.logout.text') }}
           </confirm-dialog>
         </div>
         <v-divider />
-        <v-list v-if="isMobile" class="py-0" dense>
+        <v-list v-if="$vuetify.display.mobile" class="py-0" density="compact">
           <v-list-group>
-            <template #activator>
-              <v-list-item-title>
+            <template #activator="{ props }">
+              <v-list-item v-bind="props">
                 {{ $t('common.legal._') }}
-              </v-list-item-title>
+              </v-list-item>
             </template>
             <v-list-item :href="legal.privacy" link target="_blank">
               <v-list-item-title>
                 {{ $t('common.legal.privacy') }}
               </v-list-item-title>
-              <v-list-item-action>
-                <v-icon small>
-                  $redirect
-                </v-icon>
-              </v-list-item-action>
+              <template #append>
+                <v-list-item-action>
+                  <v-icon icon="$redirect" size="x-small" />
+                </v-list-item-action>
+              </template>
             </v-list-item>
             <v-list-item :href="legal.terms" link target="_blank">
               <v-list-item-title>
                 {{ $t('common.legal.terms') }}
               </v-list-item-title>
-              <v-list-item-action>
-                <v-icon small>
-                  $redirect
-                </v-icon>
-              </v-list-item-action>
+              <template #append>
+                <v-list-item-action>
+                  <v-icon icon="$redirect" size="x-small" />
+                </v-list-item-action>
+              </template>
             </v-list-item>
           </v-list-group>
         </v-list>
         <div class="text--secondary text-caption px-4 py-2">
-          <v-icon left small>
-            fas fa-tag
-          </v-icon>
+          <v-icon icon="fas fa-tag" size="small" start />
           {{ appInfo.build.fullVersion }}
         </div>
       </template>
     </v-navigation-drawer>
-    <v-app-bar app color="primary" dark flat hide-on-scroll>
+    <v-app-bar color="primary" flat scroll-behavior="hide">
       <v-app-bar-nav-icon :title="$t('common.navigation')" @click.stop="toggleSidebar" />
       <template v-if="loggedIn">
         <div v-if="surveyName" class="app-bar-survey-info">
-          <i18n path="recall.survey" tag="span">
+          <i18n-t keypath="recall.survey" tag="span">
             <template #name>
               <span class="font-weight-medium">{{ surveyName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template v-if="recallAllowed">
-            <v-divider v-if="$vuetify.breakpoint.smAndUp" class="grey mx-4" vertical />
-            <i18n path="recall.submissions.count" tag="span">
+            <v-divider v-if="$vuetify.display.smAndUp" class="bg-grey mx-4" vertical />
+            <i18n-t keypath="recall.submissions.count" tag="span">
               <template #count>
                 <span class="font-weight-medium">{{ recallNumber }}</span>
               </template>
-            </i18n>
+            </i18n-t>
           </template>
         </div>
-        <v-spacer v-if="$vuetify.breakpoint.smAndUp" />
+        <v-spacer v-if="$vuetify.display.smAndUp" />
         <v-btn
           v-if="surveyId"
-          :icon="isMobile"
-          :large="isMobile"
-          :text="!isMobile"
+          :icon="$vuetify.display.mobile"
+          :size="$vuetify.display.mobile ? 'large' : undefined"
           :title="$t('profile._')"
           :to="{ name: 'survey-profile', params: { surveyId } }"
+          :variant="!$vuetify.display.mobile ? 'text' : undefined"
         >
-          <span v-if="!isMobile" class="mr-2">{{ $t('profile._') }}</span>
+          <span v-if="!$vuetify.display.mobile" class="me-2">{{ $t('profile._') }}</span>
           <v-icon>$profile</v-icon>
         </v-btn>
         <confirm-dialog
-          v-if="!isMobile"
-          :label="$t('common.logout._').toString()"
+          v-if="!$vuetify.display.mobile"
+          :label="$t('common.logout._')"
           @confirm="logout"
         >
-          <template #activator="{ attrs, on }">
-            <v-btn text v-bind="attrs" v-on="on">
-              <span v-if="!isMobile" class="mr-2">{{ $t('common.logout._') }}</span>
-              <v-icon right>
-                $logout
-              </v-icon>
+          <template #activator="{ props }">
+            <v-btn variant="text" v-bind="props">
+              <span v-if="!$vuetify.display.mobile" class="me-2">{{ $t('common.logout._') }}</span>
+              <v-icon end icon="$logout" />
             </v-btn>
           </template>
           {{ $t('common.logout.text') }}
@@ -178,11 +160,11 @@
     />
     <service-worker />
     <message-box />
-    <v-footer v-if="!isMobile" class="justify-center pa-4" color="white">
+    <v-footer v-if="!$vuetify.display.mobile" class="justify-center pa-4 flex-grow-0">
       <div class="d-flex flex-column flex-md-row justify-center align-center text--secondary text-body-2">
-        <i18n path="common.legal.copyright">
+        <i18n-t keypath="common.legal.copyright" tag="span">
           <template #name>
-            <a class="text-decoration-none" :href="legal.home" target="_blank">
+            <a class="text-decoration-none text-primary" :href="legal.home" target="_blank">
               {{ $t('common._') }}
             </a>
           </template>
@@ -192,13 +174,13 @@
           <template #year>
             {{ new Date().getFullYear() }}
           </template>
-        </i18n>
+        </i18n-t>
         <span class="d-none d-md-flex mx-2">|</span>
-        <a class="text-decoration-none" :href="legal.privacy" target="_blank">
+        <a class="text-decoration-none text-primary" :href="legal.privacy" target="_blank">
           {{ $t('common.legal.privacy') }}
         </a>
         <span class="d-none d-md-flex mx-2">|</span>
-        <a class="text-decoration-none" :href="legal.terms" target="_blank">
+        <a class="text-decoration-none text-primary" :href="legal.terms" target="_blank">
           {{ $t('common.legal.terms') }}
         </a>
       </div>
@@ -210,11 +192,11 @@
 import type { TranslateResult } from 'vue-i18n';
 import { mapState } from 'pinia';
 import { computed, defineComponent, ref } from 'vue';
+import { useLocale } from 'vuetify';
 
 import { Navigation } from '@intake24/survey/components/layouts';
 import { ConfirmDialog, Loader, MessageBox, ServiceWorker, useLanguage } from '@intake24/ui';
 
-import { vuetify } from './plugins';
 import { useHttp } from './services';
 import { useApp, useAuth, useSurvey } from './stores';
 
@@ -225,7 +207,8 @@ export default defineComponent({
 
   setup() {
     const http = useHttp();
-    useLanguage('survey', http, vuetify.framework);
+    const vI18n = useLocale();
+    useLanguage('survey', http, vI18n);
 
     const appInfo = computed(() => useApp().app);
     const sidebar = ref(false);
diff --git a/apps/survey/src/bootstrap.ts b/apps/survey/src/bootstrap.ts
deleted file mode 100644
index 8709426112..0000000000
--- a/apps/survey/src/bootstrap.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Vue from 'vue';
-import { Intersect, Resize, Ripple } from 'vuetify/lib/directives';
-
-import { loading, platform } from './mixins';
-
-// @ts-expect-error Vue2.7 types
-Vue.mixin(loading);
-// @ts-expect-error Vue2.7 types
-Vue.mixin(platform);
-
-Vue.directive('intersect', Intersect);
-Vue.directive('resize', Resize);
-Vue.directive('ripple', Ripple);
diff --git a/apps/survey/src/components/elements/CategoryContentsView.vue b/apps/survey/src/components/elements/CategoryContentsView.vue
index e22ae795ab..c30d36e95a 100644
--- a/apps/survey/src/components/elements/CategoryContentsView.vue
+++ b/apps/survey/src/components/elements/CategoryContentsView.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="d-flex flex-column">
     <div v-if="!contents.subcategories.length && !contents.foods.length" class="py-4">
-      <v-alert color="grey lighten-2 mb-0" icon="fas fa-triangle-exclamation">
+      <v-alert color="grey-lighten-2" icon="fas fa-triangle-exclamation">
         {{ i18n.none }}
       </v-alert>
     </div>
     <div v-if="containsPizza" class="py-4">
       <v-alert
-        border="left"
+        border="start"
         class="smaller-padding"
-        color="primary lighten-4 mb-0"
+        color="primary-lighten-4"
         icon="fas fa-bell"
         rounded="lg"
       >
@@ -18,18 +18,18 @@
     </div>
     <div v-if="contents.foods.length >= 50 && type === 'foodSearch'" class="py-4">
       <v-alert
-        border="left"
+        border="start"
         class="smaller-padding"
-        color="primary lighten-4 mb-0"
+        color="primary-lighten-4"
         icon="fas fa-bell"
         rounded="lg"
       >
         {{ i18n.refine }}
       </v-alert>
     </div>
-    <v-subheader v-if="contents.subcategories.length">
+    <v-list-subheader v-if="contents.subcategories.length">
       {{ i18n.relatedCategories }}
-    </v-subheader>
+    </v-list-subheader>
     <v-chip-group v-if="contents.subcategories.length" column>
       <v-chip
         v-for="category in showAll ? contents.subcategories : firstCategories"
@@ -37,7 +37,7 @@
         class="my-1"
         clickable
         color="primary"
-        outlined
+        variant="outlined"
         @click="categorySelected(category)"
       >
         <span class="font-weight-medium">{{ category.name }}</span>
@@ -47,24 +47,21 @@
       v-if="contents.subcategories.length > threshold"
       class="my-1 mb-2 show-all-toggle-chip"
       color="info"
-      text
+      variant="text"
       @click="showAll = !showAll"
     >
       {{ 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)"
       >
-        <v-list-item-icon>
-          <v-icon>$food</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>{{ food.name }}</v-list-item-title>
-        </v-list-item-content>
+        <template #prepend>
+          <v-icon icon="$food" />
+        </template>
+        <v-list-item-title>{{ food.name }}</v-list-item-title>
       </v-list-item>
     </v-list>
   </div>
diff --git a/apps/survey/src/components/elements/ExpansionPanelActions.vue b/apps/survey/src/components/elements/ExpansionPanelActions.vue
index 7de9cdf45b..928283e743 100644
--- a/apps/survey/src/components/elements/ExpansionPanelActions.vue
+++ b/apps/survey/src/components/elements/ExpansionPanelActions.vue
@@ -2,12 +2,10 @@
   <div class="d-flex">
     <slot />
     <slot name="valid" v-bind="{ valid }">
-      <valid-invalid-icon class="ml-1" :valid="valid" />
+      <valid-invalid-icon class="ms-1" :valid="valid" />
     </slot>
     <slot name="expand">
-      <v-icon class="ml-1">
-        $expand
-      </v-icon>
+      <v-icon class="ms-1" icon="$expand" />
     </slot>
   </div>
 </template>
diff --git a/apps/survey/src/components/elements/FoodBrowser.vue b/apps/survey/src/components/elements/FoodBrowser.vue
index ca08974657..db9318c318 100644
--- a/apps/survey/src/components/elements/FoodBrowser.vue
+++ b/apps/survey/src/components/elements/FoodBrowser.vue
@@ -1,23 +1,23 @@
 <template>
   <div>
-    <component :is="dialog ? `food-browser-dialog` : `v-card`" :dialog.sync="dialog" :flat="!dialog">
+    <component :is="dialog ? `food-browser-dialog` : `v-card`" v-model="dialog" :flat="!dialog">
       <div class="pb-2" :class="{ 'px-4 pt-4': dialog }">
         <v-text-field
           ref="searchRef" v-model="searchTerm" clearable flat hide-details :label="promptI18n.search"
-          outlined :placeholder="promptI18n.search" prepend-inner-icon="$search" :rounded="dialog"
+          :placeholder="promptI18n.search" prepend-inner-icon="$search" :rounded="dialog ? 'pill' : undefined" variant="outlined"
           @focus="openInDialog"
         />
       </div>
-      <div v-if="recipeBuilderToggle" :class="isMobile ? 'pa-4' : 'py-2'">
+      <div v-if="recipeBuilderToggle" :class="$vuetify.display.mobile ? 'pa-4' : 'py-2'">
         <v-btn
-          v-for="recipeBuilderFood in recipeBuilderFoods" :key="recipeBuilderFood.code" :block="isMobile"
-          class="mb-2 mr-2" color="primary" :disabled="!recipeBuilderToggle" large outlined @click.stop="recipeBuilder(recipeBuilderFood.code)"
+          v-for="recipeBuilderFood in recipeBuilderFoods" :key="recipeBuilderFood.code" :block="$vuetify.display.mobile"
+          class="mb-2 me-2" color="primary" :disabled="!recipeBuilderToggle" size="large" variant="outlined" @click.stop="recipeBuilder(recipeBuilderFood.code)"
         >
           {{ $t(`prompts.recipeBuilder.label`, { searchTerm: recipeBuilderFood?.name }) }}
         </v-btn>
       </div>
-      <v-tabs-items v-show="type === 'foodSearch' || dialog || !showInDialog" v-model="tab">
-        <v-tab-item key="browse">
+      <v-tabs-window v-show="type === 'foodSearch' || dialog || !showInDialog" v-model="tab">
+        <v-tabs-window-item key="browse">
           <v-card v-if="requestFailed" flat>
             <v-card-text>
               <v-alert type="error">
@@ -25,20 +25,18 @@
               </v-alert>
             </v-card-text>
             <v-card-actions>
-              <v-btn large @click="browseCategory(retryCode, false)">
+              <v-btn size="large" @click="browseCategory(retryCode, false)">
                 {{ $t('common.errors.retry') }}
               </v-btn>
             </v-card-actions>
           </v-card>
-          <v-btn v-if="navigationHistory.length" large text @click="navigateBack">
-            <v-icon left>
-              fas fa-turn-up fa-flip-horizontal
-            </v-icon>
+          <v-btn v-if="navigationHistory.length" size="large" variant="text" @click="navigateBack">
+            <v-icon icon="fas fa-turn-up fa-flip-horizontal" start />
             {{ promptI18n.back }}
           </v-btn>
-          <v-subheader v-else class="font-weight-bold">
+          <v-list-subheader v-else class="font-weight-bold">
             {{ promptI18n.browse }}
-          </v-subheader>
+          </v-list-subheader>
           <image-placeholder v-if="requestInProgress" class="my-6" />
           <category-contents-view
             v-if="currentCategoryContents && !requestInProgress"
@@ -46,8 +44,8 @@
             :contents="currentCategoryContents" :i18n="promptI18n" :type="type" @category-selected="categorySelected"
             @food-selected="foodSelected"
           />
-        </v-tab-item>
-        <v-tab-item key="search">
+        </v-tabs-window-item>
+        <v-tabs-window-item key="search">
           <image-placeholder v-if="requestInProgress" class="my-6" />
           <category-contents-view
             v-if="!requestInProgress" :categories-first="prompt.categoriesFirst.search"
@@ -55,27 +53,27 @@
             :search-term="searchTerm ?? undefined" :type="type" @category-selected="categorySelected"
             @food-selected="foodSelected"
           />
-        </v-tab-item>
-      </v-tabs-items>
+        </v-tabs-window-item>
+      </v-tabs-window>
       <div
         v-if="type === 'foodSearch' || dialog || !showInDialog" class="d-flex flex-column flex-md-row py-4 ga-2"
         :class="{ 'px-4': dialog }"
       >
         <v-btn
-          v-if="type === 'foodSearch' && tab === 1" color="primary" :disabled="missingDialog" large outlined
-          :title="promptI18n.browse" @click.stop="browseRootCategory"
+          v-if="type === 'foodSearch' && tab === 1" color="primary" :disabled="missingDialog" size="large" :title="promptI18n.browse"
+          variant="outlined" @click.stop="browseRootCategory"
         >
           {{ promptI18n.browse }}
         </v-btn>
         <v-btn
-          class="btn-truncate" color="primary" :disabled="missingDialog" large outlined
-          :title="promptI18n['missing.label']" @click.stop="openMissingDialog"
+          class="btn-truncate" color="primary" :disabled="missingDialog" size="large" :title="promptI18n['missing.label']"
+          variant="outlined" @click.stop="openMissingDialog"
         >
           {{ promptI18n['missing.label'] }}
         </v-btn>
         <v-btn
           v-if="type === 'recipeBuilder' && !requiredToFill" class="btn-truncate" color="primary"
-          :disabled="missingDialog" large outlined :title="promptI18n['missing.irrelevantIngredient']"
+          :disabled="missingDialog" size="large" :title="promptI18n['missing.irrelevantIngredient']" variant="outlined"
           @click.stop="skipTheStep"
         >
           {{ promptI18n['missing.irrelevantIngredient'] }}
@@ -83,18 +81,19 @@
       </div>
     </component>
     <missing-food-panel
-      v-model="missingDialog" :class="{ 'mt-4': isMobile }" :i18n="promptI18n"
+      v-model="missingDialog" :class="{ 'mt-4': $vuetify.display.mobile }" :i18n="promptI18n"
       @cancel="closeMissingDialog" @confirm="foodMissing"
     />
   </div>
 </template>
 
-<script lang='ts'>
+<script lang='ts' setup>
 import type { PropType } from 'vue';
-import type { VTextField } from 'vuetify/lib';
+import type { VTextField } from 'vuetify/components';
 import { watchDebounced } from '@vueuse/core';
-import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
-import { VCard } from 'vuetify/lib';
+import { computed, nextTick, onMounted, ref } from 'vue';
+import { useGoTo } from 'vuetify';
+import { VCard } from 'vuetify/components';
 
 import type { Prompts } from '@intake24/common/prompts';
 import type { PromptSection } from '@intake24/common/surveys';
@@ -114,379 +113,334 @@ import FoodBrowserDialog from './FoodBrowserDialog.vue';
 import ImagePlaceholder from './ImagePlaceholder.vue';
 import MissingFoodPanel from './MissingFoodPanel.vue';
 
-export default defineComponent({
-  name: 'FoodBrowser',
+defineOptions({ name: 'FoodBrowser', components: { FoodBrowserDialog } });
 
-  components: {
-    CategoryContentsView,
-    ImagePlaceholder,
-    FoodBrowserDialog,
-    MissingFoodPanel,
-    VCard,
+const props = defineProps({
+  inDialog: {
+    type: Boolean,
+    default: true,
   },
-
-  props: {
-    inDialog: {
-      type: Boolean,
-      default: true,
-    },
-    localeId: {
-      type: String,
-      required: true,
-    },
-    surveySlug: {
-      type: String,
-    },
-    rootCategory: {
-      type: String,
-    },
-    includeHidden: {
-      type: Boolean,
-      default: false,
-    },
-    prompt: {
-      type: Object as PropType<
-        Prompts['associated-foods-prompt' | 'food-search-prompt' | 'recipe-builder-prompt']
-      >,
-      required: true,
-    },
-    section: {
-      type: String as PropType<PromptSection>,
-      required: true,
-    },
-    value: {
-      type: String as PropType<string | null>,
-      default: '',
-    },
-    stepName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    requiredToFill: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
+  localeId: {
+    type: String,
+    required: true,
+  },
+  surveySlug: {
+    type: String,
+  },
+  rootCategory: {
+    type: String,
+  },
+  includeHidden: {
+    type: Boolean,
+    default: false,
+  },
+  prompt: {
+    type: Object as PropType<
+      Prompts['associated-foods-prompt' | 'food-search-prompt' | 'recipe-builder-prompt']
+    >,
+    required: true,
+  },
+  section: {
+    type: String as PropType<PromptSection>,
+    required: true,
+  },
+  modelValue: {
+    type: String as PropType<string | null>,
+    default: '',
+  },
+  stepName: {
+    type: String,
+    required: false,
+    default: '',
   },
+  requiredToFill: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['action', 'food-selected', 'food-missing', 'recipe-builder', 'update:modelValue', 'food-skipped']);
+
+const goTo = useGoTo();
+
+const { recipeBuilderEnabled, translatePrompt, type } = usePromptUtils(props, { emit });
+const { i18n: { t } } = useI18n();
+
+const searchTerm = ref(props.modelValue);
+const searchRef = ref<InstanceType<typeof VTextField>>();
+const searchResults = ref<FoodSearchResponse>({ foods: [], categories: [] });
+
+const navigationHistory = ref<('search' | CategoryHeader)[]>([]);
+const retryCode = ref(props.rootCategory);
+const currentCategoryContents = ref<CategoryContents | undefined>(undefined);
+
+const requestInProgress = ref(true);
+const requestFailed = ref(false);
+const recipeBuilderFoods = ref<FoodHeader[]>([]);
+const recipeFoods = ref<RecipeFood[]>([]);
+const recipeBuilderToggle = ref(false);
+const tab = ref(0);
+
+const showInDialog = computed(
+  () => props.inDialog && searchRef.value?.$vuetify.display.mobile,
+);
+
+const dialog = ref(false);
+
+const promptI18n = computed(() => {
+  function backCategoryLabel(): string {
+    if (navigationHistory.value.length === 0)
+      return '??';
+
+    const last = navigationHistory.value[navigationHistory.value.length - 1];
+
+    if (last === 'search')
+      return t(`prompts.${type.value}.searchResults`);
+
+    return last.name;
+  }
+
+  // add conditional browse
+
+  return {
+    ...translatePrompt(
+      [
+        'browse',
+        'search',
+        'relatedCategories',
+        'showLess',
+        'showAll',
+        'root',
+        'back',
+        'none',
+        'refine',
+        'pizza',
+        'missing.label',
+        'missing.description',
+        'missing.report',
+        'missing.tryAgain',
+        type.value === 'recipeBuilder' ? 'missing.irrelevantIngredient' : undefined,
+      ].filter(Boolean) as string[],
+      {
+        back: { category: backCategoryLabel() },
+        'missing.irrelevantIngredient': { ingredient: props.stepName },
+        browse: { category: props.stepName },
+      },
+    ),
+  };
+});
+
+const rootHeader = computed(() => ({
+  code: props.rootCategory ?? '',
+  name: props.rootCategory ?? promptI18n.value.root,
+}));
+
+const searchContents = computed<CategoryContents>(() => ({
+  header: rootHeader.value,
+  foods: searchResults.value.foods,
+  subcategories: searchResults.value.categories,
+}));
 
-  emits: ['food-selected', 'food-missing', 'recipe-builder', 'input', 'food-skipped'],
-
-  setup(props, ctx) {
-    const { recipeBuilderEnabled, translatePrompt, type } = usePromptUtils(props, ctx);
-    const { i18n } = useI18n();
-
-    const searchTerm = ref(props.value);
-    const searchRef = ref<InstanceType<typeof VTextField>>();
-    const searchResults = ref<FoodSearchResponse>({ foods: [], categories: [] });
-
-    const navigationHistory = ref<('search' | CategoryHeader)[]>([]);
-    const retryCode = ref(props.rootCategory);
-    const currentCategoryContents = ref<CategoryContents | undefined>(undefined);
-
-    const requestInProgress = ref(true);
-    const requestFailed = ref(false);
-    const recipeBuilderFoods = ref<FoodHeader[]>([]);
-    const recipeFoods = ref<RecipeFood[]>([]);
-    const recipeBuilderToggle = ref(false);
-    const tab = ref(0);
-
-    const showInDialog = computed(
-      () => props.inDialog && searchRef.value?.$vuetify.breakpoint.mobile,
-    );
-
-    const dialog = ref(false);
-
-    const promptI18n = computed(() => {
-      function backCategoryLabel(): string {
-        if (navigationHistory.value.length === 0)
-          return '??';
-
-        const last = navigationHistory.value[navigationHistory.value.length - 1];
-
-        if (last === 'search')
-          return i18n.t(`prompts.${type.value}.searchResults`).toString();
-
-        return last.name;
-      }
-
-      // add conditional browse
-
-      return {
-        ...translatePrompt(
-          [
-            'browse',
-            'search',
-            'relatedCategories',
-            'showLess',
-            'showAll',
-            'root',
-            'back',
-            'none',
-            'refine',
-            'pizza',
-            'missing.label',
-            'missing.description',
-            'missing.report',
-            'missing.tryAgain',
-            type.value === 'recipeBuilder' ? 'missing.irrelevantIngredient' : undefined,
-          ].filter(Boolean) as string[],
-          {
-            back: { category: backCategoryLabel() },
-            'missing.irrelevantIngredient': { ingredient: props.stepName },
-            browse: { category: props.stepName },
-          },
-        ),
-      };
+async function openInDialog() {
+  if (!showInDialog.value || dialog.value)
+    return;
+
+  dialog.value = true;
+
+  await nextTick();
+  searchRef.value?.focus();
+}
+
+function closeInDialog() {
+  dialog.value = false;
+}
+
+const missingDialog = ref(false);
+
+function openMissingDialog() {
+  missingDialog.value = true;
+  dialog.value = false;
+}
+
+async function closeMissingDialog() {
+  if (!searchRef.value)
+    return;
+
+  missingDialog.value = false;
+
+  setTimeout(async () => {
+    if (!searchRef.value)
+      return;
+
+    await goTo(searchRef.value.$el as HTMLElement, {
+      duration: 500,
     });
 
-    const rootHeader = computed(() => ({
-      code: props.rootCategory ?? '',
-      name: props.rootCategory ?? promptI18n.value.root,
-    }));
-
-    const searchContents = computed<CategoryContents>(() => ({
-      header: rootHeader.value,
-      foods: searchResults.value.foods,
-      subcategories: searchResults.value.categories,
-    }));
-
-    const openInDialog = async () => {
-      if (!showInDialog.value || dialog.value)
-        return;
-
-      dialog.value = true;
-
-      await nextTick();
-      // @ts-expect-error - vuetify types
-      searchRef.value?.focus();
-    };
-
-    const closeInDialog = () => {
-      dialog.value = false;
-    };
-
-    const missingDialog = ref(false);
-
-    const openMissingDialog = () => {
-      missingDialog.value = true;
-      dialog.value = false;
-    };
-
-    const closeMissingDialog = async () => {
-      if (!searchRef.value)
-        return;
-
-      missingDialog.value = false;
-
-      setTimeout(async () => {
-        if (!searchRef.value)
-          return;
-
-        await searchRef.value.$vuetify.goTo(searchRef.value.$el as HTMLElement, {
-          duration: 500,
-        });
-
-        // @ts-expect-error - vuetify types
-        searchRef.value.focus();
-      }, 100);
-    };
-
-    const browseCategory = async (categoryCode: string | undefined, makeHistoryEntry: boolean) => {
-      requestInProgress.value = true;
-      retryCode.value = categoryCode;
-      tab.value = 0;
-
-      try {
-        const contents = await categoriesService.contents(props.localeId, categoryCode);
-
-        requestInProgress.value = false;
-        requestFailed.value = false;
-
-        const header = contents.header.code ? contents.header : rootHeader.value;
-
-        if (makeHistoryEntry) {
-          if (currentCategoryContents.value !== undefined)
-            navigationHistory.value.push(currentCategoryContents.value.header);
-          else
-            navigationHistory.value.push('search');
-        }
-
-        currentCategoryContents.value = { ...contents, header };
-      }
-      catch {
-        requestInProgress.value = false;
-        requestFailed.value = true;
-      }
-    };
-
-    const browseRootCategory = () => {
-      browseCategory(props.rootCategory, true);
-    };
-
-    const recipeBuilderDetected = async (foods: FoodHeader[]) => {
-      foods.forEach(async (food) => {
-        const recipeFood: RecipeFood = await foodsService.getRecipeFood(props.localeId, food.code);
-        recipeFoods.value.push(recipeFood);
+    searchRef.value.focus();
+  }, 100);
+}
+
+async function browseCategory(categoryCode: string | undefined, makeHistoryEntry: boolean) {
+  requestInProgress.value = true;
+  retryCode.value = categoryCode;
+  tab.value = 0;
+
+  try {
+    const contents = await categoriesService.contents(props.localeId, categoryCode);
+
+    requestInProgress.value = false;
+    requestFailed.value = false;
+
+    const header = contents.header.code ? contents.header : rootHeader.value;
+
+    if (makeHistoryEntry) {
+      if (currentCategoryContents.value !== undefined)
+        navigationHistory.value.push(currentCategoryContents.value.header);
+      else
+        navigationHistory.value.push('search');
+    }
+
+    currentCategoryContents.value = { ...contents, header };
+  }
+  catch {
+    requestInProgress.value = false;
+    requestFailed.value = true;
+  }
+}
+
+function browseRootCategory() {
+  browseCategory(props.rootCategory, true);
+}
+
+async function recipeBuilderDetected(foods: FoodHeader[]) {
+  foods.forEach(async (food) => {
+    const recipeFood: RecipeFood = await foodsService.getRecipeFood(props.localeId, food.code);
+    recipeFoods.value.push(recipeFood);
+  });
+  recipeBuilderToggle.value = true;
+}
+
+async function search() {
+  if (!searchTerm.value)
+    return;
+
+  requestInProgress.value = true;
+  recipeBuilderToggle.value = false;
+  recipeBuilderFoods.value = [];
+  searchResults.value = { foods: [], categories: [] };
+
+  try {
+    if (props.surveySlug !== undefined) {
+      searchResults.value = await foodsService.search(props.surveySlug, searchTerm.value, {
+        recipe: false,
+        category: props.rootCategory,
+        hidden: props.includeHidden,
       });
-      recipeBuilderToggle.value = true;
-    };
-
-    const search = async () => {
-      if (!searchTerm.value)
-        return;
-
-      requestInProgress.value = true;
-      recipeBuilderToggle.value = false;
-      recipeBuilderFoods.value = [];
-      searchResults.value = { foods: [], categories: [] };
-
-      try {
-        if (props.surveySlug !== undefined) {
-          searchResults.value = await foodsService.search(props.surveySlug, searchTerm.value, {
-            recipe: false,
-            category: props.rootCategory,
-            hidden: props.includeHidden,
-          });
-          searchResults.value.foods = searchResults.value.foods.filter(
-            (food) => {
-              if (food.code.charAt(0) === '$') {
-                recipeBuilderFoods.value.push(food);
-                return false;
-              }
-              return true;
-            },
-          );
-          if (recipeBuilderEnabled.value && recipeBuilderFoods.value.length > 0)
-            await recipeBuilderDetected(recipeBuilderFoods.value);
-          requestFailed.value = false;
-        }
-        else {
-          console.error('Expected survey parameters to be loaded at this point');
-          requestFailed.value = true;
-        }
-      }
-      catch {
-        requestFailed.value = true;
-      }
-      finally {
-        requestInProgress.value = false;
-      }
-    };
-
-    const categorySelected = (category: CategoryHeader) => {
-      browseCategory(category.code, true);
-    };
-
-    const foodSelected = (food: FoodHeader) => {
-      closeInDialog();
-      ctx.emit('food-selected', { ...food, searchTerm: searchTerm.value });
-    };
-
-    const foodMissing = () => {
-      closeInDialog();
-      ctx.emit('food-missing', searchTerm.value);
-    };
-
-    const skipTheStep = () => {
-      closeInDialog();
-      ctx.emit('food-skipped', null);
-    };
-
-    const recipeBuilder = (key: string) => {
-      closeInDialog();
-      ctx.emit('recipe-builder', recipeFoods.value.find(food => food.code === key));
-    };
-
-    const navigateBack = () => {
-      if (navigationHistory.value.length === 0) {
-        console.warn('Navigation history is empty');
-        return;
-      }
-
-      const lastItem = navigationHistory.value[navigationHistory.value.length - 1];
-      navigationHistory.value = navigationHistory.value.slice(
-        0,
-        navigationHistory.value.length - 1,
+      searchResults.value.foods = searchResults.value.foods.filter(
+        (food) => {
+          if (food.code.charAt(0) === '$') {
+            recipeBuilderFoods.value.push(food);
+            return false;
+          }
+          return true;
+        },
       );
+      if (recipeBuilderEnabled.value && recipeBuilderFoods.value.length > 0)
+        await recipeBuilderDetected(recipeBuilderFoods.value);
+      requestFailed.value = false;
+    }
+    else {
+      console.error('Expected survey parameters to be loaded at this point');
+      requestFailed.value = true;
+    }
+  }
+  catch {
+    requestFailed.value = true;
+  }
+  finally {
+    requestInProgress.value = false;
+  }
+}
+
+function categorySelected(category: CategoryHeader) {
+  browseCategory(category.code, true);
+}
+
+function foodSelected(food: FoodHeader) {
+  closeInDialog();
+  emit('food-selected', { ...food, searchTerm: searchTerm.value });
+}
+
+function foodMissing() {
+  closeInDialog();
+  emit('food-missing', searchTerm.value);
+}
+
+function skipTheStep() {
+  closeInDialog();
+  emit('food-skipped', null);
+}
+
+function recipeBuilder(key: string) {
+  closeInDialog();
+  emit('recipe-builder', recipeFoods.value.find(food => food.code === key));
+}
+
+function navigateBack() {
+  if (navigationHistory.value.length === 0) {
+    console.warn('Navigation history is empty');
+    return;
+  }
+
+  const lastItem = navigationHistory.value[navigationHistory.value.length - 1];
+  navigationHistory.value = navigationHistory.value.slice(
+    0,
+    navigationHistory.value.length - 1,
+  );
+
+  if (lastItem === 'search') {
+    tab.value = 1;
+    currentCategoryContents.value = undefined;
+  }
+  else {
+    tab.value = 0;
+    browseCategory(lastItem.code, false);
+  }
+}
+
+onMounted(async () => {
+  if (searchTerm.value) {
+    await search();
+    tab.value = 1;
+    return;
+  }
+
+  await browseCategory(props.rootCategory, false);
+});
 
-      if (lastItem === 'search') {
-        tab.value = 1;
-        currentCategoryContents.value = undefined;
-      }
-      else {
-        tab.value = 0;
-        browseCategory(lastItem.code, false);
-      }
-    };
-
-    onMounted(async () => {
-      if (searchTerm.value) {
-        await search();
-        tab.value = 1;
-        return;
-      }
-
-      await browseCategory(props.rootCategory, false);
-    });
-
-    watchDebounced(
-      searchTerm,
-      async () => {
-        ctx.emit('input', searchTerm.value ?? '');
-
-        if (searchTerm.value) {
-          await search();
-          currentCategoryContents.value = undefined;
-          navigationHistory.value = [];
-          tab.value = 1;
-          return;
-        }
-
-        if (
-          !currentCategoryContents.value
-          || props.rootCategory !== currentCategoryContents.value.header.code
-        ) {
-          await browseCategory(props.rootCategory, true);
-        }
-      },
-      { debounce: 500, maxWait: 2000 },
-    );
-
-    return {
-      dialog,
-      showInDialog,
-      openInDialog,
-      closeInDialog,
-      missingDialog,
-      openMissingDialog,
-      closeMissingDialog,
-      navigationHistory,
-      retryCode,
-      currentCategoryContents,
-      promptI18n,
-      requestInProgress,
-      requestFailed,
-      recipeBuilderFoods,
-      recipeFoods,
-      recipeBuilderToggle,
-      tab,
-      type,
-      browseRootCategory,
-      browseCategory,
-      categorySelected,
-      foodMissing,
-      foodSelected,
-      skipTheStep,
-      navigateBack,
-      recipeBuilder,
-      searchTerm,
-      searchContents,
-      searchRef,
-      searchResults,
-    };
+watchDebounced(
+  searchTerm,
+  async () => {
+    emit('update:modelValue', searchTerm.value ?? '');
+
+    if (searchTerm.value) {
+      await search();
+      currentCategoryContents.value = undefined;
+      navigationHistory.value = [];
+      tab.value = 1;
+      return;
+    }
+
+    if (
+      !currentCategoryContents.value
+      || props.rootCategory !== currentCategoryContents.value.header.code
+    ) {
+      await browseCategory(props.rootCategory, true);
+    }
   },
-});
+  { debounce: 500, maxWait: 2000 },
+);
 </script>
 
 <style lang='scss'></style>
diff --git a/apps/survey/src/components/elements/FoodBrowserDialog.vue b/apps/survey/src/components/elements/FoodBrowserDialog.vue
index d1159f0bd0..0d51d8e8e1 100644
--- a/apps/survey/src/components/elements/FoodBrowserDialog.vue
+++ b/apps/survey/src/components/elements/FoodBrowserDialog.vue
@@ -1,15 +1,13 @@
 <template>
   <v-dialog
     fullscreen
+    :model-value="modelValue"
     transition="dialog-bottom-transition"
-    :value="dialog"
-    @input="toggle($event)"
+    @update:model-value="toggle($event)"
   >
     <v-sheet class="food-browser-dialog-wrapper" color="secondary">
       <v-card-title class="flex-grow-0" dark>
-        <v-icon color="white" :title="$t('common.action.cancel')" @click="toggle(false)">
-          $cancel
-        </v-icon>
+        <v-icon color="white" icon="$cancel" :title="$t('common.action.cancel')" @click="toggle(false)" />
       </v-card-title>
       <v-card class="food-browser-dialog-content">
         <slot />
@@ -25,14 +23,16 @@ export default defineComponent({
   name: 'FoodBrowserDialog',
 
   props: {
-    dialog: {
+    modelValue: {
       type: Boolean,
     },
   },
 
+  emits: ['update:modelValue'],
+
   setup(props, { emit }) {
     const toggle = (value: boolean) => {
-      emit('update:dialog', value);
+      emit('update:modelValue', value);
     };
 
     return {
diff --git a/apps/survey/src/components/elements/FoodSearchResults.vue b/apps/survey/src/components/elements/FoodSearchResults.vue
deleted file mode 100644
index d28e7def46..0000000000
--- a/apps/survey/src/components/elements/FoodSearchResults.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <v-list-item-group>
-    <v-list-item
-      v-for="food in results.foods"
-      :key="food.code"
-      class="list-item-border"
-      @click="foodSelected(food)"
-    >
-      <v-list-item-content>
-        <v-list-item-title>{{ food.name }}</v-list-item-title>
-      </v-list-item-content>
-    </v-list-item>
-  </v-list-item-group>
-</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/InfoAlert.vue b/apps/survey/src/components/elements/InfoAlert.vue
index 11f0d807b0..6b3233ce53 100644
--- a/apps/survey/src/components/elements/InfoAlert.vue
+++ b/apps/survey/src/components/elements/InfoAlert.vue
@@ -1,11 +1,10 @@
 <template>
   <v-alert
-    border="left"
+    border="start"
     class="undoAlert ma-0"
+    closable
     color="grey"
-    dismissible
     elevation="5"
-    transition="slide-x-transition"
     type="info"
     :value="alert"
   >
diff --git a/apps/survey/src/components/elements/MissingAllRecipeIngredients.vue b/apps/survey/src/components/elements/MissingAllRecipeIngredients.vue
index ebc4d22162..295847f257 100644
--- a/apps/survey/src/components/elements/MissingAllRecipeIngredients.vue
+++ b/apps/survey/src/components/elements/MissingAllRecipeIngredients.vue
@@ -1,6 +1,6 @@
 <template>
   <v-expand-transition>
-    <v-card v-show="value" ref="card" class="my-4" color="red lighten-4" outlined>
+    <v-card v-show="modelValue" ref="card" border class="my-4" color="red-lighten-4">
       <v-card-text class="px-6">
         {{ message }}
       </v-card-text>
@@ -8,45 +8,40 @@
   </v-expand-transition>
 </template>
 
-<script lang="ts">
-import type { TranslateResult } from 'vue-i18n';
-import type { VCard } from 'vuetify/lib';
-import { defineComponent, ref, watch } from 'vue';
-
-export default defineComponent({
-  name: 'MissingAllRecipeIngridients',
-
-  props: {
-    message: {
-      type: String as () => TranslateResult,
-      required: true,
-    },
-    value: {
-      type: Boolean,
-      required: true,
-    },
+<script lang="ts" setup>
+import { useTemplateRef, watch } from 'vue';
+import { useGoTo } from 'vuetify';
+
+defineOptions({ name: 'MissingAllRecipeIngridients' });
+
+const props = defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: Boolean,
+    required: true,
   },
+});
 
-  setup(props) {
-    const card = ref<InstanceType<typeof VCard>>();
-    watch(
-      () => props.value,
-      (value) => {
-        if (!value)
-          return;
+const card = useTemplateRef('card');
+const goTo = useGoTo();
 
-        setTimeout(async () => {
-          if (!card.value)
-            return;
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value)
+      return;
 
-          await card.value.$vuetify.goTo(card.value.$el as HTMLElement, { duration: 1000 });
-        }, 100);
-      },
-    );
+    setTimeout(async () => {
+      if (!card.value)
+        return;
 
-    return { card };
+      await goTo(card.value.$el as HTMLElement, { duration: 1000 });
+    }, 100);
   },
-});
+);
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/apps/survey/src/components/elements/MissingFoodPanel.vue b/apps/survey/src/components/elements/MissingFoodPanel.vue
index f8754433f8..0110a252a0 100644
--- a/apps/survey/src/components/elements/MissingFoodPanel.vue
+++ b/apps/survey/src/components/elements/MissingFoodPanel.vue
@@ -1,26 +1,22 @@
 <template>
   <v-expand-transition>
-    <v-card v-show="value" ref="card" color="grey lighten-4" outlined>
+    <v-card v-show="modelValue" ref="card" border color="grey-lighten-4">
       <v-card-text class="px-6">
         <div v-html="i18n['missing.description']" />
       </v-card-text>
       <v-card-text class="px-6 pt-0 d-flex flex-column flex-md-row align-stretch ga-3">
         <v-btn
           color="primary"
-          large
-          outlined
+          size="large"
           :title="i18n['missing.tryAgain']"
+          variant="outlined"
           @click.stop="cancel"
         >
-          <v-icon left>
-            fas fa-repeat
-          </v-icon>
+          <v-icon icon="fas fa-repeat" start />
           {{ i18n['missing.tryAgain'] }}
         </v-btn>
-        <v-btn color="primary" large outlined :title="i18n['missing.report']" @click.stop="confirm">
-          <v-icon left>
-            fas fa-flag
-          </v-icon>
+        <v-btn color="primary" size="large" :title="i18n['missing.report']" variant="outlined" @click.stop="confirm">
+          <v-icon icon="fas fa-flag" start />
           {{ i18n['missing.report'] }}
         </v-btn>
       </v-card-text>
@@ -28,57 +24,54 @@
   </v-expand-transition>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import type { VCard } from 'vuetify/lib';
-import { defineComponent, ref, watch } from 'vue';
+import { useTemplateRef, watch } from 'vue';
+import { useGoTo } from 'vuetify';
 
-export default defineComponent({
+defineOptions({
   name: 'MissingFoodPanel',
+});
 
-  props: {
-    i18n: {
-      type: Object as PropType<Record<string, string>>,
-      required: true,
-    },
-    value: {
-      type: Boolean,
-      required: true,
-    },
+const props = defineProps({
+  i18n: {
+    type: Object as PropType<Record<string, string>>,
+    required: true,
   },
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+});
 
-  emits: ['cancel', 'confirm', 'input'],
-
-  setup(props, { emit }) {
-    const card = ref<InstanceType<typeof VCard>>();
+const emit = defineEmits(['cancel', 'confirm', 'update:modelValue']);
 
-    const cancel = () => {
-      emit('cancel');
-      emit('input', false);
-    };
+const goTo = useGoTo();
+const card = useTemplateRef('card');
 
-    const confirm = async () => {
-      emit('confirm');
-    };
+function cancel() {
+  emit('cancel');
+  emit('update:modelValue', false);
+}
 
-    watch(
-      () => props.value,
-      (value) => {
-        if (!value)
-          return;
+async function confirm() {
+  emit('confirm');
+}
 
-        setTimeout(async () => {
-          if (!card.value)
-            return;
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value)
+      return;
 
-          await card.value.$vuetify.goTo(card.value.$el as HTMLElement, { duration: 1000 });
-        }, 100);
-      },
-    );
+    setTimeout(async () => {
+      if (!card.value)
+        return;
 
-    return { card, cancel, confirm };
+      await goTo(card.value.$el as HTMLElement, { duration: 1000 });
+    }, 100);
   },
-});
+);
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/apps/survey/src/components/elements/SelectedFoodList.vue b/apps/survey/src/components/elements/SelectedFoodList.vue
index c59bc45857..95c0eb94a7 100644
--- a/apps/survey/src/components/elements/SelectedFoodList.vue
+++ b/apps/survey/src/components/elements/SelectedFoodList.vue
@@ -8,25 +8,21 @@
           align="baseline"
           class="pa-0"
         >
-          <v-alert class="flex-grow-1 pa-0 ml-1" dense icon="$food">
+          <v-alert class="flex-grow-1 pa-0 ms-1" density="compact" icon="$food">
             {{ step.foods[foodIndex].name }}
             <template #prepend>
-              <v-icon left>
-                $food
-              </v-icon>
+              <v-icon icon="$food" start />
             </template>
             <template #append>
               <v-btn
                 class="btn-truncate"
-                color="primary lighten-1"
-                depressed
+                color="primary"
                 title="Change/Delete"
+                variant="flat"
                 @click="remove(index, foodIndex)"
               >
-                <v-icon left>
-                  $delete
-                </v-icon>
-                {{ $t(`prompts.${type}.remove`).toString() }}
+                <v-icon icon="$delete" start />
+                {{ $t(`prompts.${type}.remove`) }}
               </v-btn>
               <slot />
             </template>
@@ -43,7 +39,6 @@ import { computed, defineComponent } from 'vue';
 
 import type { Prompt, RecipeBuilderStepState } from '@intake24/common/prompts';
 import type { MealState } from '@intake24/common/types';
-import { useI18n } from '@intake24/i18n';
 import { promptType } from '@intake24/ui';
 
 export default defineComponent({
@@ -74,14 +69,13 @@ export default defineComponent({
   emits: ['action', 'remove'],
 
   setup(props, { emit }) {
-    const { translate } = useI18n();
     const type = computed(() => promptType(props.prompt.component));
 
     const remove = (index: number, foodIndex: number) => {
       emit('remove', { index, foodIndex });
     };
 
-    return { remove, type, translate };
+    return { remove, type };
   },
 });
 </script>
diff --git a/apps/survey/src/components/elements/SurveyProgressBar.vue b/apps/survey/src/components/elements/SurveyProgressBar.vue
index 331cfd5e66..fab0e32ac7 100644
--- a/apps/survey/src/components/elements/SurveyProgressBar.vue
+++ b/apps/survey/src/components/elements/SurveyProgressBar.vue
@@ -6,7 +6,6 @@
           class="font-weight-medium"
           :color="color(item)"
           label
-          :text-color="item.time ? 'white' : 'primary'"
         >
           {{ stringTime(item.time) }}
         </v-chip>
@@ -36,7 +35,6 @@ export default defineComponent({
 
   setup() {
     const { translate } = useI18n();
-
     const stringTime = (time: MealTime | undefined): string => {
       if (time === undefined)
         return '?';
diff --git a/apps/survey/src/components/elements/ValidInvalidIcon.vue b/apps/survey/src/components/elements/ValidInvalidIcon.vue
index 43e799d6a3..ffafc694b0 100644
--- a/apps/survey/src/components/elements/ValidInvalidIcon.vue
+++ b/apps/survey/src/components/elements/ValidInvalidIcon.vue
@@ -1,7 +1,5 @@
 <template>
-  <v-icon class="no-rotate" :color="color">
-    {{ icon }}
-  </v-icon>
+  <v-icon class="no-rotate" :color="color" :icon="icon" />
 </template>
 
 <script lang="ts">
diff --git a/apps/survey/src/components/elements/YesNoToggle.vue b/apps/survey/src/components/elements/YesNoToggle.vue
index d58ba43445..966b20460b 100644
--- a/apps/survey/src/components/elements/YesNoToggle.vue
+++ b/apps/survey/src/components/elements/YesNoToggle.vue
@@ -2,18 +2,19 @@
   <v-btn-toggle
     class="d-flex"
     color="primary"
-    :mandatory="mandatory && value !== undefined"
-    :value="value"
-    @change="change"
+    :mandatory="mandatory && modelValue !== undefined"
+    :model-value="modelValue"
+    variant="outlined"
+    @update:model-value="change"
   >
     <v-btn class="px-10 flex-grow-1 flex-md-grow-0" :title="$t('common.action.no')" :value="false">
-      <v-icon :color="value === false ? 'primary' : 'secondary '" left>
+      <v-icon :color="modelValue === false ? 'primary' : 'secondary '" start>
         $no
       </v-icon>
       {{ $t('common.action.no') }}
     </v-btn>
     <v-btn class="px-10 flex-grow-1 flex-md-grow-0" :title="$t('common.action.yes')" :value="true">
-      <v-icon :color="value === true ? 'primary' : 'secondary '" left>
+      <v-icon :color="modelValue === true ? 'primary' : 'secondary '" start>
         $yes
       </v-icon>
       {{ $t('common.action.yes') }}
@@ -31,16 +32,16 @@ export default defineComponent({
     mandatory: {
       type: Boolean,
     },
-    value: {
+    modelValue: {
       type: Boolean,
     },
   },
 
-  emits: ['input', 'change'],
+  emits: ['update:modelValue', 'change'],
 
   methods: {
     change(event?: boolean) {
-      this.$emit('input', event);
+      this.$emit('update:modelValue', event);
       this.$emit('change', event);
     },
   },
diff --git a/apps/survey/src/components/elements/index.ts b/apps/survey/src/components/elements/index.ts
index 7b5c3ed7ee..3e4ee9f9c8 100644
--- a/apps/survey/src/components/elements/index.ts
+++ b/apps/survey/src/components/elements/index.ts
@@ -2,12 +2,13 @@ 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';
 export { default as MissingFoodPanel } from './MissingFoodPanel.vue';
+export { default as RequestHelp } from './request-help.vue';
 export { default as SelectedFoodList } from './SelectedFoodList.vue';
+export { default as SurveyRating } from './survey-rating.vue';
 export { default as SurveyProgressBar } from './SurveyProgressBar.vue';
 export { default as ValidInvalidIcon } from './ValidInvalidIcon.vue';
 export { default as YesNoToggle } from './YesNoToggle.vue';
diff --git a/apps/survey/src/components/request-help.vue b/apps/survey/src/components/elements/request-help.vue
similarity index 76%
rename from apps/survey/src/components/request-help.vue
rename to apps/survey/src/components/elements/request-help.vue
index f708f11310..79c565f79c 100644
--- a/apps/survey/src/components/request-help.vue
+++ b/apps/survey/src/components/elements/request-help.vue
@@ -1,34 +1,29 @@
 <template>
   <v-dialog
     v-model="dialog"
-    :fullscreen="$vuetify.breakpoint.smAndDown"
+    :fullscreen="$vuetify.display.smAndDown"
     max-width="500px"
     transition="dialog-bottom-transition"
   >
-    <template #activator="{ on, attrs }">
-      <slot name="activator" v-bind="{ on, attrs }">
+    <template #activator="{ props }">
+      <slot name="activator" v-bind="{ props }">
         <v-btn
-          v-bind="attrs"
           color="grey"
-          dark
           :disabled="disabled"
           :title="$t('common.help.title')"
-          v-on="on"
+          variant="flat"
+          v-bind="props"
         >
-          <v-icon left>
-            $info
-          </v-icon>{{ $t('common.help._') }}
+          <v-icon icon="$info" start />{{ $t('common.help._') }}
         </v-btn>
       </slot>
     </template>
-    <v-card :tile="isMobile">
+    <v-card :tile="$vuetify.display.mobile">
       <v-toolbar color="secondary" dark>
-        <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="cancel">
-          <v-icon>$cancel</v-icon>
-        </v-btn>
+        <v-btn icon="$cancel" :title="$t('common.action.cancel')" @click.stop="cancel" />
         <v-toolbar-title>{{ $t('common.help.title') }}</v-toolbar-title>
       </v-toolbar>
-      <v-form @keydown.native="errors.clear()" @submit.prevent="requestHelp">
+      <v-form @keydown="errors.clear()" @submit.prevent="requestHelp">
         <v-card-text>
           <p class="mx-2">
             {{ $t('common.help.text') }}
@@ -42,8 +37,8 @@
                   hide-details="auto"
                   :label="$t('common.name')"
                   name="name"
-                  outlined
                   prepend-inner-icon="fas fa-user"
+                  variant="outlined"
                 />
               </v-col>
               <v-col cols="12">
@@ -53,8 +48,8 @@
                   hide-details="auto"
                   :label="$t('common.email')"
                   name="email"
-                  outlined
                   prepend-inner-icon="fas fa-envelope"
+                  variant="outlined"
                 />
               </v-col>
               <v-col cols="4">
@@ -63,16 +58,19 @@
                   hide-details="auto"
                   :items="regionCodes"
                   name="phoneCountry"
-                  outlined
                   single-line
+                  variant="outlined"
                 >
-                  <template #item="{ item }">
-                    <span :class="`fi fi-${item.value.toLowerCase()} mr-3`" />
-                    {{ item.text }}
+                  <template #item="{ props, item }">
+                    <v-list-item v-bind="props" :title="item.raw.text">
+                      <template #prepend>
+                        <span :class="`fi fi-${item.value.toLowerCase()} me-3`" />
+                      </template>
+                    </v-list-item>
                   </template>
                   <template #selection="{ item }">
-                    <span :class="`fi fi-${item.value.toLowerCase()} mr-3`" />
-                    {{ item.countryCode }}
+                    <span :class="`fi fi-${item.value.toLowerCase()} me-3`" />
+                    {{ item.raw.countryCode }}
                   </template>
                 </v-autocomplete>
               </v-col>
@@ -83,8 +81,8 @@
                   hide-details="auto"
                   :label="$t('common.phone')"
                   name="phone"
-                  outlined
                   prepend-inner-icon="fas fa-phone"
+                  variant="outlined"
                 />
               </v-col>
               <v-col cols="12">
@@ -95,26 +93,24 @@
                   hide-details="auto"
                   :label="$t('common.message')"
                   name="message"
-                  outlined
                   prepend-inner-icon="fas fa-message"
+                  variant="outlined"
                 />
               </v-col>
             </v-row>
             <v-row justify="center">
-              <v-col :cols="isMobile ? '12' : 'auto'">
+              <v-col :cols="$vuetify.display.mobile ? '12' : 'auto'">
                 <v-btn
-                  :block="isMobile"
+                  :block="$vuetify.display.mobile"
                   color="primary"
                   :disabled="errors.any()"
-                  outlined
                   rounded
+                  size="x-large"
                   :title="$t('common.help.title')"
                   type="submit"
-                  x-large
+                  variant="outlined"
                 >
-                  <v-icon left>
-                    fas fa-circle-question
-                  </v-icon>
+                  <v-icon icon="fas fa-circle-question" start />
                   {{ $t('common.help.title') }}
                 </v-btn>
               </v-col>
@@ -135,8 +131,8 @@ import type { SurveyHelpRequest } from '@intake24/common/types/http';
 import { Errors } from '@intake24/common/util';
 import { useI18n } from '@intake24/i18n';
 
-import { surveyService } from '../services';
-import { useMessages } from '../stores';
+import { surveyService } from '../../services';
+import { useMessages } from '../../stores';
 
 export default defineComponent({
   name: 'RequestHelp',
@@ -155,13 +151,13 @@ export default defineComponent({
   emits: ['cancel'],
 
   setup(props, { emit }) {
-    const { i18n } = useI18n();
+    const { i18n: { t } } = useI18n();
 
     const regionCodes = getSupportedRegionCodes().map((code) => {
       const countryCode = `+${getCountryCodeForRegionCode(code)}`;
 
       return {
-        text: `${i18n.t(`flags.${code.toLowerCase()}`)} (${countryCode})`,
+        text: `${t(`flags.${code.toLowerCase()}`)} (${countryCode})`,
         value: code,
         countryCode,
       };
@@ -198,7 +194,7 @@ export default defineComponent({
 
       try {
         await surveyService.requestHelp(surveyId, form.value);
-        useMessages().info(i18n.t('common.help.sent').toString());
+        useMessages().info(t('common.help.sent'));
         reset();
         close();
       }
diff --git a/apps/survey/src/components/survey-rating.vue b/apps/survey/src/components/elements/survey-rating.vue
similarity index 83%
rename from apps/survey/src/components/survey-rating.vue
rename to apps/survey/src/components/elements/survey-rating.vue
index f81e2383fc..1ceeb6f091 100644
--- a/apps/survey/src/components/survey-rating.vue
+++ b/apps/survey/src/components/elements/survey-rating.vue
@@ -3,35 +3,33 @@
     <h2 class="text-h2 font-weight-medium text-center mb-4">
       {{ $t(`${type}.rating.title`) }}
     </h2>
-    <div class="d-flex flex-column justify-center">
+    <div class="text-center">
       <v-rating
         v-model="form.rating"
-        class="text-center my-4"
+        class="my-4"
         color="primary"
         hover
         length="5"
         :readonly="sent"
-        :size="$vuetify.breakpoint.smAndDown ? 32 : 48"
-        @input="dialog = true"
+        :size="$vuetify.display.smAndDown ? 32 : 48"
+        @update:model-value="dialog = true"
       />
     </div>
     <v-dialog
       v-model="dialog"
-      :fullscreen="$vuetify.breakpoint.smAndDown"
+      :fullscreen="$vuetify.display.smAndDown"
       max-width="600px"
       transition="dialog-bottom-transition"
     >
-      <v-card :tile="isMobile">
+      <v-card :tile="$vuetify.display.mobile">
         <v-toolbar color="secondary" dark>
-          <v-btn dark icon :title="$t('common.action.cancel')" @click.stop="close">
-            <v-icon>$cancel</v-icon>
-          </v-btn>
+          <v-btn icon="$cancel" :title="$t('common.action.cancel')" @click.stop="close" />
           <v-toolbar-title>{{ $t(`${type}.rating._`) }}</v-toolbar-title>
         </v-toolbar>
         <h3 class="text-h3 font-weight-medium text-center mt-3">
           {{ $t(`${type}.rating.title`) }}
         </h3>
-        <v-form @keydown.native="errors.clear()" @submit.prevent="rate">
+        <v-form @keydown="errors.clear()" @submit.prevent="rate">
           <v-card-text>
             <v-container>
               <v-row>
@@ -42,7 +40,7 @@
                     color="primary"
                     hover
                     length="5"
-                    :size="$vuetify.breakpoint.smAndDown ? 32 : 48"
+                    :size="$vuetify.display.smAndDown ? 32 : 48"
                   />
                 </v-col>
                 <v-col cols="12">
@@ -53,8 +51,8 @@
                     hide-details="auto"
                     :label="$t(`${type}.rating.comment`)"
                     name="comment"
-                    outlined
                     prepend-inner-icon="fas fa-message"
+                    variant="outlined"
                   />
                 </v-col>
               </v-row>
@@ -64,11 +62,11 @@
                     block
                     color="primary"
                     :disabled="errors.any()"
-                    outlined
                     rounded
+                    size="x-large"
                     :title="$t(`${type}.rating.send`)"
                     type="submit"
-                    x-large
+                    variant="outlined"
                   >
                     {{ $t(`${type}.rating.send`) }}
                   </v-btn>
@@ -92,8 +90,8 @@ import type { SurveyRatingRequest } from '@intake24/common/types/http';
 import { Errors } from '@intake24/common/util';
 import { useI18n } from '@intake24/i18n';
 
-import { surveyService } from '../services';
-import { useLoading, useMessages } from '../stores';
+import { surveyService } from '../../services';
+import { useLoading, useMessages } from '../../stores';
 
 export default defineComponent({
   name: 'SurveyRating',
@@ -113,7 +111,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { i18n } = useI18n();
+    const { i18n: { t } } = useI18n();
 
     const dialog = ref(false);
     const errors = ref(new Errors());
@@ -142,7 +140,7 @@ export default defineComponent({
 
       try {
         await surveyService.storeRating(props.surveyId, form.value);
-        useMessages().info(i18n.t(`${props.type}.rating.sent`).toString());
+        useMessages().info(t(`${props.type}.rating.sent`));
         sent.value = true;
         close();
       }
diff --git a/apps/survey/src/components/handlers/custom/CustomPromptHandler.vue b/apps/survey/src/components/handlers/custom/CustomPromptHandler.vue
index 75218c2611..570230ca23 100644
--- a/apps/survey/src/components/handlers/custom/CustomPromptHandler.vue
+++ b/apps/survey/src/components/handlers/custom/CustomPromptHandler.vue
@@ -13,9 +13,9 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import { computed, defineComponent, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import type { Prompt } from '@intake24/common/prompts';
 import type { PromptSection } from '@intake24/common/surveys';
@@ -25,60 +25,51 @@ import { useSurvey } from '@intake24/survey/stores';
 
 import { useCustomPromptHandler } from '../mixins';
 
-const infoPrompts = ['info-prompt'];
-
-export default defineComponent({
+defineOptions({
   name: 'CustomPromptHandler',
-
   components: { ...customPrompts },
+});
 
-  props: {
-    prompt: {
-      type: Object as PropType<Prompt>,
-      required: true,
-    },
-    section: {
-      type: String as PropType<PromptSection>,
-      required: true,
-    },
+const props = defineProps({
+  prompt: {
+    type: Object as PropType<Prompt>,
+    required: true,
+  },
+  section: {
+    type: String as PropType<PromptSection>,
+    required: true,
   },
+});
 
-  setup(props, { emit }) {
-    const { commitPromptAnswer, getPromptAnswer, foodOptional, mealOptional }
-      = useCustomPromptHandler(props);
-    const survey = useSurvey();
+const emit = defineEmits(['action']);
+
+const infoPrompts = ['info-prompt'];
 
-    const isInfoPrompt = computed(() => infoPrompts.includes(props.prompt.component));
-    const state = ref<CustomPromptAnswer | undefined>(
-      isInfoPrompt.value ? 'next' : getPromptAnswer(props.prompt.id),
-    );
+const { commitPromptAnswer, getPromptAnswer, foodOptional, mealOptional }
+      = useCustomPromptHandler(props);
+const survey = useSurvey();
 
-    const commitAnswer = () => {
-      if (props.prompt.component === 'no-more-information-prompt') {
-        const newSelection = survey.selection;
-        newSelection.mode = 'auto';
-        survey.setSelection(newSelection);
-      }
+const isInfoPrompt = computed(() => infoPrompts.includes(props.prompt.component));
+const state = ref<CustomPromptAnswer | undefined>(
+  isInfoPrompt.value ? 'next' : getPromptAnswer(props.prompt.id),
+);
 
-      commitPromptAnswer(props.prompt, state.value);
-    };
+function commitAnswer() {
+  if (props.prompt.component === 'no-more-information-prompt') {
+    const newSelection = survey.selection;
+    newSelection.mode = 'auto';
+    survey.setSelection(newSelection);
+  }
 
-    const action = (type: string, ...args: [id?: string, params?: object]) => {
-      if (type === 'next' || isInfoPrompt.value)
-        commitAnswer();
+  commitPromptAnswer(props.prompt, state.value);
+}
 
-      emit('action', type, ...args);
-    };
+function action(type: string, ...args: [id?: string, params?: object]) {
+  if (type === 'next' || isInfoPrompt.value)
+    commitAnswer();
 
-    return {
-      action,
-      foodOptional,
-      mealOptional,
-      state,
-      survey,
-    };
-  },
-});
+  emit('action', type, ...args);
+}
 </script>
 
 <style scoped></style>
diff --git a/apps/survey/src/components/handlers/custom/MultiCustomPromptHandler.vue b/apps/survey/src/components/handlers/custom/MultiCustomPromptHandler.vue
index d75cf2a487..c8011f263b 100644
--- a/apps/survey/src/components/handlers/custom/MultiCustomPromptHandler.vue
+++ b/apps/survey/src/components/handlers/custom/MultiCustomPromptHandler.vue
@@ -11,70 +11,58 @@
   />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import { defineComponent, ref } from 'vue';
+import { ref } from 'vue';
 
 import type { Prompt, Prompts } from '@intake24/common/prompts';
 import type { PromptSection } from '@intake24/common/surveys';
 import type { CustomPromptAnswer } from '@intake24/common/types';
 import { MultiPrompt } from '@intake24/survey/components/prompts';
-import { useSurvey } from '@intake24/survey/stores';
 
 import { useCustomPromptHandler } from '../mixins';
 
-const infoPrompts = ['info-prompt'];
-
-export default defineComponent({
+defineOptions({
   name: 'MultiCustomPromptHandler',
+});
 
-  components: { MultiPrompt },
-
-  props: {
-    prompt: {
-      type: Object as PropType<Prompts['multi-prompt']>,
-      required: true,
-    },
-    section: {
-      type: String as PropType<PromptSection>,
-      required: true,
-    },
+const props = defineProps({
+  prompt: {
+    type: Object as PropType<Prompts['multi-prompt']>,
+    required: true,
+  },
+  section: {
+    type: String as PropType<PromptSection>,
+    required: true,
   },
+});
 
-  setup(props, { emit }) {
-    const { commitPromptAnswer, getPromptAnswer, foodOptional, mealOptional }
-      = useCustomPromptHandler(props);
-    const survey = useSurvey();
+const emit = defineEmits(['action']);
+
+const infoPrompts = ['info-prompt'];
 
-    const isInfoPrompt = (prompt: Prompt) => infoPrompts.includes(prompt.component);
-    const state = ref<(CustomPromptAnswer | undefined)[]>(
-      props.prompt.prompts.map(prompt =>
-        isInfoPrompt(prompt) ? 'next' : getPromptAnswer(prompt.id),
-      ),
-    );
+const { commitPromptAnswer, getPromptAnswer, foodOptional, mealOptional }
+      = useCustomPromptHandler(props);
 
-    const commitAnswer = () => {
-      props.prompt.prompts.forEach((prompt, idx) => {
-        commitPromptAnswer(prompt, state.value[idx]);
-      });
-    };
+const isInfoPrompt = (prompt: Prompt) => infoPrompts.includes(prompt.component);
+const state = ref<(CustomPromptAnswer | undefined)[]>(
+  props.prompt.prompts.map(prompt =>
+    isInfoPrompt(prompt) ? 'next' : getPromptAnswer(prompt.id),
+  ),
+);
 
-    const action = (type: string, ...args: [id?: string, params?: object]) => {
-      if (type === 'next')
-        commitAnswer();
+function commitAnswer() {
+  props.prompt.prompts.forEach((prompt, idx) => {
+    commitPromptAnswer(prompt, state.value[idx]);
+  });
+}
 
-      emit('action', type, ...args);
-    };
+function action(type: string, ...args: [id?: string, params?: object]) {
+  if (type === 'next')
+    commitAnswer();
 
-    return {
-      action,
-      foodOptional,
-      mealOptional,
-      state,
-      survey,
-    };
-  },
-});
+  emit('action', type, ...args);
+}
 </script>
 
 <style scoped></style>
diff --git a/apps/survey/src/components/handlers/mixins/use-prompt-handler-no-store.ts b/apps/survey/src/components/handlers/mixins/use-prompt-handler-no-store.ts
index b20674325d..eebf9603ca 100644
--- a/apps/survey/src/components/handlers/mixins/use-prompt-handler-no-store.ts
+++ b/apps/survey/src/components/handlers/mixins/use-prompt-handler-no-store.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref, SetupContext } from 'vue';
 import { ref, watch } from 'vue';
 
-export function usePromptHandlerNoStore<T>({ emit }: SetupContext<any>, getInitialState: ComputedRef<T>, commitAnswer?: () => void) {
+export function usePromptHandlerNoStore<T>({ emit }: SetupContext<'action'[]>, getInitialState: ComputedRef<T>, commitAnswer?: () => void) {
   const state = ref(getInitialState.value) as Ref<T>;
 
   watch(getInitialState, (initialState) => {
diff --git a/apps/survey/src/components/handlers/mixins/use-prompt-handler-store.ts b/apps/survey/src/components/handlers/mixins/use-prompt-handler-store.ts
index af59f89360..4ebabdc05e 100644
--- a/apps/survey/src/components/handlers/mixins/use-prompt-handler-store.ts
+++ b/apps/survey/src/components/handlers/mixins/use-prompt-handler-store.ts
@@ -9,7 +9,7 @@ import { findMeal, mealPortionSizeComplete } from '@intake24/survey/util';
 export type UsePromptHandlerStoreProps<P extends keyof PromptStates> = {
   prompt: Prompts[P];
 };
-export function usePromptHandlerStore<P extends keyof PromptStates, S extends PromptStates[P]>(props: UsePromptHandlerStoreProps<P>, { emit }: SetupContext<any>, getInitialState: () => S, commitAnswer?: () => void) {
+export function usePromptHandlerStore<P extends keyof PromptStates, S extends PromptStates[P]>(props: UsePromptHandlerStoreProps<P>, { emit }: SetupContext<'action'[]>, getInitialState: () => S, commitAnswer?: () => void) {
   const promptStore = getOrCreatePromptStateStore<S>(props.prompt.component)();
   const survey = useSurvey();
 
diff --git a/apps/survey/src/components/handlers/portion-size/AsServedPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/AsServedPromptHandler.vue
index f766f03979..b8c8beaa13 100644
--- a/apps/survey/src/components/handlers/portion-size/AsServedPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/AsServedPromptHandler.vue
@@ -11,7 +11,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/CerealPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/CerealPromptHandler.vue
index 0c0a477725..695ab6c52e 100644
--- a/apps/survey/src/components/handlers/portion-size/CerealPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/CerealPromptHandler.vue
@@ -10,7 +10,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/DirectWeightPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/DirectWeightPromptHandler.vue
index b639934b1f..bdfd3405bf 100644
--- a/apps/survey/src/components/handlers/portion-size/DirectWeightPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/DirectWeightPromptHandler.vue
@@ -10,7 +10,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/DrinkScalePromptHandler.vue b/apps/survey/src/components/handlers/portion-size/DrinkScalePromptHandler.vue
index 549563ae84..09bb39f152 100644
--- a/apps/survey/src/components/handlers/portion-size/DrinkScalePromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/DrinkScalePromptHandler.vue
@@ -10,7 +10,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/GuideImagePromptHandler.vue b/apps/survey/src/components/handlers/portion-size/GuideImagePromptHandler.vue
index a64afa815f..0d81096068 100644
--- a/apps/survey/src/components/handlers/portion-size/GuideImagePromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/GuideImagePromptHandler.vue
@@ -12,7 +12,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/MilkInAHotDrinkPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/MilkInAHotDrinkPromptHandler.vue
index 9048d3164c..fc04e46229 100644
--- a/apps/survey/src/components/handlers/portion-size/MilkInAHotDrinkPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/MilkInAHotDrinkPromptHandler.vue
@@ -10,7 +10,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/MilkOnCerealPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/MilkOnCerealPromptHandler.vue
index b1b72dbd56..5901b8af6f 100644
--- a/apps/survey/src/components/handlers/portion-size/MilkOnCerealPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/MilkOnCerealPromptHandler.vue
@@ -10,7 +10,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/MissingFoodPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/MissingFoodPromptHandler.vue
index 9dba0815be..96a9c71ff1 100644
--- a/apps/survey/src/components/handlers/portion-size/MissingFoodPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/MissingFoodPromptHandler.vue
@@ -8,7 +8,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/ParentFoodPortionPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/ParentFoodPortionPromptHandler.vue
index fd5173e59d..f857a1346d 100644
--- a/apps/survey/src/components/handlers/portion-size/ParentFoodPortionPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/ParentFoodPortionPromptHandler.vue
@@ -10,7 +10,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/PizzaPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/PizzaPromptHandler.vue
index c90cd244db..0663644cfd 100644
--- a/apps/survey/src/components/handlers/portion-size/PizzaPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/PizzaPromptHandler.vue
@@ -10,7 +10,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/PizzaV2PromptHandler.vue b/apps/survey/src/components/handlers/portion-size/PizzaV2PromptHandler.vue
index 530102a2a3..a903beeb41 100644
--- a/apps/survey/src/components/handlers/portion-size/PizzaV2PromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/PizzaV2PromptHandler.vue
@@ -11,7 +11,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/PortionSizeOptionPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/PortionSizeOptionPromptHandler.vue
index 96129bca56..ad0f9fb692 100644
--- a/apps/survey/src/components/handlers/portion-size/PortionSizeOptionPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/PortionSizeOptionPromptHandler.vue
@@ -10,7 +10,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/RecipeBuilderPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/RecipeBuilderPromptHandler.vue
index 97602fd021..3be4196779 100644
--- a/apps/survey/src/components/handlers/portion-size/RecipeBuilderPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/RecipeBuilderPromptHandler.vue
@@ -11,7 +11,7 @@
     }"
     @action="action"
     @add-food="addingIngredientsAsALinkedFood"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/portion-size/StandardPortionPromptHandler.vue b/apps/survey/src/components/handlers/portion-size/StandardPortionPromptHandler.vue
index 91d67d7ffb..e4d90fb85f 100644
--- a/apps/survey/src/components/handlers/portion-size/StandardPortionPromptHandler.vue
+++ b/apps/survey/src/components/handlers/portion-size/StandardPortionPromptHandler.vue
@@ -12,7 +12,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/standard/AddonFoodsPromptHandler.vue b/apps/survey/src/components/handlers/standard/AddonFoodsPromptHandler.vue
index 8aa4737480..31d28635e5 100644
--- a/apps/survey/src/components/handlers/standard/AddonFoodsPromptHandler.vue
+++ b/apps/survey/src/components/handlers/standard/AddonFoodsPromptHandler.vue
@@ -20,7 +20,6 @@ import { computed, defineComponent } from 'vue';
 import type { Prompts, PromptStates } from '@intake24/common/prompts';
 import type { PortionSizeParameters, PromptSection } from '@intake24/common/surveys';
 import type { FoodState } from '@intake24/common/types';
-import { useI18n } from '@intake24/i18n';
 import { AddonFoodsPrompt } from '@intake24/survey/components/prompts/standard';
 import { useSurvey } from '@intake24/survey/stores';
 import { addonFoodPromptCheck, getEntityId } from '@intake24/survey/util';
@@ -46,7 +45,6 @@ export default defineComponent({
   emits: ['action'],
 
   setup(props, ctx) {
-    const { translate } = useI18n();
     const { encodedFoodOptional: food, localeId } = useFoodPromptUtils();
     const { mealOptional: meal } = useMealPromptUtils();
     const survey = useSurvey();
@@ -156,7 +154,6 @@ export default defineComponent({
 
     return {
       food,
-      translate,
       localeId,
       meal,
       meals,
diff --git a/apps/survey/src/components/handlers/standard/AssociatedFoodsPromptHandler.vue b/apps/survey/src/components/handlers/standard/AssociatedFoodsPromptHandler.vue
index d0ddededec..2dbe178cbc 100644
--- a/apps/survey/src/components/handlers/standard/AssociatedFoodsPromptHandler.vue
+++ b/apps/survey/src/components/handlers/standard/AssociatedFoodsPromptHandler.vue
@@ -11,7 +11,7 @@
       section,
     }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
@@ -298,7 +298,6 @@ export default defineComponent({
 
     return {
       food,
-      translate,
       localeId,
       surveySlug,
       meal,
diff --git a/apps/survey/src/components/handlers/standard/EditMealPromptHandler.vue b/apps/survey/src/components/handlers/standard/EditMealPromptHandler.vue
index fe3d5bef6c..78ddb3bab9 100644
--- a/apps/survey/src/components/handlers/standard/EditMealPromptHandler.vue
+++ b/apps/survey/src/components/handlers/standard/EditMealPromptHandler.vue
@@ -3,7 +3,7 @@
     v-model="state"
     v-bind="{ meal, prompt, section }"
     @action="action"
-    @input="update"
+    @update:model-value="update"
   />
 </template>
 
diff --git a/apps/survey/src/components/handlers/standard/FinalPromptHandler.vue b/apps/survey/src/components/handlers/standard/FinalPromptHandler.vue
index 01521e79f9..9b07aa8337 100644
--- a/apps/survey/src/components/handlers/standard/FinalPromptHandler.vue
+++ b/apps/survey/src/components/handlers/standard/FinalPromptHandler.vue
@@ -17,7 +17,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
-import { useRoute } from 'vue-router/composables';
+import { useRoute } from 'vue-router';
 
 import type { Prompts } from '@intake24/common/prompts';
 import type { PromptSection } from '@intake24/common/surveys';
diff --git a/apps/survey/src/components/handlers/standard/GeneralAssociatedFoodsPromptHandler.vue b/apps/survey/src/components/handlers/standard/GeneralAssociatedFoodsPromptHandler.vue
index 095f364055..c32b102f87 100644
--- a/apps/survey/src/components/handlers/standard/GeneralAssociatedFoodsPromptHandler.vue
+++ b/apps/survey/src/components/handlers/standard/GeneralAssociatedFoodsPromptHandler.vue
@@ -11,7 +11,7 @@
       section,
     }"
     @action="action"
-    @input="updateState"
+    @update:model-value="updateState"
   />
 </template>
 
@@ -240,7 +240,6 @@ export default defineComponent({
 
     return {
       food,
-      translate,
       localeId,
       surveySlug,
       meal,
diff --git a/apps/survey/src/components/handlers/standard/MealAddPromptHandler.vue b/apps/survey/src/components/handlers/standard/MealAddPromptHandler.vue
index 8bf430e956..db702128d6 100644
--- a/apps/survey/src/components/handlers/standard/MealAddPromptHandler.vue
+++ b/apps/survey/src/components/handlers/standard/MealAddPromptHandler.vue
@@ -40,11 +40,11 @@ export default defineComponent({
     const getInitialState = computed<string | undefined>(() => undefined);
 
     const { state } = usePromptHandlerNoStore(ctx, getInitialState);
-    const { i18n } = useI18n();
+    const { i18n: { locale } } = useI18n();
     const survey = useSurvey();
 
-    const defaultMeals = computed(() => survey.defaultSchemeMeals?.map(({ name }) => name[i18n.locale] ?? name.en) ?? []);
-    const meals = computed(() => survey.meals.map(({ name }) => (name[i18n.locale] ?? name.en).toLowerCase().trim()));
+    const defaultMeals = computed(() => survey.defaultSchemeMeals?.map(({ name }) => name[locale.value] ?? name.en) ?? []);
+    const meals = computed(() => survey.meals.map(({ name }) => (name[locale.value] ?? name.en).toLowerCase().trim()));
 
     const action = (type: string, ...args: [id?: string, params?: object]) => {
       if (type === 'next')
@@ -65,7 +65,7 @@ export default defineComponent({
         return;
       }
 
-      survey.addMeal({ name: { en: state.value, [i18n.locale]: state.value } }, i18n.locale);
+      survey.addMeal({ name: { en: state.value, [locale.value]: state.value } }, locale.value);
     };
 
     return { state, action, defaultMeals, meals };
diff --git a/apps/survey/src/components/handlers/standard/MealGapPromptHandler.vue b/apps/survey/src/components/handlers/standard/MealGapPromptHandler.vue
index 4cf773509f..3413c09f1c 100644
--- a/apps/survey/src/components/handlers/standard/MealGapPromptHandler.vue
+++ b/apps/survey/src/components/handlers/standard/MealGapPromptHandler.vue
@@ -28,6 +28,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['action'],
+
   setup(props, { emit }) {
     const survey = useSurvey();
 
diff --git a/apps/survey/src/components/handlers/standard/RecallDatePromptHandler.vue b/apps/survey/src/components/handlers/standard/RecallDatePromptHandler.vue
index 446d0ab340..7dbeb9fc21 100644
--- a/apps/survey/src/components/handlers/standard/RecallDatePromptHandler.vue
+++ b/apps/survey/src/components/handlers/standard/RecallDatePromptHandler.vue
@@ -40,7 +40,6 @@ export default defineComponent({
 
     const getInitialState = computed(
       () => survey.data.recallDate,
-      // typeof props.prompt.current === 'number' ? addDays(new Date(), props.prompt.current).toISOString().substring(0, 10) : null,
     );
 
     const { state } = usePromptHandlerNoStore(ctx, getInitialState);
diff --git a/apps/survey/src/components/handlers/standard/RedirectPromptHandler.vue b/apps/survey/src/components/handlers/standard/RedirectPromptHandler.vue
index 65ee6948c4..63d1ea294e 100644
--- a/apps/survey/src/components/handlers/standard/RedirectPromptHandler.vue
+++ b/apps/survey/src/components/handlers/standard/RedirectPromptHandler.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
-import { useRoute } from 'vue-router/composables';
+import { useRoute } from 'vue-router';
 
 import type { Prompts } from '@intake24/common/prompts';
 import type { PromptSection } from '@intake24/common/surveys';
diff --git a/apps/survey/src/components/index.ts b/apps/survey/src/components/index.ts
index f909c316c2..80c68ab1fd 100644
--- a/apps/survey/src/components/index.ts
+++ b/apps/survey/src/components/index.ts
@@ -1,3 +1 @@
 export * from './recall';
-export { default as RequestHelp } from './request-help.vue';
-export { default as SurveyRating } from './survey-rating.vue';
diff --git a/apps/survey/src/components/layouts/meal-list/desktop/context-menu.vue b/apps/survey/src/components/layouts/meal-list/desktop/context-menu.vue
index 546a1d194e..c04ced318d 100644
--- a/apps/survey/src/components/layouts/meal-list/desktop/context-menu.vue
+++ b/apps/survey/src/components/layouts/meal-list/desktop/context-menu.vue
@@ -1,27 +1,20 @@
 <template>
   <div>
-    <v-menu :close-delay="250" close-on-click close-on-content-click offset-x open-on-hover>
-      <template #activator="{ on, attrs }">
-        <v-btn icon v-bind="attrs" v-on="on" @click.stop>
-          <v-icon small>
-            $edit
-          </v-icon>
-        </v-btn>
+    <v-menu :close-delay="250" close-on-content-click open-on-hover :persistent="false">
+      <template #activator="{ props: cmProps }">
+        <v-icon v-bind="cmProps" size="small" @click.stop>
+          $edit
+        </v-icon>
       </template>
-      <v-list dense>
-        <template v-for="(item, idx) in menu">
+      <v-list density="compact">
+        <template v-for="(item, idx) in menu" :key="item.name">
           <v-list-item
-            :key="item.name"
             @click="item.dialog ? openDialog(item.action) : action(item.action)"
           >
-            <v-list-item-icon v-if="item.icon">
-              <v-icon small>
-                {{ item.icon }}
-              </v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-item-title>{{ item.name }}</v-list-item-title>
-            </v-list-item-content>
+            <template v-if="item.icon" #prepend>
+              <v-icon :icon="item.icon" size="small" />
+            </template>
+            <v-list-item-title>{{ item.name }}</v-list-item-title>
           </v-list-item>
           <v-divider v-if="idx + 1 < menu.length" :key="`div-${item.name}`" />
         </template>
@@ -30,14 +23,14 @@
     <confirm-dialog
       v-model="dialog"
       external
-      :label="$t(`recall.menu.${isMeal ? 'meal' : 'food'}.delete`).toString()"
+      :label="$t(`recall.menu.${isMeal ? 'meal' : 'food'}.delete`)"
       @confirm="action(isMeal ? 'deleteMeal' : 'deleteFood')"
     >
-      <i18n :path="`recall.menu.${isMeal ? 'meal' : 'food'}.deleteConfirm`">
+      <i18n-t :keypath="`recall.menu.${isMeal ? 'meal' : 'food'}.deleteConfirm`" tag="span">
         <template #item>
           <span class="font-weight-medium">{{ entityName }}</span>
         </template>
-      </i18n>
+      </i18n-t>
     </confirm-dialog>
   </div>
 </template>
diff --git a/apps/survey/src/components/layouts/meal-list/desktop/food-item.vue b/apps/survey/src/components/layouts/meal-list/desktop/food-item.vue
index 57e34ae87d..5c7bbef3ab 100644
--- a/apps/survey/src/components/layouts/meal-list/desktop/food-item.vue
+++ b/apps/survey/src/components/layouts/meal-list/desktop/food-item.vue
@@ -1,55 +1,53 @@
 <template>
   <div>
     <v-list-item
-      :class="{ 'selected': food.id === selectedFoodId, 'pl-4': !linked, 'pl-8': linked }"
+      :class="{ 'selected': food.id === selectedFoodId, 'ps-4': !linked, 'ps-8': linked }"
       link
       @click="action('selectFood', food.id)"
     >
-      <v-list-item-title class="text-wrap">
+      <v-list-item-title class="text-body-2 text-wrap">
         {{ foodName }}
       </v-list-item-title>
-      <v-list-item-action class="d-flex flex-row">
-        <v-tooltip bottom>
-          <template #activator="{ on, attrs }">
-            <v-icon
-              v-if="food.type === 'free-text'"
-              v-bind="attrs"
-              class="mr-1"
-              color="grey"
-              small
-              v-on="on"
-            >
-              $question
-            </v-icon>
-            <v-icon v-else v-bind="attrs" class="mr-1" color="green darken-2" small v-on="on">
-              $ok
-            </v-icon>
-          </template>
-          <span>{{ $t(`recall.menu.food.${food.type}._`) }}</span>
-        </v-tooltip>
-        <v-tooltip bottom>
-          <template #activator="{ on, attrs }">
-            <v-icon
-              v-bind="attrs"
-              :color="isPortionSizeComplete ? 'green darken-2' : undefined"
-              small
-              v-on="on"
-            >
-              {{ isPortionSizeComplete ? '$ok' : '$question' }}
-            </v-icon>
-          </template>
-          <span>
-            {{
-              $t(
-                `recall.menu.food.${food.type}.${isPortionSizeComplete ? 'complete' : 'incomplete'}`,
-              )
-            }}
-          </span>
-        </v-tooltip>
-      </v-list-item-action>
-      <v-list-item-action class="my-auto">
-        <context-menu v-bind="{ food, meal, menu }" @action="action" />
-      </v-list-item-action>
+      <template #append>
+        <v-list-item-action class="d-flex flex-row me-4">
+          <v-tooltip location="bottom">
+            <template #activator="{ props }">
+              <v-icon
+                v-if="food.type === 'free-text'"
+                v-bind="props"
+                class="me-1"
+                color="grey"
+                icon="$question"
+                size="small"
+              />
+              <v-icon v-else class="me-1" color="green-darken-2" v-bind="props" icon="$ok" size="small" />
+            </template>
+            <span>{{ $t(`recall.menu.food.${food.type}._`) }}</span>
+          </v-tooltip>
+          <v-tooltip location="bottom">
+            <template #activator="{ props }">
+              <v-icon
+
+                :color="isPortionSizeComplete ? 'green darken-2' : undefined"
+                size="small"
+                v-bind="props"
+              >
+                {{ isPortionSizeComplete ? '$ok' : '$question' }}
+              </v-icon>
+            </template>
+            <span>
+              {{
+                $t(
+                  `recall.menu.food.${food.type}.${isPortionSizeComplete ? 'complete' : 'incomplete'}`,
+                )
+              }}
+            </span>
+          </v-tooltip>
+        </v-list-item-action>
+        <v-list-item-action class="my-auto">
+          <context-menu v-bind="{ food, meal, menu }" @action="action" />
+        </v-list-item-action>
+      </template>
     </v-list-item>
     <food-item
       v-for="linkedFood in food.linkedFoods"
diff --git a/apps/survey/src/components/layouts/meal-list/desktop/list.vue b/apps/survey/src/components/layouts/meal-list/desktop/list.vue
index 8c84d0cf8f..32df7d9a10 100644
--- a/apps/survey/src/components/layouts/meal-list/desktop/list.vue
+++ b/apps/survey/src/components/layouts/meal-list/desktop/list.vue
@@ -1,10 +1,10 @@
 <template>
   <v-card>
-    <v-card-title>
+    <v-card-title class="pa-4">
       {{ $t('recall.menu.title') }}
     </v-card-title>
     <v-divider />
-    <v-list class="meal-list__list pt-0" dense flat tile>
+    <v-list class="meal-list__list pt-0" density="compact" tile>
       <component
         :is="expandable ? 'meal-item-expandable' : 'meal-item'"
         v-for="meal in meals"
@@ -15,20 +15,16 @@
       />
     </v-list>
     <v-card-actions>
-      <v-hover v-slot="{ hover }">
-        <v-btn
-          block
-          :color="hover ? 'primary' : 'inherit'"
-          depressed
-          :title="$t('recall.menu.meal.add')"
-          @click="action('addMeal')"
-        >
-          <v-icon left>
-            $add
-          </v-icon>
-          {{ $t('recall.menu.meal.add') }}
-        </v-btn>
-      </v-hover>
+      <v-btn
+        block
+        color="primary"
+        :title="$t('recall.menu.meal.add')"
+        variant="tonal"
+        @click="action('addMeal')"
+      >
+        <v-icon icon="$add" start />
+        {{ $t('recall.menu.meal.add') }}
+      </v-btn>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/apps/survey/src/components/layouts/meal-list/desktop/meal-item-expandable.vue b/apps/survey/src/components/layouts/meal-list/desktop/meal-item-expandable.vue
index f6160ef998..a3966203f4 100644
--- a/apps/survey/src/components/layouts/meal-list/desktop/meal-item-expandable.vue
+++ b/apps/survey/src/components/layouts/meal-list/desktop/meal-item-expandable.vue
@@ -1,24 +1,23 @@
 <template>
   <v-list-group
     :class="{ 'selected': isSelected || selectedFoodInMeal, 'selected-food': selectedFoodInMeal }"
-    :sub-group="true"
     :value="true"
     @click="action('selectMeal', meal.id)"
   >
-    <template #prependIcon>
+    <template #prepend>
       <v-icon :class="{ rotate: isSelected || selectedFoodInMeal }">
         $expand
       </v-icon>
     </template>
     <template #activator>
-      <v-list-item-title class="font-weight-bold text-wrap">
+      <v-list-item-title class="text-body-2 font-weight-medium text-wrap">
         {{ mealName }}
       </v-list-item-title>
       <v-list-item-action>
-        <v-list-item-action-text v-if="mealTime?.length">
+        <span v-if="mealTime?.length">
           {{ mealTime }}
-        </v-list-item-action-text>
-        <v-icon v-else small>
+        </span>
+        <v-icon v-else size="small">
           $question
         </v-icon>
       </v-list-item-action>
diff --git a/apps/survey/src/components/layouts/meal-list/desktop/meal-item.vue b/apps/survey/src/components/layouts/meal-list/desktop/meal-item.vue
index 2df1c11a07..b5b6faa33d 100644
--- a/apps/survey/src/components/layouts/meal-list/desktop/meal-item.vue
+++ b/apps/survey/src/components/layouts/meal-list/desktop/meal-item.vue
@@ -4,25 +4,27 @@
       :class="{ 'selected': isSelected || selectedFoodInMeal, 'selected-food': selectedFoodInMeal }"
       @click="action('selectMeal', meal.id)"
     >
-      <v-list-item-title class="font-weight-bold text-wrap">
+      <v-list-item-title class="text-body-2 font-weight-medium text-wrap">
         {{ mealName }}
       </v-list-item-title>
-      <v-list-item-action>
-        <v-list-item-action-text v-if="mealTime && !meal.flags.includes('meal-time:hidden')">
-          {{ mealTime }}
-        </v-list-item-action-text>
-        <v-tooltip v-else-if="!mealTime" bottom>
-          <template #activator="{ on, attrs }">
-            <v-icon v-bind="attrs" small v-on="on">
-              $question
-            </v-icon>
-          </template>
-          <span>{{ $t('recall.menu.mealSuggested') }}</span>
-        </v-tooltip>
-      </v-list-item-action>
-      <v-list-item-action class="my-auto">
-        <context-menu v-bind="{ meal, menu }" @action="action" />
-      </v-list-item-action>
+      <template #append>
+        <v-list-item-action class="me-4 my-auto">
+          <span v-if="mealTime && !meal.flags.includes('meal-time:hidden')" class="text-body-2">
+            {{ mealTime }}
+          </span>
+          <v-tooltip v-else-if="!mealTime" location="bottom">
+            <template #activator="{ props }">
+              <v-icon size="small" v-bind="props">
+                $question
+              </v-icon>
+            </template>
+            <span>{{ $t('recall.menu.mealSuggested') }}</span>
+          </v-tooltip>
+        </v-list-item-action>
+        <v-list-item-action class="my-auto">
+          <context-menu v-bind="{ meal, menu }" @action="action" />
+        </v-list-item-action>
+      </template>
     </v-list-item>
     <v-divider />
     <template v-if="meal.foods.length">
diff --git a/apps/survey/src/components/layouts/meal-list/desktop/reviewed-list.vue b/apps/survey/src/components/layouts/meal-list/desktop/reviewed-list.vue
index 6ad5e57ed2..90ce103695 100644
--- a/apps/survey/src/components/layouts/meal-list/desktop/reviewed-list.vue
+++ b/apps/survey/src/components/layouts/meal-list/desktop/reviewed-list.vue
@@ -5,22 +5,18 @@
     </v-card-title>
     <v-divider />
     <v-card-actions>
-      <v-hover v-slot="{ hover }">
-        <v-btn
-          class="ma-2"
-          :color="hover ? 'primary' : 'inherit'"
-          depressed
-          :title="$t('recall.menu.meal.add')"
-          @click="action('addMeal')"
-        >
-          <v-icon left>
-            $add
-          </v-icon>
-          {{ $t('recall.menu.meal.add') }}
-        </v-btn>
-      </v-hover>
+      <v-btn
+        class="px-4"
+        color="primary"
+        :title="$t('recall.menu.meal.add')"
+        variant="tonal"
+        @click="action('addMeal')"
+      >
+        <v-icon icon="$add" start />
+        {{ $t('recall.menu.meal.add') }}
+      </v-btn>
     </v-card-actions>
-    <v-list class="meal-list__list pt-0" dense flat tile>
+    <v-list class="meal-list__list pt-0" density="compact" tile>
       <div v-for="meal in meals" :key="meal.id">
         <component
           :is="expandable ? 'meal-item-expandable' : 'meal-item'"
@@ -29,7 +25,6 @@
           @action="action"
         />
         <div class="d-flex flex-row pa-4 ga-4">
-          <!-- @vue-expect-error vuetify2 uses both model/value -->
           <v-checkbox
             v-if="review === 'checkbox'"
             v-model="reviewed"
@@ -38,17 +33,15 @@
             :label="$t('recall.actions.reviewed')"
             :value="meal.id"
           />
-          <v-hover v-slot="{ hover }">
-            <v-btn
-              :color="hover ? 'primary' : 'inherit'"
-              depressed
-              small
-              :title="$t('recall.menu.meal.editFoods')"
-              @click="action('editMeal', meal.id)"
-            >
-              {{ $t('recall.menu.meal.editFoods') }}
-            </v-btn>
-          </v-hover>
+          <v-btn
+            color="primary"
+            size="small"
+            :title="$t('recall.menu.meal.editFoods')"
+            variant="tonal"
+            @click="action('editMeal', meal.id)"
+          >
+            {{ $t('recall.menu.meal.editFoods') }}
+          </v-btn>
         </div>
       </div>
     </v-list>
@@ -61,15 +54,15 @@
       />
     </v-card-text>
     <v-card-actions v-if="!bottomReached" v-intersect="bottomIntersect">
-      <v-hover v-slot="{ hover }">
+      <v-hover v-slot="{ isHovering }">
         <v-btn
           block
-          :color="hover ? 'primary' : 'inherit'"
-          depressed
+          :color="isHovering ? 'primary' : 'inherit'"
           :title="$t('recall.menu.meal.add')"
+          variant="flat"
           @click="action('addMeal')"
         >
-          <v-icon left>
+          <v-icon start>
             $add
           </v-icon>
           {{ $t('recall.menu.meal.add') }}
diff --git a/apps/survey/src/components/layouts/meal-list/mobile/context-menu.vue b/apps/survey/src/components/layouts/meal-list/mobile/context-menu.vue
index a4a0517cc1..3d1ddd5913 100644
--- a/apps/survey/src/components/layouts/meal-list/mobile/context-menu.vue
+++ b/apps/survey/src/components/layouts/meal-list/mobile/context-menu.vue
@@ -8,11 +8,10 @@
           class="rounded-xl"
           link
           tile
-          :title="item.name"
           @click="item.dialog ? openDialog(item.action) : action(item.action)"
         >
           <v-card-text class="d-flex flex-column justify-center align-center ga-2">
-            <v-icon large>
+            <v-icon size="large">
               {{ item.icon }}
             </v-icon>
             <span class="text-center font-weight-medium">{{ item.name }}</span>
@@ -22,14 +21,14 @@
       <confirm-dialog
         v-model="dialog"
         external
-        :label="$t(`recall.menu.${isMeal ? 'meal' : 'food'}.delete`).toString()"
+        :label="$t(`recall.menu.${isMeal ? 'meal' : 'food'}.delete`)"
         @confirm="action(isMeal ? 'deleteMeal' : 'deleteFood')"
       >
-        <i18n :path="`recall.menu.${isMeal ? 'meal' : 'food'}.deleteConfirm`">
+        <i18n-t :keypath="`recall.menu.${isMeal ? 'meal' : 'food'}.deleteConfirm`" tag="span">
           <template #item>
             <span class="font-weight-medium">{{ entityName }}</span>
           </template>
-        </i18n>
+        </i18n-t>
       </confirm-dialog>
     </v-sheet>
   </v-expand-transition>
@@ -67,6 +66,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['action'],
+
   setup(props, ctx) {
     const { action, dialog, entity, entityName, isMeal, openDialog } = useContextMenu(props, ctx);
 
diff --git a/apps/survey/src/components/layouts/meal-list/mobile/food-item.vue b/apps/survey/src/components/layouts/meal-list/mobile/food-item.vue
index 19472a1bb3..f04f9d3bd9 100644
--- a/apps/survey/src/components/layouts/meal-list/mobile/food-item.vue
+++ b/apps/survey/src/components/layouts/meal-list/mobile/food-item.vue
@@ -3,54 +3,55 @@
     <v-list-item
       :class="{
         'selected': contextId ? food.id === contextId : food.id === selectedFoodId,
-        'pl-4': !linked,
-        'pl-8': linked,
+        'ps-4': !linked,
+        'ps-8': linked,
       }"
       link
       @click="updateContextId(food.id)"
     >
-      <v-list-item-title class="text-wrap">
+      <v-list-item-title class="text-body-2 text-wrap">
         {{ foodName }}
       </v-list-item-title>
-      <v-list-item-action class="d-flex flex-row">
-        <v-tooltip bottom>
-          <template #activator="{ on, attrs }">
-            <v-icon
-              v-if="food.type === 'free-text'"
-              v-bind="attrs"
-              class="mr-1"
-              color="grey"
-              small
-              v-on="on"
-            >
-              $question
-            </v-icon>
-            <v-icon v-else v-bind="attrs" class="mr-1" color="green darken-2" small v-on="on">
-              $ok
-            </v-icon>
-          </template>
-          <span>{{ $t(`recall.menu.food.${food.type}._`) }}</span>
-        </v-tooltip>
-        <v-tooltip bottom>
-          <template #activator="{ on, attrs }">
-            <v-icon
-              v-bind="attrs"
-              :color="isPortionSizeComplete ? 'green darken-2' : undefined"
-              small
-              v-on="on"
-            >
-              {{ isPortionSizeComplete ? '$ok' : '$question' }}
-            </v-icon>
-          </template>
-          <span>
-            {{
-              $t(
-                `recall.menu.food.${food.type}.${isPortionSizeComplete ? 'complete' : 'incomplete'}`,
-              )
-            }}
-          </span>
-        </v-tooltip>
-      </v-list-item-action>
+      <template #append>
+        <v-list-item-action class="d-flex flex-row">
+          <v-tooltip location="bottom">
+            <template #activator="{ props }">
+              <v-icon
+                v-if="food.type === 'free-text'"
+                v-bind="props"
+                class="me-1"
+                color="grey"
+                size="small"
+              >
+                $question
+              </v-icon>
+              <v-icon v-else class="me-1" color="green-darken-2" size="small" v-bind="props">
+                $ok
+              </v-icon>
+            </template>
+            <span>{{ $t(`recall.menu.food.${food.type}._`) }}</span>
+          </v-tooltip>
+          <v-tooltip location="bottom">
+            <template #activator="{ props }">
+              <v-icon
+
+                :color="isPortionSizeComplete ? 'green darken-2' : undefined"
+                size="small"
+                v-bind="props"
+              >
+                {{ isPortionSizeComplete ? '$ok' : '$question' }}
+              </v-icon>
+            </template>
+            <span>
+              {{
+                $t(
+                  `recall.menu.food.${food.type}.${isPortionSizeComplete ? 'complete' : 'incomplete'}`,
+                )
+              }}
+            </span>
+          </v-tooltip>
+        </v-list-item-action>
+      </template>
     </v-list-item>
     <context-menu v-bind="{ contextId, food, meal, menu }" @action="action" />
     <food-item
@@ -99,6 +100,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['action', 'update:context-id'],
+
   setup(props, ctx) {
     const { action, foodName, isPortionSizeComplete, menu } = useFoodItem(props, ctx);
 
diff --git a/apps/survey/src/components/layouts/meal-list/mobile/list.vue b/apps/survey/src/components/layouts/meal-list/mobile/list.vue
index 4227cdcd59..6170f4999f 100644
--- a/apps/survey/src/components/layouts/meal-list/mobile/list.vue
+++ b/apps/survey/src/components/layouts/meal-list/mobile/list.vue
@@ -1,7 +1,7 @@
 <template>
   <v-bottom-sheet v-model="navigation" content-class="meal-list-mobile__sheet" scrollable>
-    <template #activator="{ on, attrs }">
-      <v-btn v-bind="attrs" class="navigation__btn-summary" value="summary" v-on="on">
+    <template #activator="{ props }">
+      <v-btn v-bind="props" class="navigation__btn-summary" value="summary">
         <span class="text-overline font-weight-medium">
           {{ $t('recall.actions.nav.review') }}
         </span>
@@ -11,18 +11,18 @@
       </v-btn>
     </template>
     <v-card class="meal-list-mobile__card">
-      <div class="py-4 pl-4 pr-3 d-flex flex-row justify-space-between align-center">
+      <div class="py-4 ps-4 pe-3 d-flex flex-row justify-space-between align-center">
         <div class="text-h6 font-weight-medium">
           {{ $t('recall.menu.title') }}
         </div>
-        <v-btn color="primary" icon :title="$t('recall.menu.meal.add')" @click="action('addMeal')">
-          <v-icon x-large>
+        <v-btn color="white" icon :title="$t('recall.menu.meal.add')" @click="action('addMeal')">
+          <v-icon color="primary" size="x-large">
             $add
           </v-icon>
         </v-btn>
       </div>
       <v-card-text class="pa-0">
-        <v-list class="meal-list__list" dense subheader>
+        <v-list class="meal-list__list" density="compact">
           <meal-item
             v-for="meal in meals"
             :key="meal.id"
@@ -36,12 +36,12 @@
       <v-btn
         block
         color="info"
-        large
+        size="large"
         tile
         :title="$t('common.action.close')"
         @click="closeNavigation"
       >
-        <v-icon left>
+        <v-icon start>
           $close
         </v-icon>{{ $t('common.action.close') }}
       </v-btn>
diff --git a/apps/survey/src/components/layouts/meal-list/mobile/meal-item.vue b/apps/survey/src/components/layouts/meal-list/mobile/meal-item.vue
index 61296156f5..bf2232d9c1 100644
--- a/apps/survey/src/components/layouts/meal-list/mobile/meal-item.vue
+++ b/apps/survey/src/components/layouts/meal-list/mobile/meal-item.vue
@@ -8,21 +8,21 @@
       }"
       @click="updateContextId(meal.id)"
     >
-      <v-list-item-content>
-        <v-list-item-title class="font-weight-bold text-wrap">
-          {{ mealName }}
-        </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action v-if="meal.time && !meal.flags.includes('meal-time:hidden')">
-        <v-list-item-action-text>
-          {{ mealTime }}
-        </v-list-item-action-text>
-      </v-list-item-action>
-      <v-list-item-action class="my-auto">
-        <v-icon :class="{ 'fa-rotate-180': meal.id === contextId }">
-          $expand
-        </v-icon>
-      </v-list-item-action>
+      <v-list-item-title class="font-weight-bold text-wrap">
+        {{ mealName }}
+      </v-list-item-title>
+      <template #append>
+        <v-list-item-action v-if="meal.time && !meal.flags.includes('meal-time:hidden')" class="me-4 my-auto">
+          <span>
+            {{ mealTime }}
+          </span>
+        </v-list-item-action>
+        <v-list-item-action class="my-auto">
+          <v-icon :class="{ 'fa-rotate-180': meal.id === contextId }">
+            $expand
+          </v-icon>
+        </v-list-item-action>
+      </template>
     </v-list-item>
     <context-menu v-bind="{ contextId, meal, menu }" @action="action" />
     <v-divider />
@@ -74,6 +74,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['action', 'update:context-id'],
+
   setup(props, ctx) {
     const { action, isSelected, menu, mealName, mealTime } = useMealItem(props, ctx);
 
diff --git a/apps/survey/src/components/layouts/meal-list/mobile/reviewed-list.vue b/apps/survey/src/components/layouts/meal-list/mobile/reviewed-list.vue
index 7222d566b3..80c8ce3957 100644
--- a/apps/survey/src/components/layouts/meal-list/mobile/reviewed-list.vue
+++ b/apps/survey/src/components/layouts/meal-list/mobile/reviewed-list.vue
@@ -1,13 +1,13 @@
 <template>
   <div content-class="meal-list-mobile__sheet" scrollable>
     <v-card class="meal-list-mobile__card" flat>
-      <div class="py-4 pl-4 pr-3 d-flex flex-row justify-space-between align-center">
+      <div class="py-4 ps-4 pe-3 d-flex flex-row justify-space-between align-center">
         <div class="text-h6 font-weight-medium">
           {{ $t('recall.menu.title') }}
         </div>
       </div>
       <v-card-text class="pa-0">
-        <v-list class="meal-list__list" dense subheader>
+        <v-list class="meal-list__list" density="compact">
           <div v-for="meal in meals" :key="meal.id">
             <meal-item
               v-bind="{ contextId, meal, selectedMealId, selectedFoodId }"
@@ -16,7 +16,6 @@
               @update:context-id="updateContextId"
             />
             <div class="d-flex flex-column pa-4 ga-4">
-              <!-- @vue-expect-error vuetify2 uses both model/value -->
               <v-checkbox
                 v-if="review === 'checkbox'"
                 v-model="reviewed"
@@ -25,12 +24,12 @@
                 :label="$t('recall.actions.reviewed')"
                 :value="meal.id"
               />
-              <v-hover v-slot="{ hover }">
+              <v-hover v-slot="{ isHovering }">
                 <v-btn
-                  :color="hover ? 'primary' : 'inherit'"
-                  depressed
-                  small
+                  :color="isHovering ? 'primary' : 'inherit'"
+                  size="small"
                   :title="$t('recall.menu.meal.editFoods')"
+                  variant="flat"
                   @click="action('editMeal', meal.id)"
                 >
                   {{ $t('recall.menu.meal.editFoods') }}
diff --git a/apps/survey/src/components/layouts/meal-list/use-context-menu.ts b/apps/survey/src/components/layouts/meal-list/use-context-menu.ts
index 644e563cae..c6596060bd 100644
--- a/apps/survey/src/components/layouts/meal-list/use-context-menu.ts
+++ b/apps/survey/src/components/layouts/meal-list/use-context-menu.ts
@@ -11,7 +11,7 @@ export type UseContextMenuProps = {
   meal: MealState;
 };
 
-export function useContextMenu(props: UseContextMenuProps, { emit }: SetupContext) {
+export function useContextMenu(props: UseContextMenuProps, { emit }: SetupContext<'action'[]>) {
   const { foodName } = useFoodUtils(props);
   const { mealName } = useMealUtils(props);
 
diff --git a/apps/survey/src/components/layouts/meal-list/use-food-item.ts b/apps/survey/src/components/layouts/meal-list/use-food-item.ts
index fc87090a94..5eab3f282d 100644
--- a/apps/survey/src/components/layouts/meal-list/use-food-item.ts
+++ b/apps/survey/src/components/layouts/meal-list/use-food-item.ts
@@ -20,8 +20,8 @@ export type UseFoodItemProps = {
   meal: MealState;
 };
 
-export function useFoodItem(props: UseFoodItemProps, { emit }: SetupContext) {
-  const { i18n } = useI18n();
+export function useFoodItem(props: UseFoodItemProps, { emit }: SetupContext<'action'[]>) {
+  const { i18n: { t } } = useI18n();
   const { foodName } = useFoodUtils(props);
 
   const isPortionSizeComplete = computed(() => foodPortionSizeComplete(props.food));
@@ -30,18 +30,18 @@ export function useFoodItem(props: UseFoodItemProps, { emit }: SetupContext) {
     (
       [
         {
-          name: i18n.t('recall.menu.food.change').toString(),
+          name: t('recall.menu.food.change'),
           action: 'changeFood',
           icon: '$meal',
         },
         {
-          name: i18n.t(`recall.menu.food.${props.food.type}.edit`).toString(),
+          name: t(`recall.menu.food.${props.food.type}.edit`),
           action: 'editFood',
           icon: '$food',
           if: (food: FoodState) => foodComplete(food),
         },
         {
-          name: i18n.t('recall.menu.food.delete').toString(),
+          name: t('recall.menu.food.delete'),
           action: 'deleteFood',
           dialog: true,
           icon: '$delete',
diff --git a/apps/survey/src/components/layouts/meal-list/use-meal-item.ts b/apps/survey/src/components/layouts/meal-list/use-meal-item.ts
index d3581afb69..8adb274c25 100644
--- a/apps/survey/src/components/layouts/meal-list/use-meal-item.ts
+++ b/apps/survey/src/components/layouts/meal-list/use-meal-item.ts
@@ -15,8 +15,8 @@ export type UseMealItemProps = {
   selectedMealId?: string;
 };
 
-export function useMealItem(props: UseMealItemProps, { emit }: SetupContext) {
-  const { i18n, translate } = useI18n();
+export function useMealItem(props: UseMealItemProps, { emit }: SetupContext<'action'[]>) {
+  const { i18n: { t } } = useI18n();
   const { mealName, mealTime } = useMealUtils(props);
 
   const isSelected = computed(() => props.selectedMealId === props.meal.id);
@@ -25,19 +25,19 @@ export function useMealItem(props: UseMealItemProps, { emit }: SetupContext) {
     (
       [
         {
-          name: i18n.t('recall.menu.meal.editFoods').toString(),
+          name: t('recall.menu.meal.editFoods'),
           action: 'editMeal',
           icon: '$meal',
           if: (meal: MealState) => meal.flags.includes('free-entry-complete'),
         },
         {
-          name: i18n.t('recall.menu.meal.editTime').toString(),
+          name: t('recall.menu.meal.editTime'),
           action: 'mealTime',
           icon: '$mealTime',
           if: (meal: MealState) => !meal.flags.includes('meal-time:disabled'),
         },
         {
-          name: i18n.t('recall.menu.meal.delete').toString(),
+          name: t('recall.menu.meal.delete'),
           action: 'deleteMeal',
           dialog: true,
           icon: '$delete',
@@ -50,5 +50,5 @@ export function useMealItem(props: UseMealItemProps, { emit }: SetupContext) {
     emit('action', type, id);
   };
 
-  return { action, isSelected, translate, menu, mealName, mealTime };
+  return { action, isSelected, menu, mealName, mealTime };
 }
diff --git a/apps/survey/src/components/layouts/meal-list/use-meal-list.ts b/apps/survey/src/components/layouts/meal-list/use-meal-list.ts
index 8fcc57857b..23afa48548 100644
--- a/apps/survey/src/components/layouts/meal-list/use-meal-list.ts
+++ b/apps/survey/src/components/layouts/meal-list/use-meal-list.ts
@@ -1,7 +1,7 @@
 import type { SetupContext } from 'vue';
 import { computed } from 'vue';
 
-import type { FoodActionType, MealActionType } from '@intake24/common/prompts';
+import type { FoodActionType, GenericActionType, MealActionType } from '@intake24/common/prompts';
 import type { MealState } from '@intake24/common/types';
 import { useSurvey } from '@intake24/survey/stores';
 import { getFoodIndexRequired } from '@intake24/survey/util';
@@ -10,7 +10,7 @@ export type UseMealListProps = {
   meals: MealState[];
 };
 
-export function useMealList(props: UseMealListProps, { emit }: SetupContext) {
+export function useMealList(props: UseMealListProps, { emit }: SetupContext<'action'[]>) {
   const survey = useSurvey();
 
   const selectedMealId = computed(() => {
@@ -34,7 +34,7 @@ export function useMealList(props: UseMealListProps, { emit }: SetupContext) {
     return props.meals[foodIndex.mealIndex].id === mealId;
   };
 
-  const action = (type: FoodActionType | MealActionType, id?: string) => {
+  const action = (type: FoodActionType | MealActionType | GenericActionType, id?: string) => {
     emit('action', type, id);
   };
 
diff --git a/apps/survey/src/components/layouts/meal-list/use-review-list.ts b/apps/survey/src/components/layouts/meal-list/use-review-list.ts
index 5ef9435ed9..d839ca9545 100644
--- a/apps/survey/src/components/layouts/meal-list/use-review-list.ts
+++ b/apps/survey/src/components/layouts/meal-list/use-review-list.ts
@@ -7,11 +7,11 @@ export type UseReviewListProps = {
   review: ReviewOptions;
 };
 
-export function useReviewList(props: UseReviewListProps, ctx: SetupContext) {
+export function useReviewList(props: UseReviewListProps, ctx: SetupContext<('bottom-reached' | 'reviewed')[]>) {
   const bottomReached = ref(false);
   const reviewed = ref<string[]>([]);
 
-  const bottomIntersect = (entries: IntersectionObserverEntry[]) => {
+  const bottomIntersect = (isIntersecting: boolean, entries: IntersectionObserverEntry[]) => {
     if (!entries[0].isIntersecting)
       return;
 
diff --git a/apps/survey/src/components/layouts/navigation.vue b/apps/survey/src/components/layouts/navigation.vue
index 2189c1ccd7..506237be3b 100644
--- a/apps/survey/src/components/layouts/navigation.vue
+++ b/apps/survey/src/components/layouts/navigation.vue
@@ -1,20 +1,20 @@
 <template>
-  <v-bottom-navigation v-if="isMobile" app class="d-print-none" color="primary" fixed grow>
+  <v-bottom-navigation v-if="$vuetify.display.mobile" class="d-print-none" color="primary" grow>
     <v-btn :to="{ name: 'survey-home', params: { surveyId } }">
-      <span>{{ $t('common.home') }}</span>
       <v-icon>$home</v-icon>
+      <span>{{ $t('common.home') }}</span>
     </v-btn>
     <v-btn v-if="recall" :to="{ name: 'survey-recall', params: { surveyId } }">
-      <span>{{ $t('recall._') }}</span>
       <v-icon>$survey</v-icon>
+      <span>{{ $t('recall._') }}</span>
     </v-btn>
     <v-btn v-if="feedback" :to="{ name: 'feedback-home', params: { surveyId } }">
-      <span>{{ $t('feedback._') }}</span>
       <v-icon>$feedback</v-icon>
+      <span>{{ $t('feedback._') }}</span>
     </v-btn>
     <v-btn :to="{ name: 'survey-profile' }">
-      <span>{{ $t('profile._') }}</span>
       <v-icon>$profile</v-icon>
+      <span>{{ $t('profile._') }}</span>
     </v-btn>
   </v-bottom-navigation>
 </template>
diff --git a/apps/survey/src/components/prompts/actions/next-mobile.vue b/apps/survey/src/components/prompts/actions/next-mobile.vue
index 1e0063e223..0aa3eba530 100644
--- a/apps/survey/src/components/prompts/actions/next-mobile.vue
+++ b/apps/survey/src/components/prompts/actions/next-mobile.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn :color="color" :disabled="disabled" :title="label" v-on="$listeners">
+  <v-btn :color="color" :disabled="disabled" :title="currentLabel">
     <span class="text-overline font-weight-medium">
       <slot>
         {{ $t('recall.actions.next') }}
@@ -12,7 +12,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
+
+import { useI18n } from '@intake24/i18n';
 
 export default defineComponent({
   name: 'PromptActionNext',
@@ -32,11 +34,16 @@ export default defineComponent({
     },
     label: {
       type: String,
-      default() {
-        return this.$t('recall.actions.next');
-      },
     },
   },
+
+  setup(props) {
+    const { i18n: { t } } = useI18n();
+
+    const currentLabel = computed(() => props.label ?? t('recall.actions.next'));
+
+    return { currentLabel };
+  },
 });
 </script>
 
diff --git a/apps/survey/src/components/prompts/actions/next.vue b/apps/survey/src/components/prompts/actions/next.vue
index 3dad3fcdf2..9da2ffb56e 100644
--- a/apps/survey/src/components/prompts/actions/next.vue
+++ b/apps/survey/src/components/prompts/actions/next.vue
@@ -1,16 +1,18 @@
 <template>
-  <v-btn class="px-4" :color="color" :disabled="disabled" large :title="label" v-on="$listeners">
-    <v-icon v-if="icon" left>
+  <v-btn class="px-4" :color="color" :disabled="disabled" size="large" :title="currentLabel">
+    <v-icon v-if="icon" start>
       {{ icon }}
     </v-icon>
     <slot>
-      {{ label }}
+      {{ currentLabel }}
     </slot>
   </v-btn>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
+
+import { useI18n } from '@intake24/i18n';
 
 export default defineComponent({
   name: 'PromptActionNext',
@@ -30,11 +32,16 @@ export default defineComponent({
     },
     label: {
       type: String,
-      default() {
-        return this.$t('recall.actions.next');
-      },
     },
   },
+
+  setup(props) {
+    const { i18n: { t } } = useI18n();
+
+    const currentLabel = computed(() => props.label ?? t('recall.actions.next'));
+
+    return { currentLabel };
+  },
 });
 </script>
 
diff --git a/apps/survey/src/components/prompts/custom/checkbox-list-prompt.vue b/apps/survey/src/components/prompts/custom/checkbox-list-prompt.vue
index 5df1277071..e149507392 100644
--- a/apps/survey/src/components/prompts/custom/checkbox-list-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/checkbox-list-prompt.vue
@@ -9,31 +9,29 @@
         <v-label v-if="$t(`prompts.${type}.label`)">
           {{ $t(`prompts.${type}.label`) }}
         </v-label>
-        <!-- @vue-expect-error vuetify2 uses both model/value -->
-        <v-checkbox
+        <v-checkbox-btn
           v-for="option in localeOptions"
           :key="option.value"
           v-model="selected"
-          class="mt-2"
           :disabled="disableOption(option.value)"
           :error="hasErrors"
           hide-details="auto"
           :label="option.label"
           :value="option.value"
-          @change="update(option)"
+          @update:model-value="update(option)"
         />
-        <v-row v-if="prompt.other" align="center" class="mt-2" no-gutters>
-          <v-checkbox v-model="otherEnabled" class="my-auto" :disabled="disableOption(otherOutput)" hide-details />
+        <div v-if="prompt.other" class="d-flex flex-row align-center">
+          <v-checkbox-btn v-model="otherEnabled" class="flex-grow-0" :disabled="disableOption(otherOutput)" hide-details />
           <v-text-field
             v-model.trim="otherValue"
             :disabled="!otherEnabled || disableOption(otherOutput)"
             :error="hasErrors && otherEnabled"
             hide-details="auto"
             :label="$t(`prompts.${type}.other`)"
-            outlined
-            @input="update"
+            variant="outlined"
+            @update:model-value="update()"
           />
-        </v-row>
+        </div>
         <v-messages v-show="hasErrors" v-model="errors" class="mt-3" color="error" />
       </v-form>
     </v-card-text>
@@ -62,35 +60,35 @@ export default defineComponent({
   mixins: [createBasePrompt<'checkbox-list-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: Array as PropType<string[]>,
       default: () => [] as string[],
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
-    const { i18n } = useI18n();
+    const { i18n: { locale } } = useI18n();
 
     const otherEnabled = ref(false);
     const otherValue = ref('');
     const otherOutput = computed(() => otherValue.value.length ? `Other: ${otherValue.value}` : '');
 
-    const selected = ref(Array.isArray(props.value) ? props.value : []);
+    const selected = ref(Array.isArray(props.modelValue) ? props.modelValue : []);
     const state = computed(() => [...selected.value, otherOutput.value].filter(Boolean));
 
     const localeOptions = computed(
-      () => props.prompt.options[i18n.locale] ?? props.prompt.options.en,
+      () => props.prompt.options[locale.value] ?? props.prompt.options.en,
     );
-    const isExclusiveSelected = computed(() => !!localeOptions.value.find(option => option.exclusive && props.value.includes(option.value)));
-    const isMinSatisfied = computed(() => !props.prompt.validation.min || props.value.length >= props.prompt.validation.min);
-    const isMaxSatisfied = computed(() => !props.prompt.validation.max || props.value.length <= props.prompt.validation.max);
-    const isRequiredSatisfied = computed(() => !props.prompt.validation.required || !!props.value.length);
+    const isExclusiveSelected = computed(() => !!localeOptions.value.find(option => option.exclusive && props.modelValue.includes(option.value)));
+    const isMinSatisfied = computed(() => !props.prompt.validation.min || props.modelValue.length >= props.prompt.validation.min);
+    const isMaxSatisfied = computed(() => !props.prompt.validation.max || props.modelValue.length <= props.prompt.validation.max);
+    const isRequiredSatisfied = computed(() => !props.prompt.validation.required || !!props.modelValue.length);
     const isValid = computed(() => isRequiredSatisfied.value && (isExclusiveSelected.value || (isMinSatisfied.value && isMaxSatisfied.value)));
 
-    const disableOption = (value: string) => !props.value.includes(value)
-      && (isExclusiveSelected.value || (!!props.prompt.validation.max && props.value.length === props.prompt.validation.max));
+    const disableOption = (value: string) => !props.modelValue.includes(value)
+      && (isExclusiveSelected.value || (!!props.prompt.validation.max && props.modelValue.length === props.prompt.validation.max));
 
     const { action, clearErrors, customPromptLayout, errors, hasErrors, type } = usePromptUtils(
       props,
@@ -105,7 +103,7 @@ export default defineComponent({
 
       clearErrors();
 
-      ctx.emit('input', [...state.value]);
+      ctx.emit('update:modelValue', [...state.value]);
     };
 
     watch(otherEnabled, (val) => {
diff --git a/apps/survey/src/components/prompts/custom/date-picker-prompt.vue b/apps/survey/src/components/prompts/custom/date-picker-prompt.vue
index 7a0936fde7..303e7f1593 100644
--- a/apps/survey/src/components/prompts/custom/date-picker-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/date-picker-prompt.vue
@@ -8,8 +8,9 @@
       <v-date-picker
         v-model="state"
         full-width
-        :landscape="!isMobile"
+        :landscape="!$vuetify.display.mobile"
         v-bind="datePickerProps"
+        title=""
       />
     </v-card-text>
     <template #actions>
@@ -36,13 +37,13 @@ export default defineComponent({
   mixins: [createBasePrompt<'date-picker-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: String as PropType<string | null>,
       default: null,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { action, customPromptLayout } = usePromptUtils(props, ctx);
diff --git a/apps/survey/src/components/prompts/custom/info-prompt.vue b/apps/survey/src/components/prompts/custom/info-prompt.vue
index d6eb8e5570..116d7ce6c5 100644
--- a/apps/survey/src/components/prompts/custom/info-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/info-prompt.vue
@@ -26,13 +26,13 @@ export default defineComponent({
   mixins: [createBasePrompt<'info-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: 'next',
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { action, customPromptLayout } = usePromptUtils(props, ctx);
@@ -40,10 +40,10 @@ export default defineComponent({
     const isValid = true;
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
       },
     });
 
diff --git a/apps/survey/src/components/prompts/custom/no-more-information-prompt.vue b/apps/survey/src/components/prompts/custom/no-more-information-prompt.vue
index 172b7ca49a..641948b8ad 100644
--- a/apps/survey/src/components/prompts/custom/no-more-information-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/no-more-information-prompt.vue
@@ -7,40 +7,39 @@
     <template #actions>
       <template v-if="isFood">
         <confirm-dialog
-          :label="$t('recall.menu.food.delete').toString()"
+          :label="$t('recall.menu.food.delete')"
           @confirm="action('deleteFood', food?.id)"
         >
-          <template #activator="{ on, attrs }">
+          <template #activator="{ props }">
             <v-btn
               class="px-4"
               color="primary"
-              large
-              text
+              size="large"
               :title="$t('recall.actions.deleteFood')"
-              v-bind="attrs"
-              v-on="on"
+              variant="text"
+              v-bind="props"
             >
-              <v-icon left>
+              <v-icon start>
                 $delete
               </v-icon>
               {{ $t('recall.actions.deleteFood') }}
             </v-btn>
           </template>
-          <i18n path="recall.menu.food.deleteConfirm">
+          <i18n-t keypath="recall.menu.food.deleteConfirm">
             <template #item>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
         </confirm-dialog>
         <v-btn
           class="px-4"
           color="primary"
-          large
-          text
+          size="large"
           :title="$t('recall.actions.editFood')"
+          variant="text"
           @click.stop="action('editFood', food?.id)"
         >
-          <v-icon left>
+          <v-icon start>
             $edit
           </v-icon>
           {{ $t('recall.actions.editFood') }}
@@ -48,40 +47,39 @@
       </template>
       <template v-if="isMeal">
         <confirm-dialog
-          :label="$t('recall.menu.meal.delete').toString()"
+          :label="$t('recall.menu.meal.delete')"
           @confirm="action('deleteMeal', meal?.id)"
         >
-          <template #activator="{ on, attrs }">
+          <template #activator="{ props }">
             <v-btn
               class="px-4"
               color="primary"
-              large
-              text
+              size="large"
               :title="$t('recall.actions.deleteMeal')"
-              v-bind="attrs"
-              v-on="on"
+              variant="text"
+              v-bind="props"
             >
-              <v-icon left>
+              <v-icon start>
                 $delete
               </v-icon>
               {{ $t('recall.actions.deleteMeal') }}
             </v-btn>
           </template>
-          <i18n path="recall.menu.meal.deleteConfirm">
+          <i18n-t keypath="recall.menu.meal.deleteConfirm">
             <template #item>
               <span class="font-weight-medium">{{ mealName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
         </confirm-dialog>
         <v-btn
           class="px-4"
           color="primary"
-          large
-          text
+          size="large"
           :title="$t('recall.actions.editMeal')"
+          variant="text"
           @click.stop="action('editMeal', meal?.id)"
         >
-          <v-icon left>
+          <v-icon start>
             $add
           </v-icon>
           {{ $t('recall.actions.editMeal') }}
@@ -92,11 +90,11 @@
     <template #nav-actions>
       <template v-if="isFood">
         <confirm-dialog
-          :label="$t('recall.menu.food.delete').toString()"
+          :label="$t('recall.menu.food.delete')"
           @confirm="action('deleteFood', food?.id)"
         >
-          <template #activator="{ on, attrs }">
-            <v-btn color="primary" text v-bind="attrs" v-on="on">
+          <template #activator="{ props }">
+            <v-btn color="primary" variant="text" v-bind="props">
               <span class="text-overline font-weight-medium">
                 {{ $t('recall.actions.nav.deleteFood') }}
               </span>
@@ -105,14 +103,14 @@
               </v-icon>
             </v-btn>
           </template>
-          <i18n path="recall.menu.food.deleteConfirm">
+          <i18n-t keypath="recall.menu.food.deleteConfirm">
             <template #item>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
         </confirm-dialog>
         <v-divider vertical />
-        <v-btn color="primary" text @click.stop="action('editFood', food?.id)">
+        <v-btn color="primary" variant="text" @click.stop="action('editFood', food?.id)">
           <span class="text-overline font-weight-medium">
             {{ $t('recall.actions.nav.editFood') }}
           </span>
@@ -124,11 +122,11 @@
       </template>
       <template v-if="isMeal">
         <confirm-dialog
-          :label="$t('recall.menu.meal.delete').toString()"
+          :label="$t('recall.menu.meal.delete')"
           @confirm="action('deleteMeal', meal?.id)"
         >
-          <template #activator="{ on, attrs }">
-            <v-btn color="primary" text v-bind="attrs" v-on="on">
+          <template #activator="{ props }">
+            <v-btn color="primary" variant="text" v-bind="props">
               <span class="text-overline font-weight-medium">
                 {{ $t('recall.actions.nav.deleteMeal') }}
               </span>
@@ -137,14 +135,14 @@
               </v-icon>
             </v-btn>
           </template>
-          <i18n path="recall.menu.meal.deleteConfirm">
+          <i18n-t keypath="recall.menu.meal.deleteConfirm">
             <template #item>
               <span class="font-weight-medium">{{ mealName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
         </confirm-dialog>
         <v-divider vertical />
-        <v-btn color="primary" text @click.stop="action('editMeal', meal?.id)">
+        <v-btn color="primary" variant="text" @click.stop="action('editMeal', meal?.id)">
           <span class="text-overline font-weight-medium">
             {{ $t('recall.actions.nav.editMeal') }}
           </span>
@@ -175,13 +173,13 @@ export default defineComponent({
   mixins: [createBasePrompt<'no-more-information-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: 'next',
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { action, customPromptLayout, foodName, isFood, isMeal, mealName } = usePromptUtils(
@@ -192,10 +190,10 @@ export default defineComponent({
     const isValid = true;
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
       },
     });
 
diff --git a/apps/survey/src/components/prompts/custom/radio-list-prompt.vue b/apps/survey/src/components/prompts/custom/radio-list-prompt.vue
index f9ba29a196..9241f25ae0 100644
--- a/apps/survey/src/components/prompts/custom/radio-list-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/radio-list-prompt.vue
@@ -8,12 +8,11 @@
       <v-form @submit.prevent="action('next')">
         <v-radio-group
           v-model="selected"
-          :column="prompt.orientation === 'column'"
           :error="hasErrors"
           hide-details="auto"
+          :inline="prompt.orientation === 'row'"
           :label="$t(`prompts.${type}.label`)"
-          :row="prompt.orientation === 'row'"
-          @change="update"
+          @update:model-value="update"
         >
           <v-radio
             v-for="option in localeOptions"
@@ -21,18 +20,18 @@
             :label="option.label"
             :value="option.value"
           />
-          <v-row v-if="prompt.other" align="center" no-gutters>
-            <v-radio class="my-auto" hide-details value="other" />
+          <div v-if="prompt.other" class="d-flex flex-row align-center">
+            <v-radio class="flex-grow-0" hide-details value="other" />
             <v-text-field
               v-model.trim="otherValue"
               :error="hasErrors"
               hide-details="auto"
               :label="$t(`prompts.${type}.other`)"
-              outlined
+              variant="outlined"
               @focus="selected = 'other'"
-              @input="update"
+              @update:model-value="update"
             />
-          </v-row>
+          </div>
         </v-radio-group>
         <v-messages v-show="hasErrors" v-model="errors" class="mt-3" color="error" />
       </v-form>
@@ -60,18 +59,18 @@ export default defineComponent({
   mixins: [createBasePrompt<'radio-list-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: String,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
-    const { i18n } = useI18n();
+    const { i18n: { locale, t } } = useI18n();
 
     const otherValue = ref('');
-    const selected = ref(props.value);
+    const selected = ref(props.modelValue);
 
     const state = computed(() =>
       selected.value === 'other' ? `Other: ${otherValue.value}` : selected.value,
@@ -82,14 +81,14 @@ export default defineComponent({
         || (!!state.value && (selected.value !== 'other' || !!otherValue.value)),
     );
     const localeOptions = computed(
-      () => props.prompt.options[i18n.locale] ?? props.prompt.options.en,
+      () => props.prompt.options[locale.value] ?? props.prompt.options.en,
     );
 
     const confirm = () => {
       if (isValid.value)
         return true;
 
-      errors.value = [i18n.t(`prompts.${type.value}.validation.required`).toString()];
+      errors.value = [t(`prompts.${type.value}.validation.required`)];
       return false;
     };
 
@@ -102,7 +101,7 @@ export default defineComponent({
     const update = () => {
       clearErrors();
 
-      ctx.emit('input', state.value);
+      ctx.emit('update:modelValue', state.value);
     };
 
     return {
diff --git a/apps/survey/src/components/prompts/custom/select-prompt.vue b/apps/survey/src/components/prompts/custom/select-prompt.vue
index 55d8a559ec..9b115efb6c 100644
--- a/apps/survey/src/components/prompts/custom/select-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/select-prompt.vue
@@ -11,12 +11,12 @@
             <v-select
               v-model="state"
               hide-details="auto"
-              item-text="label"
+              item-title="label"
               item-value="value"
               :items="localeOptions"
               :label="promptI18n.label"
               :multiple="prompt.multiple"
-              outlined
+              variant="outlined"
             />
           </v-col>
         </v-row>
@@ -46,28 +46,28 @@ export default defineComponent({
   mixins: [createBasePrompt<'select-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: [String, Number, Array] as PropType<string | number | string[] | number[]>,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
-    const { i18n, translate } = useI18n();
+    const { i18n: { locale, t } } = useI18n();
     const { action, customPromptLayout, type } = usePromptUtils(props, ctx);
 
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
       },
     });
 
     const promptI18n = computed(() => ({
-      label: i18n.t(`prompts.${type.value}.label`),
+      label: t(`prompts.${type.value}.label`),
     }));
 
     const isValid = computed(() => {
@@ -80,10 +80,10 @@ export default defineComponent({
       return typeof state.value !== 'undefined' && state.value !== null;
     });
     const localeOptions = computed(
-      () => props.prompt.options[i18n.locale] ?? props.prompt.options.en,
+      () => props.prompt.options[locale.value] ?? props.prompt.options.en,
     );
 
-    return { action, customPromptLayout, isValid, localeOptions, promptI18n, state, translate };
+    return { action, customPromptLayout, isValid, localeOptions, promptI18n, state };
   },
 });
 </script>
diff --git a/apps/survey/src/components/prompts/custom/slider-prompt.vue b/apps/survey/src/components/prompts/custom/slider-prompt.vue
index 4a726862a4..b45decbe65 100644
--- a/apps/survey/src/components/prompts/custom/slider-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/slider-prompt.vue
@@ -9,19 +9,20 @@
         <v-slider
           class="quantity-slider__slider px-8"
           color="secondary"
-          :max="prompt.slider.max.value"
-          :min="prompt.slider.min.value"
+          :max="prompt.slider.max.value ?? undefined"
+          :min="prompt.slider.min.value ?? undefined"
+          :model-value="state"
           :step="prompt.slider.step"
-          :style="{ 'padding-top': `${prompt.slider.current.size + 10}px` }"
           :thumb-label="prompt.slider.current ? `always` : false"
-          :thumb-size="prompt.slider.current.size"
-          :value="state"
-          @change="state = $event"
+          :thumb-size="25"
+          track-color="primary"
+          track-size="12"
           @start="initialize"
+          @update:model-value="state = $event"
         >
-          <template #thumb-label="{ value }">
-            <div v-if="isInitialized" class="d-flex flex-column align-center">
-              <span class="text-h5 font-weight-bold">{{ value }}</span>
+          <template #thumb-label="{ modelValue: thumbValue }">
+            <div v-if="isInitialized" class="d-flex flex-column align-center pa-2">
+              <span class="text-h5 font-weight-bold">{{ thumbValue }}</span>
               <span v-if="prompt.slider.current.label" class="text-h6 font-weight-bold">
                 {{ translate(prompt.slider.current.label) }}
               </span>
@@ -73,12 +74,12 @@ export default defineComponent({
   mixins: [createBasePrompt<'slider-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: Number as PropType<number>,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { translate } = useI18n();
@@ -90,10 +91,10 @@ export default defineComponent({
      */
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', typeof value === 'undefined' || value === null ? undefined : value);
+        ctx.emit('update:modelValue', typeof value === 'undefined' || value === null ? undefined : value);
       },
     });
 
@@ -108,10 +109,10 @@ export default defineComponent({
       state.value = value;
     };
 
-    const isValid = computed(() => typeof props.value !== 'undefined');
+    const isValid = computed(() => typeof props.modelValue !== 'undefined');
 
     onMounted(() => {
-      if (typeof props.value === 'undefined')
+      if (typeof props.modelValue === 'undefined')
         state.value = props.prompt.slider.current.value ?? undefined;
     });
 
diff --git a/apps/survey/src/components/prompts/custom/textarea-prompt.vue b/apps/survey/src/components/prompts/custom/textarea-prompt.vue
index f05845bc23..1d75545aa1 100644
--- a/apps/survey/src/components/prompts/custom/textarea-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/textarea-prompt.vue
@@ -11,8 +11,8 @@
           hide-details="auto"
           :hint="translate(prompt.i18n.hint)"
           :label="translate(prompt.i18n.label)"
-          outlined
           :rules="rules"
+          variant="outlined"
         />
       </v-form>
     </v-card-text>
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import type { VForm } from 'vuetify/lib';
+import type { VForm } from 'vuetify/components';
 import { computed, defineComponent, ref } from 'vue';
 
 import { useI18n } from '@intake24/i18n';
@@ -40,29 +40,28 @@ export default defineComponent({
   mixins: [createBasePrompt<'textarea-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: String,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
-    const { i18n, translate } = useI18n();
+    const { i18n: { t }, translate } = useI18n();
 
     const form = ref<InstanceType<typeof VForm>>();
-    const isValid = computed(() => !props.prompt.validation.required || !!props.value);
+    const isValid = computed(() => !props.prompt.validation.required || !!props.modelValue);
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
       },
     });
 
     const confirm = () => {
-      // @ts-expect-error - not typed vuetify component
       const isValid = form.value?.validate();
       return isValid;
     };
@@ -75,7 +74,7 @@ export default defineComponent({
             (v: string | null) =>
               !!v
               || (translate(props.prompt.validation.message)
-              ?? i18n.t(`prompts.${type.value}.validation.required`)),
+                ?? t(`prompts.${type.value}.validation.required`)),
           ]
         : [],
     );
diff --git a/apps/survey/src/components/prompts/custom/time-picker-prompt.vue b/apps/survey/src/components/prompts/custom/time-picker-prompt.vue
index d10f98371b..d3ef9681ed 100644
--- a/apps/survey/src/components/prompts/custom/time-picker-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/time-picker-prompt.vue
@@ -10,7 +10,8 @@
           v-model="state"
           :format="prompt.format"
           full-width
-          :landscape="$vuetify.breakpoint.smAndUp"
+          :landscape="$vuetify.display.smAndUp"
+          title=""
         />
         <v-messages v-show="hasErrors" v-model="errors" class="mt-3" color="error" />
       </v-form>
@@ -39,24 +40,24 @@ export default defineComponent({
   mixins: [createBasePrompt<'time-picker-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: String as PropType<string | null>,
       default: null,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
-    const { i18n } = useI18n();
+    const { i18n: { t } } = useI18n();
 
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
         clearErrors();
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
       },
     });
 
@@ -66,7 +67,7 @@ export default defineComponent({
       if (isValid.value)
         return true;
 
-      errors.value = [i18n.t(`prompts.${type}.validation.required`).toString()];
+      errors.value = [t(`prompts.${type}.validation.required`)];
       return false;
     };
 
diff --git a/apps/survey/src/components/prompts/custom/yes-no-prompt.vue b/apps/survey/src/components/prompts/custom/yes-no-prompt.vue
index d0cb9b30bd..4301d9931d 100644
--- a/apps/survey/src/components/prompts/custom/yes-no-prompt.vue
+++ b/apps/survey/src/components/prompts/custom/yes-no-prompt.vue
@@ -8,7 +8,7 @@
       <yes-no-toggle v-model="state" />
     </template>
     <template #nav-actions>
-      <v-btn color="primary" text :title="$t('common.action.no')" @click.stop="state = false">
+      <v-btn color="primary" :title="$t('common.action.no')" variant="text" @click.stop="state = false">
         <span class="text-overline font-weight-medium">
           {{ $t('common.action.no') }}
         </span>
@@ -17,7 +17,7 @@
         </v-icon>
       </v-btn>
       <v-divider vertical />
-      <v-btn color="primary" text :title="$t('common.action.yes')" @click.stop="state = true">
+      <v-btn color="primary" :title="$t('common.action.yes')" variant="text" @click.stop="state = true">
         <span class="text-overline font-weight-medium">
           {{ $t('common.action.yes') }}
         </span>
@@ -45,24 +45,24 @@ export default defineComponent({
   mixins: [createBasePrompt<'yes-no-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
       default: undefined,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { action, customPromptLayout } = usePromptUtils(props, ctx);
 
-    const isValid = computed(() => props.value !== undefined);
+    const isValid = computed(() => props.modelValue !== undefined);
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
 
         if (typeof value === 'boolean')
           action('next');
diff --git a/apps/survey/src/components/prompts/layouts/base-layout.vue b/apps/survey/src/components/prompts/layouts/base-layout.vue
index 1dcdfa3188..96c5b2a708 100644
--- a/apps/survey/src/components/prompts/layouts/base-layout.vue
+++ b/apps/survey/src/components/prompts/layouts/base-layout.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="mb-4" :tile="isMobile">
+    <v-card class="mb-4" :tile="$vuetify.display.mobile">
       <breadcrumbs v-bind="{ food, meal, promptName: i18n.name }" />
       <slot name="prompt-text">
         <v-card-text v-if="i18n.text" class="pt-0">
@@ -10,13 +10,13 @@
       </slot>
     </v-card>
     <slot name="prompt-description">
-      <v-card v-if="!isInMultiPrompt && i18n.description" class="mb-4" :tile="isMobile">
+      <v-card v-if="!isInMultiPrompt && i18n.description" class="mb-4" :tile="$vuetify.display.mobile">
         <div class="pa-4" v-html="i18n.description" />
       </v-card>
     </slot>
     <slot />
-    <div
-      v-if="!isMobile || prompt.actions?.both"
+    <v-card-actions
+      v-if="!$vuetify.display.mobile || prompt.actions?.both"
       id="actions"
       class="pa-5 px-md-0 d-flex flex-column-reverse flex-md-row align-stretch ga-3"
     >
@@ -25,12 +25,11 @@
           v-for="item in desktopActions"
           :key="item.type"
           class="px-4"
-          :color="item.color"
+          :color="item.color ?? undefined"
           :disabled="item.type === 'next' && !isValid"
-          large
-          :outlined="item.variant === 'outlined'"
-          :text="item.variant === 'text'"
+          size="large"
           :title="Object.keys(item.label).length ? translate(item.label) : translate(item.text)"
+          :variant="item.variant"
           @click="action(item.type, foodOrMealId, item.params)"
         >
           {{ translate(item.text) }}
@@ -39,21 +38,20 @@
       <template v-else>
         <slot name="actions" />
       </template>
-    </div>
-    <div v-if="isMobile" id="actions" class="bottom-navigation">
+    </v-card-actions>
+    <div v-if="$vuetify.display.mobile" id="actions" class="bottom-navigation">
       <div v-if="showSummary" class="bottom-navigation__summary">
         <meal-list-mobile v-if="showSummary" v-bind="{ meals }" @action="action" />
       </div>
       <div v-if="mobileActions.length || hasNavActionsSlot" class="bottom-navigation__actions">
         <template v-if="mobileActions.length">
-          <template v-for="(item, idx) in mobileActions">
+          <template v-for="(item, idx) in mobileActions" :key="item.type">
             <v-btn
-              :key="item.type"
-              :color="item.color"
+              :color="item.color ?? undefined"
               :disabled="item.type === 'next' && !isValid"
-              :text="['outlined', 'text'].includes(item.variant)"
               :title="Object.keys(item.label).length ? translate(item.label) : translate(item.text)"
               :value="item.type"
+              :variant="item.variant"
               @click="action(item.type, foodOrMealId, item.params)"
             >
               <span class="text-overline font-weight-medium">
@@ -78,20 +76,57 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { type PropType, useSlots } from 'vue';
 
+import type { Prompt } from '@intake24/common/prompts';
+import type { PromptSection } from '@intake24/common/surveys';
+import type { FoodState, MealState } from '@intake24/common/types';
 import { MealListMobile } from '@intake24/survey/components/layouts/meal-list';
 
-import layoutMixin from './layout-mixin';
+import Breadcrumbs from './breadcrumbs.vue';
+import { useLayout } from './use-layout';
+
+defineOptions({ name: 'BaseLayout' });
 
-export default defineComponent({
-  name: 'BaseLayout',
+const props = defineProps(
+  {
+    prompt: {
+      type: Object as PropType<Prompt>,
+      required: true,
+    },
+    section: {
+      type: String as PropType<PromptSection>,
+      required: true,
+    },
+    food: {
+      type: Object as PropType<FoodState>,
+    },
+    meal: {
+      type: Object as PropType<MealState>,
+    },
+    isValid: {
+      type: Boolean,
+      default: false,
+    },
+  },
+);
 
-  components: { MealListMobile },
+const emit = defineEmits(['action']);
+const slots = useSlots();
 
-  mixins: [layoutMixin],
-});
+const {
+  action,
+  desktopActions,
+  foodOrMealId,
+  hasNavActionsSlot,
+  i18n,
+  isInMultiPrompt,
+  meals,
+  mobileActions,
+  showSummary,
+  translate,
+} = useLayout(props, { emit, slots });
 </script>
 
 <style lang="scss"></style>
diff --git a/apps/survey/src/components/prompts/layouts/breadcrumbs.vue b/apps/survey/src/components/prompts/layouts/breadcrumbs.vue
index 733d7a04c3..f8df8260d3 100644
--- a/apps/survey/src/components/prompts/layouts/breadcrumbs.vue
+++ b/apps/survey/src/components/prompts/layouts/breadcrumbs.vue
@@ -1,21 +1,19 @@
 <template>
-  <v-toolbar :dense="isMobile" flat>
-    <v-breadcrumbs class="pl-0" :items="items">
+  <v-toolbar class="px-4" color="white" :dense="$vuetify.display.mobile" flat>
+    <v-breadcrumbs class="ps-0 text-body-2" :items="items">
       <template #divider>
         <v-icon>{{ forwardIcon }}</v-icon>
       </template>
     </v-breadcrumbs>
     <v-spacer />
     <request-help :survey-id="$route.params.surveyId">
-      <template v-if="isMobile" #activator="{ attrs, on }">
+      <template v-if="$vuetify.display.mobile" #activator="{ props }">
         <v-btn
-          v-bind="attrs"
+          v-bind="props"
           color="grey"
-          dark
           icon
-          small
+          size="small"
           :title="$t('common.help.title')"
-          v-on="on"
         >
           <v-icon>$info</v-icon>
         </v-btn>
@@ -29,12 +27,12 @@ import type { PropType } from 'vue';
 import { defineComponent, ref } from 'vue';
 
 import type { FoodState, MealState } from '@intake24/common/types';
-import { useI18n } from '@intake24/i18n';
-import { RequestHelp } from '@intake24/survey/components';
 import { useFoodUtils, useMealUtils } from '@intake24/survey/composables';
 
+import { RequestHelp } from '../../elements';
+
 export type BreadcrumbsElement = {
-  text: string;
+  title: string;
   disabled: boolean;
 };
 
@@ -57,13 +55,12 @@ export default defineComponent({
   },
 
   setup() {
-    const { translate } = useI18n();
     const { getFoodName } = useFoodUtils();
     const { getMealName, getMealNameWithTime } = useMealUtils();
 
     const forwardIcon = ref('fas fa-caret-right');
 
-    return { forwardIcon, getFoodName, translate, getMealName, getMealNameWithTime };
+    return { forwardIcon, getFoodName, getMealName, getMealNameWithTime };
   },
 
   computed: {
@@ -72,20 +69,20 @@ export default defineComponent({
     },
 
     getFoodElement() {
-      return this.food ? { text: this.getFoodName(this.food), disabled: false } : undefined;
+      return this.food ? { title: this.getFoodName(this.food), disabled: false } : undefined;
     },
 
     getMealElement() {
-      return this.meal ? { text: this.getMealLabel(this.meal), disabled: false } : undefined;
+      return this.meal ? { title: this.getMealLabel(this.meal), disabled: false } : undefined;
     },
 
     getBreadCrumbs(): BreadcrumbsElement[] {
       const elements: BreadcrumbsElement[] = [];
 
-      const promptElement = { text: this.promptName, disabled: false };
+      const promptElement = { title: this.promptName, disabled: false };
 
       elements.push(
-        this.getMealElement ?? { text: this.$t('recall._').toString(), disabled: false },
+        this.getMealElement ?? { title: this.$t('recall._'), disabled: false },
       );
       if (this.getFoodElement)
         elements.push(this.getFoodElement);
diff --git a/apps/survey/src/components/prompts/layouts/card-layout.vue b/apps/survey/src/components/prompts/layouts/card-layout.vue
index 463266ee36..08d91dbb33 100644
--- a/apps/survey/src/components/prompts/layouts/card-layout.vue
+++ b/apps/survey/src/components/prompts/layouts/card-layout.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="mb-4" :tile="isMobile">
+    <v-card class="mb-4" :tile="$vuetify.display.mobile">
       <breadcrumbs v-bind="{ food, meal, promptName: i18n.name }" />
       <slot name="prompt-text">
         <v-card-text v-if="i18n.text" class="pt-0">
@@ -9,7 +9,7 @@
         </v-card-text>
       </slot>
     </v-card>
-    <v-card :tile="isMobile">
+    <v-card :tile="$vuetify.display.mobile">
       <slot name="prompt-description">
         <div
           v-if="i18n.description"
@@ -20,7 +20,7 @@
       </slot>
       <slot />
       <v-card-actions
-        v-if="!isMobile || prompt.actions?.both"
+        v-if="!$vuetify.display.mobile || prompt.actions?.both"
         id="actions"
         class="px-4 pt-0 pb-4 d-flex flex-column-reverse flex-md-row align-stretch ga-3"
       >
@@ -29,15 +29,14 @@
             v-for="item in desktopActions"
             :key="item.type"
             class="px-4"
-            :color="item.color"
+            :color="item.color ?? undefined"
             :disabled="item.type === 'next' && !isValid"
-            large
-            :outlined="item.variant === 'outlined'"
-            :text="item.variant === 'text'"
+            size="large"
             :title="Object.keys(item.label).length ? translate(item.label) : translate(item.text)"
+            :variant="item.variant"
             @click="action(item.type, foodOrMealId, item.params)"
           >
-            <v-icon v-if="item.icon" left>
+            <v-icon v-if="item.icon" start>
               {{ item.icon }}
             </v-icon>
             {{ translate(item.text) }}
@@ -47,22 +46,21 @@
           <slot name="actions" />
         </template>
       </v-card-actions>
-      <div v-if="!isInMultiPrompt && isMobile" id="actions" class="bottom-navigation">
+      <div v-if="!isInMultiPrompt && $vuetify.display.mobile" id="actions" class="bottom-navigation">
         <div v-if="showSummary" class="bottom-navigation__summary">
           <meal-list-mobile v-bind="{ meals }" @action="action" />
         </div>
         <div v-if="mobileActions.length || hasNavActionsSlot" class="bottom-navigation__actions">
           <template v-if="mobileActions.length">
-            <template v-for="(item, idx) in mobileActions">
+            <template v-for="(item, idx) in mobileActions" :key="item.type">
               <v-btn
-                :key="item.type"
-                :color="item.color"
+                :color="item.color ?? undefined"
                 :disabled="item.type === 'next' && !isValid"
-                :text="['outlined', 'text'].includes(item.variant)"
                 :title="
                   Object.keys(item.label).length ? translate(item.label) : translate(item.text)
                 "
                 :value="item.type"
+                :variant="['outlined', 'text'].includes(item.variant) ? 'text' : undefined"
                 @click="action(item.type, foodOrMealId, item.params)"
               >
                 <span class="text-overline font-weight-medium">
@@ -88,20 +86,58 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { type PropType, useSlots } from 'vue';
 
+import type { Prompt } from '@intake24/common/prompts';
+import type { PromptSection } from '@intake24/common/surveys';
+import type { FoodState, MealState } from '@intake24/common/types';
 import { MealListMobile } from '@intake24/survey/components/layouts/meal-list';
 
-import layoutMixin from './layout-mixin';
+import Breadcrumbs from './breadcrumbs.vue';
+import { useLayout } from './use-layout';
 
-export default defineComponent({
-  name: 'CardLayout',
+defineOptions({ name: 'CardLayout' });
 
-  components: { MealListMobile },
+const props = defineProps(
+  {
+    prompt: {
+      type: Object as PropType<Prompt>,
+      required: true,
+    },
+    section: {
+      type: String as PropType<PromptSection>,
+      required: true,
+    },
+    food: {
+      type: Object as PropType<FoodState>,
+    },
+    meal: {
+      type: Object as PropType<MealState>,
+    },
+    isValid: {
+      type: Boolean,
+      default: false,
+    },
+  },
+);
 
-  mixins: [layoutMixin],
-});
+const emit = defineEmits(['action']);
+const slots = useSlots();
+
+const {
+  action,
+  desktopActions,
+  foodOrMealId,
+  hasDefaultSlot,
+  hasNavActionsSlot,
+  i18n,
+  isInMultiPrompt,
+  meals,
+  mobileActions,
+  showSummary,
+  translate,
+} = useLayout(props, { emit, slots });
 </script>
 
 <style lang="scss"></style>
diff --git a/apps/survey/src/components/prompts/layouts/layout-mixin.ts b/apps/survey/src/components/prompts/layouts/layout-mixin.ts
deleted file mode 100644
index 452bf10cb2..0000000000
--- a/apps/survey/src/components/prompts/layouts/layout-mixin.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import type { PropType } from 'vue';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import { computed, defineComponent, onBeforeMount } from 'vue';
-
-import type { ActionItem, Prompt } from '@intake24/common/prompts';
-import type { PromptSection } from '@intake24/common/surveys';
-import type { FoodState, MealState } from '@intake24/common/types';
-import { useI18n } from '@intake24/i18n';
-import { useFoodUtils, useMealUtils, usePromptUtils } from '@intake24/survey/composables';
-import { useSurvey } from '@intake24/survey/stores';
-
-import { Next } from '../actions';
-import Breadcrumbs from './breadcrumbs.vue';
-
-export default defineComponent({
-  name: 'LayoutMixin',
-
-  components: { Next, Breadcrumbs },
-
-  props: {
-    prompt: {
-      type: Object as PropType<Prompt>,
-      required: true,
-    },
-    section: {
-      type: String as PropType<PromptSection>,
-      required: true,
-    },
-    food: {
-      type: Object as PropType<FoodState>,
-    },
-    meal: {
-      type: Object as PropType<MealState>,
-    },
-    isValid: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['action'],
-
-  setup(props, ctx) {
-    const { defaultMessages, i18n, translate, translatePath } = useI18n();
-    const { action, isInMultiPrompt, params, type } = usePromptUtils(props, ctx);
-    const { foodName } = useFoodUtils(props);
-    const { mealName, mealTime, mealNameWithTime } = useMealUtils(props);
-    const survey = useSurvey();
-
-    const meals = computed(() => survey.data.meals);
-    const showSummary = computed(() => {
-      if (props.prompt.component === 'submit-prompt' && props.prompt.review.mobile !== false)
-        return false;
-
-      if (survey.hasFinished)
-        return false;
-
-      return !['preMeals'].includes(props.section);
-    });
-
-    const loadPromptTranslations = () => {
-      const locale = i18n.locale;
-      const messages = i18n.getLocaleMessage(locale);
-
-      const defaultPromptMessages = get(
-        defaultMessages.getMessages(locale),
-        `prompts.${type.value}`,
-      );
-
-      if (defaultPromptMessages === undefined) {
-        console.error(`Failed to load default translation messages using key "prompts.${type.value}", locale "${locale}". Please update the translation files!`);
-      }
-      else {
-        Object.entries(defaultPromptMessages).forEach(([key, value]) => {
-          set(messages, `prompts.${type.value}.${key}`, props.prompt.i18n[key]?.[locale] ?? value);
-        });
-      }
-
-      i18n.setLocaleMessage(locale, messages);
-    };
-
-    onBeforeMount(() => {
-      loadPromptTranslations();
-    });
-
-    return {
-      action,
-      foodName,
-      translate,
-      translatePath,
-      isInMultiPrompt,
-      mealName,
-      mealTime,
-      mealNameWithTime,
-      params,
-      showSummary,
-      type,
-      meals,
-    };
-  },
-
-  computed: {
-    foodOrMealId() {
-      return this.food?.id ?? this.meal?.id;
-    },
-
-    desktopActions(): ActionItem[] {
-      return this.prompt.actions?.items.filter(action => action.layout.includes('desktop')) ?? [];
-    },
-
-    hasDefaultSlot(): boolean {
-      return !!this.$slots.default;
-    },
-
-    hasActionsSlot(): boolean {
-      return !!this.$slots.actions;
-    },
-
-    hasNavActionsSlot(): boolean {
-      return !!this.$slots['nav-actions'];
-    },
-
-    mobileActions(): ActionItem[] {
-      return this.prompt.actions?.items.filter(action => action.layout.includes('mobile')) ?? [];
-    },
-
-    i18n() {
-      /*
-       * Workaround for multi-prompt i18n
-       * - at the moment scheme prompt i18n is merged into the vue-i18n instance messages, so it can be used directly
-       * - this approach allows use of vue-i18n component to interpolate the i18n strings
-       * - however multi-prompt is displaying multiple prompts at once, so same prompt types override each other
-       * - TODO: implement own vue-i18n component and merge the i18n outside of the vue-i18n instance?
-       */
-      return {
-        /* name: this.$t(`prompts.${this.type}.name`, this.params),
-        text: this.$t(`prompts.${this.type}.text`, this.params),
-        description: this.translatePath(`prompts.${this.type}.description`, this.params, true), */
-        name: this.translate(this.prompt.i18n.name, {
-          params: this.params,
-          path: `prompts.${this.type}.name`,
-        }),
-        text: this.translate(this.prompt.i18n.text, {
-          params: this.params,
-          path: `prompts.${this.type}.text`,
-        }),
-        description: this.translate(this.prompt.i18n.description, {
-          params: this.params,
-          path: `prompts.${this.type}.description`,
-          sanitize: true,
-        }),
-      };
-    },
-  },
-});
diff --git a/apps/survey/src/components/prompts/layouts/panel-layout.vue b/apps/survey/src/components/prompts/layouts/panel-layout.vue
index 08f6e20272..bd45a42171 100644
--- a/apps/survey/src/components/prompts/layouts/panel-layout.vue
+++ b/apps/survey/src/components/prompts/layouts/panel-layout.vue
@@ -1,8 +1,8 @@
 <template>
   <v-expansion-panel>
-    <v-expansion-panel-header>{{ i18n.name }}</v-expansion-panel-header>
-    <v-expansion-panel-content>
-      <v-card flat :tile="isMobile">
+    <v-expansion-panel-title>{{ i18n.name }}</v-expansion-panel-title>
+    <v-expansion-panel-text>
+      <v-card flat :tile="$vuetify.display.mobile">
         <slot name="prompt-description">
           <div
             v-if="i18n.description"
@@ -12,7 +12,7 @@
         </slot>
         <slot />
         <v-card-actions
-          v-if="isInMultiPrompt || !isMobile || prompt.actions?.both"
+          v-if="isInMultiPrompt || !$vuetify.display.mobile || prompt.actions?.both"
           id="actions"
           class="pa-0 d-flex flex-column-reverse flex-md-row align-stretch ga-3"
         >
@@ -21,15 +21,14 @@
               v-for="item in desktopActions"
               :key="item.type"
               class="px-4"
-              :color="item.color"
+              :color="item.color ?? undefined"
               :disabled="item.type === 'next' && !isValid"
-              large
-              :outlined="item.variant === 'outlined'"
-              :text="item.variant === 'text'"
+              size="large"
               :title="Object.keys(item.label).length ? translate(item.label) : translate(item.text)"
+              :variant="item.variant"
               @click="action(item.type, foodOrMealId, item.params)"
             >
-              <v-icon v-if="item.icon" left>
+              <v-icon v-if="item.icon" start>
                 {{ item.icon }}
               </v-icon>
               {{ translate(item.text) }}
@@ -40,20 +39,56 @@
           </template>
         </v-card-actions>
       </v-card>
-    </v-expansion-panel-content>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { type PropType, useSlots } from 'vue';
 
-import layoutMixin from './layout-mixin';
+import type { Prompt } from '@intake24/common/prompts';
+import type { PromptSection } from '@intake24/common/surveys';
+import type { FoodState, MealState } from '@intake24/common/types';
 
-export default defineComponent({
-  name: 'PanelLayout',
+import { useLayout } from './use-layout';
 
-  mixins: [layoutMixin],
-});
+defineOptions({ name: 'PanelLayout' });
+
+const props = defineProps(
+  {
+    prompt: {
+      type: Object as PropType<Prompt>,
+      required: true,
+    },
+    section: {
+      type: String as PropType<PromptSection>,
+      required: true,
+    },
+    food: {
+      type: Object as PropType<FoodState>,
+    },
+    meal: {
+      type: Object as PropType<MealState>,
+    },
+    isValid: {
+      type: Boolean,
+      default: false,
+    },
+  },
+);
+
+const emit = defineEmits(['action']);
+const slots = useSlots();
+
+const {
+  action,
+  desktopActions,
+  foodOrMealId,
+  hasDefaultSlot,
+  i18n,
+  isInMultiPrompt,
+  translate,
+} = useLayout(props, { emit, slots });
 </script>
 
 <style lang="scss"></style>
diff --git a/apps/survey/src/components/prompts/layouts/use-layout.ts b/apps/survey/src/components/prompts/layouts/use-layout.ts
new file mode 100644
index 0000000000..2762c73410
--- /dev/null
+++ b/apps/survey/src/components/prompts/layouts/use-layout.ts
@@ -0,0 +1,118 @@
+import get from 'lodash/get';
+import set from 'lodash/set';
+import { computed, onBeforeMount, type SetupContext } from 'vue';
+
+import type { Prompt } from '@intake24/common/prompts';
+import type { PromptSection } from '@intake24/common/surveys';
+import type { FoodState, MealState } from '@intake24/common/types';
+import { defaultMessages, useI18n } from '@intake24/i18n';
+import { useFoodUtils, useMealUtils, usePromptUtils } from '@intake24/survey/composables';
+import { useSurvey } from '@intake24/survey/stores';
+
+export type UseLayoutProps = {
+  prompt: Prompt;
+  section: PromptSection;
+  food?: FoodState;
+  meal?: MealState;
+  isValid?: boolean;
+};
+
+export function useLayout(props: UseLayoutProps, ctx: SetupContext<'action'[]>) {
+  const { i18n: globalI18n, translate } = useI18n();
+  const { action, isInMultiPrompt, params, type } = usePromptUtils(props, ctx);
+  const { foodName } = useFoodUtils(props);
+  const { mealName, mealTime, mealNameWithTime } = useMealUtils(props);
+  const survey = useSurvey();
+
+  const meals = computed(() => survey.data.meals);
+  const showSummary = computed(() => {
+    if (props.prompt.component === 'submit-prompt' && props.prompt.review.mobile !== false)
+      return false;
+
+    if (survey.hasFinished)
+      return false;
+
+    return !['preMeals'].includes(props.section);
+  });
+
+  const loadPromptTranslations = () => {
+    const messages = globalI18n.getLocaleMessage(globalI18n.locale.value);
+
+    const defaultPromptMessages = get(
+      defaultMessages.getMessages(globalI18n.locale.value),
+      `prompts.${type.value}`,
+    );
+
+    if (defaultPromptMessages === undefined) {
+      console.error(`Failed to load default translation messages using key "prompts.${type.value}", locale "${globalI18n.locale.value}". Please update the translation files!`);
+    }
+    else {
+      Object.entries(defaultPromptMessages).forEach(([key, value]) => {
+        set(messages, `prompts.${type.value}.${key}`, props.prompt.i18n[key]?.[globalI18n.locale.value] ?? value);
+      });
+    }
+
+    globalI18n.setLocaleMessage(globalI18n.locale.value, messages);
+  };
+
+  const foodOrMealId = computed(() => props.food?.id ?? props.meal?.id);
+  const desktopActions = computed(() => props.prompt.actions?.items.filter(action => action.layout.includes('desktop')) ?? []);
+  const hasDefaultSlot = computed(() => !!ctx.slots.default);
+  const hasActionsSlot = computed(() => !!ctx.slots.actions);
+  const hasNavActionsSlot = computed(() => !!ctx.slots['nav-actions']);
+  const mobileActions = computed(() => props.prompt.actions?.items.filter(action => action.layout.includes('mobile')) ?? []);
+
+  const i18n = computed(() => (
+
+    /*
+       * Workaround for multi-prompt i18n
+       * - at the moment scheme prompt i18n is merged into the vue-i18n instance messages, so it can be used directly
+       * - this approach allows use of vue-i18n component to interpolate the i18n strings
+       * - however multi-prompt is displaying multiple prompts at once, so same prompt types override each other
+       * - TODO: implement own vue-i18n component and merge the i18n outside of the vue-i18n instance?
+       */
+    {
+      /* name: this.$t(`prompts.${this.type}.name`, this.params),
+        text: this.$t(`prompts.${this.type}.text`, this.params),
+        description: this.translatePath(`prompts.${this.type}.description`, this.params, true), */
+      name: translate(props.prompt.i18n.name, {
+        params: params.value,
+        path: `prompts.${type.value}.name`,
+      }),
+      text: translate(props.prompt.i18n.text, {
+        params: params.value,
+        path: `prompts.${type.value}.text`,
+      }),
+      description: translate(props.prompt.i18n.description, {
+        params: params.value,
+        path: `prompts.${type.value}.description`,
+        sanitize: true,
+      }),
+    }
+  ));
+
+  onBeforeMount(() => {
+    loadPromptTranslations();
+  });
+
+  return {
+    action,
+    desktopActions,
+    foodName,
+    foodOrMealId,
+    hasActionsSlot,
+    hasDefaultSlot,
+    hasNavActionsSlot,
+    i18n,
+    isInMultiPrompt,
+    mealName,
+    mealTime,
+    mealNameWithTime,
+    mobileActions,
+    params,
+    showSummary,
+    translate,
+    type,
+    meals,
+  };
+}
diff --git a/apps/survey/src/components/prompts/multi-prompt.vue b/apps/survey/src/components/prompts/multi-prompt.vue
index 62bfdce138..5a9332815f 100644
--- a/apps/survey/src/components/prompts/multi-prompt.vue
+++ b/apps/survey/src/components/prompts/multi-prompt.vue
@@ -3,7 +3,7 @@
     v-bind="{ food, meal, prompt: prompt.prompts[panel ?? 0], section, isValid }"
     @action="action"
   >
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <component
         :is="item.component"
         v-for="(item, idx) in prompt.prompts"
@@ -46,13 +46,13 @@ export default defineComponent({
   mixins: [createBasePrompt<'multi-prompt', FoodState>()],
 
   props: {
-    value: {
+    modelValue: {
       type: Array as PropType<(CustomPromptAnswer | undefined)[]>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const isAnswerRequired = (prompt: Prompt) =>
@@ -60,15 +60,15 @@ export default defineComponent({
 
     const isValid = computed(
       () =>
-        !props.value.some(
+        !props.modelValue.some(
           (answer, idx) => answer === undefined && isAnswerRequired(props.prompt.prompts[idx]),
         ),
     );
     const panel = ref<number | undefined>(0);
 
     const state = computed({
-      get: () => props.value,
-      set: value => ctx.emit('input', value),
+      get: () => props.modelValue,
+      set: value => ctx.emit('update:modelValue', value),
     });
 
     const confirm = () => {
@@ -82,7 +82,7 @@ export default defineComponent({
       if (state.value[idx] === undefined && !isAnswerRequired(prompt))
         state.value[idx] = null;
 
-      for (const [index, answer] of Object.entries(props.value)) {
+      for (const [index, answer] of Object.entries(props.modelValue)) {
         if (answer === undefined) {
           panel.value = Number.parseInt(index);
           return;
diff --git a/apps/survey/src/components/prompts/partials/AsServedSelector.vue b/apps/survey/src/components/prompts/partials/AsServedSelector.vue
index 336f25668f..6c42da471b 100644
--- a/apps/survey/src/components/prompts/partials/AsServedSelector.vue
+++ b/apps/survey/src/components/prompts/partials/AsServedSelector.vue
@@ -1,14 +1,14 @@
 <template>
   <v-container>
     <v-row>
-      <v-img :aspect-ratio="16 / 9" class="align-end" :src="image">
+      <v-img :aspect-ratio="16 / 9" class="align-end" cover :src="image">
         <template #placeholder>
           <image-placeholder />
         </template>
         <v-row>
-          <v-col class="d-flex justify-end mr-auto">
+          <v-col class="d-flex justify-end me-auto">
             <v-chip
-              class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold secondary--text border-secondary-1"
+              class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold text-secondary border-secondary-1"
             >
               {{ thumbnailWeight }}
             </v-chip>
@@ -16,51 +16,55 @@
         </v-row>
         <as-served-weight-factor
           v-bind="weightFactorProps"
-          @input="updateWeightFactor"
+          @update:model-value="updateWeightFactor"
         />
       </v-img>
     </v-row>
     <v-row v-if="asServedData" class="mt-4">
-      <v-col class="pa-1 rounded-lg" :class="{ 'border-primary-2': isLessWeightFactorActive }" cols="3" lg="auto" sm="2">
+      <v-col class="pa-1 rounded-lg" :class="{ 'border-primary-2': isLessWeightFactorActive }" cols="3" lg sm="2">
         <v-card :disabled="isLessWeightFactorActive" @click="updateSelection(-1)">
-          <v-img :src="firstThumbnail" />
-          <v-overlay absolute>
+          <v-img cover :src="firstThumbnail" />
+          <v-overlay absolute class="align-center justify-center" contained :model-value="true">
             <v-btn
+              color="transparent"
               :disabled="isLessWeightFactorActive"
               icon
+              size="x-large"
               :title="$t(`prompts.asServed.${type}.less`)"
-              x-large
             >
-              <v-icon>$decrement</v-icon>
+              <v-icon color="white" size="large">
+                $decrement
+              </v-icon>
             </v-btn>
           </v-overlay>
         </v-card>
       </v-col>
-      <template v-for="(images, idx) in asServedData.images">
-        <v-col
-          :key="idx"
-          class="pa-1 rounded-lg"
-          :class="{ 'border-primary-2': isSelected(idx) }"
-          cols="3"
-          lg="auto"
-          sm="2"
-        >
-          <v-card @click="setSelection(idx)">
-            <v-img :src="images.thumbnailUrl" />
-          </v-card>
-        </v-col>
-      </template>
-      <v-col v-if="showMoreWeightFactor" class="pa-1 rounded-lg" :class="{ 'border-primary-2': isMoreWeightFactorActive }" cols="3" lg="auto" sm="2">
+      <v-col
+        v-for="(images, idx) in asServedData.images" :key="idx"
+        class="pa-1 rounded-lg"
+        :class="{ 'border-primary-2': isSelected(idx) }"
+        cols="3"
+        lg
+        sm="2"
+      >
+        <v-card @click="setSelection(idx)">
+          <v-img cover :src="images.thumbnailUrl" />
+        </v-card>
+      </v-col>
+      <v-col v-if="showMoreWeightFactor" class="pa-1 rounded-lg" :class="{ 'border-primary-2': isMoreWeightFactorActive }" cols="3" lg sm="2">
         <v-card :disabled="isMoreWeightFactorActive" @click="updateSelection(1)">
-          <v-img :src="lastThumbnail" />
-          <v-overlay absolute>
+          <v-img cover :src="lastThumbnail" />
+          <v-overlay absolute class="align-center justify-center" contained :model-value="true">
             <v-btn
+              color="transparent"
               :disabled="isMoreWeightFactorActive"
               icon
+              size="x-large"
               :title="$t(`prompts.asServed.${type}.more`)"
-              x-large
             >
-              <v-icon>$increment</v-icon>
+              <v-icon color="white" size="large">
+                $increment
+              </v-icon>
             </v-btn>
           </v-overlay>
         </v-card>
@@ -68,7 +72,7 @@
     </v-row>
     <v-row>
       <v-col class="px-1" cols="12" sm="auto">
-        <v-btn :block="isMobile" color="primary" @click="confirm">
+        <v-btn :block="$vuetify.display.mobile" color="primary" @click="confirm">
           {{ $t(`prompts.asServed.${type}.confirm`) }}
         </v-btn>
       </v-col>
@@ -104,13 +108,13 @@ export default defineComponent({
       type: String as PropType<'serving' | 'leftovers'>,
       default: 'serving',
     },
-    value: {
+    modelValue: {
       type: Object as PropType<SelectedAsServedImage | null>,
       default: null,
     },
   },
 
-  emits: ['confirm', 'input'],
+  emits: ['confirm', 'update:modelValue'],
 
   setup(props) {
     const denominator = 4;
@@ -125,13 +129,13 @@ export default defineComponent({
       maxNumerator: denominator,
       denominator,
       weight,
-      value: denominator,
+      modelValue: denominator,
     });
 
     const lessWeightFactor = (
       show: boolean,
       weight: number,
-      value?: number,
+      modelValue?: number,
     ): WeightFactorProps => ({
       show,
       type: props.type,
@@ -140,10 +144,10 @@ export default defineComponent({
       maxNumerator: denominator - 1,
       denominator,
       weight,
-      value: value ?? denominator - 1,
+      modelValue: modelValue ?? denominator - 1,
     });
 
-    const moreWeightFactor = (show: boolean, weight: number, value?: number): WeightFactorProps => {
+    const moreWeightFactor = (show: boolean, weight: number, modelValue?: number): WeightFactorProps => {
       let minNumerator = denominator + 1;
       let maxNumerator = denominator * 5;
 
@@ -151,7 +155,7 @@ export default defineComponent({
         if ((minNumerator / denominator) * weight >= props.maxWeight) {
           minNumerator = denominator;
           maxNumerator = denominator;
-          value = denominator;
+          modelValue = denominator;
         }
         else {
           maxNumerator = denominator;
@@ -173,7 +177,7 @@ export default defineComponent({
         maxNumerator,
         denominator,
         weight,
-        value: value ?? denominator + 1,
+        modelValue: modelValue ?? denominator + 1,
       };
     };
 
@@ -233,7 +237,7 @@ export default defineComponent({
       return ((this.denominator + 1) / this.denominator) * weight < this.maxWeight;
     },
     weightFactor(): number {
-      return this.weightFactorProps.value / this.weightFactorProps.denominator;
+      return this.weightFactorProps.modelValue / this.weightFactorProps.denominator;
     },
   },
 
@@ -274,14 +278,14 @@ export default defineComponent({
         );
       }
 
-      if (this.value?.index !== undefined)
-        this.setSelection(this.value.index, true);
+      if (this.modelValue?.index !== undefined)
+        this.setSelection(this.modelValue.index, true);
       else this.setSelection(Math.floor(this.asServedData.images.length / 2));
     },
 
     initWeightFactor(asServedData: AsServedSetResponse, objectIdx: number) {
       const objectWeight = asServedData.images[objectIdx].weight;
-      const initWeight = this.value?.weight;
+      const initWeight = this.modelValue?.weight;
 
       if (initWeight === undefined)
         return;
@@ -348,7 +352,7 @@ export default defineComponent({
     },
 
     updateWeightFactor(value: number) {
-      this.weightFactorProps.value = value;
+      this.weightFactorProps.modelValue = value;
       this.update();
     },
 
@@ -371,7 +375,7 @@ export default defineComponent({
         imageUrl: asServedData.images[objectIdx].mainImageUrl,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
 
     confirm() {
diff --git a/apps/survey/src/components/prompts/partials/AsServedWeightFactor.vue b/apps/survey/src/components/prompts/partials/AsServedWeightFactor.vue
index 0ad0902eb5..8c68a79a28 100644
--- a/apps/survey/src/components/prompts/partials/AsServedWeightFactor.vue
+++ b/apps/survey/src/components/prompts/partials/AsServedWeightFactor.vue
@@ -1,26 +1,26 @@
 <template>
-  <v-overlay absolute :dark="false" :opacity="0.2" :value="show">
-    <v-card class="card-overlay" flat :tile="isMobile">
+  <v-overlay absolute class="align-center justify-center" contained :model-value="show" :opacity="0.2">
+    <v-card class="card-overlay" flat :tile="$vuetify.display.mobile">
       <v-card-text class="d-flex flex-column align-center">
         <v-btn
-          v-if="!isMobile"
+          v-if="!$vuetify.display.mobile"
           class="mb-3"
           color="secondary"
           :disabled="numerator === maxNumerator"
           icon
-          large
-          outlined
+          size="large"
           :title="$t(`prompts.asServed.${type}.more`)"
+          variant="outlined"
           @click="update(1)"
         >
           <v-icon aria-hidden="false">
             $increment
           </v-icon>
         </v-btn>
-        <v-chip color="grey lighten-1">
-          <i18n
+        <v-chip color="grey-lighten-1">
+          <i18n-t
             class="font-weight-medium text-h6"
-            :path="`prompts.asServed.weightFactor.${type}.${subType}`"
+            :keypath="`prompts.asServed.weightFactor.${type}.${subType}`"
           >
             <template #whole>
               <span class="font-weight-bold">{{ whole }}</span>
@@ -28,7 +28,7 @@
             <template #fraction>
               <span class="font-weight-bold">{{ fraction }}</span>
             </template>
-          </i18n>
+          </i18n-t>
         </v-chip>
         <span class="my-1 font-weight-medium text-h6">
           {{ $t(`prompts.asServed.weightFactor.${subType}`) }}
@@ -41,9 +41,9 @@
             color="secondary"
             :disabled="numerator === minNumerator"
             icon
-            large
-            outlined
+            size="large"
             :title="$t(`prompts.asServed.${type}.less`)"
+            variant="outlined"
             @click="update(-1)"
           >
             <v-icon aria-hidden="false">
@@ -51,14 +51,14 @@
             </v-icon>
           </v-btn>
           <v-btn
-            v-if="isMobile"
-            class="ml-6"
+            v-if="$vuetify.display.mobile"
+            class="ms-6"
             color="secondary"
             :disabled="numerator === maxNumerator"
             icon
-            large
-            outlined
+            size="large"
             :title="$t(`prompts.asServed.${type}.more`)"
+            variant="outlined"
             @click="update(1)"
           >
             <v-icon aria-hidden="false">
@@ -74,7 +74,6 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
-import { VChip } from 'vuetify/lib';
 
 export type WeightFactorProps = {
   show: boolean;
@@ -84,14 +83,12 @@ export type WeightFactorProps = {
   maxNumerator: number;
   denominator: number;
   weight: number;
-  value: number;
+  modelValue: number;
 };
 
 export default defineComponent({
   name: 'AsServedWeightFactor',
 
-  components: { VChip },
-
   props: {
     show: {
       type: Boolean as PropType<WeightFactorProps['show']>,
@@ -121,17 +118,17 @@ export default defineComponent({
       type: Number as PropType<WeightFactorProps['weight']>,
       required: true,
     },
-    value: {
-      type: Number as PropType<WeightFactorProps['value']>,
+    modelValue: {
+      type: Number as PropType<WeightFactorProps['modelValue']>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   data() {
     return {
-      numerator: this.value,
+      numerator: this.modelValue,
     };
   },
 
@@ -163,7 +160,7 @@ export default defineComponent({
       if (!val)
         return;
 
-      this.numerator = this.value;
+      this.numerator = this.modelValue;
     },
   },
 
@@ -174,7 +171,7 @@ export default defineComponent({
           ? Math.min(this.maxNumerator, this.numerator + value)
           : Math.max(this.minNumerator, this.numerator + value);
 
-      this.$emit('input', this.numerator);
+      this.$emit('update:modelValue', this.numerator);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/partials/DrinkScalePanel.vue b/apps/survey/src/components/prompts/partials/DrinkScalePanel.vue
index 14ae9062e8..48d90d6e1b 100644
--- a/apps/survey/src/components/prompts/partials/DrinkScalePanel.vue
+++ b/apps/survey/src/components/prompts/partials/DrinkScalePanel.vue
@@ -12,22 +12,24 @@
         </template>
       </v-img>
       <v-img class="drink-scale-overlay" :src="scale.overlayImageUrl" :style="overlayVars" />
-      <div class="drink-scale-slider mr-6" :style="{ bottom: sliderBottom }">
+      <div class="drink-scale-slider me-6" :style="{ bottom: sliderBottom, top: sliderTop }">
         <v-slider
           v-model="sliderValue"
           color="secondary"
-          :height="sliderHeight"
+          direction="vertical"
           hide-details
           :label="$t('prompts.quantity._')"
           :max="sliderMax"
           :min="sliderMin"
+          :ripple="false"
+          :style="sliderVars"
           thumb-color="secondary"
-          vertical
+          track-color="primary"
         />
       </div>
       <div class="drink-scale-label">
         <v-chip
-          class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold secondary--text border-secondary-1"
+          class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold text-secondary border-secondary-1"
         >
           {{ label }}
         </v-chip>
@@ -39,10 +41,10 @@
           block
           color="primary"
           :disabled="sliderValue <= sliderMin"
-          outlined
+          variant="outlined"
           @click="updateSlider(-sliderStep)"
         >
-          <v-icon left>
+          <v-icon start>
             fas fa-circle-down
           </v-icon>
           {{ $t(`prompts.drinkScale.${type}.less`) }}
@@ -53,10 +55,10 @@
           block
           color="primary"
           :disabled="sliderValue >= sliderMax"
-          outlined
+          variant="outlined"
           @click="updateSlider(sliderStep)"
         >
-          <v-icon left>
+          <v-icon start>
             fas fa-circle-up
           </v-icon>
           {{ $t(`prompts.drinkScale.${type}.more`) }}
@@ -64,7 +66,7 @@
       </v-col>
       <v-col cols="12" sm>
         <v-btn block color="primary" @click="confirm">
-          <v-icon left>
+          <v-icon start>
             $yes
           </v-icon>
           {{ $t(`prompts.drinkScale.${type}.confirm`) }}
@@ -74,24 +76,24 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import type { VImg } from 'vuetify/lib';
 import { useElementSize } from '@vueuse/core';
 import debounce from 'lodash/debounce';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, ref, useTemplateRef, watch } from 'vue';
+import { useGoTo } from 'vuetify';
 
 import type { DrinkwareScaleEntry } from '@intake24/common/types/http/admin';
 import { ImagePlaceholder } from '@intake24/survey/components/elements';
 
 import { calculateVolume } from './drink-scale';
 
-export default defineComponent({
+defineOptions({
   name: 'DrinkScalePanel',
+});
 
-  components: { ImagePlaceholder },
-
-  props: {
+const props = defineProps(
+  {
     maxFillLevel: {
       type: Number,
       default: 1,
@@ -108,142 +110,119 @@ export default defineComponent({
       type: String as PropType<'serving' | 'leftovers'>,
       default: 'serving',
     },
-    value: {
+    modelValue: {
       type: Number,
       required: true,
     },
   },
+);
+const emit = defineEmits(['confirm', 'update:modelValue']);
+
+const goTo = useGoTo();
+const wrapper = useTemplateRef('wrapper');
+const imgDrink = useTemplateRef('imgDrink');
+// @ts-expect-error should allow vue instance?
+const { height } = useElementSize(imgDrink);
+
+const imgScale = computed(() => height.value / props.scale.height);
+
+const cursorInScale = ref(false);
+const sliderMax = ref(props.maxFillLevel * (props.scale.fullLevel - props.scale.emptyLevel));
+const sliderMin = ref(0);
+const sliderStep = ref(Math.round(sliderMax.value / 6));
+const sliderValue = ref(sliderMax.value * props.modelValue);
+const sliderBottom = computed(() => `${props.scale.emptyLevel * imgScale.value}px`);
+const sliderHeight = computed(() => sliderMax.value * imgScale.value);
+const sliderTop = computed(() => `${sliderBottom.value + sliderHeight.value}px`);
+
+function isInScale(y: number) {
+  return y >= sliderMin.value + props.scale.emptyLevel
+    && y <= sliderMax.value + props.scale.emptyLevel;
+}
 
-  emits: ['confirm', 'input'],
-
-  setup(props, { emit }) {
-    const wrapper = ref<InstanceType<typeof HTMLFormElement>>();
-    const imgDrink = ref<InstanceType<typeof VImg>>();
-    // @ts-expect-error should allow vue instance?
-    const { height, width } = useElementSize(imgDrink);
-
-    const imgScale = computed(() => height.value / props.scale.height);
-
-    const cursorInScale = ref(false);
-    const sliderMax = ref(props.maxFillLevel * (props.scale.fullLevel - props.scale.emptyLevel));
-    const sliderMin = ref(0);
-    const sliderStep = ref(Math.round(sliderMax.value / 6));
-    const sliderValue = ref(sliderMax.value * props.value);
-    const sliderBottom = computed(() => `${props.scale.emptyLevel * imgScale.value}px`);
-    const sliderHeight = computed(() => sliderMax.value * imgScale.value);
-
-    const isInScale = (y: number) =>
-      y >= sliderMin.value + props.scale.emptyLevel
-      && y <= sliderMax.value + props.scale.emptyLevel;
-
-    const updateSlider = (value: number) => {
-      sliderValue.value = Math.min(
-        sliderMax.value,
-        Math.max(sliderMin.value, sliderValue.value + value),
-      );
-    };
-
-    const touchUpdateSlider = (event: MouseEvent) => {
-      if (event.target && (event.target as HTMLElement).className.startsWith('v-slider__'))
-        return;
-
-      const position = props.scale.height - event.offsetY / imgScale.value;
-      if (!isInScale(position))
-        return;
-
-      sliderValue.value = Math.round(position - props.scale.emptyLevel);
-    };
-
-    const trackOverlay = (event: MouseEvent) => {
-      const position = props.scale.height - event.offsetY / imgScale.value;
-      cursorInScale.value = isInScale(position);
-    };
-
-    const onTrackOverlay = debounce((event: MouseEvent) => {
-      trackOverlay(event);
-    }, 100);
-
-    const fillLevel = computed(() => (sliderValue.value / sliderMax.value) * props.maxFillLevel);
-
-    const fillVolume = computed(() =>
-      Math.round(calculateVolume(props.scale.volumeSamples, fillLevel.value)),
-    );
-
-    const label = computed(() => `${fillVolume.value} ml`);
-
-    const imgClip = computed(
-      () => (props.scale.height - props.scale.fullLevel) * 0.75 * imgScale.value,
-    );
-
-    const imgVars = computed(() => ({ '--img-clip': `${imgClip.value}px` }));
-
-    const overlayVars = computed(() => ({
-      '--overlay-clip': `${
-        height.value - (props.scale.emptyLevel + sliderValue.value) * imgScale.value
-      }px`,
-    }));
-
-    const confirm = () => {
-      emit('confirm');
-    };
-
-    watch(fillLevel, (val) => {
-      if (!props.open)
-        return;
-
-      emit('input', val);
-    });
-
-    watch(
-      () => props.open,
-      () => {
-        sliderMax.value = props.maxFillLevel * (props.scale.fullLevel - props.scale.emptyLevel);
-        sliderValue.value = sliderMax.value * props.value;
-      },
-    );
-
-    return {
-      wrapper,
-      imgDrink,
-      height,
-      width,
-      confirm,
-      imgScale,
-      isInScale,
-      cursorInScale,
-      sliderMax,
-      sliderMin,
-      sliderStep,
-      sliderValue,
-      sliderBottom,
-      sliderHeight,
-      updateSlider,
-      touchUpdateSlider,
-      onTrackOverlay,
-      label,
-      imgVars,
-      overlayVars,
-    };
-  },
+function updateSlider(value: number) {
+  sliderValue.value = Math.min(
+    sliderMax.value,
+    Math.max(sliderMin.value, sliderValue.value + value),
+  );
+}
 
-  watch: {
-    height() {
-      if (this.open)
-        this.scrollTo();
-    },
-  },
+function touchUpdateSlider(event: MouseEvent) {
+  if (event.target && (event.target as HTMLElement).className.startsWith('v-slider__'))
+    return;
 
-  methods: {
-    scrollTo() {
-      setTimeout(async () => {
-        if (!this.wrapper)
-          return;
+  const position = props.scale.height - event.offsetY / imgScale.value;
+  if (!isInScale(position))
+    return;
 
-        await this.$vuetify.goTo(this.wrapper);
-      }, 100);
-    },
-  },
+  sliderValue.value = Math.round(position - props.scale.emptyLevel);
+}
+
+function trackOverlay(event: MouseEvent) {
+  const position = props.scale.height - event.offsetY / imgScale.value;
+  cursorInScale.value = isInScale(position);
+}
+
+const onTrackOverlay = debounce((event: MouseEvent) => {
+  trackOverlay(event);
+}, 100);
+
+const fillLevel = computed(() => (sliderValue.value / sliderMax.value) * props.maxFillLevel);
+
+const fillVolume = computed(() =>
+  Math.round(calculateVolume(props.scale.volumeSamples, fillLevel.value)),
+);
+
+const label = computed(() => `${fillVolume.value} ml`);
+
+const imgClip = computed(
+  () => (props.scale.height - props.scale.fullLevel) * 0.75 * imgScale.value,
+);
+
+const imgVars = computed(() => ({ '--img-clip': `${imgClip.value}px` }));
+const sliderVars = computed(() => ({ '--sliderHeight': `${sliderHeight.value}px` }));
+
+const overlayVars = computed(() => ({
+  '--overlay-clip': `${
+    height.value - (props.scale.emptyLevel + sliderValue.value) * imgScale.value
+  }px`,
+}));
+
+function confirm() {
+  emit('confirm');
+}
+
+watch(fillLevel, (val) => {
+  if (!props.open)
+    return;
+
+  emit('update:modelValue', val);
 });
+
+watch(
+  () => props.open,
+  () => {
+    sliderMax.value = props.maxFillLevel * (props.scale.fullLevel - props.scale.emptyLevel);
+    sliderValue.value = sliderMax.value * props.modelValue;
+  },
+);
+
+function scrollTo() {
+  setTimeout(async () => {
+    if (!wrapper.value)
+      return;
+
+    await goTo(wrapper.value);
+  }, 100);
+};
+
+watch(
+  height,
+  () => {
+    if (props.open)
+      scrollTo();
+  },
+);
 </script>
 
 <style lang="scss">
@@ -267,6 +246,7 @@ export default defineComponent({
     .drink-scale-image {
       clip-path: inset(var(--img-clip) 0px 0px 0px);
       margin-top: calc(var(--img-clip) * -1);
+      max-height: unset !important;
     }
 
     .drink-scale-overlay {
@@ -275,6 +255,7 @@ export default defineComponent({
       left: 0;
       width: 100%;
       clip-path: inset(var(--overlay-clip) 0px 0px 0px);
+      max-height: unset !important;
     }
 
     .drink-scale-slider {
@@ -288,9 +269,15 @@ export default defineComponent({
       }
 
       .v-slider {
-        height: 100%;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        height: var(--sliderHeight) !important;
+
+        .v-input__prepend {
+          margin-block-start: 0;
+        }
 
-        .v-slider__track-container {
+        .v-slider-track {
           cursor: pointer;
           width: 12px;
 
@@ -304,10 +291,9 @@ export default defineComponent({
           }
         }
 
-        .v-slider__thumb-container {
-          cursor: pointer;
-
-          .v-slider__thumb {
+        .v-slider-thumb {
+          .v-slider-thumb__surface {
+            cursor: pointer;
             width: 30px;
             height: 14px;
             position: absolute;
@@ -336,8 +322,10 @@ export default defineComponent({
         }
       }
 
-      .v-slider--vertical {
-        min-height: unset;
+      .v-input--vertical {
+        .v-input__control {
+          min-height: unset;
+        }
       }
     }
 
diff --git a/apps/survey/src/components/prompts/partials/DrinkScaleV2Panel.vue b/apps/survey/src/components/prompts/partials/DrinkScaleV2Panel.vue
index 28d43d622a..62c8e88ed7 100644
--- a/apps/survey/src/components/prompts/partials/DrinkScaleV2Panel.vue
+++ b/apps/survey/src/components/prompts/partials/DrinkScaleV2Panel.vue
@@ -1,14 +1,11 @@
 <template>
-  <div ref="wrapper" class="drink-scale-wrapper">
+  <div ref="wrapper" class="drink-scale-wrapper__v2">
     <div class="drink-scale-drawer" :class="{ selected: cursorInScale }">
       <v-img
-        :key="imgKey"
         ref="imgDrink"
         :aspect-ratio="containerAspectRatio"
         class="drink-scale-image"
-        :contain="true"
         :src="scale.baseImageUrl"
-        @load="onImageLoad"
         @mousedown="onMouseDown"
         @mousemove="onMouseMove"
         @touchmove="onTouchMove"
@@ -17,7 +14,6 @@
           <image-placeholder />
         </template>
       </v-img>
-
       <svg>
         <filter id="drink-scale-blur">
           <feGaussianBlur stdDeviation="5" />
@@ -38,23 +34,25 @@
         />
       </svg>
 
-      <div class="drink-scale-slider mr-6" :style="{ bottom: sliderBottomOffset }">
+      <div class="drink-scale-slider me-6" :style="{ bottom: sliderBottomOffset }">
         <v-slider
           v-model="sliderValue"
           color="secondary"
-          :height="scaleHeightPx"
+          direction="vertical"
           hide-details
           :label="$t('prompts.quantity._')"
           :max="1"
           :min="0"
+          :ripple="false"
           :step="0.01"
+          :style="sliderVars"
           thumb-color="secondary"
-          vertical
+          track-color="primary"
         />
       </div>
       <div class="drink-scale-label">
         <v-chip
-          class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold secondary--text border-secondary-1"
+          class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold text-secondary border-secondary-1"
         >
           {{ label }}
         </v-chip>
@@ -66,10 +64,10 @@
           block
           color="primary"
           :disabled="sliderValue === 0"
-          outlined
+          variant="outlined"
           @click="moveSliderRelative(-0.2)"
         >
-          <v-icon left>
+          <v-icon start>
             fas fa-circle-down
           </v-icon>
           {{ $t(`prompts.drinkScale.${type}.less`) }}
@@ -80,10 +78,10 @@
           block
           color="primary"
           :disabled="sliderValue === 1"
-          outlined
+          variant="outlined"
           @click="moveSliderRelative(0.2)"
         >
-          <v-icon left>
+          <v-icon start>
             fas fa-circle-up
           </v-icon>
           {{ $t(`prompts.drinkScale.${type}.more`) }}
@@ -91,7 +89,7 @@
       </v-col>
       <v-col cols="12" sm>
         <v-btn block color="primary" @click="confirm">
-          <v-icon left>
+          <v-icon start>
             $yes
           </v-icon>
           {{ $t(`prompts.drinkScale.${type}.confirm`) }}
@@ -101,12 +99,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import type { VImg } from 'vuetify/lib';
 import { useElementSize } from '@vueuse/core';
 import { chunk, maxBy } from 'lodash';
-import { computed, defineComponent, ref, toRefs, watch } from 'vue';
+import { computed, ref, useTemplateRef, watch } from 'vue';
+import { useGoTo } from 'vuetify';
+import { VImg } from 'vuetify/components';
 
 import type { DrinkwareScaleV2Response } from '@intake24/common/types/http';
 import { ImagePlaceholder } from '@intake24/survey/components/elements';
@@ -114,272 +113,227 @@ import { ImagePlaceholder } from '@intake24/survey/components/elements';
 import { calculateVolume, getScaleBounds, toSvgPolygonPoints } from './drink-scale';
 import { calculateFillVolume, getSymmetryShape } from './drink-scale-cylindrical';
 
-export default defineComponent({
-  name: 'DrinkScaleV2Panel',
-
-  components: { ImagePlaceholder },
-
-  props: {
-    maxFillLevel: {
-      type: Number,
-      default: 1,
-    },
-    cylindricalVolumeStep: {
-      type: Number,
-      required: false,
-      default: 0.05,
-    },
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    scale: {
-      type: Object as PropType<DrinkwareScaleV2Response>,
-      required: true,
-    },
-    type: {
-      type: String as PropType<'serving' | 'leftovers'>,
-      default: 'serving',
-    },
-    value: {
-      type: Number,
-      required: true,
-    },
-    minAspectRatio: {
-      type: Number,
-      default: 1.2,
-    },
+defineOptions({ name: 'DrinkScaleV2Panel' });
+
+const props = defineProps({
+  maxFillLevel: {
+    type: Number,
+    default: 1,
+  },
+  cylindricalVolumeStep: {
+    type: Number,
+    required: false,
+    default: 0.05,
+  },
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  scale: {
+    type: Object as PropType<DrinkwareScaleV2Response>,
+    required: true,
+  },
+  type: {
+    type: String as PropType<'serving' | 'leftovers'>,
+    default: 'serving',
+  },
+  modelValue: {
+    type: Number,
+    required: true,
+  },
+  minAspectRatio: {
+    type: Number,
+    default: 1.2,
   },
+});
 
-  emits: ['confirm', 'input'],
+const emit = defineEmits(['confirm', 'update:modelValue']);
 
-  setup(props, { emit }) {
-    const wrapper = ref<InstanceType<typeof HTMLFormElement>>();
-    const imgDrink = ref<InstanceType<typeof VImg>>();
+const goTo = useGoTo();
 
-    // @ts-expect-error should allow vue instance?
-    const { height: imgContainerHeight, width: imgContainerWidth } = useElementSize(imgDrink);
+const wrapper = useTemplateRef('wrapper');
+const imgDrink = useTemplateRef<VImg>('imgDrink');
 
-    const originalImageHeight = ref(1);
-    const originalImageWidth = ref(1);
+// @ts-expect-error should allow vue instance?
+const { height: imgContainerHeight, width: imgContainerWidth } = useElementSize(imgDrink);
 
-    const containerAspectRatio = computed(() => {
-      const imageAspect = originalImageWidth.value / originalImageHeight.value;
-      return Math.max(imageAspect, props.minAspectRatio);
-    });
+const originalImageHeight = computed(() => imgDrink.value?.naturalHeight ?? 1);
+const originalImageWidth = computed(() => imgDrink.value?.naturalWidth ?? 1);
 
-    const onImageLoad = () => {
-      const vueImageElement = imgDrink.value?.$el;
-      if (vueImageElement) {
-        const imgEl = (vueImageElement as any).__vue__.image as HTMLImageElement; // stupid hack to get to the otherwise inaccessible naturalWidth/naturalHeight values
-        originalImageHeight.value = imgEl.naturalHeight;
-        originalImageWidth.value = imgEl.naturalWidth;
-      }
-    };
-
-    // Outline coordinates converted into a format compatible with the svg polygon's points attribute
-    const outlinePoints = computed(() => {
-      const originalImageAspect = originalImageWidth.value / originalImageHeight.value;
-      const imgContainerAspect = imgContainerWidth.value / imgContainerHeight.value;
-
-      const scaleWidth = originalImageAspect >= imgContainerAspect ? imgContainerWidth.value : imgContainerHeight.value * originalImageAspect;
-      const scaleHeight = originalImageAspect > imgContainerAspect ? imgContainerWidth.value / originalImageAspect : imgContainerHeight.value;
-
-      // The scale offset calculations are correct, but they are not applied to the slider,
-      // and the slider will not be drawn correctly in case if the original image is wider than
-      // the container.
-      //
-      // However, since the aspect ratio is clamped to the image aspect ratio, effectively only
-      // taller images are constrained and wide images are not and thus this case does not apply.
-
-      const scaleHorizontalOffset = (imgContainerWidth.value - scaleWidth) * 0.5;
-      const scaleVerticalOffset = (imgContainerHeight.value - scaleHeight) * 0.5;
-
-      return toSvgPolygonPoints(props.scale.outlineCoordinates, scaleWidth, scaleHeight, scaleHorizontalOffset, scaleVerticalOffset);
-    });
-
-    const propRefs = toRefs(props);
-
-    const scaleBounds = computed(() => getScaleBounds(propRefs.scale.value.outlineCoordinates));
-
-    const symmetryShape = computed(() => getSymmetryShape(propRefs.scale.value.outlineCoordinates));
-
-    // The bounding box of the sliding scale (full region not accounting for maxFillLevel)
-    const scaleBoundsPx = computed(() => {
-      const bounds = scaleBounds.value;
-      const w = imgContainerWidth.value;
-      const h = imgContainerHeight.value;
-      return {
-        left: bounds.minX * w,
-        right: bounds.maxX * w,
-        top: bounds.minY * h,
-        bottom: bounds.maxY * h,
-      };
-    });
-
-    const sliderValue = ref(props.value);
-
-    // Height of the usable sliding scale region in pixels with max fill limit applied.
-    const scaleHeightPx = computed(
-      () => (scaleBoundsPx.value.bottom - scaleBoundsPx.value.top) * props.maxFillLevel,
-    );
-
-    // Vertical offset to the current slider position in pixels. Slider range is fixed to [0, 1]
-    // regardless of component properties.
-    const sliderPosPx = computed(
-      () => scaleBoundsPx.value.bottom - scaleHeightPx.value * sliderValue.value,
-    );
-
-    // Vertical offset from the bottom of the image to the start of the sliding scale region in pixels.
-    // Used to position the slider element.
-    const sliderBottomOffset = computed(() => `${imgContainerHeight.value - scaleBoundsPx.value.bottom}px`);
-
-    const isInScale = (x: number, y: number) => {
-      const bounds = scaleBoundsPx.value;
-      const yRel = bounds.bottom - y;
-      return yRel >= 0 && yRel <= scaleHeightPx.value && x >= bounds.left && x <= bounds.right;
-    };
-
-    const cursorInScale = ref(false);
-
-    // Move the slider by delta % (can be negative). Used by the 'I had more'/'I had less' buttons.
-    const moveSliderRelative = (delta: number) => {
-      sliderValue.value = Math.min(1, Math.max(0, sliderValue.value + delta));
-    };
-
-    // Move the slider to a specific position. Used by onClick/onMove events to allow moving the slider
-    // by interacting with the image (outside of the slider).
-    const moveSlider = (y: number) => {
-      const yRel = scaleBoundsPx.value.bottom - y;
-      const clamped = Math.max(0, Math.min(scaleHeightPx.value, yRel));
-      sliderValue.value = clamped / scaleHeightPx.value;
-    };
-
-    const onMouseMove = (event: MouseEvent) => {
-      const inScale = isInScale(event.offsetX, event.offsetY);
-
-      cursorInScale.value = inScale;
-
-      if (inScale && event.buttons & 1)
-        moveSlider(event.offsetY);
-    };
-
-    const onTouchMove = (event: TouchEvent) => {
-      if (event.target && event.target instanceof HTMLElement && event.targetTouches.length > 0) {
-        const clientRect = event.target.getBoundingClientRect();
-        const offsetX = event.targetTouches[0].clientX - clientRect.x;
-        const offsetY = event.targetTouches[0].clientY - clientRect.y;
-
-        // If the touch is inside the sliding scale region, move the slider instead of scrolling.
-        // Usability is questionable, but seems to feel OK on an actual touch device. Needs wider testing.
-        if (isInScale(offsetX, offsetY)) {
-          moveSlider(offsetY);
-          event.preventDefault();
-        }
-      }
-    };
-
-    const onMouseDown = (event: MouseEvent) => {
-      if (event.target && (event.target as HTMLElement).className.startsWith('v-slider__'))
-        return;
-      moveSlider(event.offsetY);
-    };
-
-    const fillLevel = computed(() => sliderValue.value * props.maxFillLevel);
-
-    const maxVolume = computed(() => (maxBy(chunk(propRefs.scale.value.volumeSamplesNormalised, 2), sample => sample[1]) || [0, 0])[1]);
-
-    // eslint-disable-next-line vue/return-in-computed-property
-    const fillVolume = computed(() => {
-      switch (propRefs.scale.value.volumeMethod) {
-        case 'lookUpTable':
-          return calculateVolume(props.scale.volumeSamplesNormalised, fillLevel.value);
-        case 'cylindrical': {
-          const { minY, maxY } = scaleBounds.value;
-          const scaleHeight = maxY - minY;
-          const fillLineY = maxY - scaleHeight * fillLevel.value;
-          const fullVolume = calculateFillVolume(symmetryShape.value, minY, propRefs.cylindricalVolumeStep.value);
-          const filledVolume = calculateFillVolume(symmetryShape.value, fillLineY, propRefs.cylindricalVolumeStep.value);
-          return (filledVolume * maxVolume.value) / fullVolume;
-        }
-      }
-    });
-
-    const label = computed(() => `${Math.round(fillVolume.value ?? 0)} ml`);
-
-    const confirm = () => {
-      emit('confirm');
-    };
-
-    watch(fillLevel, (val) => {
-      if (!props.open)
-        return;
-
-      emit('input', val);
-    });
-
-    watch(
-      () => props.open,
-      () => {
-        sliderValue.value = props.value / props.maxFillLevel; // Slider values are always in the range [0, 1]
-      },
-    );
-
-    const imgKey = ref(0);
-
-    watch(() => props.scale.baseImageUrl, () => {
-      // Element size fails to update on image change sometimes, this seems to fix it
-      ++imgKey.value;
-    });
-
-    return {
-      wrapper,
-      imgDrink,
-      height: imgContainerHeight,
-      confirm,
-      isInScale,
-      cursorInScale,
-      sliderValue,
-      scaleBoundsPx,
-      scaleHeightPx,
-      sliderPosPx,
-      sliderBottomOffset,
-      moveSliderRelative,
-      onMouseDown,
-      onMouseMove,
-      onTouchMove,
-      label,
-      outlinePoints,
-      imgKey,
-      onImageLoad,
-      containerAspectRatio,
-    };
-  },
+const containerAspectRatio = computed(() => {
+  const imageAspect = originalImageWidth.value / originalImageHeight.value;
+  return Math.max(imageAspect, props.minAspectRatio);
+});
 
-  watch: {
-    height() {
-      if (this.open)
-        this.scrollTo();
-    },
-  },
+// Outline coordinates converted into a format compatible with the svg polygon's points attribute
+const outlinePoints = computed(() => {
+  const originalImageAspect = originalImageWidth.value / originalImageHeight.value;
+  const imgContainerAspect = imgContainerWidth.value / imgContainerHeight.value;
 
-  methods: {
-    scrollTo() {
-      setTimeout(async () => {
-        if (!this.wrapper)
-          return;
+  const scaleWidth = originalImageAspect >= imgContainerAspect ? imgContainerWidth.value : imgContainerHeight.value * originalImageAspect;
+  const scaleHeight = originalImageAspect > imgContainerAspect ? imgContainerWidth.value / originalImageAspect : imgContainerHeight.value;
 
-        await this.$vuetify.goTo(this.wrapper);
-      }, 100);
-    },
-  },
+  // The scale offset calculations are correct, but they are not applied to the slider,
+  // and the slider will not be drawn correctly in case if the original image is wider than
+  // the container.
+  //
+  // However, since the aspect ratio is clamped to the image aspect ratio, effectively only
+  // taller images are constrained and wide images are not and thus this case does not apply.
+
+  const scaleHorizontalOffset = (imgContainerWidth.value - scaleWidth) * 0.5;
+  const scaleVerticalOffset = (imgContainerHeight.value - scaleHeight) * 0.5;
+
+  return toSvgPolygonPoints(props.scale.outlineCoordinates, scaleWidth, scaleHeight, scaleHorizontalOffset, scaleVerticalOffset);
+});
+
+const scaleBounds = computed(() => getScaleBounds(props.scale.outlineCoordinates));
+
+const symmetryShape = computed(() => getSymmetryShape(props.scale.outlineCoordinates));
+
+// The bounding box of the sliding scale (full region not accounting for maxFillLevel)
+const scaleBoundsPx = computed(() => {
+  const bounds = scaleBounds.value;
+  const w = imgContainerWidth.value;
+  const h = imgContainerHeight.value;
+  return {
+    left: bounds.minX * w,
+    right: bounds.maxX * w,
+    top: bounds.minY * h,
+    bottom: bounds.maxY * h,
+  };
 });
+
+const sliderValue = ref(props.modelValue);
+
+// Height of the usable sliding scale region in pixels with max fill limit applied.
+const scaleHeightPx = computed(
+  () => (scaleBoundsPx.value.bottom - scaleBoundsPx.value.top) * props.maxFillLevel,
+);
+const sliderVars = computed(() => ({ '--sliderHeight': `${scaleHeightPx.value}px` }));
+
+// Vertical offset to the current slider position in pixels. Slider range is fixed to [0, 1]
+// regardless of component properties.
+const sliderPosPx = computed(
+  () => scaleBoundsPx.value.bottom - scaleHeightPx.value * sliderValue.value,
+);
+
+// Vertical offset from the bottom of the image to the start of the sliding scale region in pixels.
+// Used to position the slider element.
+const sliderBottomOffset = computed(() => `${imgContainerHeight.value - scaleBoundsPx.value.bottom}px`);
+
+function isInScale(x: number, y: number) {
+  const bounds = scaleBoundsPx.value;
+  const yRel = bounds.bottom - y;
+  return yRel >= 0 && yRel <= scaleHeightPx.value && x >= bounds.left && x <= bounds.right;
+}
+
+const cursorInScale = ref(false);
+
+// Move the slider by delta % (can be negative). Used by the 'I had more'/'I had less' buttons.
+function moveSliderRelative(delta: number) {
+  sliderValue.value = Math.min(1, Math.max(0, sliderValue.value + delta));
+}
+
+// Move the slider to a specific position. Used by onClick/onMove events to allow moving the slider
+// by interacting with the image (outside of the slider).
+function moveSlider(y: number) {
+  const yRel = scaleBoundsPx.value.bottom - y;
+  const clamped = Math.max(0, Math.min(scaleHeightPx.value, yRel));
+  sliderValue.value = clamped / scaleHeightPx.value;
+}
+
+function onMouseMove(event: MouseEvent) {
+  const inScale = isInScale(event.offsetX, event.offsetY);
+
+  cursorInScale.value = inScale;
+
+  if (inScale && event.buttons & 1)
+    moveSlider(event.offsetY);
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (event.target && event.target instanceof HTMLElement && event.targetTouches.length > 0) {
+    const clientRect = event.target.getBoundingClientRect();
+    const offsetX = event.targetTouches[0].clientX - clientRect.x;
+    const offsetY = event.targetTouches[0].clientY - clientRect.y;
+
+    // If the touch is inside the sliding scale region, move the slider instead of scrolling.
+    // Usability is questionable, but seems to feel OK on an actual touch device. Needs wider testing.
+    if (isInScale(offsetX, offsetY)) {
+      moveSlider(offsetY);
+      event.preventDefault();
+    }
+  }
+}
+
+function onMouseDown(event: MouseEvent) {
+  if (event.target && (event.target as HTMLElement).className.startsWith('v-slider__'))
+    return;
+  moveSlider(event.offsetY);
+}
+
+const fillLevel = computed(() => sliderValue.value * props.maxFillLevel);
+
+const maxVolume = computed(() => (maxBy(chunk(props.scale.volumeSamplesNormalised, 2), sample => sample[1]) || [0, 0])[1]);
+
+// eslint-disable-next-line vue/return-in-computed-property
+const fillVolume = computed(() => {
+  switch (props.scale.volumeMethod) {
+    case 'lookUpTable':
+      return calculateVolume(props.scale.volumeSamplesNormalised, fillLevel.value);
+    case 'cylindrical': {
+      const { minY, maxY } = scaleBounds.value;
+      const scaleHeight = maxY - minY;
+      const fillLineY = maxY - scaleHeight * fillLevel.value;
+      const fullVolume = calculateFillVolume(symmetryShape.value, minY, props.cylindricalVolumeStep);
+      const filledVolume = calculateFillVolume(symmetryShape.value, fillLineY, props.cylindricalVolumeStep);
+      return (filledVolume * maxVolume.value) / fullVolume;
+    }
+  }
+});
+
+const label = computed(() => `${Math.round(fillVolume.value ?? 0)} ml`);
+
+function confirm() {
+  emit('confirm');
+}
+
+watch(fillLevel, (val) => {
+  if (!props.open)
+    return;
+
+  emit('update:modelValue', val);
+});
+
+watch(
+  () => props.open,
+  () => {
+    sliderValue.value = props.modelValue / props.maxFillLevel; // Slider values are always in the range [0, 1]
+  },
+);
+
+function scrollTo() {
+  setTimeout(async () => {
+    if (!wrapper.value)
+      return;
+
+    await goTo(wrapper.value);
+  }, 100);
+};
+
+watch(
+  imgContainerHeight,
+  () => {
+    if (props.open)
+      scrollTo();
+  },
+);
 </script>
 
 <style lang="scss">
 @import 'src/scss/variables';
 
-.drink-scale-wrapper {
+.drink-scale-wrapper__v2 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -411,11 +365,17 @@ export default defineComponent({
       }
 
       .v-slider {
-        height: 100%;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        height: var(--sliderHeight) !important;
 
-        .v-slider__track-container {
+        .v-input__prepend {
+          margin-block-start: 0;
+        }
+
+        .v-slider-track {
           cursor: pointer;
-          width: 10px;
+          width: 12px;
 
           .v-slider__track-background {
             transition: none !important;
@@ -429,12 +389,12 @@ export default defineComponent({
           }
         }
 
-        .v-slider__thumb-container {
+        .v-slider-thumb {
           cursor: pointer;
           // CSS transitions make the slider very laggy
           transition: none !important;
 
-          .v-slider__thumb {
+          .v-slider-thumb__surface {
             width: 30px;
             height: 14px;
             position: absolute;
@@ -463,8 +423,10 @@ export default defineComponent({
         }
       }
 
-      .v-slider--vertical {
-        min-height: unset;
+      .v-input--vertical {
+        .v-input__control {
+          min-height: unset;
+        }
       }
     }
 
diff --git a/apps/survey/src/components/prompts/partials/EditableFoodList.vue b/apps/survey/src/components/prompts/partials/EditableFoodList.vue
index 23e98cb5f3..57d5c55710 100644
--- a/apps/survey/src/components/prompts/partials/EditableFoodList.vue
+++ b/apps/survey/src/components/prompts/partials/EditableFoodList.vue
@@ -1,10 +1,10 @@
 <template>
   <v-card class="pb-4" flat tile>
-    <v-toolbar color="grey lighten-4" flat>
+    <v-toolbar color="grey-lighten-4" flat>
+      <v-icon end>
+        {{ mode === 'drinksOnly' ? '$drink' : '$food' }}
+      </v-icon>
       <v-toolbar-title>
-        <v-icon left>
-          {{ mode === 'drinksOnly' ? '$drink' : '$food' }}
-        </v-icon>
         {{ promptI18n.title }}
       </v-toolbar-title>
     </v-toolbar>
@@ -18,12 +18,12 @@
                 v-model.trim="newFood.description"
                 hide-details
                 :name="`${mode}-food`"
-                outlined
                 :placeholder="promptI18n.title"
-                @input="updateFood(foods.length, $event)"
+                variant="outlined"
                 @keydown.prevent.stop.enter="moveToList"
+                @update:model-value="updateFood(foods.length, $event)"
               >
-                <template v-if="$vuetify.breakpoint.xs" #append>
+                <template v-if="$vuetify.display.xs" #append>
                   <v-icon
                     class="px-2"
                     :disabled="!newFood.description.length"
@@ -35,60 +35,61 @@
                 </template>
               </v-text-field>
               <v-btn
-                v-if="$vuetify.breakpoint.smAndUp"
-                class="ml-2"
+                v-if="$vuetify.display.smAndUp"
+                class="ms-2"
                 color="primary"
                 :disabled="!newFood.description.length"
                 height="initial"
+                size="x-large"
                 :title="promptI18n.add"
-                x-large
                 @click="moveToList"
               >
-                <v-icon left>
+                <v-icon start>
                   fas fa-turn-down fa-rotate-90
                 </v-icon>
                 {{ promptI18n.add }}
               </v-btn>
             </div>
           </v-form>
-          <v-list v-if="foods.length">
+          <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 pl-0"
+              class="ps-0"
+              density="compact"
               :ripple="false"
               @click="editFood(idx)"
             >
-              <v-list-item-avatar class="my-auto mr-2">
-                <v-icon>fas fa-caret-right</v-icon>
-              </v-list-item-avatar>
+              <template #prepend>
+                <v-icon icon="fas fa-caret-right" />
+              </template>
               <v-text-field
                 v-if="food.type === 'free-text' && editIndex === idx"
                 class="v-input-basis-stretch"
-                :value="food.description"
+                hide-details
+                :model-value="food.description"
+                variant="underlined"
                 @focusout.stop="focusOut(idx)"
-                @input="updateFood(idx, $event)"
+                @update:model-value="updateFood(idx, $event)"
               />
               <v-list-item-title v-else>
                 {{ getFoodName(food) }}
               </v-list-item-title>
-              <v-list-item-icon class="my-auto">
+              <template #append>
                 <confirm-dialog
-                  :label="$t('recall.menu.food.delete').toString()"
+                  :label="$t('recall.menu.food.delete')"
                   @confirm="deleteFood(idx)"
                 >
-                  <template #activator="{ on, attrs }">
-                    <v-btn icon :title="$t('recall.menu.food.delete')" v-bind="attrs" v-on="on">
-                      <v-icon>$delete</v-icon>
-                    </v-btn>
+                  <template #activator="{ props: aProps }">
+                    <v-btn icon="$delete" :title="$t('recall.menu.food.delete')" v-bind="aProps" />
                   </template>
-                  <i18n path="recall.menu.food.deleteConfirm">
+                  <i18n-t keypath="recall.menu.food.deleteConfirm" tag="span">
                     <template #item>
                       <span class="font-weight-medium">{{ getFoodName(food) }}</span>
                     </template>
-                  </i18n>
+                  </i18n-t>
                 </confirm-dialog>
-              </v-list-item-icon>
+              </template>
             </v-list-item>
           </v-list>
         </v-col>
@@ -97,11 +98,11 @@
   </v-card>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import type { VTextField } from 'vuetify/lib';
+import type { VTextField } from 'vuetify/components';
 import { useDebounceFn } from '@vueuse/core';
-import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
 
 import type { Prompt } from '@intake24/common/prompts';
 import type { PromptSection } from '@intake24/common/surveys';
@@ -112,140 +113,121 @@ import { useFoodUtils, usePromptUtils } from '@intake24/survey/composables';
 import { getEntityId } from '@intake24/survey/util';
 import { ConfirmDialog } from '@intake24/ui';
 
-export default defineComponent({
-  name: 'EditableFoodList',
-
-  components: { ConfirmDialog },
+defineOptions({ name: 'EditableFoodList' });
 
-  props: {
-    focus: {
-      type: Boolean,
-      default: false,
-    },
-    mode: {
-      type: String as PropType<'foods' | 'foodsOnly' | 'drinksOnly'>,
-      default: 'foods',
-    },
-    prompt: {
-      type: Object as PropType<Prompt>,
-      required: true,
-    },
-    section: {
-      type: String as PropType<PromptSection>,
-      required: true,
-    },
-    value: {
-      type: Array as PropType<FoodState[]>,
-      required: true,
-    },
+const props = defineProps({
+  focus: {
+    type: Boolean,
+    default: false,
   },
+  mode: {
+    type: String as PropType<'foods' | 'foodsOnly' | 'drinksOnly'>,
+    default: 'foods',
+  },
+  prompt: {
+    type: Object as PropType<Prompt>,
+    required: true,
+  },
+  section: {
+    type: String as PropType<PromptSection>,
+    required: true,
+  },
+  modelValue: {
+    type: Array as PropType<FoodState[]>,
+    required: true,
+  },
+});
 
-  emits: ['input', 'delete'],
-
-  setup(props, ctx) {
-    const { getFoodName } = useFoodUtils();
-    const { i18n } = useI18n();
-    const { type } = usePromptUtils(props, ctx);
+const emit = defineEmits(['action', 'update:modelValue', 'delete']);
 
-    const promptI18n = computed(() => ({
-      title: i18n.t(`prompts.${type.value}.${props.mode}`),
-      add: i18n.t(`prompts.${type.value}.add`),
-    }));
+const { getFoodName } = useFoodUtils();
+const { i18n: { t } } = useI18n();
+const { type } = usePromptUtils(props, { emit });
 
-    const search = ref<InstanceType<typeof VTextField>>();
+const promptI18n = computed(() => ({
+  title: t(`prompts.${type.value}.${props.mode}`),
+  add: t(`prompts.${type.value}.add`),
+}));
 
-    const foods = ref(copy(props.value));
+const search = ref<InstanceType<typeof VTextField>>();
 
-    const createFood = (): FreeTextFood => ({
-      id: getEntityId(),
-      type: 'free-text',
-      description: '',
-      flags: props.mode === 'drinksOnly' ? ['is-drink'] : [],
-      customPromptAnswers: {},
-      linkedFoods: [],
-    });
+const foods = ref(copy(props.modelValue));
 
-    const newFood = ref(createFood());
+function createFood(): FreeTextFood {
+  return {
+    id: getEntityId(),
+    type: 'free-text',
+    description: '',
+    flags: props.mode === 'drinksOnly' ? ['is-drink'] : [],
+    customPromptAnswers: {},
+    linkedFoods: [],
+  };
+}
 
-    const editIndex = ref<number | null>(null);
+const newFood = ref(createFood());
 
-    const updateFoods = () => {
-      ctx.emit(
-        'input',
-        newFood.value.description.length ? [...foods.value, newFood.value] : foods.value,
-      );
-    };
+const editIndex = ref<number | null>(null);
 
-    const debouncedUpdateFoods = useDebounceFn(
-      () => {
-        updateFoods();
-      },
-      500,
-      { maxWait: 1000 },
-    );
+function updateFoods() {
+  emit(
+    'update:modelValue',
+    newFood.value.description.length ? [...foods.value, newFood.value] : foods.value,
+  );
+}
 
-    const editFood = (index: number) => {
-      editIndex.value = index;
-    };
+const debouncedUpdateFoods = useDebounceFn(
+  () => {
+    updateFoods();
+  },
+  500,
+  { maxWait: 1000 },
+);
 
-    const updateFood = (index: number, description: string) => {
-      const food = index === foods.value.length ? newFood.value : foods.value[index];
-      if (food.type !== 'free-text')
-        return;
+function editFood(index: number) {
+  editIndex.value = index;
+}
 
-      food.description = description;
-      debouncedUpdateFoods();
-    };
+function updateFood(index: number, description: string) {
+  const food = index === foods.value.length ? newFood.value : foods.value[index];
+  if (food.type !== 'free-text')
+    return;
 
-    const moveToList = () => {
-      if (!newFood.value.description.length)
-        return;
+  food.description = description;
+  debouncedUpdateFoods();
+}
 
-      foods.value.push(newFood.value);
-      editFood(foods.value.length - 1);
-      newFood.value = createFood();
-      updateFoods();
-    };
+function moveToList() {
+  if (!newFood.value.description.length)
+    return;
 
-    const deleteFood = (index: number) => {
-      if (editIndex.value === index)
-        editIndex.value = null;
+  foods.value.push(newFood.value);
+  editFood(foods.value.length - 1);
+  newFood.value = createFood();
+  updateFoods();
+}
 
-      const [food] = foods.value.splice(index, 1);
-      updateFoods();
-      ctx.emit('delete', food.id);
-    };
+function deleteFood(index: number) {
+  if (editIndex.value === index)
+    editIndex.value = null;
 
-    const focusOut = (index: number) => {
-      const editEntry = foods.value[index];
+  const [food] = foods.value.splice(index, 1);
+  updateFoods();
+  emit('delete', food.id);
+}
 
-      if (editEntry.type === 'free-text' && !editEntry.description.trim().length)
-        deleteFood(index);
-    };
+function focusOut(index: number) {
+  const editEntry = foods.value[index];
 
-    onMounted(async () => {
-      if (!props.focus || !search.value)
-        return;
+  if (editEntry.type === 'free-text' && !editEntry.description.trim().length)
+    deleteFood(index);
+}
 
-      await nextTick();
-      // @ts-expect-error - vuetify types
-      search.value.focus();
-    });
+onMounted(async () => {
+  if (!props.focus || !search.value)
+    return;
 
-    return {
-      editIndex,
-      foods,
-      promptI18n,
-      newFood,
-      moveToList,
-      deleteFood,
-      editFood,
-      updateFood,
-      getFoodName,
-      focusOut,
-      search,
-    };
-  },
+  await nextTick();
+  search.value.focus();
 });
 </script>
 
diff --git a/apps/survey/src/components/prompts/partials/ImageMapSelector.vue b/apps/survey/src/components/prompts/partials/ImageMapSelector.vue
index 961ff442b9..926b810160 100644
--- a/apps/survey/src/components/prompts/partials/ImageMapSelector.vue
+++ b/apps/survey/src/components/prompts/partials/ImageMapSelector.vue
@@ -9,7 +9,7 @@
         </v-img>
         <div class="pinch-zoom-activator">
           <pinch-zoom-image-map-selector
-            v-if="config.pinchZoom && isMobile"
+            v-if="config.pinchZoom && $vuetify.display.mobile"
             v-bind="{
               id,
               index,
@@ -21,16 +21,14 @@
             @confirm="confirm"
             @select="select"
           >
-            <template #activator="{ on, attrs }">
+            <template #activator="{ props }">
               <v-btn
                 class="ma-1 font-weight-medium"
-                color="grey darken-3"
-                dark
+                color="grey-darken-3"
                 icon
-                link
                 :title="$t(`prompts.guideImage.expand`)"
-                v-bind="attrs"
-                v-on="on"
+                variant="text"
+                v-bind="props"
               >
                 <v-icon aria-hidden="false" :aria-label="$t(`prompts.guideImage.expand`)">
                   $expandImage
@@ -43,7 +41,7 @@
           <slot name="label" />
           <v-chip
             v-if="label"
-            class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold secondary--text border-secondary-1"
+            class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold text-secondary border-secondary-1"
           >
             {{ label }}
           </v-chip>
@@ -66,19 +64,20 @@
         </svg>
       </div>
     </v-col>
-    <v-col v-if="isMobile" cols="12" sm="auto">
-      <v-btn :block="isMobile" color="primary" :disabled="isDisabled" @click="confirm">
+    <v-col v-if="$vuetify.display.mobile" cols="12" sm="auto">
+      <v-btn :block="$vuetify.display.mobile" color="primary" :disabled="isDisabled" @click="confirm">
         {{ $t('common.action.continue') }}
       </v-btn>
     </v-col>
   </v-row>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import type { VImg } from 'vuetify/lib';
+import type { VImg } from 'vuetify/components';
 import { useElementSize } from '@vueuse/core';
-import { computed, defineComponent, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+import { useDisplay } from 'vuetify';
 
 import type { ImageMap } from '@intake24/common/prompts';
 import type { ImageMapResponse } from '@intake24/common/types/http';
@@ -87,95 +86,70 @@ import { ImagePlaceholder } from '@intake24/survey/components/elements';
 import PinchZoomImageMapSelector from './PinchZoomImageMapSelector.vue';
 import { useImageMap } from './use-image-map';
 
-export type ImageMapObject = {
-  id: string;
-  polygon: string;
-};
+defineOptions({ name: 'ImageMapSelector' });
 
-export default defineComponent({
-  name: 'ImageMapSelector',
-
-  components: { PinchZoomImageMapSelector, ImagePlaceholder },
-
-  props: {
-    config: {
-      type: Object as PropType<ImageMap>,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: undefined,
-    },
-    id: {
-      type: String,
-    },
-    index: {
-      type: Number,
-    },
-    imageMapData: {
-      type: Object as PropType<ImageMapResponse>,
-      required: true,
-    },
-    labels: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
+const props = defineProps({
+  config: {
+    type: Object as PropType<ImageMap>,
+    required: true,
   },
-
-  emits: ['confirm', 'select'],
-
-  setup(props, { emit }) {
-    const img = ref<InstanceType<typeof VImg>>();
-    const svg = ref<SVGElement>();
-
-    // @ts-expect-error should allow vue instance?
-    const { height, width } = useElementSize(img);
-
-    const screenHeight = ref(0);
-    const screenWidth = ref(0);
-
-    const { hoverIndex, label, objects } = useImageMap(props, width);
-
-    const isDisabled = computed(() =>
-      typeof props.disabled === 'undefined' ? props.index === undefined : props.disabled,
-    );
-
-    const getScreenDimensions = () => {
-      screenHeight.value = window.screen.height;
-      screenWidth.value = window.screen.width;
-    };
-
-    const confirm = () => {
-      emit('confirm');
-    };
-
-    onMounted(() => {
-      getScreenDimensions();
-    });
-
-    return {
-      height,
-      width,
-      confirm,
-      img,
-      isDisabled,
-      svg,
-      hoverIndex,
-      label,
-      objects,
-      screenHeight,
-      screenWidth,
-    };
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  id: {
+    type: String,
+  },
+  index: {
+    type: Number,
+  },
+  imageMapData: {
+    type: Object as PropType<ImageMapResponse>,
+    required: true,
+  },
+  labels: {
+    type: Array as PropType<string[]>,
+    default: () => [],
   },
+});
 
-  methods: {
-    select(idx: number, id: string) {
-      this.$emit('select', idx, id);
+const emit = defineEmits(['confirm', 'select']);
 
-      if (!this.isMobile)
-        this.confirm();
-    },
-  },
+const img = ref<InstanceType<typeof VImg>>();
+const svg = ref<SVGElement>();
+
+const display = useDisplay();
+
+// @ts-expect-error should allow vue instance?
+const { width } = useElementSize(img);
+
+const screenHeight = ref(0);
+const screenWidth = ref(0);
+
+const { hoverIndex, label, objects } = useImageMap(props, width);
+
+const isDisabled = computed(() =>
+  typeof props.disabled === 'undefined' ? props.index === undefined : props.disabled,
+);
+
+function getScreenDimensions() {
+  screenHeight.value = window.screen.height;
+  screenWidth.value = window.screen.width;
+}
+
+function confirm() {
+  emit('confirm');
+}
+
+function select(idx: number, id: string) {
+  emit('select', idx, id);
+
+  if (!display.mobile.value)
+    confirm();
+};
+
+onMounted(() => {
+  getScreenDimensions();
 });
 </script>
 
diff --git a/apps/survey/src/components/prompts/partials/LinkedQuantity.vue b/apps/survey/src/components/prompts/partials/LinkedQuantity.vue
index e118735ce8..6733ee7fb5 100644
--- a/apps/survey/src/components/prompts/partials/LinkedQuantity.vue
+++ b/apps/survey/src/components/prompts/partials/LinkedQuantity.vue
@@ -1,7 +1,7 @@
 <template>
   <v-expansion-panel v-bind="$attrs">
-    <v-expansion-panel-header>
-      <i18n path="prompts.linkedAmount.label">
+    <v-expansion-panel-title>
+      <i18n-t keypath="prompts.linkedAmount.label" tag="span">
         <template #unit>
           {{ linkedQuantityUnit }}
         </template>
@@ -11,21 +11,21 @@
         <template #quantity>
           <span class="font-weight-medium">{{ parentQuantity }}</span>
         </template>
-      </i18n>
+      </i18n-t>
       <template #actions>
         <expansion-panel-actions :valid="confirmed" />
       </template>
-    </v-expansion-panel-header>
-    <v-expansion-panel-content>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
       <quantity-card
         :confirmed="confirmed"
         :max="parentQuantity"
+        :model-value="modelValue"
         :show-all="!!linkedParent.categories.length"
-        :value="value"
-        @input="updateQuantity"
         @update:confirmed="updateConfirmed"
+        @update:model-value="updateQuantity"
       />
-    </v-expansion-panel-content>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
@@ -70,23 +70,23 @@ export default defineComponent({
       type: Object as PropType<Prompt>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Number,
       required: true,
     },
   },
 
-  emits: ['input', 'update:confirmed'],
+  emits: ['update:modelValue', 'update:confirmed'],
 
   setup(props, { emit }) {
     const { foodName } = useFoodUtils(props);
-    const { i18n, translate } = useI18n();
+    const { i18n: { t }, translate } = useI18n();
     const { standardUnitRefs, resolveStandardUnits } = useStandardUnits();
 
     const linkedQuantityUnit = computed(() => {
       const unit = props.linkedParent.categories[0]?.unit;
       if (!unit || !standardUnitRefs.value[unit])
-        return i18n.t('prompts.linkedAmount.unit');
+        return t('prompts.linkedAmount.unit');
 
       return translate(standardUnitRefs.value[unit].howMany, {
         path: 'prompts.linkedAmount.unit',
@@ -100,7 +100,7 @@ export default defineComponent({
     );
 
     const updateQuantity = (value: number) => {
-      emit('input', value);
+      emit('update:modelValue', value);
     };
 
     const updateConfirmed = (value: boolean) => {
diff --git a/apps/survey/src/components/prompts/partials/MealFoodChooser.vue b/apps/survey/src/components/prompts/partials/MealFoodChooser.vue
index 36e9d28c65..3544e66006 100644
--- a/apps/survey/src/components/prompts/partials/MealFoodChooser.vue
+++ b/apps/survey/src/components/prompts/partials/MealFoodChooser.vue
@@ -1,14 +1,10 @@
 <template>
-  <div>
-    <v-list-item v-for="food in filteredFoods" :key="food.id" @click="foodSelected(food)">
-      <v-list-item-icon>
-        <v-icon>$food</v-icon>
-      </v-list-item-icon>
-      <v-list-item-content>
-        <v-list-item-title>{{ getFoodDescription(food) }} </v-list-item-title>
-      </v-list-item-content>
-    </v-list-item>
-  </div>
+  <v-list-item v-for="food in filteredFoods" :key="food.id" @click="foodSelected(food)">
+    <template #prepend>
+      <v-icon>$food</v-icon>
+    </template>
+    <v-list-item-title>{{ getFoodDescription(food) }} </v-list-item-title>
+  </v-list-item>
 </template>
 
 <script lang="ts">
diff --git a/apps/survey/src/components/prompts/partials/PinchZoomImageMapSelector.vue b/apps/survey/src/components/prompts/partials/PinchZoomImageMapSelector.vue
index 55e8be176f..fa434e4e9b 100644
--- a/apps/survey/src/components/prompts/partials/PinchZoomImageMapSelector.vue
+++ b/apps/survey/src/components/prompts/partials/PinchZoomImageMapSelector.vue
@@ -1,7 +1,7 @@
 <template>
   <v-bottom-sheet v-model="dialog" persistent>
-    <template #activator="{ on, attrs }">
-      <slot name="activator" v-bind="{ on, attrs }" />
+    <template #activator="{ props }">
+      <slot name="activator" v-bind="{ props }" />
     </template>
     <v-sheet class="text-center pa-3">
       <v-row dense no-gutter>
@@ -16,7 +16,7 @@
           >
             <div v-if="label" class="label">
               <v-chip
-                class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold secondary--text border-secondary-1"
+                class="ma-1 ma-md-2 pa-3 pa-md-4 text-h6 font-weight-bold text-secondary border-secondary-1"
               >
                 {{ label }}
               </v-chip>
@@ -36,12 +36,12 @@
           </pinch-scroll-zoom>
         </v-col>
         <v-col cols="12">
-          <v-btn :block="isMobile" color="primary" @click="confirm">
+          <v-btn :block="$vuetify.display.mobile" color="primary" @click="confirm">
             {{ $t('common.action.continue') }}
           </v-btn>
         </v-col>
         <v-col cols="12">
-          <v-btn :block="isMobile" color="primary" text @click="resetScale">
+          <v-btn :block="$vuetify.display.mobile" color="primary" variant="text" @click="resetScale">
             {{ $t('common.action.reset') }}
           </v-btn>
         </v-col>
@@ -59,11 +59,6 @@ import type { ImageMapResponse } from '@intake24/common/types/http';
 
 import { useImageMap } from './use-image-map';
 
-export type ImageMapObject = {
-  id: string;
-  polygon: string;
-};
-
 export default defineComponent({
   name: 'PinchZoomImageMapSelector',
 
diff --git a/apps/survey/src/components/prompts/partials/QuantityBadge.vue b/apps/survey/src/components/prompts/partials/QuantityBadge.vue
index 6685a1f988..b3250d318a 100644
--- a/apps/survey/src/components/prompts/partials/QuantityBadge.vue
+++ b/apps/survey/src/components/prompts/partials/QuantityBadge.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chip v-if="amount" class="font-weight-medium" :color="color" link small>
+  <v-chip v-if="amount" class="font-weight-medium" :color="color" link size="small">
     {{ amountWithUnit }}
   </v-chip>
 </template>
diff --git a/apps/survey/src/components/prompts/partials/QuantityCard.vue b/apps/survey/src/components/prompts/partials/QuantityCard.vue
index c7fdae5a49..a81e4a5536 100644
--- a/apps/survey/src/components/prompts/partials/QuantityCard.vue
+++ b/apps/survey/src/components/prompts/partials/QuantityCard.vue
@@ -14,8 +14,8 @@
                 color="secondary"
                 :disabled="maxDisabled"
                 icon
+                size="x-large"
                 :title="$t('prompts.quantity.more')"
-                x-large
                 @click="update(1)"
               >
                 <v-icon aria-hidden="false">
@@ -27,8 +27,8 @@
                 color="secondary"
                 :disabled="minDisabled"
                 icon
+                size="x-large"
                 :title="$t('prompts.quantity.less')"
-                x-large
                 @click="update(-1)"
               >
                 <v-icon aria-hidden="false">
@@ -46,8 +46,8 @@
                 color="secondary"
                 :disabled="maxDisabled"
                 icon
+                size="x-large"
                 :title="$t('prompts.quantity.more')"
-                x-large
                 @click="update(0.25)"
               >
                 <v-icon aria-hidden="false">
@@ -59,8 +59,8 @@
                 color="secondary"
                 :disabled="minDisabled"
                 icon
+                size="x-large"
                 :title="$t('prompts.quantity.less')"
-                x-large
                 @click="update(-0.25)"
               >
                 <v-icon aria-hidden="false">
@@ -111,7 +111,7 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    value: {
+    modelValue: {
       type: Number,
       default: 1,
     },
@@ -129,11 +129,11 @@ export default defineComponent({
     },
   },
 
-  emits: ['input', 'update:confirmed'],
+  emits: ['update:modelValue', 'update:confirmed'],
 
   data() {
     return {
-      currentValue: Math.min(this.max, Math.max(this.min, this.value)),
+      currentValue: Math.min(this.max, Math.max(this.min, this.modelValue)),
     };
   },
 
@@ -195,7 +195,7 @@ export default defineComponent({
     },
 
     updateValue() {
-      this.$emit('input', this.currentValue);
+      this.$emit('update:modelValue', this.currentValue);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/partials/QuantitySlider.vue b/apps/survey/src/components/prompts/partials/QuantitySlider.vue
index b2a41fdfbb..8ffbabfd3e 100644
--- a/apps/survey/src/components/prompts/partials/QuantitySlider.vue
+++ b/apps/survey/src/components/prompts/partials/QuantitySlider.vue
@@ -5,26 +5,27 @@
       color="secondary"
       hide-details
       :label="$t('prompts.quantity._')"
-      :max="max.value"
-      :min="min.value"
+      :max="max.value ?? undefined"
+      :min="min.value ?? undefined"
+      :model-value="modelValue"
       :step="step"
-      :style="{ 'padding-top': `${current.size + 10}px` }"
       :thumb-label="current ? `always` : false"
-      :thumb-size="current.size"
-      :value="value"
-      @input="updateValue($event)"
+      :thumb-size="25"
+      track-color="primary"
+      track-size="12"
+      @update:model-value="updateValue($event)"
     >
       <template #prepend>
-        <v-icon color="secondary" large :title="$t('prompts.quantity.less')" @click="decrement">
+        <v-icon color="secondary" size="large" :title="$t('prompts.quantity.less')" @click="decrement">
           fas fa-circle-minus
         </v-icon>
       </template>
       <template #append>
-        <v-icon color="secondary" large :title="$t('prompts.quantity.more')" @click="increment">
+        <v-icon color="secondary" size="large" :title="$t('prompts.quantity.more')" @click="increment">
           fas fa-circle-plus
         </v-icon>
       </template>
-      <template #thumb-label="{ value: thumbValue }">
+      <template #thumb-label="{ modelValue: thumbValue }">
         <div class="d-flex flex-column align-center">
           <span class="text-h5 font-weight-bold">{{ thumbValue }}</span>
         </div>
@@ -32,7 +33,7 @@
     </v-slider>
     <v-row v-if="confirm">
       <v-col cols="12" sm="auto">
-        <v-btn :block="isMobile" color="primary" @click="updateConfirmed(true)">
+        <v-btn :block="$vuetify.display.mobile" color="primary" @click="updateConfirmed(true)">
           {{ $t('common.action.continue') }}
         </v-btn>
       </v-col>
@@ -74,13 +75,13 @@ export default defineComponent({
       type: Number as PropType<Slider['step']>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Number,
       default: 1,
     },
   },
 
-  emits: ['input', 'update:confirmed'],
+  emits: ['update:modelValue', 'update:confirmed'],
 
   setup(props, { emit }) {
     const updateConfirmed = (value: boolean) => {
@@ -88,18 +89,18 @@ export default defineComponent({
     };
 
     const updateValue = (value: number) => {
-      emit('input', value);
+      emit('update:modelValue', value);
 
       if (props.confirmed)
         updateConfirmed(false);
     };
 
     const decrement = () => {
-      updateValue(props.value - props.step);
+      updateValue(props.modelValue - props.step);
     };
 
     const increment = () => {
-      updateValue(props.value + props.step);
+      updateValue(props.modelValue + props.step);
     };
 
     return {
diff --git a/apps/survey/src/components/prompts/partials/use-date-picker.ts b/apps/survey/src/components/prompts/partials/use-date-picker.ts
index 21cfb16b16..1cadc352ee 100644
--- a/apps/survey/src/components/prompts/partials/use-date-picker.ts
+++ b/apps/survey/src/components/prompts/partials/use-date-picker.ts
@@ -1,31 +1,34 @@
 import { addDays } from 'date-fns';
 import { computed, type SetupContext } from 'vue';
+import { useDate } from 'vuetify';
 
 import type { Prompts } from '@intake24/common/prompts';
 
 export type DatePickerProps = {
   prompt: Prompts['recall-date-prompt'] | Prompts['date-picker-prompt'];
-  value: string | null;
+  modelValue: string | null;
 };
 
-export function useDatePicker(props: DatePickerProps, ctx: SetupContext<'input'[]>) {
+export function useDatePicker(props: DatePickerProps, ctx: SetupContext<'update:modelValue'[]>) {
+  const adapter = useDate();
+
   const datePickerProps = computed(() => {
     const { current, max, min } = props.prompt;
-    const today = new Date();
+    const today = adapter.parseISO(new Date().toISOString().substring(0, 10)) as Date;
 
     return {
-      max: typeof max === 'number' ? addDays(today, max).toISOString().substring(0, 10) : undefined,
-      min: typeof min === 'number' ? addDays(today, min).toISOString().substring(0, 10) : undefined,
-      showCurrent: typeof current === 'number' ? addDays(today, current).toISOString().substring(0, 10) : true,
+      max: typeof max === 'number' ? addDays(today, max) : undefined,
+      min: typeof min === 'number' ? addDays(today, min) : undefined,
+      showCurrent: typeof current === 'number' ? addDays(today, current) : true,
     };
   });
 
   const state = computed({
     get() {
-      return props.value;
+      return props.modelValue ? adapter.parseISO(new Date(props.modelValue).toISOString().substring(0, 10)) : null;
     },
     set(value) {
-      ctx.emit('input', value);
+      ctx.emit('update:modelValue', value ? adapter.toISO(value).substring(0, 10) : null);
     },
   });
 
diff --git a/apps/survey/src/components/prompts/partials/use-standard-units.ts b/apps/survey/src/components/prompts/partials/use-standard-units.ts
index 8ae5e6fc7c..a6e5e6f13f 100644
--- a/apps/survey/src/components/prompts/partials/use-standard-units.ts
+++ b/apps/survey/src/components/prompts/partials/use-standard-units.ts
@@ -12,8 +12,8 @@ export type StandardUnitRefs = Record<
 >;
 
 export function useStandardUnits() {
-  const { translate } = useI18n();
   const http = useHttp();
+  const { translate } = useI18n();
 
   const standardUnitRefs = ref<StandardUnitRefs>({});
   const usingStandardTranslations = ref(true);
diff --git a/apps/survey/src/components/prompts/portion/AsServedPrompt.vue b/apps/survey/src/components/prompts/portion/AsServedPrompt.vue
index 324b17a6a5..860b987151 100644
--- a/apps/survey/src/components/prompts/portion/AsServedPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/AsServedPrompt.vue
@@ -1,13 +1,13 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.serving.header`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.serving.header`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="servingImageConfirmed">
               <quantity-badge
@@ -17,26 +17,26 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <as-served-selector
             v-model="portionSize.serving"
             :as-served-set-id="parameters.servingImageSet"
             @confirm="confirmServing"
-            @input="updateServing"
+            @update:model-value="updateServing"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel
         v-if="leftoversEnabled && parameters.leftoversImageSet"
         :disabled="!servingImageConfirmed"
       >
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.leftovers.header`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.leftovers.header`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="leftoversPrompt === false || leftoversImageConfirmed">
               <quantity-badge
@@ -46,25 +46,25 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <yes-no-toggle v-model="leftoversPrompt" class="mb-4" mandatory />
           <template v-if="leftoversPrompt">
-            <i18n class="mb-4" :path="`prompts.${type}.leftovers.label`" tag="div">
+            <i18n-t class="mb-4" :keypath="`prompts.${type}.leftovers.label`" tag="div">
               <template #food>
                 <span class="font-weight-medium">{{ foodName }}</span>
               </template>
-            </i18n>
+            </i18n-t>
             <as-served-selector
               v-model="portionSize.leftovers"
               :as-served-set-id="parameters.leftoversImageSet"
               :max-weight="portionSize.serving?.weight"
               type="leftovers"
               @confirm="confirmLeftovers"
-              @input="updateLeftovers"
+              @update:model-value="updateLeftovers"
             />
           </template>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <linked-quantity
         v-if="linkedParent && !linkedParent.auto"
@@ -75,9 +75,9 @@
           prompt,
         }"
         v-model="portionSize.linkedQuantity"
-        :confirmed.sync="linkedQuantityConfirmed"
-        @input="selectLinkedQuantity"
+        v-model:confirmed="linkedQuantityConfirmed"
         @update:confirmed="confirmLinkedQuantity"
+        @update:model-value="selectLinkedQuantity"
       />
     </v-expansion-panels>
     <template #actions>
@@ -96,7 +96,6 @@ import { defineComponent } from 'vue';
 import type { PromptStates } from '@intake24/common/prompts';
 import type { PortionSizeParameters } from '@intake24/common/surveys';
 import { copy } from '@intake24/common/util';
-import { useI18n } from '@intake24/i18n';
 import { YesNoToggle } from '@intake24/survey/components/elements';
 import { useFoodUtils } from '@intake24/survey/composables';
 
@@ -121,21 +120,19 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props) {
-    const { translate } = useI18n();
     const { foodName } = useFoodUtils(props);
 
     return {
       foodName,
-      translate,
     };
   },
 
   data() {
     return {
-      ...copy(this.value),
+      ...copy(this.modelValue),
     };
   },
 
@@ -236,7 +233,7 @@ export default defineComponent({
         linkedQuantityConfirmed: this.linkedQuantityConfirmed,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/CerealPrompt.vue b/apps/survey/src/components/prompts/portion/CerealPrompt.vue
index 61ed30e822..bdc2d1fc56 100644
--- a/apps/survey/src/components/prompts/portion/CerealPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/CerealPrompt.vue
@@ -1,18 +1,18 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.container`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.container`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="bowlValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <image-map-selector
             v-if="bowlImageMap"
             v-bind="{
@@ -24,15 +24,15 @@
             @confirm="confirmBowl"
             @select="selectBowl"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!bowlValid">
-        <v-expansion-panel-header>
-          <i18n path="prompts.asServed.serving.header">
+        <v-expansion-panel-title>
+          <i18n-t keypath="prompts.asServed.serving.header" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="servingImageConfirmed">
               <quantity-badge
@@ -42,24 +42,24 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <as-served-selector
             v-if="servingImageSet"
             v-model="portionSize.serving"
             :as-served-set-id="servingImageSet"
             @confirm="confirmServing"
-            @input="updateServing"
+            @update:model-value="updateServing"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel v-if="leftoversEnabled" :disabled="!servingImageConfirmed">
-        <v-expansion-panel-header>
-          <i18n path="prompts.asServed.leftovers.header">
+        <v-expansion-panel-title>
+          <i18n-t keypath="prompts.asServed.leftovers.header" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="leftoversPrompt === false || leftoversImageConfirmed">
               <quantity-badge
@@ -69,15 +69,15 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <yes-no-toggle v-model="leftoversPrompt" class="mb-4" mandatory />
           <template v-if="leftoversPrompt">
-            <i18n class="mb-4" path="prompts.asServed.leftovers.label" tag="div">
+            <i18n-t class="mb-4" keypath="prompts.asServed.leftovers.label" tag="div">
               <template #food>
                 <span class="font-weight-medium">{{ foodName }}</span>
               </template>
-            </i18n>
+            </i18n-t>
             <as-served-selector
               v-if="leftoverImageSet"
               v-model="portionSize.leftovers"
@@ -85,10 +85,10 @@
               :max-weight="portionSize.serving?.weight"
               type="leftovers"
               @confirm="confirmLeftovers"
-              @input="updateLeftovers"
+              @update:model-value="updateLeftovers"
             />
           </template>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <template #actions>
@@ -131,7 +131,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   data() {
     const bowls = ['A', 'B', 'C', 'D', 'E', 'F'];
@@ -141,7 +141,7 @@ export default defineComponent({
 
       bowlImageMap: null as ImageMapResponse | null,
 
-      ...copy(this.value),
+      ...copy(this.modelValue),
     };
   },
 
@@ -281,7 +281,7 @@ export default defineComponent({
         leftoversPrompt: this.leftoversPrompt,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/DirectWeightPrompt.vue b/apps/survey/src/components/prompts/portion/DirectWeightPrompt.vue
index 5ee61912ff..213e0554ab 100644
--- a/apps/survey/src/components/prompts/portion/DirectWeightPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/DirectWeightPrompt.vue
@@ -8,10 +8,10 @@
             hide-details="auto"
             :label="$t('prompts.quantity._')"
             name="quantity"
-            outlined
             prepend-inner-icon="fas fa-weight-scale"
             :rules="rules"
-            @input="update"
+            variant="outlined"
+            @update:model-value="update"
           />
         </v-col>
       </v-row>
@@ -56,7 +56,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props) {
     const validateInput = (value: any) => isNumber(value) && value > 0 && value < props.max;
@@ -66,7 +66,7 @@ export default defineComponent({
 
   data() {
     return {
-      ...copy(this.value),
+      ...copy(this.modelValue),
     };
   },
 
@@ -97,7 +97,7 @@ export default defineComponent({
         portionSize: this.portionSize,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/DrinkScalePrompt.vue b/apps/survey/src/components/prompts/portion/DrinkScalePrompt.vue
index a88d1efd47..25191f8365 100644
--- a/apps/survey/src/components/prompts/portion/DrinkScalePrompt.vue
+++ b/apps/survey/src/components/prompts/portion/DrinkScalePrompt.vue
@@ -1,18 +1,18 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.container`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.container`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="objectValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <image-map-selector
             v-if="imageMapData"
             v-bind="{
@@ -25,15 +25,15 @@
             @confirm="confirmObject"
             @select="selectObject"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!objectValid">
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.serving.header`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.serving.header`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="quantityConfirmed">
               <quantity-badge
@@ -48,8 +48,8 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <component
             :is="scale.version === 1 ? 'drink-scale-panel' : 'drink-scale-v2-panel'"
             v-if="scale"
@@ -57,17 +57,17 @@
             :open="panel === 1"
             :scale="scale"
             @confirm="confirmQuantity"
-            @input="updateQuantity"
+            @update:model-value="updateQuantity"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel v-if="leftoversEnabled" :disabled="!quantityConfirmed">
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.leftovers.header`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.leftovers.header`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="leftoversPrompt === false || leftoversConfirmed">
               <quantity-badge
@@ -82,15 +82,15 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <yes-no-toggle v-model="leftoversPrompt" class="mb-4" mandatory />
           <template v-if="leftoversPrompt">
-            <i18n class="mb-4" :path="`prompts.${type}.leftovers.label`" tag="div">
+            <i18n-t class="mb-4" :keypath="`prompts.${type}.leftovers.label`" tag="div">
               <template #food>
                 <span class="font-weight-medium">{{ foodName }}</span>
               </template>
-            </i18n>
+            </i18n-t>
             <component
               :is="scale.version === 1 ? 'drink-scale-panel' : 'drink-scale-v2-panel'"
               v-if="scale"
@@ -100,18 +100,18 @@
               :scale="scale"
               type="leftovers"
               @confirm="confirmLeftovers"
-              @input="updateLeftovers"
+              @update:model-value="updateLeftovers"
             />
           </template>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel v-if="multipleEnabled" :disabled="!quantityConfirmed">
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.count`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.count`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="countConfirmed">
               <quantity-badge
@@ -122,18 +122,18 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <component
             :is="prompt.multiple.type"
             v-if="prompt.multiple"
             v-model="portionSize.count"
-            :confirmed.sync="countConfirmed"
+            v-model:confirmed="countConfirmed"
             v-bind="multipleProps"
-            @input="updateCount"
             @update:confirmed="confirmCount"
+            @update:model-value="updateCount"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <template #actions>
@@ -211,10 +211,10 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   data() {
-    const state = copy(this.value);
+    const state = copy(this.modelValue);
     state.portionSize.drinkwareId = this.parameters.drinkwareId;
     state.portionSize.initialFillLevel = this.parameters.initialFillLevel;
     state.portionSize.skipFillLevel = this.parameters.skipFillLevel;
@@ -456,7 +456,7 @@ export default defineComponent({
         countConfirmed: this.countConfirmed,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/GuideImagePrompt.vue b/apps/survey/src/components/prompts/portion/GuideImagePrompt.vue
index 59aa4754a9..ad6bf32754 100644
--- a/apps/survey/src/components/prompts/portion/GuideImagePrompt.vue
+++ b/apps/survey/src/components/prompts/portion/GuideImagePrompt.vue
@@ -1,18 +1,18 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.label`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.label`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="objectValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <image-map-selector
             v-if="guideImageData"
             v-bind="{
@@ -25,15 +25,15 @@
             @confirm="confirmObject"
             @select="selectObject"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!objectValid">
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.quantity`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.quantity`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ selectedFoodLabel }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="quantityValid">
               <quantity-badge
@@ -44,23 +44,23 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <quantity-card
             v-model="portionSize.quantity"
-            :confirmed.sync="quantityConfirmed"
-            @input="selectQuantity"
+            v-model:confirmed="quantityConfirmed"
             @update:confirmed="confirmQuantity"
+            @update:model-value="selectQuantity"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <linked-quantity
         v-if="linkedParent && !linkedParent.auto"
         v-bind="{ disabled: !quantityValid, food, linkedParent, prompt }"
         v-model="portionSize.linkedQuantity"
-        :confirmed.sync="linkedQuantityConfirmed"
-        @input="selectLinkedQuantity"
+        v-model:confirmed="linkedQuantityConfirmed"
         @update:confirmed="confirmLinkedQuantity"
+        @update:model-value="selectLinkedQuantity"
       />
     </v-expansion-panels>
     <template #actions>
@@ -80,7 +80,6 @@ import type { PromptStates } from '@intake24/common/prompts';
 import type { PortionSizeParameters } from '@intake24/common/surveys';
 import type { GuideImageResponse } from '@intake24/common/types/http/foods';
 import { copy } from '@intake24/common/util';
-import { useI18n } from '@intake24/i18n';
 import { useFoodUtils } from '@intake24/survey/composables';
 
 import type { LinkedParent } from '../partials';
@@ -108,20 +107,18 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props) {
-    const { translate } = useI18n();
     const { foodName } = useFoodUtils(props);
 
     return {
       foodName,
-      translate,
     };
   },
 
   data() {
-    const state = copy(this.value);
+    const state = copy(this.modelValue);
     state.portionSize.guideImageId = this.parameters.guideImageId;
 
     return {
@@ -245,7 +242,7 @@ export default defineComponent({
         linkedQuantityConfirmed: this.linkedQuantityConfirmed,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/MilkInAHotDrinkPrompt.vue b/apps/survey/src/components/prompts/portion/MilkInAHotDrinkPrompt.vue
index badab9469f..6c1861280e 100644
--- a/apps/survey/src/components/prompts/portion/MilkInAHotDrinkPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/MilkInAHotDrinkPrompt.vue
@@ -1,28 +1,27 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.label`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.label`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
             <template #parentFood>
               <span class="font-weight-medium">{{ parentFoodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="!!portionSize.milkVolumePercentage" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <v-radio-group
             v-model="portionSize.milkVolumePercentage"
-            :column="prompt.orientation === 'column'"
             :error="hasErrors"
             hide-details="auto"
-            :row="prompt.orientation === 'row'"
-            @change="clearErrors"
+            :inline="prompt.orientation === 'row'"
+            @update:model-value="clearErrors"
           >
             <v-radio v-for="option in localeOptions" :key="option.value" :value="option.value">
               <template #label>
@@ -39,7 +38,7 @@
             </v-radio>
           </v-radio-group>
           <v-messages v-show="hasErrors" v-model="errors" class="mt-3" color="error" />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <template #actions>
@@ -82,7 +81,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props) {
     const { foodName, parentFoodName } = useFoodUtils(props);
@@ -92,7 +91,7 @@ export default defineComponent({
 
   data() {
     return {
-      ...copy(this.value),
+      ...copy(this.modelValue),
     };
   },
 
@@ -138,7 +137,7 @@ export default defineComponent({
 
       const state: PromptStates['milk-in-a-hot-drink-prompt'] = { portionSize, panel };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/MilkOnCerealPrompt.vue b/apps/survey/src/components/prompts/portion/MilkOnCerealPrompt.vue
index 3fb07b5af5..6f08bbb060 100644
--- a/apps/survey/src/components/prompts/portion/MilkOnCerealPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/MilkOnCerealPrompt.vue
@@ -1,18 +1,18 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.container`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.container`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="bowlValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <image-map-selector
             v-if="bowlImageMap"
             v-bind="{
@@ -25,11 +25,11 @@
             @confirm="confirmBowl"
             @select="selectBowl"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!bowlValid">
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.milk`" />
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.milk`" />
           <template #actions>
             <expansion-panel-actions :valid="milkLevelValid">
               <quantity-badge
@@ -39,8 +39,8 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <image-map-selector
             v-if="milkLevelImageMap"
             v-bind="{
@@ -53,7 +53,7 @@
             @confirm="confirmMilk"
             @select="selectMilk"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <template #actions>
@@ -111,7 +111,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   data() {
     const milkLevelImageMapPrefix = 'milkbowl';
@@ -125,7 +125,7 @@ export default defineComponent({
       bowlImageMap: null as ImageMapResponse | null,
       milkLevelImageMap: null as ImageMapResponse | null,
 
-      ...copy(this.value),
+      ...copy(this.modelValue),
     };
   },
 
@@ -288,7 +288,7 @@ export default defineComponent({
         milkLevelConfirmed: this.milkLevelConfirmed,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/MissingFoodPrompt.vue b/apps/survey/src/components/prompts/portion/MissingFoodPrompt.vue
index 9d24fc5555..8bf6016e09 100644
--- a/apps/survey/src/components/prompts/portion/MissingFoodPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/MissingFoodPrompt.vue
@@ -1,68 +1,68 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.source`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.source`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="homemadeValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <yes-no-toggle v-model="homemadePrompt" class="mb-4" mandatory />
           <template v-if="homemadePrompt === true">
-            <i18n class="mb-4" :path="`prompts.${type}.homemade`" tag="div">
+            <i18n-t class="mb-4" :keypath="`prompts.${type}.homemade`" tag="div">
               <template #food>
                 <span class="font-weight-medium">{{ foodName }}</span>
               </template>
-            </i18n>
-            <v-textarea v-model="info.description" outlined @input="update" />
+            </i18n-t>
+            <v-textarea v-model="info.description" variant="outlined" @update:model-value="update" />
           </template>
           <template v-if="homemadePrompt === false">
-            <i18n class="mb-4" :path="`prompts.${type}.purchased`" tag="div">
+            <i18n-t class="mb-4" :keypath="`prompts.${type}.purchased`" tag="div">
               <template #food>
                 <span class="font-weight-medium">{{ foodName }}</span>
               </template>
-            </i18n>
-            <v-text-field v-model="info.brand" outlined @input="update" />
-            <i18n class="mb-4" :path="`prompts.${type}.barcode`" tag="div">
+            </i18n-t>
+            <v-text-field v-model="info.brand" variant="outlined" @update:model-value="update" />
+            <i18n-t class="mb-4" :keypath="`prompts.${type}.barcode`" tag="div">
               <template #food>
                 <span class="font-weight-medium">{{ foodName }}</span>
               </template>
-            </i18n>
+            </i18n-t>
             <component
-              :is="prompt.barcode.type"
-              :model-value.sync="info.barcode"
+              :is="`${prompt.barcode.type}-input`"
+              v-model:model-value="info.barcode"
               :options="prompt.barcode"
               outlined
             />
           </template>
-          <v-btn :block="isMobile" color="primary" :disabled="!homemadeValid" @click="confirm">
+          <v-btn :block="$vuetify.display.mobile" color="primary" :disabled="!homemadeValid" @click="confirm">
             {{ $t('common.action.continue') }}
           </v-btn>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel>
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.portionSize`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.portionSize`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="!!info.portionSize" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
-          <v-textarea v-model="info.portionSize" outlined @input="update" />
-          <v-btn :block="isMobile" color="primary" :disabled="!info.portionSize" @click="confirm">
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <v-textarea v-model="info.portionSize" variant="outlined" @update:model-value="update" />
+          <v-btn :block="$vuetify.display.mobile" color="primary" :disabled="!info.portionSize" @click="confirm">
             {{ $t('common.action.continue') }}
           </v-btn>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <template #actions>
@@ -92,16 +92,16 @@ export default defineComponent({
 
   mixins: [createBasePortion<'missing-food-prompt', MissingFood>()],
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   data() {
     return {
       ...copy({
-        ...this.value,
+        ...this.modelValue,
         homemadePrompt:
-          !this.value.info.description && !this.value.info.brand
+          !this.modelValue.info.description && !this.modelValue.info.brand
             ? undefined
-            : !!this.value.info.description,
+            : !!this.modelValue.info.description,
       }),
     };
   },
@@ -130,7 +130,7 @@ export default defineComponent({
         homemadePrompt: this.homemadePrompt,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/ParentFoodPortionPrompt.vue b/apps/survey/src/components/prompts/portion/ParentFoodPortionPrompt.vue
index cdc8b39e36..25bc181213 100644
--- a/apps/survey/src/components/prompts/portion/ParentFoodPortionPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/ParentFoodPortionPrompt.vue
@@ -1,28 +1,27 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.label`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.label`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
             <template #parentFood>
               <span class="font-weight-medium">{{ parentFoodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="!!portionSize.portionValue" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <v-radio-group
             v-model="portionSize.portionValue"
-            :column="prompt.orientation === 'column'"
             :error="hasErrors"
             hide-details="auto"
-            :row="prompt.orientation === 'row'"
-            @change="clearErrors"
+            :inline="prompt.orientation === 'row'"
+            @update:model-value="clearErrors"
           >
             <v-radio v-for="option in localeOptions" :key="option.value" :value="option.value">
               <template #label>
@@ -39,7 +38,7 @@
             </v-radio>
           </v-radio-group>
           <v-messages v-show="hasErrors" v-model="errors" class="mt-3" color="error" />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <template #actions>
@@ -82,7 +81,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props) {
     const { foodName, parentFoodName } = useFoodUtils(props);
@@ -92,7 +91,7 @@ export default defineComponent({
 
   data() {
     return {
-      ...copy(this.value),
+      ...copy(this.modelValue),
     };
   },
 
@@ -147,7 +146,7 @@ export default defineComponent({
 
       const state: PromptStates['parent-food-portion-prompt'] = { portionSize, panel };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/PizzaPrompt.vue b/apps/survey/src/components/prompts/portion/PizzaPrompt.vue
index 3fbc4306b7..042245b184 100644
--- a/apps/survey/src/components/prompts/portion/PizzaPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/PizzaPrompt.vue
@@ -1,14 +1,14 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t(`prompts.${type}.typeLabel`) }}
           <template #actions>
             <expansion-panel-actions :valid="confirmed.type" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <image-map-selector
             v-if="imageMaps.type"
             v-bind="{
@@ -21,16 +21,16 @@
             @confirm="confirmType('type')"
             @select="(idx, id) => selectType('type', idx, id)"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel>
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t(`prompts.${type}.thicknessLabel`) }}
           <template #actions>
             <expansion-panel-actions :valid="confirmed.thickness" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <image-map-selector
             v-if="imageMaps.thickness"
             v-bind="{
@@ -43,16 +43,16 @@
             @confirm="confirmType('thickness')"
             @select="(idx, id) => selectType('thickness', idx, id)"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!confirmed.type">
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t(`prompts.${type}.sizeLabel`) }}
           <template #actions>
             <expansion-panel-actions :valid="confirmed.slice" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <image-map-selector
             v-if="imageMaps.slice"
             v-bind="{
@@ -70,8 +70,6 @@
               <v-btn
                 class="ma-2 font-weight-medium"
                 :color="isWholeSelected ? 'info' : ''"
-                :dark="isWholeSelected"
-                link
                 rounded
                 :title="$t(`prompts.${type}.whole.confirm`)"
                 @click="selectType('slice', 0, '0')"
@@ -80,23 +78,23 @@
               </v-btn>
             </template>
           </image-map-selector>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!confirmed.slice">
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t(`prompts.${type}.${isWholeSelected ? 'whole' : 'slices'}.label`) }}
           <template #actions>
             <expansion-panel-actions :valid="confirmed.quantity" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <quantity-card
             v-model="portionSize.slice.quantity"
-            :confirmed.sync="confirmed.quantity"
-            @input="selectQuantity"
+            v-model:confirmed="confirmed.quantity"
             @update:confirmed="confirmType('quantity', $event)"
+            @update:model-value="selectQuantity"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <template #actions>
@@ -160,7 +158,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   data() {
     const typeImageMapId = 'gpizza';
@@ -181,7 +179,7 @@ export default defineComponent({
         slice: null,
       } as Record<PizzaImageMap, ImageMapResponse | null>,
 
-      ...copy(this.value),
+      ...copy(this.modelValue),
     };
   },
 
@@ -313,7 +311,7 @@ export default defineComponent({
       if (type === 'slice') {
         this.confirmType('quantity', false);
 
-        if (!this.isMobile)
+        if (!this.$vuetify.display.mobile)
           this.confirmType(type);
       }
     },
@@ -351,7 +349,7 @@ export default defineComponent({
         confirmed: this.confirmed,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/PizzaV2Prompt.vue b/apps/survey/src/components/prompts/portion/PizzaV2Prompt.vue
index 4bfb846c12..7fc513009f 100644
--- a/apps/survey/src/components/prompts/portion/PizzaV2Prompt.vue
+++ b/apps/survey/src/components/prompts/portion/PizzaV2Prompt.vue
@@ -1,19 +1,19 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="state.panel" :tile="isMobile">
+    <v-expansion-panels v-model="state.panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel>
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t(`prompts.${type}.sizes.label`) }}
           <template #actions>
             <expansion-panel-actions :valid="sizeValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <div class="d-flex flex-column">
             <v-radio-group
               v-model="state.portionSize.size"
               hide-details="auto"
-              @change="confirmType('size', false)"
+              @update:model-value="confirmType('size', false)"
             >
               <v-radio
                 v-for="option in sizeOptions"
@@ -23,7 +23,7 @@
               />
             </v-radio-group>
             <v-btn
-              :block="isMobile"
+              :block="$vuetify.display.mobile"
               class="align-self-stretch align-self-md-start mt-6"
               color="primary"
               :disabled="!state.portionSize.size"
@@ -32,21 +32,21 @@
               {{ $t('common.action.continue') }}
             </v-btn>
           </div>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!sizeValid">
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t(`prompts.${type}.crusts.label`) }}
           <template #actions>
             <expansion-panel-actions :valid="crustValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <div class="d-flex flex-column gr-4">
             <v-radio-group
               v-model="state.portionSize.crust"
               hide-details="auto"
-              @change="confirmType('crust', false)"
+              @update:model-value="confirmType('crust', false)"
             >
               <v-radio
                 v-for="option in crustOptions"
@@ -56,7 +56,7 @@
               />
             </v-radio-group>
             <v-btn
-              :block="isMobile"
+              :block="$vuetify.display.mobile"
               class="align-self-stretch align-self-md-start"
               color="primary"
               :disabled="!state.portionSize.crust"
@@ -65,16 +65,16 @@
               {{ $t('common.action.continue') }}
             </v-btn>
           </div>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!crustValid">
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t(`prompts.${type}.units.label`) }}
           <template #actions>
             <expansion-panel-actions :valid="unitValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <v-item-group
             v-model="state.portionSize.unit"
             class="d-flex flex-row gc-2"
@@ -83,15 +83,15 @@
             <v-container>
               <v-row>
                 <v-col v-for="unit in unitOptions" :key="unit.value" cols="6">
-                  <v-item v-slot="{ active, toggle }" :value="unit.value">
-                    <v-hover v-slot="{ hover }">
+                  <v-item v-slot="{ isSelected, toggle }" :value="unit.value">
+                    <v-hover v-slot="{ isHovering }">
                       <v-card
                         class="d-flex flex-column gr-5 align-stretch justify-center pa-5 text-center rounded-xxl"
-                        :color="active || hover ? 'ternary' : ''"
+                        :color="isSelected || isHovering ? 'ternary' : ''"
                         flat
                         @click="
                           () => {
-                            toggle();
+                            toggle && toggle();
                             confirmType('unit', true);
                           }
                         "
@@ -112,16 +112,16 @@
               </v-row>
             </v-container>
           </v-item-group>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!unitValid">
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ $t(`prompts.${type}.quantity.${state.portionSize.unit ?? 'slice'}`) }}
           <template #actions>
             <expansion-panel-actions :valid="quantityValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <v-container>
             <v-row>
               <v-col class="d-none d-sm-flex justify-center align-center" cols="6">
@@ -138,7 +138,7 @@
               </v-col>
             </v-row>
           </v-container>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <template #actions>
@@ -201,19 +201,19 @@ export default defineComponent({
       type: Object as PropType<PortionSizeParameters['pizza-v2']>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Object as PropType<PromptStates['pizza-v2-prompt']>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
-    const { translate, i18n } = useI18n();
+    const { i18n: { t } } = useI18n();
     const { action, type } = usePromptUtils(props, ctx);
 
-    const state = ref(copy(props.value));
+    const state = ref(copy(props.modelValue));
 
     const sizeValid = computed(() => state.value.confirmed.size);
     const crustValid = computed(() => state.value.confirmed.crust);
@@ -231,21 +231,21 @@ export default defineComponent({
 
     const sizeOptions = computed(() =>
       pizzaSizes.map(value => ({
-        label: i18n.t(`prompts.${type.value}.sizes.${value}`).toString(),
+        label: t(`prompts.${type.value}.sizes.${value}`),
         value,
       })),
     );
 
     const crustOptions = computed(() =>
       pizzaCrusts.map(value => ({
-        label: i18n.t(`prompts.${type.value}.crusts.${value}`),
+        label: t(`prompts.${type.value}.crusts.${value}`),
         value,
       })),
     );
 
     const unitOptions = computed(() =>
       pizzaUnits.map(value => ({
-        label: i18n.t(`prompts.${type.value}.units.${value}`),
+        label: t(`prompts.${type.value}.units.${value}`),
         value,
       })),
     );
@@ -255,12 +255,12 @@ export default defineComponent({
       if ([size, crust, unit, quantity].every(item => item)) {
         state.value.portionSize.servingWeight
           = ((baseWeight * pizzaDefs[size!].multiplier * crustDefs[crust!])
-          / (unit === 'slice' ? pizzaDefs[size!].slices : 1))
-          * quantity
-          * props.conversionFactor;
+            / (unit === 'slice' ? pizzaDefs[size!].slices : 1))
+            * quantity
+            * props.conversionFactor;
       }
 
-      ctx.emit('input', state.value);
+      ctx.emit('update:modelValue', state.value);
     };
 
     const confirmType = (type: 'size' | 'crust' | 'unit' | 'quantity', value: boolean) => {
@@ -279,7 +279,6 @@ export default defineComponent({
       sizeOptions,
       sizeValid,
       state,
-      translate,
       type,
       unitOptions,
       unitValid,
diff --git a/apps/survey/src/components/prompts/portion/PortionSizeOptionPrompt.vue b/apps/survey/src/components/prompts/portion/PortionSizeOptionPrompt.vue
index 6513884719..814482124c 100644
--- a/apps/survey/src/components/prompts/portion/PortionSizeOptionPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/PortionSizeOptionPrompt.vue
@@ -4,7 +4,7 @@
       v-if="availableMethods.length"
       v-model="option"
       :mandatory="optionValid"
-      @change="change"
+      @update:model-value="change"
     >
       <v-container>
         <v-row>
@@ -15,20 +15,20 @@
             md="4"
             sm="6"
           >
-            <v-item v-slot="{ active, toggle }" :value="availableMethod.index">
+            <v-item v-slot="{ isSelected, toggle }" :value="availableMethod.index">
               <v-card
+                border
                 border-color="secondary"
                 class="d-flex flex-column justify-space-between"
-                :elevation="active ? '4' : undefined"
+                :elevation="isSelected ? '4' : undefined"
                 height="100%"
                 hover
-                outlined
                 @click="click(toggle)"
               >
                 <component :is="availableMethod.method" :method="availableMethod" />
                 <v-card-actions
                   class="d-flex justify-end"
-                  :class="{ 'grey lighten-4': !active, 'ternary': active }"
+                  :class="{ 'bg-grey-lighten-4': !isSelected, 'bg-ternary': isSelected }"
                 >
                   <v-chip
                     class="font-weight-medium px-4"
@@ -44,7 +44,7 @@
       </v-container>
     </v-item-group>
     <v-card-text v-else>
-      <v-alert border="left" outlined type="warning">
+      <v-alert border="start" type="warning" variant="outlined">
         {{ $t(`prompts.${type}.unknown`, { food: foodName }) }}
       </v-alert>
     </v-card-text>
@@ -75,11 +75,11 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   data() {
     return {
-      option: this.value.option ?? undefined,
+      option: this.modelValue.option ?? undefined,
     };
   },
 
@@ -102,8 +102,8 @@ export default defineComponent({
   },
 
   methods: {
-    click(toggle: () => void) {
-      toggle();
+    click(toggle?: () => void) {
+      toggle?.();
 
       if (!this.optionValid)
         return;
@@ -123,7 +123,7 @@ export default defineComponent({
     update() {
       const state: PromptStates['portion-size-option-prompt'] = { option: this.option ?? null };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/RecipeBuilderPrompt.vue b/apps/survey/src/components/prompts/portion/RecipeBuilderPrompt.vue
index 71aca5b5ee..1948b481f4 100644
--- a/apps/survey/src/components/prompts/portion/RecipeBuilderPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/RecipeBuilderPrompt.vue
@@ -1,19 +1,19 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }">
-    <v-expansion-panels v-model="activeStep" :tile="isMobile" @change="updateActiveStep">
+    <v-expansion-panels v-model="activeStep" :tile="$vuetify.display.mobile" @update:model-value="updateActiveStep">
       <v-expansion-panel v-for="(step, index) in recipeSteps" :key="index">
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           <div>
-            <v-avatar class="mr-2" color="primary" size="28">
-              <span class="white--text font-weight-medium">{{ step.order + 1 }}</span>
+            <v-avatar class="me-2" color="primary" size="28">
+              <span class="text-white font-weight-medium">{{ step.order + 1 }}</span>
             </v-avatar>
             {{ translate(step.name) }}
           </div>
           <template #actions>
             <expansion-panel-actions :valid="isStepValid(step)" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <v-sheet class="mb-4">
             {{ translate(step.description) }}
           </v-sheet>
@@ -22,19 +22,19 @@
             <v-radio-group
               v-if="!step.required"
               v-model="step.confirmed"
-              row
-              @change="onConfirmToggleIngredients(index)"
+              inline
+              @update:model-value="onConfirmToggleIngredients(index)"
             >
               <v-radio
+                false-icon="fa-regular fa-circle"
                 :label="$t('prompts.recipeBuilder.optional.confirm')"
-                off-icon="fa-regular fa-circle"
-                on-icon="$yes"
+                true-icon="$yes"
                 value="yes"
               />
               <v-radio
+                false-icon="fa-regular fa-circle"
                 :label="$t('prompts.recipeBuilder.optional.reject')"
-                off-icon="fa-regular fa-circle"
-                on-icon="$no"
+                true-icon="$no"
                 value="no"
               />
             </v-radio-group>
@@ -55,14 +55,14 @@
           <v-btn-toggle
             v-if="(step.required || step.confirmed === 'yes') && step.repeat && step.foods.length > 0"
             v-model="step.anotherFoodConfirmed"
-            color="primary" dense
-            :row="!isMobile"
-            @change="onToggleStepAddMore(index)"
+            color="primary" density="compact"
+            :row="!$vuetify.display.mobile"
+            @update:model-value="onToggleStepAddMore(index)"
           >
-            <v-btn large :value="true">
+            <v-btn size="large" :value="true">
               {{ $t('prompts.recipeBuilder.addMore') }}
             </v-btn>
-            <v-btn large :value="false">
+            <v-btn size="large" :value="false">
               {{ $t('prompts.recipeBuilder.noMore') }}
             </v-btn>
           </v-btn-toggle>
@@ -84,7 +84,7 @@
             @food-selected="(food) => foodSelected(index, food)"
             @food-skipped="foodSkipped(index)"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <missing-all-recipe-ingredients
@@ -92,7 +92,7 @@
         value: allConfirmed && !atLeastOneFoodSelected,
         message: $t('prompts.recipeBuilder.missingAllIngredients'),
       }"
-      :class="{ 'mt-4': isMobile }"
+      :class="{ 'mt-4': $vuetify.display.mobile }"
     />
     <template #actions>
       <next :disabled="!isValid" @click="updateStepsIngredients" />
@@ -117,12 +117,6 @@ import type { RecipeBuilder } from '@intake24/common/types';
 import type { FoodHeader } from '@intake24/common/types/http';
 import { copy } from '@intake24/common/util';
 import { useI18n } from '@intake24/i18n';
-import {
-  ExpansionPanelActions,
-  FoodBrowser,
-  MissingAllRecipeIngredients,
-  SelectedFoodList,
-} from '@intake24/survey/components/elements';
 import { foodsService } from '@intake24/survey/services';
 import { getEntityId } from '@intake24/survey/util';
 
@@ -144,7 +138,7 @@ function getNextStep(steps: RecipeBuilderStepState[]) {
 export default defineComponent({
   name: 'RecipeBuilderPrompt',
 
-  components: { ExpansionPanelActions, FoodBrowser, SelectedFoodList, MissingAllRecipeIngredients },
+  // components: { ExpansionPanelActions, FoodBrowser, SelectedFoodList, MissingAllRecipeIngredients },
 
   mixins: [createBasePrompt<'recipe-builder-prompt', RecipeBuilder>()],
 
@@ -156,13 +150,13 @@ export default defineComponent({
     surveySlug: {
       type: String,
     },
-    value: {
+    modelValue: {
       type: Object as PropType<PromptStates['recipe-builder-prompt']>,
       required: true,
     },
   },
 
-  emits: ['input', 'add-food', 'action'],
+  emits: ['action', 'update:modelValue', 'add-food'],
 
   setup() {
     const { translate } = useI18n();
@@ -175,7 +169,7 @@ export default defineComponent({
 
   data() {
     return {
-      ...copy(this.value),
+      ...copy(this.modelValue),
     };
   },
 
@@ -216,7 +210,7 @@ export default defineComponent({
         recipe: this.recipe,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
 
     foodSelected(index: number, selectedFood: SelectedFoodRecipeBuilderItemState): void {
@@ -289,7 +283,7 @@ export default defineComponent({
 
     updateActiveStep(index: number) {
       const { recipeSteps } = this;
-      this.$emit('input', { activeStep: index, recipeSteps });
+      this.$emit('update:modelValue', { activeStep: index, recipeSteps });
       this.activeStep = index;
     },
 
diff --git a/apps/survey/src/components/prompts/portion/StandardPortionPrompt.vue b/apps/survey/src/components/prompts/portion/StandardPortionPrompt.vue
index 2b69779add..7050172a37 100644
--- a/apps/survey/src/components/prompts/portion/StandardPortionPrompt.vue
+++ b/apps/survey/src/components/prompts/portion/StandardPortionPrompt.vue
@@ -1,38 +1,39 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-if="standardUnitsLoaded" v-model="panel" :tile="isMobile">
+    <v-expansion-panels v-if="standardUnitsLoaded" v-model="panel" :tile="$vuetify.display.mobile">
       <v-expansion-panel v-show="parameters.units.length !== 1">
-        <v-expansion-panel-header>
-          <i18n :path="`prompts.${type}.label`">
+        <v-expansion-panel-title>
+          <i18n-t :keypath="`prompts.${type}.label`" tag="span">
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template #actions>
             <expansion-panel-actions :valid="unitValid" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
-          <v-radio-group v-model="portionSize.unit" @change="selectMethod">
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <v-radio-group v-model="portionSize.unit" @update:model-value="selectMethod">
             <v-radio v-for="unit in parameters.units" :key="unit.name" :value="unit">
               <template #label>
-                <i18n :path="`prompts.${type}.estimateIn`">
+                <i18n-t :keypath="`prompts.${type}.estimateIn`">
                   <template #unit>
                     {{ getStandardUnitEstimateIn(unit) }}
                   </template>
-                </i18n>
+                </i18n-t>
               </template>
             </v-radio>
           </v-radio-group>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <v-expansion-panel :disabled="!unitValid">
-        <v-expansion-panel-header>
-          <i18n
+        <v-expansion-panel-title>
+          <i18n-t
             v-if="portionSize.unit"
-            :path="`prompts.${type}.howMany.${
+            :keypath="`prompts.${type}.howMany.${
               portionSize.unit.omitFoodDescription ? '_' : 'withFood'
             }`"
+            tag="span"
           >
             <template #unit>
               {{ getStandardUnitHowMany(portionSize.unit) }}
@@ -40,7 +41,7 @@
             <template #food>
               <span class="font-weight-medium">{{ foodName }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <template v-else>
             {{ $t(`prompts.${type}.howMany.placeholder`) }}
           </template>
@@ -54,23 +55,23 @@
               />
             </expansion-panel-actions>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <quantity-card
             v-model="portionSize.quantity"
-            :confirmed.sync="quantityConfirmed"
-            @input="selectQuantity"
+            v-model:confirmed="quantityConfirmed"
             @update:confirmed="confirmQuantity"
+            @update:model-value="selectQuantity"
           />
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
       <linked-quantity
         v-if="linkedParent && !linkedParent.auto"
         v-bind="{ disabled: !quantityValid, food, linkedParent, prompt }"
         v-model="portionSize.linkedQuantity"
-        :confirmed.sync="linkedQuantityConfirmed"
-        @input="selectLinkedQuantity"
+        v-model:confirmed="linkedQuantityConfirmed"
         @update:confirmed="confirmLinkedQuantity"
+        @update:model-value="selectLinkedQuantity"
       />
     </v-expansion-panels>
     <template #actions>
@@ -89,7 +90,6 @@ import { defineComponent } from 'vue';
 import type { PromptStates } from '@intake24/common/prompts';
 import type { PortionSizeParameters } from '@intake24/common/surveys';
 import { copy } from '@intake24/common/util';
-import { useI18n } from '@intake24/i18n';
 import { useFoodUtils } from '@intake24/survey/composables';
 
 import type { LinkedParent } from '../partials';
@@ -117,10 +117,9 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['update:modelValue'],
 
   setup(props) {
-    const { translate } = useI18n();
     const { foodName } = useFoodUtils(props);
     const {
       resolveStandardUnits,
@@ -133,7 +132,6 @@ export default defineComponent({
       resolveStandardUnits,
       getStandardUnitEstimateIn,
       getStandardUnitHowMany,
-      translate,
       foodName,
       standardUnitsLoaded,
     };
@@ -141,7 +139,7 @@ export default defineComponent({
 
   data() {
     return {
-      ...copy(this.value),
+      ...copy(this.modelValue),
     };
   },
 
@@ -216,7 +214,7 @@ export default defineComponent({
         linkedQuantityConfirmed: this.linkedQuantityConfirmed,
       };
 
-      this.$emit('input', state);
+      this.$emit('update:modelValue', state);
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/portion/createBasePortion.ts b/apps/survey/src/components/prompts/portion/createBasePortion.ts
index f8930a4c55..f1e05fea23 100644
--- a/apps/survey/src/components/prompts/portion/createBasePortion.ts
+++ b/apps/survey/src/components/prompts/portion/createBasePortion.ts
@@ -1,5 +1,6 @@
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
+import { useGoTo } from 'vuetify';
 
 import type { Prompt, Prompts, PromptStates } from '@intake24/common/prompts';
 import type { PromptSection } from '@intake24/common/surveys';
@@ -49,30 +50,28 @@ export default <
         type: String as PropType<PromptSection>,
         required: true,
       },
-      value: {
+      modelValue: {
         type: Object as PropType<PromptStates[P]>,
         required: true,
       },
     },
 
-    emits: ['action'],
+    emits: ['action', 'update:modelValue'],
 
-    setup(props) {
-      const { translate } = useI18n();
-
-      // InferPropType<T> fails on generic types: https://github.com/vuejs/core/pull/9652
-      const food = props.food as unknown as F;
-      const parentFood = props.parentFood as unknown as PF;
+    data() {
+      const goTo = useGoTo();
+      const food = this.food as unknown as F;
+      const parentFood = this.parentFood as unknown as PF;
 
       const { foodName } = useFoodUtils({ food, parentFood });
+      const { translate } = useI18n();
 
-      return { foodName, translate };
-    },
-
-    data() {
       return {
+        foodName,
+        goTo,
         errors: [] as string[],
         panel: 0,
+        translate,
       };
     },
 
@@ -111,7 +110,7 @@ export default <
           return;
 
         setTimeout(async () => {
-          await this.$vuetify.goTo('#actions', { duration: 1000 });
+          await this.goTo('#actions', { duration: 1000 });
         }, 100);
       },
 
diff --git a/apps/survey/src/components/prompts/portion/options/image.vue b/apps/survey/src/components/prompts/portion/options/image.vue
index 1a05eae774..7145cd16ac 100644
--- a/apps/survey/src/components/prompts/portion/options/image.vue
+++ b/apps/survey/src/components/prompts/portion/options/image.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-img :aspect-ratio="3 / 2" :src="method.imageUrl">
+  <v-img :aspect-ratio="3 / 2" cover :src="method.imageUrl">
     <template #placeholder>
       <image-placeholder />
     </template>
diff --git a/apps/survey/src/components/prompts/portion/options/index.ts b/apps/survey/src/components/prompts/portion/options/index.ts
index 1ecb055228..9f4f41545d 100644
--- a/apps/survey/src/components/prompts/portion/options/index.ts
+++ b/apps/survey/src/components/prompts/portion/options/index.ts
@@ -12,6 +12,7 @@ export default {
   'milk-in-a-hot-drink': PortionOptions,
   'parent-food-portion': PortionOptions,
   pizza: PortionImage,
+  pizzaV2: PortionImage,
   'standard-portion': StandardUnits,
   weight: PortionImage,
 };
diff --git a/apps/survey/src/components/prompts/portion/options/options.vue b/apps/survey/src/components/prompts/portion/options/options.vue
index 22511428f4..7f7a94fe57 100644
--- a/apps/survey/src/components/prompts/portion/options/options.vue
+++ b/apps/survey/src/components/prompts/portion/options/options.vue
@@ -1,14 +1,14 @@
 <template>
-  <v-sheet class="d-flex flex-column gr-1 px-3 py-2 portion-options" color="grey lighten-5">
+  <v-sheet class="d-flex flex-column gr-1 px-3 py-2 portion-options" color="grey-lighten-5">
     <v-chip
       v-for="option in localeOptions"
       :key="option.value"
       class="d-flex flex-grow-1 px-6"
       color="ternary"
-      :input-value="selected !== undefined && option.value === localeOptions[selected].value"
+      :model-value="selected !== undefined && option.value === localeOptions[selected].value"
       pill
     >
-      <v-icon color="primary" left small>
+      <v-icon color="primary" size="small" start>
         {{
           selected === undefined || option.value !== localeOptions[selected].value
             ? 'far fa-circle'
@@ -61,7 +61,7 @@ export default defineComponent({
       }) as LocaleOptionList<ZodNumber>;
     });
     const localeOptions = computed(() =>
-      (options.value[i18n.locale] ?? options.value.en).slice(0, props.max),
+      (options.value[i18n.locale.value] ?? options.value.en).slice(0, props.max),
     );
 
     const selectNext = () => {
diff --git a/apps/survey/src/components/prompts/portion/options/standard-units.vue b/apps/survey/src/components/prompts/portion/options/standard-units.vue
index bba3ce0666..7f3f0f5e33 100644
--- a/apps/survey/src/components/prompts/portion/options/standard-units.vue
+++ b/apps/survey/src/components/prompts/portion/options/standard-units.vue
@@ -1,25 +1,24 @@
 <template>
   <v-sheet
     v-if="standardUnitsLoaded"
-    class="d-flex flex-column gr-1 px-3 py-2 standard-portion"
-    color="grey lighten-5"
+    class="d-flex flex-column gr-3 px-3 py-2 standard-portion"
+    color="grey-lighten-5"
   >
     <v-chip
       v-for="(unit, index) in standardUnits"
       :key="unit.name"
-      class="d-flex flex-grow-1 px-6"
-      color="ternary"
-      :input-value="index === selectedIndex"
-      pill
+      class="px-6 font-weight-medium"
+      color="primary"
+      :value="index === selectedIndex"
     >
-      <v-icon color="primary" left small>
+      <v-icon color="primary" size="small" start>
         {{ index !== selectedIndex ? 'far fa-circle' : 'far fa-circle-dot' }}
       </v-icon>
-      <i18n class="font-weight-medium" path="prompts.standardPortion.estimateIn">
+      <i18n-t keypath="prompts.standardPortion.estimateIn">
         <template #unit>
           {{ getStandardUnitEstimateIn(unit) }}
         </template>
-      </i18n>
+      </i18n-t>
     </v-chip>
   </v-sheet>
 </template>
diff --git a/apps/survey/src/components/prompts/standard/AddonFoodsPrompt.vue b/apps/survey/src/components/prompts/standard/AddonFoodsPrompt.vue
index a5d0d980d6..b0b743125a 100644
--- a/apps/survey/src/components/prompts/standard/AddonFoodsPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/AddonFoodsPrompt.vue
@@ -2,72 +2,71 @@
   <card-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
     <div class="py-4">
       <div v-for="meal in meals" :key="meal.id">
-        <div class="subtitle-1 font-weight-medium px-4 py-2">
+        <div class="text-subtitle-1 font-weight-medium px-4 py-2">
           {{ translate(meal.name) }}
         </div>
         <v-divider />
-        <v-list dense>
+        <v-list density="compact">
           <v-list-item v-for="food in meal.foods" :key="food.id">
-            <v-list-item-content>
-              <v-list-item-title class="mb-4">
-                <!-- @vue-expect-error TODO: improve type (encoded foods filtered in handler) -->
-                {{ food.data.localName }}
-              </v-list-item-title>
-              <div v-for="(addon, idx) in foods[food.id]" :key="idx" class="d-flex flex-column flex-md-row align-stretch align-md-center ga-2">
-                <v-btn-toggle
-                  color="primary"
-                  :value="addon.confirmed"
-                  @change="updateConfirmed(food.id, idx, $event)"
-                >
-                  <v-btn class="px-4" height="40" :value="false">
-                    {{ promptI18n.didNotHave }}
-                  </v-btn>
-                </v-btn-toggle>
-                <v-select
-                  dense
-                  :disabled="addon.confirmed === false"
-                  hide-details="auto"
-                  item-text="localName"
-                  item-value="code"
-                  :items="addonFoods"
-                  :label="promptI18n.food"
-                  outlined
-                  return-object
-                  :value="addon.data"
-                  @input="updateFood(food.id, idx, $event)"
-                />
-                <!-- @vue-expect-error vuetify2 not typed closure -->
-                <v-select
-                  v-model="addon.portionSize.unit"
-                  dense
-                  :disabled="addon.confirmed === false || !addon.data"
-                  hide-details="auto"
-                  :item-text="(item) => getStandardUnitEstimateIn(item)"
-                  item-value="name"
-                  :items="getAddonFoodsUnits(food.id, idx)"
-                  :label="promptI18n.portion"
-                  outlined
-                  return-object
-                  @change="updateUnit(food.id, idx)"
-                />
-                <v-select
-                  v-model="addon.portionSize.quantity"
-                  dense
-                  :disabled="addon.confirmed === false || !addon.data"
-                  hide-details="auto"
-                  :items="[0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-                  :label="promptI18n.quantity"
-                  outlined
-                  @change="updateQuantity(food.id, idx)"
-                />
-                <v-icon
-                  v-if="isAddonFoodValid(addon)"
-                  color="green"
-                >
-                  $check
-                </v-icon>
-              </div>
-            </v-list-item-content>
+            <v-list-item-title class="mb-4">
+              <!-- @vue-expect-error TODO: improve type (encoded foods filtered in handler) -->
+              {{ food.data.localName }}
+            </v-list-item-title>
+            <div v-for="(addon, idx) in foods[food.id]" :key="idx" class="d-flex flex-column flex-md-row align-stretch align-md-center ga-2">
+              <v-btn-toggle
+                base-color="grey-lighten-4"
+                class="align-self-stretch"
+                color="primary"
+                :model-value="addon.confirmed"
+                :style="{ 'height': 'unset', 'min-height': '40px' }"
+                @update:model-value="updateConfirmed(food.id, idx, $event)"
+              >
+                <v-btn class="px-4" :value="false">
+                  {{ promptI18n.didNotHave }}
+                </v-btn>
+              </v-btn-toggle>
+              <v-select
+                density="compact"
+                :disabled="addon.confirmed === false"
+                hide-details="auto"
+                item-title="localName"
+                item-value="code"
+                :items="addonFoods"
+                :label="promptI18n.food"
+                :model-value="addon.data"
+                return-object
+                variant="outlined"
+                @update:model-value="updateFood(food.id, idx, $event)"
+              />
+              <v-select
+                v-model="addon.portionSize.unit"
+                density="compact"
+                :disabled="addon.confirmed === false || !addon.data"
+                hide-details="auto"
+                :item-title="(item) => getStandardUnitEstimateIn(item)"
+                item-value="name"
+                :items="getAddonFoodsUnits(food.id, idx)"
+                :label="promptI18n.portion"
+                return-object
+                variant="outlined"
+                @update:model-value="updateUnit(food.id, idx)"
+              />
+              <v-select
+                v-model="addon.portionSize.quantity"
+                density="compact"
+                :disabled="addon.confirmed === false || !addon.data"
+                hide-details="auto"
+                :items="[0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+                :label="promptI18n.quantity"
+                variant="outlined"
+                @update:model-value="updateQuantity(food.id, idx)"
+              />
+              <v-icon
+                v-if="isAddonFoodValid(addon)"
+                color="green"
+                icon="$check"
+              />
+            </div>
           </v-list-item>
         </v-list>
       </div>
@@ -113,18 +112,18 @@ export default defineComponent({
       type: Array as PropType<MealState[]>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Object as PropType<PromptStates['addon-foods-prompt']>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
+    const { translate } = useI18n();
     const { action, translatePrompt } = usePromptUtils(props, ctx);
     const { resolveStandardUnits, getStandardUnitEstimateIn } = useStandardUnits();
-    const { translate } = useI18n();
 
     const promptI18n = computed(() =>
       translatePrompt([
@@ -135,7 +134,7 @@ export default defineComponent({
       ]),
     );
 
-    const foods = ref(copy(props.value.foods));
+    const foods = ref(copy(props.modelValue.foods));
     const addonFoods = ref<UserFoodData[]>([]);
     const addonFoodUnits = computed(() => addonFoods.value.reduce<Record<string, { conversionFactor: number; units: StandardUnit[] }>>((acc, food) => {
       let conversionFactor = 0;
@@ -181,7 +180,7 @@ export default defineComponent({
     }
 
     async function update() {
-      ctx.emit('input', { foods: foods.value });
+      ctx.emit('update:modelValue', { foods: foods.value });
     };
 
     async function updatePortionSize(foodId: string, idx: number) {
diff --git a/apps/survey/src/components/prompts/standard/AssociatedFoodsPrompt.vue b/apps/survey/src/components/prompts/standard/AssociatedFoodsPrompt.vue
index a578be636e..caa2dea2b3 100644
--- a/apps/survey/src/components/prompts/standard/AssociatedFoodsPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/AssociatedFoodsPrompt.vue
@@ -1,29 +1,29 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <v-expansion-panels v-model="activePrompt" :tile="isMobile" @change="updatePrompts">
+    <v-expansion-panels v-model="activePrompt" :tile="$vuetify.display.mobile" @update:model-value="updatePrompts">
       <v-expansion-panel v-for="(promptState, index) in promptStates" :key="index">
-        <v-expansion-panel-header>
+        <v-expansion-panel-title>
           {{ promptHeader(index) }}
           <template #actions>
             <expansion-panel-actions :valid="isPromptValid(promptState)" />
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <v-radio-group
             v-model="promptState.mainFoodConfirmed"
-            :row="!isMobile"
-            @change="onConfirmStateChanged(index)"
+            :inline="!$vuetify.display.mobile"
+            @update:model-value="onConfirmStateChanged(index)"
           >
             <v-radio
+              false-icon="fa-regular fa-circle"
               :label="promptI18n.no"
-              off-icon="fa-regular fa-circle"
-              on-icon="$yes"
+              true-icon="$yes"
               :value="false"
             />
             <v-radio
+              false-icon="fa-regular fa-circle"
               :label="promptI18n.yes"
-              off-icon="fa-regular fa-circle"
-              on-icon="$yes"
+              true-icon="$yes"
               :value="true"
             />
           </v-radio-group>
@@ -42,14 +42,14 @@
                 v-for="(foodItem, foodIndex) in promptState.foods"
                 :key="foodIndex"
                 class="mb-3"
-                color="grey lighten-4"
+                color="grey-lighten-4"
                 flat
               >
                 <v-card-text class="pa-0">
                   <v-container fluid>
-                    <v-row>
+                    <v-row align="center">
                       <v-col class="text-h6 ma-0" cols="7">
-                        <v-icon left>
+                        <v-icon start>
                           $food
                         </v-icon>
                         {{ associatedFoodDescription(foodItem) }}
@@ -57,12 +57,12 @@
                       <v-col class="food-buttons" cols="5">
                         <v-btn
                           class="food-button"
-                          color="primary lighten-1"
-                          depressed
+                          color="primary"
                           :title="promptI18n['select.different']"
+                          variant="flat"
                           @click="replaceFood(index, foodIndex)"
                         >
-                          <v-icon left>
+                          <v-icon start>
                             $edit
                           </v-icon>
                           {{ promptI18n['select.different'] }}
@@ -72,28 +72,27 @@
                           :label="promptI18n['select.remove']"
                           @confirm="removeFood(index, foodIndex)"
                         >
-                          <template #activator="{ on, attrs }">
+                          <template #activator="{ props }">
                             <v-btn
-                              v-bind="attrs"
+                              v-bind="props"
                               class="food-button"
-                              color="primary lighten-1"
-                              depressed
+                              color="primary-lighten-1"
                               :title="promptI18n['select.remove']"
-                              v-on="on"
+                              variant="flat"
                             >
-                              <v-icon left>
+                              <v-icon start>
                                 $delete
                               </v-icon>
                               {{ promptI18n['select.remove'] }}
                             </v-btn>
                           </template>
-                          <i18n path="recall.menu.food.deleteConfirm">
+                          <i18n-t keypath="recall.menu.food.deleteConfirm">
                             <template #item>
                               <span class="font-weight-medium">
                                 {{ associatedFoodDescription(foodItem) }}
                               </span>
                             </template>
-                          </i18n>
+                          </i18n-t>
                         </confirm-dialog>
                       </v-col>
                     </v-row>
@@ -110,19 +109,19 @@
               <v-card-text>
                 <v-radio-group
                   v-model="promptState.additionalFoodConfirmed"
-                  :row="!isMobile"
-                  @change="onConfirmStateChanged(index)"
+                  :inline="!$vuetify.display.mobile"
+                  @update:model-value="onConfirmStateChanged(index)"
                 >
                   <v-radio
+                    false-icon="fa-regular fa-circle"
                     :label="promptI18n.no"
-                    off-icon="fa-regular fa-circle"
-                    on-icon="$yes"
+                    true-icon="$yes"
                     :value="false"
                   />
                   <v-radio
+                    false-icon="fa-regular fa-circle"
                     :label="promptI18n.yesAnother"
-                    off-icon="fa-regular fa-circle"
-                    on-icon="$yes"
+                    true-icon="$yes"
                     :value="true"
                   />
                 </v-radio-group>
@@ -174,7 +173,7 @@
               </v-card-text>
             </v-card>
           </v-expand-transition>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <template #actions>
@@ -188,7 +187,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue';
-import { computed, defineComponent, ref, set, watch } from 'vue';
+import { computed, defineComponent, ref, watch } from 'vue';
 
 import type {
   AssociatedFoodPrompt,
@@ -198,7 +197,7 @@ import type {
 import type { EncodedFood } from '@intake24/common/types';
 import type { FoodHeader, UserAssociatedFoodPrompt } from '@intake24/common/types/http';
 import { getFoodDescription } from '@intake24/common/types';
-import { translate, useI18n } from '@intake24/i18n';
+import { useI18n } from '@intake24/i18n';
 import { ExpansionPanelActions, FoodBrowser } from '@intake24/survey/components/elements';
 import MealFoodChooser from '@intake24/survey/components/prompts/partials/MealFoodChooser.vue';
 import { usePromptUtils } from '@intake24/survey/composables';
@@ -209,8 +208,8 @@ import createBasePrompt from '../createBasePrompt';
 function isPromptValid(prompt: AssociatedFoodPrompt): boolean {
   return prompt.mainFoodConfirmed === false
     || (prompt.mainFoodConfirmed === true
-    && prompt.foods.length > 0
-    && prompt.additionalFoodConfirmed === false);
+      && prompt.foods.length > 0
+      && prompt.additionalFoodConfirmed === false);
 }
 
 function getNextPrompt(prompts: AssociatedFoodPrompt[]) {
@@ -240,13 +239,13 @@ export default defineComponent({
     surveySlug: {
       type: String,
     },
-    value: {
+    modelValue: {
       type: Object as PropType<PromptStates['associated-foods-prompt']>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { translate } = useI18n();
@@ -267,8 +266,8 @@ export default defineComponent({
       ]),
     );
 
-    const activePrompt = ref(props.value.activePrompt);
-    const promptStates = ref(props.value.promptStates);
+    const activePrompt = ref(props.modelValue.activePrompt);
+    const promptStates = ref(props.modelValue.promptStates);
     const allowMultiple = computed(() => props.prompt.multiple);
 
     const replaceFoodIndex = ref(
@@ -296,7 +295,7 @@ export default defineComponent({
             ),
           };
 
-          set(promptStates.value, i, update);
+          promptStates.value.splice(i, 1, update);
         }
       },
       { deep: true, immediate: true },
@@ -315,7 +314,6 @@ export default defineComponent({
   },
 
   computed: {
-
     associatedFoodPrompts(): UserAssociatedFoodPrompt[] {
       return this.prompts;
     },
@@ -376,7 +374,7 @@ export default defineComponent({
     isPromptValid,
 
     promptHeader(index: number): string {
-      const promptText = translate(this.associatedFoodPrompts[index].promptText);
+      const promptText = this.translate(this.associatedFoodPrompts[index].promptText);
       if (this.availableFoods[index].length > 0)
         return `${promptText} ${this.promptI18n.existingFoodHint}`;
       else
@@ -413,7 +411,7 @@ export default defineComponent({
       if (food.type === 'existing' && food.existingFoodId !== undefined)
         return this.existingFoodDescription(food.existingFoodId);
       if (food.type === 'missing')
-        return this.$t(`prompts.${this.type}.missing.placeholder`).toString();
+        return this.$t(`prompts.${this.type}.missing.placeholder`);
       return 'No food selected';
     },
 
@@ -423,7 +421,7 @@ export default defineComponent({
     },
 
     replaceFood(promptIndex: number, foodIndex: number) {
-      set(this.replaceFoodIndex, promptIndex, foodIndex);
+      this.replaceFoodIndex.splice(promptIndex, 1, foodIndex);
     },
 
     removeFood(promptIndex: number, foodIndex: number) {
@@ -459,7 +457,7 @@ export default defineComponent({
 
       if (replaceIndex !== undefined) {
         foods[replaceIndex] = selectedFood;
-        set(this.replaceFoodIndex, promptIndex, undefined);
+        this.replaceFoodIndex.splice(promptIndex, 1);
       }
       else {
         foods.push(selectedFood);
@@ -501,7 +499,7 @@ export default defineComponent({
     updatePrompts() {
       const { activePrompt, promptStates } = this;
 
-      this.$emit('input', { activePrompt, promptStates });
+      this.$emit('update:modelValue', { activePrompt, promptStates });
     },
   },
 });
diff --git a/apps/survey/src/components/prompts/standard/EditMealPrompt.vue b/apps/survey/src/components/prompts/standard/EditMealPrompt.vue
index 0d0379b4ab..94d3587497 100644
--- a/apps/survey/src/components/prompts/standard/EditMealPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/EditMealPrompt.vue
@@ -26,41 +26,40 @@
         v-if="!meal.flags.includes('meal-time:disabled')"
         class="px-4"
         color="primary"
-        large
-        text
+        size="large"
         :title="$t('recall.actions.mealTime')"
+        variant="text"
         @click="action('mealTime', meal.id)"
       >
-        <v-icon left>
+        <v-icon start>
           fas fa-clock
         </v-icon>
         {{ $t('recall.actions.mealTime') }}
       </v-btn>
       <confirm-dialog
-        :label="$t('recall.menu.meal.delete').toString()"
+        :label="$t('recall.menu.meal.delete')"
         @confirm="action('deleteMeal', meal.id)"
       >
-        <template #activator="{ on, attrs }">
+        <template #activator="{ props }">
           <v-btn
             class="px-4"
             color="primary"
-            large
-            text
+            size="large"
             :title="$t('recall.actions.deleteMeal')"
-            v-bind="attrs"
-            v-on="on"
+            variant="text"
+            v-bind="props"
           >
-            <v-icon left>
+            <v-icon start>
               $delete
             </v-icon>
             {{ $t('recall.actions.nav.deleteMeal') }}
           </v-btn>
         </template>
-        <i18n path="recall.menu.meal.deleteConfirm">
+        <i18n-t keypath="recall.menu.meal.deleteConfirm" tag="span">
           <template #item>
             <span class="font-weight-medium">{{ mealName }}</span>
           </template>
-        </i18n>
+        </i18n-t>
       </confirm-dialog>
       <next :disabled="!isValid" @click="action('next')" />
     </template>
@@ -68,8 +67,8 @@
       <v-btn
         v-if="!meal.flags.includes('meal-time:disabled')"
         color="primary"
-        text
         :title="$t('recall.actions.nav.mealTime')"
+        variant="text"
         @click.stop="action('mealTime', meal.id)"
       >
         <span class="text-overline font-weight-medium">
@@ -80,11 +79,11 @@
         </v-icon>
       </v-btn>
       <confirm-dialog
-        :label="$t('recall.menu.meal.delete').toString()"
+        :label="$t('recall.menu.meal.delete')"
         @confirm="action('deleteMeal', meal.id)"
       >
-        <template #activator="{ on, attrs }">
-          <v-btn color="primary" text v-bind="attrs" v-on="on">
+        <template #activator="{ props }">
+          <v-btn color="primary" variant="text" v-bind="props">
             <span class="text-overline font-weight-medium">
               {{ $t('recall.actions.nav.deleteMeal') }}
             </span>
@@ -93,11 +92,11 @@
             </v-icon>
           </v-btn>
         </template>
-        <i18n path="recall.menu.meal.deleteConfirm">
+        <i18n-t keypath="recall.menu.meal.deleteConfirm" tag="span">
           <template #item>
             <span class="font-weight-medium">{{ mealName }}</span>
           </template>
-        </i18n>
+        </i18n-t>
       </confirm-dialog>
       <next-mobile :disabled="!isValid" @click="action('next')" />
     </template>
@@ -110,7 +109,6 @@ import { computed, defineComponent } from 'vue';
 
 import type { PromptStates } from '@intake24/common/prompts';
 import type { MealState } from '@intake24/common/types';
-import { useI18n } from '@intake24/i18n';
 import { useMealUtils, usePromptUtils } from '@intake24/survey/composables';
 import { ConfirmDialog } from '@intake24/ui';
 
@@ -129,25 +127,24 @@ export default defineComponent({
       type: Object as PropType<MealState>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Array as PropType<PromptStates['edit-meal-prompt']>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
-    const { translate } = useI18n();
     const { mealName } = useMealUtils(props);
     const { action } = usePromptUtils(props, ctx);
 
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
       },
     });
     const isValid = computed(() => !!state.value.length);
@@ -177,7 +174,7 @@ export default defineComponent({
       action('deleteFood', foodId);
     };
 
-    return { action, drinksOnly, foodsOnly, isValid, mealName, state, deleteFood, translate };
+    return { action, drinksOnly, foodsOnly, isValid, mealName, state, deleteFood };
   },
 });
 </script>
diff --git a/apps/survey/src/components/prompts/standard/ExternalSourcePrompt.vue b/apps/survey/src/components/prompts/standard/ExternalSourcePrompt.vue
index a591de7ea5..e9f966d9ec 100644
--- a/apps/survey/src/components/prompts/standard/ExternalSourcePrompt.vue
+++ b/apps/survey/src/components/prompts/standard/ExternalSourcePrompt.vue
@@ -1,25 +1,25 @@
 <template>
   <base-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
-    <component :is="prompt.source.type" v-bind="{ food, prompt, value }" @input="select" />
+    <component :is="prompt.source.type" v-bind="{ food, prompt, modelValue }" @update:model-value="select" />
     <template #actions>
       <v-btn
         class="px-4"
         color="primary"
-        large
-        outlined
+        size="large"
         :title="promptI18n.missing"
+        variant="outlined"
         @click="action('missing')"
       >
-        <v-icon left>
+        <v-icon start>
           $no
         </v-icon>
         {{ promptI18n.missing }}
       </v-btn>
       <v-spacer />
-      <next v-if="value.data" :disabled="!isValid" :label="promptI18n.select" @click="action('next')" />
+      <next v-if="modelValue.data" :disabled="!isValid" :label="promptI18n.select" @click="action('next')" />
     </template>
     <template #nav-actions>
-      <v-btn color="primary" text :title="promptI18n.missing" @click="action('missing')">
+      <v-btn color="primary" :title="promptI18n.missing" variant="text" @click="action('missing')">
         <span class="text-overline font-weight-medium">
           {{ promptI18n.missing }}
         </span>
@@ -27,7 +27,7 @@
           $no
         </v-icon>
       </v-btn>
-      <next-mobile v-if="value.data" :disabled="!isValid" :label="promptI18n.select" @click="action('next')" />
+      <next-mobile v-if="modelValue.data" :disabled="!isValid" :label="promptI18n.select" @click="action('next')" />
     </template>
   </base-layout>
 </template>
@@ -38,7 +38,6 @@ import { computed, defineComponent } from 'vue';
 
 import type { PromptStates } from '@intake24/common/prompts';
 import type { FoodState } from '@intake24/common/types';
-import { useI18n } from '@intake24/i18n';
 import { usePromptUtils } from '@intake24/survey/composables';
 
 import createBasePrompt from '../createBasePrompt';
@@ -56,23 +55,24 @@ export default defineComponent({
       type: Object as PropType<FoodState>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Object as PropType<PromptStates['external-source-prompt']>,
       required: true,
     },
   },
 
+  emits: ['action', 'update:modelValue'],
+
   setup(props, ctx) {
-    const { translate } = useI18n();
     const { action, translatePrompt } = usePromptUtils(props, ctx);
 
-    const isValid = computed(() => !!props.value);
+    const isValid = computed(() => !!props.modelValue);
 
     const promptI18n = computed(() => translatePrompt(['select', 'missing']),
     );
 
     const select = (data: PromptStates['external-source-prompt']) => {
-      ctx.emit('input', data);
+      ctx.emit('update:modelValue', data);
     };
 
     return {
@@ -80,7 +80,6 @@ export default defineComponent({
       isValid,
       promptI18n,
       select,
-      translate,
     };
   },
 });
diff --git a/apps/survey/src/components/prompts/standard/FinalPrompt.vue b/apps/survey/src/components/prompts/standard/FinalPrompt.vue
index 1892a5c013..5aa05d725d 100644
--- a/apps/survey/src/components/prompts/standard/FinalPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/FinalPrompt.vue
@@ -5,11 +5,11 @@
         <v-btn
           class="px-4"
           color="primary"
-          large
-          outlined
+          size="large"
           :to="{ name: 'survey-home', params: { surveyId } }"
+          variant="outlined"
         >
-          <v-icon left>
+          <v-icon start>
             $home
           </v-icon>
           {{ $t('common.home') }}
@@ -19,18 +19,18 @@
           class="px-4"
           color="primary"
           :disabled="!feedbackAvailable"
-          large
-          outlined
+          size="large"
           :to="{ name: 'feedback-home', params: { surveyId } }"
+          variant="outlined"
         >
-          <v-icon left>
+          <v-icon start>
             $feedback
           </v-icon>
           {{ $t('recall.actions.feedback') }}
         </v-btn>
       </template>
       <template #nav-actions>
-        <v-btn color="primary" text :to="{ name: 'survey-home', params: { surveyId } }">
+        <v-btn color="primary" :to="{ name: 'survey-home', params: { surveyId } }" variant="text">
           <span class="text-overline font-weight-medium">{{ $t('common.home') }}</span>
           <v-icon class="pb-1">
             $home
@@ -41,8 +41,8 @@
           v-if="feedbackEnabled"
           color="primary"
           :disabled="!feedbackAvailable"
-          text
           :to="{ name: 'feedback-home', params: { surveyId } }"
+          variant="text"
         >
           <span class="text-overline font-weight-medium">
             {{ $t('recall.actions.nav.feedback') }}
@@ -56,7 +56,7 @@
     <survey-rating
       v-if="prompt.rating"
       v-bind="{ submissionId, surveyId, type: 'recall' }"
-      class="grey lighten-4 pt-6"
+      class="bg-grey-lighten-4 pt-6"
     />
   </div>
 </template>
@@ -64,7 +64,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { SurveyRating } from '@intake24/survey/components';
+import { SurveyRating } from '@intake24/survey/components/elements';
 import { usePromptUtils } from '@intake24/survey/composables';
 
 import createBasePrompt from '../createBasePrompt';
diff --git a/apps/survey/src/components/prompts/standard/FoodSearchPrompt.vue b/apps/survey/src/components/prompts/standard/FoodSearchPrompt.vue
index 55a0568d48..53b7c5f2a9 100644
--- a/apps/survey/src/components/prompts/standard/FoodSearchPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/FoodSearchPrompt.vue
@@ -2,11 +2,11 @@
   <card-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
     <v-card-text>
       <food-browser
-        v-bind="{ localeId, surveySlug, prompt, section, rootCategory, value }"
+        v-bind="{ localeId, surveySlug, prompt, section, rootCategory, modelValue }"
         @food-missing="foodMissing"
         @food-selected="foodSelected"
-        @input="$emit('input', $event)"
         @recipe-builder="recipeBuilder"
+        @update:model-value="$emit('update:modelValue', $event)"
       />
     </v-card-text>
   </card-layout>
@@ -45,13 +45,13 @@ export default defineComponent({
     surveySlug: {
       type: String,
     },
-    value: {
+    modelValue: {
       type: String as PropType<string | null>,
       required: true,
     },
   },
 
-  emits: ['food-missing', 'food-selected', 'input', 'recipe-builder'],
+  emits: ['action', 'food-missing', 'food-selected', 'update:modelValue', 'recipe-builder'],
 
   setup(props, ctx) {
     const { action } = usePromptUtils(props, ctx);
diff --git a/apps/survey/src/components/prompts/standard/MealAddPrompt.vue b/apps/survey/src/components/prompts/standard/MealAddPrompt.vue
index e99c36fe47..4568a0864c 100644
--- a/apps/survey/src/components/prompts/standard/MealAddPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/MealAddPrompt.vue
@@ -9,6 +9,7 @@
           <component
             :is="prompt.custom ? 'v-combobox' : 'v-select'"
             v-model="state"
+            v-model:search-input="state"
             autofocus
             class="meal-add-prompt__combobox"
             clearable
@@ -17,7 +18,6 @@
             :label="promptI18n.label"
             outlined
             :rules="rules"
-            :search-input.sync="state"
           />
         </v-col>
       </v-row>
@@ -27,12 +27,12 @@
         class="px-4"
         color="primary"
         :disabled="!hasMeals"
-        large
-        text
+        size="large"
         :title="promptI18n.no"
+        variant="text"
         @click.stop="action('cancel')"
       >
-        <v-icon left>
+        <v-icon start>
           $cancel
         </v-icon>
         {{ promptI18n.no }}
@@ -41,11 +41,11 @@
         class="px-4"
         color="primary"
         :disabled="!isValid"
-        large
+        size="large"
         :title="promptI18n.yes"
         @click="action('next')"
       >
-        <v-icon left>
+        <v-icon start>
           $add
         </v-icon>
         {{ promptI18n.yes }}
@@ -55,8 +55,8 @@
       <v-btn
         color="primary"
         :disabled="!hasMeals"
-        text
         :title="promptI18n.no"
+        variant="text"
         @click="action('cancel')"
       >
         <span class="text-overline font-weight-medium">
@@ -81,7 +81,7 @@
 <script lang="ts">
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
-import { VCombobox, VSelect } from 'vuetify/lib';
+import { VCombobox, VSelect } from 'vuetify/components';
 
 import { useI18n } from '@intake24/i18n';
 import { usePromptUtils } from '@intake24/survey/composables';
@@ -104,23 +104,23 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: String,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
-    const { i18n, translatePath } = useI18n();
+    const { i18n: { t }, translatePath } = useI18n();
     const { action, params, type } = usePromptUtils(props, ctx);
 
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
       },
     });
 
@@ -134,11 +134,11 @@ export default defineComponent({
       () => `prompts.${type.value}${props.prompt.custom ? '.custom' : ''}`,
     );
     const promptI18n = computed(() => ({
-      exists: i18n.t(`prompts.${type.value}.exists`),
-      no: i18n.t(`prompts.${type.value}.no`),
-      yes: i18n.t(`prompts.${type.value}.yes`),
+      exists: t(`prompts.${type.value}.exists`),
+      no: t(`prompts.${type.value}.no`),
+      yes: t(`prompts.${type.value}.yes`),
       description: translatePath(`${i18nPrefix.value}.description`, params.value, true),
-      label: i18n.t(`${i18nPrefix.value}.label`),
+      label: t(`${i18nPrefix.value}.label`),
     }));
 
     const rules = [
diff --git a/apps/survey/src/components/prompts/standard/MealDurationPrompt.vue b/apps/survey/src/components/prompts/standard/MealDurationPrompt.vue
index b7529ac36e..aa36b7031e 100644
--- a/apps/survey/src/components/prompts/standard/MealDurationPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/MealDurationPrompt.vue
@@ -6,16 +6,17 @@
           v-model="state"
           class="quantity-slider__slider px-8"
           color="secondary"
-          :max="prompt.slider.max.value"
-          :min="prompt.slider.min.value"
+          :max="prompt.slider.max.value ?? undefined"
+          :min="prompt.slider.min.value ?? undefined"
           :step="prompt.slider.step"
-          :style="{ 'padding-top': `${prompt.slider.current.size + 10}px` }"
           :thumb-label="prompt.slider.current ? `always` : false"
-          :thumb-size="prompt.slider.current.size"
+          :thumb-size="25"
+          track-color="primary"
+          track-size="12"
         >
-          <template #thumb-label="{ value }">
+          <template #thumb-label="{ modelValue: thumbValue }">
             <div class="d-flex flex-column align-center">
-              <span class="text-h5 font-weight-bold">{{ value }}</span>
+              <span class="text-h5 font-weight-bold">{{ thumbValue }}</span>
               <span v-if="prompt.slider.current.label" class="text-h6 font-weight-bold">
                 {{ translate(prompt.slider.current.label) }}
               </span>
@@ -67,12 +68,12 @@ export default defineComponent({
       type: Object as PropType<MealState>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Number,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { translate } = useI18n();
@@ -80,10 +81,10 @@ export default defineComponent({
 
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
       },
     });
 
@@ -91,7 +92,7 @@ export default defineComponent({
     const promptI18n = computed(() => translatePrompt(['minutes', 'confirm']));
 
     onMounted(() => {
-      if (typeof props.value === 'undefined')
+      if (typeof props.modelValue === 'undefined')
         state.value = props.prompt.slider.current.value ?? props.prompt.slider.min.value ?? 0;
     });
 
diff --git a/apps/survey/src/components/prompts/standard/MealGapPrompt.vue b/apps/survey/src/components/prompts/standard/MealGapPrompt.vue
index 590ce65af9..879e20f7bf 100644
--- a/apps/survey/src/components/prompts/standard/MealGapPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/MealGapPrompt.vue
@@ -1,18 +1,18 @@
 <template>
   <card-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
     <template #prompt-description>
-      <div class="px-4 pt-4" :class="{ 'pb-4': isMobile }" v-html="promptI18n.description" />
+      <div class="px-4 pt-4" :class="{ 'pb-4': $vuetify.display.mobile }" v-html="promptI18n.description" />
     </template>
     <template #actions>
       <v-btn
         class="px-4"
         color="primary"
-        large
-        text
+        size="large"
         :title="promptI18n.yes"
+        variant="text"
         @click.stop="action('addMeal')"
       >
-        <v-icon left>
+        <v-icon start>
           $add
         </v-icon>
         {{ promptI18n.yes }}
@@ -20,19 +20,19 @@
       <v-btn
         class="px-4"
         color="primary"
-        large
-        text
+        size="large"
         :title="promptI18n.no"
+        variant="text"
         @click.stop="action('next')"
       >
-        <v-icon left>
+        <v-icon start>
           $next
         </v-icon>
         {{ promptI18n.no }}
       </v-btn>
     </template>
     <template #nav-actions>
-      <v-btn color="primary" text :title="promptI18n.yes" @click.stop="action('addMeal')">
+      <v-btn color="primary" :title="promptI18n.yes" variant="text" @click.stop="action('addMeal')">
         <span class="text-overline font-weight-medium">
           {{ promptI18n.yes }}
         </span>
@@ -41,7 +41,7 @@
         </v-icon>
       </v-btn>
       <v-divider vertical />
-      <v-btn color="primary" text :title="promptI18n.no" @click.stop="action('next')">
+      <v-btn color="primary" :title="promptI18n.no" variant="text" @click.stop="action('next')">
         <span class="text-overline font-weight-medium">
           {{ promptI18n.no }}
         </span>
@@ -76,7 +76,7 @@ export default defineComponent({
   },
 
   setup(props, ctx) {
-    const { i18n } = useI18n();
+    const { i18n: { t } } = useI18n();
     const { action, translatePrompt, type } = usePromptUtils(props, ctx);
     const { getMealName, getMealTime } = useMealUtils();
 
@@ -84,7 +84,7 @@ export default defineComponent({
       const [startMeal, endMeal] = props.meals;
 
       if (startMeal && endMeal) {
-        return i18n.t(`prompts.${type.value}.between`, {
+        return t(`prompts.${type.value}.between`, {
           startMeal: getMealName(startMeal),
           startMealTime: getMealTime(startMeal) ?? '',
           endMeal: getMealName(endMeal),
@@ -93,14 +93,14 @@ export default defineComponent({
       }
 
       if (startMeal) {
-        return i18n.t(`prompts.${type.value}.before`, {
+        return t(`prompts.${type.value}.before`, {
           meal: getMealName(startMeal),
           mealTime: getMealTime(startMeal) ?? '',
         });
       }
 
       if (endMeal) {
-        return i18n.t(`prompts.${type.value}.after`, {
+        return t(`prompts.${type.value}.after`, {
           meal: getMealName(endMeal),
           mealTime: getMealTime(endMeal) ?? '',
         });
diff --git a/apps/survey/src/components/prompts/standard/MealTimePrompt.vue b/apps/survey/src/components/prompts/standard/MealTimePrompt.vue
index f44402e136..b3edd68fc9 100644
--- a/apps/survey/src/components/prompts/standard/MealTimePrompt.vue
+++ b/apps/survey/src/components/prompts/standard/MealTimePrompt.vue
@@ -5,9 +5,12 @@
         <v-time-picker
           v-model="state"
           :allowed-minutes="allowedMinutes"
+          bg-color="grey-lighten-5"
+          color="primary"
           :format="prompt.format"
           full-width
-          :landscape="$vuetify.breakpoint.smAndUp"
+          :landscape="$vuetify.display.smAndUp"
+          title=""
         />
       </v-form>
     </v-card-text>
@@ -15,9 +18,9 @@
       <v-btn
         class="px-4"
         color="primary"
-        large
-        text
+        size="large"
         :title="promptI18n.no"
+        variant="text"
         @click.stop="action('cancel')"
       >
         {{ promptI18n.no }}
@@ -25,7 +28,7 @@
       <v-btn
         class="px-4"
         color="primary"
-        large
+        size="large"
         :title="promptI18n.yes"
         @click.stop="action('next')"
       >
@@ -33,7 +36,7 @@
       </v-btn>
     </template>
     <template #nav-actions>
-      <v-btn color="primary" text :title="promptI18n.no" @click.stop="action('cancel')">
+      <v-btn color="primary" :title="promptI18n.no" variant="text" @click.stop="action('cancel')">
         <span class="text-overline font-weight-medium">
           {{ promptI18n.no }}
         </span>
@@ -79,13 +82,13 @@ export default defineComponent({
       type: Object as PropType<MealState>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Object as PropType<MealTime>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { action, translatePrompt } = usePromptUtils(props, ctx);
@@ -96,10 +99,10 @@ export default defineComponent({
     const promptI18n = computed(() => translatePrompt(['no', 'yes']));
     const state = computed({
       get() {
-        return fromMealTime(props.value, false);
+        return fromMealTime(props.modelValue, false);
       },
       set(value) {
-        ctx.emit('input', toMealTime(value));
+        ctx.emit('update:modelValue', toMealTime(value));
       },
     });
     const isValid = computed(() => !!state.value);
@@ -111,8 +114,8 @@ export default defineComponent({
 
 <style lang="scss">
 .meal-time-prompt {
-  .v-time-picker-title {
-    justify-content: center;
+  .v-time-picker__title {
+    text-align: center;
   }
 }
 </style>
diff --git a/apps/survey/src/components/prompts/standard/ReadyMealPrompt.vue b/apps/survey/src/components/prompts/standard/ReadyMealPrompt.vue
index 4e9aee36da..ae4129e71f 100644
--- a/apps/survey/src/components/prompts/standard/ReadyMealPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/ReadyMealPrompt.vue
@@ -1,10 +1,10 @@
 <template>
   <card-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
     <v-card-text class="pt-2">
-      <v-card v-for="(food, idx) in state" :key="food.id" class="mb-3" outlined>
+      <v-card v-for="(food, idx) in state" :key="food.id" border class="mb-3">
         <v-card-text class="d-flex flex-column flex-sm-row justify-space-between gr-2">
           <div class="d-flex align-center">
-            <v-btn class="secondary font-weight-medium mr-2" dark icon readonly size="x-small">
+            <v-btn class="bg-secondary font-weight-medium me-2" icon readonly size="x-small">
               {{ idx + 1 }}
             </v-btn>
             <span class="text-subtitle-1 font-weight-medium">{{ food.name }}</span>
@@ -45,23 +45,23 @@ export default defineComponent({
       type: Object as PropType<MealState>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Array as PropType<PromptStates['ready-meal-prompt']>,
       required: true,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { action } = usePromptUtils(props, ctx);
 
     const state = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value) {
-        ctx.emit('input', value);
+        ctx.emit('update:modelValue', value);
       },
     });
     const isValid = computed(() => state.value.every(food => food.value !== undefined));
diff --git a/apps/survey/src/components/prompts/standard/RecallDatePrompt.vue b/apps/survey/src/components/prompts/standard/RecallDatePrompt.vue
index 0c6808a02a..5d26233010 100644
--- a/apps/survey/src/components/prompts/standard/RecallDatePrompt.vue
+++ b/apps/survey/src/components/prompts/standard/RecallDatePrompt.vue
@@ -4,7 +4,7 @@
       <v-date-picker
         v-model="state"
         full-width
-        :landscape="!isMobile"
+        :landscape="!$vuetify.display.mobile"
         v-bind="datePickerProps"
       />
     </v-card-text>
@@ -32,13 +32,13 @@ export default defineComponent({
   mixins: [createBasePrompt<'recall-date-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: String as PropType<string | null>,
       default: null,
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
     const { action, customPromptLayout } = usePromptUtils(props, ctx);
diff --git a/apps/survey/src/components/prompts/standard/RedirectPrompt.vue b/apps/survey/src/components/prompts/standard/RedirectPrompt.vue
index 2741374629..09e595007f 100644
--- a/apps/survey/src/components/prompts/standard/RedirectPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/RedirectPrompt.vue
@@ -7,9 +7,9 @@
             v-if="prompt.timer"
             class="mb-6"
             color="secondary"
+            :model-value="timerValue"
             :rotate="-90"
             :size="200"
-            :value="timerValue"
             :width="20"
           >
             <div class="d-flex align-center flex-column">
@@ -22,11 +22,11 @@
         <v-btn
           class="px-4"
           color="secondary"
-          large
-          outlined
+          size="large"
           :to="{ name: 'survey-home', params: { surveyId } }"
+          variant="outlined"
         >
-          <v-icon left>
+          <v-icon start>
             $home
           </v-icon>
           {{ $t('common.home') }}
@@ -36,11 +36,11 @@
           class="px-4"
           color="primary"
           :disabled="!feedbackAvailable"
-          large
-          outlined
+          size="large"
           :to="{ name: 'feedback-home', params: { surveyId } }"
+          variant="outlined"
         >
-          <v-icon left>
+          <v-icon start>
             $feedback
           </v-icon>
           {{ $t('recall.actions.feedback') }}
@@ -51,12 +51,12 @@
             class="px-4"
             color="primary"
             :href="followUpUrl"
-            large
-            outlined
+            size="large"
             :target="prompt.target"
             :title="promptI18n.goTo"
+            variant="outlined"
           >
-            <v-icon left>
+            <v-icon start>
               $redirect
             </v-icon>
             {{ promptI18n.goTo }}
@@ -77,8 +77,8 @@
           v-if="feedbackEnabled"
           color="primary"
           :disabled="!feedbackAvailable"
-          text
           :to="{ name: 'feedback-home', params: { surveyId } }"
+          variant="text"
         >
           <span class="text-overline font-weight-medium">
             {{ $t('recall.actions.nav.feedback') }}
@@ -88,7 +88,7 @@
           </v-icon>
         </v-btn>
         <v-divider vertical />
-        <v-btn v-if="followUpUrl" color="primary" :href="followUpUrl" :target="prompt.target" text>
+        <v-btn v-if="followUpUrl" color="primary" :href="followUpUrl" :target="prompt.target" variant="text">
           <span class="text-overline font-weight-medium">
             {{ promptI18n.goTo }}
           </span>
@@ -101,7 +101,7 @@
     <survey-rating
       v-if="prompt.rating"
       v-bind="{ submissionId, surveyId, type: 'recall' }"
-      class="grey lighten-4 pt-6"
+      class="bg-grey-lighten-4 pt-6"
     />
   </div>
 </template>
@@ -109,7 +109,7 @@
 <script lang="ts">
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
 
-import { SurveyRating } from '@intake24/survey/components';
+import { SurveyRating } from '@intake24/survey/components/elements';
 import { usePromptUtils } from '@intake24/survey/composables';
 
 import createBasePrompt from '../createBasePrompt';
@@ -140,6 +140,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['action'],
+
   setup(props, ctx) {
     const { action, translatePrompt } = usePromptUtils(props, ctx);
 
diff --git a/apps/survey/src/components/prompts/standard/ReviewConfirmPrompt.vue b/apps/survey/src/components/prompts/standard/ReviewConfirmPrompt.vue
index e396aa8cae..879bbfa5de 100644
--- a/apps/survey/src/components/prompts/standard/ReviewConfirmPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/ReviewConfirmPrompt.vue
@@ -6,38 +6,37 @@
     </v-col>
     <v-col class="px-0 px-sm-3 align-center text-center justify-center" md="8" sm="12">
       <v-card dense flat>
-        <v-list class="flex-grow-1 flex-shrink-0" dense>
+        <v-list class="flex-grow-1 flex-shrink-0" density="compact">
           <v-list-item v-for="meal in meals" :key="meal.id" :inactive="true" link :ripple="false">
-            <v-list-item-icon>
-              <v-icon> $meal</v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-group :value="meal.time ? true : false">
-                <template #activator>
+            <template #prepend>
+              <v-icon>$meal</v-icon>
+            </template>
+            <v-list-group :value="meal.time ? true : false">
+              <template #activator>
+                <v-list-item-title
+                  class="font-weight-bold text-wrap"
+                  @click="chooseMeal(meal.id, meal.name.en, meal.foods, 'meal')"
+                >
+                  {{ meal.name[$i18n.locale] }}
+                </v-list-item-title>
+                <v-list-item-action>
+                  <span v-if="meal.time">
+                    {{ stringTime(meal.time) }}
+                  </span>
+                  <v-icon v-else size="x-small">
+                    $question
+                  </v-icon>
+                </v-list-item-action>
+              </template>
+              <v-list v-if="meal.foods.length && meal.time ? true : false">
+                <v-list-item v-for="(food, i) in meal.foods" :key="i" link>
                   <v-list-item-title
-                    class="font-weight-bold text-wrap"
-                    @click="chooseMeal(meal.id, meal.name.en, meal.foods, 'meal')"
+                    class="text-wrap"
+                    @click="chooseFood(food.id, foodDisplayName(food), 'food')"
                   >
-                    {{ meal.name[$i18n.locale] }}
+                    {{ foodDisplayName(food) }}
                   </v-list-item-title>
-                  <v-list-item-action>
-                    <v-list-item-action-text v-if="meal.time">
-                      {{ stringTime(meal.time) }}
-                    </v-list-item-action-text>
-                    <v-icon v-else x-small>
-                      $question
-                    </v-icon>
-                  </v-list-item-action>
-                </template>
-                <v-list v-if="meal.foods.length && meal.time ? true : false">
-                  <v-list-item v-for="(food, i) in meal.foods" :key="i" link>
-                    <v-list-item-title
-                      class="text-wrap"
-                      @click="chooseFood(food.id, foodDisplayName(food), 'food')"
-                    >
-                      {{ foodDisplayName(food) }}
-                    </v-list-item-title>
-                    <!-- <v-list-item-action>
+                  <!-- <v-list-item-action>
                       <v-icon v-if="food.data" color="success" x-small>
                         $ok
                       </v-icon>
@@ -47,10 +46,9 @@
                         $ok
                       </v-icon>
                     </v-list-item-action> -->
-                  </v-list-item>
-                </v-list>
-              </v-list-group>
-            </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </v-list-group>
           </v-list-item>
         </v-list>
       </v-card>
@@ -83,7 +81,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['meal-selected', 'food-selected'],
+  emits: ['action', 'meal-selected', 'food-selected'],
 
   setup(props, ctx) {
     const { action } = usePromptUtils(props, ctx);
diff --git a/apps/survey/src/components/prompts/standard/SameAsBeforePrompt.vue b/apps/survey/src/components/prompts/standard/SameAsBeforePrompt.vue
index 040197b610..2c8f3dd90c 100644
--- a/apps/survey/src/components/prompts/standard/SameAsBeforePrompt.vue
+++ b/apps/survey/src/components/prompts/standard/SameAsBeforePrompt.vue
@@ -1,53 +1,43 @@
 <template>
   <card-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
     <v-card-text class="pt-2 d-flex">
-      <v-card flat outlined width="100%">
-        <v-list class="px-4" color="grey lighten-4">
-          <v-subheader>{{ translate(sabFood.food.data.localName) }}</v-subheader>
+      <v-card border flat width="100%">
+        <v-list class="px-4" color="grey-lighten-4">
+          <v-list-subheader>{{ translate(sabFood.food.data.localName) }}</v-list-subheader>
           <v-divider />
-          <v-list-item class="pl-0" dense>
-            <v-list-item-avatar class="my-auto mr-2">
+          <v-list-item class="ps-0" density="compact">
+            <template #prepend>
               <v-icon>fas fa-caret-right</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ promptI18n.serving }}</v-list-item-title>
-            </v-list-item-content>
+            </template>
+            <v-list-item-title>{{ promptI18n.serving }}</v-list-item-title>
           </v-list-item>
-          <v-list-item v-if="showLeftovers" class="pl-0" dense>
-            <v-list-item-avatar class="my-auto mr-2">
+          <v-list-item v-if="showLeftovers" class="ps-0" density="compact">
+            <template #prepend>
               <v-icon>fas fa-caret-right</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ promptI18n.leftovers }}</v-list-item-title>
-            </v-list-item-content>
+            </template>
+            <v-list-item-title>{{ promptI18n.leftovers }}</v-list-item-title>
           </v-list-item>
-          <v-list-item v-if="!linkedFoods.length" class="pl-0" dense>
-            <v-list-item-avatar class="my-auto mr-2">
+          <v-list-item v-if="!linkedFoods.length" class="ps-0" density="compact">
+            <template #prepend>
               <v-icon>fas fa-caret-right</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ promptI18n.noAddedFoods }}</v-list-item-title>
-            </v-list-item-content>
+            </template>
+            <v-list-item-title>{{ promptI18n.noAddedFoods }}</v-list-item-title>
           </v-list-item>
-          <v-list-item v-if="count > 1" class="pl-0" dense>
-            <v-list-item-avatar class="my-auto mr-2">
+          <v-list-item v-if="count > 1" class="ps-0" density="compact">
+            <template #prepend>
               <v-icon>fas fa-caret-right</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ promptI18n.count }}</v-list-item-title>
-            </v-list-item-content>
+            </template>
+            <v-list-item-title>{{ promptI18n.count }}</v-list-item-title>
           </v-list-item>
         </v-list>
-        <v-list v-if="linkedFoods.length" class="px-4" color="grey lighten-4">
-          <v-subheader>{{ promptI18n.hadWith }}</v-subheader>
+        <v-list v-if="linkedFoods.length" class="px-4" color="grey-lighten-4">
+          <v-list-subheader>{{ promptI18n.hadWith }}</v-list-subheader>
           <v-divider />
-          <v-list-item v-for="linkedFood in linkedFoods" :key="linkedFood.id" class="pl-0" dense>
-            <v-list-item-avatar class="my-auto mr-2">
+          <v-list-item v-for="linkedFood in linkedFoods" :key="linkedFood.id" class="ps-0" density="compact">
+            <template #prepend>
               <v-icon>fas fa-caret-right</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ linkedFood.text }}</v-list-item-title>
-            </v-list-item-content>
+            </template>
+            <v-list-item-title>{{ linkedFood.text }}</v-list-item-title>
           </v-list-item>
         </v-list>
       </v-card>
@@ -56,12 +46,12 @@
       <v-btn
         class="px-4"
         color="primary"
-        large
-        text
+        size="large"
         :title="promptI18n.notSame"
+        variant="text"
         @click.stop="action('notSame')"
       >
-        <v-icon left>
+        <v-icon start>
           $no
         </v-icon>
         {{ promptI18n.notSame }}
@@ -69,19 +59,19 @@
       <v-btn
         class="px-4"
         color="primary"
-        large
-        text
+        size="large"
         :title="promptI18n.same"
+        variant="text"
         @click.stop="action('same')"
       >
-        <v-icon left>
+        <v-icon start>
           $yes
         </v-icon>
         {{ promptI18n.same }}
       </v-btn>
     </template>
     <template #nav-actions>
-      <v-btn color="primary" text :title="$t('common.action.no')" @click.stop="action('notSame')">
+      <v-btn color="primary" :title="$t('common.action.no')" variant="text" @click.stop="action('notSame')">
         <span class="text-overline font-weight-medium">
           {{ $t('common.action.no') }}
         </span>
@@ -90,7 +80,7 @@
         </v-icon>
       </v-btn>
       <v-divider vertical />
-      <v-btn color="primary" text title="$t('common.action.yes')" @click.stop="action('same')">
+      <v-btn color="primary" title="$t('common.action.yes')" variant="text" @click.stop="action('same')">
         <span class="text-overline font-weight-medium">
           {{ $t('common.action.yes') }}
         </span>
@@ -128,7 +118,7 @@ export default defineComponent({
   },
 
   setup(props, ctx) {
-    const { translate, i18n } = useI18n();
+    const { i18n: { t }, translate } = useI18n();
     const { action, translatePrompt, type } = usePromptUtils(props, ctx);
     const { standardUnitRefs, resolveStandardUnits } = useStandardUnits();
     const survey = useSurvey();
@@ -195,23 +185,23 @@ export default defineComponent({
     );
 
     const count = computed(() => foodCount(props.sabFood.food));
-    const servingCount = computed(() => i18n.t(`prompts.${type.value}.count`, { count: foodCount(props.sabFood.food) }));
+    const servingCount = computed(() => t(`prompts.${type.value}.count`, { count: foodCount(props.sabFood.food) }));
 
     const serving = computed(() => {
       const amount = foodAmount(props.sabFood.food);
       const unit = foodUnit(props.sabFood.food);
 
-      return i18n.t(`prompts.${type.value}.serving`, { amount: `${amount} ${unit}` });
+      return t(`prompts.${type.value}.serving`, { amount: `${amount} ${unit}` });
     });
 
     const leftovers = computed(() => {
       const { leftoversWeight, servingWeight } = props.sabFood.food.portionSize ?? {};
       if (!servingWeight || !leftoversWeight)
-        return i18n.t(`prompts.${type.value}.noLeftovers.${isDrink.value ? 'drink' : 'food'}`);
+        return t(`prompts.${type.value}.noLeftovers.${isDrink.value ? 'drink' : 'food'}`);
 
       const leftoversPercentage = Math.round(leftoversWeight / (servingWeight / 100));
 
-      return i18n.t(`prompts.${type.value}.leftovers`, { amount: `${leftoversPercentage}%` });
+      return t(`prompts.${type.value}.leftovers`, { amount: `${leftoversPercentage}%` });
     });
 
     const leftoversEnabled = computed(() => {
diff --git a/apps/survey/src/components/prompts/standard/SplitFoodPrompt.vue b/apps/survey/src/components/prompts/standard/SplitFoodPrompt.vue
index 7729f032a6..baab1bb280 100644
--- a/apps/survey/src/components/prompts/standard/SplitFoodPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/SplitFoodPrompt.vue
@@ -1,22 +1,20 @@
 <template>
   <card-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
     <v-card-text class="pt-2">
-      <i18n class="text-subtitle-1" :path="`prompts.${type}.searchTerm`" tag="p">
+      <i18n-t class="text-subtitle-1" :keypath="`prompts.${type}.searchTerm`" tag="p">
         <template #food>
           <span class="font-weight-medium">{{ food.description }}</span>
         </template>
-      </i18n>
-      <v-card class="mb-4" flat outlined tile>
-        <v-list color="grey lighten-5 py-0" subheader>
-          <v-subheader>{{ promptI18n.split }}</v-subheader>
-          <template v-for="(suggestion, idx) in suggestions">
-            <v-list-item :key="suggestion" link>
-              <v-list-item-icon>
+      </i18n-t>
+      <v-card border class="mb-4" flat tile>
+        <v-list color="grey-lighten-5">
+          <v-list-subheader>{{ promptI18n.split }}</v-list-subheader>
+          <template v-for="(suggestion, idx) in suggestions" :key="suggestion">
+            <v-list-item link>
+              <template #prepend>
                 <v-icon>$food</v-icon>
-              </v-list-item-icon>
-              <v-list-item-content>
-                <v-list-item-title>{{ suggestion }}</v-list-item-title>
-              </v-list-item-content>
+              </template>
+              <v-list-item-title>{{ suggestion }}</v-list-item-title>
             </v-list-item>
             <v-divider v-if="idx + 1 < suggestions.length" :key="`div-${suggestion}`" />
           </template>
@@ -33,12 +31,12 @@
       <v-btn
         class="px-4"
         color="primary"
-        large
-        text
+        size="large"
         :title="promptI18n.separate"
+        variant="text"
         @click.stop="action('separate')"
       >
-        <v-icon left>
+        <v-icon start>
           fas fa-arrows-left-right-to-line
         </v-icon>
         {{ promptI18n.separate }}
@@ -46,19 +44,19 @@
       <v-btn
         class="px-4"
         color="primary"
-        large
-        text
+        size="large"
         :title="promptI18n.single"
+        variant="text"
         @click.stop="action('single')"
       >
-        <v-icon left>
+        <v-icon start>
           fas fa-arrow-up-long
         </v-icon>
         {{ promptI18n.single }}
       </v-btn>
     </template>
     <template #nav-actions>
-      <v-btn color="primary" text :title="promptI18n.separate" @click.stop="action('separate')">
+      <v-btn color="primary" :title="promptI18n.separate" variant="text" @click.stop="action('separate')">
         <span class="text-overline font-weight-medium">
           {{ promptI18n.separate }}
         </span>
@@ -67,7 +65,7 @@
         </v-icon>
       </v-btn>
       <v-divider vertical />
-      <v-btn color="primary" text :title="promptI18n.single" @click.stop="action('single')">
+      <v-btn color="primary" :title="promptI18n.single" variant="text" @click.stop="action('single')">
         <span class="text-overline font-weight-medium">
           {{ promptI18n.single }}
         </span>
diff --git a/apps/survey/src/components/prompts/standard/SubmitPrompt.vue b/apps/survey/src/components/prompts/standard/SubmitPrompt.vue
index 0f6288ed0c..f75d6bf706 100644
--- a/apps/survey/src/components/prompts/standard/SubmitPrompt.vue
+++ b/apps/survey/src/components/prompts/standard/SubmitPrompt.vue
@@ -1,14 +1,14 @@
 <template>
   <card-layout v-bind="{ food, meal, prompt, section, isValid }" @action="action">
     <review-meal-list
-      v-if="!$vuetify.breakpoint.mobile && prompt.review.desktop"
+      v-if="!$vuetify.display.mobile && prompt.review.desktop"
       v-bind="{ meals, review: prompt.review.desktop }"
       @action="action"
       @bottom-reached="updateBottomReached('desktop', $event)"
       @reviewed="updateReviewed('desktop', $event)"
     />
     <review-meal-list-mobile
-      v-if="$vuetify.breakpoint.mobile && prompt.review.mobile"
+      v-if="$vuetify.display.mobile && prompt.review.mobile"
       v-bind="{ meals, review: prompt.review.mobile }"
       @action="action"
       @bottom-reached="updateBottomReached('mobile', $event)"
@@ -20,7 +20,7 @@
       </next>
     </template>
     <template #nav-actions>
-      <v-btn color="primary" text @click.stop="action('addMeal')">
+      <v-btn color="primary" variant="text" @click.stop="action('addMeal')">
         <span class="text-overline font-weight-medium">
           {{ $t('recall.actions.nav.addMeal') }}
         </span>
diff --git a/apps/survey/src/components/prompts/standard/aggregate-choice/AggregateChoicePrompt.vue b/apps/survey/src/components/prompts/standard/aggregate-choice/AggregateChoicePrompt.vue
index e092167c43..649430bcbd 100644
--- a/apps/survey/src/components/prompts/standard/aggregate-choice/AggregateChoicePrompt.vue
+++ b/apps/survey/src/components/prompts/standard/aggregate-choice/AggregateChoicePrompt.vue
@@ -1,69 +1,66 @@
 <template>
   <component :is="customPromptLayout" v-bind="{ food, meal, prompt, section, isValid }" @action="action">
     <v-card dense flat>
-      <v-list dense>
-        <v-list-item v-for="meal in filteredMeals" :key="meal.id" :class="{ 'pa-0': isMobile }" :inactive="true" link :ripple="false">
-          <v-list-item-content>
-            <v-list-group :value="meal.time ? true : false">
-              <template #activator>
-                <v-list-item-title class="font-weight-bold meal-name text-wrap">
-                  {{ meal.name[$i18n.locale] }}
-                </v-list-item-title>
+      <v-list v-model:opened="opened" density="compact">
+        <v-list-group v-for="meal in filteredMeals" :key="meal.id" :value="meal.id">
+          <template #activator="{ props }">
+            <v-list-item class="text-primary">
+              <v-list-item-title class="font-weight-bold text-wrap" v-bind="props">
+                {{ meal.name[$i18n.locale] }}
+              </v-list-item-title>
+              <template #append>
                 <v-list-item-action>
-                  <v-list-item-action-text v-if="meal.time" class="meal-time">
+                  <span v-if="meal.time">
                     {{ stringTime(meal.time) }}
-                  </v-list-item-action-text>
-                  <v-icon v-else x-small>
+                  </span>
+                  <v-icon v-else size="x-small">
                     $question
                   </v-icon>
                 </v-list-item-action>
               </template>
-
-              <v-list-item>
-                <v-list-item-content>
-                  <v-container :class="{ 'pa-0': isMobile }">
-                    <div v-if="localeOptions.length <= 3">
-                      <v-row class="mb-4" style="flex-wrap: nowrap">
-                        <v-col cols="3" />
-                        <v-col v-for="(option, index) in localeOptions" :key="index" class="pl-0" cols="3">
-                          <label class="option-label">{{ option.label }}</label>
-                        </v-col>
-                      </v-row>
-                      <v-radio-group
-                        v-for="food in meal.foods" :key="food.id" v-model="promptAnswers[food.id]" class="mb-0 mt-0" dense row
-                        @input="updatePromptAnswers()"
-                      >
-                        <v-col class="pa-0 pr-3 ma-0" cols="3">
-                          <span class="food-label">{{ foodDisplayName(food) }}</span>
-                        </v-col>
-
-                        <v-col v-for="(option, optIndex) in localeOptions" :key="optIndex" class="pa-0 ma-0" cols="3">
-                          <v-radio :value="option.value" />
-                        </v-col>
-                      </v-radio-group>
-                    </div>
-                    <div v-else>
-                      <v-row
-                        v-for="food in meal.foods" :key="food.id" v-model="promptAnswers[food.id]" align="baseline"
-                        class="mb-0 mt-0" dense row style="flex-wrap: nowrap"
-                      >
-                        <v-col class="pa-0 pr-4 ma-0 ml-2" cols="4">
-                          <span class="food-label">{{ foodDisplayName(food) }}</span>
-                        </v-col>
-                        <v-col class="pa-0 ma-0">
-                          <v-select
-                            v-model="promptAnswers[food.id]"
-                            class="option-label" cols="8" item-text="label" item-value="value" :items="localeOptions" md="6"
-                          />
-                        </v-col>
-                      </v-row>
-                    </div>
-                  </v-container>
-                </v-list-item-content>
-              </v-list-item>
-            </v-list-group>
-          </v-list-item-content>
-        </v-list-item>
+            </v-list-item>
+          </template>
+          <v-list-item :style="{ 'padding-inline-start': '0 !important' }">
+            <v-container :class="{ 'pa-2': $vuetify.display.mobile }">
+              <div v-if="localeOptions.length <= 3">
+                <v-row class="mb-4" style="flex-wrap: nowrap">
+                  <v-col cols="3" />
+                  <v-col v-for="(option, index) in localeOptions" :key="index" class="ps-0" cols="3">
+                    <label class="option-label">{{ option.label }}</label>
+                  </v-col>
+                </v-row>
+                <v-radio-group
+                  v-for="food in meal.foods" :key="food.id" v-model="promptAnswers[food.id]" class="mb-0 mt-0" density="compact" inline
+                  @update:model-value="updatePromptAnswers()"
+                >
+                  <v-col class="pa-0 pe-3 ma-0" cols="3">
+                    <span class="food-label">{{ foodDisplayName(food) }}</span>
+                  </v-col>
+
+                  <v-col v-for="(option, optIndex) in localeOptions" :key="optIndex" class="pa-0 ma-0" cols="3">
+                    <v-radio :value="option.value" />
+                  </v-col>
+                </v-radio-group>
+              </div>
+              <div v-else>
+                <v-row
+                  v-for="food in meal.foods" :key="food.id" v-model="promptAnswers[food.id]" align="baseline"
+                  class="mb-0 mt-0" dense row style="flex-wrap: nowrap"
+                >
+                  <v-col class="pa-0 pe-4 ma-0 ms-2" cols="4">
+                    <span class="food-label">{{ foodDisplayName(food) }}</span>
+                  </v-col>
+                  <v-col class="pa-0 ma-0">
+                    <v-select
+                      v-model="promptAnswers[food.id]"
+                      class="option-label" cols="8" item-title="label" item-value="value" :items="localeOptions" md="6"
+                    />
+                  </v-col>
+                </v-row>
+              </div>
+            </v-container>
+          </v-list-item>
+        </v-list-group>
       </v-list>
     </v-card>
     <template #actions>
@@ -95,7 +92,7 @@ export default defineComponent({
   mixins: [createBasePrompt<'aggregate-choice-prompt'>()],
 
   props: {
-    value: {
+    modelValue: {
       type: Object as PropType<Record<string, CustomPromptAnswer>>,
       required: true,
     },
@@ -105,16 +102,18 @@ export default defineComponent({
     },
   },
 
-  emits: ['input'],
+  emits: ['action', 'update:modelValue'],
 
   setup(props, ctx) {
-    const { i18n } = useI18n();
+    const { i18n: { locale } } = useI18n();
 
     const localeOptions = computed(
-      () => props.prompt.options[i18n.locale] ?? props.prompt.options.en,
+      () => props.prompt.options[locale.value] ?? props.prompt.options.en,
     );
 
-    const promptAnswers = ref(props.value);
+    const opened = ref(props.filteredMeals.map(meal => meal.id));
+
+    const promptAnswers = ref(props.modelValue);
 
     const { action, customPromptLayout, errors, hasErrors, type } = usePromptUtils(
       props,
@@ -135,11 +134,11 @@ export default defineComponent({
     };
 
     const isValid = computed(() => {
-      return props.filteredMeals.every(meal => meal.foods.every(food => props.value[food.id] !== undefined));
+      return props.filteredMeals.every(meal => meal.foods.every(food => props.modelValue[food.id] !== undefined));
     });
 
     const updatePromptAnswers = () => {
-      ctx.emit('input', promptAnswers.value);
+      ctx.emit('update:modelValue', promptAnswers.value);
     };
 
     return {
@@ -150,6 +149,7 @@ export default defineComponent({
       localeOptions,
       type,
       foodDisplayName,
+      opened,
       stringTime,
       isValid,
       promptAnswers,
@@ -170,12 +170,4 @@ export default defineComponent({
     font-size: smaller;
   }
 }
-
-.meal-name {
-  font-size: medium !important;
-}
-
-.meal-time {
-  font-size: medium !important;
-}
 </style>
diff --git a/apps/survey/src/components/prompts/standard/external-sources/OpenFoodFacts.vue b/apps/survey/src/components/prompts/standard/external-sources/OpenFoodFacts.vue
index 22b2eb0a7a..16b2e42e02 100644
--- a/apps/survey/src/components/prompts/standard/external-sources/OpenFoodFacts.vue
+++ b/apps/survey/src/components/prompts/standard/external-sources/OpenFoodFacts.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <v-card :tile="isMobile">
+    <v-card :tile="$vuetify.display.mobile">
       <v-card-text>
         <div class="d-flex gc-2">
           <component
-            :is="prompt.barcode.type"
+            :is="`${prompt.barcode.type}-input`"
+            v-model:model-value="searchTerm"
             :clearable="prompt.barcode.type === 'none'"
             flat
             hide-details
             :label="promptI18n.search"
-            :model-value.sync="searchTerm"
             :options="prompt.barcode"
             outlined
             :placeholder="promptI18n.search"
@@ -18,30 +18,30 @@
             @keydown.enter="search"
           />
           <v-btn
-            v-if="$vuetify.breakpoint.smAndUp"
+            v-if="$vuetify.display.smAndUp"
             color="primary"
             :disabled="!searchTerm?.length"
             elevation="0"
             height="initial"
+            size="x-large"
             :title="promptI18n.search"
-            x-large
             @click="search"
           >
-            <v-icon left>
+            <v-icon start>
               fas fa-turn-down fa-rotate-90
             </v-icon>
             {{ promptI18n.search }}
           </v-btn>
         </div>
         <template v-if="selectedProductDetails">
-          <v-btn class="my-4" color="grey lighten-2" elevation="0" large @click="back">
-            <v-icon left>
+          <v-btn class="my-4" color="grey-lighten-2" elevation="0" size="large" @click="back">
+            <v-icon start>
               fas fa-turn-up fa-flip-horizontal
             </v-icon>
             {{ promptI18n.back }}
           </v-btn>
           <v-card class="off-product-card pa-3">
-            <div class="pa-2 white rounded">
+            <div class="pa-2 bg-white rounded">
               <v-img
                 height="250px"
                 :src="selectedProductDetails.url"
@@ -85,15 +85,15 @@
             </div>
             <v-pagination
               v-model="response.page"
-              circle
               :length="Math.ceil(response.count / response.page_size)"
+              rounded
               :total-visible="5"
             />
           </div>
           <v-row justify="center">
             <v-col v-for="product in response.products" :key="product.code" cols="12" md="4" sm="6">
               <v-card class="off-product-card off-product-card--result pa-3" height="100%" link @click="select(product)">
-                <div class="pa-2 white rounded">
+                <div class="pa-2 bg-white rounded">
                   <v-img
                     height="250px"
                     :src="resolveImageUrl(product)"
@@ -108,9 +108,9 @@
           <div v-if="response.products.length > 9" class="d-flex justify-end align-center py-3">
             <v-pagination
               v-model="response.page"
-              circle
               :length="Math.ceil(response.count / response.page_size)"
               outlined
+              rounded
               :total-visible="7"
             />
           </div>
@@ -178,12 +178,14 @@ export default defineComponent({
       type: Object as PropType<Prompts['external-source-prompt']>,
       required: true,
     },
-    value: {
+    modelValue: {
       type: Object as PropType<PromptStates['external-source-prompt']>,
       required: true,
     },
   },
 
+  emits: ['action', 'update:modelValue'],
+
   setup(props, ctx) {
     const app = useApp();
     const { translatePrompt } = usePromptUtils(props, ctx);
@@ -228,7 +230,7 @@ export default defineComponent({
 
     const response = ref<OOFProductsResponse | undefined>();
     const selected = ref<OOFProduct | undefined>();
-    const searchTerm = ref(props.value.searchTerm);
+    const searchTerm = ref(props.modelValue.searchTerm);
 
     const promptI18n = computed(() =>
       translatePrompt([
@@ -364,13 +366,13 @@ export default defineComponent({
     });
 
     watch(selected, (data) => {
-      ctx.emit('input', { ...props.value, data });
+      ctx.emit('update:modelValue', { ...props.modelValue, data });
     });
 
     watchDebounced(
       searchTerm,
       async (searchTerm) => {
-        ctx.emit('input', { ...props.value, searchTerm });
+        ctx.emit('update:modelValue', { ...props.modelValue, searchTerm });
       },
       { debounce: 500, maxWait: 2000 },
     );
diff --git a/apps/survey/src/components/recall/recall-desktop.vue b/apps/survey/src/components/recall/recall-desktop.vue
index 2af7df0173..9e6f32a52d 100644
--- a/apps/survey/src/components/recall/recall-desktop.vue
+++ b/apps/survey/src/components/recall/recall-desktop.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row justify="center" :no-gutters="isMobile">
+  <v-row justify="center" :no-gutters="$vuetify.display.mobile">
     <v-slide-x-transition mode="out-in">
       <v-col v-if="showMealList" cols="3">
         <meal-list v-bind="{ meals }" @action="action" />
@@ -26,6 +26,11 @@ import { defineComponent } from 'vue';
 import { MealList } from '../layouts';
 import recallMixin from './recall-mixin';
 
+/* defineOptions({
+  name: 'RecallDesktop',
+  mixins: [recallMixin],
+}); */
+
 export default defineComponent({
   name: 'RecallDesktop',
 
diff --git a/apps/survey/src/components/recall/recall-mixin.ts b/apps/survey/src/components/recall/recall-mixin.ts
index 32a33d2556..54eaa50369 100644
--- a/apps/survey/src/components/recall/recall-mixin.ts
+++ b/apps/survey/src/components/recall/recall-mixin.ts
@@ -1,5 +1,6 @@
 import { mapState } from 'pinia';
 import { defineComponent } from 'vue';
+import { useGoTo } from 'vuetify';
 
 import type {
   ComponentType,
@@ -12,7 +13,6 @@ import type { MealCreationState, MealState, Selection } from '@intake24/common/t
 import type { SchemeEntryResponse } from '@intake24/common/types/http';
 import type { PromptInstance } from '@intake24/survey/dynamic-recall/dynamic-recall';
 import { isSelectionEqual } from '@intake24/common/types';
-import { useI18n } from '@intake24/i18n';
 import {
   customHandlers,
   portionSizeHandlers,
@@ -35,11 +35,11 @@ export default defineComponent({
   },
 
   data() {
-    const { translate } = useI18n();
+    const goTo = useGoTo();
     const survey = useSurvey();
 
     return {
-      translate,
+      goTo,
       survey,
       currentPrompt: null as PromptInstance | null,
       recallController: null as DynamicRecall | null,
@@ -123,7 +123,7 @@ export default defineComponent({
 
   watch: {
     currentPrompt() {
-      this.$vuetify.goTo(0);
+      this.goTo(0);
     },
   },
 
@@ -142,7 +142,7 @@ export default defineComponent({
     await this.nextPrompt();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     removeEventListener('popstate', this.onPopState);
   },
 
diff --git a/apps/survey/src/components/recall/recall-mobile.vue b/apps/survey/src/components/recall/recall-mobile.vue
index 6621778c64..a77d6b01be 100644
--- a/apps/survey/src/components/recall/recall-mobile.vue
+++ b/apps/survey/src/components/recall/recall-mobile.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row class="pt-0" justify="center" :no-gutters="isMobile">
+  <v-row class="pt-0" justify="center" :no-gutters="$vuetify.display.mobile">
     <v-col class="pa-0" cols="12">
       <transition mode="out-in" name="component-fade">
         <component
diff --git a/apps/survey/src/composables/use-prompt-utils.ts b/apps/survey/src/composables/use-prompt-utils.ts
index 4110dbba57..472c01ef55 100644
--- a/apps/survey/src/composables/use-prompt-utils.ts
+++ b/apps/survey/src/composables/use-prompt-utils.ts
@@ -29,8 +29,8 @@ export function usePromptUtils<
   P extends keyof Prompts,
   F extends FoodState | undefined,
   FP extends EncodedFood | RecipeBuilder | undefined,
->(props: UsePromptProps<P, F, FP>, { emit }: SetupContext<any>, confirmCallback?: () => boolean) {
-  const { i18n } = useI18n();
+>(props: UsePromptProps<P, F, FP>, { emit }: SetupContext<'action'[]>, confirmCallback?: () => boolean) {
+  const { i18n: { d, t } } = useI18n();
   const survey = useSurvey();
   const surveySlug = computed(() => survey.parameters?.slug);
   const { mealName, mealTime } = useMealUtils(props);
@@ -59,7 +59,7 @@ export function usePromptUtils<
     const build: Record<string, string | number> = {
       recallNumber: survey.recallNumber,
       userName: survey.user?.name ?? '',
-      recallDate: survey.recallDate ? i18n.d(survey.recallDate, 'recallDate') : '',
+      recallDate: survey.recallDate ? d(survey.recallDate, 'recallDate') : '',
     };
 
     if (foodName.value) {
@@ -97,7 +97,7 @@ export function usePromptUtils<
   ) => {
     return keys.reduce(
       (acc, key) => {
-        acc[key] = i18n.t(`prompts.${type.value}.${key}`, params[key] ?? {}).toString();
+        acc[key] = t(`prompts.${type.value}.${key}`, params[key] ?? {});
         return acc;
       },
       {} as Record<T, string>,
diff --git a/apps/survey/src/dynamic-recall/prompt-manager.ts b/apps/survey/src/dynamic-recall/prompt-manager.ts
index a18c6ad5a8..5ad017b6f6 100644
--- a/apps/survey/src/dynamic-recall/prompt-manager.ts
+++ b/apps/survey/src/dynamic-recall/prompt-manager.ts
@@ -323,7 +323,7 @@ function checkFoodStandardConditions(surveyState: SurveyState, foodState: FoodSt
       if (
         foodState.type === 'encoded-food'
         && (foodState.portionSizeMethodIndex === null
-        || !foodState.flags.includes('portion-size-option-complete'))
+          || !foodState.flags.includes('portion-size-option-complete'))
       ) {
         recallLog().promptCheck(
           component,
diff --git a/apps/survey/src/i18n/index.ts b/apps/survey/src/i18n/index.ts
index a24526a0ed..18e5f0dbbe 100644
--- a/apps/survey/src/i18n/index.ts
+++ b/apps/survey/src/i18n/index.ts
@@ -1,10 +1,12 @@
+import type { DefaultLocaleMessageSchema } from 'vue-i18n';
+
 import { merge } from '@intake24/common/util';
 import { defaultMessages, i18n } from '@intake24/i18n';
 import enShared from '@intake24/i18n/shared/en';
 import enSurvey from '@intake24/i18n/survey/en';
 
-const messages = merge(enShared, enSurvey);
-i18n.setLocaleMessage('en', messages);
+const messages = merge(enShared, enSurvey) as DefaultLocaleMessageSchema;
+i18n.global.setLocaleMessage('en', messages);
 defaultMessages.setMessages('en', messages);
 
 export default i18n;
diff --git a/apps/survey/src/main.ts b/apps/survey/src/main.ts
index d462a01b7a..0b59f2803d 100644
--- a/apps/survey/src/main.ts
+++ b/apps/survey/src/main.ts
@@ -1,46 +1,39 @@
-import './bootstrap';
-
-import type { Route } from 'vue-router';
-import Vue from 'vue';
+import { createApp } from 'vue';
 import VueGtag from 'vue-gtag';
 
 import pinia from '@intake24/ui/stores/bootstrap';
 
 import App from './app.vue';
 import i18n from './i18n';
+import { loading } from './mixins';
 import vuetify from './plugins/vuetify';
 import router from './router';
 import { errorHandler, httpService } from './services';
 import { useAuth } from './stores';
 
-Vue.config.productionTip = false;
-Vue.config.errorHandler = errorHandler;
-Vue.prototype.$http = httpService;
-
-Vue.use(
-  VueGtag,
-  {
-    enabled: !!import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
-    bootstrap: !!import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
-    appName: import.meta.env.VITE_APP_NAME,
-    config: {
-      id: import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
-    },
-    pageTrackerTemplate: (to: Route) => ({
-      page_title: i18n.t(to.meta?.title).toString(),
-      page_path: to.path,
-    }),
+const app = createApp(App);
+
+app.config.errorHandler = errorHandler;
+// app.config.warnHandler = warnHandler;
+
+app.config.globalProperties.$http = httpService;
+
+// @ts-expect-error vue mixin type issue
+app.mixin(loading);
+
+app.use(router);
+app.use(pinia);
+app.use(i18n);
+app.use(vuetify);
+app.use(VueGtag, {
+  enabled: !!import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
+  bootstrap: !!import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
+  appName: import.meta.env.VITE_APP_NAME,
+  config: {
+    id: import.meta.env.VITE_GOOGLE_ANALYTICS_ID,
   },
-  router,
-);
-
-const vue = new Vue({
-  i18n,
-  pinia,
-  router,
-  vuetify,
-  render: h => h(App),
-});
-
-vue.$http.init(router, useAuth);
-vue.$mount('#app');
+}, router);
+
+app.mount('#app');
+
+app.config.globalProperties.$http.init(router, useAuth);
diff --git a/apps/survey/src/mixins/index.ts b/apps/survey/src/mixins/index.ts
index 97a5d66ad5..c32bcb2b3d 100644
--- a/apps/survey/src/mixins/index.ts
+++ b/apps/survey/src/mixins/index.ts
@@ -1,2 +1 @@
 export { default as loading } from './loading';
-export { default as platform } from './platform';
diff --git a/apps/survey/src/mixins/platform.ts b/apps/survey/src/mixins/platform.ts
deleted file mode 100644
index 0c27d81681..0000000000
--- a/apps/survey/src/mixins/platform.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  // TODO: confirm the logic when to swap the more mobile/tablet friendly look
-  computed: {
-    isMobile(): boolean {
-      return this.$vuetify.breakpoint.mobile;
-    },
-  },
-});
diff --git a/apps/survey/src/plugins/vuetify.ts b/apps/survey/src/plugins/vuetify.ts
index 1e301742d1..bea8fe7fc2 100644
--- a/apps/survey/src/plugins/vuetify.ts
+++ b/apps/survey/src/plugins/vuetify.ts
@@ -1,14 +1,58 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify/lib';
+import 'vuetify/styles';
 
-import { colors } from '@intake24/common/theme';
+import { createVuetify } from 'vuetify';
+import * as directives from 'vuetify/directives';
+import { aliases, fa } from 'vuetify/iconsets/fa';
+import { VTimePicker } from 'vuetify/labs/VTimePicker';
 
-Vue.use(Vuetify);
+import { colors } from '@intake24/common/theme';
 
-export default new Vuetify({
+export default createVuetify({
+  components: {
+    VTimePicker,
+  },
+  directives,
+  defaults: {
+    VAlert: {
+      variant: 'tonal',
+    },
+    VBtn: {
+      variant: 'flat',
+    },
+    VCardActions: {
+      VBtn: {
+        variant: 'flat',
+      },
+    },
+    VCombobox: {
+      variant: 'outlined',
+    },
+    VExpansionPanels: {
+      eager: true,
+    },
+    VFileInput: {
+      variant: 'outlined',
+    },
+    VSelect: {
+      variant: 'outlined',
+    },
+    VSwitch: {
+      color: 'primary',
+    },
+    VTextField: {
+      variant: 'outlined',
+    },
+    VTextarea: {
+      variant: 'outlined',
+    },
+  },
+  display: {
+    mobileBreakpoint: 'md',
+  },
   icons: {
-    iconfont: 'fa',
-    values: {
+    defaultSet: 'fa',
+    aliases: {
+      ...aliases,
       add: 'fas fa-circle-plus',
       back: 'fas fa-arrow-left',
       cancel: 'fas fa-xmark',
@@ -48,11 +92,14 @@ export default new Vuetify({
       survey: 'fas fa-poll-h',
       yes: 'far fa-circle-check',
     },
+    sets: {
+      fa,
+    },
   },
   theme: {
     themes: {
       light: {
-        ...colors,
+        colors,
       },
     },
   },
diff --git a/apps/survey/src/router/index.ts b/apps/survey/src/router/index.ts
index 72d60c7d1e..447e979c45 100644
--- a/apps/survey/src/router/index.ts
+++ b/apps/survey/src/router/index.ts
@@ -1,6 +1,4 @@
-import type { RouteConfig } from 'vue-router';
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
 
 import views from '@intake24/survey/views';
 
@@ -13,9 +11,7 @@ import {
   surveyParametersGuard,
 } from './guards';
 
-Vue.use(VueRouter);
-
-const routes: RouteConfig[] = [
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'home',
@@ -26,6 +22,7 @@ const routes: RouteConfig[] = [
     path: '/a/:token',
     name: 'authentication',
     meta: { module: 'login', title: 'common.login._' },
+    component: views.survey.login,
     beforeEnter: authGuard,
   },
   {
@@ -52,6 +49,7 @@ const routes: RouteConfig[] = [
   {
     path: '/:surveyId/create-user/:token',
     name: 'survey-create-user',
+    component: views.survey.login,
     meta: { module: 'public' },
     beforeEnter: createUserGuard,
   },
@@ -113,17 +111,16 @@ const routes: RouteConfig[] = [
     props: true,
   },
   // Catch any unmatched routes
-  {
+  // TODO V3
+  /* {
     path: '*',
     name: '404',
     component: views.home,
     meta: { module: 'public', title: 'common._' },
-  },
+  }, */
 ];
-
-const router = new VueRouter({
-  mode: 'history',
-  base: import.meta.env.VITE_APP_BASE_URL ?? '/',
+const router = createRouter({
+  history: createWebHistory(import.meta.env.VITE_APP_BASE_URL ?? '/'),
   routes,
 });
 
diff --git a/apps/survey/src/scss/app.scss b/apps/survey/src/scss/app.scss
index a592708bfb..3d3228e990 100644
--- a/apps/survey/src/scss/app.scss
+++ b/apps/survey/src/scss/app.scss
@@ -1,5 +1,5 @@
 // Vars
-@import 'vuetify/src/styles/styles.sass';
+@use 'settings';
 @import 'variables';
 
 // Libs
@@ -13,10 +13,9 @@
 @import 'print';
 @import 'common';
 
-.v-application {
-  p {
-    margin-bottom: $spacer * 3;
-  }
+p {
+  margin-bottom: settings.$spacer * 3;
+  //margin-bottom: 1rem;
 }
 
 .container-max {
@@ -41,8 +40,14 @@
   }
 }
 
-.list-item-border {
-  border-bottom: 1px solid map-get($grey, 'lighten-3');
+.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');
 }
 
 // ConfirmDialog wrapped actions buttons
@@ -52,7 +57,11 @@
   }
 }
 
-@media #{map-get($display-breakpoints, 'sm-and-down')} {
+.v-picker-title {
+  display: none;
+}
+
+@media #{map-get(settings.$display-breakpoints, 'sm-and-down')} {
   .iframe-container {
     position: relative;
     padding-bottom: 56.25%;
diff --git a/apps/survey/src/scss/bottom-navigation.scss b/apps/survey/src/scss/bottom-navigation.scss
index 03dc73a9c8..b27e17798c 100644
--- a/apps/survey/src/scss/bottom-navigation.scss
+++ b/apps/survey/src/scss/bottom-navigation.scss
@@ -1,4 +1,4 @@
-@import 'src/scss/variables';
+@use 'variables';
 
 .bottom-navigation {
   position: fixed;
diff --git a/apps/survey/src/scss/fontawesome.scss b/apps/survey/src/scss/fontawesome.scss
index 76a3e37090..5ed6840b10 100644
--- a/apps/survey/src/scss/fontawesome.scss
+++ b/apps/survey/src/scss/fontawesome.scss
@@ -1,4 +1,5 @@
 $fa-font-path: '../node_modules/@fortawesome/fontawesome-free/webfonts';
+$fa-display: inline-flex;
 
 @import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
 @import '../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
diff --git a/apps/survey/src/scss/settings.scss b/apps/survey/src/scss/settings.scss
new file mode 100644
index 0000000000..c3c66859fd
--- /dev/null
+++ b/apps/survey/src/scss/settings.scss
@@ -0,0 +1,41 @@
+$font: Rubik, sans-serif;
+
+@forward 'vuetify/settings' with (
+  $body-font-family: $font,
+  $button-font-weight: 600,
+
+  $card-title-word-break: break-word,
+  $card-title-padding: 1rem 1rem 0.5rem 1rem,
+
+  $breadcrumbs-padding-y: 18px,
+  $breadcrumbs-padding-x: 6px,
+
+  $expansion-panel-title-font-size: 1rem,
+
+  $typography: (
+    'h1': (
+      'size': 2rem,
+      'line-height': 2.5rem,
+    ),
+    'h2': (
+      'size': 1.75rem,
+      'line-height': 2rem,
+    ),
+    'h3': (
+      'size': 1.5rem,
+      'line-height': 2rem,
+    ),
+    'h4': (
+      'size': 1.3rem,
+      'line-height': 1.5rem,
+    ),
+    'h5': (
+      'size': 1.2rem,
+      'line-height': 1.5rem,
+    ),
+    'h6': (
+      'size': 1rem,
+      'line-height': 1.5rem,
+    ),
+  )
+);
diff --git a/apps/survey/src/scss/slider.scss b/apps/survey/src/scss/slider.scss
index 4bb174e9c8..ebbbcd966a 100644
--- a/apps/survey/src/scss/slider.scss
+++ b/apps/survey/src/scss/slider.scss
@@ -1,28 +1,13 @@
 .quantity-slider__slider {
-  // Only for WCAG - vuetify should be able to do this
-  label {
-    display: none;
-  }
-
-  .v-slider {
-    .v-slider__track-container {
-      cursor: pointer;
-      height: 12px;
-
-      .v-slider__track-background {
-        border-radius: 10px;
-      }
-      .v-slider__track-fill {
-        border-radius: 10px;
-      }
-    }
+  padding-top: 60px;
 
-    .v-slider__thumb-container {
-      cursor: pointer;
+  .v-slider-thumb__label-container {
+    .v-slider-thumb__label {
+      height: unset;
+      background-color: $secondary;
 
-      .v-slider__thumb {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+      &::before {
+        color: $secondary;
       }
     }
   }
diff --git a/apps/survey/src/scss/vuetify.scss b/apps/survey/src/scss/vuetify.scss
deleted file mode 100644
index e8d6b02073..0000000000
--- a/apps/survey/src/scss/vuetify.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-@import 'vuetify/src/styles/styles.sass';
-
-$body-font-family: Rubik, sans-serif;
-$heading-font-family: $body-font-family;
-
-$material-light: (
-  'background': #f5f5f5,
-);
-
-$fab-icon-sizes: (
-  'x-small': 16,
-  'small': 18,
-  'default': 20,
-  'large': 28,
-  'x-large': 32,
-);
-
-$btn-font-weight: 600;
-
-$card-title-word-break: break-word;
-
-$expansion-panel-header-font-size: 1rem;
-$expansion-panel-header-min-height: 60px;
-
-$icon-size: 20px;
-$icon-size-dense: 18px;
-
-$headings: (
-  'h1': (
-    'size': 2rem,
-    'line-height': 2.5rem,
-  ),
-  'h2': (
-    'size': 1.75rem,
-    'line-height': 2rem,
-  ),
-  'h3': (
-    'size': 1.5rem,
-    'line-height': 2rem,
-  ),
-  'h4': (
-    'size': 1.3rem,
-    'line-height': 1.5rem,
-  ),
-  'h5': (
-    'size': 1.2rem,
-    'line-height': 1.5rem,
-  ),
-  'h6': (
-    'size': 1rem,
-    'line-height': 1.5rem,
-  ),
-);
-
-$list-item-action-icon-margin: 6px;
-
-$utilities: (
-  'gap': (
-    responsive: true,
-    property: gap,
-    class: ga,
-    values: $spacers,
-  ),
-  'gap-column': (
-    responsive: true,
-    property: column-gap,
-    class: gc,
-    values: $spacers,
-  ),
-  'gap-row': (
-    responsive: true,
-    property: row-gap,
-    class: gr,
-    values: $spacers,
-  ),
-  'flex-basis': (
-    property: flex-basis,
-    class: flex-basis,
-    values: (
-      auto,
-      0,
-      1,
-    ),
-  ),
-);
diff --git a/apps/survey/src/services/http.service.ts b/apps/survey/src/services/http.service.ts
index 52cdd6519b..ce5b4679fd 100644
--- a/apps/survey/src/services/http.service.ts
+++ b/apps/survey/src/services/http.service.ts
@@ -90,7 +90,7 @@ const httpClient: HttpClient = {
           isRefreshing = false;
 
           await auth.logout();
-          const { name, params: { surveyId } = {} } = router.currentRoute;
+          const { name, params: { surveyId } = {} } = router.currentRoute.value;
 
           if (surveyId && name !== 'survey-login')
             router.push({ name: 'survey-login', params: { surveyId } });
diff --git a/apps/survey/src/shims-vue.d.ts b/apps/survey/src/shims-vue.d.ts
deleted file mode 100644
index 5424484583..0000000000
--- a/apps/survey/src/shims-vue.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-
-  export default Vue;
-}
diff --git a/apps/survey/src/stores/prompt.ts b/apps/survey/src/stores/prompt.ts
index 164feb9041..9f1c7ad93d 100644
--- a/apps/survey/src/stores/prompt.ts
+++ b/apps/survey/src/stores/prompt.ts
@@ -1,6 +1,5 @@
 import type { StoreDefinition } from 'pinia';
 import { defineStore } from 'pinia';
-import Vue from 'vue';
 
 import type { ComponentType } from '@intake24/common/prompts';
 
@@ -56,7 +55,7 @@ export function getOrCreatePromptStateStore<T extends object>(
           else {
             ids.forEach((id) => {
               if (this.prompts[id]?.[promptId])
-                Vue.delete(this.prompts[id], promptId);
+                delete this.prompts[id][promptId];
             });
           }
 
diff --git a/apps/survey/src/stores/survey.ts b/apps/survey/src/stores/survey.ts
index 01ff920cbc..05609bcd66 100644
--- a/apps/survey/src/stores/survey.ts
+++ b/apps/survey/src/stores/survey.ts
@@ -3,7 +3,6 @@ import 'lodash/debounce';
 import { addDays } from 'date-fns';
 import { defineStore } from 'pinia';
 import { v4 } from 'uuid';
-import Vue from 'vue';
 
 import type { LinkedQuantity, PortionSizeComponentType, Prompts } from '@intake24/common/prompts';
 import type { RecallFlow, SessionSettings } from '@intake24/common/surveys';
@@ -156,8 +155,25 @@ export const useSurvey = defineStore('survey', {
     },
   },
   getters: {
-    parametersLoaded: state => !!state.parameters && !!state.user,
     currentState: state => state.data,
+    defaultSchemeMeals: state => state.parameters?.surveyScheme.meals,
+    feedbackEnabled: state => !!state.parameters?.feedbackScheme,
+    feedbackAvailable: state => !!state.user?.showFeedback,
+    foodPrompts: state => state.parameters?.surveyScheme.prompts.meals.foods ?? [],
+    hasMeals: state => !!state.data.meals.length,
+    hasFinished: state => !!state.data.endTime,
+    hasStarted: state => !!state.data.startTime,
+    isSubmitted: state => !!state.data.submissionTime,
+    localeId: state => state.parameters?.locale.code ?? 'en_GB',
+    slug: state => state.parameters?.slug,
+    meals: state => state.data.meals,
+    parametersLoaded: state => !!state.parameters && !!state.user,
+    searchParameters: (state) => {
+      const { searchSortingAlgorithm: rankingAlgorithm, searchMatchScoreWeight: matchScoreWeight }
+        = state.parameters ?? {};
+
+      return { matchScoreWeight, rankingAlgorithm };
+    },
     surveyEnabled: state => state.parameters?.state === 'active',
     dailyLimitReached: state => !!state.user?.maximumDailySubmissionsReached,
     totalLimitReached: state => !!state.user?.maximumTotalSubmissionsReached,
@@ -172,26 +188,9 @@ export const useSurvey = defineStore('survey', {
     recallNumber(): number {
       return (this.user?.submissions ?? 1) + (this.isSubmitted ? 0 : 1);
     },
-    feedbackEnabled: state => !!state.parameters?.feedbackScheme,
-    feedbackAvailable: state => !!state.user?.showFeedback,
     feedbackAllowed(): boolean {
       return this.feedbackEnabled && this.feedbackAvailable;
     },
-    hasStarted: state => !!state.data.startTime,
-    hasFinished: state => !!state.data.endTime,
-    isSubmitted: state => !!state.data.submissionTime,
-    localeId: state => state.parameters?.locale.code ?? 'en_GB',
-    slug: state => state.parameters?.slug,
-    meals: state => state.data.meals,
-    hasMeals: state => !!state.data.meals.length,
-    defaultSchemeMeals: state => state.parameters?.surveyScheme.meals,
-    searchParameters: (state) => {
-      const { searchSortingAlgorithm: rankingAlgorithm, searchMatchScoreWeight: matchScoreWeight }
-        = state.parameters ?? {};
-
-      return { matchScoreWeight, rankingAlgorithm };
-    },
-    foodPrompts: state => state.parameters?.surveyScheme.prompts.meals.foods ?? [],
     registeredPortionSizeMethods(): string[] {
       return (
         this.foodPrompts
@@ -566,7 +565,7 @@ export const useSurvey = defineStore('survey', {
       };
       const entityIds = this.data.meals[mealIndex].foods.reduce(collectEntityIdCallback, [mealId]);
 
-      Vue.delete(this.data.meals, mealIndex);
+      this.data.meals.splice(mealIndex, 1);
       this.sortMeals();
       this.clearEntityPromptStores(entityIds);
     },
@@ -701,8 +700,8 @@ export const useSurvey = defineStore('survey', {
       if (
         originalFood.type !== food.type
         || (originalFood.type === 'encoded-food'
-        && food.type === 'encoded-food'
-        && originalFood.data.code !== food.data.code)
+          && food.type === 'encoded-food'
+          && originalFood.data.code !== food.data.code)
       ) {
         this.clearEntityPromptStores(foodId);
       }
@@ -729,7 +728,7 @@ export const useSurvey = defineStore('survey', {
         || !associatedFoodPromptsComplete(mainFood)
         // 4) associated foods portion size estimations are not finished
         || (mainFood.linkedFoods.length
-        && mainFood.linkedFoods.some(item => !portionSizeComplete(item)))
+          && mainFood.linkedFoods.some(item => !portionSizeComplete(item)))
       ) {
         return;
       }
diff --git a/apps/survey/src/globals.d.ts b/apps/survey/src/types/globals.d.ts
similarity index 58%
rename from apps/survey/src/globals.d.ts
rename to apps/survey/src/types/globals.d.ts
index f148e51a4f..1d42ed16e3 100644
--- a/apps/survey/src/globals.d.ts
+++ b/apps/survey/src/types/globals.d.ts
@@ -1,14 +1,11 @@
 import type { HttpClient } from '@intake24/ui/types';
 
-declare module 'vue/types/vue' {
-  interface Vue {
+declare module 'vue' {
+  interface ComponentCustomProperties {
     $http: HttpClient;
 
     // loading mixin
-    isAppLoading: () => boolean;
-
-    // platform mixin
-    isMobile: boolean;
+    isAppLoading: boolean;
   }
 }
 
diff --git a/apps/survey/src/types/vite-env.d.ts b/apps/survey/src/types/vite-env.d.ts
new file mode 100644
index 0000000000..aa3564aea8
--- /dev/null
+++ b/apps/survey/src/types/vite-env.d.ts
@@ -0,0 +1,29 @@
+/// <reference types="vite/client" />
+
+import type { CaptchaProvider } from '@intake24/common/security';
+
+interface ImportMetaEnv {
+  readonly VITE_APP_NAME: string;
+  readonly VITE_APP_BASE_URL: string;
+  readonly VITE_APP_PREFIX: string;
+
+  readonly VITE_API_HOST: string;
+  readonly VITE_API_URL: string;
+
+  readonly VITE_CAPTCHA_PROVIDER: CaptchaProvider;
+  readonly VITE_CAPTCHA_SITEKEY: string;
+
+  readonly VITE_GOOGLE_ANALYTICS_ID: string;
+  readonly VITE_STRICH_KEY: string;
+  readonly VITE_WEBPUSH_PUBLIC_KEY: string;
+
+  readonly VITE_LEGAL_HOME: string;
+  readonly VITE_LEGAL_COPYRIGHT: string;
+  readonly VITE_LEGAL_PRIVACY: string;
+  readonly VITE_LEGAL_TERMS: string;
+
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/apps/survey/src/types/vue-router.d.ts b/apps/survey/src/types/vue-router.d.ts
new file mode 100644
index 0000000000..c8026ca1e9
--- /dev/null
+++ b/apps/survey/src/types/vue-router.d.ts
@@ -0,0 +1,10 @@
+import 'vue-router';
+
+export {};
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    module: string;
+    title?: string;
+  }
+}
diff --git a/apps/survey/src/views/feedback/home.vue b/apps/survey/src/views/feedback/home.vue
index 0b6fb5c2c4..152df546f7 100644
--- a/apps/survey/src/views/feedback/home.vue
+++ b/apps/survey/src/views/feedback/home.vue
@@ -32,11 +32,11 @@
         </v-row>
         <v-row v-if="showSubmissions" class="d-print-none" justify="center">
           <v-col cols="12" lg="7" md="8" xl="6">
-            <v-expansion-panels focusable>
+            <v-expansion-panels>
               <v-expansion-panel>
-                <v-expansion-panel-header
+                <v-expansion-panel-title
                   class="text-subtitle-1 font-weight-medium"
-                  color="grey lighten-4"
+                  color="grey-lighten-4"
                 >
                   {{ $t('recall.submissions.title') }}
                   ({{
@@ -44,42 +44,39 @@
                       ? $t('recall.submissions.all')
                       : selectedSubmissions.length
                   }})
-                </v-expansion-panel-header>
-                <v-expansion-panel-content>
-                  <v-list flat>
-                    <v-list-item-group
-                      v-model="selectedSubmissions"
-                      multiple
-                      @change="buildFeedback"
+                </v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <v-list
+                    v-model="selectedSubmissions"
+                    multiple
+                    @change="buildFeedback"
+                  >
+                    <v-list-item
+                      v-for="(submission, idx) in submissions"
+                      :key="submission.id"
+                      density="compact"
+                      :value="submission.id"
                     >
-                      <v-list-item
-                        v-for="(submission, idx) in submissions"
-                        :key="submission.id"
-                        dense
-                        :value="submission.id"
-                      >
-                        <template #default="{ active }">
-                          <v-list-item-action class="my-0">
-                            <v-checkbox :input-value="active" />
-                          </v-list-item-action>
-                          <v-list-item-content>
-                            <v-list-item-title>
-                              {{ `${$t('recall.submissions._')} ${idx + 1}` }} |
-                              {{ `${new Date(submission.endTime).toLocaleDateString()}` }}
-                            </v-list-item-title>
-                          </v-list-item-content>
-                        </template>
-                      </v-list-item>
-                    </v-list-item-group>
+                      <template #default="{ isActive }">
+                        <v-list-item-action class="my-0">
+                          <v-checkbox :model-value="isActive" />
+                        </v-list-item-action>
+
+                        <v-list-item-title>
+                          {{ `${$t('recall.submissions._')} ${idx + 1}` }} |
+                          {{ `${new Date(submission.endTime).toLocaleDateString()}` }}
+                        </v-list-item-title>
+                      </template>
+                    </v-list-item>
                   </v-list>
-                </v-expansion-panel-content>
+                </v-expansion-panel-text>
               </v-expansion-panel>
             </v-expansion-panels>
           </v-col>
         </v-row>
         <v-row v-if="hasMissingFoods" justify="center">
           <v-col cols="12" lg="7" md="8" xl="6">
-            <v-alert class="mb-0" color="info" icon="fas fa-circle-exclamation" text>
+            <v-alert class="mb-0" color="info" icon="fas fa-circle-exclamation">
               {{ $t('feedback.missingFoods') }}
             </v-alert>
           </v-col>
@@ -122,7 +119,7 @@
 import { computed, defineComponent, ref } from 'vue';
 
 import type { UserDemographic } from '@intake24/ui/feedback';
-import { SurveyRating } from '@intake24/survey/components';
+import { SurveyRating } from '@intake24/survey/components/elements';
 import { feedbackService, userService } from '@intake24/survey/services';
 import { useLoading, useSurvey } from '@intake24/survey/stores';
 import {
diff --git a/apps/survey/src/views/feedback/physical-data.vue b/apps/survey/src/views/feedback/physical-data.vue
index f73b00320b..cda73d5e02 100644
--- a/apps/survey/src/views/feedback/physical-data.vue
+++ b/apps/survey/src/views/feedback/physical-data.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-container :class="{ 'pa-0': isMobile }">
-    <v-row justify="center" :no-gutters="isMobile">
+  <v-container :class="{ 'pa-0': $vuetify.display.mobile }">
+    <v-row justify="center" :no-gutters="$vuetify.display.mobile">
       <v-col cols="12" md="8" sm="9">
-        <v-card :tile="isMobile">
+        <v-card :tile="$vuetify.display.mobile">
           <v-card-title>{{ $t('feedback.physicalData.title') }}</v-card-title>
           <v-card-subtitle>{{ $t('feedback.physicalData.subtitle') }}</v-card-subtitle>
           <v-card-text class="pa-4">
-            <v-form @keydown.native="errors.clear($event.target.name)" @submit.prevent="submit">
+            <v-form @keydown="errors.clear($event.target.name)" @submit.prevent="submit">
               <v-row>
                 <v-col v-if="collectPhysicalDataField('sex')" cols="12" lg="6">
                   <v-select
@@ -16,17 +16,20 @@
                     :items="sexes"
                     :label="$t('feedback.physicalData.sexes._')"
                     name="sex"
-                    outlined
-                    prepend-inner-icon="fa-genderless"
-                    @change="errors.clear('sex')"
+                    prepend-inner-icon="fas fa-genderless"
+                    variant="outlined"
+                    @update:model-value="errors.clear('sex')"
                   >
-                    <template #item="{ item }">
-                      <span :class="`${item.icon} mr-3`" />
-                      {{ item.text }}
+                    <template #item="{ props, item }">
+                      <v-list-item v-bind="props" :title="item.raw.text">
+                        <template #prepend>
+                          <span :class="`${item.raw.icon} me-3`" />
+                        </template>
+                      </v-list-item>
                     </template>
                     <template #selection="{ item }">
-                      <span :class="`${item.icon} mr-3`" />
-                      {{ item.text }}
+                      <span :class="`${item.raw.icon} me-3`" />
+                      {{ item.raw.text }}
                     </template>
                   </v-select>
                 </v-col>
@@ -37,8 +40,8 @@
                     hide-details="auto"
                     :label="$t('feedback.physicalData.birthdate')"
                     name="birthdate"
-                    outlined
-                    prepend-inner-icon="fa-birthday-cake"
+                    prepend-inner-icon="fas fa-birthday-cake"
+                    variant="outlined"
                   />
                 </v-col>
                 <v-col v-if="collectPhysicalDataField('heightCm')" cols="12" lg="6">
@@ -48,8 +51,8 @@
                     hide-details="auto"
                     :label="$t('feedback.physicalData.heightCm')"
                     name="heightCm"
-                    outlined
-                    prepend-inner-icon="fa-arrows-alt-v"
+                    prepend-inner-icon="fas fa-arrows-alt-v"
+                    variant="outlined"
                   />
                 </v-col>
                 <v-col v-if="collectPhysicalDataField('weightKg')" cols="12" lg="6">
@@ -59,8 +62,8 @@
                     hide-details="auto"
                     :label="$t('feedback.physicalData.weightKg')"
                     name="weightKg"
-                    outlined
-                    prepend-inner-icon="fa-weight"
+                    prepend-inner-icon="fas fa-weight"
+                    variant="outlined"
                   />
                 </v-col>
                 <v-col v-if="collectPhysicalDataField('physicalActivityLevelId')" cols="12" lg="6">
@@ -68,14 +71,14 @@
                     v-model="form.physicalActivityLevelId"
                     :error-messages="errors.get('physicalActivityLevelId')"
                     hide-details="auto"
-                    item-text="name"
+                    item-title="name"
                     item-value="id"
                     :items="physicalActivityLevels"
                     :label="$t('feedback.physicalData.physicalActivityLevelId')"
                     name="physicalActivityLevelId"
-                    outlined
-                    prepend-inner-icon="fa-running"
-                    @change="errors.clear('physicalActivityLevelId')"
+                    prepend-inner-icon="fas fa-running"
+                    variant="outlined"
+                    @update:model-value="errors.clear('physicalActivityLevelId')"
                   />
                 </v-col>
                 <v-col v-if="collectPhysicalDataField('weightTarget')" cols="12" lg="6">
@@ -86,9 +89,9 @@
                     :items="weightTargets"
                     :label="$t('feedback.physicalData.weightTargets._')"
                     name="weightTarget"
-                    outlined
-                    prepend-inner-icon="fa-crosshairs"
-                    @change="errors.clear('weightTarget')"
+                    prepend-inner-icon="fas fa-crosshairs"
+                    variant="outlined"
+                    @update:model-value="errors.clear('weightTarget')"
                   />
                 </v-col>
               </v-row>
@@ -99,9 +102,9 @@
                     class="px-10"
                     color="primary"
                     :disabled="errors.any()"
+                    size="x-large"
                     :title="$t('common.action.continue')"
                     type="submit"
-                    x-large
                   >
                     {{ $t('common.action.continue') }}
                   </v-btn>
@@ -174,7 +177,7 @@ export default defineComponent({
         })),
       ],
       physicalActivityLevels: [
-        { id: null, name: this.$t('common.not.selected').toString(), coefficient: 0 },
+        { id: null, name: this.$t('common.not.selected'), coefficient: 0 },
       ] as NullablePhysicalActivityLevel[],
       weightTargets: [
         { text: this.$t('common.not.selected'), value: null },
@@ -209,7 +212,7 @@ export default defineComponent({
       this.form = { ...physicalData };
 
       this.physicalActivityLevels = [
-        { id: null, name: this.$t('common.not.selected').toString(), coefficient: 0 },
+        { id: null, name: this.$t('common.not.selected'), coefficient: 0 },
         ...feedbackData.physicalActivityLevels,
       ];
     }
diff --git a/apps/survey/src/views/home.vue b/apps/survey/src/views/home.vue
index ade43d4096..911256598d 100644
--- a/apps/survey/src/views/home.vue
+++ b/apps/survey/src/views/home.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-container :class="{ 'pa-0': isMobile }">
+  <v-container :class="{ 'pa-0': $vuetify.display.mobile }">
     <app-entry-screen
-      :subtitle="$t('common.welcome.subtitle').toString()"
-      :title="$t('common._').toString()"
+      :subtitle="$t('common.welcome.subtitle')"
+      :title="$t('common._')"
     >
       <v-divider class="mt-4" />
       <v-card-title class="font-weight-medium">
@@ -10,35 +10,30 @@
       </v-card-title>
       <image-placeholder v-if="isLoading" class="pa-8" />
       <v-list v-else-if="surveys.length">
-        <template v-for="(survey, idx) in surveys">
+        <template v-for="(survey, idx) in surveys" :key="survey.id">
           <v-list-item
-            :key="survey.id"
             :to="{ name: 'survey-login', params: { surveyId: survey.slug } }"
           >
-            <v-list-item-avatar>
+            <template #prepend>
               <v-icon>fas fa-square-poll-vertical</v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title>{{ survey.name }}</v-list-item-title>
-            </v-list-item-content>
-            <v-list-item-icon>
+            </template>
+            <v-list-item-title>{{ survey.name }}</v-list-item-title>
+            <template #append>
               <v-icon>fas fa-arrow-up-right-from-square</v-icon>
-            </v-list-item-icon>
+            </template>
           </v-list-item>
           <v-divider v-if="idx + 1 < surveys.length" :key="`div-${survey.id}`" />
         </template>
       </v-list>
       <v-list v-else disabled>
         <v-list-item>
-          <v-list-item-icon>
+          <template #prepend>
             <v-icon>fas fa-ban</v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
-            <v-list-item-title>{{ $t('survey.openAccess.none._') }}</v-list-item-title>
-            <v-list-item-subtitle>
-              {{ $t('survey.openAccess.none.subtitle') }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
+          </template>
+          <v-list-item-title>{{ $t('survey.openAccess.none._') }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ $t('survey.openAccess.none.subtitle') }}
+          </v-list-item-subtitle>
         </v-list-item>
       </v-list>
     </app-entry-screen>
@@ -47,7 +42,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router';
 
 import type { PublicSurveyEntry } from '@intake24/common/types/http';
 import { ImagePlaceholder } from '@intake24/survey/components/elements';
diff --git a/apps/survey/src/views/survey/challenge.vue b/apps/survey/src/views/survey/challenge.vue
index 6b9c766167..02b99e9113 100644
--- a/apps/survey/src/views/survey/challenge.vue
+++ b/apps/survey/src/views/survey/challenge.vue
@@ -1,15 +1,15 @@
 <template>
-  <v-container :class="{ 'pa-0': isMobile }">
+  <v-container :class="{ 'pa-0': $vuetify.display.mobile }">
     <app-entry-screen
-      :subtitle="$t('common.login.captcha').toString()"
-      :title="$t('common._').toString()"
+      :subtitle="$t('common.login.captcha')"
+      :title="$t('common._')"
     >
-      <v-form @keydown.native="errors.clear($event.target.name)" @submit.prevent="submit">
+      <v-form @keydown="errors.clear($event.target.name)" @submit.prevent="submit">
         <v-card-text class="d-flex flex-column justify-center align-center">
           <v-icon class="pt-8 pb-12" size="96">
             fas fa-robot
           </v-icon>
-          <v-btn block color="primary" rounded type="submit" x-large>
+          <v-btn block color="primary" rounded size="x-large" type="submit">
             {{ $t('common.login.start') }}
           </v-btn>
         </v-card-text>
@@ -19,80 +19,60 @@
   </v-container>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import { AppEntryScreen, Captcha } from '@intake24/ui';
 
 import { useLogin } from './use-login';
 
-export default defineComponent({
-  name: 'SurveyChallenge',
+defineOptions({ name: 'SurveyChallenge' });
 
-  components: { AppEntryScreen, Captcha },
-
-  props: {
-    surveyId: {
-      type: String,
-      required: true,
-    },
+const props = defineProps({
+  surveyId: {
+    type: String,
+    required: true,
   },
+});
 
-  setup(props) {
-    const router = useRouter();
-    const route = useRoute();
-
-    const {
-      captchaEl,
-      captchaToken,
-      errors,
-      fetchSurveyPublicInfo,
-      login,
-      resetCaptcha,
-      status,
-      survey,
-      token,
-    } = useLogin(props);
+const router = useRouter();
+const route = useRoute();
 
-    const verified = async (token?: string) => {
-      captchaToken.value = token;
-      await login('token');
-    };
+const {
+  captchaEl,
+  captchaToken,
+  errors,
+  login,
+  resetCaptcha,
+  token,
+} = useLogin(props);
 
-    const expired = () => {
-      resetCaptcha();
-    };
+async function verified(token?: string) {
+  captchaToken.value = token;
+  await login('token');
+}
 
-    const submit = async () => {
-      if (captchaEl.value) {
-        captchaEl.value.executeIfCan();
-        return;
-      }
+function expired() {
+  resetCaptcha();
+}
 
-      await login('token');
-    };
+async function submit() {
+  if (captchaEl.value) {
+    captchaEl.value.executeIfCan();
+    return;
+  }
 
-    onMounted(async () => {
-      const { auth } = route.query;
-      if (!auth || typeof auth !== 'string') {
-        await router.push({ name: 'survey-login', params: { surveyId: props.surveyId } });
-        return;
-      }
-      token.value = auth;
-    });
+  await login('token');
+}
 
-    return {
-      captchaEl,
-      errors,
-      expired,
-      fetchSurveyPublicInfo,
-      status,
-      submit,
-      survey,
-      verified,
-    };
-  },
+onMounted(async () => {
+  const { auth } = route.query;
+  if (!auth || typeof auth !== 'string') {
+    await router.push({ name: 'survey-login', params: { surveyId: props.surveyId } });
+    return;
+  }
+  token.value = auth;
 });
 </script>
 
diff --git a/apps/survey/src/views/survey/error.vue b/apps/survey/src/views/survey/error.vue
index 908ad12928..76407c4d94 100644
--- a/apps/survey/src/views/survey/error.vue
+++ b/apps/survey/src/views/survey/error.vue
@@ -8,7 +8,7 @@
           </v-card-title>
         </v-sheet>
         <v-card-text class="d-flex flex-column flex-sm-row justify-center align-center pa-6">
-          <v-icon class="mr-sm-6" color="warning" large>
+          <v-icon class="me-sm-6" color="warning" size="large">
             fas fa-exclamation-triangle
           </v-icon>
           <span class="text-subtitle-1">
@@ -27,7 +27,7 @@
           :to="{ name: 'survey-home', params: { surveyId } }"
         >
           <div v-ripple class="d-flex flex-column flex-sm-row justify-center align-center py-6">
-            <v-icon class="py-3 mr-sm-6" size="100">
+            <v-icon class="py-3 me-sm-6" size="100">
               fas fa-sync-alt
             </v-icon>
             <span class="py-3 text-h3 font-weight-bold text--primary text-uppercase">
diff --git a/apps/survey/src/views/survey/generate-user.vue b/apps/survey/src/views/survey/generate-user.vue
index aaede1907f..fff119c70c 100644
--- a/apps/survey/src/views/survey/generate-user.vue
+++ b/apps/survey/src/views/survey/generate-user.vue
@@ -1,66 +1,70 @@
 <template>
-  <v-container :class="{ 'pa-0': isMobile }">
-    <app-entry-screen :title="$t('common._').toString()">
-      <v-form @keydown.native="errors.clear($event.target.name)" @submit.prevent="login('alias')">
+  <v-container :class="{ 'pa-0': $vuetify.display.mobile }">
+    <app-entry-screen :title="$t('common._')">
+      <v-form @keydown="errors.clear($event.target.name)" @submit.prevent="login('alias')">
         <v-card-text class="pa-6">
           <p>{{ $t('survey.generateUser.info1') }}</p>
           <p>{{ $t('survey.generateUser.info2') }}</p>
-          <v-btn v-if="!status" block class="my-5" color="primary" rounded x-large @click="submit">
+          <v-btn v-if="!status" block class="my-5" color="primary" rounded size="x-large" @click="submit">
             {{ $t('survey.generateUser._') }}
           </v-btn>
           <template v-if="status">
-            <v-card v-if="status === 200" class="pa-5 my-5" outlined>
+            <v-card v-if="status === 200" border class="pa-5 my-5" flat>
               <v-text-field
                 autocomplete="username"
                 :error-messages="errors.get('username')"
                 hide-details="auto"
                 :label="$t('common.username')"
+                :model-value="username"
                 name="username"
-                outlined
                 prepend-inner-icon="fas fa-user"
                 readonly
                 required
-                :value="username"
+                variant="outlined"
               />
               <v-text-field
-                :append-icon="showPassword ? 'fa-eye' : 'fa-eye-slash'"
                 autocomplete="current-password"
                 class="mt-4"
                 :error-messages="errors.get('password')"
                 hide-details="auto"
                 :label="$t('common.password')"
+                :model-value="password"
                 name="password"
-                outlined
                 prepend-inner-icon="fas fa-key"
                 readonly
                 required
                 :type="showPassword ? 'text' : 'password'"
-                :value="password"
-                @click:append="showPassword = !showPassword"
-              />
+                variant="outlined"
+              >
+                <template #append-inner>
+                  <v-icon class="me-2" @click="showPassword = !showPassword">
+                    {{ showPassword ? 'fas fa-eye' : 'fas fa-eye-slash' }}
+                  </v-icon>
+                </template>
+              </v-text-field>
             </v-card>
-            <v-alert v-else dark type="error">
+            <v-alert v-else type="error">
               {{ $t(`survey.generateUser.${status}`, { surveyId: survey?.name ?? surveyId }) }}
             </v-alert>
           </template>
-          <i18n path="survey.generateUser.info3" tag="p">
+          <i18n-t keypath="survey.generateUser.info3" tag="p">
             <template #action>
               <router-link :to="{ name: 'survey-login', params: { surveyId } }">
                 {{ $t('survey.generateUser.link') }}
               </router-link>
             </template>
-          </i18n>
+          </i18n-t>
         </v-card-text>
-        <v-card-actions class="px-6 pb-6">
-          <v-btn block color="primary" :disabled="!canContinue" rounded type="submit" x-large>
+        <v-card-text class="px-6 pb-6">
+          <v-btn block color="primary" :disabled="!canContinue" rounded size="x-large" type="submit">
             {{ $t('common.action.continue') }}
           </v-btn>
-        </v-card-actions>
+        </v-card-text>
       </v-form>
       <captcha ref="captchaEl" @expired="expired" @verified="verified" />
       <v-card-actions>
-        <v-btn color="info" exact text :to="{ name: 'survey-login', params: { surveyId } }">
-          <v-icon left>
+        <v-btn color="info" exact :to="{ name: 'survey-login', params: { surveyId } }" variant="text">
+          <v-icon start>
             fas fa-angles-left
           </v-icon>
           {{ $t('common.login.back') }}
@@ -70,116 +74,91 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import axios from 'axios';
-import { computed, defineComponent, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router/composables';
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import { surveyService } from '@intake24/survey/services';
 import { AppEntryScreen, Captcha } from '@intake24/ui';
 
 import { useLogin } from './use-login';
 
-export default defineComponent({
-  name: 'GenerateUser',
-
-  components: { AppEntryScreen, Captcha },
+defineOptions({ name: 'GenerateUser' });
 
-  props: {
-    surveyId: {
-      type: String,
-      required: true,
-    },
+const props = defineProps({
+  surveyId: {
+    type: String,
+    required: true,
   },
+});
 
-  setup(props) {
-    const router = useRouter();
-    const {
-      captchaEl,
-      captchaToken,
-      errors,
-      fetchSurveyPublicInfo,
-      login,
-      password,
-      resetCaptcha,
-      showPassword,
-      status,
-      survey,
-      username,
-    } = useLogin(props);
-
-    showPassword.value = true;
-
-    const loading = ref(false);
-
-    const canContinue = computed(() => status.value === 200);
-
-    const generateUser = async () => {
-      loading.value = true;
-
-      try {
-        const data = await surveyService.generateUser(props.surveyId, {
-          captcha: captchaToken.value,
-        });
-
-        status.value = 200;
-        username.value = data.username;
-        password.value = data.password;
-      }
-      catch (err) {
-        if (axios.isAxiosError(err))
-          status.value = err.response?.status ?? 0;
-      }
-      finally {
-        loading.value = false;
-
-        resetCaptcha();
-      }
-    };
-
-    const verified = async (token?: string) => {
-      captchaToken.value = token;
-      await generateUser();
-    };
-
-    const expired = () => {
-      resetCaptcha();
-    };
-
-    const submit = async () => {
-      if (captchaEl.value) {
-        captchaEl.value.executeIfCan();
-        return;
-      }
-
-      await generateUser();
-    };
-
-    onMounted(async () => {
-      await fetchSurveyPublicInfo();
-      if (survey.value?.openAccess !== true)
-        await router.push({ name: 'home' });
+const router = useRouter();
+const {
+  captchaEl,
+  captchaToken,
+  errors,
+  fetchSurveyPublicInfo,
+  login,
+  password,
+  resetCaptcha,
+  showPassword,
+  status,
+  survey,
+  username,
+} = useLogin(props);
+
+showPassword.value = true;
+
+const loading = ref(false);
+
+const canContinue = computed(() => status.value === 200);
+
+async function generateUser() {
+  loading.value = true;
+
+  try {
+    const data = await surveyService.generateUser(props.surveyId, {
+      captcha: captchaToken.value,
     });
 
-    return {
-      canContinue,
-      captchaEl,
-      captchaToken,
-      errors,
-      expired,
-      fetchSurveyPublicInfo,
-      loading,
-      login,
-      password,
-      resetCaptcha,
-      showPassword,
-      status,
-      submit,
-      survey,
-      username,
-      verified,
-    };
-  },
+    status.value = 200;
+    username.value = data.username;
+    password.value = data.password;
+  }
+  catch (err) {
+    if (axios.isAxiosError(err))
+      status.value = err.response?.status ?? 0;
+  }
+  finally {
+    loading.value = false;
+
+    resetCaptcha();
+  }
+}
+
+async function verified(token?: string) {
+  captchaToken.value = token;
+  await generateUser();
+}
+
+function expired() {
+  resetCaptcha();
+}
+
+async function submit() {
+  if (captchaEl.value) {
+    captchaEl.value.executeIfCan();
+    return;
+  }
+
+  await generateUser();
+}
+
+onMounted(async () => {
+  await fetchSurveyPublicInfo();
+  if (survey.value?.openAccess !== true)
+    await router.push({ name: 'home' });
 });
 </script>
 
diff --git a/apps/survey/src/views/survey/home.vue b/apps/survey/src/views/survey/home.vue
index 6eb4573ed6..7c682d6f7a 100644
--- a/apps/survey/src/views/survey/home.vue
+++ b/apps/survey/src/views/survey/home.vue
@@ -1,90 +1,87 @@
 <template>
-  <v-container :class="{ 'pa-0': isMobile }">
-    <v-row justify="center" :no-gutters="isMobile">
+  <v-container :class="{ 'pa-0': $vuetify.display.mobile }">
+    <v-row justify="center" :no-gutters="$vuetify.display.mobile">
       <v-col cols="12" lg="9">
-        <v-card :tile="isMobile">
+        <v-card :tile="$vuetify.display.mobile">
           <!-- Survey info -->
-          <v-card-title class="text-h5 font-weight-medium mb-2">
+          <v-card-title class="text-h5 font-weight-medium mb-2 pt-4">
             {{ $t('survey.welcome._') }}
           </v-card-title>
-          <v-card-subtitle>{{ $t('survey.welcome.subtitle') }}</v-card-subtitle>
+          <v-card-subtitle class="pb-4">
+            {{ $t('survey.welcome.subtitle') }}
+          </v-card-subtitle>
           <v-divider />
-          <v-list class="list-no-wrap" subheader two-line>
-            <v-subheader>{{ $t('survey.info') }}</v-subheader>
+          <v-list class="list-no-wrap" lines="two">
+            <v-list-subheader>{{ $t('survey.info') }}</v-list-subheader>
             <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('survey._') }}</v-list-item-title>
-                <v-list-item-subtitle>
-                  {{ parameters?.name }}
-                </v-list-item-subtitle>
-              </v-list-item-content>
+              <v-list-item-title>{{ $t('survey._') }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ parameters?.name }}
+              </v-list-item-subtitle>
             </v-list-item>
             <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('survey.states._') }}</v-list-item-title>
-                <v-list-item-subtitle>
-                  {{ $t(`survey.states.${parameters?.state}`) }}
-                </v-list-item-subtitle>
-              </v-list-item-content>
+              <v-list-item-title>{{ $t('survey.states._') }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ $t(`survey.states.${parameters?.state}`) }}
+              </v-list-item-subtitle>
             </v-list-item>
           </v-list>
           <v-divider />
           <!-- Recall info -->
           <template v-if="recallAllowed">
-            <v-list class="list__no-wrap" subheader>
-              <v-subheader>{{ $t('recall.info') }}</v-subheader>
+            <v-list class="list__no-wrap">
+              <v-list-subheader>{{ $t('recall.info') }}</v-list-subheader>
               <template v-if="limitReached">
                 <v-list-item>
-                  <v-list-item-avatar>
-                    <v-icon color="error" large>
+                  <template #prepend>
+                    <v-icon color="error" size="large">
                       fas fa-ban
                     </v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ $t(`recall.limitReached.${dailyLimitReached ? 'daily' : 'total'}`) }}
-                    </v-list-item-title>
-                  </v-list-item-content>
+                  </template>
+                  <v-list-item-title>
+                    {{ $t(`recall.limitReached.${dailyLimitReached ? 'daily' : 'total'}`) }}
+                  </v-list-item-title>
                 </v-list-item>
               </template>
               <template v-else-if="hasFinished">
                 <v-list-item link>
-                  <v-list-item-avatar>
-                    <v-icon color="info" large>
+                  <template #prepend>
+                    <v-icon color="info" size="large">
                       $check
                     </v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ $t('recall.finishedAt', { finishedAt: endTime?.toLocaleString() }) }}
-                    </v-list-item-title>
-                  </v-list-item-content>
-                  <v-list-item-action v-if="$vuetify.breakpoint.mdAndUp">
-                    <v-btn
-                      block
-                      color="primary"
-                      outlined
-                      rounded
-                      :title="$t('recall.start.another')"
-                      @click.stop="startRecall"
-                    >
-                      <v-icon left>
-                        fas fa-beat fa-play
-                      </v-icon>
-                      {{ $t('recall.start.another') }}
-                    </v-btn>
-                  </v-list-item-action>
+                  </template>
+                  <v-list-item-title>
+                    {{ $t('recall.finishedAt', { finishedAt: endTime?.toLocaleString() }) }}
+                  </v-list-item-title>
+                  <template #append>
+                    <v-list-item-action v-if="$vuetify.display.mdAndUp">
+                      <v-btn
+                        block
+                        color="primary"
+                        rounded
+                        :title="$t('recall.start.another')"
+                        variant="outlined"
+                        @click.stop="startRecall"
+                      >
+                        <v-icon start>
+                          fas fa-beat fa-play
+                        </v-icon>
+                        {{ $t('recall.start.another') }}
+                      </v-btn>
+                    </v-list-item-action>
+                  </template>
                 </v-list-item>
-                <v-list-item v-if="$vuetify.breakpoint.smAndDown" class="justify-end">
+                <v-list-item v-if="$vuetify.display.smAndDown" class="justify-end">
                   <v-btn
+                    block
                     color="primary"
-                    large
-                    outlined
                     rounded
+                    size="large"
                     :title="$t('recall.start.another')"
+                    variant="outlined"
                     @click.stop="startRecall"
                   >
-                    <v-icon left>
+                    <v-icon start>
                       fas fa-beat fa-play
                     </v-icon>
                     {{ $t('recall.start.another') }}
@@ -93,70 +90,68 @@
               </template>
               <template v-else-if="hasStarted">
                 <v-list-item link>
-                  <v-list-item-avatar>
-                    <v-icon color="info" large>
+                  <template #prepend>
+                    <v-icon color="info" size="large">
                       $pause
                     </v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title>
-                      {{ $t('recall.startedAt', { startedAt: startTime?.toLocaleString() }) }}
-                    </v-list-item-title>
-                  </v-list-item-content>
-                  <v-list-item-action v-if="$vuetify.breakpoint.mdAndUp" class="align-stretch">
-                    <v-btn
-                      class="mb-2"
-                      color="info"
-                      outlined
-                      rounded
-                      :title="$t('recall.continue')"
-                      :to="{ name: 'survey-recall', params: { surveyId } }"
-                    >
-                      <v-icon class="fa-beat" left>
-                        $pause
-                      </v-icon>
-                      {{ $t('recall.continue') }}
-                    </v-btn>
-                    <confirm-dialog
-                      :label="$t('recall.abort.label').toString()"
-                      @confirm="cancelRecall"
-                    >
-                      <template #activator="{ on, attrs }">
-                        <v-btn
-                          v-bind="attrs"
-                          color="error"
-                          outlined
-                          rounded
-                          :title="$t('recall.abort.label')"
-                          v-on="on"
-                        >
-                          <v-icon left>
-                            $cancel
-                          </v-icon>
-                          {{ $t('recall.abort._') }}
-                        </v-btn>
-                      </template>
-                      {{ $t('recall.abort.confirm') }}
-                    </confirm-dialog>
-                  </v-list-item-action>
+                  </template>
+                  <v-list-item-title>
+                    {{ $t('recall.startedAt', { startedAt: startTime?.toLocaleString() }) }}
+                  </v-list-item-title>
+                  <template #append>
+                    <v-list-item-action v-if="$vuetify.display.mdAndUp" class="align-stretch">
+                      <v-btn
+                        class="me-2"
+                        color="info"
+                        rounded
+                        :title="$t('recall.continue')"
+                        :to="{ name: 'survey-recall', params: { surveyId } }"
+                        variant="outlined"
+                      >
+                        <v-icon class="fa-beat" start>
+                          $pause
+                        </v-icon>
+                        {{ $t('recall.continue') }}
+                      </v-btn>
+                      <confirm-dialog
+                        :label="$t('recall.abort.label')"
+                        @confirm="cancelRecall"
+                      >
+                        <template #activator="{ props }">
+                          <v-btn
+                            v-bind="props"
+                            color="error"
+                            rounded
+                            :title="$t('recall.abort.label')"
+                            variant="outlined"
+                          >
+                            <v-icon start>
+                              $cancel
+                            </v-icon>
+                            {{ $t('recall.abort._') }}
+                          </v-btn>
+                        </template>
+                        {{ $t('recall.abort.confirm') }}
+                      </confirm-dialog>
+                    </v-list-item-action>
+                  </template>
                 </v-list-item>
-                <v-list-item v-if="$vuetify.breakpoint.smAndDown" class="justify-sm-end">
+                <v-list-item v-if="$vuetify.display.smAndDown" class="justify-sm-end">
                   <confirm-dialog
-                    :label="$t('recall.abort.label').toString()"
+                    :label="$t('recall.abort.label')"
                     @confirm="cancelRecall"
                   >
-                    <template #activator="{ on, attrs }">
+                    <template #activator="{ props }">
                       <v-btn
-                        v-bind="attrs"
-                        class="flex-grow-1 flex-sm-grow-0 mr-2"
+                        v-bind="props"
+                        class="flex-grow-1 flex-sm-grow-0 me-2"
                         color="error"
-                        large
-                        outlined
                         rounded
+                        size="large"
                         :title="$t('recall.abort.label')"
-                        v-on="on"
+                        variant="outlined"
                       >
-                        <v-icon left>
+                        <v-icon start>
                           $cancel
                         </v-icon>
                         {{ $t('recall.abort._') }}
@@ -167,13 +162,13 @@
                   <v-btn
                     class="flex-grow-1 flex-sm-grow-0"
                     color="info"
-                    large
-                    outlined
                     rounded
+                    size="large"
                     :title="$t('recall.continue')"
                     :to="{ name: 'survey-recall', params: { surveyId } }"
+                    variant="outlined"
                   >
-                    <v-icon class="fa-beat" left>
+                    <v-icon class="fa-beat" start>
                       $pause
                     </v-icon>
                     {{ $t('recall.continue') }}
@@ -182,39 +177,39 @@
               </template>
               <template v-else>
                 <v-list-item link>
-                  <v-list-item-avatar>
-                    <v-icon color="info" large>
+                  <template #prepend>
+                    <v-icon color="info" size="large">
                       $start
                     </v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title>{{ $t('recall.none') }}</v-list-item-title>
-                  </v-list-item-content>
-                  <v-list-item-action v-if="$vuetify.breakpoint.mdAndUp">
-                    <v-btn
-                      color="primary"
-                      outlined
-                      rounded
-                      :title="$t('recall.start._')"
-                      :to="{ name: 'survey-recall', params: { surveyId } }"
-                    >
-                      <v-icon class="fa-beat" left>
-                        $start
-                      </v-icon>
-                      {{ $t('recall.start._') }}
-                    </v-btn>
-                  </v-list-item-action>
+                  </template>
+                  <v-list-item-title>{{ $t('recall.none') }}</v-list-item-title>
+                  <template #append>
+                    <v-list-item-action v-if="$vuetify.display.mdAndUp">
+                      <v-btn
+                        color="primary"
+                        rounded
+                        :title="$t('recall.start._')"
+                        :to="{ name: 'survey-recall', params: { surveyId } }"
+                        variant="outlined"
+                      >
+                        <v-icon class="fa-beat" start>
+                          $start
+                        </v-icon>
+                        {{ $t('recall.start._') }}
+                      </v-btn>
+                    </v-list-item-action>
+                  </template>
                 </v-list-item>
-                <v-list-item v-if="$vuetify.breakpoint.smAndDown" class="justify-end">
+                <v-list-item v-if="$vuetify.display.smAndDown" class="justify-end">
                   <v-btn
                     color="primary"
-                    large
-                    outlined
                     rounded
+                    size="large"
                     :title="$t('recall.start._')"
                     :to="{ name: 'survey-recall', params: { surveyId } }"
+                    variant="outlined"
                   >
-                    <v-icon class="fa-beat" left>
+                    <v-icon class="fa-beat" start>
                       $start
                     </v-icon>
                     {{ $t('recall.start._') }}
@@ -226,41 +221,41 @@
           </template>
           <!-- Feedback info -->
           <template v-if="feedbackAllowed">
-            <v-list class="list-no-wrap" subheader>
-              <v-subheader>{{ $t('feedback.info') }}</v-subheader>
+            <v-list class="list-no-wrap">
+              <v-list-subheader>{{ $t('feedback.info') }}</v-list-subheader>
               <template v-if="feedbackAvailable">
                 <v-list-item link>
-                  <v-list-item-avatar>
-                    <v-icon color="info" large>
+                  <template #prepend>
+                    <v-icon color="info" size="large">
                       $feedback
                     </v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title>{{ $t('feedback.status.available') }}</v-list-item-title>
-                  </v-list-item-content>
-                  <v-list-item-action v-if="$vuetify.breakpoint.mdAndUp">
-                    <v-btn
-                      color="info"
-                      outlined
-                      rounded
-                      :to="{ name: 'feedback-home', params: { surveyId } }"
-                    >
-                      <v-icon left>
-                        $feedback
-                      </v-icon>
-                      {{ $t(`feedback._`) }}
-                    </v-btn>
-                  </v-list-item-action>
+                  </template>
+                  <v-list-item-title>{{ $t('feedback.status.available') }}</v-list-item-title>
+                  <template #append>
+                    <v-list-item-action v-if="$vuetify.display.mdAndUp">
+                      <v-btn
+                        color="info"
+                        rounded
+                        :to="{ name: 'feedback-home', params: { surveyId } }"
+                        variant="outlined"
+                      >
+                        <v-icon start>
+                          $feedback
+                        </v-icon>
+                        {{ $t(`feedback._`) }}
+                      </v-btn>
+                    </v-list-item-action>
+                  </template>
                 </v-list-item>
-                <v-list-item v-if="$vuetify.breakpoint.smAndDown" class="justify-end">
+                <v-list-item v-if="$vuetify.display.smAndDown" class="justify-end">
                   <v-btn
                     color="info"
-                    large
-                    outlined
                     rounded
+                    size="large"
                     :to="{ name: 'feedback-home', params: { surveyId } }"
+                    variant="outlined"
                   >
-                    <v-icon left>
+                    <v-icon start>
                       $feedback
                     </v-icon>
                     {{ $t(`feedback._`) }}
@@ -268,36 +263,34 @@
                 </v-list-item>
               </template>
               <v-list-item v-else link>
-                <v-list-item-avatar>
-                  <v-icon color="info" large>
+                <template #prepend>
+                  <v-icon color="info" size="large">
                     $info
                   </v-icon>
-                </v-list-item-avatar>
-                <v-list-item-content>
-                  <v-list-item-title>
-                    {{
-                      $t('feedback.status.lowRecalls', {
-                        minRecalls: parameters?.numberOfSubmissionsForFeedback,
-                      })
-                    }}
-                  </v-list-item-title>
-                </v-list-item-content>
+                </template>
+                <v-list-item-title>
+                  {{
+                    $t('feedback.status.lowRecalls', {
+                      minRecalls: parameters?.numberOfSubmissionsForFeedback,
+                    })
+                  }}
+                </v-list-item-title>
               </v-list-item>
             </v-list>
             <v-divider />
           </template>
           <!-- Past recalls -->
-          <v-card-subtitle>
+          <v-card-subtitle class="mt-4">
             {{ $t('recall.submissions.past') }}
           </v-card-subtitle>
           <v-card-text class="py-0">
             <template v-if="submissions.length">
-              <v-timeline dense>
+              <v-timeline density="compact">
                 <v-timeline-item
                   v-for="(submission, idx) in submissions"
                   :key="submission.id"
-                  :color="idx % 2 ? 'info' : 'primary'"
-                  small
+                  :dot-color="idx % 2 ? 'info' : 'primary'"
+                  size="small"
                 >
                   <v-row class="pt-1">
                     <v-col>
@@ -312,16 +305,14 @@
             </template>
             <v-list v-else class="list-no-wrap">
               <v-list-item>
-                <v-list-item-avatar>
-                  <v-icon large>
+                <template #prepend>
+                  <v-icon size="large">
                     $survey
                   </v-icon>
-                </v-list-item-avatar>
-                <v-list-item-content>
-                  <v-list-item-title>
-                    {{ $t('recall.submissions.none') }}
-                  </v-list-item-title>
-                </v-list-item-content>
+                </template>
+                <v-list-item-title>
+                  {{ $t('recall.submissions.none') }}
+                </v-list-item-title>
               </v-list-item>
             </v-list>
           </v-card-text>
diff --git a/apps/survey/src/views/survey/login.vue b/apps/survey/src/views/survey/login.vue
index 91a8ae7b27..a368344743 100644
--- a/apps/survey/src/views/survey/login.vue
+++ b/apps/survey/src/views/survey/login.vue
@@ -1,18 +1,18 @@
 <template>
-  <v-container :class="{ 'pa-0': isMobile }">
+  <v-container :class="{ 'pa-0': $vuetify.display.mobile }">
     <app-entry-screen
-      :subtitle="$t('common.login.subtitle').toString()"
-      :title="$t('common._').toString()"
+      :subtitle="$t('common.login.subtitle')"
+      :title="$t('common._')"
     >
       <template #subtitle>
         <div class="text-h6 text-center font-weight-medium pt-4 pb-2">
           {{ survey?.name }}
         </div>
         <v-card-subtitle class="text-center font-weight-medium py-0">
-          {{ $t('common.login.subtitle').toString() }}
+          {{ $t('common.login.subtitle') }}
         </v-card-subtitle>
       </template>
-      <v-form @keydown.native="errors.clear($event.target.name)" @submit.prevent="submit">
+      <v-form @keydown="errors.clear($event.target.name)" @submit.prevent="submit">
         <v-card-text>
           <v-container>
             <v-row>
@@ -24,31 +24,35 @@
                   hide-details="auto"
                   :label="$t('common.username')"
                   name="username"
-                  outlined
                   prepend-inner-icon="fas fa-user"
                   required
+                  variant="outlined"
                 />
               </v-col>
               <v-col cols="12">
                 <v-text-field
                   v-model="password"
-                  :append-icon="showPassword ? 'fa-eye' : 'fa-eye-slash'"
                   autocomplete="current-password"
                   :error-messages="errors.get('password')"
                   hide-details="auto"
                   :label="$t('common.password')"
                   name="password"
-                  outlined
                   prepend-inner-icon="fas fa-key"
                   required
                   :type="showPassword ? 'text' : 'password'"
-                  @click:append="showPassword = !showPassword"
-                />
+                  variant="outlined"
+                >
+                  <template #append-inner>
+                    <v-icon class="me-2" @click="showPassword = !showPassword">
+                      {{ showPassword ? 'fas fa-eye' : 'fas fa-eye-slash' }}
+                    </v-icon>
+                  </template>
+                </v-text-field>
               </v-col>
             </v-row>
             <v-row justify="center">
               <v-col cols="12">
-                <v-btn block color="primary" rounded type="submit" x-large>
+                <v-btn block color="primary" rounded size="x-large" type="submit">
                   {{ $t('common.login._') }}
                 </v-btn>
               </v-col>
@@ -64,7 +68,7 @@
       </v-form>
       <template v-if="isOpenAccess">
         <v-divider />
-        <v-card-title class="text-h3 font-weight-medium justify-center">
+        <v-card-title class="text-h3 font-weight-medium text-center mt-4">
           {{ `No account?` }}
         </v-card-title>
         <v-card-subtitle class="d-flex justify-center font-weight-medium px-6 pt-4">
@@ -77,10 +81,10 @@
                 <v-btn
                   block
                   color="accent"
-                  outlined
                   rounded
+                  size="x-large"
                   :to="{ name: 'survey-generate-user', params: { surveyId } }"
-                  x-large
+                  variant="outlined"
                 >
                   {{ $t('survey.generateUser._') }}
                 </v-btn>
@@ -93,97 +97,77 @@
   </v-container>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue';
-import { useRouter } from 'vue-router/composables';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 
 import { useAuth } from '@intake24/survey/stores';
 import { AppEntryScreen, Captcha } from '@intake24/ui';
 
 import { useLogin } from './use-login';
 
-export default defineComponent({
+defineOptions({
   name: 'SurveyLogin',
+});
 
-  components: { AppEntryScreen, Captcha },
-
-  props: {
-    surveyId: {
-      type: String,
-      required: true,
-    },
+const props = defineProps({
+  surveyId: {
+    type: String,
+    required: true,
   },
+});
 
-  setup(props) {
-    const router = useRouter();
-    const {
-      captchaEl,
-      captchaToken,
-      errors,
-      fetchSurveyPublicInfo,
-      isOpenAccess,
-      login,
-      password,
-      resetCaptcha,
-      showPassword,
-      status,
-      survey,
-      username,
-    } = useLogin(props);
-
-    const verified = async (token?: string) => {
-      captchaToken.value = token;
-      await login('alias');
-    };
-
-    const expired = () => {
-      resetCaptcha();
-    };
-
-    const submit = async () => {
-      if (captchaEl.value) {
-        captchaEl.value.executeIfCan();
-        return;
-      }
-
-      await login('alias');
-    };
-
-    onMounted(async () => {
-      await fetchSurveyPublicInfo();
-      if (!survey.value) {
-        await router.push({ name: 'home' });
-        return;
-      }
-
-      const auth = useAuth();
-
-      if (!auth.loggedIn) {
-        try {
-          await auth.refresh();
-          await router.push({ name: 'survey-home', params: { surveyId: props.surveyId } });
-        }
-        catch {
-          // continue
-        }
-      }
-    });
-
-    return {
-      captchaEl,
-      errors,
-      expired,
-      fetchSurveyPublicInfo,
-      isOpenAccess,
-      password,
-      showPassword,
-      status,
-      submit,
-      survey,
-      username,
-      verified,
-    };
-  },
+const router = useRouter();
+const {
+  captchaEl,
+  captchaToken,
+  errors,
+  fetchSurveyPublicInfo,
+  isOpenAccess,
+  login,
+  password,
+  resetCaptcha,
+  showPassword,
+  survey,
+  username,
+} = useLogin(props);
+
+async function verified(token?: string) {
+  captchaToken.value = token;
+  await login('alias');
+}
+
+function expired() {
+  resetCaptcha();
+}
+
+async function submit() {
+  if (captchaEl.value) {
+    captchaEl.value.executeIfCan();
+    return;
+  }
+
+  await login('alias');
+}
+
+onMounted(async () => {
+  await fetchSurveyPublicInfo();
+  if (!survey.value) {
+    await router.push({ name: 'home' });
+    return;
+  }
+
+  const auth = useAuth();
+
+  if (!auth.loggedIn) {
+    try {
+      await auth.refresh();
+      await router.push({ name: 'survey-home', params: { surveyId: props.surveyId } });
+    }
+    catch {
+      // continue
+    }
+  }
 });
 </script>
 
diff --git a/apps/survey/src/views/survey/profile.vue b/apps/survey/src/views/survey/profile.vue
index b6c17aaeed..b9d4e0508b 100644
--- a/apps/survey/src/views/survey/profile.vue
+++ b/apps/survey/src/views/survey/profile.vue
@@ -1,99 +1,85 @@
 <template>
-  <v-container :class="{ 'pa-0': isMobile }">
-    <v-row justify="center" :no-gutters="isMobile">
+  <v-container :class="{ 'pa-0': $vuetify.display.mobile }">
+    <v-row justify="center" :no-gutters="$vuetify.display.mobile">
       <v-col cols="12" md="8" sm="9">
-        <v-card v-if="profile" :tile="isMobile">
-          <v-list subheader two-line>
-            <v-subheader>{{ $t('profile.info') }}</v-subheader>
+        <v-card v-if="profile" :tile="$vuetify.display.mobile">
+          <v-list lines="two">
+            <v-list-subheader>{{ $t('profile.info') }}</v-list-subheader>
             <v-list-item>
-              <v-list-item-avatar>
-                <v-icon class="secondary" dark>
-                  fas fa-user
-                </v-icon>
-              </v-list-item-avatar>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('common.name') }}</v-list-item-title>
-                <v-list-item-subtitle>
-                  {{ user?.name || $t('common.not.provided') }}
-                </v-list-item-subtitle>
-              </v-list-item-content>
+              <template #prepend>
+                <v-avatar color="secondary" icon="fas fa-user" />
+              </template>
+              <v-list-item-title>{{ $t('common.name') }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ user?.name || $t('common.not.provided') }}
+              </v-list-item-subtitle>
             </v-list-item>
             <v-list-item>
-              <v-list-item-avatar>
-                <v-icon class="secondary" dark>
-                  fas fa-id-badge
-                </v-icon>
-              </v-list-item-avatar>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('profile.provider') }}</v-list-item-title>
-                <v-list-item-subtitle>
-                  {{ profile.subject.provider || $t('common.not.provided') }}
-                </v-list-item-subtitle>
-              </v-list-item-content>
+              <template #prepend>
+                <v-avatar color="secondary" icon="fas fa-id-badge" />
+              </template>
+              <v-list-item-title>{{ $t('profile.provider') }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ profile.subject.provider || $t('common.not.provided') }}
+              </v-list-item-subtitle>
             </v-list-item>
             <v-list-item>
-              <v-list-item-avatar>
-                <v-icon class="secondary" dark>
-                  fas fa-key
-                </v-icon>
-              </v-list-item-avatar>
-              <v-list-item-content>
-                <v-list-item-title>{{ $t('profile.providerId') }}</v-list-item-title>
-                <v-list-item-subtitle>
-                  {{ profile.subject.providerKey || $t('common.not.provided') }}
-                </v-list-item-subtitle>
-              </v-list-item-content>
+              <template #prepend>
+                <v-avatar color="secondary" icon="fas fa-key" />
+              </template>
+              <v-list-item-title>{{ $t('profile.providerId') }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ profile.subject.providerKey || $t('common.not.provided') }}
+              </v-list-item-subtitle>
             </v-list-item>
           </v-list>
           <v-divider />
-          <v-list flat subheader two-line>
-            <v-subheader>{{ $t('profile.settings') }}</v-subheader>
+          <v-list lines="two">
+            <v-list-subheader>{{ $t('profile.settings') }}</v-list-subheader>
             <v-list-item>
-              <v-list-item-avatar>
-                <v-icon class="secondary" dark>
-                  fas fa-language
-                </v-icon>
-              </v-list-item-avatar>
-              <v-list-item-content>
-                <v-select
-                  hide-details="auto"
-                  item-text="englishName"
-                  item-value="code"
-                  :items="languages"
-                  :label="$t('profile.languages._')"
-                  outlined
-                  :value="language"
-                  @change="updateLanguage"
-                >
-                  <template #item="{ item }">
-                    <span :class="`fi fi-${item.countryFlagCode} mr-3`" />
-                    {{ item.englishName }}
-                  </template>
-                  <template #selection="{ item }">
-                    <span :class="`fi fi-${item.countryFlagCode} mr-3`" />
-                    {{ item.englishName }}
-                  </template>
-                </v-select>
-              </v-list-item-content>
+              <template #prepend>
+                <v-avatar color="secondary" icon="fas fa-language" />
+              </template>
+              <v-select
+                hide-details="auto"
+                item-title="englishName"
+                item-value="code"
+                :items="languages"
+                :label="$t('profile.languages._')"
+                :model-value="language"
+                variant="outlined"
+                @update:model-value="updateLanguage"
+              >
+                <template #item="{ props, item }">
+                  <v-list-item v-bind="props" :title="item.raw.englishName">
+                    <template #prepend>
+                      <span :class="`fi fi-${item.raw.countryFlagCode} me-3`" />
+                    </template>
+                  </v-list-item>
+                </template>
+                <template #selection="{ item }">
+                  <span :class="`fi fi-${item.raw.countryFlagCode} me-3`" />
+                  {{ item.raw.englishName }}
+                </template>
+              </v-select>
             </v-list-item>
           </v-list>
           <v-divider />
           <app-info />
           <v-card-text class="mt-6 d-flex justify-center">
-            <confirm-dialog :label="$t('common.logout._').toString()" @confirm="logout">
-              <template #activator="{ attrs, on }">
+            <confirm-dialog :label="$t('common.logout._')" @confirm="logout">
+              <template #activator="{ props }">
                 <v-btn
-                  v-bind="attrs"
-                  :block="isMobile"
+                  v-bind="props"
+                  :block="$vuetify.display.mobile"
                   class="px-10"
                   color="primary"
-                  outlined
                   rounded
-                  x-large
-                  v-on="on"
+                  size="x-large"
+                  variant="outlined"
                 >
-                  <span class="mr-2">{{ $t('common.logout._') }}</span>
-                  <v-icon right>
+                  <span class="me-2">{{ $t('common.logout._') }}</span>
+                  <v-icon end>
                     $logout
                   </v-icon>
                 </v-btn>
@@ -110,7 +96,7 @@
 <script lang="ts">
 import { mapState } from 'pinia';
 import { computed, defineComponent } from 'vue';
-import { useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router';
 
 import { useApp, useAuth, useSurvey, useUser } from '@intake24/survey/stores';
 import { AppInfo, ConfirmDialog } from '@intake24/ui';
diff --git a/apps/survey/src/views/survey/recall.vue b/apps/survey/src/views/survey/recall.vue
index e939462347..69f02b8361 100644
--- a/apps/survey/src/views/survey/recall.vue
+++ b/apps/survey/src/views/survey/recall.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="container-max" :class="{ 'pa-0': isMobile }" fluid>
+  <v-container class="container-max" :class="{ 'pa-0': $vuetify.display.mobile }" fluid>
     <component :is="layout" />
   </v-container>
 </template>
@@ -24,7 +24,7 @@ export default defineComponent({
 
   computed: {
     layout(): string {
-      return this.isMobile ? 'recall-mobile' : 'recall-desktop';
+      return this.$vuetify.display.mobile ? 'recall-mobile' : 'recall-desktop';
     },
   },
 });
diff --git a/apps/survey/src/views/survey/use-login.ts b/apps/survey/src/views/survey/use-login.ts
index 93734000bc..3baa73e4c1 100644
--- a/apps/survey/src/views/survey/use-login.ts
+++ b/apps/survey/src/views/survey/use-login.ts
@@ -1,6 +1,6 @@
 import axios, { HttpStatusCode } from 'axios';
 import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router';
 
 import type { PublicSurveyEntry } from '@intake24/common/types/http';
 import type { Captcha } from '@intake24/ui';
@@ -15,7 +15,7 @@ export type UseLoginProps = {
 
 export function useLogin(props: UseLoginProps) {
   const auth = useAuth();
-  const { i18n } = useI18n();
+  const { i18n: { t } } = useI18n();
   const router = useRouter();
 
   const username = ref('');
@@ -87,7 +87,7 @@ export function useLogin(props: UseLoginProps) {
           errors.value.record(data.errors);
 
         if (statusCode === HttpStatusCode.Unauthorized)
-          useMessages().error(data.message ?? i18n.t('common.login.err.credentials').toString());
+          useMessages().error(data.message ?? t('common.login.err.credentials'));
 
         return;
       }
diff --git a/apps/survey/tsconfig.app.json b/apps/survey/tsconfig.app.json
new file mode 100644
index 0000000000..b41562b325
--- /dev/null
+++ b/apps/survey/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@intake24/survey/*": ["./src/*"],
+      "@intake24/common/*": ["../../packages/common/src/*"],
+      "@intake24/i18n/*": ["../../packages/i18n/src/*"],
+      "@intake24/ui/*": ["../../packages/ui/src/*"],
+      "@intake24/*": ["../../packages/*/src"]
+    }
+  },
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ]
+}
diff --git a/apps/survey/tsconfig.json b/apps/survey/tsconfig.json
index 87495f0c7b..d85c910cb6 100644
--- a/apps/survey/tsconfig.json
+++ b/apps/survey/tsconfig.json
@@ -1,14 +1,11 @@
 {
-  "extends": "../../packages/ui/tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@intake24/survey/*": ["src/*"],
-      "@intake24/common/*": ["../../packages/common/src/*"],
-      "@intake24/i18n/*": ["../../packages/i18n/src/*"],
-      "@intake24/ui/*": ["../../packages/ui/src/*"],
-      "@intake24/*": ["../../packages/*/src"]
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
     }
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  ],
+  "files": []
 }
diff --git a/apps/survey/tsconfig.node.json b/apps/survey/tsconfig.node.json
new file mode 100644
index 0000000000..6175f032cb
--- /dev/null
+++ b/apps/survey/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "noEmit": true
+  },
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "package.json"
+  ]
+}
diff --git a/apps/survey/tsconfig.tc.json b/apps/survey/tsconfig.tc.json
new file mode 100644
index 0000000000..ad99c149dd
--- /dev/null
+++ b/apps/survey/tsconfig.tc.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../packages/ui/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@intake24/survey/*": ["./src/*"],
+      "@intake24/common/*": ["../../packages/common/src/*"],
+      "@intake24/i18n/*": ["../../packages/i18n/src/*"],
+      "@intake24/ui/*": ["../../packages/ui/src/*"],
+      "@intake24/*": ["../../packages/*/src"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/apps/survey/vite.config.ts b/apps/survey/vite.config.ts
index 6a3137e039..b110b228dd 100644
--- a/apps/survey/vite.config.ts
+++ b/apps/survey/vite.config.ts
@@ -1,16 +1,18 @@
 import childProcess from 'node:child_process';
 import { fileURLToPath, URL } from 'node:url';
 
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import viteLegacy from '@vitejs/plugin-legacy';
-import vue from '@vitejs/plugin-vue2';
+import vue from '@vitejs/plugin-vue';
 import IconsResolver from 'unplugin-icons/resolver';
 import Icons from 'unplugin-icons/vite';
-import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
 import Components from 'unplugin-vue-components/vite';
 import { defineConfig, loadEnv } from 'vite';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import mkcert from 'vite-plugin-mkcert';
 import { VitePWA } from 'vite-plugin-pwa';
+import vueDevToolsPlugin from 'vite-plugin-vue-devtools';
+import vuetify from 'vite-plugin-vuetify';
 import webfontDownload from 'vite-plugin-webfont-dl';
 
 import { isCaptchaProvider, resolveCaptchaScript } from '../../packages/common/src/security';
@@ -38,6 +40,7 @@ export default defineConfig(({ mode }) => {
     LEGACY,
     VITE_APP_NAME: appName,
     VITE_CAPTCHA_PROVIDER: captchaProvider,
+    VUE_DEV_TOOLS,
   } = loadEnv(mode, process.cwd(), '');
 
   const disablePwa = !!(DISABLE_PWA === 'true');
@@ -45,6 +48,7 @@ export default defineConfig(({ mode }) => {
   const https = !!(DEV_HTTPS === 'true');
   const legacy = !!(LEGACY === 'true');
   const sourcemap = !!(PRODUCTION_SOURCE_MAP === 'true');
+  const vueDevTools = !!(VUE_DEV_TOOLS === 'true');
 
   if (captchaProvider && !isCaptchaProvider(captchaProvider))
     throw new Error('Invalid Captcha provider');
@@ -58,17 +62,6 @@ export default defineConfig(({ mode }) => {
         '@intake24/ui': fileURLToPath(new URL('../../packages/ui/src', import.meta.url)),
       },
     },
-    css: {
-      preprocessorOptions: {
-        sass: {
-          additionalData: [
-            '@import "./src/scss/vuetify"',
-            '@import "vuetify/src/styles/settings/_variables"',
-            '',
-          ].join('\n'),
-        },
-      },
-    },
     base,
     build: {
       emptyOutDir,
@@ -106,16 +99,22 @@ export default defineConfig(({ mode }) => {
     },
     plugins: [
       vue(),
+      vuetify({
+        autoImport: true,
+        styles: { configFile: 'src/scss/settings.scss' },
+      }),
+      VueI18nPlugin({ jitCompilation: true }),
       Components({
-        resolvers: [IconsResolver(), VuetifyResolver()],
+        resolvers: [IconsResolver()],
         directoryAsNamespace: true,
       }),
       Icons({ autoInstall: true, compiler: 'vue3' }),
-      legacy ? viteLegacy() : undefined,
-      https ? mkcert({ savePath: DEV_MKCERT_PATH }) : undefined,
       webfontDownload([
         'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
       ]),
+      legacy ? viteLegacy() : undefined,
+      https ? mkcert({ savePath: DEV_MKCERT_PATH }) : undefined,
+      vueDevTools ? vueDevToolsPlugin() : undefined,
       createHtmlPlugin({
         inject: {
           data: {
diff --git a/eslint.config.js b/eslint.config.js
index 4663476d82..ad2b7ff557 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -6,9 +6,7 @@ export default await antfu({
     semi: true,
   },
   markdown: false,
-  vue: {
-    vueVersion: 2,
-  },
+  vue: true,
   formatters: true,
   ignores: [
     'deployment',
diff --git a/package.json b/package.json
index 8da9436c18..6d93bb2f8c 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "@types/prompts": "^2.4.9",
     "calver": "^24.1.0",
     "conventional-changelog-cli": "^5.0.0",
-    "eslint": "^9.11.1",
+    "eslint": "^9.12.0",
     "eslint-plugin-format": "^0.1.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-vue": "^9.28.0",
diff --git a/packages/api-client-v3/package.json b/packages/api-client-v3/package.json
index 3e107546a0..1ad9192de8 100644
--- a/packages/api-client-v3/package.json
+++ b/packages/api-client-v3/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "axios": "^1.7.7",
     "p-limit": "^3.1.0",
-    "winston": "^3.14.2"
+    "winston": "^3.15.0"
   },
   "devDependencies": {
     "@types/node": "^22.7.4"
diff --git a/packages/api-client-v4/package.json b/packages/api-client-v4/package.json
index 581702d58d..1b69cadbec 100644
--- a/packages/api-client-v4/package.json
+++ b/packages/api-client-v4/package.json
@@ -10,16 +10,16 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
-    "cookie": "^0.6.0",
+    "cookie": "^0.7.1",
     "formdata-node": "4.4.1",
     "lodash": "^4.17.21",
     "mime-types": "^2.1.35",
     "p-queue": "^6.6.2",
-    "winston": "^3.14.2"
+    "winston": "^3.15.0"
   },
   "devDependencies": {
     "@types/cookie": "^0.6.0",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/mime-types": "^2.1.4",
     "@types/node": "^22.7.4"
   }
diff --git a/packages/common-backend/package.json b/packages/common-backend/package.json
index 5e435ec2c6..ea5bb41cb8 100644
--- a/packages/common-backend/package.json
+++ b/packages/common-backend/package.json
@@ -24,7 +24,7 @@
     "html-to-text": "^9.0.5",
     "jsdom": "^25.0.1",
     "nodemailer": "^6.9.15",
-    "winston": "^3.14.2",
+    "winston": "^3.15.0",
     "winston-daily-rotate-file": "^5.0.0"
   },
   "devDependencies": {
diff --git a/packages/common/package.json b/packages/common/package.json
index 5a0155d608..d8eae12366 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -25,7 +25,7 @@
     "@ts-rest/core": "^3.51.0",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
-    "awesome-phonenumber": "^7.1.0",
+    "awesome-phonenumber": "^7.2.0",
     "cron-validator": "^1.3.1",
     "date-fns": "^4.1.0",
     "deepmerge": "^4.3.1",
@@ -47,7 +47,7 @@
     "@types/dompurify": "^3.0.5",
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^29.5.13",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/ms": "^0.7.34",
     "@types/node": "^22.7.4",
     "@types/pluralize": "^0.0.33",
diff --git a/packages/common/src/prompts/actions.ts b/packages/common/src/prompts/actions.ts
index 8952fca68a..22fc4d1515 100644
--- a/packages/common/src/prompts/actions.ts
+++ b/packages/common/src/prompts/actions.ts
@@ -7,7 +7,6 @@ export type PromptLayout = (typeof promptLayouts)[number];
 
 export const genericActionTypes = ['addMeal', 'next', 'review'] as const;
 export const mealActionTypes = [
-  'addMeal',
   'deleteMeal',
   'editMeal',
   'mealTime',
@@ -27,7 +26,7 @@ export type MealActionType = (typeof mealActionTypes)[number];
 export type FoodActionType = (typeof foodActionTypes)[number];
 export type ActionType = (typeof actionTypes)[number];
 
-export const actionVariants = ['elevated', 'outlined', 'text'] as const;
+export const actionVariants = ['flat', 'text', 'elevated', 'tonal', 'outlined', 'plain'] as const;
 
 export type ActionVariant = (typeof actionVariants)[number];
 
diff --git a/packages/common/src/theme/index.ts b/packages/common/src/theme/index.ts
index 0fd7f4faa7..e6b568be8f 100644
--- a/packages/common/src/theme/index.ts
+++ b/packages/common/src/theme/index.ts
@@ -1,4 +1,5 @@
 export const colors = {
+  background: '#F5F5F5',
   primary: '#EE672D',
   secondary: '#020202',
   ternary: '#FEE8E1',
diff --git a/packages/common/src/types/http/admin/languages.ts b/packages/common/src/types/http/admin/languages.ts
index 02262bf8f6..93573be6ec 100644
--- a/packages/common/src/types/http/admin/languages.ts
+++ b/packages/common/src/types/http/admin/languages.ts
@@ -79,6 +79,7 @@ export const languageTranslationRequest = languageTranslationAttributes.omit({
   if (!validateTranslations(val.messages))
     return false;
 
+  // @ts-expect-error - i18n types
   const defMessages = defaultI18nMessages[val.application][val.section];
   if (!defMessages)
     return false;
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/common/src/util/index.ts b/packages/common/src/util/index.ts
index 31a82523d1..cbe72e13d7 100644
--- a/packages/common/src/util/index.ts
+++ b/packages/common/src/util/index.ts
@@ -2,6 +2,7 @@ export * from './arrays';
 export * from './errors';
 export * from './numbers';
 export * from './objects';
+export * from './portion-size-checks';
 export * from './session';
 export * from './strings';
 export * from './zod';
diff --git a/packages/db/package.json b/packages/db/package.json
index ceff27641b..d6b9fa3834 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -35,12 +35,12 @@
     "pg-cursor": "^2.12.0",
     "pg-hstore": "^2.3.4",
     "reflect-metadata": "^0.2.2",
-    "sequelize": "^6.37.3",
+    "sequelize": "^6.37.4",
     "sequelize-typescript": "^2.1.6"
   },
   "devDependencies": {
     "@simplewebauthn/types": "^10.0.0",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/node": "^22.7.4",
     "@types/pg": "^8.11.10",
     "@types/pg-cursor": "^2.7.2",
diff --git a/packages/db/src/models/system/language-translation.ts b/packages/db/src/models/system/language-translation.ts
index 01d2e8aa75..5df9d03384 100644
--- a/packages/db/src/models/system/language-translation.ts
+++ b/packages/db/src/models/system/language-translation.ts
@@ -9,7 +9,7 @@ import type {
 import { BelongsTo, Column, CreatedAt, DataType, Table, UpdatedAt } from 'sequelize-typescript';
 
 import type { Application } from '@intake24/common/types';
-import type { LocaleMessageObject } from '@intake24/i18n';
+import type { LocaleMessageDictionary } from '@intake24/i18n';
 
 import BaseModel from '../model';
 import { Language } from '.';
@@ -56,12 +56,12 @@ export default class LanguageTranslation extends BaseModel<
     allowNull: false,
     type: DataType.TEXT({ length: 'long' }),
   })
-  get messages(): LocaleMessageObject {
+  get messages(): LocaleMessageDictionary<any> {
     const val = this.getDataValue('messages') as unknown;
     return JSON.parse(val as string);
   }
 
-  set messages(value: LocaleMessageObject) {
+  set messages(value: LocaleMessageDictionary<any>) {
     // @ts-expect-error: Sequelize/TS issue for setting custom values
     this.setDataValue('messages', JSON.stringify(value));
   }
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index 8f719ec7fc..936ff20fe4 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -23,14 +23,14 @@
   "dependencies": {
     "dompurify": "^3.1.7",
     "lodash": "^4.17.21",
-    "vue": "^2.7.16",
-    "vue-i18n": "^8.28.2"
+    "vue": "^3.5.11",
+    "vue-i18n": "^9.14.1"
   },
   "devDependencies": {
     "@jest/types": "^29.6.3",
     "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.13",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/node": "^22.7.4",
     "jest": "^29.7.0",
     "jest-extended": "^4.0.2",
diff --git a/packages/i18n/src/admin/en/index.ts b/packages/i18n/src/admin/en/index.ts
index 5e2e3bc7d4..fa8e3fbe1a 100644
--- a/packages/i18n/src/admin/en/index.ts
+++ b/packages/i18n/src/admin/en/index.ts
@@ -1,5 +1,3 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import asServedSets from './as-served-sets.json';
 import common from './common.json';
 import dashboard from './dashboard.json';
@@ -28,7 +26,7 @@ import tasks from './tasks.json';
 import user from './user.json';
 import users from './users.json';
 
-const messages: LocaleMessages = {
+const messages = {
   common,
   dashboard,
   'drinkware-sets': drinkwareSets,
diff --git a/packages/i18n/src/admin/en/survey-schemes.json b/packages/i18n/src/admin/en/survey-schemes.json
index 70c71d873e..ff8d64f625 100644
--- a/packages/i18n/src/admin/en/survey-schemes.json
+++ b/packages/i18n/src/admin/en/survey-schemes.json
@@ -88,7 +88,10 @@
       "_": "Action variant",
       "title": "Action variants",
       "elevated": "Elevated",
+      "flat": "Flat",
       "outlined": "Outlined",
+      "plain": "Plain",
+      "tonal": "Tonal",
       "text": "Text"
     }
   },
diff --git a/packages/i18n/src/admin/fr/index.ts b/packages/i18n/src/admin/fr/index.ts
index 5e2e3bc7d4..fa8e3fbe1a 100644
--- a/packages/i18n/src/admin/fr/index.ts
+++ b/packages/i18n/src/admin/fr/index.ts
@@ -1,5 +1,3 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import asServedSets from './as-served-sets.json';
 import common from './common.json';
 import dashboard from './dashboard.json';
@@ -28,7 +26,7 @@ import tasks from './tasks.json';
 import user from './user.json';
 import users from './users.json';
 
-const messages: LocaleMessages = {
+const messages = {
   common,
   dashboard,
   'drinkware-sets': drinkwareSets,
diff --git a/packages/i18n/src/admin/fr/survey-schemes.json b/packages/i18n/src/admin/fr/survey-schemes.json
index 57a7974727..b5d9cbbfcf 100644
--- a/packages/i18n/src/admin/fr/survey-schemes.json
+++ b/packages/i18n/src/admin/fr/survey-schemes.json
@@ -84,7 +84,10 @@
       "_": "Autre action",
       "title": "Autres actions",
       "elevated": "Elevé",
+      "flat": "Flat",
       "outlined": "Esquissé",
+      "plain": "Plain",
+      "tonal": "Tonal",
       "text": "Texte"
     }
   },
diff --git a/packages/i18n/src/admin/index.ts b/packages/i18n/src/admin/index.ts
index ad7b2f0b79..6311309190 100644
--- a/packages/i18n/src/admin/index.ts
+++ b/packages/i18n/src/admin/index.ts
@@ -1,8 +1,6 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import en from './en';
 import fr from './fr';
 
-const messages: Record<string, LocaleMessages> = { en, fr };
+const messages = { en, fr };
 
 export default messages;
diff --git a/packages/i18n/src/api/en/index.ts b/packages/i18n/src/api/en/index.ts
index 2685a5a010..8980481ac0 100644
--- a/packages/i18n/src/api/en/index.ts
+++ b/packages/i18n/src/api/en/index.ts
@@ -1,9 +1,7 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import rateLimit from './rate-limit.json';
 import validation from './validation.json';
 
-const messages: LocaleMessages = {
+const messages = {
   validation,
   rateLimit,
 };
diff --git a/packages/i18n/src/api/en/validation.json b/packages/i18n/src/api/en/validation.json
index 31a0d55a3d..e497dfce16 100644
--- a/packages/i18n/src/api/en/validation.json
+++ b/packages/i18n/src/api/en/validation.json
@@ -131,6 +131,7 @@
     "surveySchemeId": "Survey scheme ID",
     "surveySchemeOverrides": "Survey scheme overrides",
     "suspensionReason": "Suspension reason",
+    "symbol": "Symbol",
     "textDirection": "Text direction",
     "text": "Text",
     "terms": "Terms",
diff --git a/packages/i18n/src/api/fr/index.ts b/packages/i18n/src/api/fr/index.ts
index 2685a5a010..8980481ac0 100644
--- a/packages/i18n/src/api/fr/index.ts
+++ b/packages/i18n/src/api/fr/index.ts
@@ -1,9 +1,7 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import rateLimit from './rate-limit.json';
 import validation from './validation.json';
 
-const messages: LocaleMessages = {
+const messages = {
   validation,
   rateLimit,
 };
diff --git a/packages/i18n/src/api/index.ts b/packages/i18n/src/api/index.ts
index ad7b2f0b79..6311309190 100644
--- a/packages/i18n/src/api/index.ts
+++ b/packages/i18n/src/api/index.ts
@@ -1,8 +1,6 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import en from './en';
 import fr from './fr';
 
-const messages: Record<string, LocaleMessages> = { en, fr };
+const messages = { en, fr };
 
 export default messages;
diff --git a/packages/i18n/src/i18n.ts b/packages/i18n/src/i18n.ts
deleted file mode 100644
index 27ec045530..0000000000
--- a/packages/i18n/src/i18n.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { DateTimeFormat, LocaleMessageObject } from 'vue-i18n';
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
-
-import type { Application } from '@intake24/common/types';
-
-Vue.use(VueI18n);
-
-const dateFormats: DateTimeFormat = {
-  recallDate: {
-    month: 'short',
-    day: 'numeric',
-    weekday: 'long',
-  },
-};
-
-export const i18n = new VueI18n({
-  locale: 'en',
-  fallbackLocale: 'en',
-  dateTimeFormats: {
-    en: dateFormats,
-  },
-});
-
-export const defaultMessages = {
-  messages: {} as Record<string, LocaleMessageObject>,
-
-  getMessages(locale: string) {
-    return this.messages[locale] || {};
-  },
-
-  setMessages(locale: string, newMessages: LocaleMessageObject) {
-    this.messages[locale] = newMessages;
-  },
-};
-
-export async function loadAppLanguage(app: Application, lang: string) {
-  if (i18n.locale === lang || i18n.availableLocales.includes(lang))
-    return;
-
-  await Promise.allSettled([
-    import(`./${app}/${lang}/index.ts`),
-    import(`./shared/${lang}/index.ts`),
-  ]).then(([app, shared]) => {
-    if (app.status !== 'fulfilled' || shared.status !== 'fulfilled')
-      return;
-
-    i18n.setLocaleMessage(lang, { ...app.value.default, ...shared.value.default });
-    i18n.setDateTimeFormat(lang, dateFormats);
-    defaultMessages.setMessages(lang, { ...app.value.default, ...shared.value.default });
-  });
-}
-
-export const loadAdminLanguage = async (lang: string) => loadAppLanguage('admin', lang);
-
-export const loadSurveyLanguage = async (lang: string) => loadAppLanguage('survey', lang);
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
index 8fb84fa1a1..9f98afaf48 100644
--- a/packages/i18n/src/index.ts
+++ b/packages/i18n/src/index.ts
@@ -1,27 +1,97 @@
-import type { LocaleMessages } from 'vue-i18n';
+import type { DefaultLocaleMessageSchema, LocaleMessageDictionary } from 'vue-i18n';
+import { createI18n, useI18n as useI18nLib } from 'vue-i18n';
 
 import type { Application } from '@intake24/common/types';
 
 import admin from './admin';
 import api from './api';
-import { defaultMessages, i18n } from './i18n';
 import shared from './shared';
 import survey from './survey';
-import { translate, translatePath } from './util';
+import { createTranslate, createTranslatePath } from './util';
 
 export { default as admin } from './admin';
 export { default as api } from './api';
-export * from './i18n';
 export { default as shared } from './shared';
 export { default as survey } from './survey';
 export * from './util';
-export type { LocaleMessageObject, LocaleMessages } from 'vue-i18n';
+export type { DefaultLocaleMessageSchema, LocaleMessageDictionary, LocaleMessageValue } from 'vue-i18n';
 
-export const useI18n = () => ({ defaultMessages, i18n, translate, translatePath });
-
-export const defaultI18nMessages: Record<Application, LocaleMessages> = {
+export const defaultI18nMessages = {
   admin: admin.en,
   api: api.en,
   shared: shared.en,
   survey: survey.en,
 };
+
+export type MessageSchema = typeof defaultI18nMessages;
+
+const dateFormats = {
+  recallDate: {
+    month: 'short',
+    day: 'numeric',
+    weekday: 'long',
+  },
+};
+
+export const i18n = createI18n/* <[MessageSchema], 'en'> */({
+  locale: 'en',
+  fallbackLocale: 'en',
+  datetimeFormats: {
+    // @ts-expect-error - i18n types
+    en: dateFormats,
+  },
+  legacy: false,
+});
+
+export const defaultMessages = {
+  messages: {} as Record<string, DefaultLocaleMessageSchema>,
+
+  getMessages(locale: string) {
+    return this.messages[locale] || {};
+  },
+
+  setMessages(locale: string, newMessages: DefaultLocaleMessageSchema) {
+    this.messages[locale] = newMessages;
+  },
+};
+
+export function useI18n() {
+  const globalI18n = useI18nLib({ useScope: 'global' });
+
+  return {
+    i18n: globalI18n,
+    translate: createTranslate(globalI18n),
+    translatePath: createTranslatePath(globalI18n),
+  };
+}
+
+export async function loadAppLanguage(app: Application, lang: string) {
+  // @ts-expect-error - non-legacy is Ref
+  if (i18n.global.locale.value === lang || i18n.global.availableLocales.includes(lang))
+    return;
+
+  await Promise.allSettled([
+    import(`./${app}/${lang}/index.ts`),
+    import(`./shared/${lang}/index.ts`),
+  ]).then(([app, shared]) => {
+    if (app.status !== 'fulfilled' || shared.status !== 'fulfilled')
+      return;
+
+    i18n.global.setLocaleMessage(lang, { ...app.value.default, ...shared.value.default });
+    i18n.global.setDateTimeFormat(lang, dateFormats);
+    defaultMessages.setMessages(lang, { ...app.value.default, ...shared.value.default });
+  });
+}
+
+export const loadAdminLanguage = async (lang: string) => loadAppLanguage('admin', lang);
+
+export const loadSurveyLanguage = async (lang: string) => loadAppLanguage('survey', lang);
+
+export function getDefaultI18nMessages(language = 'en'): Record<string, LocaleMessageDictionary<any>> {
+  return {
+    admin: (admin as Record<string, DefaultLocaleMessageSchema>)[language] ?? admin.en,
+    api: (api as Record<string, DefaultLocaleMessageSchema>)[language] ?? api.en,
+    shared: (shared as Record<string, DefaultLocaleMessageSchema>)[language] ?? shared.en,
+    survey: (survey as Record<string, DefaultLocaleMessageSchema>)[language] ?? survey.en,
+  };
+}
diff --git a/packages/i18n/src/shared/en/index.ts b/packages/i18n/src/shared/en/index.ts
index ebd9c8b031..b6c9c7a06a 100644
--- a/packages/i18n/src/shared/en/index.ts
+++ b/packages/i18n/src/shared/en/index.ts
@@ -1,10 +1,8 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import feedback from './feedback.json';
 import flags from './flags.json';
 import prompts from './prompts.json';
 
-const messages: LocaleMessages = {
+const messages = {
   feedback,
   flags,
   prompts,
diff --git a/packages/i18n/src/shared/fr/index.ts b/packages/i18n/src/shared/fr/index.ts
index ebd9c8b031..b6c9c7a06a 100644
--- a/packages/i18n/src/shared/fr/index.ts
+++ b/packages/i18n/src/shared/fr/index.ts
@@ -1,10 +1,8 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import feedback from './feedback.json';
 import flags from './flags.json';
 import prompts from './prompts.json';
 
-const messages: LocaleMessages = {
+const messages = {
   feedback,
   flags,
   prompts,
diff --git a/packages/i18n/src/shared/index.ts b/packages/i18n/src/shared/index.ts
index c818c8e20f..ee6231d676 100644
--- a/packages/i18n/src/shared/index.ts
+++ b/packages/i18n/src/shared/index.ts
@@ -1,11 +1,9 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import en from './en';
 import fr from './fr';
 import ms from './ms';
 import ta from './ta';
 import zh from './zh';
 
-const messages: Record<string, LocaleMessages> = { en, zh, ta, ms, fr };
+const messages = { en, zh, ta, ms, fr };
 
 export default messages;
diff --git a/packages/i18n/src/shared/ms/index.ts b/packages/i18n/src/shared/ms/index.ts
index ebd9c8b031..b6c9c7a06a 100644
--- a/packages/i18n/src/shared/ms/index.ts
+++ b/packages/i18n/src/shared/ms/index.ts
@@ -1,10 +1,8 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import feedback from './feedback.json';
 import flags from './flags.json';
 import prompts from './prompts.json';
 
-const messages: LocaleMessages = {
+const messages = {
   feedback,
   flags,
   prompts,
diff --git a/packages/i18n/src/shared/ta/index.ts b/packages/i18n/src/shared/ta/index.ts
index ebd9c8b031..b6c9c7a06a 100644
--- a/packages/i18n/src/shared/ta/index.ts
+++ b/packages/i18n/src/shared/ta/index.ts
@@ -1,10 +1,8 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import feedback from './feedback.json';
 import flags from './flags.json';
 import prompts from './prompts.json';
 
-const messages: LocaleMessages = {
+const messages = {
   feedback,
   flags,
   prompts,
diff --git a/packages/i18n/src/shared/zh/index.ts b/packages/i18n/src/shared/zh/index.ts
index ebd9c8b031..b6c9c7a06a 100644
--- a/packages/i18n/src/shared/zh/index.ts
+++ b/packages/i18n/src/shared/zh/index.ts
@@ -1,10 +1,8 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import feedback from './feedback.json';
 import flags from './flags.json';
 import prompts from './prompts.json';
 
-const messages: LocaleMessages = {
+const messages = {
   feedback,
   flags,
   prompts,
diff --git a/packages/i18n/src/survey/en/index.ts b/packages/i18n/src/survey/en/index.ts
index a58852fd79..e6546f1ac3 100644
--- a/packages/i18n/src/survey/en/index.ts
+++ b/packages/i18n/src/survey/en/index.ts
@@ -1,15 +1,15 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import common from './common.json';
 import profile from './profile.json';
 import recall from './recall.json';
 import survey from './survey.json';
 
-const messages: LocaleMessages = {
+const messages = {
   common,
   profile,
   recall,
   survey,
 };
 
+export type MessageSchema = typeof messages;
+
 export default messages;
diff --git a/packages/i18n/src/survey/fr/index.ts b/packages/i18n/src/survey/fr/index.ts
index a58852fd79..d63e729252 100644
--- a/packages/i18n/src/survey/fr/index.ts
+++ b/packages/i18n/src/survey/fr/index.ts
@@ -1,11 +1,9 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import common from './common.json';
 import profile from './profile.json';
 import recall from './recall.json';
 import survey from './survey.json';
 
-const messages: LocaleMessages = {
+const messages = {
   common,
   profile,
   recall,
diff --git a/packages/i18n/src/survey/index.ts b/packages/i18n/src/survey/index.ts
index c818c8e20f..ee6231d676 100644
--- a/packages/i18n/src/survey/index.ts
+++ b/packages/i18n/src/survey/index.ts
@@ -1,11 +1,9 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import en from './en';
 import fr from './fr';
 import ms from './ms';
 import ta from './ta';
 import zh from './zh';
 
-const messages: Record<string, LocaleMessages> = { en, zh, ta, ms, fr };
+const messages = { en, zh, ta, ms, fr };
 
 export default messages;
diff --git a/packages/i18n/src/survey/ms/index.ts b/packages/i18n/src/survey/ms/index.ts
index a58852fd79..d63e729252 100644
--- a/packages/i18n/src/survey/ms/index.ts
+++ b/packages/i18n/src/survey/ms/index.ts
@@ -1,11 +1,9 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import common from './common.json';
 import profile from './profile.json';
 import recall from './recall.json';
 import survey from './survey.json';
 
-const messages: LocaleMessages = {
+const messages = {
   common,
   profile,
   recall,
diff --git a/packages/i18n/src/survey/ta/index.ts b/packages/i18n/src/survey/ta/index.ts
index a58852fd79..d63e729252 100644
--- a/packages/i18n/src/survey/ta/index.ts
+++ b/packages/i18n/src/survey/ta/index.ts
@@ -1,11 +1,9 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import common from './common.json';
 import profile from './profile.json';
 import recall from './recall.json';
 import survey from './survey.json';
 
-const messages: LocaleMessages = {
+const messages = {
   common,
   profile,
   recall,
diff --git a/packages/i18n/src/survey/zh/index.ts b/packages/i18n/src/survey/zh/index.ts
index a58852fd79..d63e729252 100644
--- a/packages/i18n/src/survey/zh/index.ts
+++ b/packages/i18n/src/survey/zh/index.ts
@@ -1,11 +1,9 @@
-import type { LocaleMessages } from 'vue-i18n';
-
 import common from './common.json';
 import profile from './profile.json';
 import recall from './recall.json';
 import survey from './survey.json';
 
-const messages: LocaleMessages = {
+const messages = {
   common,
   profile,
   recall,
diff --git a/packages/i18n/src/util/index.ts b/packages/i18n/src/util/index.ts
index 33f674da9d..2ee499c8df 100644
--- a/packages/i18n/src/util/index.ts
+++ b/packages/i18n/src/util/index.ts
@@ -1,3 +1,4 @@
+import type { LocaleMessageValue, useI18n } from 'vue-i18n';
 import dompurify from 'dompurify';
 import has from 'lodash/has';
 
@@ -8,8 +9,6 @@ import type {
 } from '@intake24/common/types';
 import { getObjectNestedKeys } from '@intake24/common/util';
 
-import { i18n } from '../i18n';
-
 /**
  * Merges two translations files together
  * - merge default built-in translation with database message object
@@ -48,11 +47,11 @@ export function mergeTranslations(target: any, source: any) {
  * @returns {boolean}
  */
 export function compareMessageKeys<
-  T1 extends Dictionary = Dictionary,
-  T2 extends Dictionary = Dictionary,
+  T1 extends LocaleMessageValue = LocaleMessageValue,
+  T2 extends LocaleMessageValue = T1,
 >(x: T1, y: T2): boolean {
-  const xKeys = getObjectNestedKeys(x);
-  const yKeys = getObjectNestedKeys(y);
+  const xKeys = typeof x === 'string' ? [x] : getObjectNestedKeys(x);
+  const yKeys = typeof y === 'string' ? [y] : getObjectNestedKeys(y);
 
   return xKeys.length === yKeys.length && xKeys.every(key => yKeys.includes(key));
 }
@@ -110,42 +109,49 @@ export function sanitizeParams(content: Dictionary<string | number>) {
   }, {} as Dictionary<string>);
 }
 
-export function translate(
-  content?: LocaleTranslation | RequiredLocaleTranslation | string,
-  options: LocaleContentOptions = {},
-): string {
-  const { path, sanitize = false } = options;
-  let { params = {} } = options;
+export function createTranslate(i18n: ReturnType<typeof useI18n>) {
+  return (
+    content?: LocaleTranslation | RequiredLocaleTranslation | string,
+    options: LocaleContentOptions = {},
+  ) => {
+    const { t, locale, messages } = i18n;
+    const { path, sanitize = false } = options;
+    let { params = {} } = options;
 
-  if (sanitize)
-    params = sanitizeParams(params as Dictionary<string | number>);
+    if (sanitize)
+      params = sanitizeParams(params as Dictionary<string | number>);
 
-  if (typeof content === 'string')
-    return replaceParams(content, params);
+    if (typeof content === 'string')
+      return replaceParams(content, params);
 
-  const localeContent = content ? content[i18n.locale] : undefined;
-  if (localeContent)
-    return replaceParams(localeContent, params);
+    const localeContent = content ? content[locale.value] : undefined;
+    if (localeContent)
+      return replaceParams(localeContent, params);
 
-  if (path && has(i18n.messages[i18n.locale], path))
-    return i18n.t(path, params).toString();
+    if (path && has(messages.value[locale.value], path))
+      return t(path, params);
 
-  const enContent = content?.en;
-  if (enContent)
-    return replaceParams(enContent, params);
+    const enContent = content?.en;
+    if (enContent)
+      return replaceParams(enContent, params);
 
-  if (path && has(i18n.messages.en, path))
-    return i18n.t(path, params).toString();
+    if (path && has(messages.value.en, path))
+      return t(path, params);
 
-  return '';
+    return '';
+  };
 }
 
-export function translatePath(
-  path: string,
-  params: Dictionary<string | number> = {},
-  sanitize: boolean = false,
-) {
-  if (sanitize)
-    params = sanitizeParams(params as Dictionary<string | number>);
-  return i18n.t(path, params).toString();
+export function createTranslatePath(i18n: ReturnType<typeof useI18n>) {
+  return (
+    path: string,
+    params: Dictionary<string | number> = {},
+    sanitize: boolean = false,
+  ) => {
+    const { t } = i18n;
+
+    if (sanitize)
+      params = sanitizeParams(params as Dictionary<string | number>);
+    return t(path, params);
+  };
 }
diff --git a/packages/ui/env.d.ts b/packages/ui/env.d.ts
new file mode 100644
index 0000000000..02b8d41995
--- /dev/null
+++ b/packages/ui/env.d.ts
@@ -0,0 +1,4 @@
+/// <reference types="type-fest" />
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vuetify" />
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 15c861abed..1c42ad20ab 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -17,7 +17,7 @@
   "scripts": {},
   "dependencies": {
     "@ericblade/quagga2": "^1.8.4",
-    "@hcaptcha/vue-hcaptcha": "^1.3.0",
+    "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "@pinia/plugin-debounce": "^1.0.1",
     "@pixelverse/strichjs-sdk": "^1.5.2",
     "@vueuse/core": "^11.1.0",
@@ -27,17 +27,17 @@
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "pinia": "^2.2.4",
-    "pinia-plugin-persistedstate": "^4.0.2",
+    "pinia-plugin-persistedstate": "^4.1.1",
     "svg-gauge": "^1.0.7",
-    "vue": "^2.7.16",
+    "vue": "^3.5.11",
     "vue-echarts": "^7.0.3",
-    "vue-i18n": "^8.28.2",
-    "vue-recaptcha": "^1.3.0",
-    "vue-router": "^3.6.5",
-    "vuetify": "^2.7.2"
+    "vue-i18n": "^9.14.1",
+    "vue-recaptcha": "^2.0.3",
+    "vue-router": "^4.4.5",
+    "vuetify": "^3.7.2"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/node": "^22.7.4",
     "type-fest": "^4.26.1",
     "typescript": "^5.6.2",
diff --git a/packages/ui/src/barcodes/index.ts b/packages/ui/src/barcodes/index.ts
index e8e67ac61c..5576cd78f3 100644
--- a/packages/ui/src/barcodes/index.ts
+++ b/packages/ui/src/barcodes/index.ts
@@ -7,7 +7,7 @@ export * from './quagga';
 export * from './strich';
 
 export const barcodes = {
-  none: NoneInput,
-  quagga: QuaggaInput,
-  strich: StrichInput,
+  NoneInput,
+  QuaggaInput,
+  StrichInput,
 };
diff --git a/packages/ui/src/barcodes/none/none-input.vue b/packages/ui/src/barcodes/none/none-input.vue
index 3214eabbb9..d60e71e62f 100644
--- a/packages/ui/src/barcodes/none/none-input.vue
+++ b/packages/ui/src/barcodes/none/none-input.vue
@@ -2,7 +2,6 @@
   <v-text-field
     v-bind="{ name, ...$attrs }"
     v-model="barcode"
-    v-on="$listeners"
   />
 </template>
 
@@ -28,7 +27,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:model-value']);
+const emit = defineEmits(['update:modelValue']);
 
 const barcode = useVModel(props, 'modelValue', emit);
 </script>
diff --git a/packages/ui/src/barcodes/quagga/quagga-input.vue b/packages/ui/src/barcodes/quagga/quagga-input.vue
index 6c3c8bad31..fb3be81c92 100644
--- a/packages/ui/src/barcodes/quagga/quagga-input.vue
+++ b/packages/ui/src/barcodes/quagga/quagga-input.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-text-field ref="inputRef" v-model="barcode" v-bind="{ name, ...$attrs }" v-on="$listeners">
+  <v-text-field ref="inputRef" v-model="barcode" v-bind="{ name, ...$attrs }">
     <template #append>
       <v-icon @click.stop.prevent="open">
         fas fa-barcode
       </v-icon>
       <quagga-reader
-        :dialog.sync="dialog"
+        v-model:dialog="dialog"
         v-bind="{ errorThreshold, options, successfulReads }"
         @detected="detected"
       />
@@ -44,7 +44,7 @@ const props = defineProps({
 
 const emit = defineEmits<{
   (e: 'detected', value: string): void;
-  (e: 'update:model-value', value: string | null): void;
+  (e: 'update:modelValue', value: string | null): void;
 }>();
 
 const barcode = useVModel(props, 'modelValue', emit);
diff --git a/packages/ui/src/barcodes/quagga/quagga-reader.vue b/packages/ui/src/barcodes/quagga/quagga-reader.vue
index 9308918fa0..82c8a3d55f 100644
--- a/packages/ui/src/barcodes/quagga/quagga-reader.vue
+++ b/packages/ui/src/barcodes/quagga/quagga-reader.vue
@@ -1,15 +1,13 @@
 <template>
   <v-dialog
     v-model="dialog"
-    :fullscreen="$vuetify.breakpoint.mobile"
-    :max-width="$vuetify.breakpoint.mobile ? undefined : '640px'"
-    :min-height="$vuetify.breakpoint.mobile ? undefined : '480px'"
+    :fullscreen="$vuetify.display.mobile"
+    :max-width="$vuetify.display.mobile ? undefined : '640px'"
+    :min-height="$vuetify.display.mobile ? undefined : '480px'"
   >
-    <v-card ref="card" :tile="$vuetify.breakpoint.mobile">
+    <v-card ref="card" :tile="$vuetify.display.mobile">
       <v-toolbar color="secondary" dark flat>
-        <v-btn icon :title="$t('common.action.close')" @click.stop="close">
-          <v-icon>$close</v-icon>
-        </v-btn>
+        <v-btn icon="$close" :title="$t('common.action.close')" @click.stop="close" />
         <v-toolbar-title>Scan barcode</v-toolbar-title>
         <v-spacer />
         <v-switch v-model="locate" class="mt-0" hide-details name="locate">
@@ -17,7 +15,7 @@
             <v-icon>fas fa-crosshairs</v-icon>
           </template>
         </v-switch>
-        <v-divider class="ml-2" vertical />
+        <v-divider class="ms-2" vertical />
         <v-btn
           color="white"
           :disabled="!hasTorch"
@@ -42,7 +40,7 @@ import type { PropType } from 'vue';
 import Quagga from '@ericblade/quagga2';
 import { useElementSize, useVModel, watchDebounced } from '@vueuse/core';
 import { defineComponent, onBeforeUnmount, ref, watch } from 'vue';
-import { VCard } from 'vuetify/lib';
+import { VCard } from 'vuetify/components';
 
 import { defaultBarcodeScannerOptions, type QuaggaScanner } from '@intake24/common/barcodes';
 
@@ -80,7 +78,6 @@ const dialog = useVModel(props, 'dialog', emit);
 const card = ref<InstanceType<typeof VCard>>();
 const reader = ref<InstanceType<typeof HTMLFormElement>>();
 
-// @ts-expect-error should allow vue instance?
 const { height, width } = useElementSize(card);
 
 const initializing = ref(false);
diff --git a/packages/ui/src/barcodes/strich/strich-input.vue b/packages/ui/src/barcodes/strich/strich-input.vue
index 3551f51dce..c90dae1e91 100644
--- a/packages/ui/src/barcodes/strich/strich-input.vue
+++ b/packages/ui/src/barcodes/strich/strich-input.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-text-field ref="inputRef" v-model="barcode" v-bind="{ name, ...$attrs }" v-on="$listeners">
+  <v-text-field ref="inputRef" v-model="barcode" v-bind="{ name, ...$attrs }">
     <template #append>
       <v-icon @click.stop.prevent="open">
         fas fa-barcode
       </v-icon>
       <strich-reader
-        :dialog.sync="dialog"
+        v-model:dialog="dialog"
         v-bind="{ options }"
         @detected="detected"
       />
@@ -38,7 +38,7 @@ const props = defineProps({
 
 const emit = defineEmits<{
   (e: 'detected', value: string): void;
-  (e: 'update:model-value', value: string | null): void;
+  (e: 'update:modelValue', value: string | null): void;
 }>();
 
 const barcode = useVModel(props, 'modelValue', emit);
diff --git a/packages/ui/src/barcodes/strich/strich-reader.vue b/packages/ui/src/barcodes/strich/strich-reader.vue
index e26e9a6b29..141f69946e 100644
--- a/packages/ui/src/barcodes/strich/strich-reader.vue
+++ b/packages/ui/src/barcodes/strich/strich-reader.vue
@@ -2,15 +2,13 @@
   <v-dialog
     v-model="dialog"
     eager
-    :fullscreen="$vuetify.breakpoint.mobile"
-    :max-width="$vuetify.breakpoint.mobile ? undefined : '640px'"
-    :min-height="$vuetify.breakpoint.mobile ? undefined : '480px'"
+    :fullscreen="$vuetify.display.mobile"
+    :max-width="$vuetify.display.mobile ? undefined : '640px'"
+    :min-height="$vuetify.display.mobile ? undefined : '480px'"
   >
-    <v-card ref="card" :tile="$vuetify.breakpoint.mobile">
+    <v-card ref="card" :tile="$vuetify.display.mobile">
       <v-toolbar color="secondary" dark flat>
-        <v-btn icon :title="$t('common.action.close')" @click.stop="close">
-          <v-icon>$close</v-icon>
-        </v-btn>
+        <v-btn icon="$close" :title="$t('common.action.close')" @click.stop="close" />
         <v-toolbar-title>Scan barcode</v-toolbar-title>
         <v-spacer />
         <v-btn
@@ -33,7 +31,7 @@ import type { PropType } from 'vue';
 import { BarcodeReader, StrichSDK } from '@pixelverse/strichjs-sdk';
 import { useElementSize, useVModel, watchDebounced } from '@vueuse/core';
 import { defineComponent, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
-import { VCard } from 'vuetify/lib';
+import { VCard } from 'vuetify/components';
 
 import { defaultBarcodeScannerOptions, type StrichScanner } from '@intake24/common/barcodes';
 
@@ -62,7 +60,6 @@ const dialog = useVModel(props, 'dialog', emit);
 const card = ref<InstanceType<typeof VCard>>();
 const reader = ref<InstanceType<typeof HTMLFormElement>>();
 
-// @ts-expect-error should allow vue instance?
 const { height, width } = useElementSize(card);
 
 let barcodeReader: BarcodeReader | undefined;
diff --git a/packages/ui/src/captcha/captcha.vue b/packages/ui/src/captcha/captcha.vue
index 52e50ce89c..d12c0e33f1 100644
--- a/packages/ui/src/captcha/captcha.vue
+++ b/packages/ui/src/captcha/captcha.vue
@@ -7,7 +7,7 @@
         ref="captcha"
         :sitekey="sitekey"
         size="invisible"
-        @challengeExpired="expired"
+        @challenge-expired="expired"
         @expired="expired"
         @verify="verified"
       />
@@ -30,53 +30,52 @@
   </div>
 </template>
 
-<script lang="ts">
-import HCaptcha from '@hcaptcha/vue-hcaptcha';
-import { defineComponent, ref } from 'vue';
-import ReCaptcha from 'vue-recaptcha';
+<script lang="ts" setup>
+import HCaptcha from '@hcaptcha/vue3-hcaptcha';
+import { ref } from 'vue';
+import { VueRecaptcha as ReCaptcha } from 'vue-recaptcha';
 
 import type { CaptchaProvider } from '@intake24/common/security';
 
-export default defineComponent({
+defineOptions({
   name: 'Captcha',
+});
 
-  components: { HCaptcha, ReCaptcha },
-
-  emits: ['expired', 'verified'],
+const emit = defineEmits(['expired', 'verified']);
 
-  setup(props, { emit }) {
-    const captcha = ref<InstanceType<typeof HCaptcha | typeof ReCaptcha>>();
-    const provider = ref<CaptchaProvider | null>(import.meta.env.VITE_CAPTCHA_PROVIDER || null);
-    const sitekey = ref<string>(import.meta.env.VITE_CAPTCHA_SITEKEY || '');
+const captcha = ref<InstanceType<typeof HCaptcha | typeof ReCaptcha>>();
+const provider = ref<CaptchaProvider | null>(import.meta.env.VITE_CAPTCHA_PROVIDER || null);
+const sitekey = ref<string>(import.meta.env.VITE_CAPTCHA_SITEKEY || '');
 
-    const execute = () => {
-      captcha.value?.execute();
-    };
+function execute() {
+  captcha.value?.execute();
+}
 
-    const reset = () => {
-      captcha.value?.reset();
-    };
+function reset() {
+  captcha.value?.reset();
+}
 
-    const expired = () => {
-      emit('expired');
-      reset();
-    };
+function expired() {
+  emit('expired');
+  reset();
+}
 
-    const verified = (token?: string /* , eKey: string */) => {
-      emit('verified', token);
-    };
+function verified(token?: string) {
+  emit('verified', token);
+}
 
-    const executeIfCan = () => {
-      if (!provider.value) {
-        verified();
-        return;
-      }
+function executeIfCan() {
+  if (!provider.value) {
+    verified();
+    return;
+  }
 
-      execute();
-    };
+  execute();
+}
 
-    return { captcha, provider, sitekey, execute, executeIfCan, expired, reset, verified };
-  },
+defineExpose({
+  executeIfCan,
+  reset,
 });
 </script>
 
diff --git a/packages/ui/src/components/app-info.vue b/packages/ui/src/components/app-info.vue
index 02f9f131fa..8489f80aaf 100644
--- a/packages/ui/src/components/app-info.vue
+++ b/packages/ui/src/components/app-info.vue
@@ -1,25 +1,19 @@
 <template>
-  <v-list flat subheader two-line>
-    <v-subheader>{{ $t('common.app.info') }}</v-subheader>
+  <v-list lines="two">
+    <v-list-subheader>{{ $t('common.app.info') }}</v-list-subheader>
     <v-list-item>
-      <v-list-item-avatar>
-        <v-icon class="secondary" dark>
-          fas fa-code-branch
-        </v-icon>
-      </v-list-item-avatar>
-      <v-list-item-content>
-        <v-list-item-title> {{ $t('common.app._') }}: {{ app.name }} </v-list-item-title>
-        <v-list-item-subtitle>
-          {{ $t('common.app.build') }}: {{ app.build.fullVersion }}
-        </v-list-item-subtitle>
-      </v-list-item-content>
-      <v-list-item-action v-if="clipboardAvailable">
-        <v-btn icon :title="$t('common.clipboard._')" @click="copyInfoToClipboard">
-          <v-icon color="secondary">
-            far fa-clipboard
-          </v-icon>
-        </v-btn>
-      </v-list-item-action>
+      <template #prepend>
+        <v-avatar color="secondary" icon="fas fa-code-branch" />
+      </template>
+      <v-list-item-title> {{ $t('common.app._') }}: {{ app.name }}</v-list-item-title>
+      <v-list-item-subtitle>
+        {{ $t('common.app.build') }}: {{ app.build.fullVersion }}
+      </v-list-item-subtitle>
+      <template #append>
+        <v-list-item-action v-if="clipboardAvailable">
+          <v-btn icon="far fa-clipboard" :title="$t('common.clipboard._')" @click="copyInfoToClipboard" />
+        </v-list-item-action>
+      </template>
     </v-list-item>
   </v-list>
 </template>
diff --git a/packages/ui/src/components/dialogs/confirm-dialog.vue b/packages/ui/src/components/dialogs/confirm-dialog.vue
index a22ba49056..fc9828f845 100644
--- a/packages/ui/src/components/dialogs/confirm-dialog.vue
+++ b/packages/ui/src/components/dialogs/confirm-dialog.vue
@@ -1,20 +1,22 @@
 <template>
   <v-dialog v-model="dialog" :max-width="maxWidth" :persistent="persistent">
-    <template v-if="!external" #activator="{ on, attrs }">
-      <slot name="activator" v-bind="{ on, attrs }">
+    <template v-if="!external" #activator="{ props: dProps }">
+      <slot name="activator" v-bind="{ props: dProps }">
         <v-btn
           v-if="show"
-          v-bind="attrs"
-          :class="activatorClass"
-          :color="iconColor ? iconColor : color"
-          :disabled="disabled"
-          :fab="fab"
-          :icon="icon"
-          :small="small"
-          :title="label"
-          v-on="on"
+          v-bind="{
+            ...dProps,
+            class: activatorClass,
+            color: iconColor ? iconColor : color,
+            disabled,
+            icon,
+            rounded,
+            size,
+            title: label,
+            variant,
+          }"
         >
-          <v-icon :left="!icon && !!iconLeft">
+          <v-icon :start="!icon && !!iconLeft">
             {{ iconLeft }}
           </v-icon>
           <template v-if="!icon">
@@ -37,18 +39,18 @@
       <template v-if="typedConfirm">
         <v-divider />
         <v-card-text class="px-6 py-4">
-          <i18n class="text-subtitle-1 mb-2" path="common.action.confirm.typed" tag="p">
+          <i18n-t class="text-subtitle-1 mb-2" keypath="common.action.confirm.typed" tag="p">
             <template #name>
-              <code class="font-weight-bold error--text">{{ `DELETE ${typedConfirm}` }}</code>
+              <code class="font-weight-bold text-error">{{ `DELETE ${typedConfirm}` }}</code>
             </template>
-          </i18n>
+          </i18n-t>
           <v-text-field
             v-model="confirmInput"
-            class="error--text"
+            class="text-error"
             color="error"
-            dense
+            density="compact"
             hide-details="auto"
-            outlined
+            variant="outlined"
           />
         </v-card-text>
       </template>
@@ -59,18 +61,18 @@
             block
             class="mb-3"
             :color="color"
-            large
+            size="large"
             :title="confirmLabel"
             @click.stop="confirm"
           >
-            <v-icon v-if="confirmIcon" left>
+            <v-icon v-if="confirmIcon" start>
               {{ confirmIcon }}
             </v-icon>{{ confirmLabel }}
           </v-btn>
         </v-expand-transition>
 
-        <v-btn block :color="color" large outlined :title="cancelLabel" @click.stop="cancel">
-          <v-icon v-if="cancelIcon" left>
+        <v-btn block :color="color" size="large" :title="cancelLabel" variant="outlined" @click.stop="cancel">
+          <v-icon v-if="cancelIcon" start>
             {{ cancelIcon }}
           </v-icon>{{ cancelLabel }}
         </v-btn>
@@ -79,145 +81,133 @@
   </v-dialog>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { useI18n } from '@intake24/i18n';
 
-export default defineComponent({
-  name: 'ConfirmDialog',
-
-  props: {
-    activatorClass: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-    color: {
-      type: String,
-      default: 'info',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    external: {
-      type: Boolean,
-      default: false,
-    },
-    fab: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: Boolean,
-      default: false,
-    },
-    iconColor: {
-      type: String,
-    },
-    iconLeft: {
-      type: String,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    confirmIcon: {
-      type: String,
-    },
-    confirmText: {
-      type: String,
-    },
-    cancelIcon: {
-      type: String,
-    },
-    cancelText: {
-      type: String,
-    },
-    maxWidth: {
-      type: String,
-      default: '350px',
-    },
-    persistent: {
-      type: Boolean,
-      default: false,
-    },
-    show: {
-      type: Boolean,
-      default: true,
-    },
-    small: {
-      type: Boolean,
-    },
-    titleText: {
-      type: String,
-    },
-    typedConfirm: {
-      type: String,
-    },
-    value: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['cancel', 'close', 'confirm', 'input'],
-
-  setup(props, { emit }) {
-    const { i18n } = useI18n();
-
-    const dialog = ref(props.value);
-
-    const cancelLabel = computed(
-      () => props.cancelText ?? i18n.t('common.action.cancel').toString(),
-    );
-    const confirmLabel = computed(() => props.confirmText ?? props.label);
-    const titleLabel = computed(
-      () => props.titleText ?? i18n.t('common.action.confirm.title').toString(),
-    );
-
-    const confirmInput = ref('');
-    const canConfirm = computed(
-      () => !props.typedConfirm || `DELETE ${props.typedConfirm}` === confirmInput.value,
-    );
-
-    const close = () => {
-      dialog.value = false;
-    };
-
-    const cancel = () => {
-      close();
-      emit('cancel');
-    };
-
-    const confirm = () => {
-      close();
-      emit('confirm');
-    };
-
-    watch(
-      () => props.value,
-      (val) => {
-        dialog.value = val;
-      },
-    );
-
-    watch(dialog, (val) => {
-      if (!val)
-        emit('close');
-    });
-
-    return {
-      canConfirm,
-      confirm,
-      confirmInput,
-      cancel,
-      dialog,
-      cancelLabel,
-      confirmLabel,
-      titleLabel,
-    };
+defineOptions({ name: 'ConfirmDialog' });
+
+const props = defineProps({
+  activatorClass: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  color: {
+    type: String,
+    default: 'info',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  external: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: Boolean,
+    default: false,
+  },
+  iconColor: {
+    type: String,
+  },
+  iconLeft: {
+    type: String,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  confirmIcon: {
+    type: String,
+  },
+  confirmText: {
+    type: String,
+  },
+  cancelIcon: {
+    type: String,
+  },
+  cancelText: {
+    type: String,
+  },
+  maxWidth: {
+    type: String,
+    default: '350px',
+  },
+  persistent: {
+    type: Boolean,
+    default: false,
+  },
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  rounded: {
+    type: [Boolean, String],
+    default: 'md',
+  },
+  size: {
+    type: String,
   },
+  variant: {
+    type: String as PropType<'flat' | 'elevated' | 'outlined' | 'text' | 'plain' | 'tonal'>,
+  },
+  titleText: {
+    type: String,
+  },
+  typedConfirm: {
+    type: String,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['cancel', 'close', 'confirm', 'update:modelValue']);
+
+const dialog = ref(props.modelValue);
+
+const { i18n: { t } } = useI18n();
+
+const cancelLabel = computed(
+  () => props.cancelText ?? t('common.action.cancel'),
+);
+const confirmLabel = computed(() => props.confirmText ?? props.label);
+const titleLabel = computed(
+  () => props.titleText ?? t('common.action.confirm.title'),
+);
+
+const confirmInput = ref('');
+const canConfirm = computed(
+  () => !props.typedConfirm || `DELETE ${props.typedConfirm}` === confirmInput.value,
+);
+
+function close() {
+  dialog.value = false;
+}
+
+function cancel() {
+  close();
+  emit('cancel');
+}
+
+function confirm() {
+  close();
+  emit('confirm');
+}
+
+watch(() => props.modelValue, (val) => {
+  dialog.value = val;
+});
+
+watch(dialog, (val) => {
+  if (props.modelValue !== val)
+    emit('update:modelValue', val);
+
+  if (!val)
+    emit('close');
 });
 </script>
diff --git a/packages/ui/src/components/layouts/app-entry-screen.vue b/packages/ui/src/components/layouts/app-entry-screen.vue
index 9d9fc66dc5..1486067db6 100644
--- a/packages/ui/src/components/layouts/app-entry-screen.vue
+++ b/packages/ui/src/components/layouts/app-entry-screen.vue
@@ -1,30 +1,30 @@
 <template>
-  <div class="d-flex justify-center align-center">
-    <v-card
-      :class="{ 'mt-10': $vuetify.breakpoint.smAndUp }"
-      :max-width="$vuetify.breakpoint.xs ? $vuetify.breakpoint.thresholds.xs : maxWidth"
-      :tile="$vuetify.breakpoint.xs"
-    >
-      <div class="d-flex justify-center align-center pt-4">
-        <slot name="logo">
-          <v-avatar v-if="hasIcon" tile>
-            <img alt="logo" :src="iconFile">
-          </v-avatar>
+  <v-row justify="center" :no-gutters="$vuetify.display.mobile">
+    <v-col cols="12" sm="auto">
+      <v-card
+        :class="{ 'mt-10': $vuetify.display.smAndUp }"
+        :tile="$vuetify.display.xs"
+        :width="$vuetify.display.smAndUp ? width : undefined"
+      >
+        <div class="d-flex justify-center align-center pt-4">
+          <slot name="logo">
+            <v-avatar v-if="hasIcon" :image="iconFile" rounded="0" />
+          </slot>
+          <slot name="title">
+            <v-card-title class="text-h2 font-weight-medium justify-center">
+              {{ title }}
+            </v-card-title>
+          </slot>
+        </div>
+        <slot name="subtitle">
+          <v-card-subtitle v-if="subtitle" class="text-center font-weight-medium px-6 pt-4 pb-0">
+            {{ subtitle }}
+          </v-card-subtitle>
         </slot>
-        <slot name="title">
-          <v-card-title class="text-h2 font-weight-medium justify-center">
-            {{ title }}
-          </v-card-title>
-        </slot>
-      </div>
-      <slot name="subtitle">
-        <v-card-subtitle v-if="subtitle" class="text-center font-weight-medium px-6 pt-4 pb-0">
-          {{ subtitle }}
-        </v-card-subtitle>
-      </slot>
-      <slot />
-    </v-card>
-  </div>
+        <slot />
+      </v-card>
+    </v-col>
+  </v-row>
 </template>
 
 <script lang="ts">
@@ -46,7 +46,7 @@ export default defineComponent({
     subtitle: {
       type: String,
     },
-    maxWidth: {
+    width: {
       type: String,
       default: '30rem',
     },
diff --git a/packages/ui/src/components/message-box.vue b/packages/ui/src/components/message-box.vue
index 5f0c997589..12ddfc4261 100644
--- a/packages/ui/src/components/message-box.vue
+++ b/packages/ui/src/components/message-box.vue
@@ -7,11 +7,11 @@
       :color="message.type"
       :style="{ 'margin-bottom': calculateMargin(idx) }"
       :timeout="message.timeout"
-      @input="clean($event, message.id)"
+      @update:model-value="clean($event, message.id)"
     >
       {{ message.text }}
-      <template #action="{ attrs }">
-        <v-btn dark icon v-bind="attrs" @click="dismiss(message.id)">
+      <template #actions>
+        <v-btn icon @click="dismiss(message.id)">
           <v-icon>fas fa-times</v-icon>
         </v-btn>
       </template>
diff --git a/packages/ui/src/components/service-worker.vue b/packages/ui/src/components/service-worker.vue
index e3b8ee9841..df11d9d6a9 100644
--- a/packages/ui/src/components/service-worker.vue
+++ b/packages/ui/src/components/service-worker.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-snackbar color="secondary" :timeout="-1" :value="needRefresh">
+  <v-snackbar color="secondary" :model-value="needRefresh" :timeout="-1">
     {{ $t('common.sw.check') }}
-    <template #action="{ attrs }">
-      <v-btn dark text v-bind="attrs" @click="updateServiceWorker">
+    <template #actions>
+      <v-btn variant="text" @click="updateServiceWorker">
         {{ $t('common.sw.update') }}
       </v-btn>
     </template>
diff --git a/packages/ui/src/composables/use-clipboard.ts b/packages/ui/src/composables/use-clipboard.ts
index aab1dba463..b32378e500 100644
--- a/packages/ui/src/composables/use-clipboard.ts
+++ b/packages/ui/src/composables/use-clipboard.ts
@@ -5,16 +5,16 @@ import { useI18n } from '@intake24/i18n';
 import { useMessages } from '../stores';
 
 export function useClipboard() {
-  const { i18n } = useI18n();
+  const { i18n: { t } } = useI18n();
   const messages = useMessages();
 
   const clipboardAvailable = computed(() => !!navigator.clipboard);
 
-  const defaultMsg = i18n.t('common.clipboard.copied').toString();
+  const defaultMsg = t('common.clipboard.copied');
 
   async function toClipboard(data: string, message?: string) {
     if (!clipboardAvailable.value) {
-      messages.warning(i18n.t('common.clipboard.na').toString());
+      messages.warning(t('common.clipboard.na'));
       return;
     }
 
diff --git a/packages/ui/src/composables/use-language.ts b/packages/ui/src/composables/use-language.ts
index 54b5d7f6af..cc8eda1d7b 100644
--- a/packages/ui/src/composables/use-language.ts
+++ b/packages/ui/src/composables/use-language.ts
@@ -1,5 +1,5 @@
+import type { useLocale } from 'vuetify';
 import { computed, onMounted, watch } from 'vue';
-import Vuetify from 'vuetify/lib';
 
 import type { I18nLanguageEntry, I18nLanguageListEntry } from '@intake24/common/types/http';
 import { defaultMessages, loadAppLanguage, useI18n } from '@intake24/i18n';
@@ -7,19 +7,18 @@ import { defaultMessages, loadAppLanguage, useI18n } from '@intake24/i18n';
 import type { HttpClient } from '../types';
 import { useApp } from '../stores';
 
-export function useLanguage(app: 'admin' | 'survey', http: HttpClient, vuetify: Vuetify['framework']) {
+export function useLanguage(app: 'admin' | 'survey', http: HttpClient, vI18n: ReturnType<typeof useLocale>) {
   const appStore = useApp();
   const { i18n } = useI18n();
 
   const fallbackLanguages = computed(() => {
-    const { fallbackLocale } = i18n;
-    if (!fallbackLocale)
+    if (!i18n.fallbackLocale.value)
       return [];
 
-    if (typeof fallbackLocale === 'string')
-      return [fallbackLocale];
+    if (typeof i18n.fallbackLocale.value === 'string')
+      return [i18n.fallbackLocale.value];
 
-    return Array.isArray(fallbackLocale) ? fallbackLocale : Object.keys(fallbackLocale);
+    return Array.isArray(i18n.fallbackLocale.value) ? i18n.fallbackLocale.value : Object.keys(i18n.fallbackLocale.value);
   });
 
   const getLanguages = (languageId: string): string[] => [
@@ -30,21 +29,23 @@ export function useLanguage(app: 'admin' | 'survey', http: HttpClient, vuetify:
 
   const hasLanguage = (languageId: string) => i18n.availableLocales.includes(languageId);
 
-  const isRrlLanguage = (languageId: string) => ['ar'].includes(languageId);
-
   const updateAppWithLanguage = (languageId: string, isRtl?: boolean) => {
-    i18n.locale = languageId;
-    vuetify.rtl = typeof isRtl !== 'undefined' ? isRtl : isRrlLanguage(languageId);
+    i18n.locale.value = languageId;
+    vI18n.current.value = languageId;
+
+    if (typeof isRtl !== 'undefined')
+      vI18n.isRtl.value = isRtl;
+
     document.querySelector('html')?.setAttribute('lang', languageId);
     http.axios.defaults.headers.common['Accept-Language'] = languageId;
   };
 
   const setLanguage = async (languageId: string) => {
-    if (languageId === i18n.locale)
+    if (languageId === i18n.locale.value)
       return;
 
     let language = languageId || appStore.lang;
-    let isRrl = isRrlLanguage(language);
+    let isRrl: boolean | undefined;
 
     try {
       const {
diff --git a/packages/ui/src/feedback/charts.ts b/packages/ui/src/feedback/charts.ts
index 495bdb17ba..8deb14031a 100644
--- a/packages/ui/src/feedback/charts.ts
+++ b/packages/ui/src/feedback/charts.ts
@@ -1,3 +1,5 @@
+import type { LocaleTranslation } from '@intake24/common/types';
+
 export type ChartData = {
   name: string;
   value: number;
@@ -5,7 +7,7 @@ export type ChartData = {
 
 export type NutrientChartData = {
   id: string[];
-  name: string;
+  name: LocaleTranslation;
   unit: string;
   data: ChartData[];
 };
diff --git a/packages/ui/src/feedback/components/cards/card-details.ts b/packages/ui/src/feedback/components/cards/card-details.ts
deleted file mode 100644
index 4e74006272..0000000000
--- a/packages/ui/src/feedback/components/cards/card-details.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-import type { CardType, NutrientRuleType, Sentiment } from '@intake24/common/feedback';
-import type {
-  CharacterParameters,
-  FiveADayParameters,
-  NutrientGroupParameters,
-} from '@intake24/ui/feedback';
-import { round } from '@intake24/common/util';
-import { useI18n } from '@intake24/i18n';
-import { DemographicRange } from '@intake24/ui/feedback';
-
-export type FeedbackDetails = {
-  name: string;
-  summary: string | null;
-  description: string | null;
-  showIntake: ('summary' | 'description')[];
-  intake: number;
-  recommendedIntake: DemographicRange | null;
-  unit: string;
-  unitDescription: string | null;
-  sentiment: Sentiment | null;
-  color: string;
-  textClass?: string;
-  iconClass: string;
-  warning?: string | null;
-};
-
-export function getTextClass(sentiment: Sentiment | null): string | undefined {
-  if (!sentiment)
-    return undefined;
-
-  if (['too_low', 'low', 'high', 'too_high'].includes(sentiment))
-    return 'danger--text';
-
-  if (['bit_low', 'bit_high'].includes(sentiment))
-    return 'warning--text';
-
-  return 'success--text';
-}
-
-export function getIconClass(sentiment: Sentiment | null): string {
-  const defaultIcon = 'fas fa-crosshairs';
-
-  const icons: Record<Sentiment, string> = {
-    too_low: 'fas fa-angle-double-down',
-    low: 'fas fa-angle-double-down',
-    bit_low: 'fas fa-angle-down',
-    good: defaultIcon,
-    excellent: defaultIcon,
-    bit_high: 'fas fa-angle-up',
-    high: 'fas fa-angle-double-up',
-    too_high: 'fas fa-angle-double-up',
-  };
-
-  return sentiment ? icons[sentiment] : defaultIcon;
-}
-
-export function getUnitFromNutrientRule(nutrientRule: NutrientRuleType, defaultUnit: string): string {
-  switch (nutrientRule) {
-    case 'energy_divided_by_bmr':
-      return '%';
-    case 'per_unit_of_weight':
-      return `${defaultUnit} per kg`;
-    case 'percentage_of_energy':
-      return '%';
-    case 'range':
-    default:
-      return defaultUnit;
-  }
-}
-
-function getCharacterDetail(parameters: CharacterParameters): FeedbackDetails {
-  const { translate, i18n } = useI18n();
-
-  const { sentiment: charSentiment, results, color, showRecommendations } = parameters;
-
-  const details = results.map((result) => {
-    const {
-      consumption: intake,
-      resultedDemographicGroup: { nutrientRuleType, nutrient, scaleSectors },
-    } = result;
-
-    const { name, summary, description, intake: showIntake, range, sentiment } = scaleSectors[0];
-
-    return {
-      name: translate(name),
-      summary: translate(summary),
-      description: translate(description),
-      intake: round(intake),
-      showIntake,
-      recommendedIntake: showRecommendations
-        ? new DemographicRange(round(range.start), round(range.end))
-        : null,
-      unit: getUnitFromNutrientRule(nutrientRuleType, nutrient!.unit),
-      unitDescription: i18n.t(`feedback.unitDescription.${nutrientRuleType}`).toString(),
-      sentiment,
-      color,
-      textClass: getTextClass(charSentiment ? sentiment : null),
-      iconClass: getIconClass(charSentiment ? sentiment : null),
-    };
-  });
-
-  return details[0];
-}
-
-function getFiveADayDetail(parameters: FiveADayParameters): FeedbackDetails {
-  const { translate } = useI18n();
-
-  const {
-    low,
-    high,
-    unit,
-    portions,
-    color,
-    scaleSector: { name, summary, description, intake: showIntake },
-    showRecommendations,
-  } = parameters;
-  const sentiment = null;
-
-  return {
-    name: translate(name),
-    summary: translate(summary),
-    description: translate(description),
-    intake: portions,
-    showIntake,
-    recommendedIntake: showRecommendations
-      ? new DemographicRange(high?.threshold ?? 5, high?.threshold ?? 5)
-      : null,
-    unit: translate(unit.name),
-    unitDescription: translate(unit.description),
-    sentiment,
-    color,
-    iconClass: getIconClass(sentiment),
-    warning: low && portions < low.threshold ? translate(low.message) : undefined,
-  };
-}
-
-function getNutrientGroupDetail(parameters: NutrientGroupParameters): FeedbackDetails {
-  const { translate } = useI18n();
-
-  const {
-    low,
-    high,
-    unit,
-    intake,
-    recommendedIntake,
-    color,
-    scaleSector: { name, summary, description, intake: showIntake },
-    showRecommendations,
-  } = parameters;
-  const sentiment = null;
-
-  let warning;
-
-  if (low && intake < low.threshold)
-    warning = translate(low.message);
-  else if (high && intake > high.threshold)
-    warning = translate(high.message);
-
-  return {
-    name: translate(name),
-    summary: translate(summary),
-    description: translate(description),
-    intake: round(intake),
-    showIntake,
-    recommendedIntake: showRecommendations
-      ? new DemographicRange(round(recommendedIntake.start), round(recommendedIntake.end))
-      : null,
-    unit: translate(unit.name),
-    unitDescription: translate(unit.description),
-    sentiment,
-    color,
-    iconClass: getIconClass(sentiment),
-    warning,
-  };
-}
-
-export const getDetails: Record<CardType, (...args: any[]) => FeedbackDetails> = {
-  character: getCharacterDetail,
-  'five-a-day': getFiveADayDetail,
-  'nutrient-group': getNutrientGroupDetail,
-};
diff --git a/packages/ui/src/feedback/components/cards/index.ts b/packages/ui/src/feedback/components/cards/index.ts
index b49bc48f71..1b939c21fe 100644
--- a/packages/ui/src/feedback/components/cards/index.ts
+++ b/packages/ui/src/feedback/components/cards/index.ts
@@ -1,4 +1,3 @@
-export * from './card-details';
 export { default as PrintCard } from './print-card.vue';
 export { default as ScreenCard } from './screen-card.vue';
 export { default as TellMeMore } from './tell-me-more.vue';
diff --git a/packages/ui/src/feedback/components/cards/print-card.vue b/packages/ui/src/feedback/components/cards/print-card.vue
index c9d8672c68..0902971b5e 100644
--- a/packages/ui/src/feedback/components/cards/print-card.vue
+++ b/packages/ui/src/feedback/components/cards/print-card.vue
@@ -2,25 +2,23 @@
   <v-container class="print-card pa-0" fluid>
     <v-row class="print-card-header mt-2" no-gutters>
       <v-col cols="4">
-        <v-img :aspect-ratio="4 / 3" class="ml-4" eager :src="backgroundImage" />
+        <v-img :aspect-ratio="4 / 3" class="ms-4" cover eager :src="backgroundImage" />
       </v-col>
       <v-col class="d-flex flex-column" cols>
         <v-card-title class="font-weight-medium py-0">
           {{ detail.name }}
         </v-card-title>
         <v-card-text class="d-flex flex-column py-0 font-weight-medium">
-          <i18n class="mb-2" path="feedback.intake.your" tag="div">
+          <i18n-t class="mb-2" keypath="feedback.intake.your" tag="div">
             <template #nutrient>
               <span>{{ detail.name.toLowerCase() }}</span>
             </template>
             <template #amount>
               <span :class="detail.textClass">{{ formatOutput(detail.intake, detail.unit) }}</span>
             </template>
-          </i18n>
+          </i18n-t>
           <div v-if="detail.recommendedIntake" :class="detail.textClass">
-            <v-icon left>
-              {{ detail.iconClass }}
-            </v-icon>
+            <v-icon :icon="detail.iconClass" start />
             <span>{{ formatOutput(detail.recommendedIntake.toString(), detail.unit) }}</span>
           </div>
           <div class="mt-auto" v-html="detail.unitDescription" />
diff --git a/packages/ui/src/feedback/components/cards/screen-card.vue b/packages/ui/src/feedback/components/cards/screen-card.vue
index c437f94a3e..60509dac0c 100644
--- a/packages/ui/src/feedback/components/cards/screen-card.vue
+++ b/packages/ui/src/feedback/components/cards/screen-card.vue
@@ -1,9 +1,9 @@
 <template>
   <v-card class="card-screen d-flex flex-column" :color="detail.color" height="100%">
-    <v-img :aspect-ratio="16 / 9" :src="backgroundImage" />
+    <v-img :aspect-ratio="16 / 9" cover :src="backgroundImage" />
     <!-- <div v-if="isFiveADay" ref="gaugeRef" class="gauge-container"></div> -->
-    <v-card-subtitle v-if="detail.showIntake.includes('summary')" class="font-weight-medium" :class="textColor">
-      <i18n class="mb-2" path="feedback.intake.your" tag="div">
+    <v-card-subtitle v-if="detail.showIntake.includes('summary')" class="pa-4 font-weight-medium" :class="textColor">
+      <i18n-t class="mb-2" keypath="feedback.intake.your" tag="div">
         <template #nutrient>
           <span>{{ detail.name.toLowerCase() }}</span>
         </template>
@@ -12,12 +12,11 @@
             {{ formatOutput(detail.intake, detail.unit) }}
           </span>
         </template>
-      </i18n>
+      </i18n-t>
       <div v-if="detail.recommendedIntake" :class="textColor ?? detail.textClass">
-        <v-icon left>
-          {{ detail.iconClass }}
+        <v-icon :icon="detail.iconClass" start>
+          <span>{{ formatOutput(detail.recommendedIntake.toString(), detail.unit) }}</span>
         </v-icon>
-        <span>{{ formatOutput(detail.recommendedIntake.toString(), detail.unit) }}</span>
       </div>
     </v-card-subtitle>
     <v-card-text v-if="detail.summary" class="flex-grow-1" :class="textColor">
@@ -58,7 +57,7 @@ export default defineComponent({
     const { backgroundImage, detail, formatOutput } = useCard(props);
 
     const textColor = computed(() =>
-      getContrastYIQ(detail.value.color) < 128 ? 'white--text' : undefined,
+      getContrastYIQ(detail.value.color) < 128 ? 'text-white' : undefined,
     );
 
     /* const colorMap = computed(() => [
diff --git a/packages/ui/src/feedback/components/cards/tell-me-more.vue b/packages/ui/src/feedback/components/cards/tell-me-more.vue
index 02a6ed2bec..b21f30f776 100644
--- a/packages/ui/src/feedback/components/cards/tell-me-more.vue
+++ b/packages/ui/src/feedback/components/cards/tell-me-more.vue
@@ -6,28 +6,26 @@
       :class="textColor"
       :color="detail.color"
       elevation="0"
-      large
+      size="large"
       @click.stop="open"
     >
       {{ $t('feedback.intake.tellMeMore') }}
     </v-btn>
     <v-dialog
       v-model="dialog"
-      :fullscreen="$vuetify.breakpoint.smAndDown"
+      :fullscreen="$vuetify.display.smAndDown"
       max-width="600px"
       scrollable
     >
-      <v-card :tile="$vuetify.breakpoint.smAndDown">
+      <v-card :tile="$vuetify.display.smAndDown">
         <v-toolbar
           class="font-weight-medium text-h3 tell-me-more-title flex-grow-0"
-          color="secondary lighten-1"
+          color="secondary"
           dark
           flat
         >
-          <v-btn dark icon :title="$t('common.action.ok')" @click.stop="close">
-            <v-icon>$close</v-icon>
-          </v-btn>
-          <v-toolbar-title class="pl-2">
+          <v-btn icon="$close" :title="$t('common.action.ok')" @click.stop="close" />
+          <v-toolbar-title class="ps-2">
             {{ detail.name }}
           </v-toolbar-title>
         </v-toolbar>
@@ -55,16 +53,14 @@
           block
           class="button-bottom rounded-t-0 font-weight-bold flex-grow-0 flex-shrink-0"
           :class="{
-            'rounded-b-0': $vuetify.breakpoint.smAndDown,
+            'rounded-b-0': $vuetify.display.smAndDown,
           }"
-          color="secondary lighten-2"
-          large
+          color="secondary"
+          size="large"
           :title="$t('common.action.ok')"
           @click.stop="close"
         >
-          <v-icon left>
-            fas fa-thumbs-up
-          </v-icon>
+          <v-icon icon="fas fa-thumbs-up" start />
           {{ $t('feedback.intake.gotIt') }}
         </v-btn>
       </v-card>
@@ -76,7 +72,7 @@
 import type { PropType } from 'vue';
 import { defineComponent, ref } from 'vue';
 
-import type { FeedbackDetails } from './card-details';
+import type { FeedbackDetails } from './use-card';
 
 export default defineComponent({
   name: 'TellMeMore',
diff --git a/packages/ui/src/feedback/components/cards/use-card.ts b/packages/ui/src/feedback/components/cards/use-card.ts
index bce6c938be..e6d253935f 100644
--- a/packages/ui/src/feedback/components/cards/use-card.ts
+++ b/packages/ui/src/feedback/components/cards/use-card.ts
@@ -1,14 +1,184 @@
 import { computed } from 'vue';
 
-import type { FeedbackCardParameters } from '@intake24/ui/feedback';
+import type { CardType, NutrientRuleType, Sentiment } from '@intake24/common/feedback';
+import type { CharacterParameters, FeedbackCardParameters, FiveADayParameters, NutrientGroupParameters } from '@intake24/ui/feedback';
+import { round } from '@intake24/common/util';
+import { useI18n } from '@intake24/i18n';
+import { DemographicRange } from '@intake24/ui/feedback';
 
-import { getDetails } from './card-details';
+export type FeedbackDetails = {
+  name: string;
+  summary: string | null;
+  description: string | null;
+  showIntake: ('summary' | 'description')[];
+  intake: number;
+  recommendedIntake: DemographicRange | null;
+  unit: string;
+  unitDescription: string | null;
+  sentiment: Sentiment | null;
+  color: string;
+  textClass?: string;
+  iconClass: string;
+  warning?: string | null;
+};
 
 export type UseCardProps = {
   parameters: FeedbackCardParameters;
 };
 
 export function useCard(props: UseCardProps) {
+  const { i18n: { t }, translate } = useI18n();
+
+  function getTextClass(sentiment: Sentiment | null): string | undefined {
+    if (!sentiment)
+      return undefined;
+
+    if (['too_low', 'low', 'high', 'too_high'].includes(sentiment))
+      return 'text-danger';
+
+    if (['bit_low', 'bit_high'].includes(sentiment))
+      return 'text-warning';
+
+    return 'text-success';
+  }
+
+  function getIconClass(sentiment: Sentiment | null): string {
+    const defaultIcon = 'fas fa-crosshairs';
+
+    const icons: Record<Sentiment, string> = {
+      too_low: 'fas fa-angle-double-down',
+      low: 'fas fa-angle-double-down',
+      bit_low: 'fas fa-angle-down',
+      good: defaultIcon,
+      excellent: defaultIcon,
+      bit_high: 'fas fa-angle-up',
+      high: 'fas fa-angle-double-up',
+      too_high: 'fas fa-angle-double-up',
+    };
+
+    return sentiment ? icons[sentiment] : defaultIcon;
+  }
+
+  function getUnitFromNutrientRule(nutrientRule: NutrientRuleType, defaultUnit: string): string {
+    switch (nutrientRule) {
+      case 'energy_divided_by_bmr':
+        return '%';
+      case 'per_unit_of_weight':
+        return `${defaultUnit} per kg`;
+      case 'percentage_of_energy':
+        return '%';
+      case 'range':
+      default:
+        return defaultUnit;
+    }
+  }
+
+  function getCharacterDetail(parameters: CharacterParameters): FeedbackDetails {
+    const { sentiment: charSentiment, results, color, showRecommendations } = parameters;
+
+    const details = results.map((result) => {
+      const {
+        consumption: intake,
+        resultedDemographicGroup: { nutrientRuleType, nutrient, scaleSectors },
+      } = result;
+
+      const { name, summary, description, intake: showIntake, range, sentiment } = scaleSectors[0];
+
+      return {
+        name: translate(name),
+        summary: translate(summary),
+        description: translate(description),
+        intake: round(intake),
+        showIntake,
+        recommendedIntake: showRecommendations
+          ? new DemographicRange(round(range.start), round(range.end))
+          : null,
+        unit: getUnitFromNutrientRule(nutrientRuleType, nutrient!.unit),
+        unitDescription: t(`feedback.unitDescription.${nutrientRuleType}`),
+        sentiment,
+        color,
+        textClass: getTextClass(charSentiment ? sentiment : null),
+        iconClass: getIconClass(charSentiment ? sentiment : null),
+      };
+    });
+
+    return details[0];
+  }
+
+  function getFiveADayDetail(parameters: FiveADayParameters): FeedbackDetails {
+    const {
+      low,
+      high,
+      unit,
+      portions,
+      color,
+      scaleSector: { name, summary, description, intake: showIntake },
+      showRecommendations,
+    } = parameters;
+    const sentiment = null;
+
+    return {
+      name: translate(name),
+      summary: translate(summary),
+      description: translate(description),
+      intake: portions,
+      showIntake,
+      recommendedIntake: showRecommendations
+        ? new DemographicRange(high?.threshold ?? 5, high?.threshold ?? 5)
+        : null,
+      unit: translate(unit.name),
+      unitDescription: translate(unit.description),
+      sentiment,
+      color,
+      iconClass: getIconClass(sentiment),
+      warning: low && portions < low.threshold ? translate(low.message) : undefined,
+    };
+  }
+
+  function getNutrientGroupDetail(parameters: NutrientGroupParameters): FeedbackDetails {
+    const {
+      low,
+      high,
+      unit,
+      intake,
+      recommendedIntake,
+      color,
+      scaleSector: { name, summary, description, intake: showIntake },
+      showRecommendations,
+    } = parameters;
+    const sentiment = null;
+
+    let warning;
+
+    if (low && intake < low.threshold)
+      warning = translate(low.message);
+    else if (high && intake > high.threshold)
+      warning = translate(high.message);
+
+    return {
+      name: translate(name),
+      summary: translate(summary),
+      description: translate(description),
+      intake: round(intake),
+      showIntake,
+      recommendedIntake: showRecommendations
+        ? new DemographicRange(round(recommendedIntake.start), round(recommendedIntake.end))
+        : null,
+      unit: translate(unit.name),
+      unitDescription: translate(unit.description),
+      sentiment,
+      color,
+      iconClass: getIconClass(sentiment),
+      warning,
+    };
+  }
+
+  const getDetails: Record<CardType, (...args: any[]) => FeedbackDetails> = {
+    character: getCharacterDetail,
+    'five-a-day': getFiveADayDetail,
+    'nutrient-group': getNutrientGroupDetail,
+  };
+
   const detail = computed(() => getDetails[props.parameters.type](props.parameters));
   const backgroundImage = computed(() => props.parameters.image);
 
diff --git a/packages/ui/src/feedback/components/feedback-meals.vue b/packages/ui/src/feedback/components/feedback-meals.vue
index 8d6a0064c6..49cd039256 100644
--- a/packages/ui/src/feedback/components/feedback-meals.vue
+++ b/packages/ui/src/feedback/components/feedback-meals.vue
@@ -14,7 +14,7 @@
             :label="$t('recall.submissions._')"
             name="submissions"
             prepend-inner-icon="fas fa-calendar-day"
-            solo
+            variant="solo"
           />
           <v-data-table
             class="elevation-1"
@@ -92,7 +92,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { i18n, translate } = useI18n();
+    const { i18n: { t }, translate } = useI18n();
 
     const selected = ref(props.submissions.length ? props.submissions[0].id : null);
 
@@ -106,7 +106,7 @@ export default defineComponent({
 
     const submissionItems = computed(() =>
       props.submissions.map((item, idx) => ({
-        text: `${i18n.t('recall.submissions._')} ${idx + 1}  | ${new Date(
+        title: `${t('recall.submissions._')} ${idx + 1}  | ${new Date(
           item.endTime,
         ).toLocaleDateString()}`,
         value: item.id,
@@ -115,8 +115,8 @@ export default defineComponent({
 
     const headers = computed(() =>
       mealStats.value.table.fields.map(({ header, fieldId }) => ({
-        text: translate(header),
-        value: fieldId,
+        title: translate(header),
+        key: fieldId,
       })),
     );
 
@@ -126,8 +126,9 @@ export default defineComponent({
       } = mealStats.value;
 
       const chartOptions: EChartsOption[] = chartData.map((item) => {
-        const { name, unit, data } = item;
+        const { unit, data } = item;
         const id = item.id.join(':');
+        const name = translate(item.name);
 
         return {
           textStyle: {
@@ -135,7 +136,7 @@ export default defineComponent({
           },
           id,
           title: {
-            text: i18n.t('feedback.meals.chart', { nutrient: name }).toString(),
+            text: t('feedback.meals.chart', { nutrient: name }),
             left: 'center',
             textStyle: {
               fontWeight: 'bolder',
@@ -206,7 +207,6 @@ export default defineComponent({
 
     return {
       charts,
-      translate,
       headers,
       mealStats,
       selected,
diff --git a/packages/ui/src/feedback/components/feedback-outputs.vue b/packages/ui/src/feedback/components/feedback-outputs.vue
index 9070bf3a70..ffa973b3c6 100644
--- a/packages/ui/src/feedback/components/feedback-outputs.vue
+++ b/packages/ui/src/feedback/components/feedback-outputs.vue
@@ -1,7 +1,7 @@
 <template>
   <v-col cols="12" sm="auto">
     <v-card height="100%">
-      <v-toolbar color="grey lighten-4" flat tile>
+      <v-toolbar color="grey-lighten-4" flat tile>
         <v-toolbar-title class="text-subtitle-1 font-weight-medium text-uppercase">
           {{ $t('feedback.outputs.title') }}
         </v-toolbar-title>
@@ -11,50 +11,40 @@
           v-if="outputs.includes('print')"
           class="mb-3"
           color="secondary"
-          link
-          outlined
           rounded
           :title="$t('feedback.outputs.print')"
+          variant="outlined"
           @click="printFeedback"
         >
-          <v-icon left>
-            fas fa-print
-          </v-icon>
+          <v-icon icon="fas fa-print" start />
           {{ $t('feedback.outputs.print') }}
         </v-btn>
         <v-dialog
           v-if="outputs.includes('email')"
           v-model="email.dialog"
-          :fullscreen="$vuetify.breakpoint.smAndDown"
+          :fullscreen="$vuetify.display.smAndDown"
           max-width="500px"
         >
-          <template #activator="{ attrs, on }">
+          <template #activator="{ props }">
             <v-btn
-              v-bind="attrs"
               class="mb-3"
               color="secondary"
-              link
-              outlined
               rounded
               :title="$t('feedback.outputs.email._')"
-              v-on="on"
+              variant="outlined"
+              v-bind="props"
             >
-              <v-icon left>
-                fas fa-envelope
-              </v-icon>
+              <v-icon icon="fas fa-envelope" start />
               {{ $t('feedback.outputs.email._') }}
             </v-btn>
           </template>
-          <v-card :tile="$vuetify.breakpoint.smAndDown">
+          <v-card :tile="$vuetify.display.smAndDown">
             <v-toolbar color="secondary" dark>
               <v-btn
-                dark
-                icon
+                icon="$close"
                 :title="$t('common.action.close')"
                 @click.stop="email.dialog = false"
-              >
-                <v-icon>$close</v-icon>
-              </v-btn>
+              />
               <v-toolbar-title>{{ $t('feedback.outputs.email.title') }}</v-toolbar-title>
             </v-toolbar>
             <v-card-text class="pa-4">
@@ -68,9 +58,9 @@
                         hide-details="auto"
                         :label="$t('common.email')"
                         name="email"
-                        outlined
                         prepend-inner-icon="fas fa-envelope"
-                        @input="email.errors.clear('email')"
+                        variant="outlined"
+                        @update:model-value="email.errors.clear('email')"
                       />
                     </v-col>
                     <v-col cols="12">
@@ -80,28 +70,26 @@
                         hide-details="auto"
                         :label="$t('common.emailConfirm')"
                         name="emailConfirm"
-                        outlined
                         prepend-inner-icon="fas fa-envelope"
-                        @input="email.errors.clear('emailConfirm')"
+                        variant="outlined"
+                        @update:model-value="email.errors.clear('emailConfirm')"
                       />
                     </v-col>
                     <v-col cols="12">
-                      <v-alert v-if="message" outlined type="success">
+                      <v-alert v-if="message" type="success" variant="outlined">
                         {{ message }}
                       </v-alert>
-                      <v-alert v-if="retry.retryIn" outlined type="warning">
+                      <v-alert v-if="retry.retryIn" type="warning" variant="outlined">
                         {{ retryMessage }}
                       </v-alert>
                       <v-btn
                         block
                         color="secondary"
                         :disabled="!!retry.retryIn || email.errors.any()"
+                        size="x-large"
                         type="submit"
-                        x-large
                       >
-                        <v-icon left>
-                          fas fa-paper-plane
-                        </v-icon>
+                        <v-icon icon="fas fa-paper-plane" start />
                         {{ $t('feedback.outputs.email.send') }}
                       </v-btn>
                     </v-col>
@@ -114,36 +102,30 @@
         <v-dialog
           v-if="outputs.includes('download')"
           v-model="download.dialog"
-          :fullscreen="$vuetify.breakpoint.smAndDown"
+          :fullscreen="$vuetify.display.smAndDown"
           max-width="500px"
         >
-          <template #activator="{ attrs, on }">
+          <template #activator="{ props }">
             <v-btn
-              v-bind="attrs"
+
               class="mb-3"
               color="secondary"
-              link
-              outlined
               rounded
               :title="$t('feedback.outputs.download._')"
-              v-on="on"
+              variant="outlined"
+              v-bind="props"
             >
-              <v-icon left>
-                $download
-              </v-icon>
+              <v-icon icon="$download" start />
               {{ $t('feedback.outputs.download._') }}
             </v-btn>
           </template>
-          <v-card :tile="$vuetify.breakpoint.smAndDown">
+          <v-card :tile="$vuetify.display.smAndDown">
             <v-toolbar color="secondary" dark>
               <v-btn
-                dark
-                icon
+                icon="$close"
                 :title="$t('common.action.close')"
                 @click.stop="download.dialog = false"
-              >
-                <v-icon>$close</v-icon>
-              </v-btn>
+              />
               <v-toolbar-title>{{ $t('feedback.outputs.download.title') }}</v-toolbar-title>
             </v-toolbar>
             <v-card-text class="pa-4">
@@ -155,22 +137,20 @@
                     </div>
                   </v-col>
                   <v-col cols="12">
-                    <v-alert v-if="message" outlined type="success">
+                    <v-alert v-if="message" type="success" variant="outlined">
                       {{ message }}
                     </v-alert>
-                    <v-alert v-if="retry.retryIn" outlined type="warning">
+                    <v-alert v-if="retry.retryIn" type="warning" variant="outlined">
                       {{ retryMessage }}
                     </v-alert>
                     <v-btn
                       block
                       color="secondary"
                       :disabled="!!retry.retryIn"
-                      x-large
+                      size="x-large"
                       @click.stop="downloadFeedback"
                     >
-                      <v-icon left>
-                        fas fa-paper-plane
-                      </v-icon>
+                      <v-icon icon="fas fa-paper-plane" start />
                       {{ $t('feedback.outputs.download.send') }}
                     </v-btn>
                   </v-col>
@@ -234,11 +214,11 @@ export default defineComponent({
 
   computed: {
     retryMessage(): string {
-      return this.$t('feedback.outputs.retry', { secs: this.retry.retryIn }).toString();
+      return this.$t('feedback.outputs.retry', { secs: this.retry.retryIn });
     },
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.clearFeedbackInterval();
   },
 
@@ -258,7 +238,7 @@ export default defineComponent({
         });
         downloadFile(res, `Intake24-MyFeedback-${new Date().toISOString().substring(0, 10)}.pdf`);
 
-        this.message = this.$t('feedback.outputs.download.sent').toString();
+        this.message = this.$t('feedback.outputs.download.sent');
       }
       catch (err) {
         this.message = null;
@@ -290,7 +270,7 @@ export default defineComponent({
         await this.$http.post(`user/feedback`, { ...form, lang, survey, submissions });
 
         this.email.form = { email: '', emailConfirm: '' };
-        this.message = this.$t('feedback.outputs.email.sent').toString();
+        this.message = this.$t('feedback.outputs.email.sent');
       }
       catch (err) {
         this.message = null;
diff --git a/packages/ui/src/feedback/components/feedback-top-foods.vue b/packages/ui/src/feedback/components/feedback-top-foods.vue
index 1787da32c4..54d5748134 100644
--- a/packages/ui/src/feedback/components/feedback-top-foods.vue
+++ b/packages/ui/src/feedback/components/feedback-top-foods.vue
@@ -55,14 +55,15 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { i18n } = useI18n();
+    const { i18n: { t }, translate } = useI18n();
 
     const charts = computed(() => {
       const { colors } = props.topFoods;
 
       const chartOptions: EChartsOption[] = props.topFoods.chartData.map((nutrient) => {
-        const { name, unit, data } = nutrient;
+        const { unit, data } = nutrient;
         const id = nutrient.id.join(':');
+        const name = translate(nutrient.name);
 
         return {
           textStyle: {
@@ -70,7 +71,7 @@ export default defineComponent({
           },
           id,
           title: {
-            text: i18n.t('feedback.topFoods.chart', { nutrient: name }).toString(),
+            text: t('feedback.topFoods.chart', { nutrient: name }),
             left: 'center',
             textStyle: {
               fontWeight: 'bolder',
diff --git a/packages/ui/src/feedback/components/feedback-user-info.vue b/packages/ui/src/feedback/components/feedback-user-info.vue
index 31faa0a01c..858a3af7a0 100644
--- a/packages/ui/src/feedback/components/feedback-user-info.vue
+++ b/packages/ui/src/feedback/components/feedback-user-info.vue
@@ -1,37 +1,29 @@
 <template>
   <v-col cols>
     <v-card>
-      <v-toolbar color="grey lighten-4" flat tile>
+      <v-toolbar color="grey-lighten-4" flat tile>
         <v-toolbar-title class="text-subtitle-1 font-weight-medium text-uppercase">
           {{ $t('feedback.physicalData.title') }}
         </v-toolbar-title>
         <v-spacer />
-        <v-tooltip left>
-          <template #activator="{ attrs, on }">
+        <v-tooltip location="left">
+          <template #activator="{ props }">
             <v-btn
-              v-bind="attrs"
-              icon
+              icon="$edit"
               :title="$t('feedback.physicalData.change')"
               :to="{ name: 'feedback-physical-data', params: { surveyId } }"
-              v-on="on"
-            >
-              <v-icon>$edit</v-icon>
-            </v-btn>
+              v-bind="props"
+            />
           </template>
           <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">
-          <v-list-item :key="idx">
-            <v-list-item-content>
-              <v-list-item-subtitle>
-                {{ item }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
-          </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
@@ -77,13 +69,13 @@ export default defineComponent({
         items.push(
           this.$t('feedback.physicalData.sex', {
             sex: this.$t(`feedback.physicalData.sexes.${sex}`),
-          }).toString(),
+          }),
         );
       }
 
       if (birthdate !== null) {
         items.push(
-          this.$t('feedback.physicalData.age', { age: this.userDemographic.getAge() }).toString(),
+          this.$t('feedback.physicalData.age', { age: this.userDemographic.getAge() }),
         );
       }
 
@@ -94,10 +86,10 @@ export default defineComponent({
       const { heightCm, weightKg } = this.userDemographic.physicalData;
 
       if (heightCm !== null)
-        items.push(this.$t('feedback.physicalData.height', { height: heightCm }).toString());
+        items.push(this.$t('feedback.physicalData.height', { height: heightCm }));
 
       if (weightKg !== null)
-        items.push(this.$t('feedback.physicalData.weight', { weight: weightKg }).toString());
+        items.push(this.$t('feedback.physicalData.weight', { weight: weightKg }));
 
       return items;
     },
@@ -120,7 +112,7 @@ export default defineComponent({
             target: this.$t(
               `feedback.physicalData.weightTargets.${userDemographic.physicalData.weightTarget}`,
             ),
-          }).toString(),
+          }),
         );
       }
 
diff --git a/packages/ui/src/feedback/feedback.ts b/packages/ui/src/feedback/feedback.ts
index 71bf7519ac..5a4318b2f9 100644
--- a/packages/ui/src/feedback/feedback.ts
+++ b/packages/ui/src/feedback/feedback.ts
@@ -50,7 +50,7 @@ export function useFeedback(scheme: ComputedRef<FeedbackSchemeResponse | undefin
 
     const colorIdx = hasSubmissionsSection.value ? idx : idx + 1;
 
-    acc.push({ ...item, class: [`order-${idx}`, `${colorIdx % 2 ? 'grey lighten-4' : 'white'}`] });
+    acc.push({ ...item, class: [`order-${idx}`, `${colorIdx % 2 ? 'bg-grey-lighten-4' : 'bg-white'}`] });
     return acc;
   }, []) ?? []);
 
@@ -61,7 +61,7 @@ export function useFeedback(scheme: ComputedRef<FeedbackSchemeResponse | undefin
 
       const colorIdx = hasSubmissionsSection.value ? idx : idx + 1;
 
-      acc[item] = [`order-${idx}`, `${colorIdx % 2 ? 'grey lighten-4' : 'white'}`];
+      acc[item] = [`order-${idx}`, `${colorIdx % 2 ? 'bg-grey-lighten-4' : 'bg-white'}`];
 
       return acc;
     }, {} as Record<FeedbackStandardSection, string[]>),
diff --git a/packages/ui/src/feedback/meal-stats.ts b/packages/ui/src/feedback/meal-stats.ts
index 8a33dc560b..497dc831e5 100644
--- a/packages/ui/src/feedback/meal-stats.ts
+++ b/packages/ui/src/feedback/meal-stats.ts
@@ -26,12 +26,13 @@ export interface FeedbackMealsData extends Omit<FeedbackMeals, 'chart' | 'table'
 }
 
 export function buildMealStats(feedbackMeals: FeedbackMeals, meals: MealStats[], nutrientTypes: NutrientType[] = []): FeedbackMealsData {
+  // TODO: this should not be here
+  const { translate } = useI18n();
   const { chart, table } = feedbackMeals;
 
   const chartData = chart.nutrients.map((nutrient) => {
-    const { id } = nutrient;
+    const { id, name } = nutrient;
 
-    const name = useI18n().translate(nutrient.name);
     const unit = getNutrientUnit(id, nutrientTypes);
 
     const data = meals.map(meal => ({
@@ -45,7 +46,7 @@ export function buildMealStats(feedbackMeals: FeedbackMeals, meals: MealStats[],
   const tableData = meals.map((meal) => {
     return table.fields.reduce<MealTableFieldData>((acc, field) => {
       let resolvedValue: string | number | null = null;
-      const value = useI18n().translate(field.value);
+      const value = translate(field.value);
 
       switch (field.type) {
         case 'standard':
diff --git a/packages/ui/src/feedback/top-foods.ts b/packages/ui/src/feedback/top-foods.ts
index dfd9e95fc2..ab153d642a 100644
--- a/packages/ui/src/feedback/top-foods.ts
+++ b/packages/ui/src/feedback/top-foods.ts
@@ -1,6 +1,5 @@
 import type { TopFoods } from '@intake24/common/feedback';
 import type { NutrientType } from '@intake24/common/types/http';
-import { useI18n } from '@intake24/i18n';
 import { getNutrientUnit } from '@intake24/ui';
 
 import type { NutrientChartData } from './charts';
@@ -40,9 +39,8 @@ export function buildTopFoods(topFoods: TopFoods, foods: AggregateFoodStats[], n
     return { ...topFoods, chartData: [] };
 
   const chartData = topFoods.nutrientTypes.map((nutrient) => {
-    const { id } = nutrient;
+    const { id, name } = nutrient;
 
-    const name = useI18n().translate(nutrient.name);
     const unit = getNutrientUnit(id, nutrientTypes);
 
     const foodHighInNutrient = filterAndSortFoodByNutrientTypeId(id, foods);
diff --git a/packages/ui/src/services/exceptions.ts b/packages/ui/src/services/exceptions.ts
index 99bb4f7a5d..1b5d7a02ee 100644
--- a/packages/ui/src/services/exceptions.ts
+++ b/packages/ui/src/services/exceptions.ts
@@ -1,9 +1,11 @@
+import type { ComponentPublicInstance } from 'vue';
+
 import { useErrors } from '../stores';
 
-export function errorHandler(err: Error, vm: Vue, info: string) {
+export function errorHandler(err: unknown, vm: ComponentPublicInstance | null, info: string) {
   useErrors().captureError(err, vm, info);
 }
 
-export function warnHandler(msg: string, vm: Vue, trace: string) {
+export function warnHandler(msg: string, vm: ComponentPublicInstance | null, trace: string) {
   useErrors().captureWarn(msg, vm, trace);
 }
diff --git a/packages/ui/src/shims-vue.d.ts b/packages/ui/src/shims-vue.d.ts
deleted file mode 100644
index 5424484583..0000000000
--- a/packages/ui/src/shims-vue.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-
-  export default Vue;
-}
diff --git a/packages/ui/src/stores/bootstrap.ts b/packages/ui/src/stores/bootstrap.ts
index b4cbfd4832..69522d66fd 100644
--- a/packages/ui/src/stores/bootstrap.ts
+++ b/packages/ui/src/stores/bootstrap.ts
@@ -1,10 +1,8 @@
 import { PiniaDebounce } from '@pinia/plugin-debounce';
 import debounce from 'lodash/debounce';
-import { createPinia, PiniaVuePlugin } from 'pinia';
+import { createPinia } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import Vue from 'vue';
 
-Vue.use(PiniaVuePlugin);
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 pinia.use(PiniaDebounce(debounce));
diff --git a/packages/ui/src/stores/errors.ts b/packages/ui/src/stores/errors.ts
index 526f7ed516..4f92404557 100644
--- a/packages/ui/src/stores/errors.ts
+++ b/packages/ui/src/stores/errors.ts
@@ -1,3 +1,4 @@
+import type { ComponentPublicInstance } from 'vue';
 import axios, { HttpStatusCode } from 'axios';
 import { defineStore } from 'pinia';
 
@@ -15,11 +16,11 @@ export type ErrorsState = {
 export const useErrors = defineStore('errors', {
   state: (): ErrorsState => ({ items: [] }),
   actions: {
-    captureError(err: Error, vm: Vue, info: string) {
+    captureError(err: unknown, vm: ComponentPublicInstance | null, info: string) {
       this.processError(err, vm, info);
     },
 
-    processError(err: Error, vm: Vue, info: string) {
+    processError(err: unknown, vm: ComponentPublicInstance | null, info: string) {
       if (axios.isAxiosError(err)) {
         const { response } = err;
         if (response) {
@@ -40,7 +41,9 @@ export const useErrors = defineStore('errors', {
         return;
       }
 
-      useMessages().error(err.message);
+      if (err instanceof Error)
+        useMessages().error(err.message);
+
       console.error(err);
       console.error(vm);
       console.error(info);
@@ -49,11 +52,11 @@ export const useErrors = defineStore('errors', {
       // this.items.push({ err, info });
     },
 
-    captureWarn(msg: string, vm: Vue, trace: string) {
+    captureWarn(msg: string, vm: ComponentPublicInstance | null, trace: string) {
       this.processWarn(msg, vm, trace);
     },
 
-    processWarn(msg: string, vm: Vue, trace: string) {
+    processWarn(msg: string, vm: ComponentPublicInstance | null, trace: string) {
       console.warn(msg);
       console.warn(vm);
       console.warn(trace);
diff --git a/packages/ui/src/types/common.ts b/packages/ui/src/types/common.ts
index d2c696d0e3..dd01e2a2d2 100644
--- a/packages/ui/src/types/common.ts
+++ b/packages/ui/src/types/common.ts
@@ -1,4 +1,4 @@
-import type { UserSecurableAttributes } from '@intake24/db';
+import type { UserSecurableAttributes } from '@intake24/common/types/http/admin';
 
 export interface Permission {
   resource?: string;
diff --git a/packages/ui/src/globals.d.ts b/packages/ui/src/types/globals.d.ts
similarity index 56%
rename from packages/ui/src/globals.d.ts
rename to packages/ui/src/types/globals.d.ts
index b851881e20..4e40055bad 100644
--- a/packages/ui/src/globals.d.ts
+++ b/packages/ui/src/types/globals.d.ts
@@ -1,17 +1,14 @@
-import type { HttpClient, Permission } from './types';
+import type { HttpClient, Permission } from '.';
 
-declare module 'vue/types/vue' {
-  interface Vue {
+declare module 'vue' {
+  interface ComponentCustomProperties {
     $http: HttpClient;
 
     // authMixin
     can: (permission: string | string[] | Permission) => boolean;
 
     // loadingMixin
-    isAppLoading: () => boolean;
-
-    // isMobile mixin
-    isMobile: () => boolean;
+    isAppLoading: boolean;
 
     // moduleMixin
     module: string;
diff --git a/packages/ui/src/types/http.ts b/packages/ui/src/types/http.ts
index ffe73534ef..5aaebd5c6e 100644
--- a/packages/ui/src/types/http.ts
+++ b/packages/ui/src/types/http.ts
@@ -1,5 +1,7 @@
 import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
-import type Router from 'vue-router';
+import type { useRouter } from 'vue-router';
+
+export type Router = ReturnType<typeof useRouter>;
 
 export type SubscribeCallback = (err?: AxiosError) => void;
 
diff --git a/packages/ui/src/types/vite-env.d.ts b/packages/ui/src/types/vite-env.d.ts
new file mode 100644
index 0000000000..f3510aa35b
--- /dev/null
+++ b/packages/ui/src/types/vite-env.d.ts
@@ -0,0 +1,24 @@
+/// <reference types="vite/client" />
+
+import type { CaptchaProvider } from '@intake24/common/security';
+
+interface ImportMetaEnv {
+  readonly VITE_APP_NAME: string;
+  readonly VITE_APP_BASE_URL: string;
+  readonly VITE_APP_PREFIX: string;
+
+  readonly VITE_API_HOST: string;
+  readonly VITE_API_URL: string;
+
+  readonly VITE_CAPTCHA_PROVIDER: CaptchaProvider;
+  readonly VITE_CAPTCHA_SITEKEY: string;
+
+  readonly VITE_GOOGLE_ANALYTICS_ID: string;
+  readonly VITE_STRICH_KEY: string;
+  readonly VITE_WEBPUSH_PUBLIC_KEY: string;
+
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 109bf0783b..3f70b82499 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -26,11 +26,6 @@
       ]
     },
     "resolveJsonModule": true,
-    "types": [
-      "vite/client",
-      "vite-plugin-pwa/client",
-      "vuetify"
-    ],
     "strict": true,
     "noImplicitThis": true,
     "sourceMap": true,
@@ -41,9 +36,6 @@
     "verbatimModuleSyntax": true,
     "skipLibCheck": true
   },
-  "vueCompilerOptions": {
-    "target": 2.7
-  },
   "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9c4ad0f5e8..9aaf01923f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ~3.2.2
-        version: 3.2.2(@typescript-eslint/utils@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@vue/compiler-sfc@3.5.10)(eslint-plugin-format@0.1.2(eslint@9.11.1(jiti@2.0.0)))(eslint@9.11.1(jiti@2.0.0))(svelte@4.2.19)(typescript@5.6.2)(vitest@2.1.1(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1))
+        version: 3.2.2(@typescript-eslint/utils@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(@vue/compiler-sfc@3.5.11)(eslint-plugin-format@0.1.2(eslint@9.12.0(jiti@2.3.1)))(eslint@9.12.0(jiti@2.3.1))(svelte@4.2.19)(typescript@5.6.2)(vitest@2.1.2(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1))
       '@ts-rest/open-api':
         specifier: ^3.51.0
         version: 3.51.0(@ts-rest/core@3.51.0(@types/node@22.7.4)(zod@3.23.8))(zod@3.23.8)
@@ -27,17 +27,17 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0(conventional-commits-filter@5.0.0)
       eslint:
-        specifier: ^9.11.1
-        version: 9.11.1(jiti@2.0.0)
+        specifier: ^9.12.0
+        version: 9.12.0(jiti@2.3.1)
       eslint-plugin-format:
         specifier: ^0.1.2
-        version: 0.1.2(eslint@9.11.1(jiti@2.0.0))
+        version: 0.1.2(eslint@9.12.0(jiti@2.3.1))
       eslint-plugin-simple-import-sort:
         specifier: ^12.1.1
-        version: 12.1.1(eslint@9.11.1(jiti@2.0.0))
+        version: 12.1.1(eslint@9.12.0(jiti@2.3.1))
       eslint-plugin-vue:
         specifier: ^9.28.0
-        version: 9.28.0(eslint@9.11.1(jiti@2.0.0))
+        version: 9.28.0(eslint@9.12.0(jiti@2.3.1))
       execa:
         specifier: ^5.1.1
         version: 5.1.1
@@ -78,11 +78,11 @@ importers:
         specifier: ^10.0.0
         version: 10.0.0
       '@tinymce/tinymce-vue':
-        specifier: ^3.2.8
-        version: 3.2.8(vue@2.7.16)
+        specifier: ^6.0.1
+        version: 6.0.1(vue@3.5.11(typescript@5.6.2))
       '@vueuse/core':
         specifier: ^11.1.0
-        version: 11.1.0(vue@2.7.16)
+        version: 11.1.0(vue@3.5.11(typescript@5.6.2))
       axios:
         specifier: ^1.7.7
         version: 1.7.7(debug@4.3.7)
@@ -115,7 +115,7 @@ importers:
         version: 8.0.0
       json-editor-vue:
         specifier: ^0.17.0
-        version: 0.17.0(@lezer/common@1.2.1)(vue@2.7.16)
+        version: 0.17.0(@lezer/common@1.2.2)(vue@3.5.11(typescript@5.6.2))
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -124,10 +124,10 @@ importers:
         version: 3.3.7
       pinia:
         specifier: ^2.2.4
-        version: 2.2.4(typescript@5.6.2)(vue@2.7.16)
+        version: 2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2))
       pinia-plugin-persistedstate:
-        specifier: ^4.0.2
-        version: 4.0.2(pinia@2.2.4(typescript@5.6.2)(vue@2.7.16))(rollup@2.79.2)(webpack-sources@3.2.3)
+        specifier: ^4.1.1
+        version: 4.1.1(pinia@2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2)))(rollup@2.79.2)(webpack-sources@3.2.3)
       pluralize:
         specifier: ^8.0.0
         version: 8.0.0
@@ -135,33 +135,42 @@ importers:
         specifier: ^7.3.0
         version: 7.3.0
       vue:
-        specifier: ^2.7.16
-        version: 2.7.16
+        specifier: ^3.5.11
+        version: 3.5.11(typescript@5.6.2)
       vue-dompurify-html:
-        specifier: ^4.1.4
-        version: 4.1.4(vue@2.7.16)
+        specifier: ^5.1.0
+        version: 5.1.0(vue@3.5.11(typescript@5.6.2))
+      vue-draggable-plus:
+        specifier: ^0.5.3
+        version: 0.5.3(@types/sortablejs@1.15.8)
       vue-gtag:
-        specifier: ^1.16.1
-        version: 1.16.1(vue@2.7.16)
+        specifier: ^2.0.1
+        version: 2.0.1(vue@3.5.11(typescript@5.6.2))
       vue-i18n:
-        specifier: ^8.28.2
-        version: 8.28.2(vue@2.7.16)
+        specifier: ^9.14.1
+        version: 9.14.1(vue@3.5.11(typescript@5.6.2))
       vue-router:
-        specifier: ^3.6.5
-        version: 3.6.5(vue@2.7.16)
-      vuedraggable:
-        specifier: ^2.24.3
-        version: 2.24.3
+        specifier: ^4.4.5
+        version: 4.4.5(vue@3.5.11(typescript@5.6.2))
       vuetify:
-        specifier: ^2.7.2
-        version: 2.7.2(vue@2.7.16)
+        specifier: ^3.7.2
+        version: 3.7.2(typescript@5.6.2)(vite-plugin-vuetify@2.0.4)(vue@3.5.11(typescript@5.6.2))
     devDependencies:
+      '@intlify/unplugin-vue-i18n':
+        specifier: ^4.0.0
+        version: 4.0.0(rollup@2.79.2)(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))(webpack-sources@3.2.3)
+      '@simplewebauthn/types':
+        specifier: ^10.0.0
+        version: 10.0.0
+      '@tsconfig/node20':
+        specifier: ^20.1.4
+        version: 20.1.4
       '@types/jsdom':
         specifier: ^21.1.7
         version: 21.1.7
       '@types/lodash':
-        specifier: ^4.17.9
-        version: 4.17.9
+        specifier: ^4.17.10
+        version: 4.17.10
       '@types/node':
         specifier: ^22.7.4
         version: 22.7.4
@@ -171,9 +180,12 @@ importers:
       '@vite-pwa/assets-generator':
         specifier: ^0.2.6
         version: 0.2.6
-      '@vitejs/plugin-vue2':
-        specifier: ^2.3.1
-        version: 2.3.1(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))(vue@2.7.16)
+      '@vitejs/plugin-vue':
+        specifier: ^5.1.4
+        version: 5.1.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))
+      '@vue/tsconfig':
+        specifier: ^0.5.1
+        version: 0.5.1
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
@@ -181,32 +193,38 @@ importers:
         specifier: ^25.0.1
         version: 25.0.1
       sass:
-        specifier: ~1.32.13
-        version: 1.32.13
+        specifier: ^1.79.4
+        version: 1.79.4
       typescript:
         specifier: ^5.6.2
         version: 5.6.2
       unplugin-vue-components:
         specifier: ^0.27.4
-        version: 0.27.4(@babel/parser@7.25.6)(@nuxt/kit@3.13.2(rollup@2.79.2)(webpack-sources@3.2.3))(rollup@2.79.2)(vue@2.7.16)(webpack-sources@3.2.3)
+        version: 0.27.4(@babel/parser@7.25.7)(@nuxt/kit@3.13.2(rollup@2.79.2)(webpack-sources@3.2.3))(rollup@2.79.2)(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)
       vite:
         specifier: ^5.4.8
-        version: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
+        version: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
       vite-plugin-html:
         specifier: ^3.2.2
-        version: 3.2.2(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))
+        version: 3.2.2(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
       vite-plugin-mkcert:
         specifier: ^1.17.6
-        version: 1.17.6(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))
+        version: 1.17.6(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
       vite-plugin-pwa:
         specifier: ^0.20.5
-        version: 0.20.5(@vite-pwa/assets-generator@0.2.6)(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))(workbox-build@7.1.0(@types/babel__core@7.20.5))(workbox-window@7.1.0)
+        version: 0.20.5(@vite-pwa/assets-generator@0.2.6)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(workbox-build@7.1.0(@types/babel__core@7.20.5))(workbox-window@7.1.0)
+      vite-plugin-vue-devtools:
+        specifier: ^7.4.6
+        version: 7.4.6(@nuxt/kit@3.13.2(rollup@2.79.2)(webpack-sources@3.2.3))(rollup@2.79.2)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))
+      vite-plugin-vuetify:
+        specifier: ^2.0.4
+        version: 2.0.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))(vuetify@3.7.2)
       vite-plugin-webfont-dl:
         specifier: ^3.9.5
-        version: 3.9.5(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))
+        version: 3.9.5(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
       vitest:
-        specifier: ^2.1.1
-        version: 2.1.1(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.32.13)(terser@5.34.1)
+        specifier: ^2.1.2
+        version: 2.1.2(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1)
       vue-tsc:
         specifier: ^2.1.6
         version: 2.1.6(typescript@5.6.2)
@@ -238,8 +256,8 @@ importers:
         specifier: ^3.51.0
         version: 3.51.0(@ts-rest/core@3.51.0(@types/node@22.7.4)(zod@3.23.8))(express@4.21.0)(zod@3.23.8)
       awilix:
-        specifier: ^11.0.0
-        version: 11.0.0
+        specifier: ^12.0.1
+        version: 12.0.1
       axios:
         specifier: ^1.7.7
         version: 1.7.7(debug@4.3.7)
@@ -247,8 +265,8 @@ importers:
         specifier: ^1.20.3
         version: 1.20.3
       bullmq:
-        specifier: ^5.14.0
-        version: 5.14.0
+        specifier: ^5.16.0
+        version: 5.16.0
       clean-css:
         specifier: ^5.3.3
         version: 5.3.3
@@ -274,8 +292,8 @@ importers:
         specifier: ^4.21.0
         version: 4.21.0
       express-rate-limit:
-        specifier: ^7.4.0
-        version: 7.4.0(express@4.21.0)
+        specifier: ^7.4.1
+        version: 7.4.1(express@4.21.0)
       express-session:
         specifier: ^1.18.0
         version: 1.18.0
@@ -361,14 +379,14 @@ importers:
         specifier: ^8.0.0
         version: 8.0.0
       puppeteer:
-        specifier: ^23.4.1
-        version: 23.4.1(typescript@5.6.2)
+        specifier: ^23.5.0
+        version: 23.5.0(typescript@5.6.2)
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
       rate-limit-redis:
         specifier: ^4.2.0
-        version: 4.2.0(express-rate-limit@7.4.0(express@4.21.0))
+        version: 4.2.0(express-rate-limit@7.4.1(express@4.21.0))
       reflect-metadata:
         specifier: ^0.2.2
         version: 0.2.2
@@ -376,11 +394,11 @@ importers:
         specifier: ^2.5.0
         version: 2.5.0
       sequelize:
-        specifier: ^6.37.3
-        version: 6.37.3(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)
+        specifier: ^6.37.4
+        version: 6.37.4(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)
       sequelize-typescript:
         specifier: ^2.1.6
-        version: 2.1.6(@types/node@22.7.4)(@types/validator@13.12.2)(reflect-metadata@0.2.2)(sequelize@6.37.3(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1))
+        version: 2.1.6(@types/node@22.7.4)(@types/validator@13.12.2)(reflect-metadata@0.2.2)(sequelize@6.37.4(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1))
       sharp:
         specifier: ^0.33.5
         version: 0.33.5
@@ -446,8 +464,8 @@ importers:
         specifier: ^9.0.7
         version: 9.0.7
       '@types/lodash':
-        specifier: ^4.17.9
-        version: 4.17.9
+        specifier: ^4.17.10
+        version: 4.17.10
       '@types/morgan':
         specifier: ^1.9.9
         version: 1.9.9
@@ -513,7 +531,7 @@ importers:
         version: 7.0.0
       ts-jest:
         specifier: ^29.2.5
-        version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
+        version: 29.2.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
       ts-loader:
         specifier: ^9.5.1
         version: 9.5.1(typescript@5.6.2)(webpack@5.95.0(webpack-cli@5.1.4))
@@ -587,11 +605,11 @@ importers:
         specifier: ^2.0.0
         version: 2.0.0
       sequelize:
-        specifier: ^6.37.3
-        version: 6.37.3(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)
+        specifier: ^6.37.4
+        version: 6.37.4(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)
       sequelize-typescript:
         specifier: ^2.1.6
-        version: 2.1.6(@types/node@22.7.4)(@types/validator@13.12.2)(reflect-metadata@0.2.2)(sequelize@6.37.3(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1))
+        version: 2.1.6(@types/node@22.7.4)(@types/validator@13.12.2)(reflect-metadata@0.2.2)(sequelize@6.37.4(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1))
       web-push:
         specifier: ^3.6.7
         version: 3.6.7
@@ -603,8 +621,8 @@ importers:
         specifier: ^11.0.4
         version: 11.0.4
       '@types/lodash':
-        specifier: ^4.17.9
-        version: 4.17.9
+        specifier: ^4.17.10
+        version: 4.17.10
       '@types/node':
         specifier: ^22.7.4
         version: 22.7.4
@@ -749,7 +767,7 @@ importers:
         version: 7.0.0
       ts-jest:
         specifier: ^29.2.5
-        version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
+        version: 29.2.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
       ts-loader:
         specifier: ^9.5.1
         version: 9.5.1(typescript@5.6.2)(webpack@5.95.0(webpack-cli@5.1.4))
@@ -778,8 +796,8 @@ importers:
   apps/survey:
     dependencies:
       '@coddicat/vue-pinch-scroll-zoom':
-        specifier: ^3.3.4
-        version: 3.3.4(vue@2.7.16)
+        specifier: ^4.7.1
+        version: 4.7.1(typescript@5.6.2)
       '@flatten-js/core':
         specifier: ^1.6.2
         version: 1.6.2
@@ -788,10 +806,10 @@ importers:
         version: 6.6.0
       '@vueuse/core':
         specifier: ^11.1.0
-        version: 11.1.0(vue@2.7.16)
+        version: 11.1.0(vue@3.5.11(typescript@5.6.2))
       awesome-phonenumber:
-        specifier: ^7.1.0
-        version: 7.1.0
+        specifier: ^7.2.0
+        version: 7.2.0
       axios:
         specifier: ^1.7.7
         version: 1.7.7(debug@4.3.7)
@@ -821,28 +839,28 @@ importers:
         version: 4.17.21
       pinia:
         specifier: ^2.2.4
-        version: 2.2.4(typescript@5.6.2)(vue@2.7.16)
+        version: 2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2))
       pinia-plugin-persistedstate:
-        specifier: ^4.0.2
-        version: 4.0.2(pinia@2.2.4(typescript@5.6.2)(vue@2.7.16))(rollup@4.23.0)(webpack-sources@3.2.3)
+        specifier: ^4.1.1
+        version: 4.1.1(pinia@2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2)))(rollup@4.24.0)(webpack-sources@3.2.3)
       uuid:
         specifier: ^10.0.0
         version: 10.0.0
       vue:
-        specifier: ^2.7.16
-        version: 2.7.16
+        specifier: ^3.5.11
+        version: 3.5.11(typescript@5.6.2)
       vue-gtag:
-        specifier: ^1.16.1
-        version: 1.16.1(vue@2.7.16)
+        specifier: ^2.0.1
+        version: 2.0.1(vue@3.5.11(typescript@5.6.2))
       vue-i18n:
-        specifier: ^8.28.2
-        version: 8.28.2(vue@2.7.16)
+        specifier: ^9.14.1
+        version: 9.14.1(vue@3.5.11(typescript@5.6.2))
       vue-router:
-        specifier: ^3.6.5
-        version: 3.6.5(vue@2.7.16)
+        specifier: ^4.4.5
+        version: 4.4.5(vue@3.5.11(typescript@5.6.2))
       vuetify:
-        specifier: ^2.7.2
-        version: 2.7.2(vue@2.7.16)
+        specifier: ^3.7.2
+        version: 3.7.2(typescript@5.6.2)(vite-plugin-vuetify@2.0.4)(vue@3.5.11(typescript@5.6.2))
     devDependencies:
       '@iconify-json/fluent':
         specifier: ^1.2.2
@@ -850,12 +868,18 @@ importers:
       '@iconify-json/game-icons':
         specifier: ^1.2.0
         version: 1.2.0
+      '@intlify/unplugin-vue-i18n':
+        specifier: ^4.0.0
+        version: 4.0.0(rollup@4.24.0)(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))(webpack-sources@3.2.3)
+      '@tsconfig/node20':
+        specifier: ^20.1.4
+        version: 20.1.4
       '@types/jsdom':
         specifier: ^21.1.7
         version: 21.1.7
       '@types/lodash':
-        specifier: ^4.17.9
-        version: 4.17.9
+        specifier: ^4.17.10
+        version: 4.17.10
       '@types/node':
         specifier: ^22.7.4
         version: 22.7.4
@@ -867,13 +891,13 @@ importers:
         version: 0.2.6
       '@vitejs/plugin-legacy':
         specifier: ^5.4.2
-        version: 5.4.2(terser@5.34.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))
-      '@vitejs/plugin-vue2':
-        specifier: ^2.3.1
-        version: 2.3.1(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))(vue@2.7.16)
-      '@vue/compiler-sfc':
-        specifier: ^2.7.16
-        version: 2.7.16
+        version: 5.4.2(terser@5.34.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
+      '@vitejs/plugin-vue':
+        specifier: ^5.1.4
+        version: 5.1.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))
+      '@vue/tsconfig':
+        specifier: ^0.5.1
+        version: 0.5.1
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
@@ -881,38 +905,47 @@ importers:
         specifier: ^25.0.1
         version: 25.0.1
       sass:
-        specifier: ~1.32.13
-        version: 1.32.13
+        specifier: ^1.79.4
+        version: 1.79.4
       terser:
         specifier: ^5.34.1
         version: 5.34.1
+      type-fest:
+        specifier: ^4.26.1
+        version: 4.26.1
       typescript:
         specifier: ^5.6.2
         version: 5.6.2
       unplugin-icons:
         specifier: ^0.19.3
-        version: 0.19.3(@vue/compiler-sfc@2.7.16)(vue-template-compiler@2.7.16)(webpack-sources@3.2.3)
+        version: 0.19.3(@vue/compiler-sfc@3.5.11)(vue-template-compiler@2.7.16)(webpack-sources@3.2.3)
       unplugin-vue-components:
         specifier: ^0.27.4
-        version: 0.27.4(@babel/parser@7.25.6)(@nuxt/kit@3.13.2(rollup@4.23.0)(webpack-sources@3.2.3))(rollup@4.23.0)(vue@2.7.16)(webpack-sources@3.2.3)
+        version: 0.27.4(@babel/parser@7.25.7)(@nuxt/kit@3.13.2(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0)(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)
       vite:
         specifier: ^5.4.8
-        version: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
+        version: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
       vite-plugin-html:
         specifier: ^3.2.2
-        version: 3.2.2(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))
+        version: 3.2.2(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
       vite-plugin-mkcert:
         specifier: ^1.17.6
-        version: 1.17.6(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))
+        version: 1.17.6(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
       vite-plugin-pwa:
         specifier: ^0.20.5
-        version: 0.20.5(@vite-pwa/assets-generator@0.2.6)(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))(workbox-build@7.1.0(@types/babel__core@7.20.5))(workbox-window@7.1.0)
+        version: 0.20.5(@vite-pwa/assets-generator@0.2.6)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(workbox-build@7.1.0(@types/babel__core@7.20.5))(workbox-window@7.1.0)
+      vite-plugin-vue-devtools:
+        specifier: ^7.4.6
+        version: 7.4.6(@nuxt/kit@3.13.2(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))
+      vite-plugin-vuetify:
+        specifier: ^2.0.4
+        version: 2.0.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))(vuetify@3.7.2)
       vite-plugin-webfont-dl:
         specifier: ^3.9.5
-        version: 3.9.5(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))
+        version: 3.9.5(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
       vitest:
-        specifier: ^2.1.1
-        version: 2.1.1(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.32.13)(terser@5.34.1)
+        specifier: ^2.1.2
+        version: 2.1.2(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1)
       vue-tsc:
         specifier: ^2.1.6
         version: 2.1.6(typescript@5.6.2)
@@ -932,8 +965,8 @@ importers:
         specifier: ^3.1.0
         version: 3.1.0
       winston:
-        specifier: ^3.14.2
-        version: 3.14.2
+        specifier: ^3.15.0
+        version: 3.15.0
     devDependencies:
       '@types/node':
         specifier: ^22.7.4
@@ -945,8 +978,8 @@ importers:
         specifier: ^1.7.7
         version: 1.7.7(debug@4.3.7)
       cookie:
-        specifier: ^0.6.0
-        version: 0.6.0
+        specifier: ^0.7.1
+        version: 0.7.1
       formdata-node:
         specifier: 4.4.1
         version: 4.4.1
@@ -960,15 +993,15 @@ importers:
         specifier: ^6.6.2
         version: 6.6.2
       winston:
-        specifier: ^3.14.2
-        version: 3.14.2
+        specifier: ^3.15.0
+        version: 3.15.0
     devDependencies:
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
       '@types/lodash':
-        specifier: ^4.17.9
-        version: 4.17.9
+        specifier: ^4.17.10
+        version: 4.17.10
       '@types/mime-types':
         specifier: ^2.1.4
         version: 2.1.4
@@ -991,8 +1024,8 @@ importers:
         specifier: ^3.0.1
         version: 3.0.1(ajv@8.17.1)
       awesome-phonenumber:
-        specifier: ^7.1.0
-        version: 7.1.0
+        specifier: ^7.2.0
+        version: 7.2.0
       cron-validator:
         specifier: ^1.3.1
         version: 1.3.1
@@ -1052,8 +1085,8 @@ importers:
         specifier: ^29.5.13
         version: 29.5.13
       '@types/lodash':
-        specifier: ^4.17.9
-        version: 4.17.9
+        specifier: ^4.17.10
+        version: 4.17.10
       '@types/ms':
         specifier: ^0.7.34
         version: 0.7.34
@@ -1080,7 +1113,7 @@ importers:
         version: 3.3.2
       ts-jest:
         specifier: ^29.2.5
-        version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
+        version: 29.2.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
       typescript:
         specifier: ^5.6.2
         version: 5.6.2
@@ -1103,11 +1136,11 @@ importers:
         specifier: ^6.9.15
         version: 6.9.15
       winston:
-        specifier: ^3.14.2
-        version: 3.14.2
+        specifier: ^3.15.0
+        version: 3.15.0
       winston-daily-rotate-file:
         specifier: ^5.0.0
-        version: 5.0.0(winston@3.14.2)
+        version: 5.0.0(winston@3.15.0)
     devDependencies:
       '@jest/types':
         specifier: ^29.6.3
@@ -1138,7 +1171,7 @@ importers:
         version: 4.0.2(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))
       ts-jest:
         specifier: ^29.2.5
-        version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
+        version: 29.2.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
       typescript:
         specifier: ^5.6.2
         version: 5.6.2
@@ -1176,18 +1209,18 @@ importers:
         specifier: ^0.2.2
         version: 0.2.2
       sequelize:
-        specifier: ^6.37.3
-        version: 6.37.3(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)
+        specifier: ^6.37.4
+        version: 6.37.4(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)
       sequelize-typescript:
         specifier: ^2.1.6
-        version: 2.1.6(@types/node@22.7.4)(@types/validator@13.12.2)(reflect-metadata@0.2.2)(sequelize@6.37.3(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1))
+        version: 2.1.6(@types/node@22.7.4)(@types/validator@13.12.2)(reflect-metadata@0.2.2)(sequelize@6.37.4(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1))
     devDependencies:
       '@simplewebauthn/types':
         specifier: ^10.0.0
         version: 10.0.0
       '@types/lodash':
-        specifier: ^4.17.9
-        version: 4.17.9
+        specifier: ^4.17.10
+        version: 4.17.10
       '@types/node':
         specifier: ^22.7.4
         version: 22.7.4
@@ -1219,11 +1252,11 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       vue:
-        specifier: ^2.7.16
-        version: 2.7.16
+        specifier: ^3.5.11
+        version: 3.5.11(typescript@5.6.2)
       vue-i18n:
-        specifier: ^8.28.2
-        version: 8.28.2(vue@2.7.16)
+        specifier: ^9.14.1
+        version: 9.14.1(vue@3.5.11(typescript@5.6.2))
     devDependencies:
       '@jest/types':
         specifier: ^29.6.3
@@ -1235,8 +1268,8 @@ importers:
         specifier: ^29.5.13
         version: 29.5.13
       '@types/lodash':
-        specifier: ^4.17.9
-        version: 4.17.9
+        specifier: ^4.17.10
+        version: 4.17.10
       '@types/node':
         specifier: ^22.7.4
         version: 22.7.4
@@ -1248,7 +1281,7 @@ importers:
         version: 4.0.2(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))
       ts-jest:
         specifier: ^29.2.5
-        version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
+        version: 29.2.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2)
       typescript:
         specifier: ^5.6.2
         version: 5.6.2
@@ -1271,9 +1304,9 @@ importers:
       '@ericblade/quagga2':
         specifier: ^1.8.4
         version: 1.8.4
-      '@hcaptcha/vue-hcaptcha':
+      '@hcaptcha/vue3-hcaptcha':
         specifier: ^1.3.0
-        version: 1.3.0(vue@2.7.16)
+        version: 1.3.0(vue@3.5.11(typescript@5.6.2))
       '@pinia/plugin-debounce':
         specifier: ^1.0.1
         version: 1.0.1
@@ -1282,7 +1315,7 @@ importers:
         version: 1.5.2
       '@vueuse/core':
         specifier: ^11.1.0
-        version: 11.1.0(vue@2.7.16)
+        version: 11.1.0(vue@3.5.11(typescript@5.6.2))
       axios:
         specifier: ^1.7.7
         version: 1.7.7(debug@4.3.7)
@@ -1300,35 +1333,35 @@ importers:
         version: 4.17.21
       pinia:
         specifier: ^2.2.4
-        version: 2.2.4(typescript@5.6.2)(vue@2.7.16)
+        version: 2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2))
       pinia-plugin-persistedstate:
-        specifier: ^4.0.2
-        version: 4.0.2(pinia@2.2.4(typescript@5.6.2)(vue@2.7.16))(rollup@4.23.0)(webpack-sources@3.2.3)
+        specifier: ^4.1.1
+        version: 4.1.1(pinia@2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2)))(rollup@4.24.0)(webpack-sources@3.2.3)
       svg-gauge:
         specifier: ^1.0.7
         version: 1.0.7
       vue:
-        specifier: ^2.7.16
-        version: 2.7.16
+        specifier: ^3.5.11
+        version: 3.5.11(typescript@5.6.2)
       vue-echarts:
         specifier: ^7.0.3
-        version: 7.0.3(@vue/runtime-core@3.5.10)(echarts@5.5.1)(vue@2.7.16)
+        version: 7.0.3(@vue/runtime-core@3.5.11)(echarts@5.5.1)(vue@3.5.11(typescript@5.6.2))
       vue-i18n:
-        specifier: ^8.28.2
-        version: 8.28.2(vue@2.7.16)
+        specifier: ^9.14.1
+        version: 9.14.1(vue@3.5.11(typescript@5.6.2))
       vue-recaptcha:
-        specifier: ^1.3.0
-        version: 1.3.0(vue@2.7.16)
+        specifier: ^2.0.3
+        version: 2.0.3(vue@3.5.11(typescript@5.6.2))
       vue-router:
-        specifier: ^3.6.5
-        version: 3.6.5(vue@2.7.16)
+        specifier: ^4.4.5
+        version: 4.4.5(vue@3.5.11(typescript@5.6.2))
       vuetify:
-        specifier: ^2.7.2
-        version: 2.7.2(vue@2.7.16)
+        specifier: ^3.7.2
+        version: 3.7.2(typescript@5.6.2)(vite-plugin-vuetify@2.0.4)(vue@3.5.11(typescript@5.6.2))
     devDependencies:
       '@types/lodash':
-        specifier: ^4.17.9
-        version: 4.17.9
+        specifier: ^4.17.10
+        version: 4.17.10
       '@types/node':
         specifier: ^22.7.4
         version: 22.7.4
@@ -1521,8 +1554,8 @@ packages:
     resolution: {integrity: sha512-62Vv8nC+uPId3j86XJ0WI+sBf0jlqTqPUFCBNrGtlaUeQUIXWV/D8GE5A1d+Qx8H7OQojn2WguC8kChD6v0shA==}
     engines: {node: '>=18.0.0'}
 
-  '@azure/core-tracing@1.1.2':
-    resolution: {integrity: sha512-dawW9ifvWAWmUm9/h+/UQ2jrdvjCJ7VJEuCJ6XVNudzcOwm53BFZH4Q845vjfgoUAM8ZxokvVNxNxAITc502YA==}
+  '@azure/core-tracing@1.2.0':
+    resolution: {integrity: sha512-UKTiEJPkWcESPYJz3X5uKRYyOcJD+4nYph+KpfdPRnQJVrZfk0KJgdnaAWKfhsBBtAf/D58Az4AvCJEmWgIBAg==}
     engines: {node: '>=18.0.0'}
 
   '@azure/core-util@1.10.0':
@@ -1541,54 +1574,54 @@ packages:
     resolution: {integrity: sha512-4IXXzcCdLdlXuCG+8UKEwLA1T1NHqUfanhXYHiQTn+6sfWCZXduqbtXDGceg3Ce5QxTGo7EqmbV6Bi+aqKuClQ==}
     engines: {node: '>=18.0.0'}
 
-  '@azure/msal-browser@3.24.0':
-    resolution: {integrity: sha512-JGNV9hTYAa7lsum9IMIibn2kKczAojNihGo1hi7pG0kNrcKej530Fl6jxwM05A44/6I079CSn6WxYxbVhKUmWg==}
+  '@azure/msal-browser@3.25.0':
+    resolution: {integrity: sha512-a0Y7pmSy8SC1s9bvwr+REvyAA1nQcITlZvkElM2gNUPYFTTNUTEdcpg73TmawNucyMdZ9xb/GFcuhrLOqYAzwg==}
     engines: {node: '>=0.8.0'}
 
   '@azure/msal-common@14.15.0':
     resolution: {integrity: sha512-ImAQHxmpMneJ/4S8BRFhjt1MZ3bppmpRPYYNyzeQPeFN288YKbb8TmmISQEbtfkQ1BPASvYZU5doIZOPBAqENQ==}
     engines: {node: '>=0.8.0'}
 
-  '@azure/msal-node@2.14.0':
-    resolution: {integrity: sha512-rrfzIpG3Q1rHjVYZmHAEDidWAZZ2cgkxlIcMQ8dHebRISaZ2KCV33Q8Vs+uaV6lxweROabNxKFlR2lIKagZqYg==}
+  '@azure/msal-node@2.15.0':
+    resolution: {integrity: sha512-gVPW8YLz92ZeCibQH2QUw96odJoiM3k/ZPH3f2HxptozmH6+OnyyvKXo/Egg39HAM230akarQKHf0W74UHlh0Q==}
     engines: {node: '>=16'}
 
-  '@babel/code-frame@7.24.7':
-    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
+  '@babel/code-frame@7.25.7':
+    resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.25.4':
-    resolution: {integrity: sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==}
+  '@babel/compat-data@7.25.7':
+    resolution: {integrity: sha512-9ickoLz+hcXCeh7jrcin+/SLWm+GkxE2kTvoYyp38p4WkdFXfQJxDFGWp/YHjiKLPx06z2A7W8XKuqbReXDzsw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.25.2':
-    resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==}
+  '@babel/core@7.25.7':
+    resolution: {integrity: sha512-yJ474Zv3cwiSOO9nXJuqzvwEeM+chDuQ8GJirw+pZ91sCGCyOZ3dJkVE09fTV0VEVzXyLWhh3G/AolYTPX7Mow==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.25.6':
-    resolution: {integrity: sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==}
+  '@babel/generator@7.25.7':
+    resolution: {integrity: sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-annotate-as-pure@7.24.7':
-    resolution: {integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==}
+  '@babel/helper-annotate-as-pure@7.25.7':
+    resolution: {integrity: sha512-4xwU8StnqnlIhhioZf1tqnVWeQ9pvH/ujS8hRfw/WOza+/a+1qv69BWNy+oY231maTCWgKWhfBU7kDpsds6zAA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-builder-binary-assignment-operator-visitor@7.24.7':
-    resolution: {integrity: sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA==}
+  '@babel/helper-builder-binary-assignment-operator-visitor@7.25.7':
+    resolution: {integrity: sha512-12xfNeKNH7jubQNm7PAkzlLwEmCs1tfuX3UjIw6vP6QXi+leKh6+LyC/+Ed4EIQermwd58wsyh070yjDHFlNGg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.25.2':
-    resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==}
+  '@babel/helper-compilation-targets@7.25.7':
+    resolution: {integrity: sha512-DniTEax0sv6isaw6qSQSfV4gVRNtw2rte8HHM45t9ZR0xILaufBRNkpMifCRiAPyvL4ACD6v0gfCwCmtOQaV4A==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-create-class-features-plugin@7.25.4':
-    resolution: {integrity: sha512-ro/bFs3/84MDgDmMwbcHgDa8/E6J3QKNTk4xJJnVeFtGE+tL0K26E3pNxhYz2b67fJpt7Aphw5XcploKXuCvCQ==}
+  '@babel/helper-create-class-features-plugin@7.25.7':
+    resolution: {integrity: sha512-bD4WQhbkx80mAyj/WCm4ZHcF4rDxkoLFO6ph8/5/mQ3z4vAzltQXAmbc7GvVJx5H+lk5Mi5EmbTeox5nMGCsbw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-create-regexp-features-plugin@7.25.2':
-    resolution: {integrity: sha512-+wqVGP+DFmqwFD3EH6TMTfUNeqDehV3E/dl+Sd54eaXqm17tEUNbEIn4sVivVowbvUpOtIGxdo3GoXyDH9N/9g==}
+  '@babel/helper-create-regexp-features-plugin@7.25.7':
+    resolution: {integrity: sha512-byHhumTj/X47wJ6C6eLpK7wW/WBEcnUeb7D0FNc/jFQnQVw7DOso3Zz5u9x/zLrFVkHa89ZGDbkAa1D54NdrCQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -1598,107 +1631,113 @@ packages:
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  '@babel/helper-member-expression-to-functions@7.24.8':
-    resolution: {integrity: sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==}
+  '@babel/helper-member-expression-to-functions@7.25.7':
+    resolution: {integrity: sha512-O31Ssjd5K6lPbTX9AAYpSKrZmLeagt9uwschJd+Ixo6QiRyfpvgtVQp8qrDR9UNFjZ8+DO34ZkdrN+BnPXemeA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.24.7':
-    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
+  '@babel/helper-module-imports@7.25.7':
+    resolution: {integrity: sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.25.2':
-    resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==}
+  '@babel/helper-module-transforms@7.25.7':
+    resolution: {integrity: sha512-k/6f8dKG3yDz/qCwSM+RKovjMix563SLxQFo0UhRNo239SP6n9u5/eLtKD6EAjwta2JHJ49CsD8pms2HdNiMMQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-optimise-call-expression@7.24.7':
-    resolution: {integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==}
+  '@babel/helper-optimise-call-expression@7.25.7':
+    resolution: {integrity: sha512-VAwcwuYhv/AT+Vfr28c9y6SHzTan1ryqrydSTFGjU0uDJHw3uZ+PduI8plCLkRsDnqK2DMEDmwrOQRsK/Ykjng==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-plugin-utils@7.24.8':
-    resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==}
+  '@babel/helper-plugin-utils@7.25.7':
+    resolution: {integrity: sha512-eaPZai0PiqCi09pPs3pAFfl/zYgGaE6IdXtYvmf0qlcDTd3WCtO7JWCcRd64e0EQrcYgiHibEZnOGsSY4QSgaw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-remap-async-to-generator@7.25.0':
-    resolution: {integrity: sha512-NhavI2eWEIz/H9dbrG0TuOicDhNexze43i5z7lEqwYm0WEZVTwnPpA0EafUTP7+6/W79HWIP2cTe3Z5NiSTVpw==}
+  '@babel/helper-remap-async-to-generator@7.25.7':
+    resolution: {integrity: sha512-kRGE89hLnPfcz6fTrlNU+uhgcwv0mBE4Gv3P9Ke9kLVJYpi4AMVVEElXvB5CabrPZW4nCM8P8UyyjrzCM0O2sw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-replace-supers@7.25.0':
-    resolution: {integrity: sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==}
+  '@babel/helper-replace-supers@7.25.7':
+    resolution: {integrity: sha512-iy8JhqlUW9PtZkd4pHM96v6BdJ66Ba9yWSE4z0W4TvSZwLBPkyDsiIU3ENe4SmrzRBs76F7rQXTy1lYC49n6Lw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-simple-access@7.24.7':
-    resolution: {integrity: sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==}
+  '@babel/helper-simple-access@7.25.7':
+    resolution: {integrity: sha512-FPGAkJmyoChQeM+ruBGIDyrT2tKfZJO8NcxdC+CWNJi7N8/rZpSxK7yvBJ5O/nF1gfu5KzN7VKG3YVSLFfRSxQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.24.7':
-    resolution: {integrity: sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==}
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.7':
+    resolution: {integrity: sha512-pPbNbchZBkPMD50K0p3JGcFMNLVUCuU/ABybm/PGNj4JiHrpmNyqqCphBk4i19xXtNV0JhldQJJtbSW5aUvbyA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.24.8':
-    resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
+  '@babel/helper-string-parser@7.25.7':
+    resolution: {integrity: sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.24.7':
-    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+  '@babel/helper-validator-identifier@7.25.7':
+    resolution: {integrity: sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.24.8':
-    resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==}
+  '@babel/helper-validator-option@7.25.7':
+    resolution: {integrity: sha512-ytbPLsm+GjArDYXJ8Ydr1c/KJuutjF2besPNbIZnZ6MKUxi/uTA22t2ymmA4WFjZFpjiAMO0xuuJPqK2nvDVfQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-wrap-function@7.25.0':
-    resolution: {integrity: sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==}
+  '@babel/helper-wrap-function@7.25.7':
+    resolution: {integrity: sha512-MA0roW3JF2bD1ptAaJnvcabsVlNQShUaThyJbCDD4bCp8NEgiFvpoqRI2YS22hHlc2thjO/fTg2ShLMC3jygAg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.25.6':
-    resolution: {integrity: sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==}
+  '@babel/helpers@7.25.7':
+    resolution: {integrity: sha512-Sv6pASx7Esm38KQpF/U/OXLwPPrdGHNKoeblRxgZRLXnAtnkEe4ptJPDtAZM7fBLadbc1Q07kQpSiGQ0Jg6tRA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.24.7':
-    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
+  '@babel/highlight@7.25.7':
+    resolution: {integrity: sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.25.6':
-    resolution: {integrity: sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==}
+  '@babel/parser@7.25.7':
+    resolution: {integrity: sha512-aZn7ETtQsjjGG5HruveUK06cU3Hljuhd9Iojm4M8WWv3wLE6OkE5PWbDUkItmMgegmccaITudyuW5RPYrYlgWw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.3':
-    resolution: {integrity: sha512-wUrcsxZg6rqBXG05HG1FPYgsP6EvwF4WpBbxIpWIIYnH8wG0gzx3yZY3dtEHas4sTAOGkbTsc9EGPxwff8lRoA==}
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.7':
+    resolution: {integrity: sha512-UV9Lg53zyebzD1DwQoT9mzkEKa922LNUp5YkTJ6Uta0RbyXaQNUgcvSt7qIu1PpPzVb6rd10OVNTzkyBGeVmxQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.0':
-    resolution: {integrity: sha512-Bm4bH2qsX880b/3ziJ8KD711LT7z4u8CFudmjqle65AZj/HNUFhEf90dqYv6O86buWvSBmeQDjv0Tn2aF/bIBA==}
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.7':
+    resolution: {integrity: sha512-GDDWeVLNxRIkQTnJn2pDOM1pkCgYdSqPeT1a9vh9yIqu2uzzgw1zcqEb+IJOhy+dTBMlNdThrDIksr2o09qrrQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.0':
-    resolution: {integrity: sha512-lXwdNZtTmeVOOFtwM/WDe7yg1PL8sYhRk/XH0FzbR2HDQ0xC+EnQ/JHeoMYSavtU115tnUk0q9CDyq8si+LMAA==}
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.7':
+    resolution: {integrity: sha512-wxyWg2RYaSUYgmd9MR0FyRGyeOMQE/Uzr1wzd/g5cf5bwi9A4v6HFdDm7y1MgDtod/fLOSTZY6jDgV0xU9d5bA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.7':
-    resolution: {integrity: sha512-+izXIbke1T33mY4MSNnrqhPXDz01WYhEf3yF5NbnUtkiNnm+XBZJl3kNfoK6NKmYlz/D07+l2GWVK/QfDkNCuQ==}
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.25.7':
+    resolution: {integrity: sha512-Xwg6tZpLxc4iQjorYsyGMyfJE7nP5MV8t/Ka58BgiA7Jw0fRqQNcANlLfdJ/yvBt9z9LD2We+BEkT7vLqZRWng==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.13.0
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.0':
-    resolution: {integrity: sha512-tggFrk1AIShG/RUQbEwt2Tr/E+ObkfwrPjR6BjbRvsx24+PSjK8zrq0GWPNCjo8qpRx4DuJzlcvWJqlm+0h3kw==}
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.7':
+    resolution: {integrity: sha512-UVATLMidXrnH+GMUIuxq55nejlj02HP7F5ETyBONzP6G87fPBogG4CH6kxrSrdIuAjdwNO9VzyaYsrZPscWUrw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/plugin-proposal-decorators@7.25.7':
+    resolution: {integrity: sha512-q1mqqqH0e1lhmsEQHV5U8OmdueBC2y0RFr2oUzZoFRtN3MvPmt2fsFRcNQAoGLTSNdHBFUYGnlgcRFhkBbKjPw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2':
     resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
     engines: {node: '>=6.9.0'}
@@ -1726,6 +1765,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-decorators@7.25.7':
+    resolution: {integrity: sha512-oXduHo642ZhstLVYTe2z2GSJIruU0c/W3/Ghr6A5yGMsVrvdnxO1z+3pbTcT7f3/Clnt+1z8D/w1r1f1SHaCHw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-dynamic-import@7.8.3':
     resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
     peerDependencies:
@@ -1736,14 +1781,14 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-assertions@7.25.6':
-    resolution: {integrity: sha512-aABl0jHw9bZ2karQ/uUD6XP4u0SG22SJrOHFoL6XB1R7dTovOP4TzTlsxOYC5yQ1pdscVK2JTUnF6QL3ARoAiQ==}
+  '@babel/plugin-syntax-import-assertions@7.25.7':
+    resolution: {integrity: sha512-ZvZQRmME0zfJnDQnVBKYzHxXT7lYBB3Revz1GuS7oLXWMgqUPX4G+DDbT30ICClht9WKV34QVrZhSw6WdklwZQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-attributes@7.25.6':
-    resolution: {integrity: sha512-sXaDXaJN9SNLymBdlWFA+bjzBhFD617ZaFiY13dGt7TVslVvVgA6fkZOP7Ki3IGElC45lwHdOTrCtKZGVAWeLQ==}
+  '@babel/plugin-syntax-import-attributes@7.25.7':
+    resolution: {integrity: sha512-AqVo+dguCgmpi/3mYBdu9lkngOBlQ2w2vnNpa6gfiCxQZLzV4ZbhsXitJ2Yblkoe1VQwtHSaNmIaGll/26YWRw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1758,8 +1803,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-jsx@7.24.7':
-    resolution: {integrity: sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==}
+  '@babel/plugin-syntax-jsx@7.25.7':
+    resolution: {integrity: sha512-ruZOnKO+ajVL/MVx+PwNBPOkrnXTXoWMtte1MBpegfCArhqOe3Bj52avVj1huLLxNKYKXYaSxZ2F+woK1ekXfw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1806,8 +1851,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-typescript@7.25.4':
-    resolution: {integrity: sha512-uMOCoHVU52BsSWxPOMVv5qKRdeSlPuImUCB2dlPuBSU+W2/ROE7/Zg8F2Kepbk+8yBa68LlRKxO+xgEVWorsDg==}
+  '@babel/plugin-syntax-typescript@7.25.7':
+    resolution: {integrity: sha512-rR+5FDjpCHqqZN2bzZm18bVYGaejGq5ZkpVCJLXor/+zlSrSoc4KWcHI0URVWjl/68Dyr1uwZUz/1njycEAv9g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1818,296 +1863,302 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-arrow-functions@7.24.7':
-    resolution: {integrity: sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==}
+  '@babel/plugin-transform-arrow-functions@7.25.7':
+    resolution: {integrity: sha512-EJN2mKxDwfOUCPxMO6MUI58RN3ganiRAG/MS/S3HfB6QFNjroAMelQo/gybyYq97WerCBAZoyrAoW8Tzdq2jWg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-async-generator-functions@7.25.4':
-    resolution: {integrity: sha512-jz8cV2XDDTqjKPwVPJBIjORVEmSGYhdRa8e5k5+vN+uwcjSrSxUaebBRa4ko1jqNF2uxyg8G6XYk30Jv285xzg==}
+  '@babel/plugin-transform-async-generator-functions@7.25.7':
+    resolution: {integrity: sha512-4B6OhTrwYKHYYgcwErvZjbmH9X5TxQBsaBHdzEIB4l71gR5jh/tuHGlb9in47udL2+wVUcOz5XXhhfhVJwEpEg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-async-to-generator@7.24.7':
-    resolution: {integrity: sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA==}
+  '@babel/plugin-transform-async-to-generator@7.25.7':
+    resolution: {integrity: sha512-ZUCjAavsh5CESCmi/xCpX1qcCaAglzs/7tmuvoFnJgA1dM7gQplsguljoTg+Ru8WENpX89cQyAtWoaE0I3X3Pg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoped-functions@7.24.7':
-    resolution: {integrity: sha512-yO7RAz6EsVQDaBH18IDJcMB1HnrUn2FJ/Jslc/WtPPWcjhpUJXU/rjbwmluzp7v/ZzWcEhTMXELnnsz8djWDwQ==}
+  '@babel/plugin-transform-block-scoped-functions@7.25.7':
+    resolution: {integrity: sha512-xHttvIM9fvqW+0a3tZlYcZYSBpSWzGBFIt/sYG3tcdSzBB8ZeVgz2gBP7Df+sM0N1850jrviYSSeUuc+135dmQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoping@7.25.0':
-    resolution: {integrity: sha512-yBQjYoOjXlFv9nlXb3f1casSHOZkWr29NX+zChVanLg5Nc157CrbEX9D7hxxtTpuFy7Q0YzmmWfJxzvps4kXrQ==}
+  '@babel/plugin-transform-block-scoping@7.25.7':
+    resolution: {integrity: sha512-ZEPJSkVZaeTFG/m2PARwLZQ+OG0vFIhPlKHK/JdIMy8DbRJ/htz6LRrTFtdzxi9EHmcwbNPAKDnadpNSIW+Aow==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-properties@7.25.4':
-    resolution: {integrity: sha512-nZeZHyCWPfjkdU5pA/uHiTaDAFUEqkpzf1YoQT2NeSynCGYq9rxfyI3XpQbfx/a0hSnFH6TGlEXvae5Vi7GD8g==}
+  '@babel/plugin-transform-class-properties@7.25.7':
+    resolution: {integrity: sha512-mhyfEW4gufjIqYFo9krXHJ3ElbFLIze5IDp+wQTxoPd+mwFb1NxatNAwmv8Q8Iuxv7Zc+q8EkiMQwc9IhyGf4g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-static-block@7.24.7':
-    resolution: {integrity: sha512-HMXK3WbBPpZQufbMG4B46A90PkuuhN9vBCb5T8+VAHqvAqvcLi+2cKoukcpmUYkszLhScU3l1iudhrks3DggRQ==}
+  '@babel/plugin-transform-class-static-block@7.25.7':
+    resolution: {integrity: sha512-rvUUtoVlkDWtDWxGAiiQj0aNktTPn3eFynBcMC2IhsXweehwgdI9ODe+XjWw515kEmv22sSOTp/rxIRuTiB7zg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.12.0
 
-  '@babel/plugin-transform-classes@7.25.4':
-    resolution: {integrity: sha512-oexUfaQle2pF/b6E0dwsxQtAol9TLSO88kQvym6HHBWFliV2lGdrPieX+WgMRLSJDVzdYywk7jXbLPuO2KLTLg==}
+  '@babel/plugin-transform-classes@7.25.7':
+    resolution: {integrity: sha512-9j9rnl+YCQY0IGoeipXvnk3niWicIB6kCsWRGLwX241qSXpbA4MKxtp/EdvFxsc4zI5vqfLxzOd0twIJ7I99zg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-computed-properties@7.24.7':
-    resolution: {integrity: sha512-25cS7v+707Gu6Ds2oY6tCkUwsJ9YIDbggd9+cu9jzzDgiNq7hR/8dkzxWfKWnTic26vsI3EsCXNd4iEB6e8esQ==}
+  '@babel/plugin-transform-computed-properties@7.25.7':
+    resolution: {integrity: sha512-QIv+imtM+EtNxg/XBKL3hiWjgdLjMOmZ+XzQwSgmBfKbfxUjBzGgVPklUuE55eq5/uVoh8gg3dqlrwR/jw3ZeA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-destructuring@7.24.8':
-    resolution: {integrity: sha512-36e87mfY8TnRxc7yc6M9g9gOB7rKgSahqkIKwLpz4Ppk2+zC2Cy1is0uwtuSG6AE4zlTOUa+7JGz9jCJGLqQFQ==}
+  '@babel/plugin-transform-destructuring@7.25.7':
+    resolution: {integrity: sha512-xKcfLTlJYUczdaM1+epcdh1UGewJqr9zATgrNHcLBcV2QmfvPPEixo/sK/syql9cEmbr7ulu5HMFG5vbbt/sEA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-dotall-regex@7.24.7':
-    resolution: {integrity: sha512-ZOA3W+1RRTSWvyqcMJDLqbchh7U4NRGqwRfFSVbOLS/ePIP4vHB5e8T8eXcuqyN1QkgKyj5wuW0lcS85v4CrSw==}
+  '@babel/plugin-transform-dotall-regex@7.25.7':
+    resolution: {integrity: sha512-kXzXMMRzAtJdDEgQBLF4oaiT6ZCU3oWHgpARnTKDAqPkDJ+bs3NrZb310YYevR5QlRo3Kn7dzzIdHbZm1VzJdQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-duplicate-keys@7.24.7':
-    resolution: {integrity: sha512-JdYfXyCRihAe46jUIliuL2/s0x0wObgwwiGxw/UbgJBr20gQBThrokO4nYKgWkD7uBaqM7+9x5TU7NkExZJyzw==}
+  '@babel/plugin-transform-duplicate-keys@7.25.7':
+    resolution: {integrity: sha512-by+v2CjoL3aMnWDOyCIg+yxU9KXSRa9tN6MbqggH5xvymmr9p4AMjYkNlQy4brMceBnUyHZ9G8RnpvT8wP7Cfg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.0':
-    resolution: {integrity: sha512-YLpb4LlYSc3sCUa35un84poXoraOiQucUTTu8X1j18JV+gNa8E0nyUf/CjZ171IRGr4jEguF+vzJU66QZhn29g==}
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.7':
+    resolution: {integrity: sha512-HvS6JF66xSS5rNKXLqkk7L9c/jZ/cdIVIcoPVrnl8IsVpLggTjXs8OWekbLHs/VtYDDh5WXnQyeE3PPUGm22MA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-dynamic-import@7.24.7':
-    resolution: {integrity: sha512-sc3X26PhZQDb3JhORmakcbvkeInvxz+A8oda99lj7J60QRuPZvNAk9wQlTBS1ZynelDrDmTU4pw1tyc5d5ZMUg==}
+  '@babel/plugin-transform-dynamic-import@7.25.7':
+    resolution: {integrity: sha512-UvcLuual4h7/GfylKm2IAA3aph9rwvAM2XBA0uPKU3lca+Maai4jBjjEVUS568ld6kJcgbouuumCBhMd/Yz17w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-exponentiation-operator@7.24.7':
-    resolution: {integrity: sha512-Rqe/vSc9OYgDajNIK35u7ot+KeCoetqQYFXM4Epf7M7ez3lWlOjrDjrwMei6caCVhfdw+mIKD4cgdGNy5JQotQ==}
+  '@babel/plugin-transform-exponentiation-operator@7.25.7':
+    resolution: {integrity: sha512-yjqtpstPfZ0h/y40fAXRv2snciYr0OAoMXY/0ClC7tm4C/nG5NJKmIItlaYlLbIVAWNfrYuy9dq1bE0SbX0PEg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-export-namespace-from@7.24.7':
-    resolution: {integrity: sha512-v0K9uNYsPL3oXZ/7F9NNIbAj2jv1whUEtyA6aujhekLs56R++JDQuzRcP2/z4WX5Vg/c5lE9uWZA0/iUoFhLTA==}
+  '@babel/plugin-transform-export-namespace-from@7.25.7':
+    resolution: {integrity: sha512-h3MDAP5l34NQkkNulsTNyjdaR+OiB0Im67VU//sFupouP8Q6m9Spy7l66DcaAQxtmCqGdanPByLsnwFttxKISQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-for-of@7.24.7':
-    resolution: {integrity: sha512-wo9ogrDG1ITTTBsy46oGiN1dS9A7MROBTcYsfS8DtsImMkHk9JXJ3EWQM6X2SUw4x80uGPlwj0o00Uoc6nEE3g==}
+  '@babel/plugin-transform-for-of@7.25.7':
+    resolution: {integrity: sha512-n/TaiBGJxYFWvpJDfsxSj9lEEE44BFM1EPGz4KEiTipTgkoFVVcCmzAL3qA7fdQU96dpo4gGf5HBx/KnDvqiHw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-function-name@7.25.1':
-    resolution: {integrity: sha512-TVVJVdW9RKMNgJJlLtHsKDTydjZAbwIsn6ySBPQaEAUU5+gVvlJt/9nRmqVbsV/IBanRjzWoaAQKLoamWVOUuA==}
+  '@babel/plugin-transform-function-name@7.25.7':
+    resolution: {integrity: sha512-5MCTNcjCMxQ63Tdu9rxyN6cAWurqfrDZ76qvVPrGYdBxIj+EawuuxTu/+dgJlhK5eRz3v1gLwp6XwS8XaX2NiQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-json-strings@7.24.7':
-    resolution: {integrity: sha512-2yFnBGDvRuxAaE/f0vfBKvtnvvqU8tGpMHqMNpTN2oWMKIR3NqFkjaAgGwawhqK/pIN2T3XdjGPdaG0vDhOBGw==}
+  '@babel/plugin-transform-json-strings@7.25.7':
+    resolution: {integrity: sha512-Ot43PrL9TEAiCe8C/2erAjXMeVSnE/BLEx6eyrKLNFCCw5jvhTHKyHxdI1pA0kz5njZRYAnMO2KObGqOCRDYSA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-literals@7.25.2':
-    resolution: {integrity: sha512-HQI+HcTbm9ur3Z2DkO+jgESMAMcYLuN/A7NRw9juzxAezN9AvqvUTnpKP/9kkYANz6u7dFlAyOu44ejuGySlfw==}
+  '@babel/plugin-transform-literals@7.25.7':
+    resolution: {integrity: sha512-fwzkLrSu2fESR/cm4t6vqd7ebNIopz2QHGtjoU+dswQo/P6lwAG04Q98lliE3jkz/XqnbGFLnUcE0q0CVUf92w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-logical-assignment-operators@7.24.7':
-    resolution: {integrity: sha512-4D2tpwlQ1odXmTEIFWy9ELJcZHqrStlzK/dAOWYyxX3zT0iXQB6banjgeOJQXzEc4S0E0a5A+hahxPaEFYftsw==}
+  '@babel/plugin-transform-logical-assignment-operators@7.25.7':
+    resolution: {integrity: sha512-iImzbA55BjiovLyG2bggWS+V+OLkaBorNvc/yJoeeDQGztknRnDdYfp2d/UPmunZYEnZi6Lg8QcTmNMHOB0lGA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-member-expression-literals@7.24.7':
-    resolution: {integrity: sha512-T/hRC1uqrzXMKLQ6UCwMT85S3EvqaBXDGf0FaMf4446Qx9vKwlghvee0+uuZcDUCZU5RuNi4781UQ7R308zzBw==}
+  '@babel/plugin-transform-member-expression-literals@7.25.7':
+    resolution: {integrity: sha512-Std3kXwpXfRV0QtQy5JJcRpkqP8/wG4XL7hSKZmGlxPlDqmpXtEPRmhF7ztnlTCtUN3eXRUJp+sBEZjaIBVYaw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-amd@7.24.7':
-    resolution: {integrity: sha512-9+pB1qxV3vs/8Hdmz/CulFB8w2tuu6EB94JZFsjdqxQokwGa9Unap7Bo2gGBGIvPmDIVvQrom7r5m/TCDMURhg==}
+  '@babel/plugin-transform-modules-amd@7.25.7':
+    resolution: {integrity: sha512-CgselSGCGzjQvKzghCvDTxKHP3iooenLpJDO842ehn5D2G5fJB222ptnDwQho0WjEvg7zyoxb9P+wiYxiJX5yA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-commonjs@7.24.8':
-    resolution: {integrity: sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==}
+  '@babel/plugin-transform-modules-commonjs@7.25.7':
+    resolution: {integrity: sha512-L9Gcahi0kKFYXvweO6n0wc3ZG1ChpSFdgG+eV1WYZ3/dGbJK7vvk91FgGgak8YwRgrCuihF8tE/Xg07EkL5COg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-systemjs@7.25.0':
-    resolution: {integrity: sha512-YPJfjQPDXxyQWg/0+jHKj1llnY5f/R6a0p/vP4lPymxLu7Lvl4k2WMitqi08yxwQcCVUUdG9LCUj4TNEgAp3Jw==}
+  '@babel/plugin-transform-modules-systemjs@7.25.7':
+    resolution: {integrity: sha512-t9jZIvBmOXJsiuyOwhrIGs8dVcD6jDyg2icw1VL4A/g+FnWyJKwUfSSU2nwJuMV2Zqui856El9u+ElB+j9fV1g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-umd@7.24.7':
-    resolution: {integrity: sha512-3aytQvqJ/h9z4g8AsKPLvD4Zqi2qT+L3j7XoFFu1XBlZWEl2/1kWnhmAbxpLgPrHSY0M6UA02jyTiwUVtiKR6A==}
+  '@babel/plugin-transform-modules-umd@7.25.7':
+    resolution: {integrity: sha512-p88Jg6QqsaPh+EB7I9GJrIqi1Zt4ZBHUQtjw3z1bzEXcLh6GfPqzZJ6G+G1HBGKUNukT58MnKG7EN7zXQBCODw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.24.7':
-    resolution: {integrity: sha512-/jr7h/EWeJtk1U/uz2jlsCioHkZk1JJZVcc8oQsJ1dUlaJD83f4/6Zeh2aHt9BIFokHIsSeDfhUmju0+1GPd6g==}
+  '@babel/plugin-transform-named-capturing-groups-regex@7.25.7':
+    resolution: {integrity: sha512-BtAT9LzCISKG3Dsdw5uso4oV1+v2NlVXIIomKJgQybotJY3OwCwJmkongjHgwGKoZXd0qG5UZ12JUlDQ07W6Ow==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-new-target@7.24.7':
-    resolution: {integrity: sha512-RNKwfRIXg4Ls/8mMTza5oPF5RkOW8Wy/WgMAp1/F1yZ8mMbtwXW+HDoJiOsagWrAhI5f57Vncrmr9XeT4CVapA==}
+  '@babel/plugin-transform-new-target@7.25.7':
+    resolution: {integrity: sha512-CfCS2jDsbcZaVYxRFo2qtavW8SpdzmBXC2LOI4oO0rP+JSRDxxF3inF4GcPsLgfb5FjkhXG5/yR/lxuRs2pySA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.25.7':
+    resolution: {integrity: sha512-FbuJ63/4LEL32mIxrxwYaqjJxpbzxPVQj5a+Ebrc8JICV6YX8nE53jY+K0RZT3um56GoNWgkS2BQ/uLGTjtwfw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.24.7':
-    resolution: {integrity: sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==}
+  '@babel/plugin-transform-numeric-separator@7.25.7':
+    resolution: {integrity: sha512-8CbutzSSh4hmD+jJHIA8vdTNk15kAzOnFLVVgBSMGr28rt85ouT01/rezMecks9pkU939wDInImwCKv4ahU4IA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-numeric-separator@7.24.7':
-    resolution: {integrity: sha512-e6q1TiVUzvH9KRvicuxdBTUj4AdKSRwzIyFFnfnezpCfP2/7Qmbb8qbU2j7GODbl4JMkblitCQjKYUaX/qkkwA==}
+  '@babel/plugin-transform-object-rest-spread@7.25.7':
+    resolution: {integrity: sha512-1JdVKPhD7Y5PvgfFy0Mv2brdrolzpzSoUq2pr6xsR+m+3viGGeHEokFKsCgOkbeFOQxfB1Vt2F0cPJLRpFI4Zg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-rest-spread@7.24.7':
-    resolution: {integrity: sha512-4QrHAr0aXQCEFni2q4DqKLD31n2DL+RxcwnNjDFkSG0eNQ/xCavnRkfCUjsyqGC2OviNJvZOF/mQqZBw7i2C5Q==}
+  '@babel/plugin-transform-object-super@7.25.7':
+    resolution: {integrity: sha512-pWT6UXCEW3u1t2tcAGtE15ornCBvopHj9Bps9D2DsH15APgNVOTwwczGckX+WkAvBmuoYKRCFa4DK+jM8vh5AA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-super@7.24.7':
-    resolution: {integrity: sha512-A/vVLwN6lBrMFmMDmPPz0jnE6ZGx7Jq7d6sT/Ev4H65RER6pZ+kczlf1DthF5N0qaPHBsI7UXiE8Zy66nmAovg==}
+  '@babel/plugin-transform-optional-catch-binding@7.25.7':
+    resolution: {integrity: sha512-m9obYBA39mDPN7lJzD5WkGGb0GO54PPLXsbcnj1Hyeu8mSRz7Gb4b1A6zxNX32ZuUySDK4G6it8SDFWD1nCnqg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-catch-binding@7.24.7':
-    resolution: {integrity: sha512-uLEndKqP5BfBbC/5jTwPxLh9kqPWWgzN/f8w6UwAIirAEqiIVJWWY312X72Eub09g5KF9+Zn7+hT7sDxmhRuKA==}
+  '@babel/plugin-transform-optional-chaining@7.25.7':
+    resolution: {integrity: sha512-h39agClImgPWg4H8mYVAbD1qP9vClFbEjqoJmt87Zen8pjqK8FTPUwrOXAvqu5soytwxrLMd2fx2KSCp2CHcNg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-chaining@7.24.8':
-    resolution: {integrity: sha512-5cTOLSMs9eypEy8JUVvIKOu6NgvbJMnpG62VpIHrTmROdQ+L5mDAaI40g25k5vXti55JWNX5jCkq3HZxXBQANw==}
+  '@babel/plugin-transform-parameters@7.25.7':
+    resolution: {integrity: sha512-FYiTvku63me9+1Nz7TOx4YMtW3tWXzfANZtrzHhUZrz4d47EEtMQhzFoZWESfXuAMMT5mwzD4+y1N8ONAX6lMQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-parameters@7.24.7':
-    resolution: {integrity: sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA==}
+  '@babel/plugin-transform-private-methods@7.25.7':
+    resolution: {integrity: sha512-KY0hh2FluNxMLwOCHbxVOKfdB5sjWG4M183885FmaqWWiGMhRZq4DQRKH6mHdEucbJnyDyYiZNwNG424RymJjA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-private-methods@7.25.4':
-    resolution: {integrity: sha512-ao8BG7E2b/URaUQGqN3Tlsg+M3KlHY6rJ1O1gXAEUnZoyNQnvKyH87Kfg+FoxSeyWUB8ISZZsC91C44ZuBFytw==}
+  '@babel/plugin-transform-private-property-in-object@7.25.7':
+    resolution: {integrity: sha512-LzA5ESzBy7tqj00Yjey9yWfs3FKy4EmJyKOSWld144OxkTji81WWnUT8nkLUn+imN/zHL8ZQlOu/MTUAhHaX3g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-private-property-in-object@7.24.7':
-    resolution: {integrity: sha512-9z76mxwnwFxMyxZWEgdgECQglF2Q7cFLm0kMf8pGwt+GSJsY0cONKj/UuO4bOH0w/uAel3ekS4ra5CEAyJRmDA==}
+  '@babel/plugin-transform-property-literals@7.25.7':
+    resolution: {integrity: sha512-lQEeetGKfFi0wHbt8ClQrUSUMfEeI3MMm74Z73T9/kuz990yYVtfofjf3NuA42Jy3auFOpbjDyCSiIkTs1VIYw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-property-literals@7.24.7':
-    resolution: {integrity: sha512-EMi4MLQSHfd2nrCqQEWxFdha2gBCqU4ZcCng4WBGZ5CJL4bBRW0ptdqqDdeirGZcpALazVVNJqRmsO8/+oNCBA==}
+  '@babel/plugin-transform-regenerator@7.25.7':
+    resolution: {integrity: sha512-mgDoQCRjrY3XK95UuV60tZlFCQGXEtMg8H+IsW72ldw1ih1jZhzYXbJvghmAEpg5UVhhnCeia1CkGttUvCkiMQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-regenerator@7.24.7':
-    resolution: {integrity: sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA==}
+  '@babel/plugin-transform-reserved-words@7.25.7':
+    resolution: {integrity: sha512-3OfyfRRqiGeOvIWSagcwUTVk2hXBsr/ww7bLn6TRTuXnexA+Udov2icFOxFX9abaj4l96ooYkcNN1qi2Zvqwng==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-reserved-words@7.24.7':
-    resolution: {integrity: sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ==}
+  '@babel/plugin-transform-shorthand-properties@7.25.7':
+    resolution: {integrity: sha512-uBbxNwimHi5Bv3hUccmOFlUy3ATO6WagTApenHz9KzoIdn0XeACdB12ZJ4cjhuB2WSi80Ez2FWzJnarccriJeA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-shorthand-properties@7.24.7':
-    resolution: {integrity: sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA==}
+  '@babel/plugin-transform-spread@7.25.7':
+    resolution: {integrity: sha512-Mm6aeymI0PBh44xNIv/qvo8nmbkpZze1KvR8MkEqbIREDxoiWTi18Zr2jryfRMwDfVZF9foKh060fWgni44luw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-spread@7.24.7':
-    resolution: {integrity: sha512-x96oO0I09dgMDxJaANcRyD4ellXFLLiWhuwDxKZX5g2rWP1bTPkBSwCYv96VDXVT1bD9aPj8tppr5ITIh8hBng==}
+  '@babel/plugin-transform-sticky-regex@7.25.7':
+    resolution: {integrity: sha512-ZFAeNkpGuLnAQ/NCsXJ6xik7Id+tHuS+NT+ue/2+rn/31zcdnupCdmunOizEaP0JsUmTFSTOPoQY7PkK2pttXw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-sticky-regex@7.24.7':
-    resolution: {integrity: sha512-kHPSIJc9v24zEml5geKg9Mjx5ULpfncj0wRpYtxbvKyTtHCYDkVE3aHQ03FrpEo4gEe2vrJJS1Y9CJTaThA52g==}
+  '@babel/plugin-transform-template-literals@7.25.7':
+    resolution: {integrity: sha512-SI274k0nUsFFmyQupiO7+wKATAmMFf8iFgq2O+vVFXZ0SV9lNfT1NGzBEhjquFmD8I9sqHLguH+gZVN3vww2AA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-template-literals@7.24.7':
-    resolution: {integrity: sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==}
+  '@babel/plugin-transform-typeof-symbol@7.25.7':
+    resolution: {integrity: sha512-OmWmQtTHnO8RSUbL0NTdtpbZHeNTnm68Gj5pA4Y2blFNh+V4iZR68V1qL9cI37J21ZN7AaCnkfdHtLExQPf2uA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typeof-symbol@7.24.8':
-    resolution: {integrity: sha512-adNTUpDCVnmAE58VEqKlAA6ZBlNkMnWD0ZcW76lyNFN3MJniyGFZfNwERVk8Ap56MCnXztmDr19T4mPTztcuaw==}
+  '@babel/plugin-transform-typescript@7.25.7':
+    resolution: {integrity: sha512-VKlgy2vBzj8AmEzunocMun2fF06bsSWV+FvVXohtL6FGve/+L217qhHxRTVGHEDO/YR8IANcjzgJsd04J8ge5Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-escapes@7.24.7':
-    resolution: {integrity: sha512-U3ap1gm5+4edc2Q/P+9VrBNhGkfnf+8ZqppY71Bo/pzZmXhhLdqgaUl6cuB07O1+AQJtCLfaOmswiNbSQ9ivhw==}
+  '@babel/plugin-transform-unicode-escapes@7.25.7':
+    resolution: {integrity: sha512-BN87D7KpbdiABA+t3HbVqHzKWUDN3dymLaTnPFAMyc8lV+KN3+YzNhVRNdinaCPA4AUqx7ubXbQ9shRjYBl3SQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-property-regex@7.24.7':
-    resolution: {integrity: sha512-uH2O4OV5M9FZYQrwc7NdVmMxQJOCCzFeYudlZSzUAHRFeOujQefa92E74TQDVskNHCzOXoigEuoyzHDhaEaK5w==}
+  '@babel/plugin-transform-unicode-property-regex@7.25.7':
+    resolution: {integrity: sha512-IWfR89zcEPQGB/iB408uGtSPlQd3Jpq11Im86vUgcmSTcoWAiQMCTOa2K2yNNqFJEBVICKhayctee65Ka8OB0w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-regex@7.24.7':
-    resolution: {integrity: sha512-hlQ96MBZSAXUq7ltkjtu3FJCCSMx/j629ns3hA3pXnBXjanNP0LHi+JpPeA81zaWgVK1VGH95Xuy7u0RyQ8kMg==}
+  '@babel/plugin-transform-unicode-regex@7.25.7':
+    resolution: {integrity: sha512-8JKfg/hiuA3qXnlLx8qtv5HWRbgyFx2hMMtpDDuU2rTckpKkGu4ycK5yYHwuEa16/quXfoxHBIApEsNyMWnt0g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-sets-regex@7.25.4':
-    resolution: {integrity: sha512-qesBxiWkgN1Q+31xUE9RcMk79eOXXDCv6tfyGMRSs4RGlioSg2WVyQAm07k726cSE56pa+Kb0y9epX2qaXzTvA==}
+  '@babel/plugin-transform-unicode-sets-regex@7.25.7':
+    resolution: {integrity: sha512-YRW8o9vzImwmh4Q3Rffd09bH5/hvY0pxg+1H1i0f7APoUeg12G7+HhLj9ZFNIrYkgBXhIijPJ+IXypN0hLTIbw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -2116,8 +2167,8 @@ packages:
     resolution: {integrity: sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==}
     deprecated: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
 
-  '@babel/preset-env@7.25.4':
-    resolution: {integrity: sha512-W9Gyo+KmcxjGahtt3t9fb14vFRWvPpu5pT6GBlovAK6BTBcxgjfVMSQCfJl4oi35ODrxP6xx2Wr8LNST57Mraw==}
+  '@babel/preset-env@7.25.7':
+    resolution: {integrity: sha512-Gibz4OUdyNqqLj+7OAvBZxOD7CklCtMA5/j0JgUEwOnaRULsPDXmic2iKxL2DX2vQduPR5wH2hjZas/Vr/Oc0g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2127,27 +2178,24 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
 
-  '@babel/regjsgen@0.8.0':
-    resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
-
-  '@babel/runtime@7.25.6':
-    resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==}
+  '@babel/runtime@7.25.7':
+    resolution: {integrity: sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/standalone@7.25.6':
-    resolution: {integrity: sha512-Kf2ZcZVqsKbtYhlA7sP0z5A3q5hmCVYMKMWRWNK/5OVwHIve3JY1djVRmIVAx8FMueLIfZGKQDIILK2w8zO4mg==}
+  '@babel/standalone@7.25.7':
+    resolution: {integrity: sha512-7H+mK18Ew4C/pIIiZwF1eiVjUEh2Ju/BpwRZwcPeXltF/rIjHjFL0gol7PtGrHocmIq6P6ubJrylmmWQ3lGJPA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.25.0':
-    resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
+  '@babel/template@7.25.7':
+    resolution: {integrity: sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.25.6':
-    resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==}
+  '@babel/traverse@7.25.7':
+    resolution: {integrity: sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.25.6':
-    resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
+  '@babel/types@7.25.7':
+    resolution: {integrity: sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ==}
     engines: {node: '>=6.9.0'}
 
   '@bcoe/v8-coverage@0.2.3':
@@ -2164,10 +2212,8 @@ packages:
     bundledDependencies:
       - is-unicode-supported
 
-  '@coddicat/vue-pinch-scroll-zoom@3.3.4':
-    resolution: {integrity: sha512-qGBK7TKg5Ii39u/2JnbfoBfQVaQfuVY865KR+X1vWbtaa8LWfwS+q4HgBHlV7JV1729a9zp3c9XDKIJoBVnAmA==}
-    peerDependencies:
-      vue: ^2.6.11
+  '@coddicat/vue-pinch-scroll-zoom@4.7.1':
+    resolution: {integrity: sha512-i2367AlVEm0zT5MyvEA1i30fgcM/B90R5ecevdGdTDMqreqcWXh2j6KVzJEoz9BfYGCG4IodJuKxN8MbNvcDhQ==}
 
   '@codemirror/autocomplete@6.18.1':
     resolution: {integrity: sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==}
@@ -2261,8 +2307,8 @@ packages:
     resolution: {integrity: sha512-PboNVOzDABhPQcNimCHmHeod9XHz+YADUfBv7xSWhftwIZDidWoVpydbQLosom0V9dj3vlvMbSukXtfwK/brTQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  '@emnapi/runtime@1.2.0':
-    resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}
+  '@emnapi/runtime@1.3.0':
+    resolution: {integrity: sha512-XMBySMuNZs3DM96xcJmLW4EfGnf+uGmFNjzpehMjuX5PLB5j87ar2Zc4e3PVeZ3I5g3tYtAqskB28manlF69Zw==}
 
   '@ericblade/quagga2@1.8.4':
     resolution: {integrity: sha512-Wy0G29x3fxvmv+k11IbPL6eY+5xwdU+lj48Buhxiw8f1uyNuvrd5SomjWIi9ohuIJbCmsKuaOa5nqlvvSLVErg==}
@@ -2570,9 +2616,14 @@ packages:
     resolution: {integrity: sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/compat@1.1.1':
-    resolution: {integrity: sha512-lpHyRyplhGPL5mGEh6M9O5nnKk0Gz4bFI+Zu6tKlPpDUN7XshWvH9C/px4UVm87IAANE0W81CEsNGbS1KlzXpA==}
+  '@eslint/compat@1.2.0':
+    resolution: {integrity: sha512-CkPWddN7J9JPrQedEr2X7AjK9y1jaMJtxZ4A/+jTMFA2+n5BWhcKHW/EbJyARqg2zzQfgtWUtVmG3hrG6+nGpg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^9.10.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
 
   '@eslint/config-array@0.18.0':
     resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
@@ -2586,8 +2637,8 @@ packages:
     resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.11.1':
-    resolution: {integrity: sha512-/qu+TWz8WwPWc7/HcIJKi+c+MOm46GdVaSlTTQcaqaL53+GsoA6MxWp5PtTx48qbSP7ylM1Kn7nhvkugfJvRSA==}
+  '@eslint/js@9.12.0':
+    resolution: {integrity: sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.4':
@@ -2631,20 +2682,28 @@ packages:
     resolution: {integrity: sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==}
     engines: {node: '>=6'}
 
-  '@hcaptcha/vue-hcaptcha@1.3.0':
-    resolution: {integrity: sha512-aUSWyhRucgFeBOBUC3nWBZuE0TkeoSH5QIVFwiTLnNsYpIaxD1tKBbI5Tdoy0TdpkuXKsB4KqyElbvoMZ9reGw==}
+  '@hcaptcha/vue3-hcaptcha@1.3.0':
+    resolution: {integrity: sha512-IEonS6JiYdU7uy6aeib8cYtMO4nj8utwStbA9bWHyYbOvOvhpkV+AW8vfSKh6SntYxqle/TRwhv+kU9p92CfsA==}
     peerDependencies:
-      vue: ^2.0.0
+      vue: ^3.0.0
 
   '@hexagon/base64@1.1.28':
     resolution: {integrity: sha512-lhqDEAvWixy3bZ+UOYbPwUbBkwBq5C1LAJ/xPC8Oi+lL54oyakv/npbA0aU2hgCsx/1NUd4IBvV03+aUBWxerw==}
 
+  '@humanfs/core@0.19.0':
+    resolution: {integrity: sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.5':
+    resolution: {integrity: sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==}
+    engines: {node: '>=18.18.0'}
+
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  '@humanwhocodes/retry@0.3.0':
-    resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
   '@hutson/parse-repository-url@5.0.0':
@@ -2768,6 +2827,45 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@intlify/bundle-utils@8.0.0':
+    resolution: {integrity: sha512-1B++zykRnMwQ+20SpsZI1JCnV/YJt9Oq7AGlEurzkWJOFtFAVqaGc/oV36PBRYeiKnTbY9VYfjBimr2Vt42wLQ==}
+    engines: {node: '>= 14.16'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/core-base@9.14.1':
+    resolution: {integrity: sha512-rG5/hlNW6Qfve41go37szEf0mVLcfhYuOu83JcY0jZKasnwsrcZYYWDzebCcuO5I/6Sy1JFWo9p+nvkQS1Dy+w==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@9.14.1':
+    resolution: {integrity: sha512-MY8hwukJBnXvGAncVKlHsqKDQ5ZcQx4peqEmI8wBUTXn4pezrtTGYXNoz81cLyEEHB+L/zlKWVBSh5TiX4gYoQ==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@9.14.1':
+    resolution: {integrity: sha512-XjHu6PEQup9MnP1x0W9y0nXXfq9jFftAYSfV11hryjtH4XqXP8HrzMvXI+ZVifF+jZLszaTzIhvukllplxTQTg==}
+    engines: {node: '>= 16'}
+
+  '@intlify/unplugin-vue-i18n@4.0.0':
+    resolution: {integrity: sha512-q2Mhqa/mLi0tulfLFO4fMXXvEbkSZpI5yGhNNsLTNJJ41icEGUuyDe+j5zRZIKSkOJRgX6YbCyibTDJdRsukmw==}
+    engines: {node: '>= 14.16'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+      vue-i18n-bridge: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+      vue-i18n-bridge:
+        optional: true
+
   '@ioredis/commands@1.2.0':
     resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
 
@@ -2903,8 +3001,8 @@ packages:
   '@levischuck/tiny-cbor@0.2.2':
     resolution: {integrity: sha512-f5CnPw997Y2GQ8FAvtuVVC19FX8mwNNC+1XJcIi16n/LTJifKO6QBgGLgN3YEmqtGMk17SKSuoWES3imJVxAVw==}
 
-  '@lezer/common@1.2.1':
-    resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
+  '@lezer/common@1.2.2':
+    resolution: {integrity: sha512-Z+R3hN6kXbgBWAuejUNPihylAL1Z5CaFqnIe0nTX8Ej+XlIy3EGtXxn6WtLMO+os2hRkQvm2yvaGMYliUzlJaw==}
 
   '@lezer/highlight@1.2.1':
     resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
@@ -3021,8 +3119,8 @@ packages:
     resolution: {integrity: sha512-MB4AYDsM5jhIHro/dq4ix1iWTLGToIGk6cWF5L6vanFaMble5jTX/UBQyiv05HsWnwUtY8JrfHy2LWfKwihqMw==}
     engines: {node: '>= 18'}
 
-  '@octokit/types@13.6.0':
-    resolution: {integrity: sha512-CrooV/vKCXqwLa+osmHLIMUb87brpgUqlqkPGc6iE2wCkUvTrHiXFMhAKoDDaAAYJrtKtrFTgSQTg5nObBEaew==}
+  '@octokit/types@13.6.1':
+    resolution: {integrity: sha512-PHZE9Z+kWXb23Ndik8MKPirBPziOc0D2/3KH1P+6jK5nGWe96kadZuE4jev2/Jq7FvIfTlT2Ltg8Fv2x1v0a5g==}
 
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
@@ -3056,6 +3154,9 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@polka/url@1.0.0-next.28':
+    resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
+
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
@@ -3153,106 +3254,106 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.23.0':
-    resolution: {integrity: sha512-8OR+Ok3SGEMsAZispLx8jruuXw0HVF16k+ub2eNXKHDmdxL4cf9NlNpAzhlOhNyXzKDEJuFeq0nZm+XlNb1IFw==}
+  '@rollup/rollup-android-arm-eabi@4.24.0':
+    resolution: {integrity: sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.23.0':
-    resolution: {integrity: sha512-rEFtX1nP8gqmLmPZsXRMoLVNB5JBwOzIAk/XAcEPuKrPa2nPJ+DuGGpfQUR0XjRm8KjHfTZLpWbKXkA5BoFL3w==}
+  '@rollup/rollup-android-arm64@4.24.0':
+    resolution: {integrity: sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.23.0':
-    resolution: {integrity: sha512-ZbqlMkJRMMPeapfaU4drYHns7Q5MIxjM/QeOO62qQZGPh9XWziap+NF9fsqPHT0KzEL6HaPspC7sOwpgyA3J9g==}
+  '@rollup/rollup-darwin-arm64@4.24.0':
+    resolution: {integrity: sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.23.0':
-    resolution: {integrity: sha512-PfmgQp78xx5rBCgn2oYPQ1rQTtOaQCna0kRaBlc5w7RlA3TDGGo7m3XaptgitUZ54US9915i7KeVPHoy3/W8tA==}
+  '@rollup/rollup-darwin-x64@4.24.0':
+    resolution: {integrity: sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.23.0':
-    resolution: {integrity: sha512-WAeZfAAPus56eQgBioezXRRzArAjWJGjNo/M+BHZygUcs9EePIuGI1Wfc6U/Ki+tMW17FFGvhCfYnfcKPh18SA==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.24.0':
+    resolution: {integrity: sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.23.0':
-    resolution: {integrity: sha512-v7PGcp1O5XKZxKX8phTXtmJDVpE20Ub1eF6w9iMmI3qrrPak6yR9/5eeq7ziLMrMTjppkkskXyxnmm00HdtXjA==}
+  '@rollup/rollup-linux-arm-musleabihf@4.24.0':
+    resolution: {integrity: sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.23.0':
-    resolution: {integrity: sha512-nAbWsDZ9UkU6xQiXEyXBNHAKbzSAi95H3gTStJq9UGiS1v+YVXwRHcQOQEF/3CHuhX5BVhShKoeOf6Q/1M+Zhg==}
+  '@rollup/rollup-linux-arm64-gnu@4.24.0':
+    resolution: {integrity: sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.23.0':
-    resolution: {integrity: sha512-5QT/Di5FbGNPaVw8hHO1wETunwkPuZBIu6W+5GNArlKHD9fkMHy7vS8zGHJk38oObXfWdsuLMogD4sBySLJ54g==}
+  '@rollup/rollup-linux-arm64-musl@4.24.0':
+    resolution: {integrity: sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.23.0':
-    resolution: {integrity: sha512-Sefl6vPyn5axzCsO13r1sHLcmPuiSOrKIImnq34CBurntcJ+lkQgAaTt/9JkgGmaZJ+OkaHmAJl4Bfd0DmdtOQ==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.24.0':
+    resolution: {integrity: sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.23.0':
-    resolution: {integrity: sha512-o4QI2KU/QbP7ZExMse6ULotdV3oJUYMrdx3rBZCgUF3ur3gJPfe8Fuasn6tia16c5kZBBw0aTmaUygad6VB/hQ==}
+  '@rollup/rollup-linux-riscv64-gnu@4.24.0':
+    resolution: {integrity: sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.23.0':
-    resolution: {integrity: sha512-+bxqx+V/D4FGrpXzPGKp/SEZIZ8cIW3K7wOtcJAoCrmXvzRtmdUhYNbgd+RztLzfDEfA2WtKj5F4tcbNPuqgeg==}
+  '@rollup/rollup-linux-s390x-gnu@4.24.0':
+    resolution: {integrity: sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.23.0':
-    resolution: {integrity: sha512-I/eXsdVoCKtSgK9OwyQKPAfricWKUMNCwJKtatRYMmDo5N859tbO3UsBw5kT3dU1n6ZcM1JDzPRSGhAUkxfLxw==}
+  '@rollup/rollup-linux-x64-gnu@4.24.0':
+    resolution: {integrity: sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.23.0':
-    resolution: {integrity: sha512-4ZoDZy5ShLbbe1KPSafbFh1vbl0asTVfkABC7eWqIs01+66ncM82YJxV2VtV3YVJTqq2P8HMx3DCoRSWB/N3rw==}
+  '@rollup/rollup-linux-x64-musl@4.24.0':
+    resolution: {integrity: sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.23.0':
-    resolution: {integrity: sha512-+5Ky8dhft4STaOEbZu3/NU4QIyYssKO+r1cD3FzuusA0vO5gso15on7qGzKdNXnc1gOrsgCqZjRw1w+zL4y4hQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.24.0':
+    resolution: {integrity: sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.23.0':
-    resolution: {integrity: sha512-0SPJk4cPZQhq9qA1UhIRumSE3+JJIBBjtlGl5PNC///BoaByckNZd53rOYD0glpTkYFBQSt7AkMeLVPfx65+BQ==}
+  '@rollup/rollup-win32-ia32-msvc@4.24.0':
+    resolution: {integrity: sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.23.0':
-    resolution: {integrity: sha512-lqCK5GQC8fNo0+JvTSxcG7YB1UKYp8yrNLhsArlvPWN+16ovSZgoehlVHg6X0sSWPUkpjRBR5TuR12ZugowZ4g==}
+  '@rollup/rollup-win32-x64-msvc@4.24.0':
+    resolution: {integrity: sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==}
     cpu: [x64]
     os: [win32]
 
   '@selderee/plugin-htmlparser2@0.11.0':
     resolution: {integrity: sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==}
 
-  '@shikijs/core@1.21.0':
-    resolution: {integrity: sha512-zAPMJdiGuqXpZQ+pWNezQAk5xhzRXBNiECFPcJLtUdsFM3f//G95Z15EHTnHchYycU8kIIysqGgxp8OVSj1SPQ==}
+  '@shikijs/core@1.21.1':
+    resolution: {integrity: sha512-scBQo4V4O4WZLEDg11e75UPmXoCMq4Ya2A16U6efi/aTiR4o7T/GMNWZs2rq1U8dEvFKGxJZxiUy+tXgmr/4vw==}
 
-  '@shikijs/engine-javascript@1.21.0':
-    resolution: {integrity: sha512-jxQHNtVP17edFW4/0vICqAVLDAxmyV31MQJL4U/Kg+heQALeKYVOWo0sMmEZ18FqBt+9UCdyqGKYE7bLRtk9mg==}
+  '@shikijs/engine-javascript@1.21.1':
+    resolution: {integrity: sha512-29EG4KYKlAona8yikEx8uoKbK7N2YoXUO26LS1GOIxpMMIAlQS9UFONg95lkGmIfp1rRcvCvSpYYIJ/blsQxvg==}
 
-  '@shikijs/engine-oniguruma@1.21.0':
-    resolution: {integrity: sha512-AIZ76XocENCrtYzVU7S4GY/HL+tgHGbVU+qhiDyNw1qgCA5OSi4B4+HY4BtAoJSMGuD/L5hfTzoRVbzEm2WTvg==}
+  '@shikijs/engine-oniguruma@1.21.1':
+    resolution: {integrity: sha512-PvfEtXCDbQZc9ud0SC0bPiuMbul44Cv0Ky2go4SsvVkYAAKYJsMe/Hx7nxThW8yS0r+w8USa0WfOtQKsD9DU9A==}
 
-  '@shikijs/transformers@1.21.0':
-    resolution: {integrity: sha512-aA+XGGSzipcvqdsOYL8l6Q2RYiMuJNdhdt9eZnkJmW+wjSOixN/I7dBq3fISwvEMDlawrtuXM3eybLCEC+Fjlg==}
+  '@shikijs/transformers@1.21.1':
+    resolution: {integrity: sha512-97csTb0Gv8eLbglPDhNZTuAI9eCXOujNqD4qK6H0cjFNK+NBhkRIU02RgmYHZ7yNyLary6cEzY6WmUWb+al3MQ==}
 
-  '@shikijs/types@1.21.0':
-    resolution: {integrity: sha512-tzndANDhi5DUndBtpojEq/42+dpUF2wS7wdCDQaFtIXm3Rd1QkrcVgSSRLOvEwexekihOXfbYJINW37g96tJRw==}
+  '@shikijs/types@1.21.1':
+    resolution: {integrity: sha512-yLuTJTCHmYznerJ0nxF+f2rBKHQf2FMAd08QL/3du2xNBy/7yQ8CjuKN4Zc+Pk0vfIFzdBoxdzvEXE4JtXoR4Q==}
 
-  '@shikijs/vscode-textmate@9.2.2':
-    resolution: {integrity: sha512-TMp15K+GGYrWlZM8+Lnj9EaHEFmOen0WJBrfa17hF7taDOYthuPPV0GWzfd/9iMij0akS/8Yw2ikquH7uVi/fg==}
+  '@shikijs/vscode-textmate@9.3.0':
+    resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==}
 
   '@simplewebauthn/browser@10.0.0':
     resolution: {integrity: sha512-hG0JMZD+LiLUbpQcAjS4d+t4gbprE/dLYop/CkE01ugU/9sKXflxV5s0DRjdz3uNMFecatRfb4ZLG3XvF8m5zg==}
@@ -3283,8 +3384,8 @@ packages:
   '@streamparser/json@0.0.20':
     resolution: {integrity: sha512-VqAAkydywPpkw63WQhPVKCD3SdwXuihCUVZbbiY3SfSTGQyHmwRoq27y4dmJdZuJwd5JIlQoMPyGvMbUPY0RKQ==}
 
-  '@stylistic/eslint-plugin@2.8.0':
-    resolution: {integrity: sha512-Ufvk7hP+bf+pD35R/QfunF793XlSRIC7USr3/EdgduK9j13i2JjmsM0LUz3/foS+jDYp2fzyWZA9N44CPur0Ow==}
+  '@stylistic/eslint-plugin@2.9.0':
+    resolution: {integrity: sha512-OrDyFAYjBT61122MIY1a3SfEgy3YCMgt2vL4eoPmvTwDBwyQhAXurxNQznlRD/jESNfYWfID8Ej+31LljvF7Xg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: '>=8.40.0'
@@ -3295,10 +3396,10 @@ packages:
   '@tediousjs/connection-string@0.5.0':
     resolution: {integrity: sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==}
 
-  '@tinymce/tinymce-vue@3.2.8':
-    resolution: {integrity: sha512-jEz+NZ0g+FZFz273OEUWz9QkwPMyjc5AJYyxOgu51O1Y5UaJ/6IUddXTX6A20mwCleEv5ebwNYdalviafx4fnA==}
+  '@tinymce/tinymce-vue@6.0.1':
+    resolution: {integrity: sha512-VzjI8AKlNrrsosIk3WuBez6kubqPsPMeaButkRLuts77uo4e2EwPRFX+VyB6fHbMGHwUPK22zNjOUGMvJFZFCw==}
     peerDependencies:
-      vue: ^2.4.3
+      vue: ^3.0.0
 
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
@@ -3346,6 +3447,9 @@ packages:
   '@tsconfig/node16@1.0.4':
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
 
+  '@tsconfig/node20@20.1.4':
+    resolution: {integrity: sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==}
+
   '@types/ajv@1.0.0':
     resolution: {integrity: sha512-yGSqw9/QKd5FXbTNrSANcJ6IHWeNhA+gokXqmlPquJgLDC87d4g2FGPs+AlCeGG0GuZXmPq42hOFA2hnPymCLw==}
     deprecated: This is a stub types definition for ajv (https://github.com/epoberezkin/ajv). ajv provides its own type definitions, so you don't need @types/ajv installed!
@@ -3467,8 +3571,8 @@ packages:
   '@types/linkify-it@5.0.0':
     resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
 
-  '@types/lodash@4.17.9':
-    resolution: {integrity: sha512-w9iWudx1XWOHW5lQRS9iKpK/XuRhnN+0T7HvdCCd802FYkT1AMTnxndJHGrNJwRoRHkslGr4S29tjm1cT7x/7w==}
+  '@types/lodash@4.17.10':
+    resolution: {integrity: sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==}
 
   '@types/markdown-it@14.1.2':
     resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
@@ -3572,6 +3676,9 @@ packages:
   '@types/serve-static@1.15.7':
     resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
 
+  '@types/sortablejs@1.15.8':
+    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
@@ -3704,13 +3811,6 @@ packages:
       terser: ^5.4.0
       vite: ^5.0.0
 
-  '@vitejs/plugin-vue2@2.3.1':
-    resolution: {integrity: sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==}
-    engines: {node: ^14.18.0 || >= 16.0.0}
-    peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
-      vue: ^2.7.0-0
-
   '@vitejs/plugin-vue@5.1.4':
     resolution: {integrity: sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -3718,28 +3818,24 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
 
-  '@vitest/eslint-plugin@1.1.4':
-    resolution: {integrity: sha512-kudjgefmJJ7xQ2WfbUU6pZbm7Ou4gLYRaao/8Ynide3G0QhVKHd978sDyWX4KOH0CCMH9cyrGAkFd55eGzJ48Q==}
+  '@vitest/eslint-plugin@1.1.6':
+    resolution: {integrity: sha512-sFuAnD9iycnOzLHHhNCULXeb6ejOSo5Lcq/ODhdlUOoUrXkQPcVeYqXurZMA3neOqf+wNCQ6YuU1zyoYH/WEcg==}
     peerDependencies:
       '@typescript-eslint/utils': '>= 8.0'
       eslint: '>= 8.57.0'
       typescript: '>= 5.0.0'
       vitest: '*'
     peerDependenciesMeta:
-      '@typescript-eslint/utils':
-        optional: true
       typescript:
         optional: true
-      vitest:
-        optional: true
 
-  '@vitest/expect@2.1.1':
-    resolution: {integrity: sha512-YeueunS0HiHiQxk+KEOnq/QMzlUuOzbU1Go+PgAsHvvv3tUkJPm9xWt+6ITNTlzsMXUjmgm5T+U7KBPK2qQV6w==}
+  '@vitest/expect@2.1.2':
+    resolution: {integrity: sha512-FEgtlN8mIUSEAAnlvn7mP8vzaWhEaAEvhSXCqrsijM7K6QqjB11qoRZYEd4AKSCDz8p0/+yH5LzhZ47qt+EyPg==}
 
-  '@vitest/mocker@2.1.1':
-    resolution: {integrity: sha512-LNN5VwOEdJqCmJ/2XJBywB11DLlkbY0ooDJW3uRX5cZyYCrc4PI/ePX0iQhE3BiEGiQmK4GE7Q/PqCkkaiPnrA==}
+  '@vitest/mocker@2.1.2':
+    resolution: {integrity: sha512-ExElkCGMS13JAJy+812fw1aCv2QO/LBK6CyO4WOPAzLTmve50gydOlWhgdBJPx2ztbADUq3JVI0C5U+bShaeEA==}
     peerDependencies:
-      '@vitest/spy': 2.1.1
+      '@vitest/spy': 2.1.2
       msw: ^2.3.5
       vite: ^5.0.0
     peerDependenciesMeta:
@@ -3748,20 +3844,20 @@ packages:
       vite:
         optional: true
 
-  '@vitest/pretty-format@2.1.1':
-    resolution: {integrity: sha512-SjxPFOtuINDUW8/UkElJYQSFtnWX7tMksSGW0vfjxMneFqxVr8YJ979QpMbDW7g+BIiq88RAGDjf7en6rvLPPQ==}
+  '@vitest/pretty-format@2.1.2':
+    resolution: {integrity: sha512-FIoglbHrSUlOJPDGIrh2bjX1sNars5HbxlcsFKCtKzu4+5lpsRhOCVcuzp0fEhAGHkPZRIXVNzPcpSlkoZ3LuA==}
 
-  '@vitest/runner@2.1.1':
-    resolution: {integrity: sha512-uTPuY6PWOYitIkLPidaY5L3t0JJITdGTSwBtwMjKzo5O6RCOEncz9PUN+0pDidX8kTHYjO0EwUIvhlGpnGpxmA==}
+  '@vitest/runner@2.1.2':
+    resolution: {integrity: sha512-UCsPtvluHO3u7jdoONGjOSil+uON5SSvU9buQh3lP7GgUXHp78guN1wRmZDX4wGK6J10f9NUtP6pO+SFquoMlw==}
 
-  '@vitest/snapshot@2.1.1':
-    resolution: {integrity: sha512-BnSku1WFy7r4mm96ha2FzN99AZJgpZOWrAhtQfoxjUU5YMRpq1zmHRq7a5K9/NjqonebO7iVDla+VvZS8BOWMw==}
+  '@vitest/snapshot@2.1.2':
+    resolution: {integrity: sha512-xtAeNsZ++aRIYIUsek7VHzry/9AcxeULlegBvsdLncLmNCR6tR8SRjn8BbDP4naxtccvzTqZ+L1ltZlRCfBZFA==}
 
-  '@vitest/spy@2.1.1':
-    resolution: {integrity: sha512-ZM39BnZ9t/xZ/nF4UwRH5il0Sw93QnZXd9NAZGRpIgj0yvVwPpLd702s/Cx955rGaMlyBQkZJ2Ir7qyY48VZ+g==}
+  '@vitest/spy@2.1.2':
+    resolution: {integrity: sha512-GSUi5zoy+abNRJwmFhBDC0yRuVUn8WMlQscvnbbXdKLXX9dE59YbfwXxuJ/mth6eeqIzofU8BB5XDo/Ns/qK2A==}
 
-  '@vitest/utils@2.1.1':
-    resolution: {integrity: sha512-Y6Q9TsI+qJ2CC0ZKj6VBb+T8UPz593N113nnUykqwANqhgf3QkZeHFlusgKLTqrnVHbj/XDKZcDHol+dxVT+rQ==}
+  '@vitest/utils@2.1.2':
+    resolution: {integrity: sha512-zMO2KdYy6mx56btx9JvAqAZ6EyS3g49krMPPrgOp1yxGZiA93HumGk+bZ5jIZtOg5/VBYl5eBmGRQHqq4FG6uQ==}
 
   '@volar/language-core@2.4.5':
     resolution: {integrity: sha512-F4tA0DCO5Q1F5mScHmca0umsi2ufKULAnMOVBfMsZdT4myhVl4WdKRwCaKcfOkIEuyrAVvtq1ESBdZ+rSyLVww==}
@@ -3772,20 +3868,33 @@ packages:
   '@volar/typescript@2.4.5':
     resolution: {integrity: sha512-mcT1mHvLljAEtHviVcBuOyAwwMKz1ibXTi5uYtP/pf4XxoAzpdkQ+Br2IC0NPCvLCbjPZmbf3I0udndkfB1CDg==}
 
-  '@vue/compiler-core@3.5.10':
-    resolution: {integrity: sha512-iXWlk+Cg/ag7gLvY0SfVucU8Kh2CjysYZjhhP70w9qI4MvSox4frrP+vDGvtQuzIcgD8+sxM6lZvCtdxGunTAA==}
+  '@vue/babel-helper-vue-transform-on@1.2.5':
+    resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
+
+  '@vue/babel-plugin-jsx@1.2.5':
+    resolution: {integrity: sha512-zTrNmOd4939H9KsRIGmmzn3q2zvv1mjxkYZHgqHZgDrXz5B1Q3WyGEjO2f+JrmKghvl1JIRcvo63LgM1kH5zFg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@1.2.5':
+    resolution: {integrity: sha512-U/ibkQrf5sx0XXRnUZD1mo5F7PkpKyTbfXM3a3rC4YnUz6crHEz9Jg09jzzL6QYlXNto/9CePdOg/c87O4Nlfg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
 
-  '@vue/compiler-dom@3.5.10':
-    resolution: {integrity: sha512-DyxHC6qPcktwYGKOIy3XqnHRrrXyWR2u91AjP+nLkADko380srsC2DC3s7Y1Rk6YfOlxOlvEQKa9XXmLI+W4ZA==}
+  '@vue/compiler-core@3.5.11':
+    resolution: {integrity: sha512-PwAdxs7/9Hc3ieBO12tXzmTD+Ln4qhT/56S+8DvrrZ4kLDn4Z/AMUr8tXJD0axiJBS0RKIoNaR0yMuQB9v9Udg==}
 
-  '@vue/compiler-sfc@2.7.16':
-    resolution: {integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==}
+  '@vue/compiler-dom@3.5.11':
+    resolution: {integrity: sha512-pyGf8zdbDDRkBrEzf8p7BQlMKNNF5Fk/Cf/fQ6PiUz9at4OaUfyXW0dGJTo2Vl1f5U9jSLCNf0EZJEogLXoeew==}
 
-  '@vue/compiler-sfc@3.5.10':
-    resolution: {integrity: sha512-to8E1BgpakV7224ZCm8gz1ZRSyjNCAWEplwFMWKlzCdP9DkMKhRRwt0WkCjY7jkzi/Vz3xgbpeig5Pnbly4Tow==}
+  '@vue/compiler-sfc@3.5.11':
+    resolution: {integrity: sha512-gsbBtT4N9ANXXepprle+X9YLg2htQk1sqH/qGJ/EApl+dgpUBdTv3yP7YlR535uHZY3n6XaR0/bKo0BgwwDniw==}
 
-  '@vue/compiler-ssr@3.5.10':
-    resolution: {integrity: sha512-hxP4Y3KImqdtyUKXDRSxKSRkSm1H9fCvhojEYrnaoWhE4w/y8vwWhnosJoPPe2AXm5sU7CSbYYAgkt2ZPhDz+A==}
+  '@vue/compiler-ssr@3.5.11':
+    resolution: {integrity: sha512-P4+GPjOuC2aFTk1Z4WANvEhyOykcvEd5bIj2KVNGKGfM745LaXGr++5njpdBTzVz5pZifdlR1kpYSJJpIlSePA==}
 
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
@@ -3796,6 +3905,11 @@ packages:
   '@vue/devtools-api@7.4.6':
     resolution: {integrity: sha512-XipBV5k0/IfTr0sNBDTg7OBUCp51cYMMXyPxLXJZ4K/wmUeMqt8cVdr2ZZGOFq+si/jTyCYnNxeKoyev5DOUUA==}
 
+  '@vue/devtools-core@7.4.6':
+    resolution: {integrity: sha512-7ATNPEbVqThOOAp2bg/YUIm9MqqgimbSk24D05hdXUp89JlXX12aTzdrWd9xZRwS78hDR+wCToHl1C/8sopBrg==}
+    peerDependencies:
+      vue: ^3.0.0
+
   '@vue/devtools-kit@7.4.6':
     resolution: {integrity: sha512-NbYBwPWgEic1AOd9bWExz9weBzFdjiIfov0yRn4DrRfR+EQJCI9dn4I0XS7IxYGdkmUJi8mFW42LLk18WsGqew==}
 
@@ -3810,22 +3924,31 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity@3.5.10':
-    resolution: {integrity: sha512-kW08v06F6xPSHhid9DJ9YjOGmwNDOsJJQk0ax21wKaUYzzuJGEuoKNU2Ujux8FLMrP7CFJJKsHhXN9l2WOVi2g==}
+  '@vue/reactivity@3.5.11':
+    resolution: {integrity: sha512-Nqo5VZEn8MJWlCce8XoyVqHZbd5P2NH+yuAaFzuNSR96I+y1cnuUiq7xfSG+kyvLSiWmaHTKP1r3OZY4mMD50w==}
 
-  '@vue/runtime-core@3.5.10':
-    resolution: {integrity: sha512-9Q86I5Qq3swSkFfzrZ+iqEy7Vla325M7S7xc1NwKnRm/qoi1Dauz0rT6mTMmscqx4qz0EDJ1wjB+A36k7rl8mA==}
+  '@vue/runtime-core@3.5.11':
+    resolution: {integrity: sha512-7PsxFGqwfDhfhh0OcDWBG1DaIQIVOLgkwA5q6MtkPiDFjp5gohVnJEahSktwSFLq7R5PtxDKy6WKURVN1UDbzA==}
 
-  '@vue/runtime-dom@3.5.10':
-    resolution: {integrity: sha512-t3x7ht5qF8ZRi1H4fZqFzyY2j+GTMTDxRheT+i8M9Ph0oepUxoadmbwlFwMoW7RYCpNQLpP2Yx3feKs+fyBdpA==}
+  '@vue/runtime-dom@3.5.11':
+    resolution: {integrity: sha512-GNghjecT6IrGf0UhuYmpgaOlN7kxzQBhxWEn08c/SQDxv1yy4IXI1bn81JgEpQ4IXjRxWtPyI8x0/7TF5rPfYQ==}
 
-  '@vue/server-renderer@3.5.10':
-    resolution: {integrity: sha512-IVE97tt2kGKwHNq9yVO0xdh1IvYfZCShvDSy46JIh5OQxP1/EXSpoDqetVmyIzL7CYOWnnmMkVqd7YK2QSWkdw==}
+  '@vue/server-renderer@3.5.11':
+    resolution: {integrity: sha512-cVOwYBxR7Wb1B1FoxYvtjJD8X/9E5nlH4VSkJy2uMA1MzYNdzAAB//l8nrmN9py/4aP+3NjWukf9PZ3TeWULaA==}
     peerDependencies:
-      vue: 3.5.10
+      vue: 3.5.11
+
+  '@vue/shared@3.5.11':
+    resolution: {integrity: sha512-W8GgysJVnFo81FthhzurdRAWP/byq3q2qIw70e0JWblzVhjgOMiC2GyovXrZTFQJnFVryYaKGP3Tc9vYzYm6PQ==}
 
-  '@vue/shared@3.5.10':
-    resolution: {integrity: sha512-VkkBhU97Ki+XJ0xvl4C9YJsIZ2uIlQ7HqPpZOS3m9VCvmROPaChZU6DexdMJqvz9tbgG+4EtFVrSuailUq5KGQ==}
+  '@vue/tsconfig@0.5.1':
+    resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
+
+  '@vuetify/loader-shared@2.0.3':
+    resolution: {integrity: sha512-Ss3GC7eJYkp2SF6xVzsT7FAruEmdihmn4OCk2+UocREerlXKWgOKKzTN5PN3ZVN5q05jHHrsNhTuWbhN61Bpdg==}
+    peerDependencies:
+      vue: ^3.0.0
+      vuetify: ^3.0.0
 
   '@vueuse/core@11.1.0':
     resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}
@@ -4149,12 +4272,12 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  awesome-phonenumber@7.1.0:
-    resolution: {integrity: sha512-i/pC5xvaNVrduufGtnw8O+abLWq70wd6YutiPYR2NqrnwtjBMk7rG/vJTktnAivSok+ZqlkFZzuVICgObpQi4w==}
+  awesome-phonenumber@7.2.0:
+    resolution: {integrity: sha512-CqH0TyDMHiMhqGRg/kaJDiV5KRok5AdrJKvUsED9/QRQdiCjUzp32+NqEEnY+OWEDTeeqlyLsLs7SLR/sPQU2A==}
     engines: {node: '>=18'}
 
-  awilix@11.0.0:
-    resolution: {integrity: sha512-lnEm2TZu1OUWO1twi/3JrjSYu3RYjiOMiMQgfpwXj6uG4NSDtPSAWwTvqbpV7B8iWsXiC8GoMBKg1YsrUxPJhg==}
+  awilix@12.0.1:
+    resolution: {integrity: sha512-E5z/JhcokkANolIYbMcH93q5WAaz+vcPuRYkwaoESsjeHfKzAkSM8S2rZstbuOP8Thq4/+WgNbFlz8PI9wH1Jw==}
     engines: {node: '>=16.3.0'}
 
   aws-sign2@0.7.0:
@@ -4354,8 +4477,12 @@ packages:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
 
-  bullmq@5.14.0:
-    resolution: {integrity: sha512-qxZHtRuGEp0oHM1aNokuZ4gA0xr6vcZQPe1OLuQoDTuhaEXB4faxApUoo85v/PHnzrniAAqNT9kqD+UBbmECDQ==}
+  bullmq@5.16.0:
+    resolution: {integrity: sha512-7FaZzHsRXFOxrxCQTNKowuo9PPRwnAOpYXB5tcfk8vg0IbuVQ/je1Bf228Zy29gCS/5ytIEJNVB/DDGwZM0wbA==}
+
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
 
   busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
@@ -4400,8 +4527,8 @@ packages:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
 
-  caniuse-lite@1.0.30001664:
-    resolution: {integrity: sha512-AmE7k4dXiNKQipgn7a2xg558IRqPN3jMQY/rOsbxDhrd0tyChwbITBfiwtnqz8bi2M5mIWbxAYBvk7W7QBUS2g==}
+  caniuse-lite@1.0.30001667:
+    resolution: {integrity: sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==}
 
   caseless@0.12.0:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
@@ -4467,8 +4594,8 @@ packages:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
 
-  chromium-bidi@0.6.5:
-    resolution: {integrity: sha512-RuLrmzYrxSb0s9SgpB+QN5jJucPduZQ/9SIe76MDxYJuecPW5mxMdacJ1f4EtgiV+R0p3sCkznTMvH0MPGFqjA==}
+  chromium-bidi@0.8.0:
+    resolution: {integrity: sha512-uJydbGdTw0DEUjhoogGveneJVWX/9YuqkWePzMmkBYwtdAqo5d3J/ovNKFr+/2hWXYmYCr6it8mSSTIj6SS6Ug==}
     peerDependencies:
       devtools-protocol: '*'
 
@@ -4760,6 +4887,10 @@ packages:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
 
+  cookie@0.7.1:
+    resolution: {integrity: sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==}
+    engines: {node: '>= 0.6'}
+
   cookiejar@2.1.4:
     resolution: {integrity: sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==}
 
@@ -5016,13 +5147,21 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  deep-pick-omit@1.2.0:
-    resolution: {integrity: sha512-2CGvfTM2c+IP/MhdRZMpaHhTc6zIlgz3tQXJ/VGAkc7mjMrjqSU28qiI63yEcy+fcYfd/K+NNJcGRzap4M4bqw==}
+  deep-pick-omit@1.2.1:
+    resolution: {integrity: sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==}
 
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
+
+  default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
+
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
@@ -5031,6 +5170,10 @@ packages:
     resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
     engines: {node: '>=8'}
 
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
   define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
@@ -5177,8 +5320,8 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.5.30:
-    resolution: {integrity: sha512-sXI35EBN4lYxzc/pIGorlymYNzDBOqkSlVRe6MkgBsW/hW1tpC/HDJ2fjG7XnjakzfLEuvdmux0Mjs6jHq4UOA==}
+  electron-to-chromium@1.5.32:
+    resolution: {integrity: sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==}
 
   emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
@@ -5241,6 +5384,9 @@ packages:
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
+  error-stack-parser-es@0.1.5:
+    resolution: {integrity: sha512-xHku1X40RO+fO8yJ8Wh2f2rZWVjqyhb1zgq1yZ8aZRQkv6OOKhKWRUaht3eSCUbAOBaKIgM+ykwFLE+QUxgGeg==}
+
   es-abstract@1.23.3:
     resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
     engines: {node: '>= 0.4'}
@@ -5494,8 +5640,8 @@ packages:
     resolution: {integrity: sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.11.1:
-    resolution: {integrity: sha512-MobhYKIoAO1s1e4VUrgx1l1Sk2JBR/Gqjjgw8+mfgoLE2xwsHur4gdfTxyTgShrhvdVFTaJSgMiQBl1jv/AWxg==}
+  eslint@9.12.0:
+    resolution: {integrity: sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -5591,8 +5737,8 @@ packages:
     resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  express-rate-limit@7.4.0:
-    resolution: {integrity: sha512-v1204w3cXu5gCDmAvgvzI6qjzZzoMWKnyVDk3ACgfswTQLYiGen+r8w0VnXnGMmzEN/g8fwIQ4JrFFd4ZP6ssg==}
+  express-rate-limit@7.4.1:
+    resolution: {integrity: sha512-KS3efpnpIDVIXopMc65EMbWbUht7qvTCdtCR2dD/IZmi9MIkopYESwyRqLgv8Pfu589+KqDqOdzJWW7AHoACeg==}
     engines: {node: '>= 16'}
     peerDependencies:
       express: 4 || 5 || ^5.0.0-beta.1
@@ -5978,8 +6124,8 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@15.9.0:
-    resolution: {integrity: sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==}
+  globals@15.10.0:
+    resolution: {integrity: sha512-tqFIbz83w4Y5TCbtgjZjApohbuh7K9BxGYFm7ifwDR240tvdb7P9x+/9VvUKlmkPoiknoJtanI8UOrqxS3a7lQ==}
     engines: {node: '>=18'}
 
   globalthis@1.0.4:
@@ -6093,6 +6239,10 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
+  html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
+
   html-to-text@9.0.5:
     resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==}
     engines: {node: '>=14'}
@@ -6294,6 +6444,11 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -6325,6 +6480,11 @@ packages:
   is-hexadecimal@1.0.4:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
 
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
   is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
 
@@ -6351,10 +6511,6 @@ packages:
     resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
     engines: {node: '>=8'}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-
   is-plain-object@2.0.4:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
     engines: {node: '>=0.10.0'}
@@ -6422,6 +6578,10 @@ packages:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
+  is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -6620,8 +6780,8 @@ packages:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
 
-  jiti@2.0.0:
-    resolution: {integrity: sha512-CJ7e7Abb779OTRv3lomfp7Mns/Sy1+U4pcAx5VbjxCZD5ZM/VJaXPpPjNKjtSvWQy/H86E49REXR34dl1JEz9w==}
+  jiti@2.3.1:
+    resolution: {integrity: sha512-xPZ6pPzUifI8XDBBxIL4OB1w1ZKmBpmNEeKwNt2d0Spn8XisAIZhWrlOHq5seBrFGTxVx9PbrWvEMyrk4IO5bA==}
     hasBin: true
 
   jmespath@0.16.0:
@@ -6687,11 +6847,6 @@ packages:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
 
-  jsesc@2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   jsesc@3.0.2:
     resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
     engines: {node: '>=6'}
@@ -6890,8 +7045,8 @@ packages:
     engines: {node: '>=18.12.0'}
     hasBin: true
 
-  listr2@8.2.4:
-    resolution: {integrity: sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==}
+  listr2@8.2.5:
+    resolution: {integrity: sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==}
     engines: {node: '>=18.0.0'}
 
   litegraph.js@0.7.18:
@@ -7249,8 +7404,8 @@ packages:
   mnemonist@0.39.8:
     resolution: {integrity: sha512-vyWo2K3fjrUw8YeeZ1zF0fy6Mu59RHokURlld8ymdUPjMlD9EC9ov1/YPqTgqRvUN9nTr3Gqfz29LYAmu0PHPQ==}
 
-  moment-timezone@0.5.45:
-    resolution: {integrity: sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==}
+  moment-timezone@0.5.46:
+    resolution: {integrity: sha512-ZXm9b36esbe7OmdABqIWJuBBiLLwAjrN7CE+7sYdCCx82Nabt1wHDj8TVseS59QIlfFPbOoiBPm6ca9BioG4hw==}
 
   moment@2.30.1:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
@@ -7305,6 +7460,10 @@ packages:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
 
+  mrmime@2.0.0:
+    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
+    engines: {node: '>=10'}
+
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
@@ -7572,6 +7731,10 @@ packages:
   oniguruma-to-js@0.4.3:
     resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
 
+  open@10.1.0:
+    resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
+    engines: {node: '>=18'}
+
   open@8.4.2:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
@@ -7640,8 +7803,8 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
-  package-manager-detector@0.2.0:
-    resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==}
+  package-manager-detector@0.2.1:
+    resolution: {integrity: sha512-/hVW2fZvAdEas+wyKh0SnlZ2mx0NIa1+j11YaQkogEJkcMErbwchHCuo8z7lEtajZJQZ6rgZNVTWMVVd71Bjng==}
 
   pandemonium@2.4.1:
     resolution: {integrity: sha512-wRqjisUyiUfXowgm7MFH2rwJzKIr20rca5FsHXCMNm1W5YPP1hCtrZfgmQ62kP7OZ7Xt+cR858aB28lu5NX55g==}
@@ -7851,8 +8014,8 @@ packages:
     resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
     engines: {node: '>=4'}
 
-  pinia-plugin-persistedstate@4.0.2:
-    resolution: {integrity: sha512-KSApXsnGTrWKnAeHgEpYqtzeO84y4NH7uVM0/KMog+/oR2Py8p25tKjHQUmkcNNluzc0rJjFzlv2i5ZTdLeTXA==}
+  pinia-plugin-persistedstate@4.1.1:
+    resolution: {integrity: sha512-fUiUsbfBetGUZzX28z+ImAZw7FDXzwRrk+fN+ljF5OhQMhsSYfYeUzI9FLLtpjekYbfFHWvJiECkLI60RIuiPA==}
     peerDependencies:
       '@pinia/nuxt': '>=0.5.0'
       pinia: '>=2.0.0'
@@ -7956,8 +8119,8 @@ packages:
   postgres-range@1.1.4:
     resolution: {integrity: sha512-i/hbxIE9803Alj/6ytL7UHQxRvZkI9O4Sy+J3HGc4F4oo/2eQAjTSNJ0bfxyse3bH0nuVesCk+3IRLaMtG3H6w==}
 
-  preact@10.24.1:
-    resolution: {integrity: sha512-PnBAwFI3Yjxxcxw75n6VId/5TFxNW/81zexzWD9jn1+eSrOP84NdsS38H5IkF/UH3frqRPT+MvuCoVHjTDTnDw==}
+  preact@10.24.2:
+    resolution: {integrity: sha512-1cSoF0aCC8uaARATfrlz4VCBqE8LwZwRfLgkxJOQwAlQt6ayTmi0D9OF7nXid1POI5SZidFuG9CnlXbDfLqY/Q==}
 
   prebuild-install@7.1.2:
     resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==}
@@ -7972,11 +8135,6 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
-  prettier@2.8.8:
-    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-
   prettier@3.3.3:
     resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
     engines: {node: '>=14'}
@@ -8043,12 +8201,12 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  puppeteer-core@23.4.1:
-    resolution: {integrity: sha512-uCxGtn8VE9PlKhdFJX/zZySi9K3Ufr3qUZe28jxJoZUqiMJOi+SFh2zhiFDSjWqZIDkc0FtnaCC+rewW3MYXmg==}
+  puppeteer-core@23.5.0:
+    resolution: {integrity: sha512-+5ed+625GuQ2emRHqYec8khT9LP14FWzv8hYl0HiM6hnnlNzdVU9uDJIPHeCPLIWxq15ost9MeF8kBk4R3eiFw==}
     engines: {node: '>=18'}
 
-  puppeteer@23.4.1:
-    resolution: {integrity: sha512-+wWfWTkQ8L9IB/3OVGSUp37c0eQ5za/85KdX+LAq2wTZkMdocgYGMCs+/91e2f/RXIYzve4x/uGxN8zG2sj8+w==}
+  puppeteer@23.5.0:
+    resolution: {integrity: sha512-jnUx5M0YtFva7vXr39qqsxgB46JiwXJavuM1Hgsqbd9WWiGTEUt9klGpTxyHi+ZQf3NUgleDhNsnI10IK8Ebsg==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -8147,8 +8305,8 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@4.0.1:
-    resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==}
+  readdirp@4.0.2:
+    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
     engines: {node: '>= 14.16.0'}
 
   rechoir@0.6.2:
@@ -8196,8 +8354,8 @@ packages:
   regex-parser@2.3.0:
     resolution: {integrity: sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==}
 
-  regex@4.3.2:
-    resolution: {integrity: sha512-kK/AA3A9K6q2js89+VMymcboLOlF5lZRCYJv3gzszXFHBr6kO6qLGzbm+UIugBEV8SMMKCTR59txoY6ctRHYVw==}
+  regex@4.3.3:
+    resolution: {integrity: sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==}
 
   regexp-ast-analysis@0.7.1:
     resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
@@ -8207,20 +8365,23 @@ packages:
     resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
     hasBin: true
 
-  regexp.prototype.flags@1.5.2:
-    resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
+  regexp.prototype.flags@1.5.3:
+    resolution: {integrity: sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==}
     engines: {node: '>= 0.4'}
 
-  regexpu-core@5.3.2:
-    resolution: {integrity: sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==}
+  regexpu-core@6.1.1:
+    resolution: {integrity: sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==}
     engines: {node: '>=4'}
 
+  regjsgen@0.8.0:
+    resolution: {integrity: sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==}
+
   regjsparser@0.10.0:
     resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
     hasBin: true
 
-  regjsparser@0.9.1:
-    resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
+  regjsparser@0.11.1:
+    resolution: {integrity: sha512-1DHODs4B8p/mQHU9kr+jv8+wIC9mtG4eBHxWxIq5mhjE3D5oORhCc6deRKzTjs9DcfRFmj9BHSDguZklqCGFWQ==}
     hasBin: true
 
   relateurl@0.2.7:
@@ -8305,14 +8466,18 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
-  rollup@4.23.0:
-    resolution: {integrity: sha512-vXB4IT9/KLDrS2WRXmY22sVB2wTsTwkpxjB8Q3mnakTENcYw3FRmfdYDy/acNmls+lHmDazgrRjK/yQ6hQAtwA==}
+  rollup@4.24.0:
+    resolution: {integrity: sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
   rrweb-cssom@0.7.1:
     resolution: {integrity: sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==}
 
+  run-applescript@7.0.0:
+    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
+    engines: {node: '>=18'}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -8337,11 +8502,6 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.32.13:
-    resolution: {integrity: sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==}
-    engines: {node: '>=8.9.0'}
-    hasBin: true
-
   sass@1.78.0:
     resolution: {integrity: sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==}
     engines: {node: '>=14.0.0'}
@@ -8418,8 +8578,8 @@ packages:
       reflect-metadata: '*'
       sequelize: '>=6.20.1'
 
-  sequelize@6.37.3:
-    resolution: {integrity: sha512-V2FTqYpdZjPy3VQrZvjTPnOoLm0KudCRXfGWp48QwhyPPp2yW8z0p0sCYZd/em847Tl2dVxJJ1DR+hF+O77T7A==}
+  sequelize@6.37.4:
+    resolution: {integrity: sha512-+8B0p00EKmxJpwwruDI0drxh4wNSC0YB9pVhOajRzfMI+uIDi5V7rJPC8RTTkLmKUoAIatJZn6lW9gj6bmmYKQ==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       ibm_db: '*'
@@ -8515,8 +8675,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  shiki@1.21.0:
-    resolution: {integrity: sha512-apCH5BoWTrmHDPGgg3RF8+HAAbEL/CdbYr8rMw7eIrdhCkZHdVGat5mMNlRtd1erNG01VPMIKHNQ0Pj2HMAiog==}
+  shiki@1.21.1:
+    resolution: {integrity: sha512-jSOKRHyQJxGOW3kJflmwzHJbp/kjg6hP8LYuVbCPw5oyX+fSNNoCywvcCD3w9eHbj2rvNljt7YMa5BP5Xi+nHg==}
 
   side-channel@1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
@@ -8552,6 +8712,10 @@ packages:
     resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
     engines: {node: '>=10'}
 
+  sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -8848,6 +9012,9 @@ packages:
   svg-parser@2.0.4:
     resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
 
+  svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+
   svgo@3.3.2:
     resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
     engines: {node: '>=14.0.0'}
@@ -8995,11 +9162,11 @@ packages:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
 
-  tldts-core@6.1.48:
-    resolution: {integrity: sha512-3gD9iKn/n2UuFH1uilBviK9gvTNT6iYwdqrj1Vr5mh8FuelvpRNaYVH4pNYqUgOGU4aAdL9X35eLuuj0gRsx+A==}
+  tldts-core@6.1.50:
+    resolution: {integrity: sha512-na2EcZqmdA2iV9zHV7OHQDxxdciEpxrjbkp+aHmZgnZKHzoElLajP59np5/4+sare9fQBfixgvXKx8ev1d7ytw==}
 
-  tldts@6.1.48:
-    resolution: {integrity: sha512-SPbnh1zaSzi/OsmHb1vrPNnYuwJbdWjwo5TbBYYMlTtH3/1DSb41t8bcSxkwDmmbG2q6VLPVvQc7Yf23T+1EEw==}
+  tldts@6.1.50:
+    resolution: {integrity: sha512-q9GOap6q3KCsLMdOjXhWU5jVZ8/1dIib898JBRLsN+tBhENpBDcAVQbE0epADOjw11FhQQy9AcbqKGBQPUfTQA==}
     hasBin: true
 
   tmpl@1.0.5:
@@ -9030,6 +9197,10 @@ packages:
   toposort-class@1.0.1:
     resolution: {integrity: sha512-OsLcGGbYF3rMjPUf8oKktyvCiUxSbqMMS39m33MAjLTC1DVIH6x3WSt63/M77ihI09+Sdfk1AXvfhCEeUmC7mg==}
 
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
   touch@3.1.1:
     resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
     hasBin: true
@@ -9374,14 +9545,18 @@ packages:
       webpack-sources:
         optional: true
 
-  untyped@1.5.0:
-    resolution: {integrity: sha512-o2Vjmn2dal08BzCcINxSmWuAteReUUiXseii5VRhmxyLF0b21K0iKZQ9fMYK7RWspVkY+0saqaVQNq4roe3Efg==}
+  untyped@1.5.1:
+    resolution: {integrity: sha512-reBOnkJBFfBZ8pCKaeHgfZLcehXtM6UTxc+vqs1JvCps0c4amLNp3fhdGBZwYp+VLyoY9n3X5KOP7lCyWBUX9A==}
     hasBin: true
 
   upath@1.2.0:
     resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
     engines: {node: '>=4'}
 
+  upath@2.0.1:
+    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
+    engines: {node: '>=4'}
+
   update-browserslist-db@1.1.1:
     resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
@@ -9455,8 +9630,13 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite-node@2.1.1:
-    resolution: {integrity: sha512-N/mGckI1suG/5wQI35XeR9rsMsPqKXzq1CdUndzVstBj/HvyxxGctwnK6WX43NGt5L3Z5tcRf83g4TITKJhPrA==}
+  vite-hot-client@0.2.3:
+    resolution: {integrity: sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0
+
+  vite-node@2.1.2:
+    resolution: {integrity: sha512-HPcGNN5g/7I2OtPjLqgOtCRu/qhVvBxTUD3qzitmL0SrG1cWFzxzhMDWussxSbrRYWqnKf8P2jiNhPMSN+ymsQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
@@ -9468,6 +9648,16 @@ packages:
     peerDependencies:
       vite: '>=2.0.0'
 
+  vite-plugin-inspect@0.8.7:
+    resolution: {integrity: sha512-/XXou3MVc13A5O9/2Nd6xczjrUwt7ZyI9h8pTnUMkr5SshLcb0PJUOVq2V+XVkdeU4njsqAtmK87THZuO2coGA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': '*'
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
   vite-plugin-mkcert@1.17.6:
     resolution: {integrity: sha512-4JR1RN0HEg/w17eRQJ/Ve2pSa6KCVQcQO6yKtIaKQCFDyd63zGfXHWpygBkvvRSpqa0GcqNKf0fjUJ0HiJQXVQ==}
     engines: {node: '>=v16.7.0'}
@@ -9486,6 +9676,25 @@ packages:
       '@vite-pwa/assets-generator':
         optional: true
 
+  vite-plugin-vue-devtools@7.4.6:
+    resolution: {integrity: sha512-lOKur3qovCB3BQStL0qfHEoIusqya1ngfxfWuqn9DTa6h9rlw6+S3PV4geOP5YBGYQ4NW1hRX70OD8I+sYr1dA==}
+    engines: {node: '>=v14.21.3'}
+    peerDependencies:
+      vite: ^3.1.0 || ^4.0.0-0 || ^5.0.0-0
+
+  vite-plugin-vue-inspector@5.2.0:
+    resolution: {integrity: sha512-wWxyb9XAtaIvV/Lr7cqB1HIzmHZFVUJsTNm3yAxkS87dgh/Ky4qr2wDEWNxF23fdhVa3jQ8MZREpr4XyiuaRqA==}
+    peerDependencies:
+      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
+
+  vite-plugin-vuetify@2.0.4:
+    resolution: {integrity: sha512-A4cliYUoP/u4AWSRVRvAPKgpgR987Pss7LpFa7s1GvOe8WjgDq92Rt3eVXrvgxGCWvZsPKziVqfHHdCMqeDhfw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: '>=5'
+      vue: ^3.0.0
+      vuetify: ^3.0.0
+
   vite-plugin-webfont-dl@3.9.5:
     resolution: {integrity: sha512-PSVM7s1XurzMPYXgUHBpZOJYsuzRNq3DGIABdUyq/mNFan1n434+NbmGTK9f9+dIDVHpitXFiE3CmbAdDyDQMg==}
     peerDependencies:
@@ -9534,15 +9743,15 @@ packages:
       postcss:
         optional: true
 
-  vitest@2.1.1:
-    resolution: {integrity: sha512-97We7/VC0e9X5zBVkvt7SGQMGrRtn3KtySFQG5fpaMlS+l62eeXRQO633AYhSTC3z7IMebnPPNjGXVGNRFlxBA==}
+  vitest@2.1.2:
+    resolution: {integrity: sha512-veNjLizOMkRrJ6xxb+pvxN6/QAWg95mzcRjtmkepXdN87FNfxAss9RKe2far/G9cQpipfgP2taqg0KiWsquj8A==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 2.1.1
-      '@vitest/ui': 2.1.1
+      '@vitest/browser': 2.1.2
+      '@vitest/ui': 2.1.2
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -9584,10 +9793,19 @@ packages:
       '@vue/composition-api':
         optional: true
 
-  vue-dompurify-html@4.1.4:
-    resolution: {integrity: sha512-K0XDSZA4dmMMvAgW8yaCx1kAYQldmgXeHJaLPS0mlSKOu8B+onE06X4KfB5LGyX4jR3rlVosyWJczRBzR0sZ/g==}
+  vue-dompurify-html@5.1.0:
+    resolution: {integrity: sha512-616o2/PBdOLM2bwlRWLdzeEC9NerLkwiudqNgaIJ5vBQWXec+u7Kuzh+45DtQQrids67s4pHnTnJZLVfyPMxbA==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-draggable-plus@0.5.3:
+    resolution: {integrity: sha512-dwKDzZ8io3y7k2iuIwVwiGrdiq5C0S7Et7nt5Gz5KjpBS9MtZGFP+L4FJPWGSLYleOT8HmVuCXTZYjGet7wC0g==}
     peerDependencies:
-      vue: ^2.7.0 || ^3.0.0
+      '@types/sortablejs': ^1.15.0
+      '@vue/composition-api': '*'
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
 
   vue-echarts@7.0.3:
     resolution: {integrity: sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==}
@@ -9605,25 +9823,30 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-gtag@1.16.1:
-    resolution: {integrity: sha512-5vs0pSGxdqrfXqN1Qwt0ZFXG0iTYjRMu/saddc7QIC5yp+DKgjWQRpGYVa7Pq+KbThxwzzMfo0sGi7ISa6NowA==}
+  vue-gtag@2.0.1:
+    resolution: {integrity: sha512-aM4A58FVL0wV2ptYi+xzAjeg+pQVRyUcfBc5UkXAwQrR4t3WBhor50Izp2I+3Oo7+l+vWJ7u78DGcNzReb8S/A==}
     peerDependencies:
-      vue: ^2.0.0
+      vue: ^3.0.0
 
-  vue-i18n@8.28.2:
-    resolution: {integrity: sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==}
+  vue-i18n@9.14.1:
+    resolution: {integrity: sha512-xjxV0LYc1xQ8TbAVfIyZiOSS8qoU1R0YwV7V5I8I6Fd64+zvsTsdPgtylPsie3Vdt9wekeYhr+smKDeaK6RBuA==}
+    engines: {node: '>= 16'}
     peerDependencies:
-      vue: ^2
+      vue: ^3.0.0
 
-  vue-recaptcha@1.3.0:
-    resolution: {integrity: sha512-9Qf1niyHq4QbEUhsvdUkS8BoOyhYwpp8v+imUSj67ffDo9RQ6h8Ekq8EGnw/GKViXCwWalp7EEY/n/fOtU0FyA==}
+  vue-recaptcha@2.0.3:
+    resolution: {integrity: sha512-Rz0kLIETUgmOrp7CxFvaFE65DkhKdWu4pteWOTt2i+yTajTHPqtyOW6DqTg0BvALWTm+WUvWVV7k5XXFijQnBw==}
     peerDependencies:
-      vue: ^2.0.0
+      '@vue/composition-api': ^1.0.0-beta.1
+      vue: ^2.0.0 || ^3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
 
-  vue-router@3.6.5:
-    resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
+  vue-router@4.4.5:
+    resolution: {integrity: sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==}
     peerDependencies:
-      vue: ^2
+      vue: ^3.2.0
 
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
@@ -9634,25 +9857,29 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
-  vue@2.7.16:
-    resolution: {integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==}
-    deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
-
-  vue@3.5.10:
-    resolution: {integrity: sha512-Vy2kmJwHPlouC/tSnIgXVg03SG+9wSqT1xu1Vehc+ChsXsRd7jLkKgMltVEFOzUdBr3uFwBCG+41LJtfAcBRng==}
+  vue@3.5.11:
+    resolution: {integrity: sha512-/8Wurrd9J3lb72FTQS7gRMNQD4nztTtKPmuDuPuhqXmmpD6+skVjAeahNpVzsuky6Sy9gy7wn8UadqPtt9SQIg==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  vuedraggable@2.24.3:
-    resolution: {integrity: sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==}
-
-  vuetify@2.7.2:
-    resolution: {integrity: sha512-qr04ww7uzAPQbpk751x4fSdjsJ+zREzjQ/rBlcQGuWS6MIMFMXcXcwvp4+/tnGsULZxPMWfQ0kmZmg5Yc/XzgQ==}
+  vuetify@3.7.2:
+    resolution: {integrity: sha512-q0WTcRG977+a9Dqhb8TOaPm+Xmvj0oVhnBJhAdHWFSov3HhHTTxlH2nXP/GBTXZuuMHDbBeIWFuUR2/1Fx0PPw==}
+    engines: {node: ^12.20 || >=14.13}
     peerDependencies:
-      vue: ^2.6.4
+      typescript: '>=4.7'
+      vite-plugin-vuetify: '>=1.0.0'
+      vue: ^3.3.0
+      webpack-plugin-vuetify: '>=2.0.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vite-plugin-vuetify:
+        optional: true
+      webpack-plugin-vuetify:
+        optional: true
 
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
@@ -9798,8 +10025,8 @@ packages:
     resolution: {integrity: sha512-qxSTKswC6llEMZKgCQdaWgDuMJQnhuvF5f2Nk3SNXc4byfQ+voo2mX1Px9dkNOuR8p0KAjfPG29PuYUSIb+vSA==}
     engines: {node: '>= 12.0.0'}
 
-  winston@3.14.2:
-    resolution: {integrity: sha512-CO8cdpBB2yqzEf8v895L+GNKYJiEq8eKlHU38af3snQBQ+sdAIUepjMSguOIJC7ICbzm0ZI+Af2If4vIJrtmOg==}
+  winston@3.15.0:
+    resolution: {integrity: sha512-RhruH2Cj0bV0WgNL+lOfoUBI4DVfdUNjVnJGVovWZmrcKtrFTTRzgXYK2O9cymSGjrERCtaAeHwMNnUWXlwZow==}
     engines: {node: '>= 12.0.0'}
 
   wkx@0.5.0:
@@ -10124,46 +10351,46 @@ snapshots:
       ts-deepmerge: 6.2.1
       zod: 3.23.8
 
-  '@antfu/eslint-config@3.2.2(@typescript-eslint/utils@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(@vue/compiler-sfc@3.5.10)(eslint-plugin-format@0.1.2(eslint@9.11.1(jiti@2.0.0)))(eslint@9.11.1(jiti@2.0.0))(svelte@4.2.19)(typescript@5.6.2)(vitest@2.1.1(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1))':
+  '@antfu/eslint-config@3.2.2(@typescript-eslint/utils@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(@vue/compiler-sfc@3.5.11)(eslint-plugin-format@0.1.2(eslint@9.12.0(jiti@2.3.1)))(eslint@9.12.0(jiti@2.3.1))(svelte@4.2.19)(typescript@5.6.2)(vitest@2.1.2(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1))':
     dependencies:
       '@antfu/install-pkg': 0.4.1
       '@clack/prompts': 0.7.0
-      '@eslint-community/eslint-plugin-eslint-comments': 4.4.0(eslint@9.11.1(jiti@2.0.0))
-      '@stylistic/eslint-plugin': 2.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
-      '@typescript-eslint/eslint-plugin': 8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
-      '@typescript-eslint/parser': 8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
-      '@vitest/eslint-plugin': 1.1.4(@typescript-eslint/utils@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)(vitest@2.1.1(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1))
-      eslint: 9.11.1(jiti@2.0.0)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.11.1(jiti@2.0.0))
+      '@eslint-community/eslint-plugin-eslint-comments': 4.4.0(eslint@9.12.0(jiti@2.3.1))
+      '@stylistic/eslint-plugin': 2.9.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
+      '@typescript-eslint/eslint-plugin': 8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
+      '@typescript-eslint/parser': 8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
+      '@vitest/eslint-plugin': 1.1.6(@typescript-eslint/utils@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)(vitest@2.1.2(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1))
+      eslint: 9.12.0(jiti@2.3.1)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.12.0(jiti@2.3.1))
       eslint-flat-config-utils: 0.3.1
-      eslint-merge-processors: 0.1.0(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-antfu: 2.7.0(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-command: 0.2.6(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-import-x: 4.3.1(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
-      eslint-plugin-jsdoc: 50.3.1(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-jsonc: 2.16.0(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-markdown: 5.1.0(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-n: 17.10.3(eslint@9.11.1(jiti@2.0.0))
+      eslint-merge-processors: 0.1.0(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-antfu: 2.7.0(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-command: 0.2.6(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-import-x: 4.3.1(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
+      eslint-plugin-jsdoc: 50.3.1(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-jsonc: 2.16.0(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-markdown: 5.1.0(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-n: 17.10.3(eslint@9.12.0(jiti@2.3.1))
       eslint-plugin-no-only-tests: 3.3.0
-      eslint-plugin-perfectionist: 3.8.0(eslint@9.11.1(jiti@2.0.0))(svelte@4.2.19)(typescript@5.6.2)(vue-eslint-parser@9.4.3(eslint@9.11.1(jiti@2.0.0)))
-      eslint-plugin-regexp: 2.6.0(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-toml: 0.11.1(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-vue: 9.28.0(eslint@9.11.1(jiti@2.0.0))
-      eslint-plugin-yml: 1.14.0(eslint@9.11.1(jiti@2.0.0))
-      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.5.10)(eslint@9.11.1(jiti@2.0.0))
-      globals: 15.9.0
+      eslint-plugin-perfectionist: 3.8.0(eslint@9.12.0(jiti@2.3.1))(svelte@4.2.19)(typescript@5.6.2)(vue-eslint-parser@9.4.3(eslint@9.12.0(jiti@2.3.1)))
+      eslint-plugin-regexp: 2.6.0(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-toml: 0.11.1(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-vue: 9.28.0(eslint@9.12.0(jiti@2.3.1))
+      eslint-plugin-yml: 1.14.0(eslint@9.12.0(jiti@2.3.1))
+      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.5.11)(eslint@9.12.0(jiti@2.3.1))
+      globals: 15.10.0
       jsonc-eslint-parser: 2.4.0
       local-pkg: 0.5.0
       parse-gitignore: 2.0.0
       picocolors: 1.1.0
       toml-eslint-parser: 0.10.0
-      vue-eslint-parser: 9.4.3(eslint@9.11.1(jiti@2.0.0))
+      vue-eslint-parser: 9.4.3(eslint@9.12.0(jiti@2.3.1))
       yaml-eslint-parser: 1.2.3
       yargs: 17.7.2
     optionalDependencies:
-      eslint-plugin-format: 0.1.2(eslint@9.11.1(jiti@2.0.0))
+      eslint-plugin-format: 0.1.2(eslint@9.12.0(jiti@2.3.1))
     transitivePeerDependencies:
       - '@typescript-eslint/utils'
       - '@vue/compiler-sfc'
@@ -10174,7 +10401,7 @@ snapshots:
 
   '@antfu/install-pkg@0.4.1':
     dependencies:
-      package-manager-detector: 0.2.0
+      package-manager-detector: 0.2.1
       tinyexec: 0.3.0
 
   '@antfu/utils@0.7.10': {}
@@ -10205,7 +10432,7 @@ snapshots:
       '@azure/abort-controller': 2.1.2
       '@azure/core-auth': 1.8.0
       '@azure/core-rest-pipeline': 1.17.0
-      '@azure/core-tracing': 1.1.2
+      '@azure/core-tracing': 1.2.0
       '@azure/core-util': 1.10.0
       '@azure/logger': 1.1.4
       tslib: 2.7.0
@@ -10235,7 +10462,7 @@ snapshots:
     dependencies:
       '@azure/abort-controller': 2.1.2
       '@azure/core-auth': 1.8.0
-      '@azure/core-tracing': 1.1.2
+      '@azure/core-tracing': 1.2.0
       '@azure/core-util': 1.10.0
       '@azure/logger': 1.1.4
       http-proxy-agent: 7.0.2
@@ -10244,7 +10471,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@azure/core-tracing@1.1.2':
+  '@azure/core-tracing@1.2.0':
     dependencies:
       tslib: 2.7.0
 
@@ -10259,11 +10486,11 @@ snapshots:
       '@azure/core-auth': 1.8.0
       '@azure/core-client': 1.9.2
       '@azure/core-rest-pipeline': 1.17.0
-      '@azure/core-tracing': 1.1.2
+      '@azure/core-tracing': 1.2.0
       '@azure/core-util': 1.10.0
       '@azure/logger': 1.1.4
-      '@azure/msal-browser': 3.24.0
-      '@azure/msal-node': 2.14.0
+      '@azure/msal-browser': 3.25.0
+      '@azure/msal-node': 2.15.0
       events: 3.3.0
       jws: 4.0.0
       open: 8.4.2
@@ -10281,7 +10508,7 @@ snapshots:
       '@azure/core-lro': 2.7.2
       '@azure/core-paging': 1.6.2
       '@azure/core-rest-pipeline': 1.17.0
-      '@azure/core-tracing': 1.1.2
+      '@azure/core-tracing': 1.2.0
       '@azure/core-util': 1.10.0
       '@azure/logger': 1.1.4
       tslib: 2.7.0
@@ -10292,37 +10519,37 @@ snapshots:
     dependencies:
       tslib: 2.7.0
 
-  '@azure/msal-browser@3.24.0':
+  '@azure/msal-browser@3.25.0':
     dependencies:
       '@azure/msal-common': 14.15.0
 
   '@azure/msal-common@14.15.0': {}
 
-  '@azure/msal-node@2.14.0':
+  '@azure/msal-node@2.15.0':
     dependencies:
       '@azure/msal-common': 14.15.0
       jsonwebtoken: 9.0.2
       uuid: 8.3.2
 
-  '@babel/code-frame@7.24.7':
+  '@babel/code-frame@7.25.7':
     dependencies:
-      '@babel/highlight': 7.24.7
+      '@babel/highlight': 7.25.7
       picocolors: 1.1.0
 
-  '@babel/compat-data@7.25.4': {}
+  '@babel/compat-data@7.25.7': {}
 
-  '@babel/core@7.25.2':
+  '@babel/core@7.25.7':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.25.6
-      '@babel/helper-compilation-targets': 7.25.2
-      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
-      '@babel/helpers': 7.25.6
-      '@babel/parser': 7.25.6
-      '@babel/template': 7.25.0
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/code-frame': 7.25.7
+      '@babel/generator': 7.25.7
+      '@babel/helper-compilation-targets': 7.25.7
+      '@babel/helper-module-transforms': 7.25.7(@babel/core@7.25.7)
+      '@babel/helpers': 7.25.7
+      '@babel/parser': 7.25.7
+      '@babel/template': 7.25.7
+      '@babel/traverse': 7.25.7
+      '@babel/types': 7.25.7
       convert-source-map: 2.0.0
       debug: 4.3.7(supports-color@5.5.0)
       gensync: 1.0.0-beta.2
@@ -10331,760 +10558,783 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.25.6':
+  '@babel/generator@7.25.7':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.25.7
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 2.5.2
+      jsesc: 3.0.2
 
-  '@babel/helper-annotate-as-pure@7.24.7':
+  '@babel/helper-annotate-as-pure@7.25.7':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.25.7
 
-  '@babel/helper-builder-binary-assignment-operator-visitor@7.24.7':
+  '@babel/helper-builder-binary-assignment-operator-visitor@7.25.7':
     dependencies:
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/traverse': 7.25.7
+      '@babel/types': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-compilation-targets@7.25.2':
+  '@babel/helper-compilation-targets@7.25.7':
     dependencies:
-      '@babel/compat-data': 7.25.4
-      '@babel/helper-validator-option': 7.24.8
+      '@babel/compat-data': 7.25.7
+      '@babel/helper-validator-option': 7.25.7
       browserslist: 4.24.0
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.25.4(@babel/core@7.25.2)':
+  '@babel/helper-create-class-features-plugin@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-member-expression-to-functions': 7.24.8
-      '@babel/helper-optimise-call-expression': 7.24.7
-      '@babel/helper-replace-supers': 7.25.0(@babel/core@7.25.2)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-annotate-as-pure': 7.25.7
+      '@babel/helper-member-expression-to-functions': 7.25.7
+      '@babel/helper-optimise-call-expression': 7.25.7
+      '@babel/helper-replace-supers': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.7
+      '@babel/traverse': 7.25.7
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.25.2(@babel/core@7.25.2)':
+  '@babel/helper-create-regexp-features-plugin@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-annotate-as-pure': 7.24.7
-      regexpu-core: 5.3.2
+      '@babel/core': 7.25.7
+      '@babel/helper-annotate-as-pure': 7.25.7
+      regexpu-core: 6.1.1
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.2(@babel/core@7.25.2)':
+  '@babel/helper-define-polyfill-provider@0.6.2(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-compilation-targets': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-compilation-targets': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
       debug: 4.3.7(supports-color@5.5.0)
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-member-expression-to-functions@7.24.8':
+  '@babel/helper-member-expression-to-functions@7.25.7':
     dependencies:
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/traverse': 7.25.7
+      '@babel/types': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-imports@7.24.7':
+  '@babel/helper-module-imports@7.25.7':
     dependencies:
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/traverse': 7.25.7
+      '@babel/types': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)':
+  '@babel/helper-module-transforms@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-simple-access': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-module-imports': 7.25.7
+      '@babel/helper-simple-access': 7.25.7
+      '@babel/helper-validator-identifier': 7.25.7
+      '@babel/traverse': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-optimise-call-expression@7.24.7':
+  '@babel/helper-optimise-call-expression@7.25.7':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.25.7
 
-  '@babel/helper-plugin-utils@7.24.8': {}
+  '@babel/helper-plugin-utils@7.25.7': {}
 
-  '@babel/helper-remap-async-to-generator@7.25.0(@babel/core@7.25.2)':
+  '@babel/helper-remap-async-to-generator@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-wrap-function': 7.25.0
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-annotate-as-pure': 7.25.7
+      '@babel/helper-wrap-function': 7.25.7
+      '@babel/traverse': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-replace-supers@7.25.0(@babel/core@7.25.2)':
+  '@babel/helper-replace-supers@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-member-expression-to-functions': 7.24.8
-      '@babel/helper-optimise-call-expression': 7.24.7
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-member-expression-to-functions': 7.25.7
+      '@babel/helper-optimise-call-expression': 7.25.7
+      '@babel/traverse': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-simple-access@7.24.7':
+  '@babel/helper-simple-access@7.25.7':
     dependencies:
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/traverse': 7.25.7
+      '@babel/types': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.24.7':
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.7':
     dependencies:
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/traverse': 7.25.7
+      '@babel/types': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-string-parser@7.24.8': {}
+  '@babel/helper-string-parser@7.25.7': {}
 
-  '@babel/helper-validator-identifier@7.24.7': {}
+  '@babel/helper-validator-identifier@7.25.7': {}
 
-  '@babel/helper-validator-option@7.24.8': {}
+  '@babel/helper-validator-option@7.25.7': {}
 
-  '@babel/helper-wrap-function@7.25.0':
+  '@babel/helper-wrap-function@7.25.7':
     dependencies:
-      '@babel/template': 7.25.0
-      '@babel/traverse': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/template': 7.25.7
+      '@babel/traverse': 7.25.7
+      '@babel/types': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helpers@7.25.6':
+  '@babel/helpers@7.25.7':
     dependencies:
-      '@babel/template': 7.25.0
-      '@babel/types': 7.25.6
+      '@babel/template': 7.25.7
+      '@babel/types': 7.25.7
 
-  '@babel/highlight@7.24.7':
+  '@babel/highlight@7.25.7':
     dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
+      '@babel/helper-validator-identifier': 7.25.7
       chalk: 2.4.2
       js-tokens: 4.0.0
       picocolors: 1.1.0
 
-  '@babel/parser@7.25.6':
+  '@babel/parser@7.25.7':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.25.7
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.3(@babel/core@7.25.2)':
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/traverse': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.0(@babel/core@7.25.2)':
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.0(@babel/core@7.25.2)':
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/plugin-transform-optional-chaining': 7.24.8(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.7
+      '@babel/plugin-transform-optional-chaining': 7.25.7(@babel/core@7.25.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.0(@babel/core@7.25.2)':
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/traverse': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.25.2)':
+  '@babel/plugin-proposal-decorators@7.25.7(@babel/core@7.25.7)':
+    dependencies:
+      '@babel/core': 7.25.7
+      '@babel/helper-create-class-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-decorators': 7.25.7(@babel/core@7.25.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.25.7)':
+    dependencies:
+      '@babel/core': 7.25.7
+
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-decorators@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-import-assertions@7.25.6(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-import-assertions@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-import-attributes@7.25.6(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-import-attributes@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-jsx@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-typescript@7.25.4(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-typescript@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.25.2)':
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-regexp-features-plugin': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-create-regexp-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-arrow-functions@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-arrow-functions@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-async-generator-functions@7.25.4(@babel/core@7.25.2)':
+  '@babel/plugin-transform-async-generator-functions@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-remap-async-to-generator': 7.25.0(@babel/core@7.25.2)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.2)
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-remap-async-to-generator': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.7)
+      '@babel/traverse': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-to-generator@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-async-to-generator@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-remap-async-to-generator': 7.25.0(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-module-imports': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-remap-async-to-generator': 7.25.7(@babel/core@7.25.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-block-scoped-functions@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-block-scoped-functions@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-block-scoping@7.25.0(@babel/core@7.25.2)':
+  '@babel/plugin-transform-block-scoping@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-class-properties@7.25.4(@babel/core@7.25.2)':
+  '@babel/plugin-transform-class-properties@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-class-features-plugin': 7.25.4(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-create-class-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-static-block@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-class-static-block@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-class-features-plugin': 7.25.4(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-create-class-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.25.4(@babel/core@7.25.2)':
+  '@babel/plugin-transform-classes@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-compilation-targets': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-replace-supers': 7.25.0(@babel/core@7.25.2)
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-annotate-as-pure': 7.25.7
+      '@babel/helper-compilation-targets': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-replace-supers': 7.25.7(@babel/core@7.25.7)
+      '@babel/traverse': 7.25.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-computed-properties@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-computed-properties@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/template': 7.25.0
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/template': 7.25.7
 
-  '@babel/plugin-transform-destructuring@7.24.8(@babel/core@7.25.2)':
+  '@babel/plugin-transform-destructuring@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-dotall-regex@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-dotall-regex@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-regexp-features-plugin': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-create-regexp-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-duplicate-keys@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-duplicate-keys@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.0(@babel/core@7.25.2)':
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-regexp-features-plugin': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-create-regexp-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-dynamic-import@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-dynamic-import@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.25.7)
 
-  '@babel/plugin-transform-exponentiation-operator@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-exponentiation-operator@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-builder-binary-assignment-operator-visitor': 7.24.7
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-builder-binary-assignment-operator-visitor': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-export-namespace-from@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-export-namespace-from@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.25.7)
 
-  '@babel/plugin-transform-for-of@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-for-of@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-function-name@7.25.1(@babel/core@7.25.2)':
+  '@babel/plugin-transform-function-name@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-compilation-targets': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-compilation-targets': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/traverse': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-json-strings@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-json-strings@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.7)
 
-  '@babel/plugin-transform-literals@7.25.2(@babel/core@7.25.2)':
+  '@babel/plugin-transform-literals@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-logical-assignment-operators@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-logical-assignment-operators@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.7)
 
-  '@babel/plugin-transform-member-expression-literals@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-member-expression-literals@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-modules-amd@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-modules-amd@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-module-transforms': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-commonjs@7.24.8(@babel/core@7.25.2)':
+  '@babel/plugin-transform-modules-commonjs@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-simple-access': 7.24.7
+      '@babel/core': 7.25.7
+      '@babel/helper-module-transforms': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-simple-access': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-systemjs@7.25.0(@babel/core@7.25.2)':
+  '@babel/plugin-transform-modules-systemjs@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-validator-identifier': 7.24.7
-      '@babel/traverse': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-module-transforms': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-validator-identifier': 7.25.7
+      '@babel/traverse': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-umd@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-modules-umd@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-module-transforms': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-named-capturing-groups-regex@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-regexp-features-plugin': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-create-regexp-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-new-target@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-new-target@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.7)
 
-  '@babel/plugin-transform-numeric-separator@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-numeric-separator@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.7)
 
-  '@babel/plugin-transform-object-rest-spread@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-object-rest-spread@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-compilation-targets': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-compilation-targets': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-transform-parameters': 7.25.7(@babel/core@7.25.7)
 
-  '@babel/plugin-transform-object-super@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-object-super@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-replace-supers': 7.25.0(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-replace-supers': 7.25.7(@babel/core@7.25.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-catch-binding@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-optional-catch-binding@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.7)
 
-  '@babel/plugin-transform-optional-chaining@7.24.8(@babel/core@7.25.2)':
+  '@babel/plugin-transform-optional-chaining@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.7
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-parameters@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-parameters@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-private-methods@7.25.4(@babel/core@7.25.2)':
+  '@babel/plugin-transform-private-methods@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-class-features-plugin': 7.25.4(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-create-class-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-private-property-in-object@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.25.4(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-annotate-as-pure': 7.25.7
+      '@babel/helper-create-class-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-property-literals@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-property-literals@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-regenerator@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-regenerator@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
       regenerator-transform: 0.15.2
 
-  '@babel/plugin-transform-reserved-words@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-reserved-words@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-shorthand-properties@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-shorthand-properties@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-spread@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-spread@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-sticky-regex@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-sticky-regex@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-template-literals@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-template-literals@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-typeof-symbol@7.24.8(@babel/core@7.25.2)':
+  '@babel/plugin-transform-typeof-symbol@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-unicode-escapes@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-typescript@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-annotate-as-pure': 7.25.7
+      '@babel/helper-create-class-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.7
+      '@babel/plugin-syntax-typescript': 7.25.7(@babel/core@7.25.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-unicode-escapes@7.25.7(@babel/core@7.25.7)':
+    dependencies:
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-unicode-property-regex@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-unicode-property-regex@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-regexp-features-plugin': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-create-regexp-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-unicode-regex@7.24.7(@babel/core@7.25.2)':
+  '@babel/plugin-transform-unicode-regex@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-regexp-features-plugin': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-create-regexp-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
 
-  '@babel/plugin-transform-unicode-sets-regex@7.25.4(@babel/core@7.25.2)':
+  '@babel/plugin-transform-unicode-sets-regex@7.25.7(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-create-regexp-features-plugin': 7.25.2(@babel/core@7.25.2)
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/core': 7.25.7
+      '@babel/helper-create-regexp-features-plugin': 7.25.7(@babel/core@7.25.7)
+      '@babel/helper-plugin-utils': 7.25.7
 
   '@babel/polyfill@7.12.1':
     dependencies:
       core-js: 2.6.12
       regenerator-runtime: 0.13.11
 
-  '@babel/preset-env@7.25.4(@babel/core@7.25.2)':
-    dependencies:
-      '@babel/compat-data': 7.25.4
-      '@babel/core': 7.25.2
-      '@babel/helper-compilation-targets': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/helper-validator-option': 7.24.8
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.25.3(@babel/core@7.25.2)
-      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.25.0(@babel/core@7.25.2)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.25.0(@babel/core@7.25.2)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.25.0(@babel/core@7.25.2)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.25.2)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.2)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.2)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-import-assertions': 7.25.6(@babel/core@7.25.2)
-      '@babel/plugin-syntax-import-attributes': 7.25.6(@babel/core@7.25.2)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.2)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.2)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.25.2)
-      '@babel/plugin-transform-arrow-functions': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-async-generator-functions': 7.25.4(@babel/core@7.25.2)
-      '@babel/plugin-transform-async-to-generator': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-block-scoped-functions': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-block-scoping': 7.25.0(@babel/core@7.25.2)
-      '@babel/plugin-transform-class-properties': 7.25.4(@babel/core@7.25.2)
-      '@babel/plugin-transform-class-static-block': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-classes': 7.25.4(@babel/core@7.25.2)
-      '@babel/plugin-transform-computed-properties': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-destructuring': 7.24.8(@babel/core@7.25.2)
-      '@babel/plugin-transform-dotall-regex': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-duplicate-keys': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.25.0(@babel/core@7.25.2)
-      '@babel/plugin-transform-dynamic-import': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-exponentiation-operator': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-export-namespace-from': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-for-of': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-function-name': 7.25.1(@babel/core@7.25.2)
-      '@babel/plugin-transform-json-strings': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-literals': 7.25.2(@babel/core@7.25.2)
-      '@babel/plugin-transform-logical-assignment-operators': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-member-expression-literals': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-modules-amd': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2)
-      '@babel/plugin-transform-modules-systemjs': 7.25.0(@babel/core@7.25.2)
-      '@babel/plugin-transform-modules-umd': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-new-target': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-numeric-separator': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-object-rest-spread': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-object-super': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-optional-catch-binding': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-optional-chaining': 7.24.8(@babel/core@7.25.2)
-      '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-private-methods': 7.25.4(@babel/core@7.25.2)
-      '@babel/plugin-transform-private-property-in-object': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-property-literals': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-regenerator': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-reserved-words': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-shorthand-properties': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-spread': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-sticky-regex': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-template-literals': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-typeof-symbol': 7.24.8(@babel/core@7.25.2)
-      '@babel/plugin-transform-unicode-escapes': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-unicode-property-regex': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-unicode-regex': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-transform-unicode-sets-regex': 7.25.4(@babel/core@7.25.2)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.25.2)
-      babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.25.2)
-      babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.25.2)
-      babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.25.2)
+  '@babel/preset-env@7.25.7(@babel/core@7.25.7)':
+    dependencies:
+      '@babel/compat-data': 7.25.7
+      '@babel/core': 7.25.7
+      '@babel/helper-compilation-targets': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/helper-validator-option': 7.25.7
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.25.7)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.7)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.7)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.7)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-import-assertions': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-syntax-import-attributes': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.7)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.7)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.7)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.7)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.7)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.25.7)
+      '@babel/plugin-transform-arrow-functions': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-async-generator-functions': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-async-to-generator': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-block-scoped-functions': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-block-scoping': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-class-properties': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-class-static-block': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-classes': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-computed-properties': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-destructuring': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-dotall-regex': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-duplicate-keys': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-dynamic-import': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-exponentiation-operator': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-export-namespace-from': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-for-of': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-function-name': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-json-strings': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-literals': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-logical-assignment-operators': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-member-expression-literals': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-modules-amd': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-modules-commonjs': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-modules-systemjs': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-modules-umd': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-new-target': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-numeric-separator': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-object-rest-spread': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-object-super': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-optional-catch-binding': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-optional-chaining': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-parameters': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-private-methods': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-private-property-in-object': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-property-literals': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-regenerator': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-reserved-words': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-shorthand-properties': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-spread': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-sticky-regex': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-template-literals': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-typeof-symbol': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-unicode-escapes': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-unicode-property-regex': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-unicode-regex': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-transform-unicode-sets-regex': 7.25.7(@babel/core@7.25.7)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.25.7)
+      babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.25.7)
+      babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.25.7)
+      babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.25.7)
       core-js-compat: 3.38.1
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.25.2)':
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.25.7)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-plugin-utils': 7.24.8
-      '@babel/types': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/types': 7.25.7
       esutils: 2.0.3
 
-  '@babel/regjsgen@0.8.0': {}
-
-  '@babel/runtime@7.25.6':
+  '@babel/runtime@7.25.7':
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/standalone@7.25.6': {}
+  '@babel/standalone@7.25.7': {}
 
-  '@babel/template@7.25.0':
+  '@babel/template@7.25.7':
     dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/parser': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/code-frame': 7.25.7
+      '@babel/parser': 7.25.7
+      '@babel/types': 7.25.7
 
-  '@babel/traverse@7.25.6':
+  '@babel/traverse@7.25.7':
     dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.25.6
-      '@babel/parser': 7.25.6
-      '@babel/template': 7.25.0
-      '@babel/types': 7.25.6
+      '@babel/code-frame': 7.25.7
+      '@babel/generator': 7.25.7
+      '@babel/parser': 7.25.7
+      '@babel/template': 7.25.7
+      '@babel/types': 7.25.7
       debug: 4.3.7(supports-color@5.5.0)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.25.6':
+  '@babel/types@7.25.7':
     dependencies:
-      '@babel/helper-string-parser': 7.24.8
-      '@babel/helper-validator-identifier': 7.24.7
+      '@babel/helper-string-parser': 7.25.7
+      '@babel/helper-validator-identifier': 7.25.7
       to-fast-properties: 2.0.0
 
   '@bcoe/v8-coverage@0.2.3': {}
@@ -11102,23 +11352,28 @@ snapshots:
       picocolors: 1.1.0
       sisteransi: 1.0.5
 
-  '@coddicat/vue-pinch-scroll-zoom@3.3.4(vue@2.7.16)':
+  '@coddicat/vue-pinch-scroll-zoom@4.7.1(typescript@5.6.2)':
     dependencies:
-      vue: 2.7.16
+      '@types/lodash': 4.17.10
+      lodash: 4.17.21
+      sass: 1.79.4
+      vue: 3.5.11(typescript@5.6.2)
+    transitivePeerDependencies:
+      - typescript
 
-  '@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.1)':
+  '@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)':
     dependencies:
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
-      '@lezer/common': 1.2.1
+      '@lezer/common': 1.2.2
 
   '@codemirror/commands@6.6.2':
     dependencies:
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
-      '@lezer/common': 1.2.1
+      '@lezer/common': 1.2.2
 
   '@codemirror/lang-json@6.0.1':
     dependencies:
@@ -11129,7 +11384,7 @@ snapshots:
     dependencies:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
-      '@lezer/common': 1.2.1
+      '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.2
       style-mod: 4.1.2
@@ -11181,7 +11436,7 @@ snapshots:
   '@docsearch/js@3.6.2(@algolia/client-search@4.24.0)(search-insights@2.13.0)':
     dependencies:
       '@docsearch/react': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.13.0)
-      preact: 10.24.1
+      preact: 10.24.2
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -11213,7 +11468,7 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  '@emnapi/runtime@1.2.0':
+  '@emnapi/runtime@1.3.0':
     dependencies:
       tslib: 2.7.0
     optional: true
@@ -11376,20 +11631,22 @@ snapshots:
   '@esbuild/win32-x64@0.23.1':
     optional: true
 
-  '@eslint-community/eslint-plugin-eslint-comments@4.4.0(eslint@9.11.1(jiti@2.0.0))':
+  '@eslint-community/eslint-plugin-eslint-comments@4.4.0(eslint@9.12.0(jiti@2.3.1))':
     dependencies:
       escape-string-regexp: 4.0.0
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       ignore: 5.3.2
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.11.1(jiti@2.0.0))':
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.12.0(jiti@2.3.1))':
     dependencies:
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.11.1': {}
 
-  '@eslint/compat@1.1.1': {}
+  '@eslint/compat@1.2.0(eslint@9.12.0(jiti@2.3.1))':
+    optionalDependencies:
+      eslint: 9.12.0(jiti@2.3.1)
 
   '@eslint/config-array@0.18.0':
     dependencies:
@@ -11415,7 +11672,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.11.1': {}
+  '@eslint/js@9.12.0': {}
 
   '@eslint/object-schema@2.1.4': {}
 
@@ -11460,15 +11717,22 @@ snapshots:
     dependencies:
       '@fortawesome/fontawesome-common-types': 6.6.0
 
-  '@hcaptcha/vue-hcaptcha@1.3.0(vue@2.7.16)':
+  '@hcaptcha/vue3-hcaptcha@1.3.0(vue@3.5.11(typescript@5.6.2))':
     dependencies:
-      vue: 2.7.16
+      vue: 3.5.11(typescript@5.6.2)
 
   '@hexagon/base64@1.1.28': {}
 
+  '@humanfs/core@0.19.0': {}
+
+  '@humanfs/node@0.16.5':
+    dependencies:
+      '@humanfs/core': 0.19.0
+      '@humanwhocodes/retry': 0.3.1
+
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/retry@0.3.0': {}
+  '@humanwhocodes/retry@0.3.1': {}
 
   '@hutson/parse-repository-url@5.0.0': {}
 
@@ -11560,7 +11824,7 @@ snapshots:
 
   '@img/sharp-wasm32@0.33.5':
     dependencies:
-      '@emnapi/runtime': 1.2.0
+      '@emnapi/runtime': 1.3.0
     optional: true
 
   '@img/sharp-win32-ia32@0.33.5':
@@ -11569,6 +11833,74 @@ snapshots:
   '@img/sharp-win32-x64@0.33.5':
     optional: true
 
+  '@intlify/bundle-utils@8.0.0(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))':
+    dependencies:
+      '@intlify/message-compiler': 9.14.1
+      '@intlify/shared': 9.14.1
+      acorn: 8.12.1
+      escodegen: 2.1.0
+      estree-walker: 2.0.2
+      jsonc-eslint-parser: 2.4.0
+      mlly: 1.7.1
+      source-map-js: 1.2.1
+      yaml-eslint-parser: 1.2.3
+    optionalDependencies:
+      vue-i18n: 9.14.1(vue@3.5.11(typescript@5.6.2))
+
+  '@intlify/core-base@9.14.1':
+    dependencies:
+      '@intlify/message-compiler': 9.14.1
+      '@intlify/shared': 9.14.1
+
+  '@intlify/message-compiler@9.14.1':
+    dependencies:
+      '@intlify/shared': 9.14.1
+      source-map-js: 1.2.1
+
+  '@intlify/shared@9.14.1': {}
+
+  '@intlify/unplugin-vue-i18n@4.0.0(rollup@2.79.2)(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))(webpack-sources@3.2.3)':
+    dependencies:
+      '@intlify/bundle-utils': 8.0.0(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))
+      '@intlify/shared': 9.14.1
+      '@rollup/pluginutils': 5.1.2(rollup@2.79.2)
+      '@vue/compiler-sfc': 3.5.11
+      debug: 4.3.7(supports-color@5.5.0)
+      fast-glob: 3.3.2
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      pathe: 1.1.2
+      picocolors: 1.1.0
+      source-map-js: 1.2.1
+      unplugin: 1.14.1(webpack-sources@3.2.3)
+    optionalDependencies:
+      vue-i18n: 9.14.1(vue@3.5.11(typescript@5.6.2))
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - webpack-sources
+
+  '@intlify/unplugin-vue-i18n@4.0.0(rollup@4.24.0)(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))(webpack-sources@3.2.3)':
+    dependencies:
+      '@intlify/bundle-utils': 8.0.0(vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)))
+      '@intlify/shared': 9.14.1
+      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
+      '@vue/compiler-sfc': 3.5.11
+      debug: 4.3.7(supports-color@5.5.0)
+      fast-glob: 3.3.2
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      pathe: 1.1.2
+      picocolors: 1.1.0
+      source-map-js: 1.2.1
+      unplugin: 1.14.1(webpack-sources@3.2.3)
+    optionalDependencies:
+      vue-i18n: 9.14.1(vue@3.5.11(typescript@5.6.2))
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - webpack-sources
+
   '@ioredis/commands@1.2.0': {}
 
   '@isaacs/cliui@8.0.2':
@@ -11725,7 +12057,7 @@ snapshots:
 
   '@jest/transform@29.7.0':
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.25.7
       '@jest/types': 29.6.3
       '@jridgewell/trace-mapping': 0.3.25
       babel-plugin-istanbul: 6.1.1
@@ -11804,21 +12136,21 @@ snapshots:
 
   '@levischuck/tiny-cbor@0.2.2': {}
 
-  '@lezer/common@1.2.1': {}
+  '@lezer/common@1.2.2': {}
 
   '@lezer/highlight@1.2.1':
     dependencies:
-      '@lezer/common': 1.2.1
+      '@lezer/common': 1.2.2
 
   '@lezer/json@1.0.2':
     dependencies:
-      '@lezer/common': 1.2.1
+      '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.2
 
   '@lezer/lr@1.4.2':
     dependencies:
-      '@lezer/common': 1.2.1
+      '@lezer/common': 1.2.2
 
   '@mongodb-js/saslprep@1.1.9':
     dependencies:
@@ -11877,16 +12209,16 @@ snapshots:
       ufo: 1.5.4
       unctx: 2.3.1(webpack-sources@3.2.3)
       unimport: 3.13.1(rollup@2.79.2)(webpack-sources@3.2.3)
-      untyped: 1.5.0
+      untyped: 1.5.1
     transitivePeerDependencies:
       - magicast
       - rollup
       - supports-color
       - webpack-sources
 
-  '@nuxt/kit@3.13.2(rollup@4.23.0)(webpack-sources@3.2.3)':
+  '@nuxt/kit@3.13.2(rollup@4.24.0)(webpack-sources@3.2.3)':
     dependencies:
-      '@nuxt/schema': 3.13.2(rollup@4.23.0)(webpack-sources@3.2.3)
+      '@nuxt/schema': 3.13.2(rollup@4.24.0)(webpack-sources@3.2.3)
       c12: 1.11.2
       consola: 3.2.3
       defu: 6.1.4
@@ -11904,8 +12236,8 @@ snapshots:
       semver: 7.6.3
       ufo: 1.5.4
       unctx: 2.3.1(webpack-sources@3.2.3)
-      unimport: 3.13.1(rollup@4.23.0)(webpack-sources@3.2.3)
-      untyped: 1.5.0
+      unimport: 3.13.1(rollup@4.24.0)(webpack-sources@3.2.3)
+      untyped: 1.5.1
     transitivePeerDependencies:
       - magicast
       - rollup
@@ -11925,13 +12257,13 @@ snapshots:
       ufo: 1.5.4
       uncrypto: 0.1.3
       unimport: 3.13.1(rollup@2.79.2)(webpack-sources@3.2.3)
-      untyped: 1.5.0
+      untyped: 1.5.1
     transitivePeerDependencies:
       - rollup
       - supports-color
       - webpack-sources
 
-  '@nuxt/schema@3.13.2(rollup@4.23.0)(webpack-sources@3.2.3)':
+  '@nuxt/schema@3.13.2(rollup@4.24.0)(webpack-sources@3.2.3)':
     dependencies:
       compatx: 0.1.8
       consola: 3.2.3
@@ -11943,8 +12275,8 @@ snapshots:
       std-env: 3.7.0
       ufo: 1.5.4
       uncrypto: 0.1.3
-      unimport: 3.13.1(rollup@4.23.0)(webpack-sources@3.2.3)
-      untyped: 1.5.0
+      unimport: 3.13.1(rollup@4.24.0)(webpack-sources@3.2.3)
+      untyped: 1.5.1
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -11958,19 +12290,19 @@ snapshots:
       '@octokit/graphql': 7.1.0
       '@octokit/request': 8.4.0
       '@octokit/request-error': 5.1.0
-      '@octokit/types': 13.6.0
+      '@octokit/types': 13.6.1
       before-after-hook: 2.2.3
       universal-user-agent: 6.0.1
 
   '@octokit/endpoint@9.0.5':
     dependencies:
-      '@octokit/types': 13.6.0
+      '@octokit/types': 13.6.1
       universal-user-agent: 6.0.1
 
   '@octokit/graphql@7.1.0':
     dependencies:
       '@octokit/request': 8.4.0
-      '@octokit/types': 13.6.0
+      '@octokit/types': 13.6.1
       universal-user-agent: 6.0.1
 
   '@octokit/openapi-types@22.2.0': {}
@@ -11978,7 +12310,7 @@ snapshots:
   '@octokit/plugin-paginate-rest@11.3.1(@octokit/core@5.2.0)':
     dependencies:
       '@octokit/core': 5.2.0
-      '@octokit/types': 13.6.0
+      '@octokit/types': 13.6.1
 
   '@octokit/plugin-request-log@4.0.1(@octokit/core@5.2.0)':
     dependencies:
@@ -11987,11 +12319,11 @@ snapshots:
   '@octokit/plugin-rest-endpoint-methods@13.2.2(@octokit/core@5.2.0)':
     dependencies:
       '@octokit/core': 5.2.0
-      '@octokit/types': 13.6.0
+      '@octokit/types': 13.6.1
 
   '@octokit/request-error@5.1.0':
     dependencies:
-      '@octokit/types': 13.6.0
+      '@octokit/types': 13.6.1
       deprecation: 2.3.1
       once: 1.4.0
 
@@ -11999,7 +12331,7 @@ snapshots:
     dependencies:
       '@octokit/endpoint': 9.0.5
       '@octokit/request-error': 5.1.0
-      '@octokit/types': 13.6.0
+      '@octokit/types': 13.6.1
       universal-user-agent: 6.0.1
 
   '@octokit/rest@20.1.1':
@@ -12009,7 +12341,7 @@ snapshots:
       '@octokit/plugin-request-log': 4.0.1(@octokit/core@5.2.0)
       '@octokit/plugin-rest-endpoint-methods': 13.2.2(@octokit/core@5.2.0)
 
-  '@octokit/types@13.6.0':
+  '@octokit/types@13.6.1':
     dependencies:
       '@octokit/openapi-types': 22.2.0
 
@@ -12058,6 +12390,8 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
+  '@polka/url@1.0.0-next.28': {}
+
   '@popperjs/core@2.11.8': {}
 
   '@puppeteer/browsers@2.4.0':
@@ -12105,10 +12439,10 @@ snapshots:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
 
-  '@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(@types/babel__core@7.20.5)(rollup@2.79.2)':
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.25.7)(@types/babel__core@7.20.5)(rollup@2.79.2)':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-module-imports': 7.24.7
+      '@babel/core': 7.25.7
+      '@babel/helper-module-imports': 7.25.7
       '@rollup/pluginutils': 3.1.0(rollup@2.79.2)
       rollup: 2.79.2
     optionalDependencies:
@@ -12160,60 +12494,60 @@ snapshots:
     optionalDependencies:
       rollup: 2.79.2
 
-  '@rollup/pluginutils@5.1.2(rollup@4.23.0)':
+  '@rollup/pluginutils@5.1.2(rollup@4.24.0)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 2.3.1
     optionalDependencies:
-      rollup: 4.23.0
+      rollup: 4.24.0
 
-  '@rollup/rollup-android-arm-eabi@4.23.0':
+  '@rollup/rollup-android-arm-eabi@4.24.0':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.23.0':
+  '@rollup/rollup-android-arm64@4.24.0':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.23.0':
+  '@rollup/rollup-darwin-arm64@4.24.0':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.23.0':
+  '@rollup/rollup-darwin-x64@4.24.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.23.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.24.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.23.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.24.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.23.0':
+  '@rollup/rollup-linux-arm64-gnu@4.24.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.23.0':
+  '@rollup/rollup-linux-arm64-musl@4.24.0':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.23.0':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.24.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.23.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.24.0':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.23.0':
+  '@rollup/rollup-linux-s390x-gnu@4.24.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.23.0':
+  '@rollup/rollup-linux-x64-gnu@4.24.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.23.0':
+  '@rollup/rollup-linux-x64-musl@4.24.0':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.23.0':
+  '@rollup/rollup-win32-arm64-msvc@4.24.0':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.23.0':
+  '@rollup/rollup-win32-ia32-msvc@4.24.0':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.23.0':
+  '@rollup/rollup-win32-x64-msvc@4.24.0':
     optional: true
 
   '@selderee/plugin-htmlparser2@0.11.0':
@@ -12221,36 +12555,36 @@ snapshots:
       domhandler: 5.0.3
       selderee: 0.11.0
 
-  '@shikijs/core@1.21.0':
+  '@shikijs/core@1.21.1':
     dependencies:
-      '@shikijs/engine-javascript': 1.21.0
-      '@shikijs/engine-oniguruma': 1.21.0
-      '@shikijs/types': 1.21.0
-      '@shikijs/vscode-textmate': 9.2.2
+      '@shikijs/engine-javascript': 1.21.1
+      '@shikijs/engine-oniguruma': 1.21.1
+      '@shikijs/types': 1.21.1
+      '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.3
 
-  '@shikijs/engine-javascript@1.21.0':
+  '@shikijs/engine-javascript@1.21.1':
     dependencies:
-      '@shikijs/types': 1.21.0
-      '@shikijs/vscode-textmate': 9.2.2
+      '@shikijs/types': 1.21.1
+      '@shikijs/vscode-textmate': 9.3.0
       oniguruma-to-js: 0.4.3
 
-  '@shikijs/engine-oniguruma@1.21.0':
+  '@shikijs/engine-oniguruma@1.21.1':
     dependencies:
-      '@shikijs/types': 1.21.0
-      '@shikijs/vscode-textmate': 9.2.2
+      '@shikijs/types': 1.21.1
+      '@shikijs/vscode-textmate': 9.3.0
 
-  '@shikijs/transformers@1.21.0':
+  '@shikijs/transformers@1.21.1':
     dependencies:
-      shiki: 1.21.0
+      shiki: 1.21.1
 
-  '@shikijs/types@1.21.0':
+  '@shikijs/types@1.21.1':
     dependencies:
-      '@shikijs/vscode-textmate': 9.2.2
+      '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
 
-  '@shikijs/vscode-textmate@9.2.2': {}
+  '@shikijs/vscode-textmate@9.3.0': {}
 
   '@simplewebauthn/browser@10.0.0':
     dependencies:
@@ -12288,10 +12622,10 @@ snapshots:
 
   '@streamparser/json@0.0.20': {}
 
-  '@stylistic/eslint-plugin@2.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)':
+  '@stylistic/eslint-plugin@2.9.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)':
     dependencies:
-      '@typescript-eslint/utils': 8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
-      eslint: 9.11.1(jiti@2.0.0)
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
+      eslint: 9.12.0(jiti@2.3.1)
       eslint-visitor-keys: 4.1.0
       espree: 10.2.0
       estraverse: 5.3.0
@@ -12309,9 +12643,10 @@ snapshots:
 
   '@tediousjs/connection-string@0.5.0': {}
 
-  '@tinymce/tinymce-vue@3.2.8(vue@2.7.16)':
+  '@tinymce/tinymce-vue@6.0.1(vue@3.5.11(typescript@5.6.2))':
     dependencies:
-      vue: 2.7.16
+      tinymce: 7.3.0
+      vue: 3.5.11(typescript@5.6.2)
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
@@ -12344,30 +12679,32 @@ snapshots:
 
   '@tsconfig/node16@1.0.4': {}
 
+  '@tsconfig/node20@20.1.4': {}
+
   '@types/ajv@1.0.0':
     dependencies:
       ajv: 8.17.1
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/parser': 7.25.7
+      '@babel/types': 7.25.7
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.20.6
 
   '@types/babel__generator@7.6.8':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.25.7
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/parser': 7.25.7
+      '@babel/types': 7.25.7
 
   '@types/babel__traverse@7.20.6':
     dependencies:
-      '@babel/types': 7.25.6
+      '@babel/types': 7.25.7
 
   '@types/bcryptjs@2.4.6': {}
 
@@ -12499,7 +12836,7 @@ snapshots:
 
   '@types/linkify-it@5.0.0': {}
 
-  '@types/lodash@4.17.9': {}
+  '@types/lodash@4.17.10': {}
 
   '@types/markdown-it@14.1.2':
     dependencies:
@@ -12618,6 +12955,8 @@ snapshots:
       '@types/node': 22.7.4
       '@types/send': 0.17.4
 
+  '@types/sortablejs@1.15.8': {}
+
   '@types/stack-utils@2.0.3': {}
 
   '@types/superagent@8.1.9':
@@ -12675,15 +13014,15 @@ snapshots:
       '@types/node': 22.7.4
     optional: true
 
-  '@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)':
+  '@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)':
     dependencies:
       '@eslint-community/regexpp': 4.11.1
-      '@typescript-eslint/parser': 8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
+      '@typescript-eslint/parser': 8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
       '@typescript-eslint/scope-manager': 8.8.0
-      '@typescript-eslint/type-utils': 8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
-      '@typescript-eslint/utils': 8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
+      '@typescript-eslint/type-utils': 8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
       '@typescript-eslint/visitor-keys': 8.8.0
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
@@ -12693,14 +13032,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)':
+  '@typescript-eslint/parser@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.8.0
       '@typescript-eslint/types': 8.8.0
       '@typescript-eslint/typescript-estree': 8.8.0(typescript@5.6.2)
       '@typescript-eslint/visitor-keys': 8.8.0
       debug: 4.3.7(supports-color@5.5.0)
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
     optionalDependencies:
       typescript: 5.6.2
     transitivePeerDependencies:
@@ -12711,10 +13050,10 @@ snapshots:
       '@typescript-eslint/types': 8.8.0
       '@typescript-eslint/visitor-keys': 8.8.0
 
-  '@typescript-eslint/type-utils@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)':
+  '@typescript-eslint/type-utils@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.8.0(typescript@5.6.2)
-      '@typescript-eslint/utils': 8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
       debug: 4.3.7(supports-color@5.5.0)
       ts-api-utils: 1.3.0(typescript@5.6.2)
     optionalDependencies:
@@ -12740,13 +13079,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)':
+  '@typescript-eslint/utils@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.11.1(jiti@2.0.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.1))
       '@typescript-eslint/scope-manager': 8.8.0
       '@typescript-eslint/types': 8.8.0
       '@typescript-eslint/typescript-estree': 8.8.0(typescript@5.6.2)
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -12767,10 +13106,10 @@ snapshots:
       sharp-ico: 0.1.5
       unconfig: 0.3.13
 
-  '@vitejs/plugin-legacy@5.4.2(terser@5.34.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))':
+  '@vitejs/plugin-legacy@5.4.2(terser@5.34.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))':
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/preset-env': 7.25.4(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/preset-env': 7.25.7(@babel/core@7.25.7)
       browserslist: 4.24.0
       browserslist-to-esbuild: 2.1.1(browserslist@4.24.0)
       core-js: 3.38.1
@@ -12778,74 +13117,60 @@ snapshots:
       regenerator-runtime: 0.14.1
       systemjs: 6.15.1
       terser: 5.34.1
-      vite: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue2@2.3.1(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))(vue@2.7.16)':
-    dependencies:
-      vite: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
-      vue: 2.7.16
-
-  '@vitejs/plugin-vue@5.1.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.10(typescript@5.6.2))':
+  '@vitejs/plugin-vue@5.1.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))':
     dependencies:
       vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
-      vue: 3.5.10(typescript@5.6.2)
+      vue: 3.5.11(typescript@5.6.2)
 
-  '@vitest/eslint-plugin@1.1.4(@typescript-eslint/utils@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)(vitest@2.1.1(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1))':
+  '@vitest/eslint-plugin@1.1.6(@typescript-eslint/utils@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)(vitest@2.1.2(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1))':
     dependencies:
-      eslint: 9.11.1(jiti@2.0.0)
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
+      eslint: 9.12.0(jiti@2.3.1)
+      vitest: 2.1.2(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1)
     optionalDependencies:
-      '@typescript-eslint/utils': 8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
       typescript: 5.6.2
-      vitest: 2.1.1(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1)
 
-  '@vitest/expect@2.1.1':
+  '@vitest/expect@2.1.2':
     dependencies:
-      '@vitest/spy': 2.1.1
-      '@vitest/utils': 2.1.1
+      '@vitest/spy': 2.1.2
+      '@vitest/utils': 2.1.2
       chai: 5.1.1
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))':
-    dependencies:
-      '@vitest/spy': 2.1.1
-      estree-walker: 3.0.3
-      magic-string: 0.30.11
-    optionalDependencies:
-      vite: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
-
-  '@vitest/mocker@2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))':
+  '@vitest/mocker@2.1.2(@vitest/spy@2.1.2)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))':
     dependencies:
-      '@vitest/spy': 2.1.1
+      '@vitest/spy': 2.1.2
       estree-walker: 3.0.3
       magic-string: 0.30.11
     optionalDependencies:
       vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
-    optional: true
 
-  '@vitest/pretty-format@2.1.1':
+  '@vitest/pretty-format@2.1.2':
     dependencies:
       tinyrainbow: 1.2.0
 
-  '@vitest/runner@2.1.1':
+  '@vitest/runner@2.1.2':
     dependencies:
-      '@vitest/utils': 2.1.1
+      '@vitest/utils': 2.1.2
       pathe: 1.1.2
 
-  '@vitest/snapshot@2.1.1':
+  '@vitest/snapshot@2.1.2':
     dependencies:
-      '@vitest/pretty-format': 2.1.1
+      '@vitest/pretty-format': 2.1.2
       magic-string: 0.30.11
       pathe: 1.1.2
 
-  '@vitest/spy@2.1.1':
+  '@vitest/spy@2.1.2':
     dependencies:
       tinyspy: 3.0.2
 
-  '@vitest/utils@2.1.1':
+  '@vitest/utils@2.1.2':
     dependencies:
-      '@vitest/pretty-format': 2.1.1
+      '@vitest/pretty-format': 2.1.2
       loupe: 3.1.1
       tinyrainbow: 1.2.0
 
@@ -12861,43 +13186,65 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
-  '@vue/compiler-core@3.5.10':
+  '@vue/babel-helper-vue-transform-on@1.2.5': {}
+
+  '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.25.7)':
+    dependencies:
+      '@babel/helper-module-imports': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.25.7)
+      '@babel/template': 7.25.7
+      '@babel/traverse': 7.25.7
+      '@babel/types': 7.25.7
+      '@vue/babel-helper-vue-transform-on': 1.2.5
+      '@vue/babel-plugin-resolve-type': 1.2.5(@babel/core@7.25.7)
+      html-tags: 3.3.1
+      svg-tags: 1.0.0
+    optionalDependencies:
+      '@babel/core': 7.25.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.2.5(@babel/core@7.25.7)':
     dependencies:
-      '@babel/parser': 7.25.6
-      '@vue/shared': 3.5.10
+      '@babel/code-frame': 7.25.7
+      '@babel/core': 7.25.7
+      '@babel/helper-module-imports': 7.25.7
+      '@babel/helper-plugin-utils': 7.25.7
+      '@babel/parser': 7.25.7
+      '@vue/compiler-sfc': 3.5.11
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/compiler-core@3.5.11':
+    dependencies:
+      '@babel/parser': 7.25.7
+      '@vue/shared': 3.5.11
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.10':
+  '@vue/compiler-dom@3.5.11':
     dependencies:
-      '@vue/compiler-core': 3.5.10
-      '@vue/shared': 3.5.10
+      '@vue/compiler-core': 3.5.11
+      '@vue/shared': 3.5.11
 
-  '@vue/compiler-sfc@2.7.16':
+  '@vue/compiler-sfc@3.5.11':
     dependencies:
-      '@babel/parser': 7.25.6
-      postcss: 8.4.47
-      source-map: 0.6.1
-    optionalDependencies:
-      prettier: 2.8.8
-
-  '@vue/compiler-sfc@3.5.10':
-    dependencies:
-      '@babel/parser': 7.25.6
-      '@vue/compiler-core': 3.5.10
-      '@vue/compiler-dom': 3.5.10
-      '@vue/compiler-ssr': 3.5.10
-      '@vue/shared': 3.5.10
+      '@babel/parser': 7.25.7
+      '@vue/compiler-core': 3.5.11
+      '@vue/compiler-dom': 3.5.11
+      '@vue/compiler-ssr': 3.5.11
+      '@vue/shared': 3.5.11
       estree-walker: 2.0.2
       magic-string: 0.30.11
       postcss: 8.4.47
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.10':
+  '@vue/compiler-ssr@3.5.11':
     dependencies:
-      '@vue/compiler-dom': 3.5.10
-      '@vue/shared': 3.5.10
+      '@vue/compiler-dom': 3.5.11
+      '@vue/shared': 3.5.11
 
   '@vue/compiler-vue2@2.7.16':
     dependencies:
@@ -12910,6 +13257,18 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.4.6
 
+  '@vue/devtools-core@7.4.6(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))':
+    dependencies:
+      '@vue/devtools-kit': 7.4.6
+      '@vue/devtools-shared': 7.4.6
+      mitt: 3.0.1
+      nanoid: 3.3.7
+      pathe: 1.1.2
+      vite-hot-client: 0.2.3(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
+      vue: 3.5.11(typescript@5.6.2)
+    transitivePeerDependencies:
+      - vite
+
   '@vue/devtools-kit@7.4.6':
     dependencies:
       '@vue/devtools-shared': 7.4.6
@@ -12927,9 +13286,9 @@ snapshots:
   '@vue/language-core@2.1.6(typescript@5.6.2)':
     dependencies:
       '@volar/language-core': 2.4.5
-      '@vue/compiler-dom': 3.5.10
+      '@vue/compiler-dom': 3.5.11
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.10
+      '@vue/shared': 3.5.11
       computeds: 0.0.1
       minimatch: 9.0.5
       muggle-string: 0.4.1
@@ -12937,55 +13296,53 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.2
 
-  '@vue/reactivity@3.5.10':
+  '@vue/reactivity@3.5.11':
     dependencies:
-      '@vue/shared': 3.5.10
+      '@vue/shared': 3.5.11
 
-  '@vue/runtime-core@3.5.10':
+  '@vue/runtime-core@3.5.11':
     dependencies:
-      '@vue/reactivity': 3.5.10
-      '@vue/shared': 3.5.10
+      '@vue/reactivity': 3.5.11
+      '@vue/shared': 3.5.11
 
-  '@vue/runtime-dom@3.5.10':
+  '@vue/runtime-dom@3.5.11':
     dependencies:
-      '@vue/reactivity': 3.5.10
-      '@vue/runtime-core': 3.5.10
-      '@vue/shared': 3.5.10
+      '@vue/reactivity': 3.5.11
+      '@vue/runtime-core': 3.5.11
+      '@vue/shared': 3.5.11
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.10(vue@3.5.10(typescript@5.6.2))':
+  '@vue/server-renderer@3.5.11(vue@3.5.11(typescript@5.6.2))':
     dependencies:
-      '@vue/compiler-ssr': 3.5.10
-      '@vue/shared': 3.5.10
-      vue: 3.5.10(typescript@5.6.2)
+      '@vue/compiler-ssr': 3.5.11
+      '@vue/shared': 3.5.11
+      vue: 3.5.11(typescript@5.6.2)
 
-  '@vue/shared@3.5.10': {}
+  '@vue/shared@3.5.11': {}
 
-  '@vueuse/core@11.1.0(vue@2.7.16)':
+  '@vue/tsconfig@0.5.1': {}
+
+  '@vuetify/loader-shared@2.0.3(vue@3.5.11(typescript@5.6.2))(vuetify@3.7.2(typescript@5.6.2)(vite-plugin-vuetify@2.0.4)(vue@3.5.11(typescript@5.6.2)))':
     dependencies:
-      '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 11.1.0
-      '@vueuse/shared': 11.1.0(vue@2.7.16)
-      vue-demi: 0.14.10(vue@2.7.16)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      upath: 2.0.1
+      vue: 3.5.11(typescript@5.6.2)
+      vuetify: 3.7.2(typescript@5.6.2)(vite-plugin-vuetify@2.0.4)(vue@3.5.11(typescript@5.6.2))
 
-  '@vueuse/core@11.1.0(vue@3.5.10(typescript@5.6.2))':
+  '@vueuse/core@11.1.0(vue@3.5.11(typescript@5.6.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 11.1.0
-      '@vueuse/shared': 11.1.0(vue@3.5.10(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.10(typescript@5.6.2))
+      '@vueuse/shared': 11.1.0(vue@3.5.11(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.11(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@11.1.0(axios@1.7.7)(focus-trap@7.6.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(sortablejs@1.10.2)(vue@3.5.10(typescript@5.6.2))':
+  '@vueuse/integrations@11.1.0(axios@1.7.7)(focus-trap@7.6.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(sortablejs@1.10.2)(vue@3.5.11(typescript@5.6.2))':
     dependencies:
-      '@vueuse/core': 11.1.0(vue@3.5.10(typescript@5.6.2))
-      '@vueuse/shared': 11.1.0(vue@3.5.10(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.10(typescript@5.6.2))
+      '@vueuse/core': 11.1.0(vue@3.5.11(typescript@5.6.2))
+      '@vueuse/shared': 11.1.0(vue@3.5.11(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.11(typescript@5.6.2))
     optionalDependencies:
       axios: 1.7.7(debug@4.3.7)
       focus-trap: 7.6.0
@@ -12998,16 +13355,9 @@ snapshots:
 
   '@vueuse/metadata@11.1.0': {}
 
-  '@vueuse/shared@11.1.0(vue@2.7.16)':
-    dependencies:
-      vue-demi: 0.14.10(vue@2.7.16)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
-  '@vueuse/shared@11.1.0(vue@3.5.10(typescript@5.6.2))':
+  '@vueuse/shared@11.1.0(vue@3.5.11(typescript@5.6.2))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.10(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.11(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -13303,9 +13653,9 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.0.0
 
-  awesome-phonenumber@7.1.0: {}
+  awesome-phonenumber@7.2.0: {}
 
-  awilix@11.0.0:
+  awilix@12.0.1:
     dependencies:
       camel-case: 4.1.2
       fast-glob: 3.3.2
@@ -13331,13 +13681,13 @@ snapshots:
 
   b4a@1.6.7: {}
 
-  babel-jest@29.7.0(@babel/core@7.25.2):
+  babel-jest@29.7.0(@babel/core@7.25.7):
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.25.7
       '@jest/transform': 29.7.0
       '@types/babel__core': 7.20.5
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 29.6.3(@babel/core@7.25.2)
+      babel-preset-jest: 29.6.3(@babel/core@7.25.7)
       chalk: 4.1.2
       graceful-fs: 4.2.11
       slash: 3.0.0
@@ -13346,7 +13696,7 @@ snapshots:
 
   babel-plugin-istanbul@6.1.1:
     dependencies:
-      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-plugin-utils': 7.25.7
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-instrument: 5.2.1
@@ -13356,59 +13706,59 @@ snapshots:
 
   babel-plugin-jest-hoist@29.6.3:
     dependencies:
-      '@babel/template': 7.25.0
-      '@babel/types': 7.25.6
+      '@babel/template': 7.25.7
+      '@babel/types': 7.25.7
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.20.6
 
-  babel-plugin-polyfill-corejs2@0.4.11(@babel/core@7.25.2):
+  babel-plugin-polyfill-corejs2@0.4.11(@babel/core@7.25.7):
     dependencies:
-      '@babel/compat-data': 7.25.4
-      '@babel/core': 7.25.2
-      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.25.2)
+      '@babel/compat-data': 7.25.7
+      '@babel/core': 7.25.7
+      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.25.7)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.10.6(@babel/core@7.25.2):
+  babel-plugin-polyfill-corejs3@0.10.6(@babel/core@7.25.7):
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.25.7)
       core-js-compat: 3.38.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.2(@babel/core@7.25.2):
+  babel-plugin-polyfill-regenerator@0.6.2(@babel/core@7.25.7):
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.25.2)
+      '@babel/core': 7.25.7
+      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.25.7)
     transitivePeerDependencies:
       - supports-color
 
-  babel-preset-current-node-syntax@1.1.0(@babel/core@7.25.2):
-    dependencies:
-      '@babel/core': 7.25.2
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.2)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.2)
-      '@babel/plugin-syntax-import-attributes': 7.25.6(@babel/core@7.25.2)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.2)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.2)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.2)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.2)
-
-  babel-preset-jest@29.6.3(@babel/core@7.25.2):
-    dependencies:
-      '@babel/core': 7.25.2
+  babel-preset-current-node-syntax@1.1.0(@babel/core@7.25.7):
+    dependencies:
+      '@babel/core': 7.25.7
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.7)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.7)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.7)
+      '@babel/plugin-syntax-import-attributes': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.7)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.7)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.7)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.7)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.7)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.7)
+
+  babel-preset-jest@29.6.3(@babel/core@7.25.7):
+    dependencies:
+      '@babel/core': 7.25.7
       babel-plugin-jest-hoist: 29.6.3
-      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.25.2)
+      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.25.7)
 
   balanced-match@1.0.2: {}
 
@@ -13523,8 +13873,8 @@ snapshots:
 
   browserslist@4.24.0:
     dependencies:
-      caniuse-lite: 1.0.30001664
-      electron-to-chromium: 1.5.30
+      caniuse-lite: 1.0.30001667
+      electron-to-chromium: 1.5.32
       node-releases: 2.0.18
       update-browserslist-db: 1.1.1(browserslist@4.24.0)
 
@@ -13565,7 +13915,7 @@ snapshots:
 
   builtin-modules@3.3.0: {}
 
-  bullmq@5.14.0:
+  bullmq@5.16.0:
     dependencies:
       cron-parser: 4.9.0
       ioredis: 5.4.1
@@ -13577,6 +13927,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.0.0
+
   busboy@1.6.0:
     dependencies:
       streamsearch: 1.1.0
@@ -13623,7 +13977,7 @@ snapshots:
 
   camelcase@6.3.0: {}
 
-  caniuse-lite@1.0.30001664: {}
+  caniuse-lite@1.0.30001667: {}
 
   caseless@0.12.0: {}
 
@@ -13678,7 +14032,7 @@ snapshots:
 
   chokidar@4.0.1:
     dependencies:
-      readdirp: 4.0.1
+      readdirp: 4.0.2
 
   chownr@1.1.4: {}
 
@@ -13686,7 +14040,7 @@ snapshots:
 
   chrome-trace-event@1.0.4: {}
 
-  chromium-bidi@0.6.5(devtools-protocol@0.0.1342118):
+  chromium-bidi@0.8.0(devtools-protocol@0.0.1342118):
     dependencies:
       devtools-protocol: 0.0.1342118
       mitt: 3.0.1
@@ -13978,6 +14332,8 @@ snapshots:
 
   cookie@0.6.0: {}
 
+  cookie@0.7.1: {}
+
   cookiejar@2.1.4: {}
 
   copy-anything@3.0.5:
@@ -14245,10 +14601,17 @@ snapshots:
 
   deep-is@0.1.4: {}
 
-  deep-pick-omit@1.2.0: {}
+  deep-pick-omit@1.2.1: {}
 
   deepmerge@4.3.1: {}
 
+  default-browser-id@5.0.0: {}
+
+  default-browser@5.2.1:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.0
+
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.0
@@ -14257,6 +14620,8 @@ snapshots:
 
   define-lazy-prop@2.0.0: {}
 
+  define-lazy-prop@3.0.0: {}
+
   define-properties@1.2.1:
     dependencies:
       define-data-property: 1.1.4
@@ -14396,7 +14761,7 @@ snapshots:
     dependencies:
       jake: 10.9.2
 
-  electron-to-chromium@1.5.30: {}
+  electron-to-chromium@1.5.32: {}
 
   emittery@0.13.1: {}
 
@@ -14439,6 +14804,8 @@ snapshots:
     dependencies:
       is-arrayish: 0.2.1
 
+  error-stack-parser-es@0.1.5: {}
+
   es-abstract@1.23.3:
     dependencies:
       array-buffer-byte-length: 1.0.1
@@ -14475,7 +14842,7 @@ snapshots:
       object-inspect: 1.13.2
       object-keys: 1.1.1
       object.assign: 4.1.5
-      regexp.prototype.flags: 1.5.2
+      regexp.prototype.flags: 1.5.3
       safe-array-concat: 1.1.2
       safe-regex-test: 1.0.3
       string.prototype.trim: 1.2.9
@@ -14610,15 +14977,15 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-compat-utils@0.5.1(eslint@9.11.1(jiti@2.0.0)):
+  eslint-compat-utils@0.5.1(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       semver: 7.6.3
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-config-flat-gitignore@0.3.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      '@eslint/compat': 1.1.1
-      eslint: 9.11.1(jiti@2.0.0)
+      '@eslint/compat': 1.2.0(eslint@9.12.0(jiti@2.3.1))
+      eslint: 9.12.0(jiti@2.3.1)
       find-up-simple: 1.0.0
 
   eslint-flat-config-utils@0.3.1:
@@ -14626,9 +14993,9 @@ snapshots:
       '@types/eslint': 9.6.1
       pathe: 1.1.2
 
-  eslint-formatting-reporter@0.0.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-formatting-reporter@0.0.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       prettier-linter-helpers: 1.0.0
 
   eslint-import-resolver-node@0.3.9:
@@ -14639,46 +15006,46 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-merge-processors@0.1.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-merge-processors@0.1.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
 
   eslint-parser-plain@0.1.0: {}
 
-  eslint-plugin-antfu@2.7.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-antfu@2.7.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
       '@antfu/utils': 0.7.10
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
 
-  eslint-plugin-command@0.2.6(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-command@0.2.6(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.48.0
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
 
-  eslint-plugin-es-x@7.8.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-es-x@7.8.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.11.1(jiti@2.0.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.1))
       '@eslint-community/regexpp': 4.11.1
-      eslint: 9.11.1(jiti@2.0.0)
-      eslint-compat-utils: 0.5.1(eslint@9.11.1(jiti@2.0.0))
+      eslint: 9.12.0(jiti@2.3.1)
+      eslint-compat-utils: 0.5.1(eslint@9.12.0(jiti@2.3.1))
 
-  eslint-plugin-format@0.1.2(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-format@0.1.2(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
       '@dprint/formatter': 0.3.0
       '@dprint/markdown': 0.17.8
       '@dprint/toml': 0.6.3
-      eslint: 9.11.1(jiti@2.0.0)
-      eslint-formatting-reporter: 0.0.0(eslint@9.11.1(jiti@2.0.0))
+      eslint: 9.12.0(jiti@2.3.1)
+      eslint-formatting-reporter: 0.0.0(eslint@9.12.0(jiti@2.3.1))
       eslint-parser-plain: 0.1.0
       prettier: 3.3.3
       synckit: 0.9.1
 
-  eslint-plugin-import-x@4.3.1(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2):
+  eslint-plugin-import-x@4.3.1(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2):
     dependencies:
-      '@typescript-eslint/utils': 8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
       debug: 4.3.7(supports-color@5.5.0)
       doctrine: 3.0.0
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       eslint-import-resolver-node: 0.3.9
       get-tsconfig: 4.8.1
       is-glob: 4.0.3
@@ -14690,14 +15057,14 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-jsdoc@50.3.1(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-jsdoc@50.3.1(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.48.0
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.3.7(supports-color@5.5.0)
       escape-string-regexp: 4.0.0
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       espree: 10.2.0
       esquery: 1.6.0
       parse-imports: 2.2.1
@@ -14707,87 +15074,87 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsonc@2.16.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-jsonc@2.16.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.11.1(jiti@2.0.0))
-      eslint: 9.11.1(jiti@2.0.0)
-      eslint-compat-utils: 0.5.1(eslint@9.11.1(jiti@2.0.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.1))
+      eslint: 9.12.0(jiti@2.3.1)
+      eslint-compat-utils: 0.5.1(eslint@9.12.0(jiti@2.3.1))
       espree: 9.6.1
       graphemer: 1.4.0
       jsonc-eslint-parser: 2.4.0
       natural-compare: 1.4.0
       synckit: 0.6.2
 
-  eslint-plugin-markdown@5.1.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-markdown@5.1.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-n@17.10.3(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-n@17.10.3(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.11.1(jiti@2.0.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.1))
       enhanced-resolve: 5.17.1
-      eslint: 9.11.1(jiti@2.0.0)
-      eslint-plugin-es-x: 7.8.0(eslint@9.11.1(jiti@2.0.0))
+      eslint: 9.12.0(jiti@2.3.1)
+      eslint-plugin-es-x: 7.8.0(eslint@9.12.0(jiti@2.3.1))
       get-tsconfig: 4.8.1
-      globals: 15.9.0
+      globals: 15.10.0
       ignore: 5.3.2
       minimatch: 9.0.5
       semver: 7.6.3
 
   eslint-plugin-no-only-tests@3.3.0: {}
 
-  eslint-plugin-perfectionist@3.8.0(eslint@9.11.1(jiti@2.0.0))(svelte@4.2.19)(typescript@5.6.2)(vue-eslint-parser@9.4.3(eslint@9.11.1(jiti@2.0.0))):
+  eslint-plugin-perfectionist@3.8.0(eslint@9.12.0(jiti@2.3.1))(svelte@4.2.19)(typescript@5.6.2)(vue-eslint-parser@9.4.3(eslint@9.12.0(jiti@2.3.1))):
     dependencies:
       '@typescript-eslint/types': 8.8.0
-      '@typescript-eslint/utils': 8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
-      eslint: 9.11.1(jiti@2.0.0)
+      '@typescript-eslint/utils': 8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
+      eslint: 9.12.0(jiti@2.3.1)
       minimatch: 9.0.5
       natural-compare-lite: 1.4.0
     optionalDependencies:
       svelte: 4.2.19
-      vue-eslint-parser: 9.4.3(eslint@9.11.1(jiti@2.0.0))
+      vue-eslint-parser: 9.4.3(eslint@9.12.0(jiti@2.3.1))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-regexp@2.6.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-regexp@2.6.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.11.1(jiti@2.0.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.1))
       '@eslint-community/regexpp': 4.11.1
       comment-parser: 1.4.1
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       jsdoc-type-pratt-parser: 4.1.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-simple-import-sort@12.1.1(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-simple-import-sort@12.1.1(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
 
-  eslint-plugin-toml@0.11.1(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-toml@0.11.1(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
       debug: 4.3.7(supports-color@5.5.0)
-      eslint: 9.11.1(jiti@2.0.0)
-      eslint-compat-utils: 0.5.1(eslint@9.11.1(jiti@2.0.0))
+      eslint: 9.12.0(jiti@2.3.1)
+      eslint-compat-utils: 0.5.1(eslint@9.12.0(jiti@2.3.1))
       lodash: 4.17.21
       toml-eslint-parser: 0.10.0
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-unicorn@55.0.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.11.1(jiti@2.0.0))
+      '@babel/helper-validator-identifier': 7.25.7
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.1))
       ci-info: 4.0.0
       clean-regexp: 1.0.0
       core-js-compat: 3.38.1
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       esquery: 1.6.0
-      globals: 15.9.0
+      globals: 15.10.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
       jsesc: 3.0.2
@@ -14798,41 +15165,41 @@ snapshots:
       semver: 7.6.3
       strip-indent: 3.0.0
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2))(eslint@9.11.1(jiti@2.0.0))(typescript@5.6.2)
+      '@typescript-eslint/eslint-plugin': 8.8.0(@typescript-eslint/parser@8.8.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2))(eslint@9.12.0(jiti@2.3.1))(typescript@5.6.2)
 
-  eslint-plugin-vue@9.28.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-vue@9.28.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.11.1(jiti@2.0.0))
-      eslint: 9.11.1(jiti@2.0.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.1))
+      eslint: 9.12.0(jiti@2.3.1)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.6.3
-      vue-eslint-parser: 9.4.3(eslint@9.11.1(jiti@2.0.0))
+      vue-eslint-parser: 9.4.3(eslint@9.12.0(jiti@2.3.1))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-yml@1.14.0(eslint@9.11.1(jiti@2.0.0)):
+  eslint-plugin-yml@1.14.0(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
       debug: 4.3.7(supports-color@5.5.0)
-      eslint: 9.11.1(jiti@2.0.0)
-      eslint-compat-utils: 0.5.1(eslint@9.11.1(jiti@2.0.0))
+      eslint: 9.12.0(jiti@2.3.1)
+      eslint-compat-utils: 0.5.1(eslint@9.12.0(jiti@2.3.1))
       lodash: 4.17.21
       natural-compare: 1.4.0
       yaml-eslint-parser: 1.2.3
     transitivePeerDependencies:
       - supports-color
 
-  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.5.10)(eslint@9.11.1(jiti@2.0.0)):
+  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.5.11)(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
-      '@vue/compiler-sfc': 3.5.10
-      eslint: 9.11.1(jiti@2.0.0)
+      '@vue/compiler-sfc': 3.5.11
+      eslint: 9.12.0(jiti@2.3.1)
 
   eslint-scope@5.1.1:
     dependencies:
@@ -14853,18 +15220,18 @@ snapshots:
 
   eslint-visitor-keys@4.1.0: {}
 
-  eslint@9.11.1(jiti@2.0.0):
+  eslint@9.12.0(jiti@2.3.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.11.1(jiti@2.0.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.12.0(jiti@2.3.1))
       '@eslint-community/regexpp': 4.11.1
       '@eslint/config-array': 0.18.0
       '@eslint/core': 0.6.0
       '@eslint/eslintrc': 3.1.0
-      '@eslint/js': 9.11.1
+      '@eslint/js': 9.12.0
       '@eslint/plugin-kit': 0.2.0
+      '@humanfs/node': 0.16.5
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.3.0
-      '@nodelib/fs.walk': 1.2.8
+      '@humanwhocodes/retry': 0.3.1
       '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
       ajv: 6.12.6
@@ -14884,16 +15251,14 @@ snapshots:
       ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      is-path-inside: 3.0.3
       json-stable-stringify-without-jsonify: 1.0.1
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
-      strip-ansi: 6.0.1
       text-table: 0.2.0
     optionalDependencies:
-      jiti: 2.0.0
+      jiti: 2.3.1
     transitivePeerDependencies:
       - supports-color
 
@@ -14991,7 +15356,7 @@ snapshots:
       jest-message-util: 29.7.0
       jest-util: 29.7.0
 
-  express-rate-limit@7.4.0(express@4.21.0):
+  express-rate-limit@7.4.1(express@4.21.0):
     dependencies:
       express: 4.21.0
 
@@ -15211,7 +15576,7 @@ snapshots:
 
   fork-ts-checker-webpack-plugin@9.0.2(typescript@5.6.2)(webpack@5.95.0(webpack-cli@5.1.4)):
     dependencies:
-      '@babel/code-frame': 7.24.7
+      '@babel/code-frame': 7.25.7
       chalk: 4.1.2
       chokidar: 3.6.0
       cosmiconfig: 8.3.6(typescript@5.6.2)
@@ -15470,7 +15835,7 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@15.9.0: {}
+  globals@15.10.0: {}
 
   globalthis@1.0.4:
     dependencies:
@@ -15588,6 +15953,8 @@ snapshots:
       relateurl: 0.2.7
       terser: 5.34.1
 
+  html-tags@3.3.1: {}
+
   html-to-text@9.0.5:
     dependencies:
       '@selderee/plugin-htmlparser2': 0.11.0
@@ -15803,6 +16170,8 @@ snapshots:
 
   is-docker@2.2.1: {}
 
+  is-docker@3.0.0: {}
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@2.0.0: {}
@@ -15823,6 +16192,10 @@ snapshots:
 
   is-hexadecimal@1.0.4: {}
 
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
   is-module@1.0.0: {}
 
   is-natural-number@4.0.1: {}
@@ -15839,8 +16212,6 @@ snapshots:
 
   is-obj@2.0.0: {}
 
-  is-path-inside@3.0.3: {}
-
   is-plain-object@2.0.4:
     dependencies:
       isobject: 3.0.1
@@ -15896,6 +16267,10 @@ snapshots:
     dependencies:
       is-docker: 2.2.1
 
+  is-wsl@3.1.0:
+    dependencies:
+      is-inside-container: 1.0.0
+
   isarray@1.0.0: {}
 
   isarray@2.0.5: {}
@@ -15910,8 +16285,8 @@ snapshots:
 
   istanbul-lib-instrument@5.2.1:
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/parser': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/parser': 7.25.7
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 6.3.1
@@ -15920,8 +16295,8 @@ snapshots:
 
   istanbul-lib-instrument@6.0.3:
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/parser': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/parser': 7.25.7
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 7.6.3
@@ -16017,10 +16392,10 @@ snapshots:
 
   jest-config@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)):
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.25.7
       '@jest/test-sequencer': 29.7.0
       '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.25.2)
+      babel-jest: 29.7.0(@babel/core@7.25.7)
       chalk: 4.1.2
       ci-info: 3.9.0
       deepmerge: 4.3.1
@@ -16113,7 +16488,7 @@ snapshots:
 
   jest-message-util@29.7.0:
     dependencies:
-      '@babel/code-frame': 7.24.7
+      '@babel/code-frame': 7.25.7
       '@jest/types': 29.6.3
       '@types/stack-utils': 2.0.3
       chalk: 4.1.2
@@ -16209,15 +16584,15 @@ snapshots:
 
   jest-snapshot@29.7.0:
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/generator': 7.25.6
-      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
-      '@babel/plugin-syntax-typescript': 7.25.4(@babel/core@7.25.2)
-      '@babel/types': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/generator': 7.25.7
+      '@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-syntax-typescript': 7.25.7(@babel/core@7.25.7)
+      '@babel/types': 7.25.7
       '@jest/expect-utils': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.25.2)
+      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.25.7)
       chalk: 4.1.2
       expect: 29.7.0
       graceful-fs: 4.2.11
@@ -16288,7 +16663,7 @@ snapshots:
 
   jiti@1.21.6: {}
 
-  jiti@2.0.0: {}
+  jiti@2.3.1: {}
 
   jmespath@0.16.0: {}
 
@@ -16359,17 +16734,15 @@ snapshots:
 
   jsesc@0.5.0: {}
 
-  jsesc@2.5.2: {}
-
   jsesc@3.0.2: {}
 
   json-buffer@3.0.1: {}
 
-  json-editor-vue@0.17.0(@lezer/common@1.2.1)(vue@2.7.16):
+  json-editor-vue@0.17.0(@lezer/common@1.2.2)(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      vanilla-jsoneditor: 1.0.6(@lezer/common@1.2.1)
-      vue: 2.7.16
-      vue-demi: 0.14.10(vue@2.7.16)
+      vanilla-jsoneditor: 1.0.6(@lezer/common@1.2.2)
+      vue: 3.5.11(typescript@5.6.2)
+      vue-demi: 0.14.10(vue@3.5.11(typescript@5.6.2))
     transitivePeerDependencies:
       - '@lezer/common'
 
@@ -16531,7 +16904,7 @@ snapshots:
       debug: 4.3.7(supports-color@5.5.0)
       execa: 8.0.1
       lilconfig: 3.1.2
-      listr2: 8.2.4
+      listr2: 8.2.5
       micromatch: 4.0.8
       pidtree: 0.6.0
       string-argv: 0.3.2
@@ -16539,7 +16912,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  listr2@8.2.4:
+  listr2@8.2.5:
     dependencies:
       cli-truncate: 4.0.0
       colorette: 2.0.20
@@ -16879,7 +17252,7 @@ snapshots:
     dependencies:
       obliterator: 2.0.4
 
-  moment-timezone@0.5.45:
+  moment-timezone@0.5.46:
     dependencies:
       moment: 2.30.1
 
@@ -16937,6 +17310,8 @@ snapshots:
 
   mri@1.2.0: {}
 
+  mrmime@2.0.0: {}
+
   ms@2.0.0: {}
 
   ms@2.1.3: {}
@@ -17237,7 +17612,14 @@ snapshots:
 
   oniguruma-to-js@0.4.3:
     dependencies:
-      regex: 4.3.2
+      regex: 4.3.3
+
+  open@10.1.0:
+    dependencies:
+      default-browser: 5.2.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 3.1.0
 
   open@8.4.2:
     dependencies:
@@ -17321,7 +17703,7 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
-  package-manager-detector@0.2.0: {}
+  package-manager-detector@0.2.1: {}
 
   pandemonium@2.4.1:
     dependencies:
@@ -17358,14 +17740,14 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.24.7
+      '@babel/code-frame': 7.25.7
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
   parse-json@8.1.0:
     dependencies:
-      '@babel/code-frame': 7.24.7
+      '@babel/code-frame': 7.25.7
       index-to-position: 0.1.2
       type-fest: 4.26.1
 
@@ -17519,39 +17901,39 @@ snapshots:
 
   pify@3.0.0: {}
 
-  pinia-plugin-persistedstate@4.0.2(pinia@2.2.4(typescript@5.6.2)(vue@2.7.16))(rollup@2.79.2)(webpack-sources@3.2.3):
+  pinia-plugin-persistedstate@4.1.1(pinia@2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2)))(rollup@2.79.2)(webpack-sources@3.2.3):
     dependencies:
       '@nuxt/kit': 3.13.2(rollup@2.79.2)(webpack-sources@3.2.3)
-      deep-pick-omit: 1.2.0
+      deep-pick-omit: 1.2.1
       defu: 6.1.4
       destr: 2.0.3
     optionalDependencies:
-      pinia: 2.2.4(typescript@5.6.2)(vue@2.7.16)
+      pinia: 2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2))
     transitivePeerDependencies:
       - magicast
       - rollup
       - supports-color
       - webpack-sources
 
-  pinia-plugin-persistedstate@4.0.2(pinia@2.2.4(typescript@5.6.2)(vue@2.7.16))(rollup@4.23.0)(webpack-sources@3.2.3):
+  pinia-plugin-persistedstate@4.1.1(pinia@2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2)))(rollup@4.24.0)(webpack-sources@3.2.3):
     dependencies:
-      '@nuxt/kit': 3.13.2(rollup@4.23.0)(webpack-sources@3.2.3)
-      deep-pick-omit: 1.2.0
+      '@nuxt/kit': 3.13.2(rollup@4.24.0)(webpack-sources@3.2.3)
+      deep-pick-omit: 1.2.1
       defu: 6.1.4
       destr: 2.0.3
     optionalDependencies:
-      pinia: 2.2.4(typescript@5.6.2)(vue@2.7.16)
+      pinia: 2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2))
     transitivePeerDependencies:
       - magicast
       - rollup
       - supports-color
       - webpack-sources
 
-  pinia@2.2.4(typescript@5.6.2)(vue@2.7.16):
+  pinia@2.2.4(typescript@5.6.2)(vue@3.5.11(typescript@5.6.2)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 2.7.16
-      vue-demi: 0.14.10(vue@2.7.16)
+      vue: 3.5.11(typescript@5.6.2)
+      vue-demi: 0.14.10(vue@3.5.11(typescript@5.6.2))
     optionalDependencies:
       typescript: 5.6.2
 
@@ -17622,7 +18004,7 @@ snapshots:
 
   postgres-range@1.1.4: {}
 
-  preact@10.24.1: {}
+  preact@10.24.2: {}
 
   prebuild-install@7.1.2:
     dependencies:
@@ -17645,9 +18027,6 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier@2.8.8:
-    optional: true
-
   prettier@3.3.3: {}
 
   pretty-bytes@5.6.0: {}
@@ -17708,10 +18087,10 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  puppeteer-core@23.4.1:
+  puppeteer-core@23.5.0:
     dependencies:
       '@puppeteer/browsers': 2.4.0
-      chromium-bidi: 0.6.5(devtools-protocol@0.0.1342118)
+      chromium-bidi: 0.8.0(devtools-protocol@0.0.1342118)
       debug: 4.3.7(supports-color@5.5.0)
       devtools-protocol: 0.0.1342118
       typed-query-selector: 2.12.0
@@ -17721,13 +18100,13 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  puppeteer@23.4.1(typescript@5.6.2):
+  puppeteer@23.5.0(typescript@5.6.2):
     dependencies:
       '@puppeteer/browsers': 2.4.0
-      chromium-bidi: 0.6.5(devtools-protocol@0.0.1342118)
+      chromium-bidi: 0.8.0(devtools-protocol@0.0.1342118)
       cosmiconfig: 9.0.0(typescript@5.6.2)
       devtools-protocol: 0.0.1342118
-      puppeteer-core: 23.4.1
+      puppeteer-core: 23.5.0
       typed-query-selector: 2.12.0
     transitivePeerDependencies:
       - bufferutil
@@ -17767,9 +18146,9 @@ snapshots:
 
   range-parser@1.2.1: {}
 
-  rate-limit-redis@4.2.0(express-rate-limit@7.4.0(express@4.21.0)):
+  rate-limit-redis@4.2.0(express-rate-limit@7.4.1(express@4.21.0)):
     dependencies:
-      express-rate-limit: 7.4.0(express@4.21.0)
+      express-rate-limit: 7.4.1(express@4.21.0)
 
   raw-body@2.5.2:
     dependencies:
@@ -17852,7 +18231,7 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  readdirp@4.0.1: {}
+  readdirp@4.0.2: {}
 
   rechoir@0.6.2:
     dependencies:
@@ -17895,11 +18274,11 @@ snapshots:
 
   regenerator-transform@0.15.2:
     dependencies:
-      '@babel/runtime': 7.25.6
+      '@babel/runtime': 7.25.7
 
   regex-parser@2.3.0: {}
 
-  regex@4.3.2: {}
+  regex@4.3.3: {}
 
   regexp-ast-analysis@0.7.1:
     dependencies:
@@ -17908,29 +18287,31 @@ snapshots:
 
   regexp-tree@0.1.27: {}
 
-  regexp.prototype.flags@1.5.2:
+  regexp.prototype.flags@1.5.3:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
       es-errors: 1.3.0
       set-function-name: 2.0.2
 
-  regexpu-core@5.3.2:
+  regexpu-core@6.1.1:
     dependencies:
-      '@babel/regjsgen': 0.8.0
       regenerate: 1.4.2
       regenerate-unicode-properties: 10.2.0
-      regjsparser: 0.9.1
+      regjsgen: 0.8.0
+      regjsparser: 0.11.1
       unicode-match-property-ecmascript: 2.0.0
       unicode-match-property-value-ecmascript: 2.2.0
 
+  regjsgen@0.8.0: {}
+
   regjsparser@0.10.0:
     dependencies:
       jsesc: 0.5.0
 
-  regjsparser@0.9.1:
+  regjsparser@0.11.1:
     dependencies:
-      jsesc: 0.5.0
+      jsesc: 3.0.2
 
   relateurl@0.2.7: {}
 
@@ -18017,30 +18398,32 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  rollup@4.23.0:
+  rollup@4.24.0:
     dependencies:
       '@types/estree': 1.0.6
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.23.0
-      '@rollup/rollup-android-arm64': 4.23.0
-      '@rollup/rollup-darwin-arm64': 4.23.0
-      '@rollup/rollup-darwin-x64': 4.23.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.23.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.23.0
-      '@rollup/rollup-linux-arm64-gnu': 4.23.0
-      '@rollup/rollup-linux-arm64-musl': 4.23.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.23.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.23.0
-      '@rollup/rollup-linux-s390x-gnu': 4.23.0
-      '@rollup/rollup-linux-x64-gnu': 4.23.0
-      '@rollup/rollup-linux-x64-musl': 4.23.0
-      '@rollup/rollup-win32-arm64-msvc': 4.23.0
-      '@rollup/rollup-win32-ia32-msvc': 4.23.0
-      '@rollup/rollup-win32-x64-msvc': 4.23.0
+      '@rollup/rollup-android-arm-eabi': 4.24.0
+      '@rollup/rollup-android-arm64': 4.24.0
+      '@rollup/rollup-darwin-arm64': 4.24.0
+      '@rollup/rollup-darwin-x64': 4.24.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.24.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.24.0
+      '@rollup/rollup-linux-arm64-gnu': 4.24.0
+      '@rollup/rollup-linux-arm64-musl': 4.24.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.24.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.24.0
+      '@rollup/rollup-linux-s390x-gnu': 4.24.0
+      '@rollup/rollup-linux-x64-gnu': 4.24.0
+      '@rollup/rollup-linux-x64-musl': 4.24.0
+      '@rollup/rollup-win32-arm64-msvc': 4.24.0
+      '@rollup/rollup-win32-ia32-msvc': 4.24.0
+      '@rollup/rollup-win32-x64-msvc': 4.24.0
       fsevents: 2.3.3
 
   rrweb-cssom@0.7.1: {}
 
+  run-applescript@7.0.0: {}
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -18066,10 +18449,6 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass@1.32.13:
-    dependencies:
-      chokidar: 3.6.0
-
   sass@1.78.0:
     dependencies:
       chokidar: 3.6.0
@@ -18150,15 +18529,15 @@ snapshots:
 
   sequelize-pool@7.1.0: {}
 
-  sequelize-typescript@2.1.6(@types/node@22.7.4)(@types/validator@13.12.2)(reflect-metadata@0.2.2)(sequelize@6.37.3(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)):
+  sequelize-typescript@2.1.6(@types/node@22.7.4)(@types/validator@13.12.2)(reflect-metadata@0.2.2)(sequelize@6.37.4(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)):
     dependencies:
       '@types/node': 22.7.4
       '@types/validator': 13.12.2
       glob: 7.2.0
       reflect-metadata: 0.2.2
-      sequelize: 6.37.3(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)
+      sequelize: 6.37.4(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1)
 
-  sequelize@6.37.3(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1):
+  sequelize@6.37.4(mariadb@3.3.2)(pg-hstore@2.3.4)(pg@8.13.0)(tedious@18.6.1):
     dependencies:
       '@types/debug': 4.1.12
       '@types/validator': 13.12.2
@@ -18167,7 +18546,7 @@ snapshots:
       inflection: 1.13.4
       lodash: 4.17.21
       moment: 2.30.1
-      moment-timezone: 0.5.45
+      moment-timezone: 0.5.46
       pg-connection-string: 2.7.0
       retry-as-promised: 7.0.4
       semver: 7.6.3
@@ -18286,13 +18665,13 @@ snapshots:
       interpret: 1.4.0
       rechoir: 0.6.2
 
-  shiki@1.21.0:
+  shiki@1.21.1:
     dependencies:
-      '@shikijs/core': 1.21.0
-      '@shikijs/engine-javascript': 1.21.0
-      '@shikijs/engine-oniguruma': 1.21.0
-      '@shikijs/types': 1.21.0
-      '@shikijs/vscode-textmate': 9.2.2
+      '@shikijs/core': 1.21.1
+      '@shikijs/engine-javascript': 1.21.1
+      '@shikijs/engine-oniguruma': 1.21.1
+      '@shikijs/types': 1.21.1
+      '@shikijs/vscode-textmate': 9.3.0
       '@types/hast': 3.0.4
 
   side-channel@1.0.6:
@@ -18328,6 +18707,12 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
+  sirv@2.0.4:
+    dependencies:
+      '@polka/url': 1.0.0-next.28
+      mrmime: 2.0.0
+      totalist: 3.0.1
+
   sisteransi@1.0.5: {}
 
   sitemap@8.0.0:
@@ -18372,7 +18757,8 @@ snapshots:
       ip-address: 9.0.5
       smart-buffer: 4.2.0
 
-  sortablejs@1.10.2: {}
+  sortablejs@1.10.2:
+    optional: true
 
   source-map-js@1.2.1: {}
 
@@ -18513,7 +18899,7 @@ snapshots:
       gopd: 1.0.1
       has-symbols: 1.0.3
       internal-slot: 1.0.7
-      regexp.prototype.flags: 1.5.2
+      regexp.prototype.flags: 1.5.3
       set-function-name: 2.0.2
       side-channel: 1.0.6
 
@@ -18655,6 +19041,8 @@ snapshots:
 
   svg-parser@2.0.4: {}
 
+  svg-tags@1.0.0: {}
+
   svgo@3.3.2:
     dependencies:
       '@trysound/sax': 0.2.0
@@ -18829,11 +19217,11 @@ snapshots:
 
   tinyspy@3.0.2: {}
 
-  tldts-core@6.1.48: {}
+  tldts-core@6.1.50: {}
 
-  tldts@6.1.48:
+  tldts@6.1.50:
     dependencies:
-      tldts-core: 6.1.48
+      tldts-core: 6.1.50
 
   tmpl@1.0.5: {}
 
@@ -18855,6 +19243,8 @@ snapshots:
 
   toposort-class@1.0.1: {}
 
+  totalist@3.0.1: {}
+
   touch@3.1.1: {}
 
   tough-cookie@2.5.0:
@@ -18864,7 +19254,7 @@ snapshots:
 
   tough-cookie@5.0.0:
     dependencies:
-      tldts: 6.1.48
+      tldts: 6.1.50
 
   tr46@0.0.3: {}
 
@@ -18890,7 +19280,7 @@ snapshots:
 
   ts-deepmerge@6.2.1: {}
 
-  ts-jest@29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2):
+  ts-jest@29.2.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(jest@29.7.0(@types/node@22.7.4)(ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2)))(typescript@5.6.2):
     dependencies:
       bs-logger: 0.2.6
       ejs: 3.1.10
@@ -18904,10 +19294,10 @@ snapshots:
       typescript: 5.6.2
       yargs-parser: 21.1.1
     optionalDependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.25.7
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      babel-jest: 29.7.0(@babel/core@7.25.2)
+      babel-jest: 29.7.0(@babel/core@7.25.7)
 
   ts-loader@9.5.1(typescript@5.6.2)(webpack@5.95.0(webpack-cli@5.1.4)):
     dependencies:
@@ -19142,9 +19532,9 @@ snapshots:
       - rollup
       - webpack-sources
 
-  unimport@3.13.1(rollup@4.23.0)(webpack-sources@3.2.3):
+  unimport@3.13.1(rollup@4.24.0)(webpack-sources@3.2.3):
     dependencies:
-      '@rollup/pluginutils': 5.1.2(rollup@4.23.0)
+      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
       acorn: 8.12.1
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
@@ -19204,7 +19594,7 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin-icons@0.19.3(@vue/compiler-sfc@2.7.16)(vue-template-compiler@2.7.16)(webpack-sources@3.2.3):
+  unplugin-icons@0.19.3(@vue/compiler-sfc@3.5.11)(vue-template-compiler@2.7.16)(webpack-sources@3.2.3):
     dependencies:
       '@antfu/install-pkg': 0.4.1
       '@antfu/utils': 0.7.10
@@ -19214,13 +19604,13 @@ snapshots:
       local-pkg: 0.5.0
       unplugin: 1.14.1(webpack-sources@3.2.3)
     optionalDependencies:
-      '@vue/compiler-sfc': 2.7.16
+      '@vue/compiler-sfc': 3.5.11
       vue-template-compiler: 2.7.16
     transitivePeerDependencies:
       - supports-color
       - webpack-sources
 
-  unplugin-vue-components@0.27.4(@babel/parser@7.25.6)(@nuxt/kit@3.13.2(rollup@2.79.2)(webpack-sources@3.2.3))(rollup@2.79.2)(vue@2.7.16)(webpack-sources@3.2.3):
+  unplugin-vue-components@0.27.4(@babel/parser@7.25.7)(@nuxt/kit@3.13.2(rollup@2.79.2)(webpack-sources@3.2.3))(rollup@2.79.2)(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.2(rollup@2.79.2)
@@ -19232,19 +19622,19 @@ snapshots:
       minimatch: 9.0.5
       mlly: 1.7.1
       unplugin: 1.14.1(webpack-sources@3.2.3)
-      vue: 2.7.16
+      vue: 3.5.11(typescript@5.6.2)
     optionalDependencies:
-      '@babel/parser': 7.25.6
+      '@babel/parser': 7.25.7
       '@nuxt/kit': 3.13.2(rollup@2.79.2)(webpack-sources@3.2.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - webpack-sources
 
-  unplugin-vue-components@0.27.4(@babel/parser@7.25.6)(@nuxt/kit@3.13.2(rollup@4.23.0)(webpack-sources@3.2.3))(rollup@4.23.0)(vue@2.7.16)(webpack-sources@3.2.3):
+  unplugin-vue-components@0.27.4(@babel/parser@7.25.7)(@nuxt/kit@3.13.2(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0)(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.2(rollup@4.23.0)
+      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
       chokidar: 3.6.0
       debug: 4.3.7(supports-color@5.5.0)
       fast-glob: 3.3.2
@@ -19253,10 +19643,10 @@ snapshots:
       minimatch: 9.0.5
       mlly: 1.7.1
       unplugin: 1.14.1(webpack-sources@3.2.3)
-      vue: 2.7.16
+      vue: 3.5.11(typescript@5.6.2)
     optionalDependencies:
-      '@babel/parser': 7.25.6
-      '@nuxt/kit': 3.13.2(rollup@4.23.0)(webpack-sources@3.2.3)
+      '@babel/parser': 7.25.7
+      '@nuxt/kit': 3.13.2(rollup@4.24.0)(webpack-sources@3.2.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -19269,13 +19659,13 @@ snapshots:
     optionalDependencies:
       webpack-sources: 3.2.3
 
-  untyped@1.5.0:
+  untyped@1.5.1:
     dependencies:
-      '@babel/core': 7.25.2
-      '@babel/standalone': 7.25.6
-      '@babel/types': 7.25.6
+      '@babel/core': 7.25.7
+      '@babel/standalone': 7.25.7
+      '@babel/types': 7.25.7
       defu: 6.1.4
-      jiti: 2.0.0
+      jiti: 2.3.1
       mri: 1.2.0
       scule: 1.3.0
     transitivePeerDependencies:
@@ -19283,6 +19673,8 @@ snapshots:
 
   upath@1.2.0: {}
 
+  upath@2.0.1: {}
+
   update-browserslist-db@1.1.1(browserslist@4.24.0):
     dependencies:
       browserslist: 4.24.0
@@ -19324,9 +19716,9 @@ snapshots:
 
   validator@13.12.0: {}
 
-  vanilla-jsoneditor@1.0.6(@lezer/common@1.2.1):
+  vanilla-jsoneditor@1.0.6(@lezer/common@1.2.2):
     dependencies:
-      '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.1)
+      '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
       '@codemirror/commands': 6.6.2
       '@codemirror/lang-json': 6.0.1
       '@codemirror/language': 6.10.3
@@ -19378,24 +19770,11 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-node@2.1.1(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1):
+  vite-hot-client@0.2.3(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)):
     dependencies:
-      cac: 6.7.14
-      debug: 4.3.7(supports-color@5.5.0)
-      pathe: 1.1.2
-      vite: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
 
-  vite-node@2.1.1(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1):
+  vite-node@2.1.2(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1):
     dependencies:
       cac: 6.7.14
       debug: 4.3.7(supports-color@5.5.0)
@@ -19411,14 +19790,13 @@ snapshots:
       - sugarss
       - supports-color
       - terser
-    optional: true
 
   vite-plugin-full-reload@1.2.0:
     dependencies:
       picocolors: 1.1.0
       picomatch: 2.3.1
 
-  vite-plugin-html@3.2.2(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)):
+  vite-plugin-html@3.2.2(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       colorette: 2.0.20
@@ -19432,28 +19810,51 @@ snapshots:
       html-minifier-terser: 6.1.0
       node-html-parser: 5.4.2
       pathe: 0.2.0
-      vite: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
 
-  vite-plugin-mkcert@1.17.6(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)):
+  vite-plugin-inspect@0.8.7(@nuxt/kit@3.13.2(rollup@2.79.2)(webpack-sources@3.2.3))(rollup@2.79.2)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)):
     dependencies:
-      '@octokit/rest': 20.1.1
-      axios: 1.7.7(debug@4.3.7)
+      '@antfu/utils': 0.7.10
+      '@rollup/pluginutils': 5.1.2(rollup@2.79.2)
       debug: 4.3.7(supports-color@5.5.0)
+      error-stack-parser-es: 0.1.5
+      fs-extra: 11.2.0
+      open: 10.1.0
+      perfect-debounce: 1.0.0
       picocolors: 1.1.0
-      vite: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
+      sirv: 2.0.4
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
+    optionalDependencies:
+      '@nuxt/kit': 3.13.2(rollup@2.79.2)(webpack-sources@3.2.3)
     transitivePeerDependencies:
+      - rollup
       - supports-color
 
-  vite-plugin-pwa@0.20.5(@vite-pwa/assets-generator@0.2.6)(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))(workbox-build@7.1.0(@types/babel__core@7.20.5))(workbox-window@7.1.0):
+  vite-plugin-inspect@0.8.7(@nuxt/kit@3.13.2(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)):
     dependencies:
+      '@antfu/utils': 0.7.10
+      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
       debug: 4.3.7(supports-color@5.5.0)
-      pretty-bytes: 6.1.1
-      tinyglobby: 0.2.9
-      vite: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
-      workbox-build: 7.1.0(@types/babel__core@7.20.5)
-      workbox-window: 7.1.0
+      error-stack-parser-es: 0.1.5
+      fs-extra: 11.2.0
+      open: 10.1.0
+      perfect-debounce: 1.0.0
+      picocolors: 1.1.0
+      sirv: 2.0.4
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
     optionalDependencies:
-      '@vite-pwa/assets-generator': 0.2.6
+      '@nuxt/kit': 3.13.2(rollup@4.24.0)(webpack-sources@3.2.3)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  vite-plugin-mkcert@1.17.6(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)):
+    dependencies:
+      '@octokit/rest': 20.1.1
+      axios: 1.7.7(debug@4.3.7)
+      debug: 4.3.7(supports-color@5.5.0)
+      picocolors: 1.1.0
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -19470,32 +19871,79 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-webfont-dl@3.9.5(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)):
+  vite-plugin-vue-devtools@7.4.6(@nuxt/kit@3.13.2(rollup@2.79.2)(webpack-sources@3.2.3))(rollup@2.79.2)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2)):
+    dependencies:
+      '@vue/devtools-core': 7.4.6(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))
+      '@vue/devtools-kit': 7.4.6
+      '@vue/devtools-shared': 7.4.6
+      execa: 8.0.1
+      sirv: 2.0.4
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
+      vite-plugin-inspect: 0.8.7(@nuxt/kit@3.13.2(rollup@2.79.2)(webpack-sources@3.2.3))(rollup@2.79.2)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
+      vite-plugin-vue-inspector: 5.2.0(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - rollup
+      - supports-color
+      - vue
+
+  vite-plugin-vue-devtools@7.4.6(@nuxt/kit@3.13.2(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2)):
+    dependencies:
+      '@vue/devtools-core': 7.4.6(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))
+      '@vue/devtools-kit': 7.4.6
+      '@vue/devtools-shared': 7.4.6
+      execa: 8.0.1
+      sirv: 2.0.4
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
+      vite-plugin-inspect: 0.8.7(@nuxt/kit@3.13.2(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
+      vite-plugin-vue-inspector: 5.2.0(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - rollup
+      - supports-color
+      - vue
+
+  vite-plugin-vue-inspector@5.2.0(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)):
+    dependencies:
+      '@babel/core': 7.25.7
+      '@babel/plugin-proposal-decorators': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-syntax-import-attributes': 7.25.7(@babel/core@7.25.7)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.7)
+      '@babel/plugin-transform-typescript': 7.25.7(@babel/core@7.25.7)
+      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.7)
+      '@vue/compiler-dom': 3.5.11
+      kolorist: 1.8.0
+      magic-string: 0.30.11
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-vuetify@2.0.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))(vuetify@3.7.2):
+    dependencies:
+      '@vuetify/loader-shared': 2.0.3(vue@3.5.11(typescript@5.6.2))(vuetify@3.7.2(typescript@5.6.2)(vite-plugin-vuetify@2.0.4)(vue@3.5.11(typescript@5.6.2)))
+      debug: 4.3.7(supports-color@5.5.0)
+      upath: 2.0.1
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
+      vue: 3.5.11(typescript@5.6.2)
+      vuetify: 3.7.2(typescript@5.6.2)(vite-plugin-vuetify@2.0.4)(vue@3.5.11(typescript@5.6.2))
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-webfont-dl@3.9.5(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)):
     dependencies:
       axios: 1.7.7(debug@4.3.7)
       clean-css: 5.3.3
       flat-cache: 5.0.0
       picocolors: 1.1.0
-      vite: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
+      vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
     transitivePeerDependencies:
       - debug
 
-  vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1):
-    dependencies:
-      esbuild: 0.21.5
-      postcss: 8.4.47
-      rollup: 4.23.0
-    optionalDependencies:
-      '@types/node': 22.7.4
-      fsevents: 2.3.3
-      sass: 1.32.13
-      terser: 5.34.1
-
   vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
-      rollup: 4.23.0
+      rollup: 4.24.0
     optionalDependencies:
       '@types/node': 22.7.4
       fsevents: 2.3.3
@@ -19506,20 +19954,20 @@ snapshots:
     dependencies:
       '@docsearch/css': 3.6.2
       '@docsearch/js': 3.6.2(@algolia/client-search@4.24.0)(search-insights@2.13.0)
-      '@shikijs/core': 1.21.0
-      '@shikijs/transformers': 1.21.0
+      '@shikijs/core': 1.21.1
+      '@shikijs/transformers': 1.21.1
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.1.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.10(typescript@5.6.2))
+      '@vitejs/plugin-vue': 5.1.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))
       '@vue/devtools-api': 7.4.6
-      '@vue/shared': 3.5.10
-      '@vueuse/core': 11.1.0(vue@3.5.10(typescript@5.6.2))
-      '@vueuse/integrations': 11.1.0(axios@1.7.7)(focus-trap@7.6.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(sortablejs@1.10.2)(vue@3.5.10(typescript@5.6.2))
+      '@vue/shared': 3.5.11
+      '@vueuse/core': 11.1.0(vue@3.5.11(typescript@5.6.2))
+      '@vueuse/integrations': 11.1.0(axios@1.7.7)(focus-trap@7.6.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(sortablejs@1.10.2)(vue@3.5.11(typescript@5.6.2))
       focus-trap: 7.6.0
       mark.js: 8.11.1
       minisearch: 7.1.0
-      shiki: 1.21.0
+      shiki: 1.21.1
       vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
-      vue: 3.5.10(typescript@5.6.2)
+      vue: 3.5.11(typescript@5.6.2)
     optionalDependencies:
       postcss: 8.4.47
     transitivePeerDependencies:
@@ -19550,50 +19998,15 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@2.1.1(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.32.13)(terser@5.34.1):
+  vitest@2.1.2(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1):
     dependencies:
-      '@vitest/expect': 2.1.1
-      '@vitest/mocker': 2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1))
-      '@vitest/pretty-format': 2.1.1
-      '@vitest/runner': 2.1.1
-      '@vitest/snapshot': 2.1.1
-      '@vitest/spy': 2.1.1
-      '@vitest/utils': 2.1.1
-      chai: 5.1.1
-      debug: 4.3.7(supports-color@5.5.0)
-      magic-string: 0.30.11
-      pathe: 1.1.2
-      std-env: 3.7.0
-      tinybench: 2.9.0
-      tinyexec: 0.3.0
-      tinypool: 1.0.1
-      tinyrainbow: 1.2.0
-      vite: 5.4.8(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
-      vite-node: 2.1.1(@types/node@22.7.4)(sass@1.32.13)(terser@5.34.1)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 22.7.4
-      jsdom: 25.0.1
-    transitivePeerDependencies:
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-
-  vitest@2.1.1(@types/node@22.7.4)(jsdom@25.0.1)(sass@1.79.4)(terser@5.34.1):
-    dependencies:
-      '@vitest/expect': 2.1.1
-      '@vitest/mocker': 2.1.1(@vitest/spy@2.1.1)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
-      '@vitest/pretty-format': 2.1.1
-      '@vitest/runner': 2.1.1
-      '@vitest/snapshot': 2.1.1
-      '@vitest/spy': 2.1.1
-      '@vitest/utils': 2.1.1
+      '@vitest/expect': 2.1.2
+      '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))
+      '@vitest/pretty-format': 2.1.2
+      '@vitest/runner': 2.1.2
+      '@vitest/snapshot': 2.1.2
+      '@vitest/spy': 2.1.2
+      '@vitest/utils': 2.1.2
       chai: 5.1.1
       debug: 4.3.7(supports-color@5.5.0)
       magic-string: 0.30.11
@@ -19604,7 +20017,7 @@ snapshots:
       tinypool: 1.0.1
       tinyrainbow: 1.2.0
       vite: 5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
-      vite-node: 2.1.1(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
+      vite-node: 2.1.2(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.7.4
@@ -19619,44 +20032,40 @@ snapshots:
       - sugarss
       - supports-color
       - terser
-    optional: true
 
   vscode-uri@3.0.8: {}
 
-  vue-demi@0.13.11(vue@2.7.16):
+  vue-demi@0.13.11(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      vue: 2.7.16
+      vue: 3.5.11(typescript@5.6.2)
 
-  vue-demi@0.14.10(vue@2.7.16):
+  vue-demi@0.14.10(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      vue: 2.7.16
+      vue: 3.5.11(typescript@5.6.2)
 
-  vue-demi@0.14.10(vue@3.5.10(typescript@5.6.2)):
+  vue-dompurify-html@5.1.0(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      vue: 3.5.10(typescript@5.6.2)
+      dompurify: 3.1.7
+      vue: 3.5.11(typescript@5.6.2)
 
-  vue-dompurify-html@4.1.4(vue@2.7.16):
+  vue-draggable-plus@0.5.3(@types/sortablejs@1.15.8):
     dependencies:
-      dompurify: 3.1.7
-      vue: 2.7.16
-      vue-demi: 0.14.10(vue@2.7.16)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
+      '@types/sortablejs': 1.15.8
 
-  vue-echarts@7.0.3(@vue/runtime-core@3.5.10)(echarts@5.5.1)(vue@2.7.16):
+  vue-echarts@7.0.3(@vue/runtime-core@3.5.11)(echarts@5.5.1)(vue@3.5.11(typescript@5.6.2)):
     dependencies:
       echarts: 5.5.1
-      vue: 2.7.16
-      vue-demi: 0.13.11(vue@2.7.16)
+      vue: 3.5.11(typescript@5.6.2)
+      vue-demi: 0.13.11(vue@3.5.11(typescript@5.6.2))
     optionalDependencies:
-      '@vue/runtime-core': 3.5.10
+      '@vue/runtime-core': 3.5.11
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  vue-eslint-parser@9.4.3(eslint@9.11.1(jiti@2.0.0)):
+  vue-eslint-parser@9.4.3(eslint@9.12.0(jiti@2.3.1)):
     dependencies:
       debug: 4.3.7(supports-color@5.5.0)
-      eslint: 9.11.1(jiti@2.0.0)
+      eslint: 9.12.0(jiti@2.3.1)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
@@ -19666,21 +20075,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-gtag@1.16.1(vue@2.7.16):
+  vue-gtag@2.0.1(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      vue: 2.7.16
+      vue: 3.5.11(typescript@5.6.2)
 
-  vue-i18n@8.28.2(vue@2.7.16):
+  vue-i18n@9.14.1(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      vue: 2.7.16
+      '@intlify/core-base': 9.14.1
+      '@intlify/shared': 9.14.1
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.11(typescript@5.6.2)
 
-  vue-recaptcha@1.3.0(vue@2.7.16):
+  vue-recaptcha@2.0.3(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      vue: 2.7.16
+      vue: 3.5.11(typescript@5.6.2)
+      vue-demi: 0.13.11(vue@3.5.11(typescript@5.6.2))
 
-  vue-router@3.6.5(vue@2.7.16):
+  vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      vue: 2.7.16
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.11(typescript@5.6.2)
 
   vue-template-compiler@2.7.16:
     dependencies:
@@ -19695,28 +20109,22 @@ snapshots:
       semver: 7.6.3
       typescript: 5.6.2
 
-  vue@2.7.16:
-    dependencies:
-      '@vue/compiler-sfc': 2.7.16
-      csstype: 3.1.3
-
-  vue@3.5.10(typescript@5.6.2):
+  vue@3.5.11(typescript@5.6.2):
     dependencies:
-      '@vue/compiler-dom': 3.5.10
-      '@vue/compiler-sfc': 3.5.10
-      '@vue/runtime-dom': 3.5.10
-      '@vue/server-renderer': 3.5.10(vue@3.5.10(typescript@5.6.2))
-      '@vue/shared': 3.5.10
+      '@vue/compiler-dom': 3.5.11
+      '@vue/compiler-sfc': 3.5.11
+      '@vue/runtime-dom': 3.5.11
+      '@vue/server-renderer': 3.5.11(vue@3.5.11(typescript@5.6.2))
+      '@vue/shared': 3.5.11
     optionalDependencies:
       typescript: 5.6.2
 
-  vuedraggable@2.24.3:
+  vuetify@3.7.2(typescript@5.6.2)(vite-plugin-vuetify@2.0.4)(vue@3.5.11(typescript@5.6.2)):
     dependencies:
-      sortablejs: 1.10.2
-
-  vuetify@2.7.2(vue@2.7.16):
-    dependencies:
-      vue: 2.7.16
+      vue: 3.5.11(typescript@5.6.2)
+    optionalDependencies:
+      typescript: 5.6.2
+      vite-plugin-vuetify: 2.0.4(vite@5.4.8(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))(vue@3.5.11(typescript@5.6.2))(vuetify@3.7.2)
 
   w3c-keyname@2.2.8: {}
 
@@ -19888,12 +20296,12 @@ snapshots:
 
   wildcard@2.0.1: {}
 
-  winston-daily-rotate-file@5.0.0(winston@3.14.2):
+  winston-daily-rotate-file@5.0.0(winston@3.15.0):
     dependencies:
       file-stream-rotator: 0.6.1
       object-hash: 3.0.0
       triple-beam: 1.4.1
-      winston: 3.14.2
+      winston: 3.15.0
       winston-transport: 4.8.0
 
   winston-transport@4.8.0:
@@ -19902,7 +20310,7 @@ snapshots:
       readable-stream: 4.5.2
       triple-beam: 1.4.1
 
-  winston@3.14.2:
+  winston@3.15.0:
     dependencies:
       '@colors/colors': 1.6.0
       '@dabh/diagnostics': 2.0.3
@@ -19938,10 +20346,10 @@ snapshots:
   workbox-build@7.1.0(@types/babel__core@7.20.5):
     dependencies:
       '@apideck/better-ajv-errors': 0.3.6(ajv@8.17.1)
-      '@babel/core': 7.25.2
-      '@babel/preset-env': 7.25.4(@babel/core@7.25.2)
-      '@babel/runtime': 7.25.6
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(@types/babel__core@7.20.5)(rollup@2.79.2)
+      '@babel/core': 7.25.7
+      '@babel/preset-env': 7.25.7(@babel/core@7.25.7)
+      '@babel/runtime': 7.25.7
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.25.7)(@types/babel__core@7.20.5)(rollup@2.79.2)
       '@rollup/plugin-node-resolve': 15.3.0(rollup@2.79.2)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.2)
       '@rollup/plugin-terser': 0.4.4(rollup@2.79.2)