diff --git a/client/components/app/BookShelfCategorized.vue b/client/components/app/BookShelfCategorized.vue
index b9b2fbfd..f01e829e 100644
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative">
+  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative" :style="{ fontSize: sizeMultiplier + 'rem' }">
     <!-- Cover size widget -->
     <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
 
@@ -14,28 +14,16 @@
       <p class="text-center text-xl py-4">{{ $strings.MessageBookshelfNoResultsForQuery }}</p>
     </div>
     <!-- Alternate plain view -->
-    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
-      <template v-for="(shelf, index) in shelves">
-        <widgets-item-slider v-if="shelf.type === 'book' || shelf.type === 'podcast'" :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e">
+      <template v-for="(shelf, index) in supportedShelves">
+        <widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8e my-6e" @selectEntity="(payload) => selectEntity(payload, index)">
+          <p class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-item-slider>
-        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-episode-slider>
-        <widgets-series-slider v-else-if="shelf.type === 'series'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-series-slider>
-        <widgets-authors-slider v-else-if="shelf.type === 'authors'" :key="index + '.'" :items="shelf.entities" :height="192 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-authors-slider>
-        <widgets-narrators-slider v-else-if="shelf.type === 'narrators'" :key="index + '.'" :items="shelf.entities" :height="100 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
-        </widgets-narrators-slider>
       </template>
     </div>
     <!-- Regular bookshelf view -->
     <div v-else class="w-full">
-      <template v-for="(shelf, index) in shelves">
+      <template v-for="(shelf, index) in supportedShelves">
         <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" @selectEntity="(payload) => selectEntity(payload, index)" />
       </template>
     </div>
