diff --git a/web/package-lock.json b/web/package-lock.json
index ea8147c1..4a8a086e 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -29,7 +29,7 @@
         "vue-maplibre-compare": "1.0.26",
         "vue-router": "5.0.6",
         "vuedraggable": "4.1.0",
-        "vuetify": "3.12.6"
+        "vuetify": "4.0.7"
       },
       "devDependencies": {
         "@sentry/vite-plugin": "5.2.1",
@@ -8588,9 +8588,9 @@
       "license": "MIT"
     },
     "node_modules/vuetify": {
-      "version": "3.12.6",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.12.6.tgz",
-      "integrity": "sha512-ARfflEJu+pKk+vya059qsUT/xUnYf0K6sIZdJwVh5w+kR6CJCXMQN1MONABb3Jm2kmhN/AXB4W5/MjYiKnVAFg==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.0.7.tgz",
+      "integrity": "sha512-SV+YJkBmudY3s9qfZO2ZGUsrD0TDQU8pMBH1ERga9AEyjGvioZuXXh93V9wHxXJphvqRC2NW10Nt2lW9IZQcPw==",
       "license": "MIT",
       "funding": {
         "type": "github",
diff --git a/web/package.json b/web/package.json
index e3d6c489..2d7c85e8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -37,7 +37,7 @@
     "vue-maplibre-compare": "1.0.26",
     "vue-router": "5.0.6",
     "vuedraggable": "4.1.0",
-    "vuetify": "3.12.6"
+    "vuetify": "4.0.7"
   },
   "devDependencies": {
     "@sentry/vite-plugin": "5.2.1",
diff --git a/web/src/components/map/ToggleCompareMap.vue b/web/src/components/map/ToggleCompareMap.vue
index 9e2b6a10..238d473c 100644
--- a/web/src/components/map/ToggleCompareMap.vue
+++ b/web/src/components/map/ToggleCompareMap.vue
@@ -242,8 +242,8 @@ watch(
 
 const swiperColor = computed(() => {
   return {
-    swiper: theme.global.current.value.colors.primary,
-    arrow: theme.global.current.value.colors["button-text"],
+    swiper: theme.global.current.value.colors.primary as string,
+    arrow: theme.global.current.value.colors["button-text"] as string,
   };
 });
 </script>
diff --git a/web/src/components/projects/AccessControl.vue b/web/src/components/projects/AccessControl.vue
index 4049f164..5d577dd5 100644
--- a/web/src/components/projects/AccessControl.vue
+++ b/web/src/components/projects/AccessControl.vue
@@ -276,11 +276,11 @@ onMounted(() => {
               <v-list-item
                 v-bind="props"
                 :title="
-                  item.raw.first_name && item.raw.last_name
-                    ? item.raw.first_name + ' ' + item.raw.last_name
-                    : item.raw.username
+                  item.first_name && item.last_name
+                    ? item.first_name + ' ' + item.last_name
+                    : item.username
                 "
-                :subtitle="item.raw.email"
+                :subtitle="item.email"
               ></v-list-item>
             </template>
           </v-select>
diff --git a/web/src/components/sidebars/AnalyticsPanel.vue b/web/src/components/sidebars/AnalyticsPanel.vue
index ab5ebea1..c61eef1c 100644
--- a/web/src/components/sidebars/AnalyticsPanel.vue
+++ b/web/src/components/sidebars/AnalyticsPanel.vue
@@ -280,7 +280,7 @@ watch(
         style="height: 100%; overflow: auto"
       >
         <v-card-title class="analysis-title">
-          {{ analysisStore.currentAnalysisType.name }}
+          <span>{{ analysisStore.currentAnalysisType.name }}</span>
           <v-tooltip text="Close" location="bottom">
             <template v-slot:activator="{ props }">
               <v-btn
@@ -368,10 +368,10 @@ watch(
                   hide-details="auto"
                   class="my-1"
                 >
-                  <template #item="{ item, props: itemProps }">
+                  <template v-slot:item="{ props, item }">
                     <v-list-item
-                      v-bind="itemProps"
-                      v-tooltip="item.title"
+                      v-bind="props"
+                      v-tooltip="(item as any).name"
                       style="max-width: 400px"
                     />
                   </template>
@@ -568,4 +568,10 @@ watch(
   justify-content: space-between;
   align-items: center;
 }
+.analysis-title > span:first-child {
+  flex-shrink: 1;
+  min-width: 100px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/web/src/components/sidebars/LayerStyle.vue b/web/src/components/sidebars/LayerStyle.vue
index e885915c..f0148cc5 100644
--- a/web/src/components/sidebars/LayerStyle.vue
+++ b/web/src/components/sidebars/LayerStyle.vue
@@ -902,31 +902,29 @@ onMounted(resetCurrentStyle);
                               <template v-slot:append>
                                 <v-icon
                                   v-if="
-                                    item.raw.project &&
+                                    item.project &&
                                     ['owner', 'collaborator'].includes(
                                       projectPermission,
                                     )
                                   "
                                   icon="mdi-pencil"
                                   class="ml-2"
-                                  @click="
-                                    openColormapEditor(group.name, item.raw)
-                                  "
+                                  @click="openColormapEditor(group.name, item)"
                                 />
                                 <v-icon
                                   v-if="
-                                    item.raw.project &&
+                                    item.project &&
                                     ['owner', 'collaborator'].includes(
                                       projectPermission,
                                     )
                                   "
                                   icon="mdi-trash-can"
                                   class="ml-2"
-                                  @click="delColormap = item.raw"
+                                  @click="delColormap = item"
                                 />
                                 <div style="width: 300px" class="ml-2">
                                   <colormap-preview
-                                    :colormap="item.raw"
+                                    :colormap="item"
                                     :discrete="
                                       group.colormap?.discrete || false
                                     "
@@ -940,7 +938,7 @@ onMounted(resetCurrentStyle);
                             <span
                               class="pr-15"
                               v-if="getColormap(group.colormap)?.markers"
-                              >{{ item.title }}</span
+                              >{{ item.name }}</span
                             >
                             <div
                               style="width: 300px"
@@ -951,7 +949,7 @@ onMounted(resetCurrentStyle);
                               "
                             >
                               <colormap-preview
-                                :colormap="item.raw"
+                                :colormap="item"
                                 :discrete="group.colormap.discrete || false"
                                 :nColors="group.colormap.n_colors || -1"
                               />
@@ -1307,10 +1305,8 @@ onMounted(resetCurrentStyle);
                                 <template v-slot:append>
                                   <v-chip
                                     size="small"
-                                    v-if="(item.raw as any).sample_label"
-                                    >{{
-                                      (item.raw as any).sample_label
-                                    }}</v-chip
+                                    v-if="(item as any).sample_label"
+                                    >{{ (item as any).sample_label }}</v-chip
                                   >
                                 </template>
                               </v-list-item>
@@ -1350,7 +1346,7 @@ onMounted(resetCurrentStyle);
                                 <template v-slot:append>
                                   <v-icon
                                     v-if="
-                                      item.raw.project &&
+                                      item.project &&
                                       ['owner', 'collaborator'].includes(
                                         projectPermission,
                                       )
@@ -1358,23 +1354,23 @@ onMounted(resetCurrentStyle);
                                     icon="mdi-pencil"
                                     class="ml-2"
                                     @click="
-                                      openColormapEditor(group.name, item.raw)
+                                      openColormapEditor(group.name, item)
                                     "
                                   />
                                   <v-icon
                                     v-if="
-                                      item.raw.project &&
+                                      item.project &&
                                       ['owner', 'collaborator'].includes(
                                         projectPermission,
                                       )
                                     "
                                     icon="mdi-trash-can"
                                     class="ml-2"
-                                    @click="delColormap = item.raw"
+                                    @click="delColormap = item"
                                   />
                                   <div style="width: 300px" class="ml-2">
                                     <colormap-preview
-                                      :colormap="item.raw"
+                                      :colormap="item"
                                       :discrete="
                                         group.colormap.discrete || false
                                       "
@@ -1388,7 +1384,7 @@ onMounted(resetCurrentStyle);
                               <span
                                 class="pr-15"
                                 v-if="getColormap(group.colormap)?.markers"
-                                >{{ item.title }}</span
+                                >{{ item.name }}</span
                               >
                               <div
                                 style="width: 300px"
@@ -1396,7 +1392,7 @@ onMounted(resetCurrentStyle);
                                 v-if="getColormap(group.colormap)?.markers"
                               >
                                 <colormap-preview
-                                  :colormap="item.raw"
+                                  :colormap="item"
                                   :discrete="group.colormap.discrete || false"
                                   :nColors="group.colormap.n_colors || -1"
                                 />
@@ -1700,13 +1696,13 @@ onMounted(resetCurrentStyle);
                           <template v-slot:item="{ props, item }">
                             <v-list-item
                               v-bind="props"
-                              :disabled="!(item.raw as any).range"
+                              :disabled="!(item as any).range"
                             >
                               <template v-slot:append>
                                 <v-chip
                                   size="small"
-                                  v-if="(item.raw as any).sample_label"
-                                  >{{ (item.raw as any).sample_label }}</v-chip
+                                  v-if="(item as any).sample_label"
+                                  >{{ (item as any).sample_label }}</v-chip
                                 >
                               </template>
                             </v-list-item>
@@ -1887,8 +1883,8 @@ onMounted(resetCurrentStyle);
                         <template v-slot:append>
                           <v-chip
                             size="small"
-                            v-if="(item.raw as any).sample_label"
-                            >{{ (item.raw as any).sample_label }}</v-chip
+                            v-if="(item as any).sample_label"
+                            >{{ (item as any).sample_label }}</v-chip
                           >
                         </template>
                       </v-list-item>