diff --git a/komga-webui/package-lock.json b/komga-webui/package-lock.json
index 224c1f01..d4ac1ba9 100644
--- a/komga-webui/package-lock.json
+++ b/komga-webui/package-lock.json
@@ -16534,16 +16534,17 @@
       "integrity": "sha512-GAAG8QAFVp7BFeQlNaThpTbimq3+HypBPNwdkCkHZZeVaD5zmXXfhp357dcUJXHXTZjSln0PvP6wiwLZXkFTwg=="
     },
     "vuetify": {
-      "version": "2.2.14",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.14.tgz",
-      "integrity": "sha512-oaWbhWe6qilAhMMzmqZ+EnSht1UsP9EyW1gKwAipl+89Bwb0ZFjcJBNXNoVJ6INN3vP9cVrLsQjbxHOMFYrI/Q=="
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.7.tgz",
+      "integrity": "sha512-9PNorMNNcn0okT78ZpN86qL5Zx4xu0yzcO2w1IdN3ECdbAP00rHe8CEYCThakwXGUuTZ8Iv7gAMDqH6zfxSMtA=="
     },
     "vuetify-loader": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.4.3.tgz",
-      "integrity": "sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.6.0.tgz",
+      "integrity": "sha512-1bx3YeZ712dT1+QMX+XSFlP0O5k5O5Ui9ysBBmUZ9bWkAEHWZJQI9soI+qG5qmeFxUC0L9QYMCIKP0hOL/pf3Q==",
       "dev": true,
       "requires": {
+        "file-loader": "^4.0.0",
         "loader-utils": "^1.2.0"
       }
     },
diff --git a/komga-webui/package.json b/komga-webui/package.json
index 0e7b0f80..83720d66 100644
--- a/komga-webui/package.json
+++ b/komga-webui/package.json
@@ -23,7 +23,7 @@
     "vue-typed-mixins": "^0.2.0",
     "vuedraggable": "^2.24.0",
     "vuelidate": "^0.7.5",
-    "vuetify": "^2.2.14",
+    "vuetify": "^2.3.7",
     "vuex": "^3.5.1",
     "vuex-router-sync": "^5.0.0"
   },
@@ -61,6 +61,6 @@
     "typescript": "^3.9.7",
     "vue-cli-plugin-vuetify": "^2.0.7",
     "vue-template-compiler": "^2.6.11",
-    "vuetify-loader": "^1.4.3"
+    "vuetify-loader": "^1.6.0"
   }
 }
diff --git a/komga-webui/src/components/CollectionsExpansionPanels.vue b/komga-webui/src/components/CollectionsExpansionPanels.vue
index 1a7b2e0a..5616ad3d 100644
--- a/komga-webui/src/components/CollectionsExpansionPanels.vue
+++ b/komga-webui/src/components/CollectionsExpansionPanels.vue
@@ -7,7 +7,7 @@
       <v-expansion-panel-content>
         <horizontal-scroller>
           <template v-slot:prepend>
-            <router-link class="overline"
+            <router-link class="text-overline"
                          :to="{name: 'browse-collection', params: {collectionId: c.id}}"
             >Manage collection
             </router-link>
diff --git a/komga-webui/src/components/EmptyState.vue b/komga-webui/src/components/EmptyState.vue
index 798fecb9..0cd3eb5d 100644
--- a/komga-webui/src/components/EmptyState.vue
+++ b/komga-webui/src/components/EmptyState.vue
@@ -7,8 +7,8 @@
                 :size="iconSize"
         >{{ icon }}
         </v-icon>
-        <h1 class="headline">{{ title }}</h1>
-        <p class="body-1">{{ subTitle }}</p>
+        <h1 class="text-h5">{{ title }}</h1>
+        <p class="text-body-1">{{ subTitle }}</p>
         <slot/>
       </div>
     </v-avatar>
