diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 064665526..0b3d677f9 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -27,6 +27,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:vue/vue3-essential',
     'plugin:vuetify/base',
+    'plugin:vuetify/recommended-v4',
     'plugin:cypress/recommended',
   ],
   rules: {
diff --git a/package.json b/package.json
index a89779882..268ea1c7e 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "vue-router": "5.0.4",
     "vue-the-mask": "0.11.1",
     "vue3-apexcharts": "1.8.0",
-    "vuetify": "3.11.8",
+    "vuetify": "4.0.3",
     "vuex": "4.1.0"
   },
   "devDependencies": {
@@ -72,7 +72,7 @@
     "eslint-plugin-no-only-tests": "3.3.0",
     "eslint-plugin-promise": "6.6.0",
     "eslint-plugin-vue": "9.33.0",
-    "eslint-plugin-vuetify": "2.5.3",
+    "eslint-plugin-vuetify": "2.7.2",
     "express": "5.2.1",
     "express-ws": "5.0.2",
     "istanbul-lib-coverage": "3.2.2",
diff --git a/src/components/core/Alert.vue b/src/components/core/Alert.vue
index 048e1a865..8b59bb77b 100644
--- a/src/components/core/Alert.vue
+++ b/src/components/core/Alert.vue
@@ -32,15 +32,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-cy="snack-close"
       />
     </template>
-    <p>
+    <div>
       {{ alert.text }}
-    </p>
-    <p
+    </div>
+    <div
       v-if="alert.detail"
       class="mt-2 opacity-80"
     >
       {{ alert.detail }}
-    </p>
+    </div>
   </v-snackbar>
 </template>
 
diff --git a/src/components/cylc/Header.vue b/src/components/cylc/Header.vue
index 6f343136a..13091aad6 100644
--- a/src/components/cylc/Header.vue
+++ b/src/components/cylc/Header.vue
@@ -44,12 +44,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-slot:item="{ item, props }">
             <!-- HTML that describe how select should render items when the select is open -->
             <v-list-item
-              :title="item.title"
+              :title="item"
               v-bind="props"
             >
-              <template v-slot:append v-if="item.title !== ownerOnLoad">
+              <template v-slot:append v-if="item !== ownerOnLoad">
                 <v-icon
-                  @click.stop="owners.delete(item.title)"
+                  @click.stop="owners.delete(item)"
                   color="pink-accent-4"
                   :icon="mdiClose"
                 />
@@ -71,12 +71,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-slot:item="{ item, props }">
             <!-- HTML that describe how select should render items when the select is open -->
             <v-list-item
-              :title="item.title"
+              :title="item"
               v-bind="props"
             >
-              <template v-slot:append v-if="item.title !== deploymentOnLoad">
+              <template v-slot:append v-if="item !== deploymentOnLoad">
                 <v-icon
-                  @click.stop="deployments.delete(item.title)"
+                  @click.stop="deployments.delete(item)"
                   color="pink-accent-4"
                   :icon="mdiClose"
                 />
@@ -130,5 +130,4 @@ const showGoButton = computed(() => (
   deployment.value &&
   isNewRoute.value
 ))
-
 </script>
diff --git a/src/components/cylc/Info.vue b/src/components/cylc/Info.vue
index dd1b6cdce..6b0d4f14b 100644
--- a/src/components/cylc/Info.vue
+++ b/src/components/cylc/Info.vue
@@ -53,7 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <v-defaults-provider :defaults="{
         VExpansionPanelTitle: {
-          class: 'text-button py-2',
+          class: 'text-title-small py-2',
         },
         VExpansionPanelText: {
           class: 'mt-2',
diff --git a/src/components/cylc/Mutation.vue b/src/components/cylc/Mutation.vue
index e0ba98cfd..e5cb2713e 100644
--- a/src/components/cylc/Mutation.vue
+++ b/src/components/cylc/Mutation.vue
@@ -99,7 +99,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-btn
         color="grey"
         @click="close()"
-        variant="text"
         data-cy="cancel"
         v-if="!isView"
       >
@@ -108,13 +107,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-btn
         color="orange"
         @click="$refs.form.reset()"
-        variant="text"
         data-cy="reset"
       >
         Reset
       </v-btn>
       <v-btn
-        variant="text"
         :color="isValid ? 'primary' : 'error'"
         @click="submit"
         :loading="submitting"
diff --git a/src/components/cylc/commandMenu/Menu.vue b/src/components/cylc/commandMenu/Menu.vue
index 824bae1c9..9744401b2 100644
--- a/src/components/cylc/commandMenu/Menu.vue
+++ b/src/components/cylc/commandMenu/Menu.vue
@@ -27,11 +27,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     theme="dark"
   >
     <v-card>
-      <v-card-title class="pb-1 pt-3">
+      <v-card-title class="text-title-medium pb-1 pt-3">
         {{ title }}
         <CopyBtn :text="title"/>
       </v-card-title>
-      <v-card-subtitle class="pt-0 pb-2">
+      <v-card-subtitle class="pb-2">
         {{ typeAndStatusText }}
       </v-card-subtitle>
       <v-divider v-if="primaryMutations.length || displayMutations.length" />
diff --git a/src/components/cylc/gscan/TaskFilterSelect.vue b/src/components/cylc/gscan/TaskFilterSelect.vue
index fa5e2673d..74dfcf0a9 100644
--- a/src/components/cylc/gscan/TaskFilterSelect.vue
+++ b/src/components/cylc/gscan/TaskFilterSelect.vue
@@ -23,11 +23,11 @@
           <div class="mr-4">
             <Workflowicon
               v-if="type === 'workflow state'"
-              :status="item.raw"
+              :status="item"
             />
             <Task
               v-if="type === 'task state'"
-              :task="{ state: item.raw }"
+              :task="{ state: item }"
             />
           </div>
         </template>
@@ -45,19 +45,19 @@
           <div class="mr-1 ml-n1">
             <Workflowicon
               v-if="type === 'workflow state'"
-              :status="item.raw"
+              :status="item"
             />
             <Task
               v-if="type === 'task state'"
-              :task="{ state: item.raw }"
+              :task="{ state: item }"
             />
           </div>
         </template>
-        {{ item.title }}
+        {{ item }}
       </v-chip>
       <span
         v-if="index === maxVisibleStates"
-        class="text-grey text-caption"
+        class="text-grey text-body-small"
       >
         (+{{ model.length - maxVisibleStates }})
       </span>
diff --git a/src/components/cylc/workspace/Toolbar.vue b/src/components/cylc/workspace/Toolbar.vue
index d40437314..c56f27ec8 100644
--- a/src/components/cylc/workspace/Toolbar.vue
+++ b/src/components/cylc/workspace/Toolbar.vue
@@ -37,8 +37,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </v-btn>
     <!-- title -->
     <v-toolbar-title
-      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary"
-      :class="showNavBtn ? 'ml-0' : null"
+      class="c-toolbar-title font-weight-medium text-primary"
+      :class="{
+        'ml-0': showNavBtn,
+        'shrink': mdAndDown, // TODO: use title.length as well
+      }"
     >
       {{ title }}
     </v-toolbar-title>
@@ -156,7 +159,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </v-tooltip>
 
       <!-- workflow status message -->
-      <span class="status-msg text-body-2">
+      <span class="status-msg text-body-medium">
         {{ statusMessage }}
         <!-- workflow Cylc version popup on differ with UIS version -->
         <!-- nested within status-msg for style inheritance -->
@@ -267,6 +270,7 @@ import {
   mdiArrowULeftTop,
   mdiInformationOutline,
 } from '@mdi/js'
+import { useDisplay } from 'vuetify'
 import { startCase } from 'lodash'
 import { until } from '@/utils/reactivity'
 import { useDrawer, useNavBtn, toolbarHeight } from '@/utils/toolbar'
@@ -329,6 +333,7 @@ export default {
   name: 'Toolbar',
 
   setup () {
+    const { mdAndDown } = useDisplay()
     const { showNavBtn } = useNavBtn()
     const { toggleDrawer } = useDrawer()
 
@@ -336,6 +341,7 @@ export default {
     const uisFlowVersion = uisVersionInfo?.value?.['cylc-flow'] ?? ''
 
     return {
+      mdAndDown,
       eventBus,
       showNavBtn,
       toggleDrawer,
@@ -557,3 +563,9 @@ export default {
   },
 }
 </script>
+
+<style>
+.c-toolbar-title.shrink {
+  font-size: 1rem;
+}
+</style>
diff --git a/src/components/graphqlFormGenerator/EditRuntimeForm.vue b/src/components/graphqlFormGenerator/EditRuntimeForm.vue
index f7cf925fd..5e952198f 100644
--- a/src/components/graphqlFormGenerator/EditRuntimeForm.vue
+++ b/src/components/graphqlFormGenerator/EditRuntimeForm.vue
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <div>
-    <v-card-subtitle class="text-subtitle-1 font-weight-medium mt-4">
+    <v-card-subtitle class="text-body-large font-weight-medium mt-4">
       {{ this.tokens.id }}
     </v-card-subtitle>
     <v-skeleton-loader
diff --git a/src/main.js b/src/main.js
index 819279e62..8537eee11 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+// CSS first
+import 'nprogress/css/nprogress.css'
+import '@/styles/index.scss'
+
 import { createApp } from 'vue'
 
 // Plugins
@@ -31,9 +35,6 @@ import router from '@/router/index'
 import { store } from '@/store/index'
 import { createVuetify } from 'vuetify'
 
-import 'nprogress/css/nprogress.css'
-import '@/styles/index.scss'
-
 if (location.search) {
   /* Remove token from the querystring - we only need it on first load.
   After the browser has sent the token as part of the URL in the first GET, the
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 219cca172..8a333a2db 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -85,6 +85,7 @@ export const vuetifyOptions = {
     VTooltip: {
       activator: 'parent',
       location: 'bottom',
+      maxWidth: 600,
     },
     VList: {
       slim: true,
diff --git a/src/styles/cylc/_dashboard.scss b/src/styles/cylc/_dashboard.scss
index 32d5ac16e..9024b0d89 100644
--- a/src/styles/cylc/_dashboard.scss
+++ b/src/styles/cylc/_dashboard.scss
@@ -16,11 +16,6 @@
  */
 
 .c-dashboard {
-  /* to align icons in the links section */
-  .v-list-item__prepend {
-    align-self: center;
-  }
-
   table {
     tbody {
       tr {
diff --git a/src/styles/cylc/_drawer.scss b/src/styles/cylc/_drawer.scss
index 1874fa018..332d81b2a 100644
--- a/src/styles/cylc/_drawer.scss
+++ b/src/styles/cylc/_drawer.scss
@@ -20,10 +20,10 @@
 @use '../util';
 
 body.resizing-drawer {
-  cursor: ew-resize !important;
+  cursor: ew-resize;
   #c-sidebar, .v-main {
     // Prevent Vuetify-provided transitions during resize to ensure responsiveness
-    transition: none !important;
+    transition: none;
   }
 }
 
diff --git a/src/styles/cylc/_header.scss b/src/styles/cylc/_header.scss
deleted file mode 100644
index e72b1d580..000000000
--- a/src/styles/cylc/_header.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-@use "sass:map";
-@use '../settings';
-@use '../util';
-
-.c-header {
-  display: block;
-
-  @include util.theme-dependent(background-color, settings.$grey, 3);
-
-  .c-environment-info {
-    font-size: 1rem;
-    font-weight: map.get(settings.$font-weights, 'regular');
-
-    .v-chip {
-      font-size: 1rem;
-      @include util.theme-dependent(background-color, settings.$grey, 5, !important);
-      @include util.theme-dependent(border-color, settings.$grey, 1, !important);
-    }
-  }
-}
diff --git a/src/styles/cylc/_markdown.scss b/src/styles/cylc/_markdown.scss
index f0991bbc2..6590493cc 100644
--- a/src/styles/cylc/_markdown.scss
+++ b/src/styles/cylc/_markdown.scss
@@ -17,6 +17,7 @@
 
 .markdown {
   p, ul, ol {
+    margin: 0;
     &:not(:last-child) {
       margin-bottom: 0.8em;
     }
diff --git a/src/styles/cylc/_menu.scss b/src/styles/cylc/_menu.scss
index ba67101b6..89fafe96f 100644
--- a/src/styles/cylc/_menu.scss
+++ b/src/styles/cylc/_menu.scss
@@ -16,10 +16,10 @@
  */
 
 .c-mutation-menu {
-  z-index: 2000 !important;
+  z-index: 2000;
 
   .v-card-title {
-    font-size: 1.1rem !important;
+    font-size: 1.1rem;
     line-height: 1.5rem;
     white-space: normal;
   }
diff --git a/src/styles/cylc/_toolbar.scss b/src/styles/cylc/_toolbar.scss
index 926a1c1af..70efbbcf1 100644
--- a/src/styles/cylc/_toolbar.scss
+++ b/src/styles/cylc/_toolbar.scss
@@ -37,7 +37,7 @@
     // make this shrink more than title (can see status in mutation menu if needed):
     flex-shrink: 10;
     // override vuetify .text-* class letter spacing:
-    letter-spacing: normal !important;
+    letter-spacing: normal;
   }
 
   .v-icon {
diff --git a/src/styles/cylc/_tooltip.scss b/src/styles/cylc/_tooltip.scss
deleted file mode 100644
index bec25f7d9..000000000
--- a/src/styles/cylc/_tooltip.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-.v-tooltip .v-overlay__content {
-  max-width: 600px !important;
-  // Increase default opacity of bg:
-  background: rgba(var(--v-theme-surface-variant), 0.9);
-}
diff --git a/src/styles/cylc/_tree.scss b/src/styles/cylc/_tree.scss
index 37c069fea..badad39dd 100644
--- a/src/styles/cylc/_tree.scss
+++ b/src/styles/cylc/_tree.scss
@@ -60,13 +60,10 @@ $icon-width: 1.5rem;
 }
 
 .c-treeitem {
-  display:inline-block;
-  vertical-align:middle;
   width: 100%;
   .node {
     min-height: $node-height;
     line-height: normal;
-    display: block;
 
     .node-expand-collapse-button {
       width: $icon-width;
@@ -108,8 +105,6 @@ $icon-width: 1.5rem;
   $leaf-background-color: map.get(settings.$grey, 'lighten-3');
 
   .leaf {
-    padding: 0;
-    margin: 0;
     display: flex;
     flex-wrap: nowrap;
     flex-direction: column;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7d1198f33..b1f719b22 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -22,7 +22,6 @@
 @use "cylc/dashboard";
 @use "cylc/drawer";
 @use "cylc/gscan";
-@use "cylc/header";
 @use "cylc/job";
 @use "cylc/toolbar";
 @use "cylc/tree";
@@ -30,7 +29,6 @@
 @use "cylc/user_profile";
 @use "cylc/warning";
 @use "cylc/workspace";
-@use "cylc/tooltip";
 @use "cylc/mutation_form";
 @use "cylc/menu";
 
@@ -39,17 +37,30 @@ html {
   overflow-y: auto;
 }
 
-.v-theme--light.v-application {
-  background-color: transparent;
-  .content {
-    height: 100vh;
+@layer vuetify-core.reset {
+  pre, ul, li, dl, dt, dd {
+    padding: 0;
+    margin: 0;
   }
 }
 
-// The skeleton loader needs to maintain height: 100% otherwise its children
-// nodes with height: 100% or auto won't be displayed at all.
-.v-skeleton-loader {
-  height: 100%;
+@layer vuetify-overrides {
+  .v-theme--light.v-application {
+    background-color: transparent;
+    .content {
+      height: 100vh;
+    }
+  }
+
+  // The skeleton loader needs to maintain height: 100% otherwise its children
+  // nodes with height: 100% or auto won't be displayed at all.
+  .v-skeleton-loader {
+    height: 100%;
+  }
+
+  .v-list-item--one-line .v-list-item-title {
+    letter-spacing: normal;
+  }
 }
 
 [data-c-interactive] {
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index a502689c5..d3b738253 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <v-row wrap>
       <v-col md="4" lg="3">
-        <p class="text-h4 mb-2">Workflows</p>
+        <p class="text-headline-large my-2">Workflows</p>
         <v-data-table
           :headers="$options.workflowsHeader"
           :items="workflowsTable"
@@ -39,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </v-data-table>
       </v-col>
       <v-col md="8" lg="9">
-        <p class="text-h4 mb-2">Events</p>
+        <p class="text-headline-large my-2">Events</p>
         <v-data-table
           :headers="$options.eventsHeader"
           :items="events"
@@ -55,7 +55,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Special template if there are no events to display -->
           <template v-slot:no-data>
-            <td class="text-h6 text-disabled">No events</td>
+            <td class="text-title-large text-disabled">No events</td>
           </template>
 
           <template v-slot:item.level="{ item }">
@@ -72,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template v-slot:prepend>
               <v-icon size="1.6em">{{ $options.icons.table }}</v-icon>
             </template>
-            <v-list-item-title class="text-h6 font-weight-light">
+            <v-list-item-title>
               Workflows Table
             </v-list-item-title>
             <v-list-item-subtitle>
@@ -83,7 +83,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template v-slot:prepend>
               <v-icon size="1.6em">{{ $options.icons.settings }}</v-icon>
             </template>
-            <v-list-item-title class="text-h6 font-weight-light">
+            <v-list-item-title>
               Settings
             </v-list-item-title>
             <v-list-item-subtitle>
@@ -95,7 +95,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <template v-slot:prepend>
                 <v-icon size="1.6em">{{ $options.icons.hub }}</v-icon>
               </template>
-              <v-list-item-title class="text-h6 font-weight-light">
+              <v-list-item-title>
                 Cylc Hub
               </v-list-item-title>
               <v-list-item-subtitle>
@@ -116,7 +116,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <template v-slot:prepend>
                 <v-icon size="1.6em">{{ $options.icons.jupyterLogo }}</v-icon>
               </template>
-              <v-list-item-title class="text-h6 font-weight-light">
+              <v-list-item-title>
                 Jupyter Lab
               </v-list-item-title>
               <v-list-item-subtitle>
@@ -135,7 +135,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template v-slot:prepend>
               <v-icon size="1.6em">{{ $options.icons.quickstart }}</v-icon>
             </template>
-            <v-list-item-title class="text-h6 font-weight-light">
+            <v-list-item-title>
               Cylc UI Quickstart
             </v-list-item-title>
             <v-list-item-subtitle>
@@ -146,7 +146,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template v-slot:prepend>
               <v-icon size="1.6em">{{ $options.icons.workflow }}</v-icon>
             </template>
-            <v-list-item-title class="text-h6 font-weight-light">
+            <v-list-item-title>
               Workflow Design Guide
             </v-list-item-title>
             <v-list-item-subtitle>
@@ -157,7 +157,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template v-slot:prepend>
               <v-icon size="1.6em">{{ $options.icons.documentation }}</v-icon>
             </template>
-            <v-list-item-title class="text-h6 font-weight-light">
+            <v-list-item-title>
               Documentation
             </v-list-item-title>
             <v-list-item-subtitle>
@@ -170,7 +170,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template v-slot:prepend>
               <v-icon size="1.6em">{{ $options.icons.mdiGraphql }}</v-icon>
             </template>
-            <v-list-item-title class="text-h6 font-weight-light">
+            <v-list-item-title>
              GraphiQL
             </v-list-item-title>
             <v-list-item-subtitle>
diff --git a/src/views/Guide.vue b/src/views/Guide.vue
index 1269fc298..1b8370a79 100644
--- a/src/views/Guide.vue
+++ b/src/views/Guide.vue
@@ -36,7 +36,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-col>
         <v-card variant="outlined" class="pa-1">
           <v-card-title primary-title>
-            <p class="text-h4 text--primary">Tasks &amp; Jobs</p>
+            <p class="text-headline-large text--primary">Tasks &amp; Jobs</p>
           </v-card-title>
           <v-card-text>
             <p>
@@ -94,7 +94,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <v-card variant="outlined" class="pa-1">
           <v-card-title primary-title>
-            <p class="text-h4 text--primary">Skip Mode?</p>
+            <p class="text-headline-large text--primary">Skip Mode?</p>
           </v-card-title>
           <v-card-text>
             <p>
@@ -128,7 +128,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <v-card variant="outlined" class="pa-1">
           <v-card-title primary-title>
-            <p class="text-h4 text--primary">Views</p>
+            <p class="text-headline-large text--primary">Views</p>
           </v-card-title>
           <v-card-text>
             Cylc provides lots of views which you can use to monitor and
@@ -159,7 +159,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <v-card variant="outlined" class="pa-1">
           <v-card-title primary-title>
-            <p class="text-h4 text--primary">Tabs</p>
+            <p class="text-headline-large text--primary">Tabs</p>
           </v-card-title>
           <v-card-text>
             <p>
@@ -181,7 +181,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-col>
         <v-card variant="outlined" class="pa-1">
           <v-card-title primary-title>
-            <p class="text-h4 text--primary">Why Are We Waiting?</p>
+            <p class="text-headline-large text--primary">Why Are We Waiting?</p>
           </v-card-title>
           <v-card-text>
             <p>
@@ -316,7 +316,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <v-card variant="outlined" class="pa-1">
           <v-card-title primary-title>
-            <p class="text-h4 text--primary">The n-window</p>
+            <p class="text-headline-large text--primary">The n-window</p>
           </v-card-title>
           <v-card-text>
             <p>
diff --git a/src/views/Log.vue b/src/views/Log.vue
index e14b68dd4..eab090b4d 100644
--- a/src/views/Log.vue
+++ b/src/views/Log.vue
@@ -32,7 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <v-container fluid>
       <!-- the controls -->
       <v-row
-        dense
+        density="compact"
         class="flex-0-0"
       >
         <v-col class="pt-0">
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- the inputs -->
       <v-row
-        dense
+        density="compact"
         class="flex-0-0"
       >
         <v-col cols="8">
@@ -136,7 +136,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <!-- the status line -->
       <v-row
-        dense
+        density="compact"
         class="flex-0-0"
       >
         <v-col
diff --git a/src/views/NoAuth.vue b/src/views/NoAuth.vue
index fdd59e85c..771e9dcff 100644
--- a/src/views/NoAuth.vue
+++ b/src/views/NoAuth.vue
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     image="/img/logo.svg"
   >
     <template #headline>
-      <div class="text-h4 mt-4">You do not have permission to access this server</div>
+      <div class="text-headline-large mt-4">You do not have permission to access this server</div>
     </template>
   </v-empty-state>
 </template>
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
index bfa308cfc..70eb4d2e1 100644
--- a/src/views/UserProfile.vue
+++ b/src/views/UserProfile.vue
@@ -23,15 +23,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :icon="$options.icons.settings"
           prominent
           color="grey-lighten-3"
+          class="text-headline-medium"
         >
-          <h3 class="text-h5">{{ $t('UserProfile.title') }}</h3>
+          {{ $t('UserProfile.title') }}
         </v-alert>
         <v-form>
           <v-defaults-provider :defaults="$options.vuetifyDefaults">
             <v-container py-0>
-              <v-row no-gutters>
-                <h3>{{ $t('UserProfile.yourProfile') }}</h3>
-              </v-row>
+
+              <h3>{{ $t('UserProfile.yourProfile') }}</h3>
 
               <v-row no-gutters class="align-center wrap">
                 <v-col cols="3">
@@ -42,7 +42,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :model-value="user.username"
                     disabled
                     id="profile-username"
-                    class="text-body-1"
                   />
                 </v-col>
               </v-row>
@@ -60,7 +59,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :model-value="Object.keys(user.extensions).join(', ') || 'None'"
                     disabled
                     id="profile-extensions"
-                    class="text-body-1"
                   />
                 </v-col>
               </v-row>
@@ -90,9 +88,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </v-col>
               </v-row>
 
-              <v-row no-gutters class="mt-4">
-                <h3>Preferences</h3>
-              </v-row>
+              <h3>Preferences</h3>
 
               <v-row no-gutters class="align-center wrap">
                 <v-col cols="3">
@@ -218,7 +214,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <template v-slot:item="{ item, props }">
                     <v-list-item
                       v-bind="props"
-                      :prepend-icon="workflowViews.get(item.value).icon"
+                      :prepend-icon="workflowViews.get(item).icon"
                     />
                   </template>
                 </v-select>
diff --git a/src/views/WorkflowsTable.vue b/src/views/WorkflowsTable.vue
index d1d95979f..8903480e1 100644
--- a/src/views/WorkflowsTable.vue
+++ b/src/views/WorkflowsTable.vue
@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           prominent
           color="grey-lighten-3"
         >
-          <h3 class="text-h5">{{ $t('Workflows.tableHeader') }}</h3>
+          <h3 class="text-headline-medium">{{ $t('Workflows.tableHeader') }}</h3>
         </v-alert>
         <v-data-table
           :headers="$options.headers"
diff --git a/yarn.lock b/yarn.lock
index ef59d6b3f..b62ed04d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4013,7 +4013,7 @@ __metadata:
     eslint-plugin-no-only-tests: "npm:3.3.0"
     eslint-plugin-promise: "npm:6.6.0"
     eslint-plugin-vue: "npm:9.33.0"
-    eslint-plugin-vuetify: "npm:2.5.3"
+    eslint-plugin-vuetify: "npm:2.7.2"
     express: "npm:5.2.1"
     express-ws: "npm:5.0.2"
     graphiql: "npm:4.1.2"
@@ -4045,7 +4045,7 @@ __metadata:
     vue-router: "npm:5.0.4"
     vue-the-mask: "npm:0.11.1"
     vue3-apexcharts: "npm:1.8.0"
-    vuetify: "npm:3.11.8"
+    vuetify: "npm:4.0.3"
     vuex: "npm:4.1.0"
   peerDependenciesMeta:
     react:
@@ -5053,33 +5053,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-vue@npm:>=9.6.0":
-  version: 10.2.0
-  resolution: "eslint-plugin-vue@npm:10.2.0"
+"eslint-plugin-vue@npm:^10.8.0":
+  version: 10.9.0
+  resolution: "eslint-plugin-vue@npm:10.9.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.4.0"
     natural-compare: "npm:^1.4.0"
     nth-check: "npm:^2.1.1"
-    postcss-selector-parser: "npm:^6.0.15"
+    postcss-selector-parser: "npm:^7.1.0"
     semver: "npm:^7.6.3"
     xml-name-validator: "npm:^4.0.0"
   peerDependencies:
-    eslint: ^8.57.0 || ^9.0.0
+    "@stylistic/eslint-plugin": ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+    "@typescript-eslint/parser": ^7.0.0 || ^8.0.0
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
     vue-eslint-parser: ^10.0.0
-  checksum: 10c0/ee07376bcf450970c66bde3eb7c1d26854dc3260c05fb2d52eeace5790d5e6173e7542e215690bf0149fde2238926721ff807df1beee33e5aba71e6634eac351
+  peerDependenciesMeta:
+    "@stylistic/eslint-plugin":
+      optional: true
+    "@typescript-eslint/parser":
+      optional: true
+  checksum: 10c0/c8288cf7f7c1551ce7638bca206d0220db872b8fd1371f408a8aa434d0c4c02c3121ed7d0fae6ba9c65fec32ec05fe61f3ca85acbd2ead584a6f2567b77e1381
   languageName: node
   linkType: hard
 
-"eslint-plugin-vuetify@npm:2.5.3":
-  version: 2.5.3
-  resolution: "eslint-plugin-vuetify@npm:2.5.3"
+"eslint-plugin-vuetify@npm:2.7.2":
+  version: 2.7.2
+  resolution: "eslint-plugin-vuetify@npm:2.7.2"
   dependencies:
-    eslint-plugin-vue: "npm:>=9.6.0"
+    eslint-plugin-vue: "npm:^10.8.0"
     requireindex: "npm:^1.2.0"
   peerDependencies:
-    eslint: ^8.0.0 || ^9.0.0
-    vuetify: ^3.0.0
-  checksum: 10c0/ffd74c2e6fb532a3cb60591abefecf9a366ccfb5c6360e79421bd190186be0207dd0cbab5bdf523b621aebcc3a6d9e0779b7c75517f6482d3e4c64e3d500a8be
+    eslint: ^8.0.0 || ^9.0.0 || ^10.0.0
+    vuetify: ^3.0.0 || ^4.0.0
+  checksum: 10c0/7d1d44ef44e8110cb8627865291352fb3e6c955b4ba3c567d4b15b937b17d216037e93fc983f3753fac7e36350f5577cba971a3f52491b1a6caddc2f2c748198
   languageName: node
   linkType: hard
 
@@ -8517,6 +8524,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-selector-parser@npm:^7.1.0":
+  version: 7.1.1
+  resolution: "postcss-selector-parser@npm:7.1.1"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10c0/02d3b1589ddcddceed4b583b098b95a7266dacd5135f041e5d913ebb48e874fd333a36e564cc9a2ec426a464cb18db11cb192ac76247aced5eba8c951bf59507
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.5.6, postcss@npm:^8.5.8":
   version: 8.5.10
   resolution: "postcss@npm:8.5.10"
@@ -11145,9 +11162,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vuetify@npm:3.11.8":
-  version: 3.11.8
-  resolution: "vuetify@npm:3.11.8"
+"vuetify@npm:4.0.3":
+  version: 4.0.3
+  resolution: "vuetify@npm:4.0.3"
   peerDependencies:
     typescript: ">=4.7"
     vite-plugin-vuetify: ">=2.1.0"
@@ -11160,7 +11177,7 @@ __metadata:
       optional: true
     webpack-plugin-vuetify:
       optional: true
-  checksum: 10c0/686b02053ab64cc84b897fba58c1f7cdf2ad3c78f2c46a3171b623091092969513fd642bc260931bc3baaf5bd6fd409d10002a1291139e8e7633759e34e204aa
+  checksum: 10c0/bcecdf1639c971ef7228ca6b30d65173b2ab10d463549b926b5f8cc8b226c207a9127dfcffdc8d5f64b78dc41fcc8526cb3a0821f062ad7ace2b4d23554652fd
   languageName: node
   linkType: hard