@@ -63,6 +51,9 @@ export default {
     }
   },
   computed: {
+    supportedShelves() {
+      return this.shelves.filter((shelf) => ['book', 'podcast', 'episode', 'series', 'authors', 'narrators'].includes(shelf.type))
+    },
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
@@ -90,8 +81,7 @@ export default {
       return this.coverAspectRatio == 1
     },
     sizeMultiplier() {
-      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
-      return this.bookCoverWidth / baseSize
+      return this.$store.getters['user/getSizeMultiplier']
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
diff --git a/client/components/app/BookShelfRow.vue b/client/components/app/BookShelfRow.vue
index 5b2c4258..f24f8dca 100644
--- a/client/components/app/BookShelfRow.vue
+++ b/client/components/app/BookShelfRow.vue
@@ -1,67 +1,53 @@
 <template>
   <div class="relative">
-    <div ref="shelf" class="w-full max-w-full bookshelf-row categorizedBookshelfRow relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft * sizeMultiplier + 'rem', height: shelfHeight + 'px' }" @scroll="scrolled">
-      <div class="w-full h-full pt-6">
+    <div ref="shelf" class="w-full max-w-full bookshelf-row categorizedBookshelfRow relative overflow-x-scroll no-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft + 'em' }" @scroll="scrolled">
+      <div class="w-full h-full pt-6e">
         <div v-if="shelf.type === 'book' || shelf.type === 'podcast'" class="flex items-center">
           <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="`${entity.id}-${index}`" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
+            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
           </template>
         </div>
         <div v-if="shelf.type === 'episode'" class="flex items-center">
           <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card
-              :key="entity.recentEpisode.id"
-              :ref="`shelf-episode-${entity.recentEpisode.id}`"
-              :index="index"
-              :width="bookCoverWidth"
-              :height="bookCoverHeight"
-              :book-cover-aspect-ratio="bookCoverAspectRatio"
-              :book-mount="entity"
-              :continue-listening-shelf="continueListeningShelf"
-              class="relative mx-2"
-              @hook:updated="updatedBookCard"
-              @select="selectItem"
-              @editPodcast="editItem"
-              @edit="editEpisode"
-            />
+            <cards-lazy-book-card :key="entity.recentEpisode.id" :ref="`shelf-episode-${entity.recentEpisode.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @editPodcast="editItem" @edit="editEpisode" />
           </template>
         </div>
         <div v-if="shelf.type === 'series'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-lazy-series-card :key="entity.name" :series-mount="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
+            <cards-lazy-series-card :key="entity.name" :series-mount="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
           </template>
         </div>
         <div v-if="shelf.type === 'tags'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-group-card :key="entity.name" :group="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
+            <cards-group-card :key="entity.name" :group="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
           </template>
         </div>
         <div v-if="shelf.type === 'authors'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-author-card :key="entity.id" :width="bookCoverWidth / 1.25" :height="bookCoverWidth" :author="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" @edit="editAuthor" />
+            <cards-author-card :key="entity.id" :author="entity" @hook:updated="updatedBookCard" class="mx-2e" @edit="editAuthor" />
           </template>
         </div>
         <div v-if="shelf.type === 'narrators'" class="flex items-center">
           <template v-for="entity in shelf.entities">
-            <cards-narrator-card :key="entity.name" :width="150" :height="100" :narrator="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" />
+            <cards-narrator-card :key="entity.name" :narrator="entity" @hook:updated="updatedBookCard" class="mx-2e" />
           </template>
         </div>
       </div>
     </div>
-
-    <div class="absolute text-center categoryPlacard transform z-30 bottom-px left-4 md:left-8 w-44 rounded-md" style="height: 22px">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
-        <p class="transform text-sm">{{ $strings[shelf.labelStringKey] }}</p>
+    <div class="relative">
+      <div class="relative text-center categoryPlacard transform z-30 top-0 left-4e md:left-8e w-44e rounded-md">
+        <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
+          <p :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </div>
       </div>
-    </div>
 
-    <div class="bookshelfDividerCategorized h-6 w-full absolute bottom-0 left-0 right-0 z-20"></div>
-
-    <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollLeft">
-      <span class="material-icons text-6xl text-white">chevron_left</span>
+      <div class="bookshelfDividerCategorized h-6e w-full absolute top-0 left-0 right-0 z-20"></div>
     </div>
-    <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollRight">
-      <span class="material-icons text-6xl text-white">chevron_right</span>
+    <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollLeft">
+      <span class="material-icons text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_left</span>
+    </div>
+    <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollRight">
+      <span class="material-icons text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_right</span>
     </div>
   </div>
 </template>
@@ -74,9 +60,6 @@ export default {
       type: Object,
       default: () => {}
     },
-    sizeMultiplier: Number,
-    bookCoverWidth: Number,
-    bookCoverAspectRatio: Number,
     continueListeningShelf: Boolean
   },
   data() {
@@ -89,12 +72,8 @@ export default {
     }
   },
   computed: {
-    bookCoverHeight() {
-      return this.bookCoverWidth * this.bookCoverAspectRatio
-    },
-    shelfHeight() {
-      if (this.shelf.type === 'narrators') return 148
-      return this.bookCoverHeight + 48
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
     },
     paddingLeft() {
       if (window.innerWidth < 768) return 1
@@ -218,13 +197,13 @@ export default {
 }
 
 .book-shelf-arrow-right {
-  height: calc(100% - 24px);
+  height: calc(100% - 1.5em);
   background: rgb(48, 48, 48);
   background: linear-gradient(90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
 }
 .book-shelf-arrow-left {
-  height: calc(100% - 24px);
+  height: calc(100% - 1.5em);
   background: rgb(48, 48, 48);
   background: linear-gradient(-90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue
index 805c6978..bb088b84 100644
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="bookshelf" class="w-full overflow-y-auto">
+  <div id="bookshelf" ref="bookshelf" class="w-full overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
     <template v-for="shelf in totalShelves">
-      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
-        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
+      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4e sm:px-8e relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
+        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" />
       </div>
     </template>
 
@@ -49,10 +49,9 @@ export default {
       entityIndexesMounted: [],
       entityComponentRefs: {},
       currentBookWidth: 0,
-      pageLoadQueue: [],
       isFetchingEntities: false,
       scrollTimeout: null,
-      booksPerFetch: 100,
+      booksPerFetch: 0,
       totalShelves: 0,
       bookshelfMarginLeft: 0,
       isSelectionMode: false,
@@ -63,7 +62,10 @@ export default {
       resizeTimeout: null,
       mountWindowWidth: 0,
       lastItemIndexSelected: -1,
-      tempIsScanning: false
+      tempIsScanning: false,
+      cardWidth: 0,
+      cardHeight: 0,
+      resizeObserver: null
     }
   },
   watch: {
@@ -160,52 +162,40 @@ export default {
       return this.$store.getters['libraries/getCurrentLibraryName']
     },
     bookWidth() {
-      const coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
-      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return coverSize * 1.6
-      return coverSize
+      return this.cardWidth
     },
     bookHeight() {
-      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return this.bookWidth
-      return this.bookWidth * 1.6
+      return this.cardHeight
     },
     shelfPadding() {
-      if (this.bookshelfWidth < 640) return 32
-      return 64
+      if (this.bookshelfWidth < 640) return 32 * this.sizeMultiplier
+      return 64 * this.sizeMultiplier
     },
     totalPadding() {
       return this.shelfPadding * 2
     },
     entityWidth() {
-      if (this.entityName === 'series' || this.entityName === 'collections') {
-        if (this.bookWidth * 2 > this.bookshelfWidth - this.shelfPadding) return this.bookWidth * 1.6
-        return this.bookWidth * 2
-      }
-      return this.bookWidth
+      return this.cardWidth
     },
     entityHeight() {
-      return this.bookHeight
+      return this.cardHeight
     },
-    shelfDividerHeightIndex() {
-      return 6
+    shelfPaddingHeight() {
+      return 16
     },
     shelfHeight() {
-      if (this.isAlternativeBookshelfView) {
-        const isItemEntity = this.entityName === 'series-books' || this.entityName === 'items'
-        const extraTitleSpace = isItemEntity ? 80 : this.entityName === 'albums' ? 60 : 40
-        return this.entityHeight + extraTitleSpace * this.sizeMultiplier
-      }
-      return this.entityHeight + 40
+      const dividerHeight = this.isAlternativeBookshelfView ? 0 : 24 // h-6
+      return this.cardHeight + (this.shelfPaddingHeight + dividerHeight) * this.sizeMultiplier
     },
     totalEntityCardWidth() {
       // Includes margin
-      return this.entityWidth + 24
+      return this.entityWidth + 24 * this.sizeMultiplier
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
     },
     sizeMultiplier() {
-      const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
-      return this.entityWidth / baseSize
+      return this.$store.getters['user/getSizeMultiplier']
     },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
@@ -436,10 +426,14 @@ export default {
     rebuild() {
       this.initSizeData()
 
-      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      var lastBookIndex = Math.min(this.totalEntities, this.booksPerFetch)
       this.entityIndexesMounted = []
       for (let i = 0; i < lastBookIndex; i++) {
         this.entityIndexesMounted.push(i)
+        if (!this.entities[i]) {
+          const page = Math.floor(i / this.booksPerFetch)
+          this.loadPage(page)
+        }
       }
       var bookshelfEl = document.getElementById('bookshelf')
       if (bookshelfEl) {
@@ -501,7 +495,8 @@ export default {
         this.resetEntities()
       }
     },
-    settingsUpdated(settings) {
+    async settingsUpdated(settings) {
+      await this.cardsHelpers.setCardSize()
       const wasUpdated = this.checkUpdateSearchParams()
       if (wasUpdated) {
         this.resetEntities()
@@ -606,6 +601,20 @@ export default {
         this.executeRebuild()
       }
     },
+    updatePagesLoaded() {
+      let numPages = Math.ceil(this.totalEntities / this.booksPerFetch)
+      for (let page = 0; page < numPages; page++) {
+        let numEntities = Math.min(this.totalEntities - page * this.booksPerFetch, this.booksPerFetch)
+        this.pagesLoaded[page] = true
+        for (let i = 0; i < numEntities; i++) {
+          const index = page * this.booksPerFetch + i
+          if (!this.entities[index]) {
+            this.pagesLoaded[page] = false
+            break
+          }
+        }
+      }
+    },
     initSizeData(_bookshelf) {
       var bookshelf = _bookshelf || document.getElementById('bookshelf')
       if (!bookshelf) {
@@ -622,6 +631,13 @@ export default {
       this.entitiesPerShelf = Math.max(1, Math.floor((this.bookshelfWidth - this.shelfPadding) / this.totalEntityCardWidth))
       this.shelvesPerPage = Math.ceil(this.bookshelfHeight / this.shelfHeight) + 2
       this.bookshelfMarginLeft = (this.bookshelfWidth - this.entitiesPerShelf * this.totalEntityCardWidth) / 2
+      const booksPerFetch = this.entitiesPerShelf * this.shelvesPerPage
+      if (booksPerFetch !== this.booksPerFetch) {
+        this.booksPerFetch = booksPerFetch
+        if (this.totalEntities) {
+          this.updatePagesLoaded()
+        }
+      }
 
       this.currentBookWidth = this.bookWidth
       if (this.totalEntities) {
@@ -630,13 +646,8 @@ export default {
       return entitiesPerShelfBefore < this.entitiesPerShelf // Books per shelf has changed
     },
     async init(bookshelf) {
-      if (this.entityName === 'series') {
-        this.booksPerFetch = 50
-      } else {
-        this.booksPerFetch = 100
-      }
-      this.checkUpdateSearchParams()
       this.initSizeData(bookshelf)
+      this.checkUpdateSearchParams()
 
       this.pagesLoaded[0] = true
       await this.fetchEntites(0)
@@ -743,7 +754,8 @@ export default {
         })
     }
   },
-  mounted() {
+  async mounted() {
+    await this.cardsHelpers.setCardSize()
     this.initListeners()
 
     this.routeFullPath = window.location.pathname + (window.location.search || '')
@@ -778,6 +790,6 @@ export default {
 .bookshelfDivider {
   background: rgb(149, 119, 90);
   background: var(--bookshelf-divider-bg);
-  box-shadow: 2px 14px 8px #111111aa;
+  box-shadow: 0.125em 0.875em 0.5em #111111aa;
 }
 </style>
diff --git a/client/components/cards/AuthorCard.vue b/client/components/cards/AuthorCard.vue
index 959c8583..7bbbb830 100644
--- a/client/components/cards/AuthorCard.vue
+++ b/client/components/cards/AuthorCard.vue
@@ -1,38 +1,40 @@
 <template>
-  <nuxt-link :to="`/author/${author?.id}`">
-    <div cy-id="card" :style="{ width: width + 'px'}" @mouseover="mouseover" @mouseleave="mouseleave">
-      <div cy-id="imageArea" :style="{ height: height + 'px' }" class=" bg-primary box-shadow-book rounded-md relative overflow-hidden">
-        <!-- Image or placeholder -->
-        <covers-author-image :author="author"/>
+  <div :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
+    <nuxt-link :to="`/author/${author.id}`">
+      <div cy-id="card" @mouseover="mouseover" @mouseleave="mouseleave">
+        <div cy-id="imageArea" :style="{ height: cardHeight + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+          <!-- Image or placeholder -->
+          <covers-author-image :author="author" />
 
-        <!-- Author name & num books overlay -->
-        <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
-          <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-          <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
-        </div>
+          <!-- Author name & num books overlay -->
+          <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
+            <p class="text-center font-semibold truncate" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
+            <p class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
+          </div>
 
-        <!-- Search icon btn -->
-        <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
-          <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
-            <span class="material-icons text-lg">search</span>
-          </ui-tooltip>
-        </div>
-        <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
-          <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
-            <span class="material-icons text-lg">edit</span>
-          </ui-tooltip>
-        </div>
+          <!-- Search icon btn -->
+          <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
+            <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
+              <span class="material-icons" :style="{ fontSize: 1.125 + 'em' }">search</span>
+            </ui-tooltip>
+          </div>
+          <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
+            <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
+              <span class="material-icons" :style="{ fontSize: 1.125 + 'em' }">edit</span>
+            </ui-tooltip>
+          </div>
 
-        <!-- Loading spinner -->
-        <div cy-id="spinner" v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
-          <widgets-loading-spinner size="" />
+          <!-- Loading spinner -->
+          <div cy-id="spinner" v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+            <widgets-loading-spinner size="" />
+          </div>
+        </div>
+        <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1e px-2e">
+          <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
         </div>
       </div>
-      <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1 px-2">
-          <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-      </div>
-    </div>
-  </nuxt-link>
+    </nuxt-link>
+  </div>
 </template>
 
 <script>
@@ -43,12 +45,14 @@ export default {
       default: () => {}
     },
     width: Number,
-    height: Number,
-    sizeMultiplier: {
+    height: {
       type: Number,
-      default: 1
+      default: 192
     },
-    nameBelow: Boolean
+    nameBelow: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -57,6 +61,12 @@ export default {
     }
   },
   computed: {
+    cardWidth() {
+      return this.width || this.cardHeight * 0.8
+    },
+    cardHeight() {
+      return this.height * this.sizeMultiplier
+    },
     userToken() {
       return this.$store.getters['user/getToken']
     },
@@ -83,6 +93,9 @@ export default {
     },
     libraryProvider() {
       return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
+    },
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
     }
   },
   methods: {
@@ -128,4 +141,4 @@ export default {
     this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/cards/GroupCard.vue b/client/components/cards/GroupCard.vue
index 14e11cfa..db1ce757 100644
--- a/client/components/cards/GroupCard.vue
+++ b/client/components/cards/GroupCard.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="relative">
-    <div class="rounded-sm h-full relative" :style="{ width: width + 'px', height: height + 'px' }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
+    <div class="rounded-sm h-full relative" :style="{ width: cardWidth + 'px', height: cardHeight + 'px' }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
       <nuxt-link :to="groupTo" class="cursor-pointer">
         <div class="w-full h-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'">
-          <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+          <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="cardWidth" :height="cardHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
           <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity z-30" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
             <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
           </div>
 
-          <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>
+          <div class="absolute z-10 top-1.5e right-1.5e rounded-md leading-3e p-1e font-semibold text-white flex items-center justify-center" :style="{ fontSize: 0.8 + 'em' }" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>
         </div>
       </nuxt-link>
     </div>
@@ -24,8 +24,10 @@ export default {
       default: () => null
     },
     width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number
+    height: {
+      type: Number,
+      default: 192
+    }
   },
   data() {
     return {
@@ -33,6 +35,15 @@ export default {
     }
   },
   computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.cardHeight * 2
+    },
+    cardHeight() {
+      return this.height * this.sizeMultiplier
+    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
@@ -46,8 +57,7 @@ export default {
       return `/library/${this.currentLibraryId}/bookshelf?filter=${this.filter}`
     },
     sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
-      return this.width / 240
+      return this.$store.getters['user/getSizeMultiplier']
     },
     bookItems() {
       return this._group.books || []
@@ -78,4 +88,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/cards/LazyAlbumCard.vue b/client/components/cards/LazyAlbumCard.vue
index ecbd2280..86587992 100644
--- a/client/components/cards/LazyAlbumCard.vue
+++ b/client/components/cards/LazyAlbumCard.vue
@@ -1,18 +1,22 @@
 <template>
-  <div ref="card" :id="`album-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
-      <covers-preview-cover ref="cover" :src="coverSrc" :width="width" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-    </div>
-
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+  <div ref="card" :id="`album-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="relative" :style="{ height: coverHeight + 'px' }">
+      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+        <covers-preview-cover ref="cover" :src="coverSrc" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
       </div>
     </div>
-    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
-      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ artist || '&nbsp;' }}</p>
+
+    <div class="relative w-full">
+      <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+        <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
+          <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+        </div>
+      </div>
+      <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8e h-8e py-1e rounded-md text-center">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+        <p class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ artist || '&nbsp;' }}</p>
+      </div>
     </div>
   </div>
 </template>
@@ -22,8 +26,10 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
     bookshelfView: {
       type: Number,
       default: 0
@@ -42,6 +48,29 @@ export default {
     }
   },
   computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.coverHeight
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    /*
+    cardHeight() {
+      return this.coverHeight + this.bottomTextHeight
+    },
+    bottomTextHeight() {
+      if (!this.isAlternativeBookshelfView) return 0
+      const lineHeight = 1.5
+      const remSize = 16
+      const baseHeight = this.sizeMultiplier * lineHeight * remSize
+      const titleHeight = this.labelFontSize * baseHeight
+      const paddingHeight = 4 * 2 * this.sizeMultiplier // py-1
+      return titleHeight + paddingHeight
+    },
+    */
     coverSrc() {
       const config = this.$config || this.$nuxt.$config
       if (!this.album || !this.album.libraryItemId) return `${config.routerBasePath}/book_placeholder.jpg`
@@ -49,11 +78,10 @@ export default {
     },
     labelFontSize() {
       if (this.width < 160) return 0.75
-      return 0.875
+      return 0.9
     },
     sizeMultiplier() {
-      const baseSize = this.bookCoverAspectRatio === 1 ? 192 : 120
-      return this.width / baseSize
+      return this.store.getters['user/getSizeMultiplier']
     },
     title() {
       return this.album ? this.album.title : ''
@@ -111,4 +139,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index 0bfac85f..5357267b 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -1,125 +1,134 @@
 <template>
-  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="absolute rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <!-- When cover image does not fill -->
-    <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
-      <div class="absolute cover-bg" ref="coverBg" />
+  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
+      <!-- When cover image does not fill -->
+      <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
+        <div class="absolute cover-bg" ref="coverBg" />
+      </div>
+
+      <div cy-id="seriesSequenceList" v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #78350f">
+        <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequenceList }}</p>
+      </div>
+      <div cy-id="booksInSeries" v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
+        <p :style="{ fontSize: 0.8 + 'em' }">{{ booksInSeries }}</p>
+      </div>
+
+      <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
+        <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: 0.5 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }" class="text-gray-300 text-center">{{ title }}</p>
+        </div>
+
+        <!-- Cover Image -->
+        <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="relative w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+
+        <!-- Placeholder Cover Title & Author -->
+        <div cy-id="placeholderTitle" v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em' }">
+          <div>
+            <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'em' }">{{ titleCleaned }}</p>
+          </div>
+        </div>
+        <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em', bottom: authorBottom + 'em' }">
+          <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'em' }">{{ authorCleaned }}</p>
+        </div>
+
+        <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #78350f">
+          <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequenceList }}</p>
+        </div>
+        <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #cd9d49dd">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ booksInSeries }}</p>
+        </div>
+
+        <!-- No progress shown for podcasts (unless showing podcast episode) -->
+        <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * userProgressPercent + 'px' }"></div>
+
+        <!-- Overlay is not shown if collapsing series in library -->
+        <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded md:block" :class="overlayWrapperClasslist">
+          <div cy-id="playButton" v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
+            <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
+              <span class="material-icons" :style="{ fontSize: playIconFontSize + 'em' }">play_circle_filled</span>
+            </div>
+          </div>
+
+          <div cy-id="readButton" v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
+            <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
+              <span class="material-icons" :style="{ fontSize: playIconFontSize + 'em' }">auto_stories</span>
+            </div>
+          </div>
+
+          <div cy-id="editButton" v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 + 'em' }" @click.stop.prevent="editClick">
+            <span class="material-icons" :style="{ fontSize: 1 + 'em' }">edit</span>
+          </div>
+
+          <!-- Radio button -->
+          <div cy-id="selectedRadioButton" v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 + 'em', left: 0.375 + 'em' }" @click.stop.prevent="selectBtnClick">
+            <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 + 'em' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
+          </div>
+
+          <!-- More Menu Icon -->
+          <div cy-id="moreButton" ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 + 'em', right: 0.375 + 'em' }" @click.stop.prevent="clickShowMore">
+            <span class="material-icons" :style="{ fontSize: 1.2 + 'em' }">more_vert</span>
+          </div>
+
+          <div cy-id="ebookFormat" v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 + 'em', left: 0.375 + 'em' }">
+            <span class="text-white/80" :style="{ fontSize: 0.8 + 'em' }">{{ ebookFormat }}</span>
+          </div>
+        </div>
+
+        <!-- Processing/loading spinner overlay -->
+        <div cy-id="loadingSpinner" v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
+          <widgets-loading-spinner size="la-lg" />
+        </div>
+
+        <!-- Series name overlay -->
+        <div cy-id="seriesNameOverlay" v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: 1 + 'em' }">
+          <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 + 'em' }">{{ seriesName }}</p>
+        </div>
+
+        <!-- Error widget -->
+        <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4e left-0 z-10">
+          <div :style="{ height: 1.5 + 'em', width: 2.5 + 'em' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+            <span class="material-icons text-red-100 pr-1e" :style="{ fontSize: 0.875 + 'em' }">priority_high</span>
+          </div>
+        </ui-tooltip>
+
+        <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 + 'em' }">
+          <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
+        </div>
+
+        <!-- Series sequence -->
+        <div cy-id="seriesSequence" v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
+          <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequence }}</p>
+        </div>
+
+        <!-- Podcast Episode # -->
+        <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
+          <p :style="{ fontSize: 0.8 + 'em' }">
+            Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
+          </p>
+        </div>
+
+        <!-- Podcast Num Episodes -->
+        <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodes }}</p>
+        </div>
+
+        <!-- Podcast Num Episodes -->
+        <div cy-id="numEpisodesIncomplete" v-else-if="numEpisodesIncomplete && !isHovering && !isSelectionMode" class="absolute rounded-full bg-yellow-400 text-black font-semibold box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodesIncomplete }}</p>
+        </div>
+      </div>
     </div>
 
     <!-- Alternative bookshelf title/author/sort -->
