diff --git a/next-ui/package-lock.json b/next-ui/package-lock.json
index 82f509ef..54bf00be 100644
--- a/next-ui/package-lock.json
+++ b/next-ui/package-lock.json
@@ -25,7 +25,7 @@
         "vue": "^3.5.30",
         "vue-intl": "^7.1.3",
         "vuedraggable": "^4.1.0",
-        "vuetify": "^3.11.7"
+        "vuetify": "^4.0.2"
       },
       "devDependencies": {
         "@chromatic-com/storybook": "^5.0.1",
@@ -12131,9 +12131,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.11.7",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.11.7.tgz",
-      "integrity": "sha512-3nK1mKTXQRbU4QXukV4WIbs5YZgMK19flHpFq3pU+6Fpa5YLB8RyyK1BLWAW8JmhSVcaqVUcB/EJ3oJ8g3XNCw==",
+      "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/next-ui/package.json b/next-ui/package.json
index 9d45d856..19b6f8d7 100644
--- a/next-ui/package.json
+++ b/next-ui/package.json
@@ -46,7 +46,7 @@
     "vue": "^3.5.30",
     "vue-intl": "^7.1.3",
     "vuedraggable": "^4.1.0",
-    "vuetify": "^3.11.7"
+    "vuetify": "^4.0.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
diff --git a/next-ui/src/components/AppFooter.vue b/next-ui/src/components/AppFooter.vue
index ecc44d36..f8909669 100644
--- a/next-ui/src/components/AppFooter.vue
+++ b/next-ui/src/components/AppFooter.vue
@@ -21,7 +21,7 @@
         variant="text"
         color="grey"
         size="small"
-        class="text-caption"
+        class="text-body-small"
         href="https://komga.org"
         target="_blank"
         :text="
diff --git a/next-ui/src/components/BuildCommit.vue b/next-ui/src/components/BuildCommit.vue
index 0fbcd94b..8ec21022 100644
--- a/next-ui/src/components/BuildCommit.vue
+++ b/next-ui/src/components/BuildCommit.vue
@@ -5,7 +5,7 @@
     variant="text"
     color="grey"
     size="small"
-    class="text-caption"
+    class="text-body-small"
     :href="'https://github.com/gotson/komga/commits/' + commitId"
     target="_blank"
   >
diff --git a/next-ui/src/components/BuildVersion.vue b/next-ui/src/components/BuildVersion.vue
index b6d87398..149b14a2 100644
--- a/next-ui/src/components/BuildVersion.vue
+++ b/next-ui/src/components/BuildVersion.vue
@@ -10,7 +10,7 @@
       variant="text"
       color="grey"
       size="small"
-      class="text-caption"
+      class="text-body-small"
       to="/server/updates"
     >
       {{ buildVersion || $formatMessage(commonMessages.error) }}
diff --git a/next-ui/src/components/HelloWorld.vue b/next-ui/src/components/HelloWorld.vue
index 85d9f4a9..908ae3c4 100644
--- a/next-ui/src/components/HelloWorld.vue
+++ b/next-ui/src/components/HelloWorld.vue
@@ -12,6 +12,45 @@
 
       <div class="py-4" />
 
+      <v-row>
+        <div class="d-flex flex-column flex ga-4">
+          <v-btn
+            prepend-icon="mdi-delete"
+            text="Button"
+            color=""
+            disabled
+            size="x-small"
+          />
+          <v-btn
+            prepend-icon="mdi-delete"
+            text="Button"
+            color=""
+            disabled
+            size="small"
+          />
+          <v-btn
+            prepend-icon="mdi-delete"
+            text="Button"
+            color=""
+            disabled
+          />
+          <v-btn
+            prepend-icon="mdi-delete"
+            text="Button"
+            color=""
+            disabled
+            size="large"
+          />
+          <v-btn
+            prepend-icon="mdi-delete"
+            text="Button"
+            color=""
+            disabled
+            size="x-large"
+          />
+        </div>
+      </v-row>
+
       <v-row>
         <v-col cols="12">
           <v-card
diff --git a/next-ui/src/components/RemoteFileList.vue b/next-ui/src/components/RemoteFileList.vue
index 2cf90c27..4442f9f2 100644
--- a/next-ui/src/components/RemoteFileList.vue
+++ b/next-ui/src/components/RemoteFileList.vue
@@ -4,7 +4,7 @@
   <template v-else>
     <v-list
       :disabled="isLoading"
-      elevation="2"
+      elevation="1"
     >
       <v-progress-linear
         v-if="isLoading"
diff --git a/next-ui/src/components/announcement/Card.vue b/next-ui/src/components/announcement/Card.vue
index 5357da86..72bb7db9 100644
--- a/next-ui/src/components/announcement/Card.vue
+++ b/next-ui/src/components/announcement/Card.vue
@@ -4,7 +4,7 @@
       <a
         :href="item.url"
         target="_blank"
-        class="text-h3 font-weight-medium link-underline"
+        class="text-display-small font-weight-medium link-underline"
         >{{ item.title }}</a
       >
     </template>
@@ -14,10 +14,7 @@
 
     <template #text>
       <!-- eslint-disable vue/no-v-html -->
-      <div
-        class="announcement"
-        v-html="item.content_html"
-      />
+      <div v-html="item.content_html" />
       <!-- eslint-enable vue/no-v-html -->
     </template>
 
@@ -48,17 +45,3 @@ const emit = defineEmits<{
   markRead: [id: string]
 }>()
 </script>
-
-<style lang="scss">
-.announcement p {
-  margin-bottom: 16px;
-}
-
-.announcement ul {
-  padding-left: 24px;
-}
-
-.announcement a {
-  color: var(--v-anchor-base);
-}
-</style>
diff --git a/next-ui/src/components/apikey/GenerateDialog.stories.ts b/next-ui/src/components/apikey/GenerateDialog.stories.ts
index 8a986c79..9d6fdf95 100644
--- a/next-ui/src/components/apikey/GenerateDialog.stories.ts
+++ b/next-ui/src/components/apikey/GenerateDialog.stories.ts
@@ -35,15 +35,19 @@ export const Default: Story = {
 
 export const Created: Story = {
   play: async ({ userEvent }) => {
+    const user = userEvent.setup({
+      pointerEventsCheck: 0,
+    })
+
     const canvas = within(screen.getByRole('dialog'))
 
     await waitFor(() => expect(canvas.getByText(/kobo sync protocol/i)).toBeVisible())
     const comment = canvas.getByLabelText(/comment/i, {
       selector: 'input',
     })
-    await userEvent.type(comment, 'new key')
+    await user.type(comment, 'new key')
 
-    await userEvent.click(canvas.getByRole('button', { name: /generate/i }))
+    await user.click(canvas.getByRole('button', { name: /generate/i }))
   },
 }
 
@@ -54,15 +58,19 @@ export const Loading: Story = {
     },
   },
   play: async ({ userEvent }) => {
+    const user = userEvent.setup({
+      pointerEventsCheck: 0,
+    })
+
     const canvas = within(screen.getByRole('dialog'))
 
     await waitFor(() => expect(canvas.getByText(/kobo sync protocol/i)).toBeVisible())
     const comment = canvas.getByLabelText(/comment/i, {
       selector: 'input',
     })
-    await userEvent.type(comment, 'long loading')
+    await user.type(comment, 'long loading')
 
-    await userEvent.click(canvas.getByRole('button', { name: /generate/i }))
+    await user.click(canvas.getByRole('button', { name: /generate/i }))
   },
 }
 
