diff --git a/web/package-lock.json b/web/package-lock.json
index a709eb5d..4a45c12e 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.4",
         "vuedraggable": "4.1.0",
-        "vuetify": "3.12.3"
+        "vuetify": "4.0.2"
       },
       "devDependencies": {
         "@sentry/vite-plugin": "5.1.1",
@@ -8956,9 +8956,9 @@
       "license": "MIT"
     },
     "node_modules/vuetify": {
-      "version": "3.12.3",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.12.3.tgz",
-      "integrity": "sha512-7QzgftMu8OYKRz/jr2yntPEJ7WFmAzMn8jyeUcW7gz539MjQbDF3UrqZXW3aWi458UVJW9WWvzQn9x5B75Aijw==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.0.2.tgz",
+      "integrity": "sha512-klgSGmfXoLajdTuuxreilzDQjp0ojzL2U5v6Z3ZbMYtpihPPXT9rkd/FxWL3dIGevnWdgaP2Kpwoz6aS/MISDA==",
       "license": "MIT",
       "funding": {
         "type": "github",
diff --git a/web/package.json b/web/package.json
index 6fc1047a..b113f546 100644
--- a/web/package.json
+++ b/web/package.json
@@ -37,7 +37,7 @@
     "vue-maplibre-compare": "1.0.26",
     "vue-router": "5.0.4",
     "vuedraggable": "4.1.0",
-    "vuetify": "3.12.3"
+    "vuetify": "4.0.2"
   },
   "devDependencies": {
     "@sentry/vite-plugin": "5.1.1",
diff --git a/web/src/App.vue b/web/src/App.vue
index d6d55909..d8a85f7c 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { watch, onMounted, computed } from "vue";
 import { oauthClient } from "./api/auth";
-import { useTheme } from "vuetify/lib/framework.mjs";
+import { useTheme } from "vuetify";
 
 import ToggleCompareMap from "./components/map/ToggleCompareMap.vue";
 import SideBars from "./components/sidebars/SideBars.vue";
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index fae42e98..0d3b5af2 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -81,7 +81,8 @@ watch(filteredDatasets, expandAllGroups);
         </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
-    <v-card
+    <v-divider v-if="props.datasets?.length" class="mb-2" />
+    <div
       :class="
         showFilter
           ? 'panel-content-inner with-tag-filter-open'
@@ -91,9 +92,7 @@ watch(filteredDatasets, expandAllGroups);
       <v-expansion-panels
         v-if="props.datasets?.length"
         v-model="expandedGroups"
-        variant="accordion"
         class="dataset-list"
-        style="height: fit-content"
         multiple
         flat
       >
@@ -115,17 +114,15 @@ watch(filteredDatasets, expandAllGroups);
         v-else-if="projectStore.loadingDatasets"
         indeterminate
       ></v-progress-linear>
-      <v-card-text class="help-text" v-else>No available Datasets.</v-card-text>
-    </v-card>
+      <div class="help-text pa-4" v-else>No available Datasets.</div>
+    </div>
   </div>
 </template>
 
 <style>
 .dataset-list {
   height: 100%;
-  width: calc(100% - 20px) !important;
   overflow-y: auto;
-  overflow-x: hidden;
 }
 .dataset-list .v-expansion-panel-title {
   min-height: 0 !important;
@@ -162,7 +159,6 @@ watch(filteredDatasets, expandAllGroups);
   justify-content: space-between;
   font-size: 0.875rem;
   margin-left: 24px;
-  width: 100%;
 }
 .item-title + .v-expansion-panel-title__icon {
   position: absolute !important;
diff --git a/web/src/components/map/LegacyMap.vue b/web/src/components/map/LegacyMap.vue
index dc8ed690..88e6b493 100644
--- a/web/src/components/map/LegacyMap.vue
+++ b/web/src/components/map/LegacyMap.vue
@@ -162,7 +162,7 @@ watch(
 
 <template>
   <div id="mapContainer" class="map">
-    <div id="map-tooltip" ref="tooltip" class="tooltip pa-0">
+    <div id="map-tooltip" ref="tooltip" class="tooltip">
       <MapTooltip />
     </div>
   </div>
@@ -199,7 +199,7 @@ watch(
 
 .tooltip {
   border-radius: 5px;
-  padding: 10px 20px;
+  padding: 0;
   word-break: break-word;
   text-wrap: wrap;
   width: fit-content;
diff --git a/web/src/components/map/ToggleCompareMap.vue b/web/src/components/map/ToggleCompareMap.vue
index 9e2b6a10..b813682f 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: String(theme.global.current.value.colors.primary),
+    arrow: String(theme.global.current.value.colors["button-text"]),
   };
 });
 </script>
@@ -321,7 +321,7 @@ const swiperColor = computed(() => {
 
 .tooltip {
   border-radius: 5px;
-  padding: 10px 20px;
+  padding: 0;
   word-break: break-word;
   text-wrap: wrap;
   width: fit-content;
diff --git a/web/src/components/projects/AccessControl.vue b/web/src/components/projects/AccessControl.vue
index 4049f164..93ff2941 100644
--- a/web/src/components/projects/AccessControl.vue
+++ b/web/src/components/projects/AccessControl.vue
@@ -165,7 +165,7 @@ onMounted(() => {
       <v-list-item
         v-if="!project.collaborators.length"
         subtitle="No collaborators"
-        class="mx-4"
+        class="mx-4 help-text"
       />
       <v-list-subheader>
         Followers
@@ -212,7 +212,7 @@ onMounted(() => {
       <v-list-item
         v-if="!project.followers.length"
         subtitle="No followers"
-        class="mx-4"
+        class="mx-4 help-text"
       />
     </v-list>
     <v-btn
@@ -272,15 +272,17 @@ onMounted(() => {
               }
             "
           >
-            <template v-slot:item="{ props, item }">
+            <template v-slot:item="{ props, internalItem }">
               <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
+                  internalItem.raw.first_name && internalItem.raw.last_name
+                    ? internalItem.raw.first_name +
+                      ' ' +
+                      internalItem.raw.last_name
+                    : internalItem.raw.username
                 "
-                :subtitle="item.raw.email"
+                :subtitle="internalItem.raw.email"
               ></v-list-item>
             </template>
           </v-select>
diff --git a/web/src/components/projects/DatasetSelect.vue b/web/src/components/projects/DatasetSelect.vue
index d07c632a..90ce7f2d 100644
--- a/web/src/components/projects/DatasetSelect.vue
+++ b/web/src/components/projects/DatasetSelect.vue
@@ -68,8 +68,8 @@ function submitDelete() {
     <template v-slot:list="{ data }">
       <v-expansion-panels
         multiple
+        flat
         variant="accordion"
-        elevation="0"
         bg-color="transparent"
         @update:model-value="expandDataset"
       >
@@ -79,10 +79,8 @@ function submitDelete() {
           :value="dataset.id"
         >
           <v-expansion-panel-title>
-            <div
-              style="display: flex; justify-content: space-between; width: 100%"
-            >
-              <div class="d-flex">
+            <div class="d-flex justify-space-between w-100">
+              <div class="d-flex align-center">
                 <div style="min-width: 24px">
                   <v-icon
                     v-if="
@@ -129,16 +127,24 @@ function submitDelete() {
                     size="24"
                     indeterminate
                   />
-                  <v-icon
+                  <v-btn
                     v-else-if="
                       !props.addedIds || !props.addedIds.includes(dataset.id)
                     "
                     :icon="props.buttonIcon"
                     color="primary"
-                    class="icon-button"
+                    variant="tonal"
+                    size="x-small"
                     @click.stop="emit('buttonClick', dataset)"
                   />
-                  <v-icon v-else icon="mdi-check" color="success" @click.stop />
+                  <v-btn
+                    v-else
+                    icon="mdi-check"
+                    color="success"
+                    variant="tonal"
+                    size="x-small"
+                    @click.stop
+                  />
                 </div>
                 {{ dataset.name }}
               </div>
@@ -151,6 +157,7 @@ function submitDelete() {
                   size="small"
                   v-tooltip="dataset.n_layers + ' layers'"
                   class="ml-2"
+                  color="secondary-text"
                 ></v-icon>
                 <span class="secondary-text">{{ dataset.n_layers }}</span>
                 <v-icon
@@ -158,6 +165,7 @@ function submitDelete() {
                   size="small"
                   v-tooltip="dataset.description"
                   class="mx-1"
+                  color="secondary-text"
                 ></v-icon>
                 <DetailView
                   v-if="dataset"
@@ -167,12 +175,13 @@ function submitDelete() {
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text class="pb-2">
-            <div class="mb-2 ml-2">
+            <div class="d-flex flex-wrap ga-1 mb-1 ml-6">
               <v-chip
                 v-for="tag in dataset.tags"
                 :text="tag"
                 variant="outlined"
                 size="small"
+                color="grey"
               />
             </div>
             <div v-for="layer in dataset.layers" class="item-title">
@@ -230,10 +239,3 @@ function submitDelete() {
     </template>
   </DatasetList>
 </template>
-
-<style>
-.icon-button {
-  background-color: rgb(var(--v-theme-secondary));
-  border-radius: 4px;
-}
-</style>
diff --git a/web/src/components/projects/ProjectConfig.vue b/web/src/components/projects/ProjectConfig.vue
index 291b1b1e..d4e6e586 100644
--- a/web/src/components/projects/ProjectConfig.vue
+++ b/web/src/components/projects/ProjectConfig.vue
@@ -239,7 +239,7 @@ watch(
 </script>
 
 <template>
-  <div>
+  <div class="mx-2">
     <div class="project-row my-5">
       <v-select
         placeholder="Select a Project"
@@ -292,17 +292,32 @@ watch(
     </v-card>
     <div class="project-row" v-if="projectStore.currentProject">
       <span class="item-counts">
-        <v-icon icon="mdi-database-outline" v-tooltip="'Datasets'"></v-icon>
+        <v-icon
+          icon="mdi-database-outline"
+          v-tooltip="'Datasets'"
+          color="secondary-text"
+        ></v-icon>
         {{ projectStore.currentProject.item_counts.datasets || 0 }}
         <v-icon
           icon="mdi-border-none-variant"
           v-tooltip="'Regions'"
           class="ml-3"
+          color="secondary-text"
         ></v-icon>
         {{ projectStore.currentProject.item_counts.regions || 0 }}
-        <v-icon icon="mdi-poll" v-tooltip="'Charts'" class="ml-3"></v-icon>
+        <v-icon
+          icon="mdi-poll"
+          v-tooltip="'Charts'"
+          class="ml-3"
+          color="secondary-text"
+        ></v-icon>
         {{ projectStore.currentProject.item_counts.charts || 0 }}
-        <v-icon icon="mdi-earth" v-tooltip="'Analyses'" class="ml-3"></v-icon>
+        <v-icon
+          icon="mdi-earth"
+          v-tooltip="'Analyses'"
+          class="ml-3"
+          color="secondary-text"
+        ></v-icon>
         {{ projectStore.currentProject.item_counts.analyses || 0 }}
       </span>
       <v-menu
@@ -464,11 +479,15 @@ watch(
           </div>
           <v-btn
             v-else
-            variant="tonal"
+            color="background"
+            class="text-primary"
+            flat
             width="100%"
             @click="projectStore.projectConfigMode = 'new'"
-            >+ New</v-btn
           >
+            <v-icon icon="mdi-plus" color="primary" />
+            New
+          </v-btn>
           <v-btn
             v-if="selectedProject"
             class="options"
@@ -491,8 +510,8 @@ watch(
               "
               indeterminate
             ></v-progress-linear>
-            <div v-else class="py-3 px-6 d-flex">
-              <div style="width: 45%">
+            <v-row v-else class="py-3 px-6" :gap="4">
+              <v-col class="border-e">
                 <v-card-text>Project Datasets</v-card-text>
                 <div class="dataset-card">
                   <DatasetSelect
@@ -504,9 +523,8 @@ watch(
                     @onDelete="refreshProjectDatasets"
                   />
                 </div>
-              </div>
-              <v-divider class="mx-5" vertical></v-divider>
-              <div style="width: 45%">
+              </v-col>
+              <v-col>
                 <div class="d-flex">
                   <v-card-text>All Datasets</v-card-text>
                   <DatasetUpload
@@ -527,8 +545,8 @@ watch(
                     @onDelete="refreshProjectDatasets"
                   />
                 </div>
-              </div>
-            </div>
+              </v-col>
+            </v-row>
           </div>
           <div v-if="currentTab === 'users'" class="py-3 px-6">
             <AccessControl
@@ -574,7 +592,6 @@ watch(
 <style>
 .project-row {
   display: flex;
-  margin: 0px 8px;
   align-items: center;
   justify-content: space-between;
 }
@@ -626,5 +643,6 @@ watch(
   max-height: calc(100vh - 300px);
   overflow: auto !important;
   position: relative;
+  padding: 0 12px;
 }
 </style>
diff --git a/web/src/components/sidebars/AnalyticsPanel.vue b/web/src/components/sidebars/AnalyticsPanel.vue
index ab5ebea1..be18bb88 100644
--- a/web/src/components/sidebars/AnalyticsPanel.vue
+++ b/web/src/components/sidebars/AnalyticsPanel.vue
@@ -368,10 +368,10 @@ watch(
                   hide-details="auto"
                   class="my-1"
                 >
-                  <template #item="{ item, props: itemProps }">
+                  <template #item="{ internalItem, props: itemProps }">
                     <v-list-item
                       v-bind="itemProps"
-                      v-tooltip="item.title"
+                      v-tooltip="internalItem.title"
                       style="max-width: 400px"
                     />
                   </template>
diff --git a/web/src/components/sidebars/DatasetsPanel.vue b/web/src/components/sidebars/DatasetsPanel.vue
index cab3b6b5..aaff970d 100644
--- a/web/src/components/sidebars/DatasetsPanel.vue
+++ b/web/src/components/sidebars/DatasetsPanel.vue
@@ -46,7 +46,6 @@ function toggleSelected(items: Layer[]) {
         multiple
         flat
         variant="accordion"
-        elevation="0"
         bg-color="transparent"
         @update:model-value="expandDataset"
       >
@@ -59,7 +58,7 @@ function toggleSelected(items: Layer[]) {
             <div
               style="display: flex; justify-content: space-between; width: 100%"
             >
-              <div class="item-title" style="margin-left: 12px">
+              <div class="item-title flex-grow-1">
                 <div>
                   <div
                     v-if="
@@ -93,15 +92,13 @@ function toggleSelected(items: Layer[]) {
                   </div>
                   {{ dataset.name }}
                 </div>
-                <div
-                  style="min-width: 75px; text-align: right"
-                  v-if="dataset.layers"
-                >
+                <div v-if="dataset.layers" class="text-no-wrap flex-shrink-0">
                   <v-icon
                     icon="mdi-layers-outline"
                     size="small"
                     v-tooltip="dataset.n_layers + ' layers'"
                     class="ml-2"
+                    color="secondary-text"
                   ></v-icon>
                   <span class="secondary-text">{{ dataset.n_layers }}</span>
                   <v-icon
@@ -109,6 +106,7 @@ function toggleSelected(items: Layer[]) {
                     size="small"
                     v-tooltip="dataset.description"
                     class="mx-1"
+                    color="secondary-text"
                   ></v-icon>
                 </div>
               </div>
@@ -116,13 +114,13 @@ function toggleSelected(items: Layer[]) {
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text class="pb-2">
-            <div>
+            <div class="d-flex flex-wrap ga-1 ml-6 mb-1">
               <v-chip
                 v-for="tag in dataset.tags"
                 :text="tag"
                 variant="outlined"
                 size="small"
-                class="ml-3 mb-2"
+                color="grey"
               />
             </div>
             <div v-for="layer in dataset.layers" class="item-title">
diff --git a/web/src/components/sidebars/LayerStyle.vue b/web/src/components/sidebars/LayerStyle.vue
index e885915c..fd44a3ef 100644
--- a/web/src/components/sidebars/LayerStyle.vue
+++ b/web/src/components/sidebars/LayerStyle.vue
@@ -897,12 +897,12 @@ onMounted(resetCurrentStyle);
                             (v: Colormap) => setGroupColormap(group.name, v)
                           "
                         >
-                          <template v-slot:item="{ props, item }">
+                          <template v-slot:item="{ props, internalItem }">
                             <v-list-item v-bind="props">
                               <template v-slot:append>
                                 <v-icon
                                   v-if="
-                                    item.raw.project &&
+                                    internalItem.raw.project &&
                                     ['owner', 'collaborator'].includes(
                                       projectPermission,
                                     )
@@ -910,23 +910,26 @@ onMounted(resetCurrentStyle);
                                   icon="mdi-pencil"
                                   class="ml-2"
                                   @click="
-                                    openColormapEditor(group.name, item.raw)
+                                    openColormapEditor(
+                                      group.name,
+                                      internalItem.raw,
+                                    )
                                   "
                                 />
                                 <v-icon
                                   v-if="
-                                    item.raw.project &&
+                                    internalItem.raw.project &&
                                     ['owner', 'collaborator'].includes(
                                       projectPermission,
                                     )
                                   "
                                   icon="mdi-trash-can"
                                   class="ml-2"
-                                  @click="delColormap = item.raw"
+                                  @click="delColormap = internalItem.raw"
                                 />
                                 <div style="width: 300px" class="ml-2">
                                   <colormap-preview
-                                    :colormap="item.raw"
+                                    :colormap="internalItem.raw"
                                     :discrete="
                                       group.colormap?.discrete || false
                                     "
@@ -936,11 +939,11 @@ onMounted(resetCurrentStyle);
                               </template>
                             </v-list-item>
                           </template>
-                          <template v-slot:selection="{ item }">
+                          <template v-slot:selection="{ internalItem }">
                             <span
                               class="pr-15"
                               v-if="getColormap(group.colormap)?.markers"
-                              >{{ item.title }}</span
+                              >{{ internalItem.title }}</span
                             >
                             <div
                               style="width: 300px"
@@ -951,7 +954,7 @@ onMounted(resetCurrentStyle);
                               "
                             >
                               <colormap-preview
-                                :colormap="item.raw"
+                                :colormap="internalItem.raw"
                                 :discrete="group.colormap.discrete || false"
                                 :nColors="group.colormap.n_colors || -1"
                               />
@@ -1302,15 +1305,13 @@ onMounted(resetCurrentStyle);
                               }
                             "
                           >
-                            <template v-slot:item="{ props, item }">
+                            <template v-slot:item="{ props, internalItem }">
                               <v-list-item v-bind="props">
                                 <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="internalItem.raw.sample_label"
+                                    >{{ internalItem.raw.sample_label }}</v-chip
                                   >
                                 </template>
                               </v-list-item>
@@ -1345,12 +1346,12 @@ onMounted(resetCurrentStyle);
                               (v: Colormap) => setGroupColormap(group.name, v)
                             "
                           >
-                            <template v-slot:item="{ props, item }">
+                            <template v-slot:item="{ props, internalItem }">
                               <v-list-item v-bind="props">
                                 <template v-slot:append>
                                   <v-icon
                                     v-if="
-                                      item.raw.project &&
+                                      internalItem.raw.project &&
                                       ['owner', 'collaborator'].includes(
                                         projectPermission,
                                       )
@@ -1358,23 +1359,26 @@ onMounted(resetCurrentStyle);
                                     icon="mdi-pencil"
                                     class="ml-2"
                                     @click="
-                                      openColormapEditor(group.name, item.raw)
+                                      openColormapEditor(
+                                        group.name,
+                                        internalItem.raw,
+                                      )
                                     "
                                   />
                                   <v-icon
                                     v-if="
-                                      item.raw.project &&
+                                      internalItem.raw.project &&
                                       ['owner', 'collaborator'].includes(
                                         projectPermission,
                                       )
                                     "
                                     icon="mdi-trash-can"
                                     class="ml-2"
-                                    @click="delColormap = item.raw"
+                                    @click="delColormap = internalItem.raw"
                                   />
                                   <div style="width: 300px" class="ml-2">
                                     <colormap-preview
-                                      :colormap="item.raw"
+                                      :colormap="internalItem.raw"
                                       :discrete="
                                         group.colormap.discrete || false
                                       "
@@ -1384,11 +1388,11 @@ onMounted(resetCurrentStyle);
                                 </template>
                               </v-list-item>
                             </template>
-                            <template v-slot:selection="{ item }">
+                            <template v-slot:selection="{ internalItem }">
                               <span
                                 class="pr-15"
                                 v-if="getColormap(group.colormap)?.markers"
-                                >{{ item.title }}</span
+                                >{{ internalItem.title }}</span
                               >
                               <div
                                 style="width: 300px"
@@ -1396,7 +1400,7 @@ onMounted(resetCurrentStyle);
                                 v-if="getColormap(group.colormap)?.markers"
                               >
                                 <colormap-preview
-                                  :colormap="item.raw"
+                                  :colormap="internalItem.raw"
                                   :discrete="group.colormap.discrete || false"
                                   :nColors="group.colormap.n_colors || -1"
                                 />
@@ -1697,16 +1701,16 @@ onMounted(resetCurrentStyle);
                           placeholder="Select property"
                           hide-details
                         >
-                          <template v-slot:item="{ props, item }">
+                          <template v-slot:item="{ props, internalItem }">
                             <v-list-item
                               v-bind="props"
-                              :disabled="!(item.raw as any).range"
+                              :disabled="!internalItem.raw.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="internalItem.raw.sample_label"
+                                  >{{ internalItem.raw.sample_label }}</v-chip
                                 >
                               </template>
                             </v-list-item>
@@ -1882,13 +1886,13 @@ onMounted(resetCurrentStyle);
                     hide-details
                     @update:model-value="(v) => updateFilterBy(filter.id, v)"
                   >
-                    <template v-slot:item="{ props, item }">
+                    <template v-slot:item="{ props, internalItem }">
                       <v-list-item v-bind="props">
                         <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="internalItem.raw.sample_label"
+                            >{{ internalItem.raw.sample_label }}</v-chip
                           >
                         </template>
                       </v-list-item>
diff --git a/web/src/components/sidebars/SideBars.vue b/web/src/components/sidebars/SideBars.vue
index 608057a2..3e1a844b 100644
--- a/web/src/components/sidebars/SideBars.vue
+++ b/web/src/components/sidebars/SideBars.vue
@@ -297,19 +297,7 @@ function togglePanelVisibility(id: string) {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  max-height: calc(100% - 175px);
-}
-
-.right .panel-set {
-  max-height: calc(100% - 100px);
-}
-
-.v-icon {
-  color: rgb(var(--v-theme-secondary-text)) !important;
-}
-
-.v-btn.bg-primary .v-icon {
-  color: rgb(var(--v-theme-button-text)) !important;
+  min-height: 0;
 }
 
 .v-text-field {