-    <div cy-id="detailBottom" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
-      <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
+    <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full">
+      <div :style="{ fontSize: 0.9 + 'em' }">
         <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
           <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
           <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
         </ui-tooltip>
       </div>
-      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
-      <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
-    </div>
-
-    <div cy-id="seriesSequenceList" v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #78350f">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
-    </div>
-    <div cy-id="booksInSeries" v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #cd9d49dd">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
-    </div>
-
-    <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
-      <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
-        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="text-gray-300 text-center">{{ title }}</p>
-      </div>
-
-      <!-- Cover Image -->
-      <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
-
-      <!-- Placeholder Cover Title & Author -->
-      <div cy-id="placeholderTitle" v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
-        <div>
-          <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
-        </div>
-      </div>
-      <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-        <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
-      </div>
-    </div>
-
-    <!-- No progress shown for podcasts (unless showing podcast episode) -->
-    <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
-
-    <!-- Overlay is not shown if collapsing series in library -->
-    <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded md:block" :class="overlayWrapperClasslist">
-      <div cy-id="playButton" v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
-          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
-        </div>
-      </div>
-
-      <div cy-id="readButton" v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
-          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">auto_stories</span>
-        </div>
-      </div>
-
-      <div cy-id="editButton" v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
-        <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
-      </div>
-
-      <!-- Radio button -->
-      <div cy-id="selectedRadioButton" v-if="!isAuthorBookshelfView" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
-        <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
-      </div>
-
-      <!-- More Menu Icon -->
-      <div cy-id="moreButton" ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickShowMore">
-        <span class="material-icons" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">more_vert</span>
-      </div>
-
-      <div cy-id="ebookFormat" v-if="ebookFormat" class="absolute" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }">
-        <span class="text-white/80" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ ebookFormat }}</span>
-      </div>
-    </div>
-
-    <!-- Processing/loading spinner overlay -->
-    <div cy-id="loadingSpinner" v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
-      <widgets-loading-spinner size="la-lg" />
-    </div>
-
-    <!-- Series name overlay -->
-    <div cy-id="seriesNameOverlay" v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
-      <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ seriesName }}</p>
-    </div>
-
-    <!-- Error widget -->
-    <ui-tooltip cy-id="ErrorTooltip" v-if="showError" :text="errorText" class="absolute bottom-4 left-0 z-10">
-      <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
-        <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
-      </div>
-    </ui-tooltip>
-
-    <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
-      <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
-    </div>
-
-    <!-- Series sequence -->
-    <div cy-id="seriesSequence" v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequence }}</p>
-    </div>
-
-    <!-- Podcast Episode # -->
-    <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">
-        Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
-      </p>
-    </div>
-
-    <!-- Podcast Num Episodes -->
-    <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
-    </div>
-
-    <!-- Podcast Num Episodes -->
-    <div cy-id="numEpisodesIncomplete" v-else-if="numEpisodesIncomplete && !isHovering && !isSelectionMode" class="absolute rounded-full bg-yellow-400 text-black font-semibold box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodesIncomplete }}</p>
+      <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displayLineTwo || '&nbsp;' }}</p>
+      <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
     </div>
   </div>
 </template>
@@ -131,15 +140,11 @@ import MoreMenu from '@/components/widgets/MoreMenu'
 export default {
   props: {
     index: Number,
-    width: {
-      type: Number,
-      default: 120
-    },
+    width: Number,
     height: {
       type: Number,
       default: 192
     },
-    bookCoverAspectRatio: Number,
     bookshelfView: Number,
     bookMount: {
       // Book can be passed as prop or set with setEntity()
@@ -174,6 +179,39 @@ export default {
     }
   },
   computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      return this.width || this.coverHeight / this.bookCoverAspectRatio
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    cardWidth() {
+      // This method returns immediately without waiting for the DOM to update
+      return this.coverWidth
+    },
+    /*
+    cardHeight() {
+      // This method returns immediately without waiting for the DOM to update
+      return this.coverHeight + this.detailsHeight
+    },
+    detailsHeight() {
+      if (!this.isAlternativeBookshelfView) return 0
+      const lineHeight = 1.5
+      const remSize = 16
+      const baseHeight = this.sizeMultiplier * lineHeight * remSize
+      const titleHeight = 0.9 * baseHeight
+      const line2Height = 0.8 * baseHeight
+      const line3Height = this.displaySortLine ? 0.8 * baseHeight : 0
+      const marginHeight = 8 * 2 * this.sizeMultiplier // py-2
+      return titleHeight + line2Height + line3Height + marginHeight
+    },
+    */
+    sizeMultiplier() {
+      return this.store.getters['user/getSizeMultiplier']
+    },
     dateFormat() {
       return this.store.state.serverSettings.dateFormat
     },
@@ -273,10 +311,6 @@ export default {
     squareAspectRatio() {
       return this.bookCoverAspectRatio === 1
     },
-    sizeMultiplier() {
-      const baseSize = this.squareAspectRatio ? 192 : 120
-      return this.width / baseSize
-    },
     title() {
       return this.mediaMetadata.title || ''
     },
@@ -298,7 +332,7 @@ export default {
       if (this.recentEpisode) return this.recentEpisode.title
       const ignorePrefix = this.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix
       if (this.collapsedSeries) return ignorePrefix ? this.collapsedSeries.nameIgnorePrefix : this.collapsedSeries.name
-      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix : this.title
+      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix : this.title || '\u00A0'
     },
     displayLineTwo() {
       if (this.recentEpisode) return this.title
@@ -557,16 +591,16 @@ export default {
       return this.$root.socket || this.$nuxt.$root.socket
     },
     titleFontSize() {
-      return 0.75 * this.sizeMultiplier
+      return 0.75
     },
     authorFontSize() {
-      return 0.6 * this.sizeMultiplier
+      return 0.6
     },
     placeholderCoverPadding() {
-      return 0.8 * this.sizeMultiplier
+      return 0.8
     },
     authorBottom() {
-      return 0.75 * this.sizeMultiplier
+      return 0.75
     },
     titleCleaned() {
       if (!this.title) return ''
@@ -590,11 +624,6 @@ export default {
       const constants = this.$constants || this.$nuxt.$constants
       return this.bookshelfView === constants.BookshelfView.AUTHOR
     },
-    titleDisplayBottomOffset() {
-      if (!this.isAlternativeBookshelfView && !this.isAuthorBookshelfView) return 0
-      else if (!this.displaySortLine) return 3 * this.sizeMultiplier
-      return 4.25 * this.sizeMultiplier
-    },
     rssFeed() {
       if (this.booksInSeries) return null
       return this._libraryItem.rssFeed || null
diff --git a/client/components/cards/LazyCollectionCard.vue b/client/components/cards/LazyCollectionCard.vue
index b4a223c8..0eb1b7bc 100644
--- a/client/components/cards/LazyCollectionCard.vue
+++ b/client/components/cards/LazyCollectionCard.vue
@@ -1,24 +1,26 @@
 <template>
-  <div ref="card" :id="`collection-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
-      <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-    </div>
-    <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
-      <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
-        <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
+  <div ref="card" :id="`collection-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="relative" :style="{ height: coverHeight + 'px' }">
+      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+        <covers-collection-cover ref="cover" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
       </div>
+      <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+        <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
+          <span class="material-icons text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
+        </div>
+      </div>
+
+      <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
     </div>
 
-    <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
-
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
       </div>
     </div>
-    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ title }}</p>
+    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
     </div>
   </div>
 </template>
@@ -28,8 +30,10 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
     bookshelfView: {
       type: Number,
       default: 0
@@ -49,13 +53,33 @@ export default {
     }
   },
   computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.coverHeight * 2
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
+    cardHeight() {
+      return this.coverHeight + this.bottomTextHeight
+    },
+    bottomTextHeight() {
+      if (!this.isAlternativeBookshelfView) return 0 // bottom text appears on top of the divider
+      const lineHeight = 1.5
+      const remSize = 16
+      const baseHeight = this.sizeMultiplier * lineHeight * remSize
+      const titleHeight = this.labelFontSize * baseHeight
+      const paddingHeight = 4 * 2 * this.sizeMultiplier // py-1
+      return titleHeight + paddingHeight
+    },
     labelFontSize() {
       if (this.width < 160) return 0.75
-      return 0.875
+      return 0.9
     },
     sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
-      return this.width / 240
+      return this.store.getters['user/getSizeMultiplier']
     },
     title() {
       return this.collection ? this.collection.name : ''
@@ -119,4 +143,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/cards/LazyPlaylistCard.vue b/client/components/cards/LazyPlaylistCard.vue
index 136bb93a..3e61960f 100644
--- a/client/components/cards/LazyPlaylistCard.vue
+++ b/client/components/cards/LazyPlaylistCard.vue
@@ -1,21 +1,24 @@
 <template>
-  <div ref="card" :id="`playlist-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
-      <covers-playlist-cover ref="cover" :items="items" :width="width" :height="height" />
-    </div>
-    <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
-      <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
-        <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
+  <div ref="card" :id="`playlist-card-${index}`" :style="{ width: cardWidth + 'px', fontSize: sizeMultiplier + 'rem' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="relative" :style="{ height: coverHeight + 'px' }">
+      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+        <covers-playlist-cover ref="cover" :items="items" :width="cardWidth" :height="coverHeight" />
+      </div>
+      <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+        <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
+          <span class="material-icons text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
+        </div>
       </div>
     </div>
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 -bottom-6e left-0 right-0 mx-auto h-6e rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
       </div>
     </div>
-    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ title }}</p>
+    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
     </div>
   </div>
 </template>
@@ -25,8 +28,10 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
     bookshelfView: {
       type: Number,
       default: 0
@@ -45,13 +50,21 @@ export default {
     }
   },
   computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.coverHeight
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
     labelFontSize() {
       if (this.width < 160) return 0.75
-      return 0.875
+      return 0.9
     },
     sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6)
-      return this.width / 120
+      return this.store.getters['user/getSizeMultiplier']
     },
     title() {
       return this.playlist ? this.playlist.name : ''
@@ -112,4 +125,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/cards/LazySeriesCard.vue b/client/components/cards/LazySeriesCard.vue
index 72ce947f..8455dcd7 100644
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@@ -1,28 +1,32 @@
 <template>
-  <div cy-id="card" ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-    <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
-      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+  <div cy-id="card" ref="card" :id="`series-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div cy-id="covers-area" class="relative" :style="{ height: coverHeight + 'px' }">
+      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
+        <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      </div>
+
+      <div cy-id="seriesLengthMarker" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
+        <p :style="{ fontSize: 0.8 + 'em' }">{{ books.length }}</p>
+      </div>
+
+      <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
+
+      <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: '1em' }">
+        <p :style="{ fontSize: 1.2 + 'em' }">{{ displayTitle }}</p>
+      </div>
+
+      <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
     </div>
 