@@ -77,14 +85,18 @@ export const DuplicateError: Story = {
     },
   },
   play: async ({ userEvent }) => {
+    const user = userEvent.setup({
+      pointerEventsCheck: 0,
+    })
+
     const canvas = within(screen.getByRole('dialog'))
 
     await waitFor(() => expect(canvas.getByText(/kobo sync protocol/i)).toBeVisible())
     const comment = canvas.getByLabelText(/comment/i, {
       selector: 'input',
     })
-    await userEvent.type(comment, 'duplicate')
+    await user.type(comment, 'duplicate')
 
-    await userEvent.click(canvas.getByRole('button', { name: /generate/i }))
+    await user.click(canvas.getByRole('button', { name: /generate/i }))
   },
 }
diff --git a/next-ui/src/components/dialog/FileNamePicker.vue b/next-ui/src/components/dialog/FileNamePicker.vue
index e6bbafdc..71ed5b25 100644
--- a/next-ui/src/components/dialog/FileNamePicker.vue
+++ b/next-ui/src/components/dialog/FileNamePicker.vue
@@ -22,7 +22,7 @@
           <v-container fluid>
             <v-row>
               <v-col>
-                <div class="text-subtitle-2">
+                <div class="text-label-large">
                   {{
                     $formatMessage({
                       description: 'File name picker dialog: source file name field label',
@@ -37,7 +37,7 @@
               </v-col>
             </v-row>
 
-            <v-row align="center">
+            <v-row class="align-center">
               <v-col>
                 <v-text-field
                   v-model="newName"
diff --git a/next-ui/src/components/dialog/SeriesPicker.vue b/next-ui/src/components/dialog/SeriesPicker.vue
index e1a42f5b..7679de0d 100644
--- a/next-ui/src/components/dialog/SeriesPicker.vue
+++ b/next-ui/src/components/dialog/SeriesPicker.vue
@@ -20,7 +20,7 @@
         <v-card-text>
           <v-list
             :disabled="isLoading"
-            elevation="2"
+            elevation="1"
           >
             <v-progress-linear
               v-if="isLoading"
diff --git a/next-ui/src/components/import/books/DirectorySelection.vue b/next-ui/src/components/import/books/DirectorySelection.vue
index 0a10388e..5e0cf792 100644
--- a/next-ui/src/components/import/books/DirectorySelection.vue
+++ b/next-ui/src/components/import/books/DirectorySelection.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container fluid>
-    <v-row align="center">
+    <v-row class="align-center">
       <v-col
         cols="12"
         sm=""
diff --git a/next-ui/src/components/import/books/TransientBooksTable.vue b/next-ui/src/components/import/books/TransientBooksTable.vue
index 631e82fb..f562b1bb 100644
--- a/next-ui/src/components/import/books/TransientBooksTable.vue
+++ b/next-ui/src/components/import/books/TransientBooksTable.vue
@@ -175,10 +175,7 @@
   </v-data-table>
 
   <v-container fluid>
-    <v-row
-      justify="space-between"
-      align="center"
-    >
+    <v-row class="align-center justify-space-between">
       <v-col>
         <v-btn
           :text="
@@ -389,6 +386,7 @@ const importBatch = computed(
 
 // only analyze books that are shown
 function onDisplayedItems(items: { key: string }[]) {
+  console.log('onDisplayedItems', items)
   importBooks.value
     .filter((b) => items.map((it) => it.key).includes(b.transientBook.id))
     .forEach((b) => {
diff --git a/next-ui/src/components/import/readlist/Table.vue b/next-ui/src/components/import/readlist/Table.vue
index b94e7404..41a8344e 100644
--- a/next-ui/src/components/import/readlist/Table.vue
+++ b/next-ui/src/components/import/readlist/Table.vue
@@ -142,10 +142,7 @@
 
     <!--region Creation Form-->
     <v-container fluid>
-      <v-row
-        justify="space-between"
-        align="end"
-      >
+      <v-row class="align-end justify-space-between">
         <v-col
           cols="12"
           sm=""
diff --git a/next-ui/src/components/item/CardWide/ItemCardWide.vue b/next-ui/src/components/item/CardWide/ItemCardWide.vue
index d85e6a0a..d093b3f3 100644
--- a/next-ui/src/components/item/CardWide/ItemCardWide.vue
+++ b/next-ui/src/components/item/CardWide/ItemCardWide.vue
@@ -6,7 +6,7 @@
     <v-card
       v-on-long-press.prevent="onCardLongPress"
       v-bind="props"
-      :elevation="isHovering ? 3 : 1"
+      :elevation="isHovering ? 2 : 1"
       :class="isPreSelect || selected ? 'cursor-pointer' : 'cursor-default'"
       @click="
         (event: Event) => (isPreSelect || selected ? emit('selection', !selected, event) : {})
@@ -55,7 +55,7 @@
               <!--  Top-right icon  -->
               <div
                 v-if="topRightIcon || topRight"
-                class="top-0 right-0 position-absolute translucent text-white px-2 py-1 font-weight-bold text-caption"
+                class="top-0 right-0 position-absolute translucent text-white px-2 py-1 font-weight-bold text-body-small"
                 style="border-bottom-left-radius: 4px"
               >
                 <v-icon
@@ -79,13 +79,13 @@
 
           <div>
             <div
-              class="text-h6 force-line-count text-wrap"
+              class="text-headline-small force-line-count text-wrap"
               :style="[{ '--lines': 1 }, { '--line-height': 1.6 }]"
             >
               {{ title }}
             </div>
             <div
-              class="text-subtitle-1 force-line-count text-pre-wrap mt-2"
+              class="text-body-large force-line-count text-pre-wrap mt-2"
               :style="[{ '--lines': display.xs.value ? 1 : 3 }, { '--line-height': 1.6 }]"
             >
               {{ text }}
diff --git a/next-ui/src/components/item/card/ItemCard.vue b/next-ui/src/components/item/card/ItemCard.vue
index c14aff2a..34c47f60 100644
--- a/next-ui/src/components/item/card/ItemCard.vue
+++ b/next-ui/src/components/item/card/ItemCard.vue
@@ -38,7 +38,7 @@
           <!--  Top-right icon  -->
           <div
             v-if="topRightIcon || topRight"
-            class="top-0 right-0 position-absolute translucent text-white px-2 py-1 font-weight-bold text-caption"
+            class="top-0 right-0 position-absolute translucent text-white px-2 py-1 font-weight-bold text-body-small"
             style="border-bottom-left-radius: 4px"
           >
             <v-icon
@@ -134,7 +134,7 @@
     </v-hover>
 
     <v-card-title
-      :class="['text-subtitle-2 px-2 pb-0 mb-2', { 'force-line-count text-wrap': title.lines }]"
+      :class="['text-label-large px-2 pb-0 mb-2', { 'force-line-count text-wrap': title.lines }]"
       :style="[{ '--lines': title.lines }, { '--line-height': 1.6 }]"
       >{{ title.text }}</v-card-title
     >
diff --git a/next-ui/src/components/layout/app/Bar.vue b/next-ui/src/components/layout/app/Bar.vue
index 4d5c9544..2d454e00 100644
--- a/next-ui/src/components/layout/app/Bar.vue
+++ b/next-ui/src/components/layout/app/Bar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar elevation="2">
+  <v-app-bar elevation="1">
     <template #prepend>
       <v-app-bar-nav-icon @click="appStore.drawer = !appStore.drawer">
         <template #default>
diff --git a/next-ui/src/components/layout/app/drawer/Footer.vue b/next-ui/src/components/layout/app/drawer/Footer.vue
index d0ab70e9..f39a410a 100644
--- a/next-ui/src/components/layout/app/drawer/Footer.vue
+++ b/next-ui/src/components/layout/app/drawer/Footer.vue
@@ -1,13 +1,13 @@
 <template>
   <v-divider />
-  <div class="d-flex align-center text-caption text-medium-emphasis pa-2">
+  <div class="d-flex align-center text-body-small text-medium-emphasis pa-2">
     <div class="d-flex ms-auto">
       <v-btn
         prepend-icon="i-mdi:help-circle-outline"
         variant="text"
         color="grey"
         size="small"
-        class="text-caption"
+        class="text-body-small"
         href="https://komga.org"
         target="_blank"
         :text="
@@ -22,7 +22,7 @@
   </div>
   <div
     v-if="isAdmin"
-    class="d-flex align-center text-caption text-medium-emphasis pa-2"
+    class="d-flex align-center text-body-small text-medium-emphasis pa-2"
   >
     <div class="d-flex ms-auto">
       <BuildCommit class="me-2" />
diff --git a/next-ui/src/components/library/form/StepGeneral.vue b/next-ui/src/components/library/form/StepGeneral.vue
index f141d2f4..0464fa8f 100644
--- a/next-ui/src/components/library/form/StepGeneral.vue
+++ b/next-ui/src/components/library/form/StepGeneral.vue
@@ -17,7 +17,7 @@
       </v-col>
     </v-row>
 
-    <v-row align="center">
+    <v-row class="align-center">
       <v-col>
         <v-text-field
           v-model="model.root"
diff --git a/next-ui/src/components/library/form/StepMetadata.vue b/next-ui/src/components/library/form/StepMetadata.vue
index 4b5f0762..f62c493a 100644
--- a/next-ui/src/components/library/form/StepMetadata.vue
+++ b/next-ui/src/components/library/form/StepMetadata.vue
@@ -2,7 +2,7 @@
   <v-container class="px-0">
     <v-row>
       <v-col cols="auto">
-        <div class="text-subtitle-2 d-flex ga-2 align-center">
+        <div class="text-label-large d-flex ga-2 align-center">
           <div>
             {{
               $formatMessage({
@@ -111,7 +111,7 @@
 
     <v-row>
       <v-col>
-        <div class="text-subtitle-2">
+        <div class="text-label-large">
           {{
             $formatMessage({
               description: 'Form add/edit library: Metadata - section header for epub',
@@ -150,7 +150,7 @@
 
     <v-row>
       <v-col>
-        <div class="text-subtitle-2">
+        <div class="text-label-large">
           {{
             $formatMessage({
               description: 'Form add/edit library: Metadata - section header for mylar series.json',
@@ -178,7 +178,7 @@
 
     <v-row>
       <v-col>
-        <div class="text-subtitle-2">
+        <div class="text-label-large">
           {{
             $formatMessage({
               description:
@@ -207,7 +207,7 @@
 
     <v-row>
       <v-col>
-        <div class="text-subtitle-2 d-flex ga-2 align-center">
+        <div class="text-label-large d-flex ga-2 align-center">
           {{
             $formatMessage({
               description: 'Form add/edit library: Metadata - section header for ISBN barcode',
diff --git a/next-ui/src/components/library/form/StepOptions.vue b/next-ui/src/components/library/form/StepOptions.vue
index 6be055b4..ddf354e3 100644
--- a/next-ui/src/components/library/form/StepOptions.vue
+++ b/next-ui/src/components/library/form/StepOptions.vue
@@ -2,7 +2,7 @@
   <v-container class="px-0">
     <v-row>
       <v-col cols="auto">
-        <div class="text-subtitle-2 d-flex ga-2 align-center">
+        <div class="text-label-large d-flex ga-2 align-center">
           <div>
             {{
               $formatMessage({
@@ -128,7 +128,7 @@
 
     <v-row>
       <v-col>
-        <div class="text-subtitle-2">
+        <div class="text-label-large">
           {{
             $formatMessage({
               description: 'Form add/edit library: Options - section header for file management',
@@ -167,7 +167,7 @@
 
     <v-row>
       <v-col>
-        <div class="text-subtitle-2">
+        <div class="text-label-large">
           {{
             $formatMessage({
               description: 'Form add/edit library: Options - section header for series cover',
diff --git a/next-ui/src/components/library/form/StepScanner.vue b/next-ui/src/components/library/form/StepScanner.vue
index 9915d5e5..d3154a39 100644
--- a/next-ui/src/components/library/form/StepScanner.vue
+++ b/next-ui/src/components/library/form/StepScanner.vue
@@ -63,7 +63,7 @@
 
     <v-row>
       <v-col>
-        <div class="text-subtitle-1">
+        <div class="text-body-large">
           {{
             $formatMessage({
               description: 'Form add/edit library: Scanner - file types selection header',
diff --git a/next-ui/src/components/release/Card.vue b/next-ui/src/components/release/Card.vue
index 287ed52a..d1b1fca9 100644
--- a/next-ui/src/components/release/Card.vue
+++ b/next-ui/src/components/release/Card.vue
@@ -5,7 +5,7 @@
         <a
           :href="release.url"
           target="_blank"
-          class="text-h4 font-weight-medium link-underline"
+          class="text-headline-large font-weight-medium link-underline"
           >{{ release.version }}</a
         >
         <v-chip
@@ -45,10 +45,7 @@
 
     <template #text>
       <!-- eslint-disable vue/no-v-html -->
-      <div
-        class="release"
-        v-html="marked(release.description)"
-      />
+      <div v-html="marked(release.description)" />
       <!-- eslint-enable vue/no-v-html -->
     </template>
   </v-card>
@@ -68,17 +65,3 @@ const {
   current?: boolean
 }>()
 </script>
-
-<style lang="scss">
-.release p {
-  margin-bottom: 16px;
-}
-
-.release ul {
-  padding-left: 24px;
-}
-
-.release a {
-  color: var(--v-anchor-base);
-}
-</style>
diff --git a/next-ui/src/components/selection/Bar.vue b/next-ui/src/components/selection/Bar.vue
index 19f10ff5..362425ec 100644
--- a/next-ui/src/components/selection/Bar.vue
+++ b/next-ui/src/components/selection/Bar.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app-bar
-    elevation="2"
+    elevation="1"
     color="surface-light"
   >
     <template #prepend>
diff --git a/next-ui/src/components/server/Settings.vue b/next-ui/src/components/server/Settings.vue
index 240f9421..de2df6d4 100644
--- a/next-ui/src/components/server/Settings.vue
+++ b/next-ui/src/components/server/Settings.vue
@@ -11,7 +11,7 @@
       >
         <v-row>
           <v-col>
-            <div class="text-subtitle-2">
+            <div class="text-label-large">
               {{
                 $formatMessage({
                   description: 'Server settings: section header for posters',
@@ -42,7 +42,7 @@
 
         <v-row>
           <v-col>
-            <div class="text-subtitle-2">
+            <div class="text-label-large">
               {{
                 $formatMessage({
                   description: 'Server settings: section header for scan behaviour',
@@ -80,7 +80,7 @@
 
         <v-row>
           <v-col>
-            <div class="text-subtitle-2">
+            <div class="text-label-large">
               {{
                 $formatMessage({
                   description: 'Server settings: section header for tasks',
@@ -112,7 +112,7 @@
 
         <v-row>
           <v-col>
-            <div class="text-subtitle-2">
+            <div class="text-label-large">
               {{
                 $formatMessage({
                   description: 'Server settings: section header for remember me',
@@ -121,7 +121,7 @@
                 })
               }}
             </div>
-            <div class="text-caption">{{ messageRequiresRestart }}</div>
+            <div class="text-body-small">{{ messageRequiresRestart }}</div>
           </v-col>
         </v-row>
         <v-row>
@@ -156,7 +156,7 @@
 
         <v-row>
           <v-col>
-            <div class="text-subtitle-2">
+            <div class="text-label-large">
               {{
                 $formatMessage({
                   description: 'Server settings: section header for HTTP server',
@@ -165,7 +165,7 @@
                 })
               }}
             </div>
-            <div class="text-caption">{{ messageRequiresRestart }}</div>
+            <div class="text-body-small">{{ messageRequiresRestart }}</div>
           </v-col>
         </v-row>
 
@@ -243,7 +243,7 @@
 
         <v-row>
           <v-col>
-            <div class="text-subtitle-2">
+            <div class="text-label-large">
               {{
                 $formatMessage({
                   description: 'Server settings: section header for Kobo Sync',
diff --git a/next-ui/src/components/user/Details.vue b/next-ui/src/components/user/Details.vue
index 122c96eb..82aeb601 100644
--- a/next-ui/src/components/user/Details.vue
+++ b/next-ui/src/components/user/Details.vue
@@ -4,7 +4,9 @@
       <v-avatar
         color="primary"
         size="x-large"
-        ><span class="text-h5 text-uppercase">{{ user.email.charAt(0) }}</span></v-avatar
+        ><span class="text-headline-medium text-uppercase">{{
+          user.email.charAt(0)
+        }}</span></v-avatar
       >
     </template>
 
diff --git a/next-ui/src/components/user/form/CreateEdit.vue b/next-ui/src/components/user/form/CreateEdit.vue
index 515bfcaa..86550332 100644
--- a/next-ui/src/components/user/form/CreateEdit.vue
+++ b/next-ui/src/components/user/form/CreateEdit.vue
@@ -44,7 +44,7 @@
           v-if="!user.id"
           class="mb-4"
         />
-        <div class="text-subtitle-2">Permissions</div>
+        <div class="text-label-large">Permissions</div>
       </v-col>
     </v-row>
     <!-- Roles  -->
@@ -103,12 +103,12 @@
             />
           </template>
 
-          <template #selection="{ item }">
+          <template #selection="{ internalItem }">
             <!--  Show the selection only if 'all' is false  -->
             <v-chip
               v-if="!user.sharedLibraries?.all"
               size="small"
-              :text="item.title"
+              :text="internalItem.title"
             />
           </template>
 
@@ -148,7 +148,7 @@
     <v-row>
       <v-col>
         <v-divider class="mb-4" />
-        <div class="text-subtitle-2">Age restriction</div>
+        <div class="text-label-large">Age restriction</div>
       </v-col>
     </v-row>
     <v-row>
@@ -192,7 +192,7 @@
     <v-row>
       <v-col>
         <v-divider class="mb-4" />
-        <div class="text-subtitle-2">Label restrictions</div>
+        <div class="text-label-large">Label restrictions</div>
       </v-col>
     </v-row>
     <!-- Allow labels -->
diff --git a/next-ui/src/pages/claim.vue b/next-ui/src/pages/claim.vue
index 1d291cbb..c8aeed4d 100644
--- a/next-ui/src/pages/claim.vue
+++ b/next-ui/src/pages/claim.vue
@@ -5,7 +5,7 @@
     @submit.prevent="submitForm()"
   >
     <v-container max-width="400px">
-      <v-row justify="center">
+      <v-row class="justify-center">
         <v-col
           cols="7"
           sm="10"
@@ -118,7 +118,7 @@
 
       <v-divider class="my-4" />
 
-      <v-row justify="center">
+      <v-row class="justify-center">
         <v-col cols="auto">
           <div class="d-flex ga-4">
             <LocaleSelector />
diff --git a/next-ui/src/pages/login.vue b/next-ui/src/pages/login.vue
index 5ac44125..e869e278 100644
--- a/next-ui/src/pages/login.vue
+++ b/next-ui/src/pages/login.vue
@@ -5,7 +5,7 @@
     @submit.prevent="submitForm()"
   >
     <v-container max-width="400px">
-      <v-row justify="center">
+      <v-row class="justify-center">
         <v-col
           cols="7"
           sm="10"
@@ -92,12 +92,12 @@
         </v-col>
       </v-row>
 
-      <v-row justify="center">
+      <v-row class="justify-center">
         <v-col cols="auto">
           <a
             href="https://komga.org/docs/faq#i-forgot-my-password"
             target="_blank"
-            class="link-underline text-body-2"
+            class="link-underline text-body-medium"
           >
             {{
               $formatMessage({
@@ -112,7 +112,7 @@
 
       <v-divider class="my-4" />
 
-      <v-row justify="center">
+      <v-row class="justify-center">
         <v-col cols="auto">
           <div class="d-flex ga-4">
             <LocaleSelector />
diff --git a/next-ui/src/pages/startup.vue b/next-ui/src/pages/startup.vue
index ec36eca7..3506c3d2 100644
--- a/next-ui/src/pages/startup.vue
+++ b/next-ui/src/pages/startup.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container max-width="550px">
-    <v-row justify="center">
+    <v-row class="justify-center">
       <v-col>
         <v-img
           src="@/assets/logo.svg"
diff --git a/next-ui/src/plugins/vuetify.ts b/next-ui/src/plugins/vuetify.ts
index 351ae945..ab911c3d 100644
--- a/next-ui/src/plugins/vuetify.ts
+++ b/next-ui/src/plugins/vuetify.ts
@@ -6,7 +6,7 @@
 
 // Styles
 import 'vuetify/styles'
-import { aliases } from 'vuetify/iconsets/mdi'
+import { aliases, mdi } from 'vuetify/iconsets/mdi-unocss'
 
 // Composables
 import { createVuetify } from 'vuetify'
@@ -40,13 +40,11 @@ export const vuetify = createVuetify({
     messages,
   },
   icons: {
-    // 'class' is a built-in set that just applies the icon value as classes on the v-icon
-    defaultSet: 'class',
-    // customize the provided mdi aliases to fit the unocss class names
-    aliases: Object.keys(aliases).reduce((obj: Record<string, string>, key) => {
-      obj[key] = `i-mdi:${aliases[key]!.toString().substring(4)}`
-      return obj
-    }, {}),
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi,
+    },
   },
   theme: {
     defaultTheme: 'light',
diff --git a/next-ui/src/stores/messages.ts b/next-ui/src/stores/messages.ts
index e1b2d859..5e18f066 100644
--- a/next-ui/src/stores/messages.ts
+++ b/next-ui/src/stores/messages.ts
@@ -5,7 +5,7 @@ type Message =
   | {
       text: string
       color?: string
-      timer?: string | boolean
+      timer?: boolean | 'top' | 'bottom'
       timeout?: string | number
     }
   | string
diff --git a/next-ui/uno.config.ts b/next-ui/uno.config.ts
index 3b2d16fb..9fc448cc 100644
--- a/next-ui/uno.config.ts
+++ b/next-ui/uno.config.ts
@@ -1,12 +1,12 @@
 import { defineConfig, presetIcons } from 'unocss'
-import { aliases } from 'vuetify/iconsets/mdi'
-
-// build the safelist from the vuetify icon aliases
-const vuetifyIcons = Object.keys(aliases).map(
-  (key) => `i-mdi:${aliases[key]!.toString().substring(4)}`,
-)
 
 export default defineConfig({
-  presets: [presetIcons()],
-  safelist: vuetifyIcons,
+  presets: [
+    presetIcons({
+      // ensures proper CSS layers for icon colors
+      processor(props) {
+        delete props.color
+      },
+    }),
+  ],
 })