diff --git a/client/assets/app.css b/client/assets/app.css
index 57827680..867a9d86 100644
--- a/client/assets/app.css
+++ b/client/assets/app.css
@@ -148,6 +148,9 @@ input[type=number] {
 .box-shadow-book {
   box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166;
 }
+.shadow-height {
+  height: calc(100% - 4px);
+}
 
 .box-shadow-book3d {
   box-shadow: 4px 1px 8px #11111166, 1px -4px 8px #11111166;
@@ -182,4 +185,4 @@ Bookshelf Label
   background-position: center;
   opacity: 1;
   filter: blur(20px);
-}
\ No newline at end of file
+}
diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue
index 272d0671..1049ebe9 100644
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -5,7 +5,7 @@
         <!-- <div class="absolute top-0 left-0 bottom-0 p-4 z-10">
           <p class="text-white text-2xl">{{ shelf }}</p>
         </div> -->
-        <div class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-10" :class="`h-${shelfDividerHeightIndex}`" />
+        <div class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
       </div>
     </template>
 
@@ -146,9 +146,6 @@ export default {
       // Includes margin
       return this.entityWidth + 24
     },
-    booksPerPage() {
-      return this.shelvesPerPage * this.entitiesPerShelf
-    },
     selectedAudiobooks() {
       return this.$store.state.selectedAudiobooks || []
     }
@@ -226,7 +223,7 @@ export default {
         return
       }
       if (payload) {
-        console.log('Received payload', payload)
+        // console.log('Received payload', payload)
         if (!this.initialized) {
           this.initialized = true
           this.totalEntities = payload.total
diff --git a/client/components/cards/LazyCollectionCard.vue b/client/components/cards/LazyCollectionCard.vue
index 34603782..e888687c 100644
--- a/client/components/cards/LazyCollectionCard.vue
+++ b/client/components/cards/LazyCollectionCard.vue
@@ -1,5 +1,6 @@
 <template>
-  <div ref="card" :id="`collection-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-10 cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <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>
diff --git a/client/components/cards/LazySeriesCard.vue b/client/components/cards/LazySeriesCard.vue
index d056b19b..a09f0dc4 100644
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@@ -1,5 +1,6 @@
 <template>
-  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-10 cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`series-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-group-cover v-if="series" ref="cover" :id="seriesId" :name="title" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" :group-to="seriesBooksRoute" />
     </div>
@@ -102,4 +103,4 @@ export default {
   mounted() {},
   beforeDestroy() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index 1650d566..8e505a2c 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -135,18 +135,12 @@ class LibraryController {
     if (payload.sortBy) {
       var orderByNumber = payload.sortBy === 'book.volumeNumber'
       var direction = payload.sortDesc ? 'desc' : 'asc'
-      // if (req.query.sort === 'size') {
-      //   console.warn('1SORTING BY SIZE', audiobooks[0])
-      // }
       audiobooks = sort(audiobooks)[direction]((ab) => {
         // Supports dot notation strings i.e. "book.title"
         var value = payload.sortBy.split('.').reduce((a, b) => a[b], ab)
         if (orderByNumber && !isNaN(value)) return Number(value)
         return value
       })
-      // if (req.query.sort === 'size') {
-      //   console.warn('2SORTING BY SIZE', audiobooks[0])
-      // }
     }
 
     if (payload.limit) {
@@ -194,6 +188,7 @@ class LibraryController {
       return res.status(404).send('Series not found')
     }
     audiobooks = sort(audiobooks).asc(ab => {
+      if (!isNaN(ab.book.volumeNumber) && ab.book.volumeNumber !== null) return Number(ab.book.volumeNumber)
       return ab.book.volumeNumber
     })
     res.json({