-    <div cy-id="seriesLengthMarker" class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
-
-    <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
-
-    <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
-      <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
-    </div>
-
-    <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
-
-    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
+    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
+        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
       </div>
     </div>
-    <div cy-id="detailBottomText" v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
-      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+    <div cy-id="detailBottomText" v-else class="relative z-30 left-0 right-0 mx-auto py-1e rounded-md text-center">
+      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
+      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
     </div>
   </div>
 </template>
@@ -32,13 +36,14 @@ export default {
   props: {
     index: Number,
     width: Number,
-    height: Number,
-    bookCoverAspectRatio: Number,
+    height: {
+      type: Number,
+      default: 192
+    },
     bookshelfView: {
       type: Number,
       default: 0
     },
-    isCategorized: Boolean,
     seriesMount: {
       type: Object,
       default: () => null
@@ -56,16 +61,24 @@ export default {
     }
   },
   computed: {
+    bookCoverAspectRatio() {
+      return this.store.getters['libraries/getBookCoverAspectRatio']
+    },
+    cardWidth() {
+      return this.width || this.coverHeight * 2
+    },
+    coverHeight() {
+      return this.height * this.sizeMultiplier
+    },
     dateFormat() {
       return this.store.state.serverSettings.dateFormat
     },
     labelFontSize() {
       if (this.width < 160) return 0.75
-      return 0.875
+      return 0.9
     },
     sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
-      return this.width / 240
+      return this.store.getters['user/getSizeMultiplier']
     },
     seriesId() {
       return this.series ? this.series.id : ''
@@ -78,7 +91,7 @@ export default {
     },
     displayTitle() {
       if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
-      return this.title
+      return this.title || '\u00A0'
     },
     displaySortLine() {
       switch (this.orderBy) {
diff --git a/client/components/cards/NarratorCard.vue b/client/components/cards/NarratorCard.vue
index a09ead9f..6dc08991 100644
--- a/client/components/cards/NarratorCard.vue
+++ b/client/components/cards/NarratorCard.vue
@@ -1,17 +1,19 @@
 <template>
-  <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
-    <div cy-id="card" :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
-      <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
-        <span class="material-icons-outlined text-[10rem]">record_voice_over</span>
-      </div>
+  <div>
+    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
+      <div cy-id="card" :style="{ width: cardWidth + 'px', height: cardHeight + 'px', fontSize: sizeMultiplier + 'rem' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+        <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
+          <span class="material-icons-outlined text-[10em]">record_voice_over</span>
+        </div>
 
-      <!-- Narrator name & num books overlay -->
-      <div class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
-        <p cy-id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-        <p cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+        <!-- Narrator name & num books overlay -->
+        <div class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-60 px-2e">
+          <p cy-id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
+          <p cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+        </div>
       </div>
-    </div>
-  </nuxt-link>
+    </nuxt-link>
+  </div>
 </template>
 
 <script>
@@ -21,23 +23,22 @@ export default {
       type: Object,
       default: () => {}
     },
-    width:  {
-      type: Number,
-      default: 150
-    },
-    height: { 
+    width: Number,
+    height: {
       type: Number,
       default: 100
-    },
-    sizeMultiplier: {
-      type: Number,
-      default: 1
     }
   },
   data() {
     return {}
   },
   computed: {
+    cardWidth() {
+      return this.cardHeight * 1.5
+    },
+    cardHeight() {
+      return this.height * this.sizeMultiplier
+    },
     name() {
       return this.narrator?.name || ''
     },
@@ -49,8 +50,11 @@ export default {
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
+    },
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
     }
   },
   methods: {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/widgets/AuthorsSlider.vue b/client/components/widgets/AuthorsSlider.vue
deleted file mode 100644
index 1a87bb60..00000000
--- a/client/components/widgets/AuthorsSlider.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="(item, index) in items">
-          <cards-author-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :author="item" :height="cardHeight" :width="cardWidth" class="relative" @edit="editAuthor" @hook:updated="setScrollVars" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height
-    },
-    cardWidth() {
-      return this.cardHeight / this.bookCoverAspectRatio / 1.25
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
-    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    }
-  },
-  methods: {
-    editAuthor(author) {
-      this.$store.commit('globals/showEditAuthorModal', author)
-    },
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>
\ No newline at end of file
diff --git a/client/components/widgets/CoverSizeWidget.vue b/client/components/widgets/CoverSizeWidget.vue
index 12f52f26..094282d0 100644
--- a/client/components/widgets/CoverSizeWidget.vue
+++ b/client/components/widgets/CoverSizeWidget.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
       <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size" role="button">remove</span>
-      <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
+      <p class="px-2 font-mono" style="font-size: 1rem">{{ bookCoverWidth }}</p>
       <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size" role="button">add</span>
     </div>
   </div>
@@ -48,4 +48,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/widgets/EpisodeSlider.vue b/client/components/widgets/EpisodeSlider.vue
deleted file mode 100644
index 400f0a0c..00000000
--- a/client/components/widgets/EpisodeSlider.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="(item, index) in items">
-          <cards-lazy-book-card
-            :key="item.recentEpisode.id"
-            :ref="`slider-episode-${item.recentEpisode.id}`"
-            :index="index"
-            :book-mount="item"
-            :height="cardHeight"
-            :width="cardWidth"
-            :book-cover-aspect-ratio="bookCoverAspectRatio"
-            :bookshelf-view="bookshelfView"
-            :continue-listening-shelf="continueListeningShelf"
-            class="relative"
-            @edit="editEpisode"
-            @editPodcast="editPodcast"
-            @select="selectItem"
-            @hook:updated="setScrollVars"
-          />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    },
-    continueListeningShelf: Boolean
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height - 40 * this.cardScaleMulitiplier
-    },
-    cardWidth() {
-      return this.cardHeight / this.bookCoverAspectRatio
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
-    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    }
-  },
-  methods: {
-    clearSelectedEntities() {
-      this.updateSelectionMode(false)
-    },
-    editEpisode({ libraryItem, episode }) {
-      this.$store.commit('setSelectedLibraryItem', libraryItem)
-      this.$store.commit('globals/setSelectedEpisode', episode)
-      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
-    },
-    editPodcast(libraryItem) {
-      var itemIds = this.items.map((e) => e.id)
-      this.$store.commit('setBookshelfBookIds', itemIds)
-      this.$store.commit('showEditModal', libraryItem)
-    },
-    selectItem(payload) {
-      this.$emit('selectEntity', payload)
-    },
-    itemSelectedEvt() {
-      this.updateSelectionMode(this.isSelectionMode)
-    },
-    updateSelectionMode(val) {
-      const selectedMediaItems = this.$store.state.globals.selectedMediaItems
-
-      this.items.forEach((ent) => {
-        let component = this.$refs[`slider-episode-${ent.recentEpisode.id}`]
-        if (!component || !component.length) return
-        component = component[0]
-        component.setSelectionMode(val)
-        component.selected = selectedMediaItems.some((i) => i.id === ent.id)
-      })
-    },
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {
-    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
-  },
-  beforeDestroy() {
-    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
-  }
-}
-</script>
\ No newline at end of file
diff --git a/client/components/widgets/ItemSlider.vue b/client/components/widgets/ItemSlider.vue
index 2fd29a6f..b2aa2b28 100644
--- a/client/components/widgets/ItemSlider.vue
+++ b/client/components/widgets/ItemSlider.vue
@@ -1,33 +1,21 @@
 <template>
   <div class="w-full">
-    <div class="flex items-center py-3">
+    <div class="flex items-center py-3e">
       <slot />
       <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
+      <button cy-id="leftScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
+        <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">chevron_left</span>
       </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
+      <button cy-id="rightScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
+        <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">chevron_right</span>
       </button>
     </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
+    <div cy-id="slider" ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
+      <div class="flex space-x-4e">
         <template v-for="(item, index) in items">
-          <cards-lazy-book-card
-            :key="item.id + '-' + shelfId + '-' + index"
-            :ref="`slider-item-${item.id}`"
-            :index="index"
-            :book-mount="item"
-            :height="cardHeight"
-            :width="cardWidth"
-            :book-cover-aspect-ratio="bookCoverAspectRatio"
-            :bookshelf-view="bookshelfView"
-            :continue-listening-shelf="continueListeningShelf"
-            class="relative"
-            @edit="editItem"
-            @select="selectItem"
-            @hook:updated="setScrollVars"
-          />
+          <div cy-id="item" ref="item" :key="itemKeyFunc(item)">
+            <component :is="componentName" :ref="itemRefFunc(item)" :index="index" :[itemPropName]="item" :bookshelf-view="bookshelfView" :continue-listening-shelf="continueListeningShelf" class="relative" @edit="editFunc" @editPodcast="editItem" @select="selectItem" @hook:updated="setScrollVars" />
+          </div>
         </template>
       </div>
     </div>
@@ -41,49 +29,108 @@ export default {
       type: Array,
       default: () => []
     },
-    height: {
-      type: Number,
-      default: 192
-    },
     bookshelfView: {
       type: Number,
       default: 1
     },
-    shelfId: String,
-    continueListeningShelf: Boolean
+    shelfId: {
+      type: String,
+      default: ''
+    },
+    continueListeningShelf: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'book'
+    }
   },
   data() {
     return {
       isScrollable: false,
       canScrollLeft: false,
       canScrollRight: false,
-      clientWidth: 0
+      clientWidth: 0,
+      shelfOptionsByType: {
+        episode: {
+          component: 'cards-lazy-book-card',
+          itemPropName: 'book-mount',
+          itemIdFunc: (item) => item.recentEpisode.id
+        },
+        series: {
+          component: 'cards-lazy-series-card',
+          itemPropName: 'series-mount',
+          itemIdFunc: (item) => item.id
+        },
+        authors: {
+          component: 'cards-author-card',
+          itemPropName: 'author',
+          itemIdFunc: (item) => item.id
+        },
+        narrators: {
+          component: 'cards-narrator-card',
+          itemPropName: 'narrator',
+          itemIdFunc: (item) => item.name
+        },
+        book: {
+          component: 'cards-lazy-book-card',
+          itemPropName: 'book-mount',
+          itemIdFunc: (item) => item.id
+        },
+        podcast: {
+          component: 'cards-lazy-book-card',
+          itemPropName: 'book-mount',
+          itemIdFunc: (item) => item.id
+        }
+      }
     }
   },
   computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height - 40 * this.cardScaleMulitiplier