diff --git a/komga-webui/src/components/ItemBrowser.vue b/komga-webui/src/components/ItemBrowser.vue
index 5c298c85..aa34fe59 100644
--- a/komga-webui/src/components/ItemBrowser.vue
+++ b/komga-webui/src/components/ItemBrowser.vue
@@ -178,7 +178,7 @@ export default Vue.extend({
   methods: {
     onResize () {
       const content = this.$refs.content as HTMLElement
-      this.width = computeCardWidth(content.clientWidth, this.$vuetify.breakpoint.name)
+      this.width = computeCardWidth(content.clientWidth, this.$vuetify.breakpoint.name.toString())
     },
     deleteItem (item: any) {
       const index = this.localItems.findIndex((e: any) => e.id === item.id)
diff --git a/komga-webui/src/components/ItemCard.vue b/komga-webui/src/components/ItemCard.vue
index 629e7514..f2fa71fb 100644
--- a/komga-webui/src/components/ItemCard.vue
+++ b/komga-webui/src/components/ItemCard.vue
@@ -19,7 +19,7 @@
 
           <!-- unread count for series -->
           <span v-if="unreadCount"
-                class="white--text pa-1 px-2 subtitle-2"
+                class="white--text pa-1 px-2 text-subtitle-2"
                 :style="{background: 'orange', position: 'absolute', right: 0}"
           >
             {{ unreadCount }}
diff --git a/komga-webui/src/components/bars/ToolbarSticky.vue b/komga-webui/src/components/bars/ToolbarSticky.vue
index 4b54da34..8a29a961 100644
--- a/komga-webui/src/components/bars/ToolbarSticky.vue
+++ b/komga-webui/src/components/bars/ToolbarSticky.vue
@@ -16,7 +16,7 @@ export default Vue.extend({
   name: 'ToolbarSticky',
   computed: {
     barStyle (): any {
-      if (['xs', 'sm'].includes(this.$vuetify.breakpoint.name)) {
+      if (['xs', 'sm'].includes(this.$vuetify.breakpoint.name.toString())) {
         return { 'top': '56px' }
       } else {
         return { 'top': '64px' }
diff --git a/komga-webui/src/components/dialogs/CollectionEditDialog.vue b/komga-webui/src/components/dialogs/CollectionEditDialog.vue
index 386d552e..a4992871 100644
--- a/komga-webui/src/components/dialogs/CollectionEditDialog.vue
+++ b/komga-webui/src/components/dialogs/CollectionEditDialog.vue
@@ -19,7 +19,8 @@
 
             <v-row>
               <v-col>
-                <div class="body-2">By default, series in a collection will be ordered by name. You can enable manual
+                <div class="text-body-2">By default, series in a collection will be ordered by name. You can enable
+                  manual
                   ordering to define your own order.
                 </div>
                 <v-checkbox
diff --git a/komga-webui/src/components/dialogs/EditBooksDialog.vue b/komga-webui/src/components/dialogs/EditBooksDialog.vue
index 616d5018..48e9f7dd 100644
--- a/komga-webui/src/components/dialogs/EditBooksDialog.vue
+++ b/komga-webui/src/components/dialogs/EditBooksDialog.vue
@@ -242,7 +242,7 @@
                          :key="i"
                   >
                     <v-col cols="12">
-                      <span class="body-2">{{ $_.capitalize(role.plural) }}</span>
+                      <span class="text-body-2">{{ $_.capitalize(role.plural) }}</span>
                       <v-combobox v-model="form.authors[role.role]"
                                   :items="authorSearchResultsFull"
                                   :search-input.sync="authorSearch[i]"
diff --git a/komga-webui/src/components/dialogs/LibraryEditDialog.vue b/komga-webui/src/components/dialogs/LibraryEditDialog.vue
index 551df399..c93e5938 100644
--- a/komga-webui/src/components/dialogs/LibraryEditDialog.vue
+++ b/komga-webui/src/components/dialogs/LibraryEditDialog.vue
@@ -76,7 +76,7 @@
                 <v-container fluid>
                   <v-row>
                     <v-col>
-                      <span class="subtitle-2">Import metadata for CBR/CBZ containing a ComicInfo.xml file</span>
+                      <span class="text-subtitle-2">Import metadata for CBR/CBZ containing a ComicInfo.xml file</span>
                       <v-checkbox
                         v-model="form.importComicInfoBook"
                         label="Book metadata"
@@ -96,7 +96,7 @@
                   </v-row>
                   <v-row>
                     <v-col>
-                      <span class="subtitle-2">Import metadata from EPUB files</span>
+                      <span class="text-subtitle-2">Import metadata from EPUB files</span>
                       <v-checkbox
                         v-model="form.importEpubBook"
                         label="Book metadata"
diff --git a/komga-webui/src/components/dialogs/UserEditDialog.vue b/komga-webui/src/components/dialogs/UserEditDialog.vue
index 3cb961b3..047b5187 100644
--- a/komga-webui/src/components/dialogs/UserEditDialog.vue
+++ b/komga-webui/src/components/dialogs/UserEditDialog.vue
@@ -10,7 +10,7 @@
           <v-container fluid>
             <v-row>
               <v-col>
-                <span class="subtitle-1">Roles for {{ user.email }}</span>
+                <span class="text-subtitle-1">Roles for {{ user.email }}</span>
               </v-col>
             </v-row>
 
diff --git a/komga-webui/src/components/dialogs/UserSharedLibrariesEditDialog.vue b/komga-webui/src/components/dialogs/UserSharedLibrariesEditDialog.vue
index f2594d23..94ae0904 100644
--- a/komga-webui/src/components/dialogs/UserSharedLibrariesEditDialog.vue
+++ b/komga-webui/src/components/dialogs/UserSharedLibrariesEditDialog.vue
@@ -10,7 +10,7 @@
           <v-container fluid>
             <v-row>
               <v-col>
-                <span class="subtitle-1">Shared with {{ this.user.email }}</span>
+                <span class="text-subtitle-1">Shared with {{ this.user.email }}</span>
               </v-col>
             </v-row>
 
diff --git a/komga-webui/src/views/AccountSettings.vue b/komga-webui/src/views/AccountSettings.vue
index 468da1ee..876232f0 100644
--- a/komga-webui/src/views/AccountSettings.vue
+++ b/komga-webui/src/views/AccountSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container fluid class="pa-6">
     <v-row>
-      <span class="headline">Account Settings</span>
+      <span class="text-h5">Account Settings</span>
     </v-row>
     <v-row align="center">
       <v-col cols="12" md="8" lg="6" xl="4">
diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue
index 0672a079..08989b49 100644
--- a/komga-webui/src/views/BrowseBook.vue
+++ b/komga-webui/src/views/BrowseBook.vue
@@ -37,28 +37,29 @@
         <v-col cols="8">
           <v-row>
             <v-col>
-              <div class="headline">{{ book.metadata.title }}</div>
+              <div class="text-h5">{{ book.metadata.title }}</div>
             </v-col>
           </v-row>
 
-          <v-row class="body-2">
+          <v-row class="text-body-2">
             <v-col>
               <span class="mr-3">#{{ book.metadata.number }}</span>
               <badge v-if="book.metadata.ageRating">{{ book.metadata.ageRating }}+</badge>
             </v-col>
             <v-col cols="auto" v-if="book.metadata.releaseDate">
-              {{ book.metadata.releaseDate | moment('MMMM DD, YYYY') }}
+              {{ book.metadata.releaseDate | moment
+            ('MMMM DD, YYYY') }}
             </v-col>
           </v-row>
 
           <v-divider/>
 
-          <v-row class="body-2" v-if="book.metadata.publisher">
+          <v-row class="text-body-2" v-if="book.metadata.publisher">
             <v-col cols="6" sm="4" md="2">PUBLISHER</v-col>
             <v-col>{{ book.metadata.publisher }}</v-col>
           </v-row>
 
-          <v-row class="body-2"
+          <v-row class="text-body-2"
                  v-for="(names, key) in authorsByRole"
                  :key="key"
           >
@@ -72,7 +73,7 @@
 
           <v-row class="mt-3">
             <v-col>
-              <div class="body-1"
+              <div class="text-body-1"
                    style="white-space: pre-wrap"
               >{{ book.metadata.summary }}
               </div>
@@ -104,37 +105,38 @@
         </v-col>
         <v-col cols="auto">
           <v-icon class="mr-2 pb-1">mdi-book-open</v-icon>
-          <span class="body-2">{{ book.media.pagesCount }} pages</span>
+          <span class="text-body-2">{{ book.media.pagesCount }} pages</span>
         </v-col>
       </v-row>
 
       <v-row>
-        <v-col cols="2" md="1" lg="1" xl="1" class="body-2">SIZE</v-col>
-        <v-col cols="10" class="body-2">{{ book.size }}</v-col>
+        <v-col cols="2" md="1" lg="1" xl="1" class="text-body-2">SIZE</v-col>
+        <v-col cols="10" class="text-body-2">{{ book.size }}</v-col>
       </v-row>
 
       <v-row v-if="book.media.comment">
-        <v-col cols="2" md="1" lg="1" xl="1" class="body-2">COMMENT</v-col>
-        <v-col cols="10" class="body-2">
+        <v-col cols="2" md="1" lg="1" xl="1" class="text-body-2">COMMENT</v-col>
+        <v-col cols="10" class="text-body-2">
           <span class="error--text font-weight-bold">{{ book.media.comment }}</span>
         </v-col>
       </v-row>
 
       <v-row>
-        <v-col cols="2" md="1" lg="1" xl="1" class="body-2">FORMAT</v-col>
-        <v-col cols="10" class="body-2">
+        <v-col cols="2" md="1" lg="1" xl="1" class="text-body-2">FORMAT</v-col>
+        <v-col cols="10" class="text-body-2">
           <span>{{ format.type }}</span>
         </v-col>
       </v-row>
 
       <v-row v-if="book.metadata.readingDirection">
-        <v-col cols="2" md="1" lg="1" xl="1" class="body-2">READING DIRECTION</v-col>
-        <v-col cols="10" class="body-2">{{ $_.capitalize(book.metadata.readingDirection.replace(/_/g, ' ')) }}</v-col>
+        <v-col cols="2" md="1" lg="1" xl="1" class="text-body-2">READING DIRECTION</v-col>
+        <v-col cols="10" class="text-body-2">{{ readingDirection }}
+        </v-col>
       </v-row>
 
       <v-row align="center">
-        <v-col cols="2" md="1" lg="1" xl="1" class="body-2">FILE</v-col>
-        <v-col cols="10" class="body-2">{{ book.url }}</v-col>
+        <v-col cols="2" md="1" lg="1" xl="1" class="text-body-2">FILE</v-col>
+        <v-col cols="10" class="text-body-2">{{ book.url }}</v-col>
       </v-row>
 
     </v-container>
@@ -229,6 +231,9 @@ export default Vue.extend({
     readProgressPercentage (): number {
       return getReadProgressPercentage(this.book)
     },
+    readingDirection (): string {
+      return this.$_.capitalize(this.book.metadata.readingDirection.replace(/_/g, ' '))
+    },
   },
   methods: {
     libraryDeleted (event: EventLibraryDeleted) {
diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue
index d8e8a679..6404bef5 100644
--- a/komga-webui/src/views/BrowseCollection.vue
+++ b/komga-webui/src/views/BrowseCollection.vue
@@ -10,7 +10,7 @@
         <span>{{ collection.name }}</span>
         <badge class="mx-4">{{ collection.seriesIds.length }}</badge>
         <span v-if="collection.ordered"
-              class="font-italic overline"
+              class="font-italic text-overline"
         >(manual ordering)</span>
       </v-toolbar-title>
 
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index 785b4b0e..e53212f2 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -63,13 +63,13 @@
         <v-col cols="8">
           <v-row>
             <v-col>
-              <div class="headline" v-if="$_.get(series, 'metadata.title')">{{ series.metadata.title }}</div>
+              <div class="text-h5" v-if="$_.get(series, 'metadata.title')">{{ series.metadata.title }}</div>
             </v-col>
           </v-row>
 
           <v-row>
-            <v-col cols="auto" class="body-2">STATUS</v-col>
-            <v-col cols="auto" class="body-2 text-capitalize" v-if="series.metadata">{{
+            <v-col cols="auto" class="text-body-2">STATUS</v-col>
+            <v-col cols="auto" class="text-body-2 text-capitalize" v-if="series.metadata">{{
               series.metadata.status.toLowerCase() }}
             </v-col>
           </v-row>
diff --git a/komga-webui/src/views/Home.vue b/komga-webui/src/views/Home.vue
index e06a8118..b155bf68 100644
--- a/komga-webui/src/views/Home.vue
+++ b/komga-webui/src/views/Home.vue
@@ -118,17 +118,17 @@
 
       <template v-slot:append>
         <div v-if="isAdmin && !$_.isEmpty(info)"
-             class="pa-2 pb-6 caption"
+             class="pa-2 pb-6 text-caption"
         >
           <div>v{{ info.build.version }}-{{ info.git.branch }}</div>
         </div>
       </template>
     </v-navigation-drawer>
 
-    <v-content>
+    <v-main>
       <dialogs/>
       <router-view/>
-    </v-content>
+    </v-main>
   </div>
 </template>
 
diff --git a/komga-webui/src/views/Login.vue b/komga-webui/src/views/Login.vue
index f3626eb9..69fe588a 100644
--- a/komga-webui/src/views/Login.vue
+++ b/komga-webui/src/views/Login.vue
@@ -10,7 +10,7 @@
       <v-row justify="center" v-if="unclaimed">
         <v-col
           cols="12" sm="8" md="6" lg="4" xl="2"
-          class="body-1 mt-2"
+          class="text-body-1 mt-2"
         >
           <v-alert type="info"
                    icon="mdi-account-plus"
diff --git a/komga-webui/src/views/SettingsUsers.vue b/komga-webui/src/views/SettingsUsers.vue
index 8eacca1f..5ea86e96 100644
--- a/komga-webui/src/views/SettingsUsers.vue
+++ b/komga-webui/src/views/SettingsUsers.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container fluid class="pa-6">
     <v-row>
-      <span class="headline">Users</span>
+      <span class="text-h5">Users</span>
     </v-row>
     <v-row>
       <v-col cols="12" md="8" lg="6" xl="4">
@@ -33,7 +33,7 @@
                     <template v-slot:activator="{ on }">
                       <v-btn icon @click="editSharedLibraries(u)" :disabled="u.roles.includes(UserRoles.ADMIN)"
                              v-on="on">
-                        <v-icon>mdi-library-books</v-icon>
+                        <v-icon>mdi-book-lock</v-icon>
                       </v-btn>
                     </template>
                     <span>Edit shared libraries</span>
diff --git a/komga-webui/src/views/Welcome.vue b/komga-webui/src/views/Welcome.vue
index b94c4e94..dcdb17e3 100644
--- a/komga-webui/src/views/Welcome.vue
+++ b/komga-webui/src/views/Welcome.vue
@@ -7,8 +7,8 @@
     </v-row>
     <v-row align="center" justify="center">
       <div class="text-center">
-        <h1 class="headline mt-4">Welcome to Komga</h1>
-        <p class="body-1">No libraries have been added yet!</p>
+        <h1 class="text-h5 mt-4">Welcome to Komga</h1>
+        <p class="text-body-1">No libraries have been added yet!</p>
         <v-btn color="primary" @click="addLibrary" v-if="isAdmin">Add library</v-btn>
       </div>
     </v-row>