-    },
-    cardWidth() {
-      return this.cardHeight / this.bookCoverAspectRatio
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
     isSelectionMode() {
       return this.$store.getters['globals/getIsBatchSelectingMediaItems']
+    },
+    options() {
+      return this.shelfOptionsByType[this.type]
+    },
+    itemIdFunc() {
+      return this.options.itemIdFunc
+    },
+    itemKeyFunc() {
+      return (item) => this.itemIdFunc(item) + this.shelfId
+    },
+    itemRefFunc() {
+      return (item) => `slider-item-${this.itemIdFunc(item)}`
+    },
+    componentName() {
+      return this.options.component
+    },
+    itemPropName() {
+      return this.options.itemPropName
+    },
+    editFunc() {
+      switch (this.type) {
+        case 'episode':
+          return this.editEpisode
+        case 'authors':
+          return this.editAuthor
+        default:
+          return this.editItem
+      }
     }
   },
   methods: {
     clearSelectedEntities() {
       this.updateSelectionMode(false)
     },
+    editEpisode({ libraryItem, episode }) {
+      this.$store.commit('setSelectedLibraryItem', libraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
+    },
+    editAuthor(author) {
+      this.$store.commit('globals/showEditAuthorModal', author)
+    },
     editItem(libraryItem) {
       var itemIds = this.items.map((e) => e.id)
       this.$store.commit('setBookshelfBookIds', itemIds)
@@ -97,9 +144,8 @@ export default {
     },
     updateSelectionMode(val) {
       const selectedMediaItems = this.$store.state.globals.selectedMediaItems
-
       this.items.forEach((item) => {
-        let component = this.$refs[`slider-item-${item.id}`]
+        let component = this.$refs[this.itemRefFunc(item)]
         if (!component || !component.length) return
         component = component[0]
         component.setSelectionMode(val)
@@ -113,7 +159,7 @@ export default {
       if (!this.canScrollRight) return
       const slider = this.$refs.slider
       if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
+      const scrollAmount = this.clientWidth
       const maxScrollLeft = slider.scrollWidth - slider.clientWidth
 
       const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
@@ -124,7 +170,7 @@ export default {
       const slider = this.$refs.slider
       if (!slider) return
 
-      const scrollAmount = this.booksPerPage * this.cardWidth
+      const scrollAmount = this.clientWidth
 
       const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
       slider.scrollLeft = newScrollLeft
@@ -133,11 +179,11 @@ export default {
       const slider = this.$refs.slider
       if (!slider) return
       const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
+      const scrollRemaining = Math.abs(scrollLeft + clientWidth - scrollWidth)
 
       this.clientWidth = clientWidth
       this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
+      this.canScrollRight = scrollRemaining >= 1
       this.canScrollLeft = scrollLeft > 0
     }
   },
@@ -145,12 +191,17 @@ export default {
     this.setScrollVars()
   },
   mounted() {
-    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
+    this.setScrollVars()
+    if (['book', 'podcast', 'episode'].includes(this.type)) {
+      this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$on('item-selected', this.itemSelectedEvt)
+    }
   },
   beforeDestroy() {
-    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
-    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
+    if (['book', 'podcast', 'episode'].includes(this.type)) {
+      this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$off('item-selected', this.itemSelectedEvt)
+    }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/widgets/NarratorsSlider.vue b/client/components/widgets/NarratorsSlider.vue
deleted file mode 100644
index 881c148b..00000000
--- a/client/components/widgets/NarratorsSlider.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="item in items">
-          <cards-narrator-card :key="item.name" :ref="`slider-item-${item.name}`" :narrator="item" :height="cardHeight" :width="cardWidth" class="relative" @hook:updated="setScrollVars" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    cardHeight() {
-      return this.height
-    },
-    cardWidth() {
-      return this.cardHeight * 1.5
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    }
-  },
-  methods: {
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>
\ No newline at end of file
diff --git a/client/components/widgets/SeriesSlider.vue b/client/components/widgets/SeriesSlider.vue
deleted file mode 100644
index 820cbe1e..00000000
--- a/client/components/widgets/SeriesSlider.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center py-3">
-      <slot />
-      <div class="flex-grow" />
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons text-2xl">chevron_left</span>
-      </button>
-      <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons text-2xl">chevron_right</span>
-      </button>
-    </div>
-    <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">
-      <div class="flex space-x-4" :style="{ height: height + 'px' }">
-        <template v-for="(item, index) in items">
-          <cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.DETAIL" class="relative" @hook:updated="setScrollVars" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-      isScrollable: false,
-      canScrollLeft: false,
-      canScrollRight: false,
-      clientWidth: 0
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardScaleMulitiplier() {
-      return this.height / 192
-    },
-    cardHeight() {
-      return this.height - 40 * this.cardScaleMulitiplier
-    },
-    cardWidth() {
-      return 2 * (this.cardHeight / this.bookCoverAspectRatio)
-    },
-    booksPerPage() {
-      return Math.floor(this.clientWidth / (this.cardWidth + 16))
-    },
-    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    }
-  },
-  methods: {
-    scrolled() {
-      this.setScrollVars()
-    },
-    scrollRight() {
-      if (!this.canScrollRight) return
-      const slider = this.$refs.slider
-      if (!slider) return
-      const scrollAmount = this.booksPerPage * this.cardWidth
-      const maxScrollLeft = slider.scrollWidth - slider.clientWidth
-
-      const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    scrollLeft() {
-      if (!this.canScrollLeft) return
-      const slider = this.$refs.slider
-      if (!slider) return
-
-      const scrollAmount = this.booksPerPage * this.cardWidth
-
-      const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount)
-      slider.scrollLeft = newScrollLeft
-    },
-    setScrollVars() {
-      const slider = this.$refs.slider
-      if (!slider) return
-      const { scrollLeft, scrollWidth, clientWidth } = slider
-      const scrollPercent = (scrollLeft + clientWidth) / scrollWidth
-
-      this.clientWidth = clientWidth
-      this.isScrollable = scrollWidth > clientWidth
-      this.canScrollRight = scrollPercent < 1
-      this.canScrollLeft = scrollLeft > 0
-    }
-  },
-  updated() {
-    this.setScrollVars()
-  },
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>
\ No newline at end of file
diff --git a/client/cypress/tests/components/cards/AuthorCard.cy.js b/client/cypress/tests/components/cards/AuthorCard.cy.js
index 971bc69a..420678ab 100644
--- a/client/cypress/tests/components/cards/AuthorCard.cy.js
+++ b/client/cypress/tests/components/cards/AuthorCard.cy.js
@@ -13,9 +13,6 @@ describe('AuthorCard', () => {
 
   const propsData = {
     author,
-    width: 192 * 0.8,
-    height: 192,
-    sizeMultiplier: 1,
     nameBelow: false
   }
 
@@ -27,7 +24,8 @@ describe('AuthorCard', () => {
     $store: {
       getters: {
         'user/getUserCanUpdate': true,
-        'libraries/getLibraryProvider': () => 'audible.us'
+        'libraries/getLibraryProvider': () => 'audible.us',
+        'user/getSizeMultiplier': 1
       },
       state: {
         libraries: {
@@ -36,9 +34,9 @@ describe('AuthorCard', () => {
       }
     },
     $eventBus: {
-      $on: () => { },
-      $off: () => { },
-    },
+      $on: () => {},
+      $off: () => {}
+    }
   }
 
   const stubs = {
@@ -59,8 +57,10 @@ describe('AuthorCard', () => {
     cy.get('&card').should(($el) => {
       const width = $el.width()
       const height = $el.height()
-      expect(width).to.be.closeTo(propsData.width, 0.01)
-      expect(height).to.be.closeTo(propsData.height, 0.01)
+      const defaultHeight = 192
+      const defaultWidth = defaultHeight * 0.8
+      expect(width).to.be.closeTo(defaultWidth, 0.01)
+      expect(height).to.be.closeTo(defaultHeight, 0.01)
     })
   })
 
@@ -78,21 +78,25 @@ describe('AuthorCard', () => {
       .and(($el) => {
         const height = $el.height()
         const width = $el.width()
-        const sizeMultiplier = propsData.sizeMultiplier
+        const sizeMultiplier = 1
         const defaultFontSize = 16
         const defaultLineHeight = 1.5
         const fontSizeMultiplier = 0.75
         const px2 = 16
+        const defaultHeight = 192
+        const defaultWidth = defaultHeight * 0.8
         expect(height).to.be.closeTo(defaultFontSize * fontSizeMultiplier * sizeMultiplier * defaultLineHeight, 0.01)
         nameBelowHeight = height
-        expect(width).to.be.closeTo(propsData.width - px2, 0.01)
+        expect(width).to.be.closeTo(defaultWidth - px2, 0.01)
       })
     cy.get('&card').should(($el) => {
       const width = $el.width()
       const height = $el.height()
       const py1 = 8
-      expect(width).to.be.closeTo(propsData.width, 0.01)
-      expect(height).to.be.closeTo(propsData.height + nameBelowHeight + py1, 0.01)
+      const defaultHeight = 192
+      const defaultWidth = defaultHeight * 0.8
+      expect(width).to.be.closeTo(defaultWidth, 0.01)
+      expect(height).to.be.closeTo(defaultHeight + nameBelowHeight + py1, 0.01)
     })
   })
 
@@ -110,11 +114,12 @@ describe('AuthorCard', () => {
     cy.get('&card').trigger('mouseleave')
     cy.get('&match').should('be.hidden')
     cy.get('&edit').should('be.hidden')
-
   })
 
   it('renders the component with spinner while searching', () => {
-    const data = () => { return { searching: true, isHovering: false } }
+    const data = () => {
+      return { searching: true, isHovering: false }
+    }
     cy.mount(AuthorCard, { ...mountOptions, data })
 
     cy.get('&textInline').should('be.hidden')
@@ -171,7 +176,7 @@ describe('AuthorCard', () => {
     const updatedMocks = {
       ...mocks,
       $axios: {
-        $post: cy.stub().resolves({ updated: true, author: { name: 'John Doe', imagePath: "path/to/image" } })
+        $post: cy.stub().resolves({ updated: true, author: { name: 'John Doe', imagePath: 'path/to/image' } })
       },
       $toast: {
         success: cy.stub().as('success'),
@@ -188,4 +193,4 @@ describe('AuthorCard', () => {
     cy.get('@error').should('not.have.been.called')
     cy.get('@info').should('not.have.been.called')
   })
-})
\ No newline at end of file
+})
diff --git a/client/cypress/tests/components/cards/ItemSlider.cy.js b/client/cypress/tests/components/cards/ItemSlider.cy.js
new file mode 100644
index 00000000..ef5e33ee
--- /dev/null
+++ b/client/cypress/tests/components/cards/ItemSlider.cy.js
@@ -0,0 +1,85 @@
+import ItemSlider from '@/components/widgets/ItemSlider.vue'
+import NarratorCard from '@/components/cards/NarratorCard.vue'
+import AuthorCard from '@/components/cards/AuthorCard.vue'
+
+function createMountOptions(shelftype) {
+  const items = {
+    narrators: [
+      { name: 'John Doe', numBooks: 5 },
+      { name: 'Jane Doe', numBooks: 3 },
+      { name: 'Jack Doe', numBooks: 1 },
+      { name: 'Jill Doe', numBooks: 7 }
+    ],
+    authors: [
+      { id: 1, name: 'John Doe', numBooks: 5 },
+      { id: 2, name: 'Jane Doe', numBooks: 3 },
+      { id: 3, name: 'Jack Doe', numBooks: 1 },
+      { id: 4, name: 'Jill Doe', numBooks: 7 }
+    ]
+  }
+  const propsData = {
+    items: items[shelftype],
+    shelfId: 'shelf-123',
+    type: shelftype
+  }
+  const stubs = {
+    'cards-narrator-card': NarratorCard,
+    'cards-author-card': AuthorCard
+  }
+  const mocks = {
+    $store: {
+      getters: {
+        'user/getUserCanUpdate': true,
+        'user/getSizeMultiplier': 1,
+        'globals/getIsBatchSelectingMediaItems': false
+      },
+      state: {
+        libraries: {
+          currentLibraryId: 'library-123'
+        }
+      }
+    },
+    $eventBus: {
+      $on: () => {},
+      $off: () => {}
+    }
+  }
+  const slots = {
+    default: `<p class="font-semibold text-gray-100">${shelftype}</p>`
+  }
+
+  return { propsData, stubs, mocks, slots }
+}
+
+describe('ItemSlider', () => {
+  let mountOptions = null
+
+  beforeEach(() => {})
+
+  it('renders a narrators slider', () => {
+    mountOptions = createMountOptions('narrators')
+    cy.mount(ItemSlider, mountOptions)
+
+    cy.get('&item').should('have.length', 4)
+    cy.get('&leftScrollButton').should('be.visible').and('not.have.class', 'text-gray-300')
+    cy.get('&rightScrollButton').should('be.visible').and('have.class', 'text-gray-300')
+  })
+
+  it('renders an authors slider', () => {
+    mountOptions = createMountOptions('authors')
+    cy.mount(ItemSlider, mountOptions)
+
+    cy.get('&item').should('have.length', 4)
+    cy.get('&leftScrollButton').should('be.visible').and('not.have.class', 'text-gray-300')
+    cy.get('&rightScrollButton').should('be.visible').and('have.class', 'text-gray-300')
+  })
+
+  it('hides the scroll button when all items are visible', () => {
+    mountOptions = createMountOptions('narrators')
+    mountOptions.propsData.items = mountOptions.propsData.items.slice(0, 2)
+    cy.mount(ItemSlider, mountOptions)
+
+    cy.get('&leftScrollButton').should('not.exist')
+    cy.get('&rightScrollButton').should('not.exist')
+  })
+})
diff --git a/client/cypress/tests/components/cards/LazyBookCard.cy.js b/client/cypress/tests/components/cards/LazyBookCard.cy.js
index 303a97e6..52a1f00b 100644
--- a/client/cypress/tests/components/cards/LazyBookCard.cy.js
+++ b/client/cypress/tests/components/cards/LazyBookCard.cy.js
@@ -7,61 +7,21 @@ import { Constants } from '@/plugins/constants'
 function createMountOptions() {
   const book = {
     id: '1',
-    ino: '281474976785140',
     libraryId: 'library-123',
-    folderId: 'folder-123',
-    path: '/path/to/book',
-    relPath: 'book',
-    isFile: false,
-    mtimeMs: 1689017292016,
-    ctimeMs: 1689017292016,
-    birthtimeMs: 1689017281555,
-    addedAt: 1700154928492,
-    updatedAt: 1713300533345,
-    isMissing: false,
-    isInvalid: false,
     mediaType: 'book',
     media: {
       id: 'book1',
-      metadata: {
-        title: 'The Fellowship of the Ring',
-        titleIgnorePrefix: 'Fellowship of the Ring',
-        subtitle: 'LOTR, Book 1',
-        authorName: 'J. R. R. Tolkien',
-        authorNameLF: 'Tolkien, J. R. R.',
-        narratorName: 'Andy Sirkis',
-        genres: ['Science Fiction & Fantasy'],
-        publishedYear: '2017',
-        publishedDate: null,
-        publisher: 'Book Publisher',
-        description: 'Book Description',
-        isbn: null,
-        asin: 'B075LXMLNV',
-        language: 'English',
-        explicit: false,
-        abridged: false
-      },
-      coverPath: null,
-      tags: ['Fantasy', 'Adventure'],
-      numTracks: 1,
-      numAudioFiles: 1,
-      numChapters: 31,
-      duration: 64410,
-      size: 511206878
-    },
-    numFiles: 4,
-    size: 511279587
+      metadata: { title: 'The Fellowship of the Ring', titleIgnorePrefix: 'Fellowship of the Ring', authorName: 'J. R. R. Tolkien' },
+      numTracks: 1
+    }
   }
 
   const propsData = {
     index: 0,
     bookMount: book,
-    bookCoverAspectRatio: 1,
     bookshelfView: Constants.BookshelfView.DETAIL,
     continueListeningShelf: false,
     filterBy: null,
-    width: 192,
-    height: 192,
     sortingIgnorePrefix: false,
     orderBy: null
   }
@@ -84,7 +44,10 @@ function createMountOptions() {
         'user/getUserCanDownload': true,
         'user/getIsAdminOrUp': true,
         'user/getUserMediaProgress': (id) => null,
+        'user/getUserSetting': (settingName) => false,
+        'user/getSizeMultiplier': 1,
         'libraries/getLibraryProvider': () => 'audible.us',
+        'libraries/getBookCoverAspectRatio': 1,
         'globals/getLibraryItemCoverSrc': () => 'https://my.server.com/book_placeholder.jpg',
         getLibraryItemsStreaming: () => null,
         getIsMediaQueued: () => false,
@@ -109,16 +72,6 @@ describe('LazyBookCard', () => {
   let mountOptions = null
   beforeEach(() => {
     mountOptions = createMountOptions()
-    // cy.intercept(
-    //   'https://my.server.com/**/*',
-    //   { middleware: true },
-    //   (req) => {
-    //     req.on('before:response', (res) => {
-    //       // force all API responses to not be cached
-    //       res.headers['cache-control'] = 'no-store'
-    //     })
-    //   }
-    // )
   })
 
   before(() => {
@@ -174,11 +127,14 @@ describe('LazyBookCard', () => {
     // the detailBottom element, currently rendered outside the card's area,
     // and requires complex layout calculations outside of the component.
     // todo: fix the component to render the detailBottom element inside the card's area
-    cy.get('#book-card-0').should(($el) => {
+    cy.get('#cover-area-0').should(($el) => {
       const width = $el.width()
       const height = $el.height()
-      expect(width).to.be.closeTo(mountOptions.propsData.width, 0.01)
-      expect(height).to.be.closeTo(mountOptions.propsData.height, 0.01)
+      const defaultHeight = 192
+      const defaultWidth = defaultHeight
+
+      expect(width).to.be.closeTo(defaultWidth, 0.01)
+      expect(height).to.be.closeTo(defaultHeight, 0.01)
     })
   })
 
@@ -201,6 +157,7 @@ describe('LazyBookCard', () => {
     cy.mount(LazyBookCard, mountOptions)
     cy.get('#book-card-0').click()
 
+    cy.get('&titleImageNotReady').should('be.hidden')
     cy.get('@routerPush').should('have.been.calledOnceWithExactly', '/item/1')
   })
 
@@ -215,6 +172,7 @@ describe('LazyBookCard', () => {
     mountOptions.mocks.$store.getters['globals/getLibraryItemCoverSrc'] = () => 'https://my.server.com/cover1.jpg'
     cy.mount(LazyBookCard, mountOptions)
 
+    cy.get('&titleImageNotReady').should('be.hidden')
     cy.get('&coverBg').should('be.visible')
     cy.get('&coverImage').should('have.class', 'object-contain')
   })
@@ -223,6 +181,7 @@ describe('LazyBookCard', () => {
     mountOptions.mocks.$store.getters['globals/getLibraryItemCoverSrc'] = () => 'https://my.server.com/cover2.jpg'
     cy.mount(LazyBookCard, mountOptions)
 
+    cy.get('&titleImageNotReady').should('be.hidden')
     cy.get('&coverBg').should('be.hidden')
     cy.get('&coverImage').should('have.class', 'object-fill')
   })
@@ -235,6 +194,7 @@ describe('LazyBookCard', () => {
     mountOptions.propsData.bookMount.media.coverPath = 'cover1.jpg'
     cy.mount(LazyBookCard, mountOptions)
 
+    cy.get('&titleImageNotReady').should('be.hidden')
     cy.get('&placeholderTitle').should('not.exist')
     cy.get('&placeholderAuthor').should('not.exist')
   })
@@ -243,6 +203,7 @@ describe('LazyBookCard', () => {
     mountOptions.propsData.bookshelfView = Constants.BookshelfView.STANDARD
     cy.mount(LazyBookCard, mountOptions)
 
+    cy.get('&titleImageNotReady').should('be.hidden')
     cy.get('&detailBottom').should('not.exist')
   })
 
@@ -250,6 +211,7 @@ describe('LazyBookCard', () => {
     mountOptions.propsData.bookMount.media.metadata.explicit = true
     cy.mount(LazyBookCard, mountOptions)
 
+    cy.get('&titleImageNotReady').should('be.hidden')
     cy.get('&explicitIndicator').should('be.visible')
   })
 
@@ -267,6 +229,7 @@ describe('LazyBookCard', () => {
     it('shows the collpased series', () => {
       cy.mount(LazyBookCard, mountOptions)
 
+      cy.get('&titleImageNotReady').should('be.hidden')
       cy.get('&seriesSequenceList').should('not.exist')
       cy.get('&booksInSeries').should('be.visible').and('have.text', '3')
       cy.get('&title').should('be.visible').and('have.text', 'The Lord of the Rings')
@@ -283,6 +246,7 @@ describe('LazyBookCard', () => {
       cy.mount(LazyBookCard, mountOptions)
       cy.get('#book-card-0').trigger('mouseover')
 
+      cy.get('&titleImageNotReady').should('be.hidden')
       cy.get('&seriesNameOverlay').should('be.visible').and('have.text', 'Middle Earth Chronicles')
     })
 
@@ -290,6 +254,7 @@ describe('LazyBookCard', () => {
       mountOptions.propsData.bookMount.collapsedSeries.seriesSequenceList = '1-3'
       cy.mount(LazyBookCard, mountOptions)
 
+      cy.get('&titleImageNotReady').should('be.hidden')
       cy.get('&seriesSequenceList').should('be.visible').and('have.text', '#1-3')
       cy.get('&booksInSeries').should('not.exist')
     })
@@ -299,6 +264,7 @@ describe('LazyBookCard', () => {
       cy.mount(LazyBookCard, mountOptions)
       cy.get('#book-card-0').click()
 
+      cy.get('&titleImageNotReady').should('be.hidden')
       cy.get('@routerPush').should('have.been.calledOnceWithExactly', '/library/library-123/series/series-123')
     })
 
@@ -315,12 +281,15 @@ describe('LazyBookCard', () => {
       }
       cy.mount(LazyBookCard, mountOptions)
 
+      cy.get('&titleImageNotReady').should('be.hidden')
       cy.get('&progressBar')
         .should('be.visible')
         .and('have.class', 'bg-yellow-400')
         .and(($el) => {
           const width = $el.width()
-          expect(width).to.be.closeTo(((1 + 0.5) / 3) * mountOptions.propsData.width, 0.01)
+          const defaultHeight = 192
+          const defaultWidth = defaultHeight
+          expect(width).to.be.closeTo(((1 + 0.5) / 3) * defaultWidth, 0.01)
         })
     })
 
@@ -330,12 +299,15 @@ describe('LazyBookCard', () => {
       }
       cy.mount(LazyBookCard, mountOptions)
 
+      cy.get('&titleImageNotReady').should('be.hidden')
       cy.get('&progressBar')
         .should('be.visible')
         .and('have.class', 'bg-success')
         .and(($el) => {
           const width = $el.width()
-          expect(width).to.be.equal(mountOptions.propsData.width)
+          const defaultHeight = 192
+          const defaultWidth = defaultHeight
+          expect(width).to.be.equal(defaultWidth)
         })
     })
   })
diff --git a/client/cypress/tests/components/cards/LazySeriesCard.cy.js b/client/cypress/tests/components/cards/LazySeriesCard.cy.js
index dae3b68c..c637c604 100644
--- a/client/cypress/tests/components/cards/LazySeriesCard.cy.js
+++ b/client/cypress/tests/components/cards/LazySeriesCard.cy.js
@@ -18,10 +18,6 @@ describe('LazySeriesCard', () => {
 
   const propsData = {
     index: 0,
-    width: 192 * 2,
-    height: 192,
-    sizeMultiplier: 1,
-    bookCoverAspectRatio: 1,
     bookshelfView: 1,
     isCategorized: false,
     seriesMount: series,
@@ -38,6 +34,8 @@ describe('LazySeriesCard', () => {
       getters: {
         'user/getUserCanUpdate': true,
         'user/getUserMediaProgress': (id) => null,
+        'user/getSizeMultiplier': 1,
+        'libraries/getBookCoverAspectRatio': 1,
         'libraries/getLibraryProvider': () => 'audible.us',
         'globals/getLibraryItemCoverSrc': () => 'https://my.server.com/book_placeholder.jpg'
       },
@@ -62,11 +60,13 @@ describe('LazySeriesCard', () => {
   it('renders the component', () => {
     cy.mount(LazySeriesCard, { propsData, stubs, mocks })
 
-    cy.get('&card').should(($el) => {
+    cy.get('&covers-area').should(($el) => {
       const width = $el.width()
       const height = $el.height()
-      expect(width).to.be.closeTo(propsData.width, 0.01)
-      expect(height).to.be.closeTo(propsData.height, 0.01)
+      const defailtHeight = 192
+      const defaultWidth = defailtHeight * 2
+      expect(width).to.be.closeTo(defaultWidth, 0.01)
+      expect(height).to.be.closeTo(defailtHeight, 0.01)
     })
     cy.get('&seriesLengthMarker').should('be.visible').and('have.text', propsData.seriesMount.books.length)
     cy.get('&seriesProgressBar').should('not.exist')
@@ -126,7 +126,9 @@ describe('LazySeriesCard', () => {
       .and('have.class', 'bg-yellow-400')
       .and(($el) => {
         const width = $el.width()
-        expect(width).to.be.closeTo(((1 + 0.5) / 3) * propsData.width, 0.01)
+        const defailtHeight = 192
+        const defaultWidth = defailtHeight * 2
+        expect(width).to.be.closeTo(((1 + 0.5) / 3) * defaultWidth, 0.01)
       })
   })
 
@@ -150,7 +152,9 @@ describe('LazySeriesCard', () => {
       .and('have.class', 'bg-success')
       .and(($el) => {
         const width = $el.width()
-        expect(width).to.equal(propsData.width)
+        const defailtHeight = 192
+        const defaultWidth = defailtHeight * 2
+        expect(width).to.equal(defaultWidth)
       })
   })
 
diff --git a/client/cypress/tests/components/cards/NarratorCard.cy.js b/client/cypress/tests/components/cards/NarratorCard.cy.js
index c51af54c..b8325236 100644
--- a/client/cypress/tests/components/cards/NarratorCard.cy.js
+++ b/client/cypress/tests/components/cards/NarratorCard.cy.js
@@ -6,15 +6,13 @@ describe('<NarratorCard />', () => {
     numBooks: 5
   }
   const propsData = {
-    narrator,
-    width: 200,
-    height: 150,
-    sizeMultiplier: 1.2
+    narrator
   }
   const mocks = {
     $store: {
       getters: {
-        'user/getUserCanUpdate': true
+        'user/getUserCanUpdate': true,
+        'user/getSizeMultiplier': 1
       },
       state: {
         libraries: {
@@ -46,7 +44,7 @@ describe('<NarratorCard />', () => {
   })
 
   it('renders 1 book correctly', () => {
-    let propsData = { narrator: { name: 'John Doe', numBooks: 1 }, width: 200, height: 150, sizeMultiplier: 1.2 }
+    let propsData = { narrator: { name: 'John Doe', numBooks: 1 }, width: 200, height: 150 }
     let mountOptions = { propsData, mocks }
     cy.mount(NarratorCard, mountOptions)
 
@@ -54,7 +52,7 @@ describe('<NarratorCard />', () => {
   })
 
   it('renders the default name and num-books when narrator is not provided', () => {
-    let propsData = { width: 200, height: 150, sizeMultiplier: 1.2 }
+    let propsData = { width: 200, height: 150 }
     let mountOptions = { propsData, mocks }
     cy.mount(NarratorCard, mountOptions)
     cy.get('&name').should('have.text', '')
@@ -64,12 +62,12 @@ describe('<NarratorCard />', () => {
   it('has the correct width and height', () => {
     let mountOptions = { propsData, mocks }
     cy.mount(NarratorCard, mountOptions)
-    cy.get('&card').should('have.css', 'width', '200px')
-    cy.get('&card').should('have.css', 'height', '150px')
+    cy.get('&card').should('have.css', 'width', '150px')
+    cy.get('&card').should('have.css', 'height', '100px')
   })
 
   it('has the correct width and height when not provided', () => {
-    let propsData = { narrator, sizeMultiplier: 1.2 }
+    let propsData = { narrator }
     let mountOptions = { propsData, mocks }
     cy.mount(NarratorCard, mountOptions)
     cy.get('&card').should('have.css', 'width', '150px')
@@ -79,7 +77,8 @@ describe('<NarratorCard />', () => {
   it('has the correct font sizes', () => {
     let mountOptions = { propsData, mocks }
     cy.mount(NarratorCard, mountOptions)
-    cy.get('&name').should('have.css', 'font-size', '14.4px') // 0.75 * 1.2 * 16
-    cy.get('&numBooks').should('have.css', 'font-size', '12.48px') // 0.65 * 1.2 * 16
+    const defaultFontSize = 16
+    cy.get('&name').should('have.css', 'font-size', `${0.75 * defaultFontSize}px`)
+    cy.get('&numBooks').should('have.css', 'font-size', `${0.65 * defaultFontSize}px`)
   })
-})
\ No newline at end of file
+})
diff --git a/client/mixins/bookshelfCardsHelpers.js b/client/mixins/bookshelfCardsHelpers.js
index b950d8b9..31fa76ba 100644
--- a/client/mixins/bookshelfCardsHelpers.js
+++ b/client/mixins/bookshelfCardsHelpers.js
@@ -9,7 +9,8 @@ export default {
   data() {
     return {
       cardsHelpers: {
-        mountEntityCard: this.mountEntityCard
+        mountEntityCard: this.mountEntityCard,
+        setCardSize: this.setCardSize
       }
     }
   },
@@ -21,6 +22,56 @@ export default {
       if (this.entityName === 'albums') return Vue.extend(LazyAlbumCard)
       return Vue.extend(LazyBookCard)
     },
+    getComponentName() {
+      if (this.entityName === 'series') return 'cards-lazy-series-card'
+      if (this.entityName === 'collections') return 'cards-lazy-collection-card'
+      if (this.entityName === 'playlists') return 'cards-lazy-playlist-card'
+      if (this.entityName === 'albums') return 'cards-lazy-album-card'
+      return 'cards-lazy-book-card'
+    },
+    async setCardSize() {
+      this.cardWidth = 0
+      this.cardHeight = 0
+      // load a dummy card to get the its width and height
+      const ComponentClass = this.getComponentClass()
+      const props = {
+        index: -1,
+        bookshelfView: this.bookshelfView,
+        sortingIgnorePrefix: !!this.sortingIgnorePrefix
+      }
+      if (this.entityName === 'items') {
+        props.filterBy = this.filterBy
+        props.orderBy = this.orderBy
+      } else if (this.entityName === 'series') {
+        props.orderBy = this.seriesSortBy
+      }
+      const instance = new ComponentClass({
+        propsData: props
+      })
+      instance.$mount()
+      this.resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          this.cardWidth = entry.contentRect.width
+          this.cardHeight = entry.contentRect.height
+          this.resizeObserver.disconnect()
+          this.$refs.bookshelf.removeChild(instance.$el)
+        }
+      })
+      instance.$el.style.visibility = 'hidden'
+      instance.$el.style.position = 'absolute'
+      this.$refs.bookshelf.appendChild(instance.$el)
+      this.resizeObserver.observe(instance.$el)
+      const timeBefore = performance.now()
+      await new Promise((resolve) => {
+        const unwatch = this.$watch('cardWidth', (value) => {
+          if (value) {
+            unwatch()
+            resolve()
+          }
+        })
+      })
+      const timeAfter = performance.now()
+    },
     async mountEntityCard(index) {
       var shelf = Math.floor(index / this.entitiesPerShelf)
       var shelfEl = document.getElementById(`shelf-${shelf}`)
@@ -34,7 +85,7 @@ export default {
         shelfEl.appendChild(bookComponent.$el)
         if (this.isSelectionMode) {
           bookComponent.setSelectionMode(true)
-          if (this.selectedMediaItems.some(i => i.id === bookComponent.libraryItemId) || this.isSelectAll) {
+          if (this.selectedMediaItems.some((i) => i.id === bookComponent.libraryItemId) || this.isSelectAll) {
             bookComponent.selected = true
           } else {
             bookComponent.selected = false
@@ -45,17 +96,10 @@ export default {
         bookComponent.isHovering = false
         return
       }
-      const shelfOffsetY = 16
-      const row = index % this.entitiesPerShelf
-      const shelfOffsetX = row * this.totalEntityCardWidth + this.bookshelfMarginLeft
-
       const ComponentClass = this.getComponentClass()
 
       const props = {
         index,
-        width: this.entityWidth,
-        height: this.entityHeight,
-        bookCoverAspectRatio: this.coverAspectRatio,
         bookshelfView: this.bookshelfView,
         sortingIgnorePrefix: !!this.sortingIgnorePrefix
       }
@@ -82,6 +126,9 @@ export default {
       this.entityComponentRefs[index] = instance
 
       instance.$mount()
+      const shelfOffsetY = this.shelfPaddingHeight * this.sizeMultiplier
+      const row = index % this.entitiesPerShelf
+      const shelfOffsetX = row * this.totalEntityCardWidth + this.bookshelfMarginLeft
       instance.$el.style.transform = `translate3d(${shelfOffsetX}px, ${shelfOffsetY}px, 0px)`
       instance.$el.classList.add('absolute', 'top-0', 'left-0')
       shelfEl.appendChild(instance.$el)
@@ -91,10 +138,10 @@ export default {
       }
       if (this.isSelectionMode) {
         instance.setSelectionMode(true)
-        if (instance.libraryItemId && this.selectedMediaItems.some(i => i.id === instance.libraryItemId) || this.isSelectAll) {
+        if ((instance.libraryItemId && this.selectedMediaItems.some((i) => i.id === instance.libraryItemId)) || this.isSelectAll) {
           instance.selected = true
         }
       }
-    },
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/client/pages/library/_library/authors/index.vue b/client/pages/library/_library/authors/index.vue
index 9adcce5b..a98a06c9 100644
--- a/client/pages/library/_library/authors/index.vue
+++ b/client/pages/library/_library/authors/index.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
     <app-book-shelf-toolbar page="authors" is-home :authors="authors" />
-    <div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
+    <div id="bookshelf" class="w-full h-full p-8e overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
+      <!-- Cover size widget -->
+      <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
       <div class="flex flex-wrap justify-center">
         <template v-for="author in authorsSorted">
-          <cards-author-card :key="author.id" :author="author" :width="160" :height="200" class="p-3" @edit="editAuthor" />
+          <cards-author-card :key="author.id" :author="author" class="p-3e" @edit="editAuthor" />
         </template>
       </div>
     </div>
@@ -36,6 +38,9 @@ export default {
     }
   },
   computed: {
+    sizeMultiplier() {
+      return this.$store.getters['user/getSizeMultiplier']
+    },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
diff --git a/client/store/user.js b/client/store/user.js
index a69ee058..70746bc1 100644
--- a/client/store/user.js
+++ b/client/store/user.js
@@ -25,14 +25,14 @@ export const getters = {
   },
   getUserMediaProgress: (state) => (libraryItemId, episodeId = null) => {
     if (!state.user.mediaProgress) return null
-    return state.user.mediaProgress.find(li => {
+    return state.user.mediaProgress.find((li) => {
       if (episodeId && li.episodeId !== episodeId) return false
       return li.libraryItemId == libraryItemId
     })
   },
   getUserBookmarksForItem: (state) => (libraryItemId) => {
     if (!state.user.bookmarks) return []
-    return state.user.bookmarks.filter(bm => bm.libraryItemId === libraryItemId)
+    return state.user.bookmarks.filter((bm) => bm.libraryItemId === libraryItemId)
   },
   getUserSetting: (state) => (key) => {
     return state.settings?.[key] || null
@@ -65,6 +65,9 @@ export const getters = {
   getIsSeriesRemovedFromContinueListening: (state) => (seriesId) => {
     if (!state.user || !state.user.seriesHideFromContinueListening || !state.user.seriesHideFromContinueListening.length) return false
     return state.user.seriesHideFromContinueListening.includes(seriesId)
+  },
+  getSizeMultiplier: (state) => {
+    return state.settings.bookshelfCoverSize / 120
   }
 }
 
@@ -152,9 +155,9 @@ export const mutations = {
   updateMediaProgress(state, { id, data }) {
     if (!state.user) return
     if (!data) {
-      state.user.mediaProgress = state.user.mediaProgress.filter(lip => lip.id != id)
+      state.user.mediaProgress = state.user.mediaProgress.filter((lip) => lip.id != id)
     } else {
-      var indexOf = state.user.mediaProgress.findIndex(lip => lip.id == id)
+      var indexOf = state.user.mediaProgress.findIndex((lip) => lip.id == id)
       if (indexOf >= 0) {
         state.user.mediaProgress.splice(indexOf, 1, data)
       } else {
@@ -167,4 +170,4 @@ export const mutations = {
     localStorage.setItem('userSettings', JSON.stringify(settings))
     state.settings = settings
   }
-}
\ No newline at end of file
+}
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 7fafbeaf..7f234cea 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,59 +1,81 @@
 module.exports = {
-  content: [
-    'components/**/*.vue',
-    'layouts/**/*.vue',
-    'pages/**/*.vue',
-    'templates/**/*.vue',
-    'plugins/**/*.js',
-    'nuxt.config.js'
-  ],
-  safelist: [
-    'bg-red-600',
-    'px-1.5',
-    'min-w-5',
-    'border-warning'
-  ],
+  content: ['components/**/*.vue', 'layouts/**/*.vue', 'pages/**/*.vue', 'templates/**/*.vue', 'plugins/**/*.js', 'nuxt.config.js'],
+  safelist: ['bg-red-600', 'px-1.5', 'min-w-5', 'border-warning'],
   theme: {
     extend: {
       height: {
-        '7.5': '1.75rem',
-        '18': '4.5rem',
-        '45': '11.25rem'
+        7.5: '1.75rem',
+        18: '4.5rem',
+        45: '11.25rem'
       },
       width: {
-        '18': '4.5rem'
+        18: '4.5rem'
       },
       maxWidth: {
-        '6': '1.5rem',
-        '12': '3rem',
-        '16': '4rem',
-        '20': '5rem',
-        '24': '6rem',
-        '32': '8rem',
-        '40': '10rem',
-        '48': '12rem',
-        '52': '13rem',
-        '64': '16rem',
-        '80': '20rem'
+        6: '1.5rem',
+        12: '3rem',
+        16: '4rem',
+        20: '5rem',
+        24: '6rem',
+        32: '8rem',
+        40: '10rem',
+        48: '12rem',
+        52: '13rem',
+        64: '16rem',
+        80: '20rem'
       },
       minWidth: {
-        '5': '1.25rem',
-        '6': '1.5rem',
-        '8': '2rem',
-        '10': '2.5rem',
-        '12': '3rem',
-        '16': '4rem',
-        '20': '5rem',
-        '24': '6rem',
-        '26': '6.5rem',
-        '32': '8rem',
-        '48': '12rem',
-        '64': '16rem',
-        '80': '20rem'
+        5: '1.25rem',
+        6: '1.5rem',
+        8: '2rem',
+        10: '2.5rem',
+        12: '3rem',
+        16: '4rem',
+        20: '5rem',
+        24: '6rem',
+        26: '6.5rem',
+        32: '8rem',
+        48: '12rem',
+        64: '16rem',
+        80: '20rem'
       },
       spacing: {
-        '18': '4.5rem',
-        '-54': '-13.5rem'
+        18: '4.5rem',
+        '-54': '-13.5rem',
+        // based on tailwind default config converted to em units, see client\node_modules\tailwindcss\stubs\config.full.js
+        '0.5e': '0.125em',
+        '1e': '0.25em',
+        '1.5e': '0.375em',
+        '2e': '0.5em',
+        '2.5e': '0.625em',
+        '3e': '0.75em',
+        '3.5e': '0.875em',
+        '4e': '1em',
+        '5e': '1.25em',
+        '6e': '1.5em',
+        '7e': '1.75em',
+        '8e': '2em',
+        '9e': '2.25em',
+        '10e': '2.5em',
+        '11e': '2.75em',
+        '12e': '3em',
+        '14e': '3.5em',
+        '16e': '4em',
+        '20e': '5em',
+        '24e': '6em',
+        '28e': '7em',
+        '32e': '8em',
+        '36e': '9em',
+        '40e': '10em',
+        '44e': '11em',
+        '48e': '12em',
+        '52e': '13em',
+        '56e': '14em',
+        '60e': '15em',
+        '64e': '16em',
+        '72e': '18em',
+        '80e': '20em',
+        '96e': '24em'
       },
       rotate: {
         '-60': '-60deg'
@@ -90,13 +112,13 @@ module.exports = {
         '4.5xl': '2.625rem'
       },
       zIndex: {
-        '50': 50,
-        '60': 60
+        50: 50,
+        60: 60
       }
     }
   },
   variants: {
-    extend: {},
+    extend: {}
   },
-  plugins: [],
+  plugins: []
 }