API route to generate waveform images

2026-01-01 12:09:43 -05:00 · 2023-04-29 14:57:51 -05:00
356 changed files with 14730 additions and 42458 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -7,13 +7,11 @@
 /podcasts/
 /media/
 /metadata/
+test/
 /client/.nuxt/
 /client/dist/
 /dist/
 /deploy/
-/coverage/
-/.nyc_output/

 sw.*
 .DS_STORE
-.idea/*
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -16,6 +16,5 @@
  },
  "editor.formatOnSave": true,
  "editor.detectIndentation": true,
-  "editor.tabSize": 2,
-  "javascript.format.semicolons": "remove"
+  "editor.tabSize": 2
 }
--- a/14
+++ b/14
@@ -10,15 +10,11 @@ FROM sandreas/tone:v0.1.5 AS tone
 FROM node:16-alpine

 ENV NODE_ENV=production
-
 RUN apk update && \
    apk add --no-cache --update \
    curl \
    tzdata \
-    ffmpeg \
-    make \
-    python3 \
-    g++
+    ffmpeg

 COPY --from=tone /usr/local/bin/tone /usr/local/bin/
 COPY --from=build /client/dist /client/dist
@@ -27,8 +23,10 @@ COPY server server

 RUN npm ci --only=production

-RUN apk del make python3 g++
-
 EXPOSE 80
-
+HEALTHCHECK \
+    --interval=30s \
+    --timeout=3s \
+    --start-period=10s \
+    CMD curl -f http://127.0.0.1/healthcheck || exit 1
 CMD ["node", "index.js"]
--- a/build/debian/DEBIAN/preinst
+++ b/build/debian/DEBIAN/preinst
@@ -60,13 +60,13 @@ install_ffmpeg() {
  fi

  $WGET
-  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1 --no-same-owner
+  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1
  rm ffmpeg-git-amd64-static.tar.xz

  # Temp downloading tone library to the ffmpeg dir
  echo "Getting tone.."
  $WGET_TONE
-  tar xvf tone-0.1.5-linux-x64.tar.gz --strip-components=1 --no-same-owner
+  tar xvf tone-0.1.5-linux-x64.tar.gz --strip-components=1
  rm tone-0.1.5-linux-x64.tar.gz

  echo "Good to go on Ffmpeg (& tone)... hopefully"
--- a/client/assets/app.css
+++ b/client/assets/app.css
@@ -112,7 +112,7 @@ input[type=number] {
  background-color: #373838;
 }

-.tracksTable tr:hover:not(:has(th)) {
+.tracksTable tr:hover {
  background-color: #474747;
 }

@@ -232,20 +232,6 @@ Bookshelf Label
  -webkit-box-orient: vertical;
 }

-.episode-subtitle-long {
-  word-break: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  line-height: 16px;
-  /* fallback */
-  max-height: 72px;
-  /* fallback */
-  -webkit-line-clamp: 6;
-  /* number of lines to show */
-  -webkit-box-orient: vertical;
-}
-

 /* Padding for toastification toasts in the top right to not cover appbar/toolbar */
 .app-bar-and-toolbar .Vue-Toastification__container.top-right {
@@ -258,24 +244,4 @@ Bookshelf Label

 .no-bars .Vue-Toastification__container.top-right {
  padding-top: 8px;
-}
-
-.abs-btn::before {
-  content: '';
-  position: absolute;
-  border-radius: 6px;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  transition: all 0.1s ease-in-out;
-}
-
-.abs-btn:hover:not(:disabled)::before {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.abs-btn:disabled::before {
-  background-color: rgba(0, 0, 0, 0.2);
 }
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -7,7 +7,7 @@
        </nuxt-link>

        <nuxt-link to="/">
-          <h1 class="text-xl mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
+          <h1 class="text-xl mr-6 hidden lg:block hover:underline">audiobookshelf <span v-if="showExperimentalFeatures" class="material-icons text-lg text-warning pr-1">logo_dev</span></h1>
        </nuxt-link>

        <ui-libraries-dropdown class="mr-2" />
@@ -15,6 +15,8 @@
        <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
        <div class="flex-grow" />

+        <widgets-notification-widget class="hidden md:block" />
+
        <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
          <span class="material-icons-outlined text-2xl text-warning text-opacity-50"> cast </span>
        </ui-tooltip>
@@ -22,8 +24,6 @@
          <google-cast-launcher></google-cast-launcher>
        </div>

-        <widgets-notification-widget class="hidden md:block" />
-
        <nuxt-link v-if="currentLibrary" to="/config/stats" class="hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
          <ui-tooltip :text="$strings.HeaderYourStats" direction="bottom" class="flex items-center">
            <span class="material-icons text-2xl" aria-label="User Stats" role="button">equalizer</span>
@@ -149,6 +149,9 @@ export default {
    processingBatch() {
      return this.$store.state.processingBatch
    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
    isChromecastEnabled() {
      return this.$store.getters['getServerSetting']('chromecastEnabled')
    },
@@ -175,18 +178,13 @@ export default {
        })
      }

-      options.push({
-        text: 'Re-Scan',
-        action: 'rescan'
-      })
-
      return options
    }
  },
  methods: {
    requestBatchQuickEmbed() {
      const payload = {
-        message: this.$strings.MessageConfirmQuickEmbed,
+        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
        callback: (confirmed) => {
          if (confirmed) {
            this.$axios
@@ -208,39 +206,13 @@ export default {
      }
      this.$store.commit('globals/setConfirmPrompt', payload)
    },
-    contextMenuAction({ action }) {
+    contextMenuAction(action) {
      if (action === 'quick-embed') {
        this.requestBatchQuickEmbed()
      } else if (action === 'quick-match') {
        this.batchAutoMatchClick()
-      } else if (action === 'rescan') {
-        this.batchRescan()
      }
    },
-    async batchRescan() {
-      const payload = {
-        message: this.$getString('MessageConfirmReScanLibraryItems', [this.selectedMediaItems.length]),
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.$axios
-              .$post(`/api/items/batch/scan`, {
-                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
-              })
-              .then(() => {
-                console.log('Batch Re-Scan started')
-                this.cancelSelectionMode()
-              })
-              .catch((error) => {
-                console.error('Batch Re-Scan failed', error)
-                const errorMsg = error.response.data || 'Failed to batch re-scan'
-                this.$toast.error(errorMsg)
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
    async playSelectedItems() {
      this.$store.commit('setProcessingBatch', true)

@@ -303,28 +275,26 @@ export default {
      this.$axios
        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
        .then(() => {
-          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
+          this.$toast.success('Batch update success!')
          this.$store.commit('setProcessingBatch', false)
          this.$store.commit('globals/resetSelectedMediaItems', [])
          this.$eventBus.$emit('bookshelf_clear_selection')
        })
        .catch((error) => {
-          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
+          this.$toast.error('Batch update failed')
          console.error('Failed to batch update read/not read', error)
          this.$store.commit('setProcessingBatch', false)
        })
    },
    batchDeleteClick() {
      const payload = {
-        message: this.$getString('MessageConfirmDeleteLibraryItems', [this.numMediaItemsSelected]),
-        checkboxLabel: this.$strings.LabelDeleteFromFileSystemCheckbox,
+        message: `This will delete ${this.numMediaItemsSelected} library items from the database and your file system. Are you sure?`,
+        checkboxLabel: 'Delete from file system. Uncheck to only remove from database.',
        yesButtonText: this.$strings.ButtonDelete,
        yesButtonColor: 'error',
-        checkboxDefaultValue: !Number(localStorage.getItem('softDeleteDefault') || 0),
+        checkboxDefaultValue: true,
        callback: (confirmed, hardDelete) => {
          if (confirmed) {
-            localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
-
            this.$store.commit('setProcessingBatch', true)

            this.$axios
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@@ -1,7 +1,7 @@
 <template>
  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative">
    <!-- Cover size widget -->
-    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />

    <div v-if="loaded && !shelves.length && !search" class="w-full flex flex-col items-center justify-center py-12">
      <p class="text-center text-2xl mb-4 py-4">{{ libraryName }} Library is empty!</p>
@@ -16,7 +16,7 @@
    <!-- 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)">
+        <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'" :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-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)">
@@ -36,7 +36,7 @@
    <!-- Regular bookshelf view -->
    <div v-else class="w-full">
      <template v-for="(shelf, index) in shelves">
-        <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)" />
+        <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'" @selectEntity="(payload) => selectEntity(payload, index)" />
      </template>
    </div>
  </div>
@@ -65,12 +65,12 @@ export default {
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
    currentLibraryId() {
      return this.$store.state.libraries.currentLibraryId
    },
-    currentLibraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
-    },
    libraryName() {
      return this.$store.getters['libraries/getCurrentLibraryName']
    },
@@ -94,9 +94,6 @@ export default {
    },
    selectedMediaItems() {
      return this.$store.state.globals.selectedMediaItems || []
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
    }
  },
  methods: {
@@ -174,7 +171,7 @@ export default {
    },
    async fetchCategories() {
      const categories = await this.$axios
-        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete`)
+        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed`)
        .then((data) => {
          return data
        })
@@ -289,8 +286,7 @@ export default {
      }
      if (user.mediaProgress.length) {
        const mediaProgressToHide = user.mediaProgress.filter((mp) => mp.hideFromContinueListening)
-        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-listening')
-        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-reading')
+        this.removeItemsFromContinueListening(mediaProgressToHide)
      }
    },
    libraryItemAdded(libraryItem) {
@@ -340,16 +336,9 @@ export default {
    },
    libraryItemsAdded(libraryItems) {
      console.log('libraryItems added', libraryItems)
-
-      const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
-      if (!recentlyAddedShelf) return
-
-      // Add new library item to the recently added shelf
-      for (const libraryItem of libraryItems) {
-        if (libraryItem.libraryId === this.currentLibraryId && !recentlyAddedShelf.entities.some((ent) => ent.id === libraryItem.id)) {
-          // Add to front of array
-          recentlyAddedShelf.entities.unshift(libraryItem)
-        }
+      // TODO: Check if audiobook would be on this shelf
+      if (!this.search) {
+        this.fetchCategories()
      }
    },
    libraryItemsUpdated(items) {
@@ -357,12 +346,6 @@ export default {
        this.libraryItemUpdated(li)
      })
    },
-    episodeAdded(episodeWithLibraryItem) {
-      const isThisLibrary = episodeWithLibraryItem.libraryItem?.libraryId === this.currentLibraryId
-      if (!this.search && isThisLibrary) {
-        this.fetchCategories()
-      }
-    },
    removeAllSeriesFromContinueSeries(seriesIds) {
      this.shelves.forEach((shelf) => {
        if (shelf.type == 'book' && shelf.id == 'continue-series') {
@@ -374,8 +357,8 @@ export default {
        }
      })
    },
-    removeItemsFromContinueListeningReading(mediaProgressItems, categoryId) {
-      const continueListeningShelf = this.shelves.find((s) => s.id === categoryId)
+    removeItemsFromContinueListening(mediaProgressItems) {
+      const continueListeningShelf = this.shelves.find((s) => s.id === 'continue-listening')
      if (continueListeningShelf) {
        if (continueListeningShelf.type === 'book') {
          continueListeningShelf.entities = continueListeningShelf.entities.filter((ent) => {
@@ -390,6 +373,17 @@ export default {
          })
        }
      }
+      // this.shelves.forEach((shelf) => {
+      //   if (shelf.id == 'continue-listening') {
+      //     if (shelf.type == 'book') {
+      //       // Filter out books from continue listening shelf
+      //       shelf.entities = shelf.entities.filter((ent) => {
+      //         if (mediaProgressItems.some(mp => mp.libraryItemId === ent.id)) return false
+      //         return true
+      //       })
+      //     }
+      //   }
+      // })
    },
    authorUpdated(author) {
      this.shelves.forEach((shelf) => {
@@ -423,7 +417,6 @@ export default {
        this.$root.socket.on('item_removed', this.libraryItemRemoved)
        this.$root.socket.on('items_updated', this.libraryItemsUpdated)
        this.$root.socket.on('items_added', this.libraryItemsAdded)
-        this.$root.socket.on('episode_added', this.episodeAdded)
      } else {
        console.error('Error socket not initialized')
      }
@@ -438,7 +431,6 @@ export default {
        this.$root.socket.off('item_removed', this.libraryItemRemoved)
        this.$root.socket.off('items_updated', this.libraryItemsUpdated)
        this.$root.socket.off('items_added', this.libraryItemsAdded)
-        this.$root.socket.off('episode_added', this.episodeAdded)
      } else {
        console.error('Error socket not initialized')
      }
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -22,10 +22,6 @@
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
        </svg>
      </nuxt-link>
-      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="flex-grow h-full flex justify-center items-center" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
-        <p v-if="isPlaylistsPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonPlaylists }}</p>
-        <span v-else class="material-icons-outlined text-lg">queue_music</span>
-      </nuxt-link>
      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
        <span v-else class="material-icons-outlined text-lg">collections_bookmark</span>
@@ -40,7 +36,7 @@
        </svg>
      </nuxt-link>
      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
-        <p class="text-sm">{{ $strings.ButtonAdd }}</p>
+        <p class="text-sm">{{ $strings.ButtonSearch }}</p>
      </nuxt-link>
    </div>
    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-40 flex items-center justify-end md:justify-start px-2 md:px-8">
@@ -85,8 +81,6 @@

        <!-- issues page remove all button -->
        <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ numShowing }} {{ entityName }}</ui-btn>
-
-        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
      </template>
      <!-- search page -->
      <template v-else-if="page === 'search'">
@@ -192,9 +186,6 @@ export default {
    userCanUpdate() {
      return this.$store.getters['user/getUserCanUpdate']
    },
-    userCanDownload() {
-      return this.$store.getters['user/getUserCanDownload']
-    },
    currentLibraryId() {
      return this.$store.state.libraries.currentLibraryId
    },
@@ -285,33 +276,10 @@ export default {
    },
    isIssuesFilter() {
      return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
-    },
-    contextMenuItems() {
-      const items = []
-
-      if (this.isPodcastLibrary && this.isLibraryPage && this.userCanDownload) {
-        items.push({
-          text: 'Export OPML',
-          action: 'export-opml'
-        })
-      }
-
-      return items
-    },
-    showPlaylists() {
-      return this.$store.state.libraries.numUserPlaylists > 0
    }
  },
  methods: {
-    contextMenuAction({ action }) {
-      if (action === 'export-opml') {
-        this.exportOPML()
-      }
-    },
-    exportOPML() {
-      this.$downloadFile(`/api/libraries/${this.currentLibraryId}/opml?token=${this.$store.getters['user/getToken']}`, null, true)
-    },
-    seriesContextMenuAction({ action }) {
+    seriesContextMenuAction(action) {
      if (action === 'open-rss-feed') {
        this.showOpenSeriesRSSFeed()
      } else if (action === 're-add-to-continue-listening') {
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@@ -14,10 +14,10 @@
    </div>

    <div class="w-44 h-12 px-4 border-t bg-bg border-black border-opacity-20 fixed left-0 flex flex-col justify-center" :class="wrapperClass" :style="{ bottom: streamLibraryItem ? '160px' : '0px' }">
-      <div class="flex items-center justify-between">
-        <button type="button" class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</button>
+      <div class="flex justify-between">
+        <p class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</p>

-        <p class="text-xs text-gray-300 italic">{{ Source }}</p>
+        <p class="font-mono text-xs text-gray-300 italic">{{ Source }}</p>
      </div>
      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ latestVersion }}</a>
    </div>
@@ -90,25 +90,10 @@ export default {
          title: this.$strings.HeaderNotifications,
          path: '/config/notifications'
        },
-        {
-          id: 'config-email',
-          title: this.$strings.HeaderEmail,
-          path: '/config/email'
-        },
        {
          id: 'config-item-metadata-utils',
          title: this.$strings.HeaderItemMetadataUtils,
          path: '/config/item-metadata-utils'
-        },
-        {
-          id: 'config-rss-feeds',
-          title: this.$strings.HeaderRSSFeeds,
-          path: '/config/rss-feeds'
-        },
-        {
-          id: 'config-authentication',
-          title: this.$strings.HeaderAuthentication,
-          path: '/config/authentication'
        }
      ]

--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -21,7 +21,7 @@
      </div>
    </div>

-    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />
  </div>
 </template>

@@ -78,6 +78,9 @@ export default {
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
    libraryMediaType() {
      return this.$store.getters['libraries/getCurrentLibraryMediaType']
    },
@@ -205,9 +208,6 @@ export default {
    sizeMultiplier() {
      const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
      return this.entityWidth / baseSize
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
    }
  },
  methods: {
@@ -316,12 +316,12 @@ export default {
        this.currentSFQueryString = this.buildSearchParams()
      }

-      let entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
+      const entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
      const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
-      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed,numEpisodesIncomplete`
+      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed`

      const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
-        console.error('failed to fetch items', error)
+        console.error('failed to fetch books', error)
        return null
      })

@@ -626,11 +626,6 @@ 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)

--- a/client/components/app/SettingsContent.vue
+++ b/client/components/app/SettingsContent.vue
@@ -3,7 +3,9 @@
    <div class="flex items-center mb-2">
      <h1 class="text-xl">{{ headerText }}</h1>

-      <slot name="header-items"></slot>
+      <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
+        <button type="button" class="material-icons" :aria-label="$strings.ButtonAdd + ': ' + headerText" style="font-size: 1.4rem">add</button>
+      </div>
    </div>

    <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
@@ -17,9 +19,14 @@ export default {
  props: {
    headerText: String,
    description: String,
-    note: String
+    note: String,
+    showAddButton: Boolean
  },
-  methods: {}
+  methods: {
+    clicked() {
+      this.$emit('clicked')
+    }
+  }
 }
 </script>

--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@@ -3,119 +3,109 @@
    <!-- ugly little workaround to cover up the shadow overlapping the bookshelf toolbar -->
    <div v-if="isShowingBookshelfToolbar" class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />

-    <div id="siderail-buttons-container" :class="{ 'player-open': streamLibraryItem }" class="w-full overflow-y-auto overflow-x-hidden">
-      <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-        </svg>
+    <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>

-        <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2xl">format_list_bulleted</span>
+    <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2xl">format_list_bulleted</span>

-        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
+      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>

-        <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-        </svg>
+    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+      </svg>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>

-        <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-        </svg>
+    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+      </svg>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>

-        <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons-outlined text-2xl">collections_bookmark</span>
+    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons-outlined text-2xl">collections_bookmark</span>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>

-        <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2.5xl">queue_music</span>
+    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg class="w-6 h-6" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+        />
+      </svg>

-        <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
+      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>

-        <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <svg class="w-6 h-6" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
-          />
-        </svg>
+    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="abs-icons icon-podcast text-xl"></span>

-        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSearch }}</p>

-        <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isNarratorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2xl">record_voice_over</span>
+    <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons-outlined text-xl">album</span>

-        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.LabelNarrators }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">Albums</p>

-        <div v-show="isNarratorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="isMusicAlbumsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="abs-icons icon-podcast text-xl"></span>
+    <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2.5xl">queue_music</span>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAdd }}</p>
+      <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>

-        <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons-outlined text-xl">album</span>
+    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2xl">file_download</span>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">Albums</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>

-        <div v-show="isMusicAlbumsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-icons text-2xl">file_download</span>
+    <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
+      <span class="material-icons text-2xl">warning</span>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>

-        <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+      <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
+        <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
+      </div>
+    </nuxt-link>

-      <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
-        <span class="material-icons text-2xl">warning</span>
-
-        <p class="pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
-
-        <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-        <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
-          <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
-        </div>
-      </nuxt-link>
-    </div>
-
-    <div class="w-full h-12 px-1 py-2 border-t border-black/20 bg-bg absolute left-0" :style="{ bottom: streamLibraryItem ? '224px' : '65px' }">
+    <div class="w-full h-12 px-1 py-2 border-t border-black border-opacity-20 absolute left-0" :style="{ bottom: streamLibraryItem ? '240px' : '65px' }">
      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1" @click="clickChangelog">v{{ $config.version }}</p>
      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
      <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
@@ -188,9 +178,6 @@ export default {
    isAuthorsPage() {
      return this.$route.name === 'library-library-authors'
    },
-    isNarratorsPage() {
-      return this.$route.name === 'library-library-narrators'
-    },
    isPlaylistsPage() {
      return this.paramId === 'playlists'
    },
@@ -237,12 +224,3 @@ export default {
  mounted() {}
 }
 </script>
-
-<style>
-#siderail-buttons-container {
-  max-height: calc(100vh - 64px - 48px);
-}
-#siderail-buttons-container.player-open {
-  max-height: calc(100vh - 64px - 48px - 160px);
-}
-</style>
--- a/client/components/app/StreamContainer.vue
+++ b/client/components/app/StreamContainer.vue
@@ -1,9 +1,9 @@
 <template>
  <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 md:h-40 z-50 bg-primary px-2 md:px-4 pb-1 md:pb-4 pt-2">
    <div id="videoDock" />
-    <div class="absolute left-2 top-2 md:left-4 cursor-pointer">
-      <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
-    </div>
+    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-2 top-2 md:left-4 cursor-pointer">
+      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
+    </nuxt-link>
    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
      <div class="min-w-0">
        <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
@@ -268,10 +268,6 @@ export default {
    seek(time) {
      this.playerHandler.seek(time)
    },
-    playbackTimeUpdate(time) {
-      // When updating progress from another session
-      this.playerHandler.seek(time, false)
-    },
    setCurrentTime(time) {
      this.currentTime = time
      if (this.$refs.audioPlayer) {
@@ -370,8 +366,9 @@ export default {
        navigator.mediaSession.setActionHandler('seekbackward', this.mediaSessionSeekBackward)
        navigator.mediaSession.setActionHandler('seekforward', this.mediaSessionSeekForward)
        navigator.mediaSession.setActionHandler('seekto', this.mediaSessionSeekTo)
-        navigator.mediaSession.setActionHandler('previoustrack', this.mediaSessionSeekBackward)
-        navigator.mediaSession.setActionHandler('nexttrack', this.mediaSessionSeekForward)
+        navigator.mediaSession.setActionHandler('previoustrack', this.mediaSessionPreviousTrack)
+        const hasNextChapter = this.$refs.audioPlayer && this.$refs.audioPlayer.hasNextChapter
+        navigator.mediaSession.setActionHandler('nexttrack', hasNextChapter ? this.mediaSessionNextTrack : null)
      } else {
        console.warn('Media session not available')
      }
@@ -481,14 +478,12 @@ export default {
  mounted() {
    this.$eventBus.$on('cast-session-active', this.castSessionActive)
    this.$eventBus.$on('playback-seek', this.seek)
-    this.$eventBus.$on('playback-time-update', this.playbackTimeUpdate)
    this.$eventBus.$on('play-item', this.playLibraryItem)
    this.$eventBus.$on('pause-item', this.pauseItem)
  },
  beforeDestroy() {
    this.$eventBus.$off('cast-session-active', this.castSessionActive)
    this.$eventBus.$off('playback-seek', this.seek)
-    this.$eventBus.$off('playback-time-update', this.playbackTimeUpdate)
    this.$eventBus.$off('play-item', this.playLibraryItem)
    this.$eventBus.$off('pause-item', this.pauseItem)
  }
--- a/client/components/cards/AuthorCard.vue
+++ b/client/components/cards/AuthorCard.vue
@@ -8,7 +8,7 @@
        <!-- Author name & num books overlay -->
        <div 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>
+          <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
        </div>

        <!-- Search icon btn -->
--- a/client/components/cards/BookMatchCard.vue
+++ b/client/components/cards/BookMatchCard.vue
@@ -15,8 +15,8 @@
        </div>
        <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
        <p v-if="book.narrator" class="text-gray-400 text-xs">Narrated by {{ book.narrator }}</p>
-        <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
-        <div v-if="book.series?.length" class="flex py-1 -mx-1">
+        <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(book.duration * 60) }}</p>
+        <div v-if="book.series && book.series.length" class="flex py-1 -mx-1">
          <div v-for="(series, index) in book.series" :key="index" class="bg-white bg-opacity-10 rounded-full px-1 py-0.5 mx-1">
            <p class="leading-3 text-xs text-gray-400">
              {{ series.series }}<span v-if="series.sequence">&nbsp;#{{ series.sequence }}</span>
@@ -29,7 +29,9 @@
      </div>
      <div v-else class="px-4 flex-grow">
        <h1>
-          <div class="flex items-center">{{ book.title }}<widgets-explicit-indicator :explicit="book.explicit" /></div>
+          <div class="flex items-center">
+            {{ book.title }}<widgets-explicit-indicator :explicit="book.explicit" />
+          </div>
        </h1>
        <p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
        <p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
@@ -54,8 +56,7 @@ export default {
      default: () => {}
    },
    isPodcast: Boolean,
-    bookCoverAspectRatio: Number,
-    currentBookDuration: Number
+    bookCoverAspectRatio: Number
  },
  data() {
    return {
@@ -64,27 +65,12 @@ export default {
  },
  computed: {
    bookCovers() {
-      return this.book.covers || []
-    },
-    bookDuration() {
-      return (this.book.duration || 0) * 60
-    },
-    bookDurationComparison() {
-      if (!this.book.duration || !this.currentBookDuration) return ''
-      const currentBookDurationMinutes = Math.floor(this.currentBookDuration / 60)
-      let differenceInMinutes = currentBookDurationMinutes - this.book.duration
-      if (differenceInMinutes < 0) {
-        differenceInMinutes = Math.abs(differenceInMinutes)
-        return `(${this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)} shorter)`
-      } else if (differenceInMinutes > 0) {
-        return `(${this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)} longer)`
-      }
-      return '(exact match)'
+      return this.book.covers ? this.book.covers || [] : []
    }
  },
  methods: {
    selectMatch() {
-      const book = { ...this.book }
+      var book = { ...this.book }
      book.cover = this.selectedCover
      this.$emit('select', book)
    },
--- a/client/components/cards/ItemSearchCard.vue
+++ b/client/components/cards/ItemSearchCard.vue
@@ -5,7 +5,7 @@
      <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
      <p v-else class="truncate text-sm" v-html="matchHtml" />

-      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300" v-html="matchHtml" />
+      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300">{{ matchHtml }}</p>

      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">by {{ authorName }}</p>
      <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
@@ -61,6 +61,7 @@ export default {
    },
    matchHtml() {
      if (!this.matchText || !this.search) return ''
+      if (this.matchKey === 'subtitle') return ''

      // This used to highlight the part of the search found
      //        but with removing commas periods etc this is no longer plausible
@@ -68,7 +69,6 @@ export default {

      if (this.matchKey === 'episode') return `<p class="truncate">${this.$strings.LabelEpisode}: ${html}</p>`
      if (this.matchKey === 'tags') return `<p class="truncate">${this.$strings.LabelTags}: ${html}</p>`
-      if (this.matchKey === 'subtitle') return `<p class="truncate">${html}</p>`
      if (this.matchKey === 'authors') return `by ${html}`
      if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`
      if (this.matchKey === 'asin') return `<p class="truncate">ASIN: ${html}</p>`
--- a/client/components/cards/ItemTaskRunningCard.vue
+++ b/client/components/cards/ItemTaskRunningCard.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex items-center px-1 overflow-hidden">
-    <div class="w-8 flex items-center justify-center">
-      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{ actionIcon }}</span>
+  <div class="flex items-center h-full px-1 overflow-hidden">
+    <div class="h-5 w-5 min-w-5 text-lg mr-1.5 flex items-center justify-center">
+      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{actionIcon}}</span>
      <widgets-loading-spinner v-else />
    </div>
    <div class="flex-grow px-2 taskRunningCardContent">
@@ -10,9 +10,7 @@
      <p class="truncate text-xs text-gray-300">{{ description }}</p>

      <p v-if="isFailed && failedMessage" class="text-xs truncate text-red-500">{{ failedMessage }}</p>
-      <p v-else-if="!isFinished && cancelingScan" class="text-xs truncate">Canceling...</p>
    </div>
-    <ui-btn v-if="userIsAdminOrUp && !isFinished && isLibraryScan && !cancelingScan" color="primary" :padding-y="1" :padding-x="1" class="text-xs w-16 max-w-16 truncate mr-1" @click.stop="cancelScan">{{ this.$strings.ButtonCancel }}</ui-btn>
  </div>
 </template>

@@ -25,14 +23,9 @@ export default {
    }
  },
  data() {
-    return {
-      cancelingScan: false
-    }
+    return {}
  },
  computed: {
-    userIsAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
    title() {
      return this.task.title || 'No Title'
    },
@@ -43,13 +36,10 @@ export default {
      return this.task.details || 'Unknown'
    },
    isFinished() {
-      return !!this.task.isFinished
+      return this.task.isFinished || false
    },
    isFailed() {
-      return !!this.task.isFailed
-    },
-    isSuccess() {
-      return this.isFinished && !this.isFailed
+      return this.task.isFailed || false
    },
    failedMessage() {
      return this.task.error || ''
@@ -58,11 +48,6 @@ export default {
      return this.task.action || ''
    },
    actionIcon() {
-      if (this.isFailed) {
-        return 'error'
-      } else if (this.isSuccess) {
-        return 'done'
-      }
      switch (this.action) {
        case 'download-podcast-episode':
          return 'cloud_download'
@@ -81,21 +66,9 @@ export default {
      }

      return ''
-    },
-    isLibraryScan() {
-      return this.action === 'library-scan' || this.action === 'library-match-all'
    }
  },
  methods: {
-    cancelScan() {
-      const libraryId = this.task?.data?.libraryId
-      if (!libraryId) {
-        console.error('No library id in library-scan task', this.task)
-        return
-      }
-      this.cancelingScan = true
-      this.$root.socket.emit('cancel_scan', libraryId)
-    }
  },
  mounted() {}
 }
@@ -103,8 +76,8 @@ export default {

 <style>
 .taskRunningCardContent {
-  width: calc(100% - 84px);
-  height: 60px;
+  width: calc(100% - 80px);
+  height: 75px;
  display: flex;
  flex-direction: column;
  justify-content: center;
--- a/client/components/cards/ItemUploadCard.vue
+++ b/client/components/cards/ItemUploadCard.vue
@@ -15,33 +15,24 @@

      <div class="flex my-2 -mx-2">
        <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model.trim="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
+          <ui-text-input-with-label v-model="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
        </div>
        <div class="w-1/2 px-2">
-          <div v-if="!isPodcast" class="flex items-end">
-            <ui-text-input-with-label v-model.trim="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
-            <ui-tooltip :text="$strings.LabelUploaderItemFetchMetadataHelp">
-              <div
-                class="ml-2 mb-1 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-primary cursor-pointer"
-                @click="fetchMetadata">
-                <span class="text-base text-white text-opacity-80 font-mono material-icons">sync</span>
-              </div>
-            </ui-tooltip>
-          </div>
+          <ui-text-input-with-label v-if="!isPodcast" v-model="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
          <div v-else class="w-full">
            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" />
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
          </div>
        </div>
      </div>
      <div v-if="!isPodcast" class="flex my-2 -mx-2">
        <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model.trim="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" inputClass="h-10" />
+          <ui-text-input-with-label v-model="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" />
        </div>
        <div class="w-1/2 px-2">
          <div class="w-full">
-            <label class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></label>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs h-10" />
+            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
          </div>
        </div>
      </div>
@@ -57,8 +48,8 @@
      <p class="text-base">{{ $strings.MessageUploaderItemFailed }}</p>
    </widgets-alert>

-    <div v-if="isNonInteractable" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-20">
-      <ui-loading-indicator :text="nonInteractionLabel" />
+    <div v-if="isUploading" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-20">
+      <ui-loading-indicator :text="$strings.MessageUploading" />
    </div>
  </div>
 </template>
@@ -70,11 +61,10 @@ export default {
  props: {
    item: {
      type: Object,
-      default: () => { }
+      default: () => {}
    },
    mediaType: String,
-    processing: Boolean,
-    provider: String
+    processing: Boolean
  },
  data() {
    return {
@@ -86,8 +76,7 @@ export default {
      error: '',
      isUploading: false,
      uploadFailed: false,
-      uploadSuccess: false,
-      isFetchingMetadata: false
+      uploadSuccess: false
    }
  },
  computed: {
@@ -98,19 +87,12 @@ export default {
      if (!this.itemData.title) return ''
      if (this.isPodcast) return this.itemData.title

-      const outputPathParts = [this.itemData.author, this.itemData.series, this.itemData.title]
-      const cleanedOutputPathParts = outputPathParts.filter(Boolean).map(part => this.$sanitizeFilename(part))
-
-      return Path.join(...cleanedOutputPathParts)
-    },
-    isNonInteractable() {
-      return this.isUploading || this.isFetchingMetadata
-    },
-    nonInteractionLabel() {
-      if (this.isUploading) {
-        return this.$strings.MessageUploading
-      } else if (this.isFetchingMetadata) {
-        return this.$strings.LabelFetchingMetadata
+      if (this.itemData.series && this.itemData.author) {
+        return Path.join(this.itemData.author, this.itemData.series, this.itemData.title)
+      } else if (this.itemData.author) {
+        return Path.join(this.itemData.author, this.itemData.title)
+      } else {
+        return this.itemData.title
      }
    }
  },
@@ -123,49 +105,15 @@ export default {
    titleUpdated() {
      this.error = ''
    },
-    async fetchMetadata() {
-      if (!this.itemData.title.trim().length) {
-        return
-      }
-
-      this.isFetchingMetadata = true
-      this.error = ''
-
-      try {
-        const searchQueryString = new URLSearchParams({
-          title: this.itemData.title,
-          author: this.itemData.author,
-          provider: this.provider
-        })
-        const [bestCandidate, ..._rest] = await this.$axios.$get(`/api/search/books?${searchQueryString}`)
-
-        if (bestCandidate) {
-          this.itemData = {
-            ...this.itemData,
-            title: bestCandidate.title,
-            author: bestCandidate.author,
-            series: (bestCandidate.series || [])[0]?.series
-          }
-        } else {
-          this.error = this.$strings.ErrorUploadFetchMetadataNoResults
-        }
-      } catch (e) {
-        console.error('Failed', e)
-        this.error = this.$strings.ErrorUploadFetchMetadataAPI
-      } finally {
-        this.isFetchingMetadata = false
-      }
-    },
    getData() {
      if (!this.itemData.title) {
-        this.error = this.$strings.ErrorUploadLacksTitle
+        this.error = 'Must have a title'
        return null
      }
      this.error = ''
      var files = this.item.itemFiles.concat(this.item.otherFiles)
      return {
        index: this.item.index,
-        directory: this.directory,
        ...this.itemData,
        files
      }
@@ -179,4 +127,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -68,8 +68,7 @@
        <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
      </div>

-      <!-- Radio button -->
-      <div 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">
+      <div 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>

@@ -77,10 +76,6 @@
      <div ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="hidden 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 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 -->
@@ -90,7 +85,7 @@

    <!-- Series name overlay -->
    <div 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>
+      <p class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ series }}</p>
    </div>

    <!-- Error widget -->
@@ -117,14 +112,9 @@
    </div>

    <!-- Podcast Num Episodes -->
-    <div 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' }">
+    <div v-else-if="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 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>
-    </div>
  </div>
 </template>

@@ -180,6 +170,12 @@ export default {
    dateFormat() {
      return this.store.state.serverSettings.dateFormat
    },
+    showExperimentalFeatures() {
+      return this.store.state.showExperimentalFeatures
+    },
+    enableEReader() {
+      return this.store.getters['getServerSetting']('enableEReader')
+    },
    _libraryItem() {
      return this.libraryItem || {}
    },
@@ -219,16 +215,13 @@ export default {
      // Only included when filtering by series or collapse series or Continue Series shelf on home page
      return this.mediaMetadata.series
    },
-    seriesName() {
-      return this.series?.name || null
-    },
    seriesSequence() {
-      return this.series?.sequence || null
+      return this.series ? this.series.sequence : null
    },
    libraryId() {
      return this._libraryItem.libraryId
    },
-    ebookFormat() {
+    hasEbook() {
      return this.media.ebookFormat
    },
    numTracks() {
@@ -236,11 +229,9 @@ export default {
      return this.media.numTracks || 0 // toJSONMinified
    },
    numEpisodes() {
+      if (!this.isPodcast) return 0
      return this.media.numEpisodes || 0
    },
-    numEpisodesIncomplete() {
-      return this._libraryItem.numEpisodesIncomplete || 0
-    },
    processingBatch() {
      return this.store.state.processingBatch
    },
@@ -261,14 +252,14 @@ export default {
    },
    booksInSeries() {
      // Only added to item object when collapseSeries is enabled
-      return this.collapsedSeries?.numBooks || 0
+      return this.collapsedSeries ? this.collapsedSeries.numBooks : 0
    },
    seriesSequenceList() {
-      return this.collapsedSeries?.seriesSequenceList || null
+      return this.collapsedSeries ? this.collapsedSeries.seriesSequenceList : null
    },
    libraryItemIdsInSeries() {
      // Only added to item object when collapseSeries is enabled
-      return this.collapsedSeries?.libraryItemIds || []
+      return this.collapsedSeries ? this.collapsedSeries.libraryItemIds || [] : []
    },
    hasCover() {
      return !!this.media.coverPath
@@ -322,7 +313,6 @@ export default {
      if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
      if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
-      if (this.orderBy === 'media.metadata.publishedYear' && this.mediaMetadata.publishedYear) return 'Published ' + this.mediaMetadata.publishedYear
      return null
    },
    episodeProgress() {
@@ -335,9 +325,6 @@ export default {
      if (this.episodeProgress) return this.episodeProgress
      return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
    },
-    isEBookOnly() {
-      return !this.numTracks && this.ebookFormat
-    },
    useEBookProgress() {
      if (!this.userProgress || this.userProgress.progress) return false
      return this.userProgress.ebookProgress > 0
@@ -373,13 +360,13 @@ export default {
      return this.store.getters['getIsStreamingFromDifferentLibrary']
    },
    showReadButton() {
-      return !this.isSelectionMode && !this.showPlayButton && this.ebookFormat
+      return !this.isSelectionMode && !this.showPlayButton && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
    },
    showPlayButton() {
      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode || this.isMusic)
    },
    showSmallEBookIcon() {
-      return !this.isSelectionMode && this.ebookFormat
+      return !this.isSelectionMode && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
    },
    isMissing() {
      return this._libraryItem.isMissing
@@ -495,18 +482,6 @@ export default {
            text: this.$strings.LabelAddToPlaylist
          })
        }
-        if (this.ebookFormat && this.store.state.libraries.ereaderDevices?.length) {
-          items.push({
-            text: this.$strings.LabelSendEbookToDevice,
-            subitems: this.store.state.libraries.ereaderDevices.map((d) => {
-              return {
-                text: d.name,
-                func: 'sendToDevice',
-                data: d.name
-              }
-            })
-          })
-        }
      }
      if (this.userCanUpdate) {
        items.push({
@@ -533,7 +508,7 @@ export default {
      if (this.continueListeningShelf) {
        items.push({
          func: 'removeFromContinueListening',
-          text: this.isEBookOnly ? this.$strings.ButtonRemoveFromContinueReading : this.$strings.ButtonRemoveFromContinueListening
+          text: this.$strings.ButtonRemoveFromContinueListening
        })
      }
      if (!this.isPodcast) {
@@ -692,6 +667,7 @@ export default {
        .$patch(apiEndpoint, updatePayload)
        .then(() => {
          this.processing = false
+          toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
        })
        .catch((error) => {
          console.error('Failed', error)
@@ -736,40 +712,7 @@ export default {
      // More menu func
      this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'match' })
    },
-    sendToDevice(deviceName) {
-      // More menu func
-      const payload = {
-        // message: `Are you sure you want to send ${this.ebookFormat} ebook "${this.title}" to device "${deviceName}"?`,
-        message: this.$getString('MessageConfirmSendEbookToDevice', [this.ebookFormat, this.title, deviceName]),
-        callback: (confirmed) => {
-          if (confirmed) {
-            const payload = {
-              libraryItemId: this.libraryItemId,
-              deviceName
-            }
-            this.processing = true
-            const axios = this.$axios || this.$nuxt.$axios
-            axios
-              .$post(`/api/emails/send-ebook-to-device`, payload)
-              .then(() => {
-                this.$toast.success(this.$getString('ToastSendEbookToDeviceSuccess', [deviceName]))
-              })
-              .catch((error) => {
-                console.error('Failed to send ebook to device', error)
-                this.$toast.error(this.$strings.ToastSendEbookToDeviceFailed)
-              })
-              .finally(() => {
-                this.processing = false
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.store.commit('globals/setConfirmPrompt', payload)
-    },
    removeSeriesFromContinueListening() {
-      if (!this.series) return
-
      const axios = this.$axios || this.$nuxt.$axios
      this.processing = true
      axios
@@ -844,15 +787,13 @@ export default {
    },
    deleteLibraryItem() {
      const payload = {
-        message: this.$strings.MessageConfirmDeleteLibraryItem,
-        checkboxLabel: this.$strings.LabelDeleteFromFileSystemCheckbox,
+        message: 'This will delete the library item from the database and your file system. Are you sure?',
+        checkboxLabel: 'Delete from file system. Uncheck to only remove from database.',
        yesButtonText: this.$strings.ButtonDelete,
        yesButtonColor: 'error',
-        checkboxDefaultValue: !Number(localStorage.getItem('softDeleteDefault') || 0),
+        checkboxDefaultValue: true,
        callback: (confirmed, hardDelete) => {
          if (confirmed) {
-            localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
-
            this.processing = true
            const axios = this.$axios || this.$nuxt.$axios
            axios
@@ -884,8 +825,8 @@ export default {
          items: this.moreMenuItems
        },
        created() {
-          this.$on('action', (action) => {
-            if (action.func && _this[action.func]) _this[action.func](action.data)
+          this.$on('action', (func) => {
+            if (_this[func]) _this[func]()
          })
          this.$on('close', () => {
            _this.isMoreMenuOpen = false
@@ -897,7 +838,7 @@ export default {
      var wrapperBox = this.$refs.moreIcon.getBoundingClientRect()
      var el = instance.$el

-      var elHeight = this.moreMenuItems.length * 28 + 10
+      var elHeight = this.moreMenuItems.length * 28 + 2
      var elWidth = 130

      var bottomOfIcon = wrapperBox.top + wrapperBox.height
@@ -924,13 +865,12 @@ export default {
      this.createMoreMenu()
    },
    async clickReadEBook() {
-      const axios = this.$axios || this.$nuxt.$axios
-      var libraryItem = await axios.$get(`/api/items/${this.libraryItemId}?expanded=1`).catch((error) => {
+      var libraryItem = await this.$axios.$get(`/api/items/${this.libraryItemId}?expanded=1`).catch((error) => {
        console.error('Failed to get lirbary item', this.libraryItemId)
        return null
      })
      if (!libraryItem) return
-      this.store.commit('showEReader', { libraryItem, keepProgress: true })
+      this.store.commit('showEReader', libraryItem)
    },
    selectBtnClick(evt) {
      if (this.processingBatch) return
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@@ -7,7 +7,7 @@

    <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">{{ books.length }}</div>

-    <div 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 v-if="isSeriesFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success w-full" />

    <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" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
      <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
@@ -85,13 +85,13 @@ export default {
        case 'addedAt':
          return `${this.$strings.LabelAdded} ${this.$formatDate(this.addedAt, this.dateFormat)}`
        case 'totalDuration':
-          return `${this.$strings.LabelDuration} ${this.$elapsedPrettyExtended(this.totalDuration, false)}`
+          return `${this.$strings.LabelDuration} ${this.$elapsedPrettyExtended(this.totalDuration, false)}` 
        case 'lastBookUpdated':
-          const lastUpdated = Math.max(...this.books.map((x) => x.updatedAt), 0)
+          const lastUpdated = Math.max(...(this.books).map(x => x.updatedAt), 0)
          return `${this.$strings.LabelLastBookUpdated} ${this.$formatDate(lastUpdated, this.dateFormat)}`
        case 'lastBookAdded':
-          const lastBookAdded = Math.max(...this.books.map((x) => x.addedAt), 0)
-          return `${this.$strings.LabelLastBookAdded} ${this.$formatDate(lastBookAdded, this.dateFormat)}`
+          const lastBookAdded = Math.max(...(this.books).map(x => x.addedAt), 0)
+          return `${this.$strings.LabelLastBookAdded} ${this.$formatDate(lastBookAdded, this.dateFormat)}` 
        default:
          return null
      }
@@ -115,14 +115,6 @@ export default {
    seriesBooksFinished() {
      return this.seriesBookProgress.filter((p) => p.isFinished)
    },
-    hasSeriesBookInProgress() {
-      return this.seriesBookProgress.some((p) => !p.isFinished && p.progress > 0)
-    },
-    seriesPercentInProgress() {
-      let totalFinishedAndInProgress = this.seriesBooksFinished.length
-      if (this.hasSeriesBookInProgress) totalFinishedAndInProgress += 1
-      return Math.min(1, Math.max(0, totalFinishedAndInProgress / this.books.length))
-    },
    isSeriesFinished() {
      return this.books.length === this.seriesBooksFinished.length
    },
--- a/client/components/cards/NarratorCard.vue
+++ b/client/components/cards/NarratorCard.vue
@@ -1,8 +1,8 @@
 <template>
  <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(narrator.name)}`">
    <div :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 class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-20">
+        <span class="material-icons-outlined text-8xl">record_voice_over</span>
      </div>

      <!-- Narrator name & num books overlay -->
@@ -36,7 +36,7 @@ export default {
      return this.narrator?.name || ''
    },
    numBooks() {
-      return this.narrator?.numBooks || this.narrator?.books?.length || 0
+      return this.narrator?.books?.length || 0
    },
    userCanUpdate() {
      return this.$store.getters['user/getUserCanUpdate']
--- a/client/components/content/LibraryItemDetails.vue
+++ b/client/components/content/LibraryItemDetails.vue
@@ -1,212 +0,0 @@
-<template>
-  <div>
-    <div v-if="narrators?.length" class="flex py-0.5 mt-4">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNarrators }}</span>
-      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
-        <template v-for="(narrator, index) in narrators">
-          <nuxt-link :key="narrator" :to="`/library/${libraryId}/bookshelf?filter=narrators.${$encode(narrator)}`" class="hover:underline">{{ narrator }}</nuxt-link
-          ><span :key="index" v-if="index < narrators.length - 1">,&nbsp;</span>
-        </template>
-      </div>
-    </div>
-    <div v-if="publishedYear" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPublishYear }}</span>
-      </div>
-      <div>
-        {{ publishedYear }}
-      </div>
-    </div>
-    <div v-if="publisher" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPublisher }}</span>
-      </div>
-      <div>
-        <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=publishers.${$encode(publisher)}`" class="hover:underline">{{ publisher }}</nuxt-link>
-      </div>
-    </div>
-    <div v-if="musicAlbum" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Album</span>
-      </div>
-      <div>
-        {{ musicAlbum }}
-      </div>
-    </div>
-    <div v-if="musicAlbumArtist" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Album Artist</span>
-      </div>
-      <div>
-        {{ musicAlbumArtist }}
-      </div>
-    </div>
-    <div v-if="musicTrackPretty" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Track</span>
-      </div>
-      <div>
-        {{ musicTrackPretty }}
-      </div>
-    </div>
-    <div v-if="musicDiscPretty" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">Disc</span>
-      </div>
-      <div>
-        {{ musicDiscPretty }}
-      </div>
-    </div>
-    <div v-if="podcastType" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPodcastType }}</span>
-      </div>
-      <div class="capitalize">
-        {{ podcastType }}
-      </div>
-    </div>
-    <div class="flex py-0.5" v-if="genres.length">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelGenres }}</span>
-      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
-        <template v-for="(genre, index) in genres">
-          <nuxt-link :key="genre" :to="`/library/${libraryId}/bookshelf?filter=genres.${$encode(genre)}`" class="hover:underline">{{ genre }}</nuxt-link
-          ><span :key="index" v-if="index < genres.length - 1">,&nbsp;</span>
-        </template>
-      </div>
-    </div>
-    <div class="flex py-0.5" v-if="tags.length">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelTags }}</span>
-      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
-        <template v-for="(tag, index) in tags">
-          <nuxt-link :key="tag" :to="`/library/${libraryId}/bookshelf?filter=tags.${$encode(tag)}`" class="hover:underline">{{ tag }}</nuxt-link
-          ><span :key="index" v-if="index < tags.length - 1">,&nbsp;</span>
-        </template>
-      </div>
-    </div>
-    <div v-if="tracks.length || audioFile || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelDuration }}</span>
-      </div>
-      <div>
-        {{ durationPretty }}
-      </div>
-    </div>
-    <div class="flex py-0.5">
-      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelSize }}</span>
-      </div>
-      <div>
-        {{ sizePretty }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    libraryId() {
-      return this.libraryItem.libraryId
-    },
-    isPodcast() {
-      return this.libraryItem.mediaType === 'podcast'
-    },
-    audioFile() {
-      // Music track
-      return this.media.audioFile
-    },
-    media() {
-      return this.libraryItem.media || {}
-    },
-    tracks() {
-      return this.media.tracks || []
-    },
-    podcastEpisodes() {
-      return this.media.episodes || []
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
-    publishedYear() {
-      return this.mediaMetadata.publishedYear
-    },
-    genres() {
-      return this.mediaMetadata.genres || []
-    },
-    tags() {
-      return this.media.tags || []
-    },
-    podcastAuthor() {
-      return this.mediaMetadata.author || ''
-    },
-    authors() {
-      return this.mediaMetadata.authors || []
-    },
-    publisher() {
-      return this.mediaMetadata.publisher || ''
-    },
-    musicArtists() {
-      return this.mediaMetadata.artists || []
-    },
-    musicAlbum() {
-      return this.mediaMetadata.album || ''
-    },
-    musicAlbumArtist() {
-      return this.mediaMetadata.albumArtist || ''
-    },
-    musicTrackPretty() {
-      if (!this.mediaMetadata.trackNumber) return null
-      if (!this.mediaMetadata.trackTotal) return this.mediaMetadata.trackNumber
-      return `${this.mediaMetadata.trackNumber} / ${this.mediaMetadata.trackTotal}`
-    },
-    musicDiscPretty() {
-      if (!this.mediaMetadata.discNumber) return null
-      if (!this.mediaMetadata.discTotal) return this.mediaMetadata.discNumber
-      return `${this.mediaMetadata.discNumber} / ${this.mediaMetadata.discTotal}`
-    },
-    narrators() {
-      return this.mediaMetadata.narrators || []
-    },
-    durationPretty() {
-      if (this.isPodcast) return this.$elapsedPrettyExtended(this.totalPodcastDuration)
-
-      if (!this.tracks.length && !this.audioFile) return 'N/A'
-      if (this.audioFile) return this.$elapsedPrettyExtended(this.duration)
-      return this.$elapsedPretty(this.duration)
-    },
-    duration() {
-      if (!this.tracks.length && !this.audioFile) return 0
-      return this.media.duration
-    },
-    totalPodcastDuration() {
-      if (!this.podcastEpisodes.length) return 0
-      let totalDuration = 0
-      this.podcastEpisodes.forEach((ep) => (totalDuration += ep.duration || 0))
-      return totalDuration
-    },
-    sizePretty() {
-      return this.$bytesPretty(this.media.size)
-    },
-    podcastType() {
-      return this.mediaMetadata.type
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/controls/FilterSelect.vue
+++ b/client/components/controls/FilterSelect.vue
@@ -1,6 +1,6 @@
 <template>
  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
      <span class="flex items-center justify-between">
        <span class="block truncate text-xs">{{ selectedText }}</span>
      </span>
@@ -14,17 +14,12 @@
      </div>
    </button>

-    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-sm ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
      <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
        <template v-for="item in items">
-          <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item)">
+          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
            <div class="flex items-center justify-between">
-              <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
-            </div>
-
-            <!-- selected checkmark icon -->
-            <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-icons text-base text-yellow-400">check</span>
+              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
            </div>
          </li>
        </template>
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@@ -103,7 +103,7 @@ export default {
      return this.$store.state.libraries.currentLibraryId
    },
    totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length + this.narratorResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length
    }
  },
  methods: {
@@ -197,8 +197,8 @@ export default {
 }
 </script>

-<style scoped>
+<style>
 .globalSearchMenu {
-  max-height: calc(100vh - 75px);
+  max-height: 80vh;
 }
 </style>
--- a/client/components/controls/LibraryFilterSelect.vue
+++ b/client/components/controls/LibraryFilterSelect.vue
@@ -1,6 +1,6 @@
 <template>
  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-bg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
      <span class="flex items-center justify-between">
        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
      </span>
@@ -9,35 +9,31 @@
          <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </span>
-      <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-200" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
+      <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-300" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
        <span class="material-icons" style="font-size: 1.1rem">close</span>
      </div>
    </button>

-    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm libraryFilterMenu">
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
      <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
        <template v-for="item in selectItems">
-          <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item)">
+          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
            <div class="flex items-center justify-between">
-              <span class="font-normal ml-3 block truncate text-sm">{{ item.text }}</span>
+              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
            </div>
            <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
              <span class="material-icons text-2xl">arrow_right</span>
            </div>
-            <!-- selected checkmark icon -->
-            <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-icons text-base text-yellow-400">check</span>
-            </div>
          </li>
        </template>
      </ul>
      <ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-white/5" role="option" @click="sublist = null">
+        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
          <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
            <span class="material-icons text-2xl">arrow_left</span>
          </div>
          <div class="flex items-center justify-between">
-            <span class="font-normal block truncate">Back</span>
+            <span class="font-normal ml-3 block truncate">Back</span>
          </div>
        </li>
        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
@@ -45,15 +41,16 @@
            <span class="font-normal block truncate py-2">No {{ sublist }}</span>
          </div>
        </li>
+        <li v-else-if="sublist === 'series'" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedSublistOption($encode('no-series'))">
+          <div class="flex items-center">
+            <span class="font-normal block truncate py-2 text-xs text-white text-opacity-80">{{ $strings.MessageNoSeries }}</span>
+          </div>
+        </li>
        <template v-for="item in sublistItems">
-          <li :key="item.value" class="select-none relative px-2 cursor-pointer hover:bg-white/5" :class="`${sublist}.${item.value}` === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedSublistOption(item.value)">
+          <li :key="item.value" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
            <div class="flex items-center">
              <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
            </div>
-            <!-- selected checkmark icon -->
-            <div v-if="`${sublist}.${item.value}` === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-icons text-base text-yellow-400">check</span>
-            </div>
          </li>
        </template>
      </ul>
@@ -75,8 +72,9 @@ export default {
  },
  watch: {
    showMenu(newVal) {
-      if (newVal) {
-        this.sublist = this.selectedItemSublist
+      if (!newVal) {
+        if (this.sublist && !this.selectedItemSublist) this.sublist = null
+        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
      }
    }
  },
@@ -124,11 +122,6 @@ export default {
          value: 'narrators',
          sublist: true
        },
-        {
-          text: this.$strings.LabelPublisher,
-          value: 'publishers',
-          sublist: true
-        },
        {
          text: this.$strings.LabelLanguage,
          value: 'languages',
@@ -172,11 +165,6 @@ export default {
          value: 'narrators',
          sublist: true
        },
-        {
-          text: this.$strings.LabelPublisher,
-          value: 'publishers',
-          sublist: true
-        },
        {
          text: this.$strings.LabelLanguage,
          value: 'languages',
@@ -197,11 +185,6 @@ export default {
          value: 'tracks',
          sublist: true
        },
-        {
-          text: this.$strings.LabelEbooks,
-          value: 'ebooks',
-          sublist: true
-        },
        {
          text: this.$strings.LabelAbridged,
          value: 'abridged',
@@ -272,25 +255,21 @@ export default {
      return this.bookItems
    },
    selectedItemSublist() {
-      return this.selected?.includes('.') ? this.selected.split('.')[0] : null
+      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
    },
    selectedText() {
      if (!this.selected) return ''
-      const parts = this.selected.split('.')
-      const filterName = this.selectItems.find((i) => i.value === parts[0])
-      let filterValue = null
+      var parts = this.selected.split('.')
+      var filterName = this.selectItems.find((i) => i.value === parts[0])
+      var filterValue = null
      if (parts.length > 1) {
-        const decoded = this.$decode(parts[1])
-        if (parts[0] === 'authors') {
-          const author = this.authors.find((au) => au.id == decoded)
+        var decoded = this.$decode(parts[1])
+        if (decoded.startsWith('aut_')) {
+          var author = this.authors.find((au) => au.id == decoded)
          if (author) filterValue = author.name
-        } else if (parts[0] === 'series') {
-          if (decoded === 'no-series') {
-            filterValue = this.$strings.MessageNoSeries
-          } else {
-            const series = this.series.find((se) => se.id == decoded)
-            if (series) filterValue = series.name
-          }
+        } else if (decoded.startsWith('ser_')) {
+          var series = this.series.find((se) => se.id == decoded)
+          if (series) filterValue = series.name
        } else {
          filterValue = decoded
        }
@@ -323,9 +302,6 @@ export default {
    languages() {
      return this.filterData.languages || []
    },
-    publishers() {
-      return this.filterData.publishers || []
-    },
    progress() {
      return [
        {
@@ -348,10 +324,6 @@ export default {
    },
    tracks() {
      return [
-        {
-          id: 'none',
-          name: this.$strings.LabelTracksNone
-        },
        {
          id: 'single',
          name: this.$strings.LabelTracksSingleTrack
@@ -362,18 +334,6 @@ export default {
        }
      ]
    },
-    ebooks() {
-      return [
-        {
-          id: 'ebook',
-          name: this.$strings.LabelHasEbook
-        },
-        {
-          id: 'supplementary',
-          name: this.$strings.LabelHasSupplementaryEbook
-        }
-      ]
-    },
    missing() {
      return [
        {
@@ -431,7 +391,7 @@ export default {
      ]
    },
    sublistItems() {
-      const sublistItems = (this[this.sublist] || []).map((item) => {
+      return (this[this.sublist] || []).map((item) => {
        if (typeof item === 'string') {
          return {
            text: item,
@@ -444,13 +404,6 @@ export default {
          }
        }
      })
-      if (this.sublist === 'series') {
-        sublistItems.unshift({
-          text: this.$strings.MessageNoSeries,
-          value: this.$encode('no-series')
-        })
-      }
-      return sublistItems
    },
    filterData() {
      return this.$store.state.libraries.filterData || {}
@@ -475,7 +428,7 @@ export default {
        return
      }

-      const val = option.value
+      var val = option.value
      if (this.selected === val) {
        this.showMenu = false
        return
@@ -486,10 +439,4 @@ export default {
    }
  }
 }
-</script>
-
-<style scoped>
-.libraryFilterMenu {
-  max-height: calc(100vh - 125px);
-}
-</style>
+</script>
--- a/client/components/controls/LibrarySortSelect.vue
+++ b/client/components/controls/LibrarySortSelect.vue
@@ -7,11 +7,11 @@
      </span>
    </button>

-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
      <template v-for="item in selectItems">
-        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item.value)">
+        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
          <div class="flex items-center">
-            <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+            <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
          </div>
          <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
            <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
--- a/client/components/controls/SortSelect.vue
+++ b/client/components/controls/SortSelect.vue
@@ -1,17 +1,17 @@
 <template>
  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
      <span class="flex items-center justify-between">
        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
        <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
      </span>
    </button>

-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
      <template v-for="item in items">
-        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item.value)">
+        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
          <div class="flex items-center">
-            <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+            <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
          </div>
          <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
            <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
--- a/client/components/covers/BookCover.vue
+++ b/client/components/covers/BookCover.vue
@@ -5,8 +5,7 @@
        <div class="absolute cover-bg" ref="coverBg" />
      </div>

-      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" draggable="false" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" @click="clickCover" />
-
+      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
      <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
        <p class="text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
        <div class="absolute top-2 right-2">
@@ -44,7 +43,6 @@ export default {
      type: Number,
      default: 120
    },
-    expandOnClick: Boolean,
    bookCoverAspectRatio: Number
  },
  data() {
@@ -134,11 +132,6 @@ export default {
    }
  },
  methods: {
-    clickCover() {
-      if (this.expandOnClick && this.libraryItem) {
-        this.$store.commit('globals/setRawCoverPreviewModal', this.libraryItem.id)
-      }
-    },
    setCoverBg() {
      if (this.$refs.coverBg) {
        this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`
--- a/client/components/covers/PreviewCover.vue
+++ b/client/components/covers/PreviewCover.vue
@@ -13,8 +13,8 @@

    <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
      <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
-        <img v-if="width > 100" src="/Logo.png" class="mb-2" :style="{ height: 40 * sizeMultiplier + 'px' }" />
-        <p class="text-center text-error" :style="{ fontSize: invalidCoverFontSize + 'rem' }">Invalid Cover</p>
+        <img src="/Logo.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
+        <p class="text-center text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
      </div>
    </div>

@@ -58,9 +58,6 @@ export default {
    sizeMultiplier() {
      return this.width / 120
    },
-    invalidCoverFontSize() {
-      return Math.max(this.sizeMultiplier * 0.8, 0.5)
-    },
    placeholderCoverPadding() {
      return 0.8 * this.sizeMultiplier
    },
--- a/client/components/modals/AccountModal.vue
+++ b/client/components/modals/AccountModal.vue
@@ -6,7 +6,7 @@
      </div>
    </template>
    <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
+      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden"  style="min-height: 400px; max-height: 80vh">
        <div class="w-full p-8">
          <div class="flex py-2">
            <div class="w-1/2 px-2">
@@ -14,17 +14,13 @@
            </div>
            <div class="w-1/2 px-2">
              <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? $strings.LabelPassword : $strings.LabelChangePassword" type="password" />
-              <ui-text-input-with-label v-else v-model="newUser.email" :label="$strings.LabelEmail" />
            </div>
          </div>
          <div v-show="!isEditingRoot" class="flex py-2">
-            <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model="newUser.email" :label="$strings.LabelEmail" />
-            </div>
            <div class="px-2 w-52">
-              <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" small @input="userTypeUpdated" />
+              <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" @input="userTypeUpdated" />
            </div>
-            <!-- <div class="flex-grow" /> -->
+            <div class="flex-grow" />
            <div class="flex items-center pt-4 px-2">
              <p class="px-3 font-semibold" id="user-enabled-toggle" :class="isEditingRoot ? 'text-gray-300' : ''">{{ $strings.LabelEnable }}</p>
              <ui-toggle-switch labeledBy="user-enabled-toggle" v-model="newUser.isActive" :disabled="isEditingRoot" />
@@ -107,6 +103,7 @@
                  <ui-toggle-switch labeledBy="selected-tags-not-accessible--permissions-toggle" v-model="newUser.permissions.selectedTagsNotAccessible" />
                </div>
              </div>
+              
            </div>
          </div>

@@ -261,6 +258,7 @@ export default {
      if (account.type === 'root' && !account.isActive) return

      this.processing = true
+      console.log('Calling update', account)
      this.$axios
        .$patch(`/api/users/${this.account.id}`, account)
        .then((data) => {
@@ -329,11 +327,9 @@ export default {
    init() {
      this.fetchAllTags()
      this.isNew = !this.account
-
      if (this.account) {
        this.newUser = {
          username: this.account.username,
-          email: this.account.email,
          password: this.account.password,
          type: this.account.type,
          isActive: this.account.isActive,
@@ -342,9 +338,9 @@ export default {
          itemTagsSelected: [...(this.account.itemTagsSelected || [])]
        }
      } else {
+        this.fetchAllTags()
        this.newUser = {
          username: null,
-          email: null,
          password: null,
          type: 'user',
          isActive: true,
@@ -357,8 +353,7 @@ export default {
            accessAllTags: true,
            selectedTagsNotAccessible: false
          },
-          librariesAccessible: [],
-          itemTagsSelected: []
+          librariesAccessible: []
        }
      }
    }
--- a/client/components/modals/AudioFileDataModal.vue
+++ b/client/components/modals/AudioFileDataModal.vue
@@ -1,99 +1,84 @@
 <template>
  <modals-modal v-model="show" name="audiofile-data-modal" :width="700" :height="'unset'">
    <div v-if="audioFile" ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
-      <div class="flex items-center justify-between">
-        <p class="text-base text-gray-200 truncate">{{ metadata.filename }}</p>
-        <ui-btn v-if="ffprobeData" small class="ml-2" @click="ffprobeData = null">{{ $strings.ButtonReset }}</ui-btn>
-        <ui-btn v-else-if="userIsAdminOrUp" small :loading="probingFile" class="ml-2" @click="getFFProbeData">Probe Audio File</ui-btn>
+      <p class="text-base text-gray-200">{{ metadata.filename }}</p>
+
+      <div class="w-full h-px bg-white bg-opacity-10 my-4" />
+
+      <ui-text-input-with-label :value="metadata.path" readonly :label="$strings.LabelPath" class="mb-4 text-sm" />
+
+      <div class="flex flex-col sm:flex-row text-sm">
+        <div class="w-full sm:w-1/2">
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelSize }}
+            </p>
+            <p>{{ $bytesPretty(metadata.size) }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelDuration }}
+            </p>
+            <p>{{ $secondsToTimestamp(audioFile.duration) }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">{{ $strings.LabelFormat }}</p>
+            <p>{{ audioFile.format }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelChapters }}
+            </p>
+            <p>{{ audioFile.chapters?.length || 0 }}</p>
+          </div>
+          <div v-if="audioFile.embeddedCoverArt" class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelEmbeddedCover }}
+            </p>
+            <p>{{ audioFile.embeddedCoverArt || '' }}</p>
+          </div>
+        </div>
+        <div class="w-full sm:w-1/2">
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelCodec }}
+            </p>
+            <p>{{ audioFile.codec }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelChannels }}
+            </p>
+            <p>{{ audioFile.channels }} ({{ audioFile.channelLayout }})</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelBitrate }}
+            </p>
+            <p>{{ $bytesPretty(audioFile.bitRate || 0, 0) }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">{{ $strings.LabelTimeBase }}</p>
+            <p>{{ audioFile.timeBase }}</p>
+          </div>
+          <div v-if="audioFile.language" class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelLanguage }}
+            </p>
+            <p>{{ audioFile.language || '' }}</p>
+          </div>
+        </div>
      </div>

      <div class="w-full h-px bg-white bg-opacity-10 my-4" />

-      <template v-if="!ffprobeData">
-        <ui-text-input-with-label :value="metadata.path" readonly :label="$strings.LabelPath" class="mb-4 text-sm" />
+      <p class="font-bold mb-2">{{ $strings.LabelMetaTags }}</p>

-        <div class="flex flex-col sm:flex-row text-sm">
-          <div class="w-full sm:w-1/2">
-            <div class="flex mb-1">
-              <p class="w-32 text-black-50">
-                {{ $strings.LabelSize }}
-              </p>
-              <p>{{ $bytesPretty(metadata.size) }}</p>
-            </div>
-            <div class="flex mb-1">
-              <p class="w-32 text-black-50">
-                {{ $strings.LabelDuration }}
-              </p>
-              <p>{{ $secondsToTimestamp(audioFile.duration) }}</p>
-            </div>
-            <div class="flex mb-1">
-              <p class="w-32 text-black-50">{{ $strings.LabelFormat }}</p>
-              <p>{{ audioFile.format }}</p>
-            </div>
-            <div class="flex mb-1">
-              <p class="w-32 text-black-50">
-                {{ $strings.LabelChapters }}
-              </p>
-              <p>{{ audioFile.chapters?.length || 0 }}</p>
-            </div>
-            <div v-if="audioFile.embeddedCoverArt" class="flex mb-1">
-              <p class="w-32 text-black-50">
-                {{ $strings.LabelEmbeddedCover }}
-              </p>
-              <p>{{ audioFile.embeddedCoverArt || '' }}</p>
-            </div>
-          </div>
-          <div class="w-full sm:w-1/2">
-            <div class="flex mb-1">
-              <p class="w-32 text-black-50">
-                {{ $strings.LabelCodec }}
-              </p>
-              <p>{{ audioFile.codec }}</p>
-            </div>
-            <div class="flex mb-1">
-              <p class="w-32 text-black-50">
-                {{ $strings.LabelChannels }}
-              </p>
-              <p>{{ audioFile.channels }} ({{ audioFile.channelLayout }})</p>
-            </div>
-            <div class="flex mb-1">
-              <p class="w-32 text-black-50">
-                {{ $strings.LabelBitrate }}
-              </p>
-              <p>{{ $bytesPretty(audioFile.bitRate || 0, 0) }}</p>
-            </div>
-            <div class="flex mb-1">
-              <p class="w-32 text-black-50">{{ $strings.LabelTimeBase }}</p>
-              <p>{{ audioFile.timeBase }}</p>
-            </div>
-            <div v-if="audioFile.language" class="flex mb-1">
-              <p class="w-32 text-black-50">
-                {{ $strings.LabelLanguage }}
-              </p>
-              <p>{{ audioFile.language || '' }}</p>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full h-px bg-white bg-opacity-10 my-4" />
-
-        <p class="font-bold mb-2">{{ $strings.LabelMetaTags }}</p>
-
-        <div v-for="(value, key) in metaTags" :key="key" class="flex mb-1 text-sm">
-          <p class="w-32 min-w-32 text-black-50 mb-1">
-            {{ key.replace('tag', '') }}
-          </p>
-          <p>{{ value }}</p>
-        </div>
-      </template>
-      <div v-else class="w-full">
-        <div class="relative">
-          <ui-textarea-with-label :value="prettyFfprobeData" readonly :rows="30" class="text-xs" />
-
-          <button class="absolute top-4 right-4" :class="copiedToClipboard ? 'text-success' : 'text-white/50 hover:text-white/80'" @click.stop="copyFfprobeData">
-            <span class="material-icons">{{ copiedToClipboard ? 'check' : 'content_copy' }}</span>
-          </button>
-        </div>
+      <div v-for="(value, key) in metaTags" :key="key" class="flex mb-1 text-sm">
+        <p class="w-32 min-w-32 text-black-50 mb-1">
+          {{ key.replace('tag', '') }}
+        </p>
+        <p>{{ value }}</p>
      </div>
    </div>
  </modals-modal>
@@ -106,24 +91,10 @@ export default {
    audioFile: {
      type: Object,
      default: () => {}
-    },
-    libraryItemId: String
+    }
  },
  data() {
-    return {
-      probingFile: false,
-      ffprobeData: null,
-      copiedToClipboard: false
-    }
-  },
-  watch: {
-    show(newVal) {
-      if (newVal) {
-        this.ffprobeData = null
-        this.copiedToClipboard = false
-        this.probingFile = false
-      }
-    }
+    return {}
  },
  computed: {
    show: {
@@ -139,36 +110,9 @@ export default {
    },
    metaTags() {
      return this.audioFile?.metaTags || {}
-    },
-    userIsAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
-    prettyFfprobeData() {
-      if (!this.ffprobeData) return ''
-      return JSON.stringify(this.ffprobeData, null, 2)
-    }
-  },
-  methods: {
-    getFFProbeData() {
-      this.probingFile = true
-      this.$axios
-        .$get(`/api/items/${this.libraryItemId}/ffprobe/${this.audioFile.ino}`)
-        .then((data) => {
-          console.log('Got ffprobe data', data)
-          this.ffprobeData = data
-        })
-        .catch((error) => {
-          console.error('Failed to get ffprobe data', error)
-          this.$toast.error('FFProbe failed')
-        })
-        .finally(() => {
-          this.probingFile = false
-        })
-    },
-    async copyFfprobeData() {
-      this.copiedToClipboard = await this.$copyToClipboard(this.prettyFfprobeData)
    }
  },
+  methods: {},
  mounted() {}
 }
 </script>
--- a/client/components/modals/Dialog.vue
+++ b/client/components/modals/Dialog.vue
@@ -48,7 +48,7 @@ export default {
  },
  methods: {
    clickedOption(action) {
-      this.$emit('action', { action })
+      this.$emit('action', action)
    }
  },
  mounted() {}
--- a/client/components/modals/ListeningSessionModal.vue
+++ b/client/components/modals/ListeningSessionModal.vue
@@ -2,7 +2,7 @@
  <modals-modal v-model="show" name="listening-session-modal" :processing="processing" :width="700" :height="'unset'">
    <template #outer>
      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-lg md:text-2xl text-white truncate">{{ $strings.HeaderSession }} {{ _session.id }}</p>
+        <p class="text-3xl text-white truncate">{{ $strings.HeaderSession }} {{ _session.id }}</p>
      </div>
    </template>
    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
@@ -50,19 +50,19 @@
          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelItem }}</p>
          <div v-if="_session.libraryId" class="flex items-center -mx-1 mb-1">
            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLibrary }} Id</div>
-            <div class="px-1 text-xs">
+            <div class="px-1">
              {{ _session.libraryId }}
            </div>
          </div>
          <div class="flex items-center -mx-1 mb-1">
            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLibraryItem }} Id</div>
-            <div class="px-1 text-xs">
+            <div class="px-1">
              {{ _session.libraryItemId }}
            </div>
          </div>
          <div v-if="_session.episodeId" class="flex items-center -mx-1 mb-1">
            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelEpisode }} Id</div>
-            <div class="px-1 text-xs">
+            <div class="px-1">
              {{ _session.episodeId }}
            </div>
          </div>
@@ -81,7 +81,7 @@
        </div>
        <div class="w-full md:w-1/3">
          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
-          <p class="mb-1 text-xs">{{ _session.userId }}</p>
+          <p class="mb-1">{{ _session.userId }}</p>

          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</p>
          <p class="mb-1">{{ playMethodName }}</p>
--- a/client/components/modals/Modal.vue
+++ b/client/components/modals/Modal.vue
@@ -2,11 +2,11 @@
  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-opacity-${bgOpacity}`">
    <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />

-    <button class="absolute top-4 right-4 landscape:top-4 landscape:right-4 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 inline-flex text-gray-200 hover:text-white" aria-label="Close modal" @click="clickClose">
+    <div class="absolute top-3 right-3 landscape:top-2 landscape:right-2 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 h-8 w-8 landscape:h-8 landscape:w-8 md:portrait:h-12 md:portrait:w-12 lg:w-12 lg:h-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="clickClose">
      <span class="material-icons text-2xl landscape:text-2xl md:portrait:text-4xl lg:text-4xl">close</span>
-    </button>
+    </div>
    <slot name="outer" />
-    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" aria-modal="true" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
+    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
      <slot />
      <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center">
        <ui-loading-indicator />
--- a/client/components/modals/RawCoverPreviewModal.vue
+++ b/client/components/modals/RawCoverPreviewModal.vue
@@ -1,33 +0,0 @@
-<template>
-  <modals-modal v-model="show" name="cover" :width="'90%'" :height="'90%'" :contentMarginTop="0">
-    <div class="w-full h-full" @click="show = false">
-      <img loading="lazy" :src="rawCoverUrl" class="w-full h-full z-10 object-scale-down" />
-    </div>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  data() {
-    return {}
-  },
-  computed: {
-    show: {
-      get() {
-        return this.$store.state.globals.showRawCoverPreviewModal
-      },
-      set(val) {
-        this.$store.commit('globals/setShowRawCoverPreviewModal', val)
-      }
-    },
-    selectedLibraryItemId() {
-      return this.$store.state.globals.selectedLibraryItemId
-    },
-    rawCoverUrl() {
-      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.selectedLibraryItemId, null, true)
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/modals/SleepTimerModal.vue
+++ b/client/components/modals/SleepTimerModal.vue
@@ -15,7 +15,7 @@
        </template>
        <form class="flex items-center justify-center px-6 py-3" @submit.prevent="submitCustomTime">
          <ui-text-input v-model="customTime" type="number" step="any" min="0.1" placeholder="Time in minutes" class="w-48" />
-          <ui-btn color="success" type="submit" :padding-x="0" class="h-9 w-12 flex items-center justify-center ml-1">Set</ui-btn>
+          <ui-btn color="success" type="submit" padding-x="0" class="h-9 w-12 flex items-center justify-center ml-1">Set</ui-btn>
        </form>
      </div>
      <div v-else class="w-full p-4">
--- a/client/components/modals/authors/EditModal.vue
+++ b/client/components/modals/authors/EditModal.vue
@@ -5,23 +5,18 @@
        <p class="text-3xl text-white truncate">{{ title }}</p>
      </div>
    </template>
-    <div v-if="author" class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
-      <div class="flex">
-        <div class="w-40 p-2">
-          <div class="w-full h-45 relative">
-            <covers-author-image :author="author" />
-            <div v-if="userCanDelete && !processing && author.imagePath" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
-              <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
+    <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <form v-if="author" @submit.prevent="submitForm">
+        <div class="flex">
+          <div class="w-40 p-2">
+            <div class="w-full h-45 relative">
+              <covers-author-image :author="author" />
+              <div v-show="!processing && author.imagePath" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
+                <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
+              </div>
            </div>
          </div>
-        </div>
-        <div class="flex-grow">
-          <form @submit.prevent="submitUploadCover" class="flex flex-grow mb-2 p-2">
-            <ui-text-input v-model="imageUrl" :placeholder="$strings.LabelImageURLFromTheWeb" class="h-9 w-full" />
-            <ui-btn color="success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
-          </form>
-
-          <form v-if="author" @submit.prevent="submitForm">
+          <div class="flex-grow">
            <div class="flex">
              <div class="w-3/4 p-2">
                <ui-text-input-with-label v-model="authorCopy.name" :disabled="processing" :label="$strings.LabelName" />
@@ -30,23 +25,21 @@
                <ui-text-input-with-label v-model="authorCopy.asin" :disabled="processing" label="ASIN" />
              </div>
            </div>
-            <!-- <div class="p-2">
+            <div class="p-2">
              <ui-text-input-with-label v-model="authorCopy.imagePath" :disabled="processing" :label="$strings.LabelPhotoPathURL" />
-            </div> -->
+            </div>
            <div class="p-2">
              <ui-textarea-with-label v-model="authorCopy.description" :disabled="processing" :label="$strings.LabelDescription" :rows="8" />
            </div>

            <div class="flex pt-2 px-2">
-              <ui-btn v-if="userCanDelete" small color="error" type="button" @click.stop="removeClick">{{ $strings.ButtonRemove }}</ui-btn>
+              <ui-btn type="button" @click="searchAuthor">{{ $strings.ButtonQuickMatch }}</ui-btn>
              <div class="flex-grow" />
-              <ui-btn type="button" class="mx-2" @click="searchAuthor">{{ $strings.ButtonQuickMatch }}</ui-btn>
-
              <ui-btn type="submit">{{ $strings.ButtonSave }}</ui-btn>
            </div>
-          </form>
+          </div>
        </div>
-      </div>
+      </form>
    </div>
  </modals-modal>
 </template>
@@ -58,9 +51,9 @@ export default {
      authorCopy: {
        name: '',
        asin: '',
-        description: ''
+        description: '',
+        imagePath: ''
      },
-      imageUrl: '',
      processing: false
    }
  },
@@ -98,45 +91,17 @@ export default {
    },
    libraryProvider() {
      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
-    },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
    }
  },
  methods: {
    init() {
-      this.imageUrl = ''
      this.authorCopy.name = this.author.name
      this.authorCopy.asin = this.author.asin
      this.authorCopy.description = this.author.description
-    },
-    removeClick() {
-      const payload = {
-        message: this.$getString('MessageConfirmRemoveAuthor', [this.author.name]),
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.processing = true
-            this.$axios
-              .$delete(`/api/authors/${this.authorId}`)
-              .then(() => {
-                this.$toast.success('Author removed')
-                this.show = false
-              })
-              .catch((error) => {
-                console.error('Failed to remove author', error)
-                this.$toast.error('Failed to remove author')
-              })
-              .finally(() => {
-                this.processing = false
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
+      this.authorCopy.imagePath = this.author.imagePath
    },
    async submitForm() {
-      var keysToCheck = ['name', 'asin', 'description']
+      var keysToCheck = ['name', 'asin', 'description', 'imagePath']
      var updatePayload = {}
      keysToCheck.forEach((key) => {
        if (this.authorCopy[key] !== this.author[key]) {
@@ -165,46 +130,21 @@ export default {
      }
      this.processing = false
    },
-    removeCover() {
-      this.processing = true
-      this.$axios
-        .$delete(`/api/authors/${this.authorId}/image`)
-        .then((data) => {
-          this.$toast.success(this.$strings.ToastAuthorImageRemoveSuccess)
-          this.$store.commit('globals/showEditAuthorModal', data.author)
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          this.$toast.error(this.$strings.ToastAuthorImageRemoveFailed)
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    submitUploadCover() {
-      if (!this.imageUrl?.startsWith('http:') && !this.imageUrl?.startsWith('https:')) {
-        this.$toast.error('Invalid image url')
-        return
+    async removeCover() {
+      var updatePayload = {
+        imagePath: null
      }
-
      this.processing = true
-      const updatePayload = {
-        url: this.imageUrl
+      var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
+        console.error('Failed', error)
+        this.$toast.error(this.$strings.ToastAuthorImageRemoveFailed)
+        return null
+      })
+      if (result && result.updated) {
+        this.$toast.success(this.$strings.ToastAuthorImageRemoveSuccess)
+        this.$store.commit('globals/showEditAuthorModal', result.author)
      }
-      this.$axios
-        .$post(`/api/authors/${this.authorId}/image`, updatePayload)
-        .then((data) => {
-          this.imageUrl = ''
-          this.$toast.success('Author image updated')
-          this.$store.commit('globals/showEditAuthorModal', data.author)
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          this.$toast.error(error.response.data || 'Failed to remove author image')
-        })
-        .finally(() => {
-          this.processing = false
-        })
+      this.processing = false
    },
    async searchAuthor() {
      if (!this.authorCopy.name && !this.authorCopy.asin) {
--- a/client/components/modals/collections/EditModal.vue
+++ b/client/components/modals/collections/EditModal.vue
@@ -8,9 +8,10 @@
    <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
      <template v-if="!showImageUploader">
        <form @submit.prevent="submitForm">
-          <div class="flex flex-wrap">
-            <div class="w-full flex justify-center mb-2 md:w-auto md:mb-0 md:block">
+          <div class="flex">
+            <div>
              <covers-collection-cover :book-items="books" :width="200" :height="100 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+              <!-- <ui-btn type="button" @click="showImageUploader = true">Upload</ui-btn> -->
            </div>
            <div class="flex-grow px-4">
              <ui-text-input-with-label v-model="newCollectionName" :label="$strings.LabelName" class="mb-2" />
@@ -40,6 +41,7 @@
          <ui-btn color="success">Upload</ui-btn>
        </div>
      </template>
+      <!-- <modals-upload-image-modal v-model="showUploadImageModal" entity="collection" :entity-id="collection.id" /> -->
    </div>
  </modals-modal>
 </template>
--- a/client/components/modals/emails/EReaderDeviceModal.vue
+++ b/client/components/modals/emails/EReaderDeviceModal.vue
@@ -1,243 +0,0 @@
-<template>
-  <modals-modal ref="modal" v-model="show" name="ereader-device-edit" :width="800" :height="'unset'" :processing="processing">
-    <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">{{ title }}</p>
-      </div>
-    </template>
-    <form @submit.prevent="submitForm">
-      <div class="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
-        <div class="w-full px-3 py-5 md:p-12">
-          <div class="flex items-center -mx-1 mb-4">
-            <div class="w-full md:w-1/2 px-1">
-              <ui-text-input-with-label ref="ereaderNameInput" v-model="newDevice.name" :disabled="processing" :label="$strings.LabelName" />
-            </div>
-            <div class="w-full md:w-1/2 px-1">
-              <ui-text-input-with-label ref="ereaderEmailInput" v-model="newDevice.email" :disabled="processing" :label="$strings.LabelEmail" />
-            </div>
-          </div>
-          <div class="flex items-center -mx-1 mb-4">
-            <div class="w-full md:w-1/2 px-1">
-              <ui-dropdown v-model="newDevice.availabilityOption" :label="$strings.LabelDeviceIsAvailableTo" :items="userAvailabilityOptions" @input="availabilityOptionChanged" />
-            </div>
-            <div class="w-full md:w-1/2 px-1">
-              <ui-multi-select-dropdown v-if="newDevice.availabilityOption === 'specificUsers'" v-model="newDevice.users" :label="$strings.HeaderUsers" :items="userOptions" />
-            </div>
-          </div>
-
-          <div class="flex items-center pt-4">
-            <div class="flex-grow" />
-            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean,
-    existingDevices: {
-      type: Array,
-      default: () => []
-    },
-    ereaderDevice: {
-      type: Object,
-      default: () => null
-    }
-  },
-  data() {
-    return {
-      processing: false,
-      newDevice: {
-        name: '',
-        email: '',
-        availabilityOption: 'adminAndUp',
-        users: []
-      },
-      users: []
-    }
-  },
-  watch: {
-    show: {
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    title() {
-      return !this.ereaderDevice ? 'Create Device' : 'Update Device'
-    },
-    userAvailabilityOptions() {
-      return [
-        {
-          text: this.$strings.LabelAdminUsersOnly,
-          value: 'adminOrUp'
-        },
-        {
-          text: this.$strings.LabelAllUsersExcludingGuests,
-          value: 'userOrUp'
-        },
-        {
-          text: this.$strings.LabelAllUsersIncludingGuests,
-          value: 'guestOrUp'
-        },
-        {
-          text: this.$strings.LabelSelectUsers,
-          value: 'specificUsers'
-        }
-      ]
-    },
-    userOptions() {
-      return this.users.map((u) => ({ text: u.username, value: u.id }))
-    }
-  },
-  methods: {
-    availabilityOptionChanged(option) {
-      if (option === 'specificUsers' && !this.users.length) {
-        this.loadUsers()
-      }
-    },
-    async loadUsers() {
-      this.processing = true
-      this.users = await this.$axios
-        .$get('/api/users')
-        .then((res) => {
-          return res.users.sort((a, b) => {
-            return a.createdAt - b.createdAt
-          })
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          return []
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    submitForm() {
-      this.$refs.ereaderNameInput.blur()
-      this.$refs.ereaderEmailInput.blur()
-
-      if (!this.newDevice.name?.trim() || !this.newDevice.email?.trim()) {
-        this.$toast.error('Name and email required')
-        return
-      }
-
-      if (this.newDevice.availabilityOption === 'specificUsers' && !this.newDevice.users.length) {
-        this.$toast.error('Must select at least one user')
-        return
-      }
-      if (this.newDevice.availabilityOption !== 'specificUsers') {
-        this.newDevice.users = []
-      }
-
-      this.newDevice.name = this.newDevice.name.trim()
-      this.newDevice.email = this.newDevice.email.trim()
-
-      if (!this.ereaderDevice) {
-        if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('Ereader device with that name already exists')
-          return
-        }
-
-        this.submitCreate()
-      } else {
-        if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('Ereader device with that name already exists')
-          return
-        }
-
-        this.submitUpdate()
-      }
-    },
-    submitUpdate() {
-      this.processing = true
-
-      const existingDevicesWithoutThisOne = this.existingDevices.filter((d) => d.name !== this.ereaderDevice.name)
-
-      const payload = {
-        ereaderDevices: [
-          ...existingDevicesWithoutThisOne,
-          {
-            ...this.newDevice
-          }
-        ]
-      }
-
-      this.$axios
-        .$post(`/api/emails/ereader-devices`, payload)
-        .then((data) => {
-          this.$emit('update', data.ereaderDevices)
-          this.$toast.success('Device updated')
-          this.show = false
-        })
-        .catch((error) => {
-          console.error('Failed to update device', error)
-          this.$toast.error('Failed to update device')
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    submitCreate() {
-      this.processing = true
-
-      const payload = {
-        ereaderDevices: [
-          ...this.existingDevices,
-          {
-            ...this.newDevice
-          }
-        ]
-      }
-
-      this.$axios
-        .$post('/api/emails/ereader-devices', payload)
-        .then((data) => {
-          this.$emit('update', data.ereaderDevices || [])
-          this.$toast.success('Device added')
-          this.show = false
-        })
-        .catch((error) => {
-          console.error('Failed to add device', error)
-          this.$toast.error('Failed to add device')
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    init() {
-      if (this.ereaderDevice) {
-        this.newDevice.name = this.ereaderDevice.name
-        this.newDevice.email = this.ereaderDevice.email
-        this.newDevice.availabilityOption = this.ereaderDevice.availabilityOption || 'adminOrUp'
-        this.newDevice.users = this.ereaderDevice.users || []
-
-        if (this.newDevice.availabilityOption === 'specificUsers' && !this.users.length) {
-          this.loadUsers()
-        }
-      } else {
-        this.newDevice.name = ''
-        this.newDevice.email = ''
-        this.newDevice.availabilityOption = 'adminOrUp'
-        this.newDevice.users = []
-      }
-    }
-  },
-  mounted() {}
-}
-</script>
--- a/client/components/modals/item/EditModal.vue
+++ b/client/components/modals/item/EditModal.vue
@@ -74,9 +74,6 @@ export default {
        this.$store.commit('setEditModalTab', val)
      }
    },
-    height() {
-      return Math.min(this.availableHeight, 650)
-    },
    tabs() {
      return [
        {
@@ -127,6 +124,9 @@ export default {
        }
      ]
    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
    userCanUpdate() {
      return this.$store.getters['user/getUserCanUpdate']
    },
@@ -136,26 +136,14 @@ export default {
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
    },
-    selectedLibraryItem() {
-      return this.$store.state.selectedLibraryItem || {}
-    },
-    selectedLibraryItemId() {
-      return this.selectedLibraryItem.id
-    },
-    media() {
-      return this.libraryItem?.media || {}
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
    availableTabs() {
      if (!this.userCanUpdate && !this.userCanDownload) return []
      return this.tabs.filter((tab) => {
+        if (tab.experimental && !this.showExperimentalFeatures) return false
        if (tab.mediaType && this.mediaType !== tab.mediaType) return false
        if (tab.admin && !this.userIsAdminOrUp) return false

        if (tab.id === 'tools' && this.isMissing) return false
-        if (tab.id === 'chapters' && this.isEBookOnly) return false

        if ((tab.id === 'tools' || tab.id === 'files') && this.userCanDownload) return true
        if (tab.id !== 'tools' && tab.id !== 'files' && this.userCanUpdate) return true
@@ -163,6 +151,9 @@ export default {
        return false
      })
    },
+    height() {
+      return Math.min(this.availableHeight, 650)
+    },
    tabName() {
      var _tab = this.tabs.find((t) => t.id === this.selectedTab)
      return _tab ? _tab.component : ''
@@ -170,11 +161,20 @@ export default {
    isMissing() {
      return this.selectedLibraryItem.isMissing
    },
-    isEBookOnly() {
-      return this.media.ebookFile && !this.media.tracks?.length
+    selectedLibraryItem() {
+      return this.$store.state.selectedLibraryItem || {}
+    },
+    selectedLibraryItemId() {
+      return this.selectedLibraryItem.id
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
    },
    mediaType() {
-      return this.libraryItem?.mediaType || null
+      return this.libraryItem ? this.libraryItem.mediaType : null
    },
    title() {
      return this.mediaMetadata.title || 'No Title'
--- a/client/components/modals/item/tabs/Cover.vue
+++ b/client/components/modals/item/tabs/Cover.vue
@@ -1,13 +1,13 @@
 <template>
  <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
-    <div class="flex flex-wrap mb-4">
+    <div class="flex flex-wrap">
      <div class="relative">
-        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, libraryItemUpdatedAt, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />

        <!-- book cover overlay -->
        <div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
          <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
-          <div v-if="userCanDelete" class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
+          <div class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
            <ui-tooltip direction="top" :text="$strings.LabelRemoveCover">
              <span class="material-icons text-2xl">delete</span>
            </ui-tooltip>
@@ -16,16 +16,15 @@
      </div>
      <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-2 md:mt-0">
        <div class="flex items-center">
-          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
-            <ui-file-input ref="fileInput" @change="fileUploadSelected">
-              <span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span>
-              <span class="material-icons text-2xl inline-block md:!hidden">upload</span>
-            </ui-file-input>
+          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 pt-4 md:min-w-32">
+            <ui-file-input ref="fileInput" @change="fileUploadSelected"
+              ><span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span
+              ><span class="material-icons text-2xl inline-block md:!hidden">upload</span></ui-file-input
+            >
          </div>
-
          <form @submit.prevent="submitForm" class="flex flex-grow">
-            <ui-text-input v-model="imageUrl" :placeholder="$strings.LabelImageURLFromTheWeb" class="h-9 w-full" />
-            <ui-btn color="success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
+            <ui-text-input-with-label v-model="imageUrl" :label="$strings.LabelCoverImageURL" />
+            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-2 sm:ml-3 w-24">{{ $strings.ButtonSave }}</ui-btn>
          </form>
        </div>

@@ -37,10 +36,10 @@
          </div>

          <div v-if="showLocalCovers" class="flex items-center justify-center pb-2">
-            <template v-for="localCoverFile in localCovers">
-              <div :key="localCoverFile.ino" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="localCoverFile.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(localCoverFile)">
+            <template v-for="cover in localCovers">
+              <div :key="cover.path" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(cover)">
                <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">
-                  <covers-preview-cover :src="localCoverFile.localPath" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+                  <covers-preview-cover :src="`${cover.localPath}?token=${userToken}`" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
                </div>
              </div>
            </template>
@@ -65,7 +64,7 @@
    <div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-80 overflow-y-scroll mt-2 max-w-full">
      <p v-if="!coversFound.length">{{ $strings.MessageNoCoversFound }}</p>
      <template v-for="cover in coversFound">
-        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === coverPath ? 'border-yellow-300' : ''" @click="updateCover(cover)">
+        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
          <covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
        </div>
      </template>
@@ -129,7 +128,7 @@ export default {
    },
    providers() {
      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
-      return [{ text: 'All', value: 'all' }, ...this.$store.state.scanners.providers, ...this.$store.state.scanners.coverOnlyProviders]
+      return [...this.$store.state.scanners.providers, ...this.$store.state.scanners.coverOnlyProviders]
    },
    searchTitleLabel() {
      if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
@@ -140,19 +139,16 @@ export default {
      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
    libraryItemId() {
-      return this.libraryItem?.id || null
-    },
-    libraryItemUpdatedAt() {
-      return this.libraryItem?.updatedAt || null
+      return this.libraryItem ? this.libraryItem.id : null
    },
    mediaType() {
-      return this.libraryItem?.mediaType || null
+      return this.libraryItem ? this.libraryItem.mediaType : null
    },
    isPodcast() {
      return this.mediaType == 'podcast'
    },
    media() {
-      return this.libraryItem?.media || {}
+      return this.libraryItem ? this.libraryItem.media || {} : {}
    },
    coverPath() {
      return this.media.coverPath
@@ -161,14 +157,11 @@ export default {
      return this.media.metadata || {}
    },
    libraryFiles() {
-      return this.libraryItem?.libraryFiles || []
+      return this.libraryItem ? this.libraryItem.libraryFiles || [] : []
    },
    userCanUpload() {
      return this.$store.getters['user/getUserCanUpload']
    },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
-    },
    userToken() {
      return this.$store.getters['user/getToken']
    },
@@ -176,8 +169,8 @@ export default {
      return this.libraryFiles
        .filter((f) => f.fileType === 'image')
        .map((file) => {
-          const _file = { ...file }
-          _file.localPath = `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${file.ino}?token=${this.userToken}`
+          var _file = { ...file }
+          _file.localPath = `${process.env.serverUrl}/s/item/${this.libraryItemId}/${this.$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}`
          return _file
        })
    }
@@ -226,63 +219,82 @@ export default {
        this.coversFound = []
        this.hasSearched = false
      }
-      this.imageUrl = ''
+      this.imageUrl = this.media.coverPath || ''
      this.searchTitle = this.mediaMetadata.title || ''
      this.searchAuthor = this.mediaMetadata.authorName || ''
      if (this.isPodcast) this.provider = 'itunes'
-      else this.provider = localStorage.getItem('book-cover-provider') || localStorage.getItem('book-provider') || 'google'
+      else this.provider = localStorage.getItem('book-provider') || 'google'
    },
    removeCover() {
-      if (!this.coverPath) {
+      if (!this.media.coverPath) {
+        this.imageUrl = ''
        return
      }
-      this.isProcessing = true
-      this.$axios
-        .$delete(`/api/items/${this.libraryItemId}/cover`)
-        .then(() => {})
-        .catch((error) => {
-          console.error('Failed to remove cover', error)
-          if (error.response?.data) {
-            this.$toast.error(error.response.data)
-          }
-        })
-        .finally(() => {
-          this.isProcessing = false
-        })
+      this.updateCover('')
    },
    submitForm() {
      this.updateCover(this.imageUrl)
    },
    async updateCover(cover) {
-      if (!cover.startsWith('http:') && !cover.startsWith('https:')) {
-        this.$toast.error('Invalid URL')
+      if (cover === this.coverPath) {
+        console.warn('Cover has not changed..', cover)
        return
      }

      this.isProcessing = true
-      this.$axios
-        .$post(`/api/items/${this.libraryItemId}/cover`, { url: cover })
-        .then(() => {
-          this.imageUrl = ''
-          this.$toast.success('Update Successful')
+      var success = false
+
+      if (!cover) {
+        // Remove cover
+        success = await this.$axios
+          .$delete(`/api/items/${this.libraryItemId}/cover`)
+          .then(() => true)
+          .catch((error) => {
+            console.error('Failed to remove cover', error)
+            if (error.response && error.response.data) {
+              this.$toast.error(error.response.data)
+            }
+            return false
+          })
+      } else if (cover.startsWith('http:') || cover.startsWith('https:')) {
+        // Download cover from url and use
+        success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, { url: cover }).catch((error) => {
+          console.error('Failed to download cover from url', error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          }
+          return false
        })
-        .catch((error) => {
-          console.error('Failed to update cover', error)
-          this.$toast.error(error.response?.data || 'Failed to update cover')
-        })
-        .finally(() => {
-          this.isProcessing = false
+      } else {
+        // Update local cover url
+        const updatePayload = {
+          cover
+        }
+        success = await this.$axios.$patch(`/api/items/${this.libraryItemId}/cover`, updatePayload).catch((error) => {
+          console.error('Failed to update', error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          }
+          return false
        })
+      }
+      if (success) {
+        this.$toast.success('Update Successful')
+        // this.$emit('close')
+      } else {
+        this.imageUrl = this.media.coverPath || ''
+      }
+      this.isProcessing = false
    },
    getSearchQuery() {
      var searchQuery = `provider=${this.provider}&title=${this.searchTitle}`
-      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor || ''}`
+      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
      if (this.isPodcast) searchQuery += '&podcast=1'
      return searchQuery
    },
    persistProvider() {
      try {
-        localStorage.setItem('book-cover-provider', this.provider)
+        localStorage.setItem('book-provider', this.provider)
      } catch (error) {
        console.error('PersistProvider', error)
      }
@@ -305,19 +317,7 @@ export default {
      this.hasSearched = true
    },
    setCover(coverFile) {
-      this.isProcessing = true
-      this.$axios
-        .$patch(`/api/items/${this.libraryItemId}/cover`, { cover: coverFile.metadata.path })
-        .then(() => {
-          this.$toast.success('Update Successful')
-        })
-        .catch((error) => {
-          console.error('Failed to set local cover', error)
-          this.$toast.error(error.response?.data || 'Failed to set cover')
-        })
-        .finally(() => {
-          this.isProcessing = false
-        })
+      this.updateCover(coverFile.metadata.path)
    }
  }
 }
--- a/client/components/modals/item/tabs/Details.vue
+++ b/client/components/modals/item/tabs/Details.vue
@@ -11,8 +11,8 @@
          <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">{{ $strings.ButtonQuickMatch }}</ui-btn>
        </ui-tooltip>

-        <ui-tooltip :disabled="isLibraryScanning" text="Rescan library item including metadata" direction="bottom" class="mr-2 md:mr-4">
-          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="isLibraryScanning" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
+        <ui-tooltip :disabled="!!libraryScan" text="Rescan library item including metadata" direction="bottom" class="mr-2 md:mr-4">
+          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
        </ui-tooltip>

        <div class="flex-grow" />
@@ -80,9 +80,9 @@ export default {
    libraryProvider() {
      return this.$store.getters['libraries/getLibraryProvider'](this.libraryId) || 'google'
    },
-    isLibraryScanning() {
+    libraryScan() {
      if (!this.libraryId) return null
-      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.libraryId)
+      return this.$store.getters['scanners/getLibraryScan'](this.libraryId)
    }
  },
  methods: {
--- a/client/components/modals/item/tabs/Episodes.vue
+++ b/client/components/modals/item/tabs/Episodes.vue
@@ -20,14 +20,18 @@
      <div v-if="!episodes.length" class="flex my-4 text-center justify-center text-xl">{{ $strings.MessageNoEpisodes }}</div>
      <table v-else class="text-sm tracksTable">
        <tr>
-          <th class="text-center w-20 min-w-20">{{ $strings.LabelEpisode }}</th>
-          <th class="text-left">{{ $strings.LabelEpisodeTitle }}</th>
-          <th class="text-center w-28">{{ $strings.LabelEpisodeDuration }}</th>
-          <th class="text-center w-28">{{ $strings.LabelEpisodeSize }}</th>
+          <th class="text-left">Sort #</th>
+          <th class="text-left whitespace-nowrap">{{ $strings.LabelEpisode }}</th>
+          <th class="text-left">{{ $strings.EpisodeTitle }}</th>
+          <th class="text-center w-28">{{ $strings.EpisodeDuration }}</th>
+          <th class="text-center w-28">{{ $strings.EpisodeSize }}</th>
        </tr>
        <tr v-for="episode in episodes" :key="episode.id">
-          <td class="text-center w-20 min-w-20">
-            <p>{{ episode.episode }}</p>
+          <td class="text-left">
+            <p class="px-4">{{ episode.index }}</p>
+          </td>
+          <td class="text-left">
+            <p class="px-4">{{ episode.episode }}</p>
          </td>
          <td>
            {{ episode.title }}
--- a/client/components/modals/item/tabs/Files.vue
+++ b/client/components/modals/item/tabs/Files.vue
@@ -14,7 +14,8 @@ export default {
  },
  data() {
    return {
-      tracks: []
+      tracks: [],
+      showFullPath: false
    }
  },
  watch: {
--- a/client/components/modals/item/tabs/Match.vue
+++ b/client/components/modals/item/tabs/Match.vue
@@ -22,7 +22,7 @@
    </div>
    <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper mt-4">
      <template v-for="(res, index) in searchResults">
-        <cards-book-match-card :key="index" :book="res" :current-book-duration="currentBookDuration" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
+        <cards-book-match-card :key="index" :book="res" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
      </template>
    </div>
    <div v-if="selectedMatchOrig" class="absolute top-0 left-0 w-full bg-bg h-full px-2 py-6 md:p-8 max-h-full overflow-y-auto overflow-x-hidden">
@@ -290,17 +290,13 @@ export default {
      return this.$strings.LabelSearchTitle
    },
    media() {
-      return this.libraryItem?.media || {}
+      return this.libraryItem ? this.libraryItem.media || {} : {}
    },
    mediaMetadata() {
      return this.media.metadata || {}
    },
-    currentBookDuration() {
-      if (this.isPodcast) return 0
-      return this.media.duration || 0
-    },
    mediaType() {
-      return this.libraryItem?.mediaType || null
+      return this.libraryItem ? this.libraryItem.mediaType : null
    },
    isPodcast() {
      return this.mediaType == 'podcast'
@@ -309,7 +305,7 @@ export default {
      const filterData = this.$store.state.libraries.filterData || {}
      const currentGenres = filterData.genres || []
      const selectedMatchGenres = this.selectedMatch.genres || []
-      return [...new Set([...currentGenres, ...selectedMatchGenres])]
+      return [...new Set([...currentGenres ,...selectedMatchGenres])]
    }
  },
  methods: {
@@ -329,10 +325,9 @@ export default {
      }
    },
    getSearchQuery() {
-      if (this.isPodcast) return `term=${encodeURIComponent(this.searchTitle)}`
-      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${encodeURIComponent(this.searchTitle)}`
-      if (this.searchAuthor) searchQuery += `&author=${encodeURIComponent(this.searchAuthor)}`
-      if (this.libraryItemId) searchQuery += `&id=${this.libraryItemId}`
+      if (this.isPodcast) return `term=${this.searchTitle}`
+      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${this.searchTitle}`
+      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
      return searchQuery
    },
    submitSearch() {
@@ -585,7 +580,6 @@ export default {
 .matchListWrapper {
  height: calc(100% - 124px);
 }
-
@media (min-width: 768px) {
  .matchListWrapper {
    height: calc(100% - 80px);
--- a/client/components/modals/item/tabs/Tools.vue
+++ b/client/components/modals/item/tabs/Tools.vue
@@ -20,7 +20,7 @@
    </div>

    <!-- Split to mp3 -->
-    <!-- <div v-if="showMp3Split" class="w-full border border-black-200 p-4 my-8">
+    <div v-if="showMp3Split && showExperimentalFeatures" class="w-full border border-black-200 p-4 my-8">
      <div class="flex items-center">
        <div>
          <p class="text-lg">{{ $strings.LabelToolsSplitM4b }}</p>
@@ -31,7 +31,7 @@
          <ui-btn :disabled="true">{{ $strings.MessageNotYetImplemented }}</ui-btn>
        </div>
      </div>
-    </div> -->
+    </div>

    <!-- Embed Metadata -->
    <div v-if="mediaTracks.length" class="w-full border border-black-200 p-4 my-8">
@@ -79,6 +79,9 @@ export default {
    return {}
  },
  computed: {
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
    libraryItemId() {
      return this.libraryItem?.id || null
    },
--- a/client/components/modals/libraries/EditLibrary.vue
+++ b/client/components/modals/libraries/EditLibrary.vue
@@ -20,7 +20,7 @@
        <p class="px-1 text-sm font-semibold">{{ $strings.LabelFolders }}</p>
        <div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2">
          <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
-          <ui-editable-text ref="folderInput" v-model="folder.fullPath" :readonly="!!folder.id" type="text" class="w-full" @blur="existingFolderInputBlurred(folder)" />
+          <ui-editable-text ref="folderInput" v-model="folder.fullPath" readonly type="text" class="w-full" />
          <span v-show="folders.length > 1" class="material-icons text-2xl ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
        </div>
        <div class="flex py-1 px-2 items-center w-full">
@@ -67,6 +67,10 @@ export default {
          value: 'podcast',
          text: this.$strings.LabelPodcasts
        }
+        // {
+        //   value: 'music',
+        //   text: 'Music'
+        // }
      ]
    },
    folderPaths() {
@@ -106,11 +110,6 @@ export default {
    formUpdated() {
      this.$emit('update', this.getLibraryData())
    },
-    existingFolderInputBlurred(folder) {
-      if (!folder.fullPath) {
-        this.removeFolder(folder)
-      }
-    },
    newFolderInputBlurred() {
      if (this.newFolderPath) {
        this.folders.push({ fullPath: this.newFolderPath })
@@ -150,7 +149,6 @@ export default {
      this.folders = this.library ? this.library.folders.map((p) => ({ ...p })) : []
      this.icon = this.library ? this.library.icon : 'default'
      this.mediaType = this.library ? this.library.mediaType : 'book'
-
      this.showDirectoryPicker = false
    }
  },
--- a/client/components/modals/libraries/EditModal.vue
+++ b/client/components/modals/libraries/EditModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <modals-modal v-model="show" name="edit-library" :width="800" :height="'unset'" :processing="processing">
+  <modals-modal v-model="show" name="edit-library" :width="700" :height="'unset'" :processing="processing">
    <template #outer>
      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
        <p class="text-xl md:text-3xl text-white truncate">{{ title }}</p>
@@ -12,9 +12,9 @@
    </div>

    <div class="px-2 md:px-4 w-full text-sm pt-2 md:pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
-      <component v-if="libraryCopy && show" ref="tabComponent" :is="tabName" :is-new="!library" :library="libraryCopy" :library-id="libraryId" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
+      <component v-if="libraryCopy && show" ref="tabComponent" :is="tabName" :is-new="!library" :library="libraryCopy" :processing.sync="processing" @update="updateLibrary" @close="show = false" />

-      <div v-show="selectedTab !== 'tools'" class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white border-opacity-10">
+      <div class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white border-opacity-10">
        <div class="flex justify-end">
          <ui-btn @click="submit">{{ buttonText }}</ui-btn>
        </div>
@@ -54,12 +54,6 @@ export default {
    buttonText() {
      return this.library ? this.$strings.ButtonSave : this.$strings.ButtonCreate
    },
-    mediaType() {
-      return this.libraryCopy?.mediaType
-    },
-    libraryId() {
-      return this.library?.id
-    },
    tabs() {
      return [
        {
@@ -72,26 +66,12 @@ export default {
          title: this.$strings.HeaderSettings,
          component: 'modals-libraries-library-settings'
        },
-        {
-          id: 'scanner',
-          title: this.$strings.HeaderSettingsScanner,
-          component: 'modals-libraries-library-scanner-settings'
-        },
        {
          id: 'schedule',
          title: this.$strings.HeaderSchedule,
          component: 'modals-libraries-schedule-scan'
-        },
-        {
-          id: 'tools',
-          title: this.$strings.HeaderTools,
-          component: 'modals-libraries-library-tools'
        }
-      ].filter((tab) => {
-        // Do not show tools tab for new libraries
-        if (tab.id === 'tools' && !this.library) return false
-        return tab.id !== 'scanner' || this.mediaType === 'book'
-      })
+      ]
    },
    tabName() {
      var _tab = this.tabs.find((t) => t.id === this.selectedTab)
@@ -125,9 +105,7 @@ export default {
          disableWatcher: false,
          skipMatchingMediaWithAsin: false,
          skipMatchingMediaWithIsbn: false,
-          autoScanCronExpression: null,
-          hideSingleBookSeries: false,
-          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata']
+          autoScanCronExpression: null
        }
      }
    },
@@ -142,7 +120,7 @@ export default {
      for (const key in this.libraryCopy) {
        if (library[key] !== undefined) {
          if (key === 'folders') {
-            this.libraryCopy.folders = library.folders.map((f) => ({ ...f })).filter((f) => !!f.fullPath?.trim())
+            this.libraryCopy.folders = library.folders.map((f) => ({ ...f }))
          } else if (key === 'settings') {
            for (const settingKey in library.settings) {
              this.libraryCopy.settings[settingKey] = library.settings[settingKey]
--- a/client/components/modals/libraries/LibraryScannerSettings.vue
+++ b/client/components/modals/libraries/LibraryScannerSettings.vue
@@ -1,160 +0,0 @@
-<template>
-  <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
-    <div class="flex items-center justify-between mb-2">
-      <h2 class="text-base md:text-lg text-gray-200">{{ $strings.HeaderMetadataOrderOfPrecedence }}</h2>
-      <ui-btn small @click="resetToDefault">{{ $strings.ButtonResetToDefault }}</ui-btn>
-    </div>
-
-    <div class="flex items-center justify-between md:justify-start mb-4">
-      <p class="text-sm text-gray-300 pr-2">{{ $strings.LabelMetadataOrderOfPrecedenceDescription }}</p>
-      <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex">
-        <a href="https://www.audiobookshelf.org/guides/book-scanner" target="_blank" class="inline-flex">
-          <span class="material-icons text-xl w-5">help_outline</span>
-        </a>
-      </ui-tooltip>
-    </div>
-
-    <draggable v-model="metadataSourceMapped" v-bind="dragOptions" class="list-group" draggable=".item" handle=".drag-handle" tag="ul" @start="drag = true" @end="drag = false" @update="draggableUpdate">
-      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
-        <li v-for="(source, index) in metadataSourceMapped" :key="source.id" :class="source.include ? 'item' : 'opacity-50'" class="w-full px-2 flex items-center relative border border-white/10">
-          <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 mr-2 md:mr-4">reorder</span>
-          <div class="text-center py-1 w-8 min-w-8">
-            {{ source.include ? getSourceIndex(source.id) : '' }}
-          </div>
-          <div class="flex-grow inline-flex justify-between px-4 py-3">
-            {{ source.name }} <span v-if="source.include && (index === firstActiveSourceIndex || index === lastActiveSourceIndex)" class="px-2 italic font-semibold text-xs text-gray-400">{{ index === firstActiveSourceIndex ? $strings.LabelHighestPriority : $strings.LabelLowestPriority }}</span>
-          </div>
-          <div class="px-2 opacity-100">
-            <ui-toggle-switch v-model="source.include" :off-color="'error'" @input="includeToggled(source)" />
-          </div>
-        </li>
-      </transition-group>
-    </draggable>
-  </div>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-
-export default {
-  components: {
-    draggable
-  },
-  props: {
-    library: {
-      type: Object,
-      default: () => null
-    },
-    processing: Boolean
-  },
-  data() {
-    return {
-      drag: false,
-      dragOptions: {
-        animation: 200,
-        group: 'description',
-        ghostClass: 'ghost'
-      },
-      metadataSourceData: {
-        folderStructure: {
-          id: 'folderStructure',
-          name: 'Folder structure',
-          include: true
-        },
-        audioMetatags: {
-          id: 'audioMetatags',
-          name: 'Audio file meta tags',
-          include: true
-        },
-        nfoFile: {
-          id: 'nfoFile',
-          name: 'NFO file',
-          include: true
-        },
-        txtFiles: {
-          id: 'txtFiles',
-          name: 'desc.txt & reader.txt files',
-          include: true
-        },
-        opfFile: {
-          id: 'opfFile',
-          name: 'OPF file',
-          include: true
-        },
-        absMetadata: {
-          id: 'absMetadata',
-          name: 'Audiobookshelf metadata file',
-          include: true
-        }
-      },
-      metadataSourceMapped: []
-    }
-  },
-  computed: {
-    librarySettings() {
-      return this.library.settings || {}
-    },
-    mediaType() {
-      return this.library.mediaType
-    },
-    isBookLibrary() {
-      return this.mediaType === 'book'
-    },
-    firstActiveSourceIndex() {
-      return this.metadataSourceMapped.findIndex((source) => source.include)
-    },
-    lastActiveSourceIndex() {
-      return this.metadataSourceMapped.findLastIndex((source) => source.include)
-    }
-  },
-  methods: {
-    getSourceIndex(source) {
-      const activeSources = (this.librarySettings.metadataPrecedence || []).map((s) => s).reverse()
-      return activeSources.findIndex((s) => s === source) + 1
-    },
-    resetToDefault() {
-      this.metadataSourceMapped = []
-      for (const key in this.metadataSourceData) {
-        this.metadataSourceMapped.push({ ...this.metadataSourceData[key] })
-      }
-      this.metadataSourceMapped.reverse()
-
-      this.$emit('update', this.getLibraryData())
-    },
-    getLibraryData() {
-      const metadataSourceIds = this.metadataSourceMapped.map((source) => (source.include ? source.id : null)).filter((s) => s)
-      metadataSourceIds.reverse()
-      return {
-        settings: {
-          metadataPrecedence: metadataSourceIds
-        }
-      }
-    },
-    includeToggled(source) {
-      this.updated()
-    },
-    draggableUpdate() {
-      this.updated()
-    },
-    updated() {
-      this.$emit('update', this.getLibraryData())
-    },
-    init() {
-      const metadataPrecedence = this.librarySettings.metadataPrecedence || []
-      this.metadataSourceMapped = metadataPrecedence.map((source) => this.metadataSourceData[source]).filter((s) => s)
-
-      for (const sourceKey in this.metadataSourceData) {
-        if (!metadataPrecedence.includes(sourceKey)) {
-          const unusedSourceData = { ...this.metadataSourceData[sourceKey], include: false }
-          this.metadataSourceMapped.unshift(unusedSourceData)
-        }
-      }
-
-      this.metadataSourceMapped.reverse()
-    }
-  },
-  mounted() {
-    this.init()
-  }
-}
-</script>
--- a/client/components/modals/libraries/LibrarySettings.vue
+++ b/client/components/modals/libraries/LibrarySettings.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
-    <div class="flex items-center py-3">
+    <div class="flex items-center py-2">
      <ui-toggle-switch v-model="useSquareBookCovers" @input="formUpdated" />
      <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
        <p class="pl-4 text-base">
@@ -11,44 +11,24 @@
    </div>
    <div class="py-3">
      <div class="flex items-center">
-        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="enableWatcher" @input="formUpdated" />
+        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="disableWatcher" @input="formUpdated" />
        <ui-toggle-switch v-else disabled :value="false" />
-        <p class="pl-4 text-base">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsDisableWatcherForLibrary }}</p>
      </div>
      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
    </div>
-    <div v-if="isBookLibrary" class="flex items-center py-3">
-      <ui-toggle-switch v-model="audiobooksOnly" @input="formUpdated" />
-      <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
-        <p class="pl-4 text-base">
-          {{ $strings.LabelSettingsAudiobooksOnly }}
-          <span class="material-icons icon-text text-sm">info_outlined</span>
-        </p>
-      </ui-tooltip>
-    </div>
-    <div v-if="isBookLibrary" class="py-3">
+    <div v-if="mediaType == 'book'" class="py-3">
      <div class="flex items-center">
        <ui-toggle-switch v-model="skipMatchingMediaWithAsin" @input="formUpdated" />
        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
      </div>
    </div>
-    <div v-if="isBookLibrary" class="py-3">
+    <div v-if="mediaType == 'book'" class="py-3">
      <div class="flex items-center">
        <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" @input="formUpdated" />
        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
      </div>
    </div>
-    <div v-if="isBookLibrary" class="py-3">
-      <div class="flex items-center">
-        <ui-toggle-switch v-model="hideSingleBookSeries" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
-          <p class="pl-4 text-base">
-            {{ $strings.LabelSettingsHideSingleBookSeries }}
-            <span class="material-icons icon-text text-sm">info_outlined</span>
-          </p>
-        </ui-tooltip>
-      </div>
-    </div>
  </div>
 </template>

@@ -65,11 +45,9 @@ export default {
    return {
      provider: null,
      useSquareBookCovers: false,
-      enableWatcher: false,
+      disableWatcher: false,
      skipMatchingMediaWithAsin: false,
-      skipMatchingMediaWithIsbn: false,
-      audiobooksOnly: false,
-      hideSingleBookSeries: false
+      skipMatchingMediaWithIsbn: false
    }
  },
  computed: {
@@ -82,9 +60,6 @@ export default {
    mediaType() {
      return this.library.mediaType
    },
-    isBookLibrary() {
-      return this.mediaType === 'book'
-    },
    providers() {
      if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
      return this.$store.state.scanners.providers
@@ -95,11 +70,9 @@ export default {
      return {
        settings: {
          coverAspectRatio: this.useSquareBookCovers ? this.$constants.BookCoverAspectRatio.SQUARE : this.$constants.BookCoverAspectRatio.STANDARD,
-          disableWatcher: !this.enableWatcher,
+          disableWatcher: !!this.disableWatcher,
          skipMatchingMediaWithAsin: !!this.skipMatchingMediaWithAsin,
-          skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn,
-          audiobooksOnly: !!this.audiobooksOnly,
-          hideSingleBookSeries: !!this.hideSingleBookSeries
+          skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn
        }
      }
    },
@@ -108,11 +81,9 @@ export default {
    },
    init() {
      this.useSquareBookCovers = this.librarySettings.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
-      this.enableWatcher = !this.librarySettings.disableWatcher
+      this.disableWatcher = !!this.librarySettings.disableWatcher
      this.skipMatchingMediaWithAsin = !!this.librarySettings.skipMatchingMediaWithAsin
      this.skipMatchingMediaWithIsbn = !!this.librarySettings.skipMatchingMediaWithIsbn
-      this.audiobooksOnly = !!this.librarySettings.audiobooksOnly
-      this.hideSingleBookSeries = !!this.librarySettings.hideSingleBookSeries
    }
  },
  mounted() {
--- a/client/components/modals/libraries/LibraryTools.vue
+++ b/client/components/modals/libraries/LibraryTools.vue
@@ -1,81 +0,0 @@
-<template>
-  <div class="w-full h-full px-1 md:px-2 py-1 mb-4">
-    <div class="w-full border border-black-200 p-4 my-8">
-      <div class="flex flex-wrap items-center">
-        <div>
-          <p class="text-lg">Remove metadata files in library item folders</p>
-          <p class="max-w-sm text-sm pt-2 text-gray-300">Remove all metadata.json or metadata.abs files in your {{ mediaType }} folders</p>
-        </div>
-        <div class="flex-grow" />
-        <div>
-          <ui-btn class="mb-4 block" @click.stop="removeAllMetadataClick('json')">Remove all metadata.json</ui-btn>
-          <ui-btn @click.stop="removeAllMetadataClick('abs')">Remove all metadata.abs</ui-btn>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    library: {
-      type: Object,
-      default: () => null
-    },
-    libraryId: String,
-    processing: Boolean
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    librarySettings() {
-      return this.library.settings || {}
-    },
-    mediaType() {
-      return this.library.mediaType
-    },
-    isBookLibrary() {
-      return this.mediaType === 'book'
-    }
-  },
-  methods: {
-    removeAllMetadataClick(ext) {
-      const payload = {
-        message: `Are you sure you want to remove all metadata.${ext} files in your library item folders?`,
-        persistent: true,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.removeAllMetadataInLibrary(ext)
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    removeAllMetadataInLibrary(ext) {
-      this.$emit('update:processing', true)
-      this.$axios
-        .$post(`/api/libraries/${this.libraryId}/remove-metadata?ext=${ext}`)
-        .then((data) => {
-          if (!data.found) {
-            this.$toast.info(`No metadata.${ext} files were found in library`)
-          } else if (!data.removed) {
-            this.$toast.success(`No metadata.${ext} files removed`)
-          } else {
-            this.$toast.success(`Successfully removed ${data.removed} metadata.${ext} files`)
-          }
-        })
-        .catch((error) => {
-          console.error('Failed to remove metadata files', error)
-          this.$toast.error('Failed to remove metadata files')
-        })
-        .finally(() => {
-          this.$emit('update:processing', false)
-        })
-    }
-  },
-  mounted() {}
-}
-</script>
--- a/client/components/modals/podcast/EpisodeFeed.vue
+++ b/client/components/modals/podcast/EpisodeFeed.vue
@@ -16,11 +16,11 @@
          v-for="(episode, index) in episodesList"
          :key="index"
          class="relative"
-          :class="getIsEpisodeDownloaded(episode) ? 'bg-primary bg-opacity-40' : selectedEpisodes[episode.cleanUrl] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
+          :class="itemEpisodeMap[episode.cleanUrl] ? 'bg-primary bg-opacity-40' : selectedEpisodes[episode.cleanUrl] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
          @click="toggleSelectEpisode(episode)"
        >
          <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <span v-if="getIsEpisodeDownloaded(episode)" class="material-icons text-success text-xl">download_done</span>
+            <span v-if="itemEpisodeMap[episode.cleanUrl]" class="material-icons text-success text-xl">download_done</span>
            <ui-checkbox v-else v-model="selectedEpisodes[episode.cleanUrl]" small checkbox-bg="primary" border-color="gray-600" />
          </div>
          <div class="px-8 py-2">
@@ -39,7 +39,7 @@
        </div>
      </div>
      <div class="flex justify-end pt-4">
-        <ui-checkbox v-if="!allDownloaded" v-model="selectAll" @input="toggleSelectAll" :label="selectAllLabel" small checkbox-bg="primary" border-color="gray-600" class="mx-8" />
+        <ui-checkbox v-if="!allDownloaded" v-model="selectAll" @input="toggleSelectAll" label="Select all episodes" small checkbox-bg="primary" border-color="gray-600" class="mx-8" />
        <ui-btn v-if="!allDownloaded" :disabled="!episodesSelected.length" @click="submit">{{ buttonText }}</ui-btn>
        <p v-else class="text-success text-base px-2 py-4">All episodes are downloaded</p>
      </div>
@@ -93,89 +93,53 @@ export default {
      return this.libraryItem.media.metadata.title || 'Unknown'
    },
    allDownloaded() {
-      return !this.episodesCleaned.some((episode) => !this.getIsEpisodeDownloaded(episode))
+      return !this.episodesCleaned.some((episode) => !this.itemEpisodeMap[episode.cleanUrl])
    },
    episodesSelected() {
      return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
    },
    buttonText() {
-      if (!this.episodesSelected.length) return this.$strings.LabelNoEpisodesSelected
-      if (this.episodesSelected.length === 1) return `${this.$strings.LabelDownload} ${this.$strings.LabelEpisode.toLowerCase()}`
-      return this.$getString('LabelDownloadNEpisodes', [this.episodesSelected.length])
+      if (!this.episodesSelected.length) return 'No Episodes Selected'
+      return `Download ${this.episodesSelected.length} Episode${this.episodesSelected.length > 1 ? 's' : ''}`
    },
    itemEpisodes() {
-      return this.libraryItem?.media.episodes || []
+      if (!this.libraryItem) return []
+      return this.libraryItem.media.episodes || []
+    },
+    itemEpisodeMap() {
+      var map = {}
+      this.itemEpisodes.forEach((item) => {
+        if (item.enclosure) map[item.enclosure.url.split('?')[0]] = true
+      })
+      return map
    },
    episodesList() {
      return this.episodesCleaned.filter((episode) => {
        if (!this.searchText) return true
-        return episode.title?.toLowerCase().includes(this.searchText) || episode.subtitle?.toLowerCase().includes(this.searchText)
+        return (episode.title && episode.title.toLowerCase().includes(this.searchText)) || (episode.subtitle && episode.subtitle.toLowerCase().includes(this.searchText))
      })
-    },
-    selectAllLabel() {
-      if (this.episodesList.length === this.episodesCleaned.length) {
-        return this.$strings.LabelSelectAllEpisodes
-      }
-      const episodesNotDownloaded = this.episodesList.filter((ep) => !this.getIsEpisodeDownloaded(ep)).length
-      return this.$getString('LabelSelectEpisodesShowing', [episodesNotDownloaded])
    }
  },
  methods: {
-    getIsEpisodeDownloaded(episode) {
-      return this.itemEpisodes.some((downloadedEpisode) => {
-        if (episode.guid && downloadedEpisode.guid === episode.guid) return true
-        if (!downloadedEpisode.enclosure?.url) return false
-        return this.getCleanEpisodeUrl(downloadedEpisode.enclosure.url) === episode.cleanUrl
-      })
-    },
-    /**
-     * UPDATE: As of v2.4.5 guid is used for matching existing downloaded episodes if it is found on the RSS feed.
-     * Fallback to checking the clean url
-     * @see https://github.com/advplyr/audiobookshelf/issues/2207
-     *
-     * RSS feed episode url is used for matching with existing downloaded episodes.
-     * Some RSS feeds include timestamps in the episode url (e.g. patreon) that can change on requests.
-     * These need to be removed in order to detect the same episode each time the feed is pulled.
-     *
-     * An RSS feed may include an `id` in the query string. In these cases we want to leave the `id`.
-     * @see https://github.com/advplyr/audiobookshelf/issues/1896
-     *
-     * @param {string} url - rss feed episode url
-     * @returns {string} rss feed episode url without dynamic query strings
-     */
-    getCleanEpisodeUrl(url) {
-      let queryString = url.split('?')[1]
-      if (!queryString) return url
-
-      const searchParams = new URLSearchParams(queryString)
-      for (const p of Array.from(searchParams.keys())) {
-        if (p !== 'id') searchParams.delete(p)
-      }
-
-      if (!searchParams.toString()) return url
-      return `${url}?${searchParams.toString()}`
-    },
    inputUpdate() {
      clearTimeout(this.searchTimeout)
      this.searchTimeout = setTimeout(() => {
-        if (!this.search?.trim()) {
+        if (!this.search || !this.search.trim()) {
          this.searchText = ''
-          this.checkSetIsSelectedAll()
          return
        }
        this.searchText = this.search.toLowerCase().trim()
-        this.checkSetIsSelectedAll()
      }, 500)
    },
    toggleSelectAll(val) {
-      for (const episode of this.episodesList) {
-        if (this.getIsEpisodeDownloaded(episode)) this.selectedEpisodes[episode.cleanUrl] = false
+      for (const episode of this.episodesCleaned) {
+        if (this.itemEpisodeMap[episode.cleanUrl]) this.selectedEpisodes[episode.cleanUrl] = false
        else this.$set(this.selectedEpisodes, episode.cleanUrl, val)
      }
    },
    checkSetIsSelectedAll() {
-      for (const episode of this.episodesList) {
-        if (!this.getIsEpisodeDownloaded(episode) && !this.selectedEpisodes[episode.cleanUrl]) {
+      for (const episode of this.episodesCleaned) {
+        if (!this.itemEpisodeMap[episode.cleanUrl] && !this.selectedEpisodes[episode.cleanUrl]) {
          this.selectAll = false
          return
        }
@@ -183,19 +147,19 @@ export default {
      this.selectAll = true
    },
    toggleSelectEpisode(episode) {
-      if (this.getIsEpisodeDownloaded(episode)) return
+      if (this.itemEpisodeMap[episode.enclosure.url?.split('?')[0]]) return
      this.$set(this.selectedEpisodes, episode.cleanUrl, !this.selectedEpisodes[episode.cleanUrl])
      this.checkSetIsSelectedAll()
    },
    submit() {
-      let episodesToDownload = []
+      var episodesToDownload = []
      if (this.episodesSelected.length) {
        episodesToDownload = this.episodesSelected.map((cleanUrl) => this.episodesCleaned.find((ep) => ep.cleanUrl == cleanUrl))
      }

-      const payloadSize = JSON.stringify(episodesToDownload).length
-      const sizeInMb = payloadSize / 1024 / 1024
-      const sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
+      var payloadSize = JSON.stringify(episodesToDownload).length
+      var sizeInMb = payloadSize / 1024 / 1024
+      var sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
      console.log('Request size', sizeInMb)
      if (sizeInMb > 4.99) {
        return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 5Mb`)
@@ -210,9 +174,10 @@ export default {
          this.show = false
        })
        .catch((error) => {
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to download episodes'
          console.error('Failed to download episodes', error)
          this.processing = false
-          this.$toast.error(error.response?.data || 'Failed to download episodes')
+          this.$toast.error(errorMsg)

          this.selectedEpisodes = {}
          this.selectAll = false
@@ -224,7 +189,7 @@ export default {
        .map((_ep) => {
          return {
            ..._ep,
-            cleanUrl: this.getCleanEpisodeUrl(_ep.enclosure.url)
+            cleanUrl: _ep.enclosure.url.split('?')[0]
          }
        })
      this.episodesCleaned.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))
--- a/client/components/modals/rssfeed/OpenCloseModal.vue
+++ b/client/components/modals/rssfeed/OpenCloseModal.vue
@@ -132,8 +132,6 @@ export default {
        return
      }

-      this.processing = true
-
      const payload = {
        serverAddress: window.origin,
        slug: this.newFeedSlug,
@@ -153,9 +151,6 @@ export default {
          const errorMsg = error.response ? error.response.data : null
          this.$toast.error(errorMsg || 'Failed to open RSS Feed')
        })
-        .finally(() => {
-          this.processing = false
-        })
    },
    copyToClipboard(str) {
      this.$copyToClipboard(str, this)
--- a/client/components/modals/rssfeed/ViewFeedModal.vue
+++ b/client/components/modals/rssfeed/ViewFeedModal.vue
@@ -1,124 +0,0 @@
-<template>
-  <modals-modal v-model="show" name="rss-feed-view-modal" :processing="processing" :width="700" :height="'unset'">
-    <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
-      <div v-if="feed" class="w-full">
-        <p class="text-lg font-semibold mb-4">{{ $strings.HeaderRSSFeedGeneral }}</p>
-
-        <div class="w-full relative">
-          <ui-text-input v-model="feed.feedUrl" readonly />
-          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(feed.feedUrl)">content_copy</span>
-        </div>
-
-        <div v-if="feed.meta" class="mt-5">
-          <div class="flex py-0.5">
-            <div class="w-48">
-              <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRSSFeedPreventIndexing }}</span>
-            </div>
-            <div>{{ feed.meta.preventIndexing ? 'Yes' : 'No' }}</div>
-          </div>
-          <div v-if="feed.meta.ownerName" class="flex py-0.5">
-            <div class="w-48">
-              <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRSSFeedCustomOwnerName }}</span>
-            </div>
-            <div>{{ feed.meta.ownerName }}</div>
-          </div>
-          <div v-if="feed.meta.ownerEmail" class="flex py-0.5">
-            <div class="w-48">
-              <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRSSFeedCustomOwnerEmail }}</span>
-            </div>
-            <div>{{ feed.meta.ownerEmail }}</div>
-          </div>
-        </div>
-        <!--  -->
-        <div class="episodesTable mt-2">
-          <div class="bg-primary bg-opacity-40 h-12 header">
-            {{ $strings.LabelEpisodeTitle }}
-          </div>
-          <div class="scroller">
-            <div v-for="episode in feed.episodes" :key="episode.id" class="h-8 text-xs truncate">
-              {{ episode.title }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean,
-    feed: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      processing: false
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    _feed() {
-      return this.feed || {}
-    }
-  },
-  methods: {
-    copyToClipboard(str) {
-      this.$copyToClipboard(str, this)
-    }
-  },
-  mounted() {}
-}
-</script>
-
-<style scoped>
-.episodesTable {
-  width: 100%;
-  max-width: 100%;
-  border: 1px solid #474747;
-  display: flex;
-  flex-direction: column;
-}
-
-.episodesTable div.header {
-  background-color: #272727;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  padding: 4px 8px;
-}
-
-.episodesTable .scroller {
-  display: flex;
-  flex-direction: column;
-  max-height: 250px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.episodesTable .scroller div {
-  background-color: #373838;
-  padding: 4px 8px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 32px;
-  flex: 0 0 32px;
-}
-
-.episodesTable .scroller div:nth-child(even) {
-  background-color: #2f2f2f;
-}
-</style>
-
--- a/client/components/readers/ComicReader.vue
+++ b/client/components/readers/ComicReader.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="w-full h-full">
-    <div v-show="showPageMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 left-8 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400" :style="{ width: pageMenuWidth + 'px' }">
-      <div v-for="(file, index) in cleanedPageNames" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click="setPage(index + 1)">
+    <div v-show="showPageMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 right-20 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-52">
+      <div v-for="(file, index) in pages" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click="setPage(index)">
        <p class="text-sm truncate">{{ file }}</p>
      </div>
    </div>
-    <div v-show="showInfoMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 left-20 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-96">
+    <div v-show="showInfoMenu" v-click-outside="clickOutside" class="pagemenu absolute top-9 right-10 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-96">
      <div v-for="key in comicMetadataKeys" :key="key" class="w-full px-2 py-1">
        <p class="text-xs">
          <strong>{{ key }}</strong
@@ -14,44 +14,39 @@
      </div>
    </div>

-    <div v-if="numPages" class="absolute top-0 left-4 sm:left-8 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="clickShowPageMenu">
-      <span class="material-icons text-xl">menu</span>
-    </div>
-    <div v-if="comicMetadata" class="absolute top-0 left-16 sm:left-20 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="clickShowInfoMenu">
+    <div v-if="comicMetadata" class="absolute top-0 right-52 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="showInfoMenu = !showInfoMenu">
      <span class="material-icons text-xl">more</span>
    </div>
-    <a v-if="pages && numPages" :href="mainImg" :download="pages[page - 1]" class="absolute top-0 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" :class="comicMetadata ? 'left-28 sm:left-32' : 'left-16 sm:left-20'">
-      <span class="material-icons text-xl">download</span>
-    </a>
-
-    <div v-if="numPages" class="absolute top-0 right-14 sm:right-16 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20">
-      <p class="font-mono">{{ page }} / {{ numPages }}</p>
+    <div class="absolute top-0 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" style="right: 156px" @mousedown.prevent @click.stop.prevent="showPageMenu = !showPageMenu">
+      <span class="material-icons text-xl">menu</span>
    </div>
-    <div v-if="mainImg" class="absolute top-0 right-36 sm:right-40 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20">
-      <ui-icon-btn icon="zoom_out" :size="8" :disabled="!canScaleDown" borderless class="mr-px" @click="zoomOut" />
-      <ui-icon-btn icon="zoom_in" :size="8" :disabled="!canScaleUp" borderless class="ml-px" @click="zoomIn" />
+    <div class="absolute top-0 right-20 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20">
+      <p class="font-mono">{{ page + 1 }} / {{ numPages }}</p>
    </div>

-    <div class="w-full h-full relative">
-      <div v-show="canGoPrev" ref="prevButton" class="absolute top-0 left-0 h-full w-1/2 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
+    <div class="overflow-hidden m-auto comicwrapper relative">
+      <div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
        <div class="flex items-center justify-center h-full w-1/2">
          <span v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
        </div>
      </div>
-      <div v-show="canGoNext" ref="nextButton" class="absolute top-0 right-0 h-full w-1/2 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
+      <div v-show="canGoNext" class="absolute top-0 right-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
        <div class="flex items-center justify-center h-full w-1/2 ml-auto">
          <span v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_forward_ios</span>
        </div>
      </div>
-      <div ref="imageContainer" class="w-full h-full relative overflow-auto">
-        <div class="h-full flex" :class="scale > 100 ? '' : 'justify-center'">
-          <img v-if="mainImg" :style="{ minWidth: scale + '%', width: scale + '%' }" :src="mainImg" class="object-contain m-auto" />
-        </div>
+      <div class="h-full flex justify-center">
+        <img v-if="mainImg" :src="mainImg" class="object-contain comicimg" />
      </div>
+
      <div v-show="loading" class="w-full h-full absolute top-0 left-0 flex items-center justify-center z-10">
        <ui-loading-indicator />
      </div>
    </div>
+
+    <!-- <div v-show="loading" class="w-screen h-screen absolute top-0 left-0 bg-black bg-opacity-20 flex items-center justify-center">
+      <ui-loading-indicator />
+    </div> -->
  </div>
 </template>

@@ -60,23 +55,13 @@ import Path from 'path'
 import { Archive } from 'libarchive.js/main.js'
 import { CompressedFile } from 'libarchive.js/src/compressed-file'

-// This is % with respect to the screen width
-const MAX_SCALE = 400
-const MIN_SCALE = 10
-
 Archive.init({
  workerUrl: '/libarchive/worker-bundle.js'
 })

 export default {
  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    },
-    playerOpen: Boolean,
-    keepProgress: Boolean,
-    fileId: String
+    url: String
  },
  data() {
    return {
@@ -86,13 +71,11 @@ export default {
      mainImg: null,
      page: 0,
      numPages: 0,
-      pageMenuWidth: 256,
      showPageMenu: false,
      showInfoMenu: false,
      loadTimeout: null,
      loadedFirstPage: false,
-      comicMetadata: null,
-      scale: 80
+      comicMetadata: null
    }
  },
  watch: {
@@ -104,85 +87,17 @@ export default {
    }
  },
  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
-    libraryItemId() {
-      return this.libraryItem?.id
-    },
-    ebookUrl() {
-      if (this.fileId) {
-        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
-      }
-      return `/api/items/${this.libraryItemId}/ebook`
-    },
    comicMetadataKeys() {
      return this.comicMetadata ? Object.keys(this.comicMetadata) : []
    },
    canGoNext() {
-      return this.page < this.numPages
+      return this.page < this.numPages - 1
    },
    canGoPrev() {
-      return this.page > 1
-    },
-    userMediaProgress() {
-      if (!this.libraryItemId) return
-      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
-    },
-    savedPage() {
-      if (!this.keepProgress) return 0
-
-      // Validate ebookLocation is a number
-      if (!this.userMediaProgress?.ebookLocation || isNaN(this.userMediaProgress.ebookLocation)) return 0
-      return Number(this.userMediaProgress.ebookLocation)
-    },
-    cleanedPageNames() {
-      return (
-        this.pages?.map((p) => {
-          if (p.length > 50) {
-            let firstHalf = p.slice(0, 22)
-            let lastHalf = p.slice(p.length - 23)
-            return `${firstHalf} ... ${lastHalf}`
-          }
-          return p
-        }) || []
-      )
-    },
-    canScaleUp() {
-      return this.scale < MAX_SCALE
-    },
-    canScaleDown() {
-      return this.scale > MIN_SCALE
+      return this.page > 0
    }
  },
  methods: {
-    clickShowPageMenu() {
-      this.showInfoMenu = false
-      this.showPageMenu = !this.showPageMenu
-    },
-    clickShowInfoMenu() {
-      this.showPageMenu = false
-      this.showInfoMenu = !this.showInfoMenu
-    },
-    updateProgress() {
-      if (!this.keepProgress) return
-
-      if (!this.numPages) {
-        console.error('Num pages not loaded')
-        return
-      }
-      if (this.savedPage === this.page) {
-        return
-      }
-
-      const payload = {
-        ebookLocation: this.page,
-        ebookProgress: Math.max(0, Math.min(1, (Number(this.page) - 1) / Number(this.numPages)))
-      }
-      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
-        console.error('ComicReader.updateProgress failed:', error)
-      })
-    },
    clickOutside() {
      if (this.showPageMenu) this.showPageMenu = false
      if (this.showInfoMenu) this.showInfoMenu = false
@@ -195,15 +110,12 @@ export default {
      if (!this.canGoPrev) return
      this.setPage(this.page - 1)
    },
-    setPage(page) {
-      if (page <= 0 || page > this.numPages) {
+    setPage(index) {
+      if (index < 0 || index > this.numPages - 1) {
        return
      }
-      this.showPageMenu = false
-      this.showInfoMenu = false
-      const filename = this.pages[page - 1]
-      this.page = page
-      this.updateProgress()
+      var filename = this.pages[index]
+      this.page = index
      return this.extractFile(filename)
    },
    setLoadTimeout() {
@@ -233,11 +145,10 @@ export default {
    },
    async extract() {
      this.loading = true
-      var buff = await this.$axios.$get(this.ebookUrl, {
-        responseType: 'blob',
-        headers: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+      console.log('Extracting', this.url)
+
+      var buff = await this.$axios.$get(this.url, {
+        responseType: 'blob'
      })
      const archive = await Archive.open(buff)
      const originalFilesObject = await archive.getFilesObject()
@@ -253,28 +164,9 @@ export default {

      this.numPages = this.pages.length

-      // Calculate page menu size
-      const largestFilename = this.cleanedPageNames
-        .map((p) => p)
-        .sort((a, b) => a.length - b.length)
-        .pop()
-      const pEl = document.createElement('p')
-      pEl.innerText = largestFilename
-      pEl.style.fontSize = '0.875rem'
-      pEl.style.opacity = 0
-      pEl.style.position = 'absolute'
-      document.body.appendChild(pEl)
-      const textWidth = pEl.getBoundingClientRect()?.width
-      if (textWidth) {
-        this.pageMenuWidth = textWidth + (16 + 5 + 2 + 5)
-      }
-      pEl.remove()
-
      if (this.pages.length) {
        this.loading = false
-
-        const startPage = this.savedPage > 0 && this.savedPage <= this.numPages ? this.savedPage : 1
-        await this.setPage(startPage)
+        await this.setPage(0)
        this.loadedFirstPage = true
      } else {
        this.$toast.error('Unable to extract pages')
@@ -320,8 +212,8 @@ export default {
    },
    parseImageFilename(filename) {
      var basename = Path.basename(filename, Path.extname(filename))
-      var numbersinpath = basename.match(/\d+/g)
-      if (!numbersinpath?.length) {
+      var numbersinpath = basename.match(/\d{1,5}/g)
+      if (!numbersinpath || !numbersinpath.length) {
        return {
          index: -1,
          filename
@@ -348,42 +240,24 @@ export default {
      orderedImages = orderedImages.concat(noNumImages.map((i) => i.filename))

      this.pages = orderedImages
-    },
-    zoomIn() {
-      this.scale += 10
-    },
-    zoomOut() {
-      this.scale -= 10
-    },
-    scroll(event) {
-      const imageContainer = this.$refs.imageContainer
-
-      imageContainer.scrollBy({
-        top: event.deltaY,
-        left: event.deltaX,
-        behavior: 'auto'
-      })
    }
  },
-  mounted() {
-    const prevButton = this.$refs.prevButton
-    const nextButton = this.$refs.nextButton
-
-    prevButton.addEventListener('wheel', this.scroll, { passive: false })
-    nextButton.addEventListener('wheel', this.scroll, { passive: false })
-  },
-  beforeDestroy() {
-    const prevButton = this.$refs.prevButton
-    const nextButton = this.$refs.nextButton
-
-    prevButton.removeEventListener('wheel', this.scroll, { passive: false })
-    nextButton.removeEventListener('wheel', this.scroll, { passive: false })
-  }
+  mounted() {},
+  beforeDestroy() {}
 }
 </script>

 <style scoped>
 .pagemenu {
-  max-height: calc(100% - 48px);
+  max-height: calc(100vh - 60px);
+}
+.comicimg {
+  height: calc(100vh - 40px);
+  margin: auto;
+}
+.comicwrapper {
+  width: 100vw;
+  height: calc(100vh - 40px);
+  margin-top: 20px;
 }
 </style>
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@@ -1,15 +1,15 @@
 <template>
-  <div id="epub-reader" class="h-full w-full">
+  <div class="h-full w-full">
    <div class="h-full flex items-center justify-center">
-      <button type="button" aria-label="Previous page" class="w-24 max-w-24 h-full hidden sm:flex items-center overflow-x-hidden justify-center opacity-50 hover:opacity-100">
-        <span v-if="hasPrev" class="material-icons text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
-      </button>
+      <div style="width: 100px; max-width: 100px" class="h-full hidden sm:flex items-center overflow-x-hidden justify-center">
+        <span v-if="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
+      </div>
      <div id="frame" class="w-full" style="height: 80%">
        <div id="viewer"></div>
      </div>
-      <button type="button" aria-label="Next page" class="w-24 max-w-24 h-full hidden sm:flex items-center justify-center overflow-x-hidden opacity-50 hover:opacity-100">
-        <span v-if="hasNext" class="material-icons text-6xl" @mousedown.prevent @click="next">chevron_right</span>
-      </button>
+      <div style="width: 100px; max-width: 100px" class="h-full hidden sm:flex items-center justify-center overflow-x-hidden">
+        <span v-if="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
+      </div>
    </div>
  </div>
 </template>
@@ -24,41 +24,22 @@ import ePub from 'epubjs'
 */
 export default {
  props: {
+    url: String,
    libraryItem: {
      type: Object,
      default: () => {}
-    },
-    playerOpen: Boolean,
-    keepProgress: Boolean,
-    fileId: String
+    }
  },
  data() {
    return {
      windowWidth: 0,
-      windowHeight: 0,
      /** @type {ePub.Book} */
      book: null,
      /** @type {ePub.Rendition} */
-      rendition: null,
-      chapters: [],
-      ereaderSettings: {
-        theme: 'dark',
-        font: 'serif',
-        fontScale: 100,
-        lineSpacing: 115,
-        spread: 'auto'
-      }
-    }
-  },
-  watch: {
-    playerOpen() {
-      this.resize()
+      rendition: null
    }
  },
  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    /** @returns {string} */
    libraryItemId() {
      return this.libraryItem?.id
@@ -69,114 +50,32 @@ export default {
    hasNext() {
      return !this.rendition?.location?.atEnd
    },
+    /** @returns {Array<ePub.NavItem>} */
+    chapters() {
+      return this.book ? this.book.navigation.toc : []
+    },
    userMediaProgress() {
      if (!this.libraryItemId) return
      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
    },
-    savedEbookLocation() {
-      if (!this.keepProgress) return null
-      if (!this.userMediaProgress?.ebookLocation) return null
-      // Validate ebookLocation is an epubcfi
-      if (!String(this.userMediaProgress.ebookLocation).startsWith('epubcfi')) return null
-      return this.userMediaProgress.ebookLocation
-    },
    localStorageLocationsKey() {
      return `ebookLocations-${this.libraryItemId}`
    },
    readerWidth() {
      if (this.windowWidth < 640) return this.windowWidth
      return this.windowWidth - 200
-    },
-    readerHeight() {
-      if (this.windowHeight < 400 || !this.playerOpen) return this.windowHeight
-      return this.windowHeight - 164
-    },
-    ebookUrl() {
-      if (this.fileId) {
-        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
-      }
-      return `/api/items/${this.libraryItemId}/ebook`
-    },
-    themeRules() {
-      const isDark = this.ereaderSettings.theme === 'dark'
-      const fontColor = isDark ? '#fff' : '#000'
-      const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)'
-
-      const lineSpacing = this.ereaderSettings.lineSpacing / 100
-
-      const fontScale = this.ereaderSettings.fontScale / 100
-
-      return {
-        '*': {
-          color: `${fontColor}!important`,
-          'background-color': `${backgroundColor}!important`,
-          'line-height': lineSpacing * fontScale + 'rem!important'
-        },
-        a: {
-          color: `${fontColor}!important`
-        }
-      }
    }
  },
  methods: {
-    updateSettings(settings) {
-      this.ereaderSettings = settings
-
-      if (!this.rendition) return
-
-      this.applyTheme()
-
-      const fontScale = settings.fontScale || 100
-      this.rendition.themes.fontSize(`${fontScale}%`)
-      this.rendition.themes.font(settings.font)
-      this.rendition.spread(settings.spread || 'auto')
-    },
    prev() {
-      if (!this.rendition?.manager) return
      return this.rendition?.prev()
    },
    next() {
-      if (!this.rendition?.manager) return
      return this.rendition?.next()
    },
    goToChapter(href) {
-      if (!this.rendition?.manager) return
      return this.rendition?.display(href)
    },
-    /** @returns {object} Returns the chapter that the `position` in the book is in */
-    findChapterFromPosition(chapters, position) {
-      let foundChapter
-      for (let i = 0; i < chapters.length; i++) {
-        if (position >= chapters[i].start && (!chapters[i + 1] || position < chapters[i + 1].start)) {
-          foundChapter = chapters[i]
-          if (chapters[i].subitems && chapters[i].subitems.length > 0) {
-            return this.findChapterFromPosition(chapters[i].subitems, position, foundChapter)
-          }
-          break
-        }
-      }
-      return foundChapter
-    },
-    /** @returns {Array} Returns an array of chapters that only includes chapters with query results */
-    async searchBook(query) {
-      const chapters = structuredClone(await this.chapters)
-      const searchResults = await Promise.all(this.book.spine.spineItems.map((item) => item.load(this.book.load.bind(this.book)).then(item.find.bind(item, query)).finally(item.unload.bind(item))))
-      const mergedResults = [].concat(...searchResults)
-
-      mergedResults.forEach((chapter) => {
-        chapter.start = this.book.locations.percentageFromCfi(chapter.cfi)
-        const foundChapter = this.findChapterFromPosition(chapters, chapter.start)
-        if (foundChapter) foundChapter.searchResults.push(chapter)
-      })
-
-      let filteredResults = chapters.filter(function f(o) {
-        if (o.searchResults.length) return true
-        if (o.subitems.length) {
-          return (o.subitems = o.subitems.filter(f)).length
-        }
-      })
-      return filteredResults
-    },
    keyUp(e) {
      const rtl = this.book.package.metadata.direction === 'rtl'
      if ((e.keyCode || e.which) == 37) {
@@ -191,7 +90,6 @@ export default {
     * @param {string} payload.ebookProgress - eBook Progress Percentage
     */
    updateProgress(payload) {
-      if (!this.keepProgress) return
      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
        console.error('EpubReader.updateProgress failed:', error)
      })
@@ -283,7 +181,7 @@ export default {
    },
    /** @param {string} location - CFI of the new location */
    relocated(location) {
-      if (this.savedEbookLocation === location.start.cfi) {
+      if (this.userMediaProgress?.ebookLocation === location.start.cfi) {
        return
      }

@@ -303,42 +201,43 @@ export default {
      const reader = this

      /** @type {ePub.Book} */
-      reader.book = new ePub(reader.ebookUrl, {
+      reader.book = new ePub(reader.url, {
        width: this.readerWidth,
-        height: this.readerHeight - 50,
-        openAs: 'epub',
-        requestHeaders: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+        height: window.innerHeight - 50
      })

      /** @type {ePub.Rendition} */
      reader.rendition = reader.book.renderTo('viewer', {
        width: this.readerWidth,
-        height: this.readerHeight * 0.8,
-        spread: 'auto',
-        snap: true,
-        manager: 'continuous',
-        flow: 'paginated'
+        height: window.innerHeight * 0.8
      })

      // load saved progress
-      reader.rendition.display(this.savedEbookLocation || reader.book.locations.start)
+      reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start)

-      reader.rendition.on('rendered', () => {
-        this.applyTheme()
-      })
+      // load style
+      reader.rendition.themes.default({ '*': { color: '#fff!important' } })

      reader.book.ready.then(() => {
        // set up event listeners
        reader.rendition.on('relocated', reader.relocated)
        reader.rendition.on('keydown', reader.keyUp)

+        let touchStart = 0
+        let touchEnd = 0
        reader.rendition.on('touchstart', (event) => {
-          this.$emit('touchstart', event)
+          touchStart = event.changedTouches[0].screenX
        })
+
        reader.rendition.on('touchend', (event) => {
-          this.$emit('touchend', event)
+          touchEnd = event.changedTouches[0].screenX
+          const touchDistanceX = Math.abs(touchEnd - touchStart)
+          if (touchStart < touchEnd && touchDistanceX > 120) {
+            this.next()
+          }
+          if (touchStart > touchEnd && touchDistanceX > 120) {
+            this.prev()
+          }
        })

        // load ebook cfi locations
@@ -350,98 +249,21 @@ export default {
            this.checkSaveLocations(reader.book.locations.save())
          })
        }
-        this.getChapters()
      })
    },
-    getChapters() {
-      // Load the list of chapters in the book. See https://github.com/futurepress/epub.js/issues/759
-      const toc = this.book?.navigation?.toc || []
-
-      const tocTree = []
-
-      const resolveURL = (url, relativeTo) => {
-        // see https://github.com/futurepress/epub.js/issues/1084
-        // HACK-ish: abuse the URL API a little to resolve the path
-        // the base needs to be a valid URL, or it will throw a TypeError,
-        // so we just set a random base URI and remove it later
-        const base = 'https://example.invalid/'
-        return new URL(url, base + relativeTo).href.replace(base, '')
-      }
-
-      const basePath = this.book.packaging.navPath || this.book.packaging.ncxPath
-
-      const createTree = async (toc, parent) => {
-        const promises = toc.map(async (tocItem, i) => {
-          const href = resolveURL(tocItem.href, basePath)
-          const id = href.split('#')[1]
-          const item = this.book.spine.get(href)
-          await item.load(this.book.load.bind(this.book))
-          const el = id ? item.document.getElementById(id) : item.document.body
-
-          const cfi = item.cfiFromElement(el)
-
-          parent[i] = {
-            title: tocItem.label.trim(),
-            subitems: [],
-            href,
-            cfi,
-            start: this.book.locations.percentageFromCfi(cfi),
-            end: null, // set by flattenChapters()
-            id: null, // set by flattenChapters()
-            searchResults: []
-          }
-
-          if (tocItem.subitems) {
-            await createTree(tocItem.subitems, parent[i].subitems)
-          }
-        })
-        await Promise.all(promises)
-      }
-      return createTree(toc, tocTree).then(() => {
-        this.chapters = tocTree
-      })
-    },
-    flattenChapters(chapters) {
-      // Convert the nested epub chapters into something that looks like audiobook chapters for player-ui
-      const unwrap = (chapters) => {
-        return chapters.reduce((acc, chapter) => {
-          return chapter.subitems ? [...acc, chapter, ...unwrap(chapter.subitems)] : [...acc, chapter]
-        }, [])
-      }
-      let flattenedChapters = unwrap(chapters)
-
-      flattenedChapters = flattenedChapters.sort((a, b) => a.start - b.start)
-      for (let i = 0; i < flattenedChapters.length; i++) {
-        flattenedChapters[i].id = i
-        if (i < flattenedChapters.length - 1) {
-          flattenedChapters[i].end = flattenedChapters[i + 1].start
-        } else {
-          flattenedChapters[i].end = 1
-        }
-      }
-      return flattenedChapters
-    },
    resize() {
      this.windowWidth = window.innerWidth
-      this.windowHeight = window.innerHeight
-      this.rendition?.resize(this.readerWidth, this.readerHeight * 0.8)
-    },
-    applyTheme() {
-      if (!this.rendition) return
-      this.rendition.getContents().forEach((c) => {
-        c.addStylesheetRules(this.themeRules)
-      })
+      this.rendition?.resize(this.readerWidth, window.innerHeight * 0.8)
    }
  },
-  mounted() {
-    this.windowWidth = window.innerWidth
-    this.windowHeight = window.innerHeight
-    window.addEventListener('resize', this.resize)
-    this.initEpub()
-  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
    this.book?.destroy()
+  },
+  mounted() {
+    this.windowWidth = window.innerWidth
+    window.addEventListener('resize', this.resize)
+    this.initEpub()
  }
 }
 </script>
--- a/client/components/readers/MobiReader.vue
+++ b/client/components/readers/MobiReader.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="w-full h-full">
    <div class="h-full max-h-full w-full">
-      <div class="ebook-viewer absolute overflow-y-scroll left-0 right-0 top-16 w-full max-w-4xl m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
+      <div class="ebook-viewer absolute overflow-y-scroll left-0 right-0 top-12 w-full max-w-4xl m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
        <iframe title="html-viewer" width="100%"> Loading </iframe>
      </div>
    </div>
@@ -15,30 +15,12 @@ import defaultCss from '@/assets/ebooks/basic.js'

 export default {
  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    },
-    playerOpen: Boolean,
-    fileId: String
+    url: String
  },
  data() {
    return {}
  },
-  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
-    libraryItemId() {
-      return this.libraryItem?.id
-    },
-    ebookUrl() {
-      if (this.fileId) {
-        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
-      }
-      return `/api/items/${this.libraryItemId}/ebook`
-    }
-  },
+  computed: {},
  methods: {
    addHtmlCss() {
      let iframe = document.getElementsByTagName('iframe')[0]
@@ -96,11 +78,8 @@ export default {
    },
    async initMobi() {
      // Fetch mobi file as blob
-      var buff = await this.$axios.$get(this.ebookUrl, {
-        responseType: 'blob',
-        headers: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+      var buff = await this.$axios.$get(this.url, {
+        responseType: 'blob'
      })
      var reader = new FileReader()
      reader.onload = async (event) => {
--- a/client/components/readers/PdfReader.vue
+++ b/client/components/readers/PdfReader.vue
@@ -11,19 +11,15 @@
      </div>
    </div>

-    <div class="absolute top-0 right-20 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 hidden md:flex items-center text-center">
+    <div class="absolute top-0 right-20 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center">
      <p class="font-mono">{{ page }} / {{ numPages }}</p>
    </div>
-    <div class="absolute top-0 right-40 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 hidden md:flex items-center text-center">
-      <ui-icon-btn icon="zoom_out" :size="8" :disabled="!canScaleDown" borderless class="mr-px" @click="zoomOut" />
-      <ui-icon-btn icon="zoom_in" :size="8" :disabled="!canScaleUp" borderless class="ml-px" @click="zoomIn" />
-    </div>

    <div :style="{ height: pdfHeight + 'px' }" class="overflow-hidden m-auto">
      <div class="flex items-center justify-center">
-        <div :style="{ width: pdfWidth + 'px', height: pdfHeight + 'px' }" class="overflow-auto">
+        <div :style="{ width: pdfWidth + 'px', height: pdfHeight + 'px' }" class="w-full h-full overflow-auto">
          <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
-          <pdf ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md" :src="pdfDocInitParams" :page="page" :rotate="rotate" @progress="progressEvt" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event" @loaded="loadedEvt"></pdf>
+          <pdf ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md" :src="url" :page="page" :rotate="rotate" @progress="loadedRatio = $event" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event"></pdf>
        </div>
      </div>
    </div>
@@ -34,26 +30,17 @@
 </template>

 <script>
-import pdf from '@teckel/vue-pdf'
+import pdf from 'vue-pdf'

 export default {
  components: {
    pdf
  },
  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    },
-    playerOpen: Boolean,
-    keepProgress: Boolean,
-    fileId: String
+    url: String
  },
  data() {
    return {
-      windowWidth: 0,
-      windowHeight: 0,
-      scale: 1,
      rotate: 0,
      loadedRatio: 0,
      page: 1,
@@ -61,121 +48,35 @@ export default {
    }
  },
  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
-    libraryItemId() {
-      return this.libraryItem?.id
-    },
-    fitToPageWidth() {
-      return this.pdfHeight * 0.6
-    },
    pdfWidth() {
-      return this.fitToPageWidth * this.scale
+      return this.pdfHeight * 0.6667
    },
    pdfHeight() {
-      if (this.windowHeight < 400 || !this.playerOpen) return this.windowHeight - 120
-      return this.windowHeight - 284
-    },
-    maxScale() {
-      return Math.floor((this.windowWidth * 10) / this.fitToPageWidth) / 10
+      return window.innerHeight - 120
    },
    canGoNext() {
      return this.page < this.numPages
    },
    canGoPrev() {
      return this.page > 1
-    },
-    canScaleUp() {
-      return this.scale < this.maxScale
-    },
-    canScaleDown() {
-      return this.scale > 1
-    },
-    userMediaProgress() {
-      if (!this.libraryItemId) return
-      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
-    },
-    savedPage() {
-      if (!this.keepProgress) return 0
-
-      // Validate ebookLocation is a number
-      if (!this.userMediaProgress?.ebookLocation || isNaN(this.userMediaProgress.ebookLocation)) return 0
-      return Number(this.userMediaProgress.ebookLocation)
-    },
-    ebookUrl() {
-      if (this.fileId) {
-        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
-      }
-      return `/api/items/${this.libraryItemId}/ebook`
-    },
-    pdfDocInitParams() {
-      return {
-        url: this.ebookUrl,
-        httpHeaders: {
-          Authorization: `Bearer ${this.userToken}`
-        }
-      }
    }
  },
  methods: {
-    zoomIn() {
-      this.scale += 0.1
-    },
-    zoomOut() {
-      this.scale -= 0.1
-    },
-    updateProgress() {
-      if (!this.keepProgress) return
-      if (!this.numPages) {
-        console.error('Num pages not loaded')
-        return
-      }
-
-      const payload = {
-        ebookLocation: this.page,
-        ebookProgress: Math.max(0, Math.min(1, (Number(this.page) - 1) / Number(this.numPages)))
-      }
-      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
-        console.error('EpubReader.updateProgress failed:', error)
-      })
-    },
-    loadedEvt() {
-      if (this.savedPage > 0 && this.savedPage <= this.numPages) {
-        this.page = this.savedPage
-      }
-    },
-    progressEvt(progress) {
-      this.loadedRatio = progress
-    },
    numPagesLoaded(e) {
      this.numPages = e
    },
    prev() {
      if (this.page <= 1) return
      this.page--
-      this.updateProgress()
    },
    next() {
      if (this.page >= this.numPages) return
      this.page++
-      this.updateProgress()
    },
    error(err) {
      console.error(err)
-    },
-    resize() {
-      this.windowWidth = window.innerWidth
-      this.windowHeight = window.innerHeight
    }
  },
-  mounted() {
-    this.windowWidth = window.innerWidth
-    this.windowHeight = window.innerHeight
-    window.addEventListener('resize', this.resize)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.resize)
-  }
+  mounted() {}
 }
 </script>
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@@ -1,111 +1,38 @@
 <template>
-  <div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': !!streamLibraryItem }">
-    <div class="absolute top-4 left-4 z-20 flex items-center">
-      <button v-if="isEpub" @click="toggleToC" type="button" aria-label="Table of contents menu" class="inline-flex opacity-80 hover:opacity-100">
-        <span class="material-icons text-2xl">menu</span>
-      </button>
-      <button v-if="hasSettings" @click="openSettings" type="button" aria-label="Ereader settings" class="mx-4 inline-flex opacity-80 hover:opacity-100">
-        <span class="material-icons text-1.5xl">settings</span>
-      </button>
+  <div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-60 bg-primary text-white">
+    <div class="absolute top-4 left-4 z-20">
+      <span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl" @click="toggleToC">menu</span>
    </div>

    <div class="absolute top-4 left-1/2 transform -translate-x-1/2">
-      <h1 :data-type="ebookType" class="text-lg sm:text-xl md:text-2xl mb-1 data-[type=comic]:hidden" style="line-height: 1.15; font-weight: 100">
+      <h1 class="text-lg sm:text-xl md:text-2xl mb-1" style="line-height: 1.15; font-weight: 100">
        <span style="font-weight: 600">{{ abTitle }}</span>
-        <span v-if="abAuthor" class="hidden md:inline"> – </span>
-        <span v-if="abAuthor" class="hidden md:inline">{{ abAuthor }}</span>
+        <span v-if="abAuthor" style="display: inline"> – </span>
+        <span v-if="abAuthor">{{ abAuthor }}</span>
      </h1>
    </div>

    <div class="absolute top-4 right-4 z-20">
-      <button @click="close" type="button" aria-label="Close ereader" class="inline-flex opacity-80 hover:opacity-100">
-        <span class="material-icons text-2xl">close</span>
-      </button>
+      <span v-if="hasSettings" class="material-icons cursor-pointer text-2xl" @click="openSettings">settings</span>
+      <span class="material-icons cursor-pointer text-2xl" @click="close">close</span>
    </div>

-    <component v-if="componentName" ref="readerComponent" :is="componentName" :library-item="selectedLibraryItem" :player-open="!!streamLibraryItem" :keep-progress="keepProgress" :file-id="ebookFileId" @touchstart="touchstart" @touchend="touchend" @hook:mounted="readerMounted" />
+    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" :library-item="selectedLibraryItem" />

    <!-- TOC side nav -->
-    <div v-if="tocOpen" class="w-full h-full overflow-y-scroll absolute inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
-    <div v-if="isEpub" class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent>
-      <div class="flex flex-col p-4 h-full">
-        <div class="flex items-center mb-2">
-          <button @click.stop.prevent="toggleToC" type="button" aria-label="Close table of contents" class="inline-flex opacity-80 hover:opacity-100">
-            <span class="material-icons text-2xl">arrow_back</span>
-          </button>
-
-          <p class="text-lg font-semibold ml-2">{{ $strings.HeaderTableOfContents }}</p>
-        </div>
-        <form @submit.prevent="searchBook" @click.stop.prevent>
-          <ui-text-input clearable ref="input" @clear="searchBook" v-model="searchQuery" :placeholder="$strings.PlaceholderSearch" class="h-8 w-full text-sm flex mb-2" />
-        </form>
-
-        <div class="overflow-y-auto">
-          <div v-if="isSearching && !this.searchResults.length" class="w-full h-40 justify-center">
-            <p class="text-center text-xl py-4">{{ $strings.MessageNoResults }}</p>
-          </div>
-
+    <div v-if="tocOpen" class="w-full h-full fixed inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
+    <div v-if="hasToC" class="w-72 h-full max-h-full absolute top-0 left-0 bg-bg shadow-xl transition-transform z-30" :class="tocOpen ? 'translate-x-0' : '-translate-x-72'" @click.stop.prevent="toggleToC">
+      <div class="p-4 h-full overflow-hidden">
+        <p class="text-lg font-semibold mb-2">Table of Contents</p>
+        <div class="tocContent">
          <ul>
-            <li v-for="chapter in isSearching ? this.searchResults : chapters" :key="chapter.id" class="py-1">
-              <a :href="chapter.href" class="opacity-80 hover:opacity-100" @click.prevent="goToChapter(chapter.href)">{{ chapter.title }}</a>
-              <div v-for="searchResults in chapter.searchResults" :key="searchResults.cfi" class="text-sm py-1 pl-4">
-                <a :href="searchResults.cfi" class="opacity-50 hover:opacity-100" @click.prevent="goToChapter(searchResults.cfi)">{{ searchResults.excerpt }}</a>
-              </div>
-
-              <ul v-if="chapter.subitems.length">
-                <li v-for="subchapter in chapter.subitems" :key="subchapter.id" class="py-1 pl-4">
-                  <a :href="subchapter.href" class="opacity-80 hover:opacity-100" @click.prevent="goToChapter(subchapter.href)">{{ subchapter.title }}</a>
-                  <div v-for="subChapterSearchResults in subchapter.searchResults" :key="subChapterSearchResults.cfi" class="text-sm py-1 pl-4">
-                    <a :href="subChapterSearchResults.cfi" class="opacity-50 hover:opacity-100" @click.prevent="goToChapter(subChapterSearchResults.cfi)">{{ subChapterSearchResults.excerpt }}</a>
-                  </div>
-                </li>
-              </ul>
+            <li v-for="chapter in chapters" :key="chapter.id" class="py-1">
+              <a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
-
-    <!-- ereader settings modal -->
-    <modals-modal v-model="showSettings" name="ereader-settings-modal" :width="500" :height="'unset'" :processing="false">
-      <template #outer>
-        <div class="absolute top-0 left-0 p-5 w-3/4 overflow-hidden">
-          <p class="text-xl md:text-3xl text-white truncate">{{ $strings.HeaderEreaderSettings }}</p>
-        </div>
-      </template>
-      <div class="px-2 py-4 md:p-8 w-full text-base rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-x-hidden overflow-y-auto" style="max-height: 80vh">
-        <div class="flex items-center mb-4">
-          <div class="w-40">
-            <p class="text-lg">{{ $strings.LabelTheme }}:</p>
-          </div>
-          <ui-toggle-btns v-model="ereaderSettings.theme" :items="themeItems.theme" @input="settingsUpdated" />
-        </div>
-        <div class="flex items-center mb-4">
-          <div class="w-40">
-            <p class="text-lg">{{ $strings.LabelFontFamily }}:</p>
-          </div>
-          <ui-toggle-btns v-model="ereaderSettings.font" :items="themeItems.font" @input="settingsUpdated" />
-        </div>
-        <div class="flex items-center mb-4">
-          <div class="w-40">
-            <p class="text-lg">{{ $strings.LabelFontScale }}:</p>
-          </div>
-          <ui-range-input v-model="ereaderSettings.fontScale" :min="5" :max="300" :step="5" @input="settingsUpdated" />
-        </div>
-        <div class="flex items-center mb-4">
-          <div class="w-40">
-            <p class="text-lg">{{ $strings.LabelLineSpacing }}:</p>
-          </div>
-          <ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" @input="settingsUpdated" />
-        </div>
-        <div class="flex items-center">
-          <div class="w-40">
-            <p class="text-lg">{{ $strings.LabelLayout }}:</p>
-          </div>
-          <ui-toggle-btns v-model="ereaderSettings.spread" :items="spreadItems" @input="settingsUpdated" />
-        </div>
-      </div>
-    </modals-modal>
  </div>
 </template>

@@ -113,25 +40,8 @@
 export default {
  data() {
    return {
-      touchstartX: 0,
-      touchstartY: 0,
-      touchendX: 0,
-      touchendY: 0,
-      touchstartTime: 0,
-      touchIdentifier: null,
      chapters: [],
-      isSearching: false,
-      searchResults: [],
-      searchQuery: '',
-      tocOpen: false,
-      showSettings: false,
-      ereaderSettings: {
-        theme: 'dark',
-        font: 'serif',
-        fontScale: 100,
-        lineSpacing: 115,
-        spread: 'auto'
-      }
+      tocOpen: false
    }
  },
  watch: {
@@ -150,46 +60,6 @@ export default {
        this.$store.commit('setShowEReader', val)
      }
    },
-    ereaderTheme() {
-      if (this.isEpub) return this.ereaderSettings.theme
-      return 'dark'
-    },
-    spreadItems() {
-      return [
-        {
-          text: this.$strings.LabelLayoutSinglePage,
-          value: 'none'
-        },
-        {
-          text: this.$strings.LabelLayoutSplitPage,
-          value: 'auto'
-        }
-      ]
-    },
-    themeItems() {
-      return {
-        theme: [
-          {
-            text: this.$strings.LabelThemeDark,
-            value: 'dark'
-          },
-          {
-            text: this.$strings.LabelThemeLight,
-            value: 'light'
-          }
-        ],
-        font: [
-          {
-            text: 'Sans',
-            value: 'sans-serif'
-          },
-          {
-            text: 'Serif',
-            value: 'serif'
-          }
-        ]
-      }
-    },
    componentName() {
      if (this.ebookType === 'epub') return 'readers-epub-reader'
      else if (this.ebookType === 'mobi') return 'readers-mobi-reader'
@@ -197,11 +67,11 @@ export default {
      else if (this.ebookType === 'comic') return 'readers-comic-reader'
      return null
    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
+    hasToC() {
+      return this.isEpub
    },
    hasSettings() {
-      return this.isEpub
+      return false
    },
    abTitle() {
      return this.mediaMetadata.title
@@ -225,18 +95,10 @@ export default {
      return this.selectedLibraryItem.folderId
    },
    ebookFile() {
-      // ebook file id is passed when reading a supplementary ebook
-      if (this.ebookFileId) {
-        return this.selectedLibraryItem.libraryFiles.find((lf) => lf.ino === this.ebookFileId)
-      }
      return this.media.ebookFile
    },
    ebookFormat() {
      if (!this.ebookFile) return null
-      // Use file extension for supplementary ebook
-      if (!this.ebookFile.ebookFormat) {
-        return this.ebookFile.metadata.ext.toLowerCase().slice(1)
-      }
      return this.ebookFile.ebookFormat
    },
    ebookType() {
@@ -258,41 +120,33 @@ export default {
    isComic() {
      return this.ebookFormat == 'cbz' || this.ebookFormat == 'cbr'
    },
+    ebookUrl() {
+      if (!this.ebookFile) return null
+      let filepath = ''
+      if (this.selectedLibraryItem.isFile) {
+        filepath = this.$encodeUriPath(this.ebookFile.metadata.filename)
+      } else {
+        const itemRelPath = this.selectedLibraryItem.relPath
+        if (itemRelPath.startsWith('/')) itemRelPath = itemRelPath.slice(1)
+        const relPath = this.ebookFile.metadata.relPath
+        if (relPath.startsWith('/')) relPath = relPath.slice(1)
+
+        filepath = this.$encodeUriPath(`${itemRelPath}/${relPath}`)
+      }
+      return `/ebook/${this.libraryId}/${this.folderId}/${filepath}`
+    },
    userToken() {
      return this.$store.getters['user/getToken']
-    },
-    keepProgress() {
-      return this.$store.state.ereaderKeepProgress
-    },
-    ebookFileId() {
-      return this.$store.state.ereaderFileId
-    },
-    isDarkTheme() {
-      return this.ereaderSettings.theme === 'dark'
    }
  },
  methods: {
-    goToChapter(uri) {
-      this.toggleToC()
-      this.$refs.readerComponent.goToChapter(uri)
-    },
-    readerMounted() {
-      if (this.isEpub) {
-        this.loadEreaderSettings()
-      }
-    },
-    settingsUpdated() {
-      this.$refs.readerComponent?.updateSettings?.(this.ereaderSettings)
-      localStorage.setItem('ereaderSettings', JSON.stringify(this.ereaderSettings))
-    },
    toggleToC() {
      this.tocOpen = !this.tocOpen
      this.chapters = this.$refs.readerComponent.chapters
    },
-    openSettings() {
-      this.showSettings = true
-    },
+    openSettings() {},
    hotkey(action) {
+      console.log('Reader hotkey', action)
      if (!this.$refs.readerComponent) return

      if (action === this.$hotkeys.EReader.NEXT_PAGE) {
@@ -303,95 +157,23 @@ export default {
        this.close()
      }
    },
-    async searchBook() {
-      if (this.searchQuery.length > 1) {
-        this.searchResults = await this.$refs.readerComponent.searchBook(this.searchQuery)
-        this.isSearching = true
-      } else {
-        this.isSearching = false
-        this.searchResults = []
-      }
-    },
    next() {
      if (this.$refs.readerComponent?.next) this.$refs.readerComponent.next()
    },
    prev() {
      if (this.$refs.readerComponent?.prev) this.$refs.readerComponent.prev()
    },
-    handleGesture() {
-      // Touch must be less than 1s. Must be > 60px drag and X distance > Y distance
-      const touchTimeMs = Date.now() - this.touchstartTime
-      if (touchTimeMs >= 1000) {
-        console.log('Touch too long', touchTimeMs)
-        return
-      }
-
-      const touchDistanceX = Math.abs(this.touchendX - this.touchstartX)
-      const touchDistanceY = Math.abs(this.touchendY - this.touchstartY)
-      const touchDistance = Math.sqrt(Math.pow(this.touchstartX - this.touchendX, 2) + Math.pow(this.touchstartY - this.touchendY, 2))
-      if (touchDistance < 60) {
-        return
-      }
-
-      if (touchDistanceX < 60 || touchDistanceY > touchDistanceX) {
-        return
-      }
-
-      if (this.touchendX < this.touchstartX) {
-        this.next()
-      }
-      if (this.touchendX > this.touchstartX) {
-        this.prev()
-      }
-    },
-    touchstart(e) {
-      // Ignore rapid touch
-      if (this.touchstartTime && Date.now() - this.touchstartTime < 250) {
-        return
-      }
-
-      this.touchstartX = e.touches[0].screenX
-      this.touchstartY = e.touches[0].screenY
-      this.touchstartTime = Date.now()
-      this.touchIdentifier = e.touches[0].identifier
-    },
-    touchend(e) {
-      if (this.touchIdentifier !== e.changedTouches[0].identifier) {
-        return
-      }
-
-      this.touchendX = e.changedTouches[0].screenX
-      this.touchendY = e.changedTouches[0].screenY
-      this.handleGesture()
-    },
    registerListeners() {
      this.$eventBus.$on('reader-hotkey', this.hotkey)
-      document.body.addEventListener('touchstart', this.touchstart)
-      document.body.addEventListener('touchend', this.touchend)
    },
    unregisterListeners() {
      this.$eventBus.$off('reader-hotkey', this.hotkey)
-      document.body.removeEventListener('touchstart', this.touchstart)
-      document.body.removeEventListener('touchend', this.touchend)
-    },
-    loadEreaderSettings() {
-      try {
-        const settings = localStorage.getItem('ereaderSettings')
-        if (settings) {
-          this.ereaderSettings = JSON.parse(settings)
-          this.settingsUpdated()
-        }
-      } catch (error) {
-        console.error('Failed to load ereader settings', error)
-      }
    },
    init() {
      this.registerListeners()
    },
    close() {
      this.unregisterListeners()
-      this.isSearching = false
-      this.searchQuery = ''
      this.show = false
    }
  },
@@ -405,15 +187,12 @@ export default {
 </script>

 <style>
-#reader {
-  height: 100%;
+/* @import url(@/assets/calibre/basic.css); */
+.ebook-viewer {
+  height: calc(100% - 96px);
 }
-#reader.reader-player-open {
-  height: calc(100% - 164px);
-}
-@media (max-height: 400px) {
-  #reader.reader-player-open {
-    height: 100%;
-  }
+.tocContent {
+  height: calc(100% - 36px);
+  overflow-y: auto;
 }
 </style>
--- a/client/components/stats/Heatmap.vue
+++ b/client/components/stats/Heatmap.vue
@@ -235,6 +235,7 @@ export default {
          style: `transform:translate(${x}px,${y}px);background-color:${bgColor};outline:1px solid ${outlineColor};outline-offset:-1px;`
        })
      }
+      console.log('Data', this.data)

      this.monthLabels = []
      var lastMonth = null
--- a/client/components/stats/PreviewIcons.vue
+++ b/client/components/stats/PreviewIcons.vue
@@ -18,7 +18,7 @@
      </div>
    </div>

-    <div v-if="isBookLibrary" class="flex px-4">
+    <div class="flex px-4">
      <svg class="h-14 w-14 md:h-18 md:w-18" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
      </svg>
@@ -58,32 +58,26 @@ export default {
    return {}
  },
  computed: {
-    currentLibraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
-    },
-    isBookLibrary() {
-      return this.currentLibraryMediaType === 'book'
-    },
    user() {
      return this.$store.state.user.user
    },
    totalItems() {
-      return this.libraryStats?.totalItems || 0
+      return this.libraryStats ? this.libraryStats.totalItems : 0
    },
    totalAuthors() {
-      return this.libraryStats?.totalAuthors || 0
+      return this.libraryStats ? this.libraryStats.totalAuthors : 0
    },
    numAudioTracks() {
-      return this.libraryStats?.numAudioTracks || 0
+      return this.libraryStats ? this.libraryStats.numAudioTracks : 0
    },
    totalDuration() {
-      return this.libraryStats?.totalDuration || 0
+      return this.libraryStats ? this.libraryStats.totalDuration : 0
    },
    totalHours() {
      return Math.round(this.totalDuration / (60 * 60))
    },
    totalSizePretty() {
-      var totalSize = this.libraryStats?.totalSize || 0
+      var totalSize = this.libraryStats ? this.libraryStats.totalSize : 0
      return this.$bytesPretty(totalSize, 1)
    },
    totalSizeNum() {
--- a/client/components/stats/YearInReview.vue
+++ b/client/components/stats/YearInReview.vue
@@ -1,285 +0,0 @@
-<template>
-  <div>
-    <div v-if="processing" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
-      <widgets-loading-spinner />
-    </div>
-    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    variant: {
-      type: Number,
-      default: 0
-    },
-    year: Number,
-    processing: Boolean
-  },
-  data() {
-    return {
-      canvas: null,
-      dataUrl: null,
-      yearStats: null
-    }
-  },
-  watch: {
-    variant() {
-      this.init()
-    }
-  },
-  methods: {
-    async initCanvas() {
-      if (!this.yearStats) return
-
-      const canvas = document.createElement('canvas')
-      canvas.width = 800
-      canvas.height = 800
-      const ctx = canvas.getContext('2d')
-
-      const createRoundedRect = (x, y, w, h) => {
-        const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
-        grd1.addColorStop(0, '#44444455')
-        grd1.addColorStop(1, '#ffffff11')
-        ctx.fillStyle = grd1
-        ctx.strokeStyle = '#C0C0C088'
-        ctx.beginPath()
-        ctx.roundRect(x, y, w, h, [20])
-        ctx.fill()
-        ctx.stroke()
-      }
-
-      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
-        ctx.fillStyle = color
-        ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
-        ctx.letterSpacing = letterSpacing
-
-        // If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
-        if (maxWidth) {
-          let txtWidth = ctx.measureText(text).width
-          while (txtWidth > maxWidth) {
-            console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
-            if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
-            else text = text.slice(0, -3) // First check remove last 3 chars
-            text += '...'
-            txtWidth = ctx.measureText(text).width
-            console.log(`Checking text "${text}" (width:${txtWidth})`)
-          }
-        }
-
-        ctx.fillText(text, x, y)
-      }
-
-      const addIcon = (icon, color, fontSize, x, y) => {
-        ctx.fillStyle = color
-        ctx.font = `${fontSize} Material Icons Outlined`
-        ctx.fillText(icon, x, y)
-      }
-
-      // Bg color
-      ctx.fillStyle = '#232323'
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-      // Cover image tiles
-      const bookCovers = this.yearStats.finishedBooksWithCovers
-      bookCovers.push(...this.yearStats.booksWithCovers)
-
-      let finishedBookCoverImgs = {}
-
-      if (bookCovers.length) {
-        let index = 0
-        ctx.globalAlpha = 0.25
-        ctx.save()
-        ctx.translate(canvas.width / 2, canvas.height / 2)
-        ctx.rotate((-Math.PI / 180) * 25)
-        ctx.translate(-canvas.width / 2, -canvas.height / 2)
-        ctx.translate(-130, -120)
-        for (let x = 0; x < 5; x++) {
-          for (let y = 0; y < 5; y++) {
-            const coverIndex = index % bookCovers.length
-            let libraryItemId = bookCovers[coverIndex]
-            index++
-
-            await new Promise((resolve) => {
-              const img = new Image()
-              img.crossOrigin = 'anonymous'
-              img.addEventListener('load', () => {
-                let sw = img.width
-                if (img.width > img.height) {
-                  sw = img.height
-                }
-                let sx = -(sw - img.width) / 2
-                let sy = -(sw - img.height) / 2
-                ctx.drawImage(img, sx, sy, sw, sw, 215 * x, 215 * y, 215, 215)
-                resolve()
-                if (this.yearStats.finishedBooksWithCovers.includes(libraryItemId) && !finishedBookCoverImgs[libraryItemId]) {
-                  finishedBookCoverImgs[libraryItemId] = {
-                    img,
-                    sx,
-                    sy,
-                    sw
-                  }
-                }
-              })
-              img.addEventListener('error', () => {
-                resolve()
-              })
-              img.src = this.$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)
-            })
-          }
-        }
-        ctx.restore()
-      }
-
-      ctx.globalAlpha = 1
-      ctx.textBaseline = 'middle'
-
-      // Create gradient
-      const grd1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
-      grd1.addColorStop(0, '#000000aa')
-      grd1.addColorStop(1, '#cd9d49aa')
-      ctx.fillStyle = grd1
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-      // Top Abs icon
-      let tanColor = '#ffdb70'
-      ctx.fillStyle = tanColor
-      ctx.font = '42px absicons'
-      ctx.fillText('\ue900', 15, 36)
-
-      // Top text
-      addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
-      addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51)
-
-      // Top left box
-      createRoundedRect(50, 100, 340, 160)
-      addText(this.yearStats.numBooksFinished, '64px', 'bold', 'white', '0px', 160, 165)
-      addText('books finished', '28px', 'normal', tanColor, '0px', 160, 210)
-      const readIconPath = new Path2D()
-      readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 2, d: 2, e: 100, f: 160 })
-      ctx.fillStyle = '#ffffff'
-      ctx.fill(readIconPath)
-
-      // Box top right
-      createRoundedRect(410, 100, 340, 160)
-      addText(this.$elapsedPrettyExtended(this.yearStats.totalListeningTime, true, false), '40px', 'bold', 'white', '0px', 500, 165)
-      addText('spent listening', '28px', 'normal', tanColor, '0px', 500, 205)
-      addIcon('watch_later', 'white', '52px', 440, 180)
-
-      // Box bottom left
-      createRoundedRect(50, 280, 340, 160)
-      addText(this.yearStats.totalListeningSessions, '64px', 'bold', 'white', '0px', 160, 345)
-      addText('sessions', '28px', 'normal', tanColor, '1px', 160, 390)
-      addIcon('headphones', 'white', '52px', 95, 360)
-
-      // Box bottom right
-      createRoundedRect(410, 280, 340, 160)
-      addText(this.yearStats.numBooksListened, '64px', 'bold', 'white', '0px', 500, 345)
-      addText('books listened to', '28px', 'normal', tanColor, '0px', 500, 390)
-      addIcon('local_library', 'white', '52px', 440, 360)
-
-      if (!this.variant) {
-        // Text stats
-        const topNarrator = this.yearStats.mostListenedNarrator
-        if (topNarrator) {
-          addText('TOP NARRATOR', '24px', 'normal', tanColor, '1px', 70, 520)
-          addText(topNarrator.name, '36px', 'bolder', 'white', '0px', 70, 564, 330)
-          addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '24px', 'lighter', 'white', '1px', 70, 599)
-        }
-
-        const topGenre = this.yearStats.topGenres[0]
-        if (topGenre) {
-          addText('TOP GENRE', '24px', 'normal', tanColor, '1px', 430, 520)
-          addText(topGenre.genre, '36px', 'bolder', 'white', '0px', 430, 564, 330)
-          addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '24px', 'lighter', 'white', '1px', 430, 599)
-        }
-
-        const topAuthor = this.yearStats.topAuthors[0]
-        if (topAuthor) {
-          addText('TOP AUTHOR', '24px', 'normal', tanColor, '1px', 70, 670)
-          addText(topAuthor.name, '36px', 'bolder', 'white', '0px', 70, 714, 330)
-          addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '24px', 'lighter', 'white', '1px', 70, 749)
-        }
-
-        if (this.yearStats.mostListenedMonth?.time) {
-          const jsdate = new Date(this.year, this.yearStats.mostListenedMonth.month, 1)
-          const monthName = this.$formatJsDate(jsdate, 'LLLL')
-          addText('TOP MONTH', '24px', 'normal', tanColor, '1px', 430, 670)
-          addText(monthName, '36px', 'bolder', 'white', '0px', 430, 714, 330)
-          addText(this.$elapsedPrettyExtended(this.yearStats.mostListenedMonth.time, true, false), '24px', 'lighter', 'white', '1px', 430, 749)
-        }
-      } else if (this.variant === 1) {
-        // Bottom images
-        finishedBookCoverImgs = Object.values(finishedBookCoverImgs)
-        if (finishedBookCoverImgs.length > 0) {
-          ctx.textAlign = 'center'
-          addText('Some books finished this year...', '28px', 'normal', tanColor, '0px', canvas.width / 2, 530)
-
-          for (let i = 0; i < Math.min(5, finishedBookCoverImgs.length); i++) {
-            let imgToAdd = finishedBookCoverImgs[i]
-            ctx.drawImage(imgToAdd.img, imgToAdd.sx, imgToAdd.sy, imgToAdd.sw, imgToAdd.sw, 40 + 145 * i, 570, 140, 140)
-          }
-        }
-      } else if (this.variant === 2) {
-        // Text stats
-        if (this.yearStats.topAuthors.length) {
-          addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 524)
-          for (let i = 0; i < this.yearStats.topAuthors.length; i++) {
-            addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 584 + i * 60, 330)
-          }
-        }
-
-        if (this.yearStats.topGenres.length) {
-          addText('TOP GENRES', '24px', 'normal', tanColor, '1px', 430, 524)
-          for (let i = 0; i < this.yearStats.topGenres.length; i++) {
-            addText(this.yearStats.topGenres[i].genre, '36px', 'bolder', 'white', '0px', 430, 584 + i * 60, 330)
-          }
-        }
-      }
-
-      this.canvas = canvas
-      this.dataUrl = canvas.toDataURL('png')
-    },
-    refresh() {
-      this.init()
-    },
-    share() {
-      this.canvas.toBlob((blob) => {
-        const file = new File([blob], 'yearinreview.png', { type: blob.type })
-        const shareData = {
-          files: [file]
-        }
-        if (navigator.canShare(shareData)) {
-          navigator
-            .share(shareData)
-            .then(() => {
-              console.log('Share success')
-            })
-            .catch((error) => {
-              console.error('Failed to share', error)
-              if (error.name !== 'AbortError') {
-                this.$toast.error('Failed to share: ' + error.message)
-              }
-            })
-        } else {
-          this.$toast.error('Cannot share natively on this device')
-        }
-      })
-    },
-    async init() {
-      this.$emit('update:processing', true)
-      this.yearStats = await this.$axios.$get(`/api/me/stats/year/${this.year}`).catch((err) => {
-        console.error('Failed to load stats for year', err)
-        this.$toast.error('Failed to load year stats')
-        return null
-      })
-      await this.initCanvas()
-      this.$emit('update:processing', false)
-    }
-  },
-  mounted() {
-    this.init()
-  }
-}
-</script>
--- a/client/components/stats/YearInReviewBanner.vue
+++ b/client/components/stats/YearInReviewBanner.vue
@@ -1,141 +0,0 @@
-<template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-1 sm:p-4 mb-4">
-    <!-- hack to get icon fonts loaded on init -->
-    <div class="h-0 w-0 overflow-hidden opacity-0">
-      <span class="material-icons-outlined">close</span>
-      <span class="abs-icons icon-audiobookshelf" />
-    </div>
-
-    <div class="flex items-center">
-      <p class="hidden md:block text-xl font-semibold">{{ yearInReviewYear }} Year in Review</p>
-      <div class="hidden md:block flex-grow" />
-      <ui-btn class="w-full md:w-auto" @click.stop="clickShowYearInReview">{{ showYearInReview ? 'Hide Year in Review' : 'See Year in Review' }}</ui-btn>
-    </div>
-
-    <!-- your year in review -->
-    <div v-if="showYearInReview">
-      <div class="w-full h-px bg-slate-200/10 my-4" />
-
-      <div class="flex items-center justify-center mb-2 max-w-[800px] mx-auto">
-        <!-- previous button -->
-        <ui-btn small :disabled="!yearInReviewVariant || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant--">
-          <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
-          <span class="hidden sm:inline-block pr-2">Previous</span>
-        </ui-btn>
-        <!-- share button -->
-        <ui-btn v-if="showShareButton" small :disabled="processingYearInReview" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReview"> Share </ui-btn>
-
-        <div class="flex-grow" />
-        <p class="hidden sm:block text-lg font-semibold">Your Year in Review ({{ yearInReviewVariant + 1 }})</p>
-        <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewVariant + 1 }}</p>
-        <div class="flex-grow" />
-
-        <!-- refresh button -->
-        <ui-btn small :disabled="processingYearInReview" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReview">
-          <span class="hidden sm:inline-block">Refresh</span>
-          <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
-        </ui-btn>
-        <!-- next button -->
-        <ui-btn small :disabled="yearInReviewVariant >= 2 || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant++">
-          <span class="hidden sm:inline-block pl-2">Next</span>
-          <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
-        </ui-btn>
-      </div>
-      <stats-year-in-review ref="yearInReview" :variant="yearInReviewVariant" :year="yearInReviewYear" :processing.sync="processingYearInReview" />
-
-      <!-- your year in review short -->
-      <div class="w-full max-w-[800px] mx-auto my-4">
-        <!-- share button -->
-        <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewShort" class="inline-flex sm:hidden items-center font-semibold mb-1" @click="shareYearInReviewShort"> Share </ui-btn>
-        <stats-year-in-review-short ref="yearInReviewShort" :year="yearInReviewYear" :processing.sync="processingYearInReviewShort" />
-      </div>
-
-      <!-- your server in review -->
-      <div v-if="isAdminOrUp" class="w-full max-w-[800px] mx-auto mb-2 mt-4 border-t pt-4 border-white/10">
-        <div class="flex items-center justify-center mb-2">
-          <!-- previous button -->
-          <ui-btn small :disabled="!yearInReviewServerVariant || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant--">
-            <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
-            <span class="hidden sm:inline-block pr-2">Previous</span>
-          </ui-btn>
-          <!-- share button -->
-          <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewServer" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReviewServer"> Share </ui-btn>
-
-          <div class="flex-grow" />
-          <p class="hidden sm:block text-lg font-semibold">Server Year in Review ({{ yearInReviewServerVariant + 1 }})</p>
-          <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewServerVariant + 1 }}</p>
-          <div class="flex-grow" />
-
-          <!-- refresh button -->
-          <ui-btn small :disabled="processingYearInReviewServer" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReviewServer">
-            <span class="hidden sm:inline-block">Refresh</span>
-            <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
-          </ui-btn>
-          <!-- next button -->
-          <ui-btn small :disabled="yearInReviewServerVariant >= 2 || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant++">
-            <span class="hidden sm:inline-block pl-2">Next</span>
-            <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
-          </ui-btn>
-        </div>
-      </div>
-      <stats-year-in-review-server v-if="isAdminOrUp" ref="yearInReviewServer" :year="yearInReviewYear" :variant="yearInReviewServerVariant" :processing.sync="processingYearInReviewServer" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      showYearInReview: false,
-      yearInReviewYear: 0,
-      yearInReviewVariant: 0,
-      yearInReviewServerVariant: 0,
-      processingYearInReview: false,
-      processingYearInReviewShort: false,
-      processingYearInReviewServer: false,
-      showShareButton: false
-    }
-  },
-  computed: {
-    isAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    }
-  },
-  methods: {
-    shareYearInReviewServer() {
-      this.$refs.yearInReviewServer.share()
-    },
-    shareYearInReview() {
-      this.$refs.yearInReview.share()
-    },
-    shareYearInReviewShort() {
-      this.$refs.yearInReviewShort.share()
-    },
-    refreshYearInReviewServer() {
-      this.$refs.yearInReviewServer.refresh()
-    },
-    refreshYearInReview() {
-      this.$refs.yearInReview.refresh()
-      this.$refs.yearInReviewShort.refresh()
-    },
-    clickShowYearInReview() {
-      this.showYearInReview = !this.showYearInReview
-    }
-  },
-  beforeMount() {
-    this.yearInReviewYear = new Date().getFullYear()
-    // When not December show previous year
-    if (new Date().getMonth() < 11) {
-      this.yearInReviewYear--
-    }
-  },
-  mounted() {
-    if (typeof navigator.share !== 'undefined' && navigator.share) {
-      this.showShareButton = true
-    } else {
-      console.warn('Navigator.share not supported')
-    }
-  }
-}
-</script>
--- a/client/components/stats/YearInReviewServer.vue
+++ b/client/components/stats/YearInReviewServer.vue
@@ -1,264 +0,0 @@
-<template>
-  <div>
-    <div v-if="processing" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
-      <widgets-loading-spinner />
-    </div>
-    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    variant: {
-      type: Number,
-      default: 0
-    },
-    processing: Boolean,
-    year: Number
-  },
-  data() {
-    return {
-      canvas: null,
-      dataUrl: null,
-      yearStats: null
-    }
-  },
-  watch: {
-    variant() {
-      this.init()
-    }
-  },
-  methods: {
-    async initCanvas() {
-      if (!this.yearStats) return
-
-      const canvas = document.createElement('canvas')
-      canvas.width = 800
-      canvas.height = 800
-      const ctx = canvas.getContext('2d')
-
-      const createRoundedRect = (x, y, w, h) => {
-        const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
-        grd1.addColorStop(0, '#44444455')
-        grd1.addColorStop(1, '#ffffff11')
-        ctx.fillStyle = grd1
-        ctx.strokeStyle = '#C0C0C088'
-        ctx.beginPath()
-        ctx.roundRect(x, y, w, h, [20])
-        ctx.fill()
-        ctx.stroke()
-      }
-
-      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
-        ctx.fillStyle = color
-        ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
-        ctx.letterSpacing = letterSpacing
-
-        // If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
-        if (maxWidth) {
-          let txtWidth = ctx.measureText(text).width
-          while (txtWidth > maxWidth) {
-            console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
-            if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
-            else text = text.slice(0, -3) // First check remove last 3 chars
-            text += '...'
-            txtWidth = ctx.measureText(text).width
-            console.log(`Checking text "${text}" (width:${txtWidth})`)
-          }
-        }
-
-        ctx.fillText(text, x, y)
-      }
-
-      // Bg color
-      ctx.fillStyle = '#232323'
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-      // Cover image tiles
-      let imgsToAdd = {}
-
-      if (this.yearStats.booksAddedWithCovers.length) {
-        let index = 0
-        ctx.globalAlpha = 0.25
-        ctx.save()
-        ctx.translate(canvas.width / 2, canvas.height / 2)
-        ctx.rotate((-Math.PI / 180) * 25)
-        ctx.translate(-canvas.width / 2, -canvas.height / 2)
-        ctx.translate(-130, -120)
-        for (let x = 0; x < 5; x++) {
-          for (let y = 0; y < 5; y++) {
-            const coverIndex = index % this.yearStats.booksAddedWithCovers.length
-            let libraryItemId = this.yearStats.booksAddedWithCovers[coverIndex]
-            index++
-
-            await new Promise((resolve) => {
-              const img = new Image()
-              img.crossOrigin = 'anonymous'
-              img.addEventListener('load', () => {
-                let sw = img.width
-                if (img.width > img.height) {
-                  sw = img.height
-                }
-                let sx = -(sw - img.width) / 2
-                let sy = -(sw - img.height) / 2
-                ctx.drawImage(img, sx, sy, sw, sw, 215 * x, 215 * y, 215, 215)
-                if (!imgsToAdd[libraryItemId]) {
-                  imgsToAdd[libraryItemId] = {
-                    img,
-                    sx,
-                    sy,
-                    sw
-                  }
-                }
-                resolve()
-              })
-              img.addEventListener('error', () => {
-                resolve()
-              })
-              img.src = this.$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)
-            })
-          }
-        }
-        ctx.restore()
-      }
-
-      ctx.globalAlpha = 1
-      ctx.textBaseline = 'middle'
-
-      // Create gradient
-      const grd1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
-      grd1.addColorStop(0, '#000000aa')
-      grd1.addColorStop(1, '#cd9d49aa')
-      ctx.fillStyle = grd1
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-      // Top Abs icon
-      let tanColor = '#ffdb70'
-      ctx.fillStyle = tanColor
-      ctx.font = '42px absicons'
-      ctx.fillText('\ue900', 15, 36)
-
-      // Top text
-      addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
-      addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51)
-
-      // Top left box
-      createRoundedRect(40, 100, 230, 100)
-      ctx.textAlign = 'center'
-      addText(this.yearStats.numBooksAdded, '48px', 'bold', 'white', '0px', 155, 140)
-      addText('books added', '18px', 'normal', tanColor, '0px', 155, 170)
-
-      // Box top right
-      createRoundedRect(285, 100, 230, 100)
-      addText(this.yearStats.numAuthorsAdded, '48px', 'bold', 'white', '0px', 400, 140)
-      addText('authors added', '18px', 'normal', tanColor, '0px', 400, 170)
-
-      // Box bottom left
-      createRoundedRect(530, 100, 230, 100)
-      addText(this.yearStats.numListeningSessions, '48px', 'bold', 'white', '0px', 645, 140)
-      addText('sessions', '18px', 'normal', tanColor, '1px', 645, 170)
-
-      // Text stats
-      if (this.yearStats.totalBooksAddedSize) {
-        addText('Your book collection grew to...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 260)
-        addText(this.$bytesPretty(this.yearStats.totalBooksSize), '36px', 'bolder', 'white', '0px', canvas.width / 2, 300)
-        addText('+' + this.$bytesPretty(this.yearStats.totalBooksAddedSize), '20px', 'lighter', 'white', '0px', canvas.width / 2, 330)
-      }
-
-      if (this.yearStats.totalBooksAddedDuration) {
-        addText('With a total duration of...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 400)
-        addText(this.$elapsedPrettyExtended(this.yearStats.totalBooksDuration, true, false), '36px', 'bolder', 'white', '0px', canvas.width / 2, 440)
-        addText('+' + this.$elapsedPrettyExtended(this.yearStats.totalBooksAddedDuration, true, false), '20px', 'lighter', 'white', '0px', canvas.width / 2, 470)
-      }
-
-      if (!this.variant) {
-        // Bottom images
-        imgsToAdd = Object.values(imgsToAdd)
-        if (imgsToAdd.length > 0) {
-          addText('Some additions include...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 540)
-
-          for (let i = 0; i < Math.min(5, imgsToAdd.length); i++) {
-            let imgToAdd = imgsToAdd[i]
-            ctx.drawImage(imgToAdd.img, imgToAdd.sx, imgToAdd.sy, imgToAdd.sw, imgToAdd.sw, 40 + 145 * i, 580, 140, 140)
-          }
-        }
-      } else if (this.variant === 1) {
-        // Text stats
-        ctx.textAlign = 'left'
-        if (this.yearStats.topAuthors.length) {
-          addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 549)
-          for (let i = 0; i < this.yearStats.topAuthors.length; i++) {
-            addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330)
-          }
-        }
-
-        if (this.yearStats.topNarrators.length) {
-          addText('TOP NARRATORS', '24px', 'normal', tanColor, '1px', 430, 549)
-          for (let i = 0; i < this.yearStats.topNarrators.length; i++) {
-            addText(this.yearStats.topNarrators[i].name, '36px', 'bolder', 'white', '0px', 430, 609 + i * 60, 330)
-          }
-        }
-      } else if (this.variant === 2) {
-        // Text stats
-        ctx.textAlign = 'left'
-        if (this.yearStats.topAuthors.length) {
-          addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 549)
-          for (let i = 0; i < this.yearStats.topAuthors.length; i++) {
-            addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330)
-          }
-        }
-
-        if (this.yearStats.topGenres.length) {
-          addText('TOP GENRES', '24px', 'normal', tanColor, '1px', 430, 549)
-          for (let i = 0; i < this.yearStats.topGenres.length; i++) {
-            addText(this.yearStats.topGenres[i].genre, '36px', 'bolder', 'white', '0px', 430, 609 + i * 60, 330)
-          }
-        }
-      }
-
-      this.canvas = canvas
-      this.dataUrl = canvas.toDataURL('png')
-    },
-    share() {
-      this.canvas.toBlob((blob) => {
-        const file = new File([blob], 'yearinreviewserver.png', { type: blob.type })
-        const shareData = {
-          files: [file]
-        }
-        if (navigator.canShare(shareData)) {
-          navigator
-            .share(shareData)
-            .then(() => {
-              console.log('Share success')
-            })
-            .catch((error) => {
-              console.error('Failed to share', error)
-              if (error.name !== 'AbortError') {
-                this.$toast.error('Failed to share: ' + error.message)
-              }
-            })
-        } else {
-          this.$toast.error('Cannot share natively on this device')
-        }
-      })
-    },
-    refresh() {
-      this.init()
-    },
-    async init() {
-      this.$emit('update:processing', true)
-      this.yearStats = await this.$axios.$get(`/api/stats/year/${this.year}`).catch((err) => {
-        console.error('Failed to load stats for year', err)
-        this.$toast.error('Failed to load year stats')
-        return null
-      })
-      await this.initCanvas()
-      this.$emit('update:processing', false)
-    }
-  },
-  mounted() {
-    this.init()
-  }
-}
-</script>
--- a/client/components/stats/YearInReviewShort.vue
+++ b/client/components/stats/YearInReviewShort.vue
@@ -1,194 +0,0 @@
-<template>
-  <div>
-    <div v-if="processing" class="max-w-[600px] h-32 sm:h-[200px] flex items-center justify-center">
-      <widgets-loading-spinner />
-    </div>
-    <img v-else-if="dataUrl" :src="dataUrl" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    processing: Boolean,
-    year: Number
-  },
-  data() {
-    return {
-      canvas: null,
-      dataUrl: null,
-      yearStats: null
-    }
-  },
-  methods: {
-    async initCanvas() {
-      if (!this.yearStats) return
-
-      const canvas = document.createElement('canvas')
-      canvas.width = 600
-      canvas.height = 200
-      const ctx = canvas.getContext('2d')
-
-      const createRoundedRect = (x, y, w, h) => {
-        const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
-        grd1.addColorStop(0, '#44444455')
-        grd1.addColorStop(1, '#ffffff11')
-        ctx.fillStyle = grd1
-        ctx.strokeStyle = '#C0C0C088'
-        ctx.beginPath()
-        ctx.roundRect(x, y, w, h, [20])
-        ctx.fill()
-        ctx.stroke()
-      }
-
-      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
-        ctx.fillStyle = color
-        ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
-        ctx.letterSpacing = letterSpacing
-
-        // If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
-        if (maxWidth) {
-          let txtWidth = ctx.measureText(text).width
-          while (txtWidth > maxWidth) {
-            console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
-            if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
-            else text = text.slice(0, -3) // First check remove last 3 chars
-            text += '...'
-            txtWidth = ctx.measureText(text).width
-            console.log(`Checking text "${text}" (width:${txtWidth})`)
-          }
-        }
-
-        ctx.fillText(text, x, y)
-      }
-
-      const addIcon = (icon, color, fontSize, x, y) => {
-        ctx.fillStyle = color
-        ctx.font = `${fontSize} Material Icons Outlined`
-        ctx.fillText(icon, x, y)
-      }
-
-      // Bg color
-      ctx.fillStyle = '#232323'
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-      // Cover image tiles
-      const bookCovers = this.yearStats.finishedBooksWithCovers
-      bookCovers.push(...this.yearStats.booksWithCovers)
-
-      if (bookCovers.length) {
-        let index = 0
-        ctx.globalAlpha = 0.25
-        ctx.save()
-        ctx.translate(canvas.width / 2, canvas.height / 2)
-        ctx.rotate((-Math.PI / 180) * 25)
-        ctx.translate(-canvas.width / 2, -canvas.height / 2)
-        ctx.translate(-10, -90)
-        for (let x = 0; x < 4; x++) {
-          for (let y = 0; y < 3; y++) {
-            const coverIndex = index % bookCovers.length
-            let libraryItemId = bookCovers[coverIndex]
-            index++
-
-            await new Promise((resolve) => {
-              const img = new Image()
-              img.crossOrigin = 'anonymous'
-              img.addEventListener('load', () => {
-                let sw = img.width
-                if (img.width > img.height) {
-                  sw = img.height
-                }
-                let sx = -(sw - img.width) / 2
-                let sy = -(sw - img.height) / 2
-                ctx.drawImage(img, sx, sy, sw, sw, 155 * x, 155 * y, 155, 155)
-                resolve()
-              })
-              img.addEventListener('error', () => {
-                resolve()
-              })
-              img.src = this.$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)
-            })
-          }
-        }
-        ctx.restore()
-      }
-
-      ctx.globalAlpha = 1
-      ctx.textBaseline = 'middle'
-
-      // Create gradient
-      const grd1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
-      grd1.addColorStop(0, '#000000aa')
-      grd1.addColorStop(1, '#cd9d49aa')
-      ctx.fillStyle = grd1
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-      // Top Abs icon
-      let tanColor = '#ffdb70'
-      ctx.fillStyle = tanColor
-      ctx.font = '42px absicons'
-      ctx.fillText('\ue900', 15, 36)
-
-      // Top text
-      addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
-      addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51)
-
-      // Top left box
-      createRoundedRect(15, 75, 280, 110)
-      addText(this.yearStats.numBooksFinished, '48px', 'bold', 'white', '0px', 105, 120)
-      addText('books finished', '20px', 'normal', tanColor, '0px', 105, 155)
-      const readIconPath = new Path2D()
-      readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 1.5, d: 1.5, e: 55, f: 115 })
-      ctx.fillStyle = '#ffffff'
-      ctx.fill(readIconPath)
-
-      createRoundedRect(305, 75, 280, 110)
-      addText(this.yearStats.numBooksListened, '48px', 'bold', 'white', '0px', 400, 120)
-      addText('books listened to', '20px', 'normal', tanColor, '0px', 400, 155)
-      addIcon('local_library', 'white', '42px', 345, 130)
-
-      this.canvas = canvas
-      this.dataUrl = canvas.toDataURL('png')
-    },
-    share() {
-      this.canvas.toBlob((blob) => {
-        const file = new File([blob], 'yearinreviewshort.png', { type: blob.type })
-        const shareData = {
-          files: [file]
-        }
-        if (navigator.canShare(shareData)) {
-          navigator
-            .share(shareData)
-            .then(() => {
-              console.log('Share success')
-            })
-            .catch((error) => {
-              console.error('Failed to share', error)
-              if (error.name !== 'AbortError') {
-                this.$toast.error('Failed to share: ' + error.message)
-              }
-            })
-        } else {
-          this.$toast.error('Cannot share natively on this device')
-        }
-      })
-    },
-    refresh() {
-      this.init()
-    },
-    async init() {
-      this.$emit('update:processing', true)
-      this.yearStats = await this.$axios.$get(`/api/me/stats/year/${this.year}`).catch((err) => {
-        console.error('Failed to load stats for year', err)
-        this.$toast.error('Failed to load year stats')
-        return null
-      })
-      await this.initCanvas()
-      this.$emit('update:processing', false)
-    }
-  },
-  mounted() {
-    this.init()
-  }
-}
-</script>
--- a/client/components/tables/AudioTracksTableRow.vue
+++ b/client/components/tables/AudioTracksTableRow.vue
@@ -17,7 +17,7 @@
      {{ $secondsToTimestamp(track.duration) }}
    </td>
    <td v-if="contextMenuItems.length" class="text-center">
-      <ui-context-menu-dropdown :items="contextMenuItems" :menu-width="110" @action="contextMenuAction" />
+      <ui-context-menu-dropdown :items="contextMenuItems" menu-width="110px" @action="contextMenuAction" />
    </td>
  </tr>
 </template>
@@ -73,11 +73,11 @@ export default {
      return items
    },
    downloadUrl() {
-      return `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${this.track.audioFile.ino}/download?token=${this.userToken}`
+      return `${process.env.serverUrl}/s/item/${this.libraryItemId}/${this.$encodeUriPath(this.track.metadata.relPath).replace(/^\//, '')}?token=${this.userToken}`
    }
  },
  methods: {
-    contextMenuAction({ action }) {
+    contextMenuAction(action) {
      if (action === 'delete') {
        this.deleteLibraryFile()
      } else if (action === 'download') {
@@ -88,7 +88,7 @@ export default {
    },
    deleteLibraryFile() {
      const payload = {
-        message: this.$strings.MessageConfirmDeleteFile,
+        message: 'This will delete the file from your file system. Are you sure?',
        callback: (confirmed) => {
          if (confirmed) {
            this.$axios
@@ -107,7 +107,15 @@ export default {
      this.$store.commit('globals/setConfirmPrompt', payload)
    },
    downloadLibraryFile() {
-      this.$downloadFile(this.downloadUrl, this.track.metadata.filename)
+      const a = document.createElement('a')
+      a.style.display = 'none'
+      a.href = this.downloadUrl
+      a.download = this.track.metadata.filename
+      document.body.appendChild(a)
+      a.click()
+      setTimeout(() => {
+        a.remove()
+      })
    }
  },
  mounted() {}
--- a/client/components/tables/BackupsTable.vue
+++ b/client/components/tables/BackupsTable.vue
@@ -21,14 +21,14 @@
          <td class="hidden sm:table-cell font-mono md:text-sm text-xs">{{ $bytesPretty(backup.fileSize) }}</td>
          <td>
            <div class="w-full flex flex-row items-center justify-center">
-              <ui-btn v-if="backup.serverVersion && backup.key" small color="primary" @click="applyBackup(backup)">{{ $strings.ButtonRestore }}</ui-btn>
+              <ui-btn v-if="backup.serverVersion" small color="primary" @click="applyBackup(backup)">{{ $strings.ButtonRestore }}</ui-btn>
+
+              <a v-if="backup.serverVersion" :href="`/metadata/${$encodeUriPath(backup.path)}?token=${userToken}`" class="mx-1 pt-1 hover:text-opacity-100 text-opacity-70 text-white" download><span class="material-icons text-xl">download</span></a>
              <ui-tooltip v-else text="This backup was created with an old version of audiobookshelf no longer supported" direction="bottom" class="mx-2 flex items-center">
                <span class="material-icons-outlined text-2xl text-error">error_outline</span>
              </ui-tooltip>

-              <button aria-label="Download Backup" class="inline-flex material-icons text-xl mx-1 mt-1 text-white/70 hover:text-white/100" @click.stop="downloadBackup(backup)">download</button>
-
-              <button aria-label="Delete Backup" class="inline-flex material-icons text-xl mx-1 text-white/70 hover:text-error" @click="deleteBackupClick(backup)">delete</button>
+              <span class="material-icons text-xl hover:text-error hover:text-opacity-100 text-opacity-70 text-white cursor-pointer mx-1" @click="deleteBackupClick(backup)">delete</span>
            </div>
          </td>
        </tr>
@@ -80,9 +80,6 @@ export default {
    }
  },
  methods: {
-    downloadBackup(backup) {
-      this.$downloadFile(`${process.env.serverUrl}/api/backups/${backup.id}/download?token=${this.userToken}`)
-    },
    confirm() {
      this.showConfirmApply = false

@@ -94,9 +91,8 @@ export default {
        })
        .catch((error) => {
          this.isBackingUp = false
-          console.error('Failed to apply backup', error)
-          const errorMsg = error.response.data || this.$strings.ToastBackupRestoreFailed
-          this.$toast.error(errorMsg)
+          console.error('Failed', error)
+          this.$toast.error(this.$strings.ToastBackupRestoreFailed)
        })
    },
    deleteBackupClick(backup) {
@@ -164,7 +160,6 @@ export default {
      this.$axios
        .$get('/api/backups')
        .then((data) => {
-          this.$emit('loaded', data.backupLocation)
          this.setBackups(data.backups || [])
        })
        .catch((error) => {
--- a/client/components/tables/EbookFilesTable.vue
+++ b/client/components/tables/EbookFilesTable.vue
@@ -1,95 +0,0 @@
-<template>
-  <div class="w-full my-2">
-    <div class="w-full bg-primary px-4 md:px-6 py-2 flex items-center cursor-pointer" @click.stop="clickBar">
-      <p class="pr-2 md:pr-4">{{ $strings.HeaderEbookFiles }}</p>
-      <div class="h-5 md:h-7 w-5 md:w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
-        <span class="text-sm font-mono">{{ ebookFiles.length }}</span>
-      </div>
-      <div class="flex-grow" />
-      <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="toggleFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
-      <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showFiles ? 'transform rotate-180' : ''">
-        <span class="material-icons text-4xl">expand_more</span>
-      </div>
-    </div>
-    <transition name="slide">
-      <div class="w-full" v-show="showFiles">
-        <table class="text-sm tracksTable">
-          <tr>
-            <th class="text-left px-4">{{ $strings.LabelPath }}</th>
-            <th class="text-left w-24 min-w-24">{{ $strings.LabelSize }}</th>
-            <th class="text-left px-4 w-24">
-              {{ $strings.LabelRead }} <ui-tooltip :text="$strings.LabelReadEbookWithoutProgress" direction="top" class="inline-block"><span class="material-icons-outlined text-sm align-middle">info</span></ui-tooltip>
-            </th>
-            <th v-if="showMoreColumn" class="text-center w-16"></th>
-          </tr>
-          <template v-for="file in ebookFiles">
-            <tables-ebook-files-table-row :key="file.path" :libraryItemId="libraryItemId" :showFullPath="showFullPath" :file="file" @read="readEbook" />
-          </template>
-        </table>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      showFiles: false,
-      showFullPath: false
-    }
-  },
-  computed: {
-    libraryItemId() {
-      return this.libraryItem.id
-    },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
-    userCanDownload() {
-      return this.$store.getters['user/getUserCanDownload']
-    },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
-    },
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
-    },
-    userIsAdmin() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
-    libraryIsAudiobooksOnly() {
-      return this.$store.getters['libraries/getLibraryIsAudiobooksOnly']
-    },
-    showMoreColumn() {
-      return this.userCanDelete || this.userCanDownload || (this.userCanUpdate && !this.libraryIsAudiobooksOnly)
-    },
-    ebookFiles() {
-      return (this.libraryItem.libraryFiles || []).filter((lf) => lf.fileType === 'ebook')
-    }
-  },
-  methods: {
-    toggleFullPath() {
-      this.showFullPath = !this.showFullPath
-      localStorage.setItem('showFullPath', this.showFullPath ? 1 : 0)
-    },
-    readEbook(fileIno) {
-      this.$store.commit('showEReader', { libraryItem: this.libraryItem, keepProgress: false, fileId: fileIno })
-    },
-    clickBar() {
-      this.showFiles = !this.showFiles
-    }
-  },
-  mounted() {
-    if (this.userIsAdmin) {
-      this.showFullPath = !!Number(localStorage.getItem('showFullPath') || 0)
-    }
-  }
-}
-</script>
--- a/client/components/tables/EbookFilesTableRow.vue
+++ b/client/components/tables/EbookFilesTableRow.vue
@@ -1,139 +0,0 @@
-<template>
-  <tr>
-    <td class="px-4">
-      {{ showFullPath ? file.metadata.path : file.metadata.relPath }} <ui-tooltip :text="$strings.LabelPrimaryEbook" class="inline-block"><span v-if="isPrimary" class="material-icons-outlined text-success align-text-bottom">check_circle</span></ui-tooltip>
-    </td>
-    <td>
-      {{ $bytesPretty(file.metadata.size) }}
-    </td>
-    <td class="text-xs">
-      <ui-icon-btn icon="auto_stories" outlined borderless icon-font-size="1.125rem" :size="8" @click="readEbook" />
-    </td>
-    <td v-if="contextMenuItems.length" class="text-center">
-      <ui-context-menu-dropdown :items="contextMenuItems" :menu-width="130" :processing="processing" @action="contextMenuAction" />
-    </td>
-  </tr>
-</template>
-
-<script>
-export default {
-  props: {
-    libraryItemId: String,
-    showFullPath: Boolean,
-    file: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      processing: false
-    }
-  },
-  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
-    userCanDownload() {
-      return this.$store.getters['user/getUserCanDownload']
-    },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
-    },
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
-    },
-    userIsAdmin() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
-    downloadUrl() {
-      return `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${this.file.ino}/download?token=${this.userToken}`
-    },
-    isPrimary() {
-      return !this.file.isSupplementary
-    },
-    libraryIsAudiobooksOnly() {
-      return this.$store.getters['libraries/getLibraryIsAudiobooksOnly']
-    },
-    contextMenuItems() {
-      const items = []
-      if (this.userCanUpdate && !this.libraryIsAudiobooksOnly) {
-        items.push({
-          text: this.isPrimary ? this.$strings.LabelSetEbookAsSupplementary : this.$strings.LabelSetEbookAsPrimary,
-          action: 'updateStatus'
-        })
-      }
-      if (this.userCanDownload) {
-        items.push({
-          text: this.$strings.LabelDownload,
-          action: 'download'
-        })
-      }
-      if (this.userCanDelete) {
-        items.push({
-          text: this.$strings.ButtonDelete,
-          action: 'delete'
-        })
-      }
-      return items
-    }
-  },
-  methods: {
-    readEbook() {
-      this.$emit('read', this.file.ino)
-    },
-    contextMenuAction({ action }) {
-      if (action === 'delete') {
-        this.deleteLibraryFile()
-      } else if (action === 'download') {
-        this.downloadLibraryFile()
-      } else if (action === 'updateStatus') {
-        this.updateEbookStatus()
-      }
-    },
-    updateEbookStatus() {
-      this.processing = true
-      this.$axios
-        .$patch(`/api/items/${this.libraryItemId}/ebook/${this.file.ino}/status`)
-        .then(() => {
-          this.$toast.success('Ebook updated')
-        })
-        .catch((error) => {
-          console.error('Failed to update ebook', error)
-          this.$toast.error('Failed to update ebook')
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    deleteLibraryFile() {
-      const payload = {
-        message: this.$strings.MessageConfirmDeleteFile,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.processing = true
-            this.$axios
-              .$delete(`/api/items/${this.libraryItemId}/file/${this.file.ino}`)
-              .then(() => {
-                this.$toast.success('File deleted')
-              })
-              .catch((error) => {
-                console.error('Failed to delete file', error)
-                this.$toast.error('Failed to delete file')
-              })
-              .finally(() => {
-                this.processing = false
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    downloadLibraryFile() {
-      this.$downloadFile(this.downloadUrl, this.file.metadata.filename)
-    }
-  },
-  mounted() {}
-}
-</script>
--- a/client/components/tables/LibraryFilesTable.vue
+++ b/client/components/tables/LibraryFilesTable.vue
@@ -6,13 +6,13 @@
        <span class="text-sm font-mono">{{ files.length }}</span>
      </div>
      <div class="flex-grow" />
-      <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="toggleFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
+      <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="showFullPath = !showFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
      <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showFiles ? 'transform rotate-180' : ''">
        <span class="material-icons text-4xl">expand_more</span>
      </div>
    </div>
    <transition name="slide">
-      <div class="w-full" v-if="showFiles">
+      <div class="w-full" v-show="showFiles">
        <table class="text-sm tracksTable">
          <tr>
            <th class="text-left px-4">{{ $strings.LabelPath }}</th>
@@ -27,7 +27,7 @@
      </div>
    </transition>

-    <modals-audio-file-data-modal v-model="showAudioFileDataModal" :library-item-id="libraryItemId" :audio-file="selectedAudioFile" />
+    <modals-audio-file-data-modal v-model="showAudioFileDataModal" :audio-file="selectedAudioFile" />
  </div>
 </template>

@@ -38,6 +38,7 @@ export default {
      type: Object,
      default: () => {}
    },
+    isMissing: Boolean,
    expanded: Boolean, // start expanded
    inModal: Boolean
  },
@@ -69,9 +70,6 @@ export default {
      return this.libraryItem.libraryFiles || []
    },
    audioFiles() {
-      if (this.libraryItem.mediaType === 'podcast') {
-        return this.libraryItem.media?.episodes.map((ep) => ep.audioFile).filter((af) => af) || []
-      }
      return this.libraryItem.media?.audioFiles || []
    },
    filesWithAudioFile() {
@@ -84,10 +82,6 @@ export default {
    }
  },
  methods: {
-    toggleFullPath() {
-      this.showFullPath = !this.showFullPath
-      localStorage.setItem('showFullPath', this.showFullPath ? 1 : 0)
-    },
    clickBar() {
      this.showFiles = !this.showFiles
    },
@@ -97,9 +91,6 @@ export default {
    }
  },
  mounted() {
-    if (this.userIsAdmin) {
-      this.showFullPath = !!Number(localStorage.getItem('showFullPath') || 0)
-    }
    this.showFiles = this.expanded
  }
 }
--- a/client/components/tables/LibraryFilesTableRow.vue
+++ b/client/components/tables/LibraryFilesTableRow.vue
@@ -12,7 +12,7 @@
      </div>
    </td>
    <td v-if="contextMenuItems.length" class="text-center">
-      <ui-context-menu-dropdown :items="contextMenuItems" :menu-width="110" @action="contextMenuAction" />
+      <ui-context-menu-dropdown :items="contextMenuItems" menu-width="110px" @action="contextMenuAction" />
    </td>
  </tr>
 </template>
@@ -45,7 +45,7 @@ export default {
      return this.$store.getters['user/getIsAdminOrUp']
    },
    downloadUrl() {
-      return `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${this.file.ino}/download?token=${this.userToken}`
+      return `${process.env.serverUrl}/s/item/${this.libraryItemId}/${this.$encodeUriPath(this.file.metadata.relPath).replace(/^\//, '')}?token=${this.userToken}`
    },
    contextMenuItems() {
      const items = []
@@ -72,7 +72,7 @@ export default {
    }
  },
  methods: {
-    contextMenuAction({ action }) {
+    contextMenuAction(action) {
      if (action === 'delete') {
        this.deleteLibraryFile()
      } else if (action === 'download') {
@@ -83,7 +83,7 @@ export default {
    },
    deleteLibraryFile() {
      const payload = {
-        message: this.$strings.MessageConfirmDeleteFile,
+        message: 'This will delete the file from your file system. Are you sure?',
        callback: (confirmed) => {
          if (confirmed) {
            this.$axios
@@ -102,7 +102,15 @@ export default {
      this.$store.commit('globals/setConfirmPrompt', payload)
    },
    downloadLibraryFile() {
-      this.$downloadFile(this.downloadUrl, this.file.metadata.filename)
+      const a = document.createElement('a')
+      a.style.display = 'none'
+      a.href = this.downloadUrl
+      a.download = this.file.metadata.filename
+      document.body.appendChild(a)
+      a.click()
+      setTimeout(() => {
+        a.remove()
+      })
    }
  },
  mounted() {}
--- a/client/components/tables/PlaylistItemsTable.vue
+++ b/client/components/tables/PlaylistItemsTable.vue
@@ -70,10 +70,7 @@ export default {
  methods: {
    editItem(playlistItem) {
      if (playlistItem.episode) {
-        const episodeIds = this.items.map((pi) => pi.episodeId)
-        this.$store.commit('setEpisodeTableEpisodeIds', episodeIds)
-        this.$store.commit('setSelectedLibraryItem', playlistItem.libraryItem)
-        this.$store.commit('globals/setSelectedEpisode', playlistItem.episode)
+        this.$store.commit('globals/setSelectedEpisode', playlist.episode)
        this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
      } else {
        const itemIds = this.items.map((i) => i.libraryItemId)
--- a/client/components/tables/TracksTable.vue
+++ b/client/components/tables/TracksTable.vue
@@ -6,7 +6,7 @@
        <span class="text-sm font-mono">{{ tracks.length }}</span>
      </div>
      <div class="flex-grow" />
-      <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="toggleFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
+      <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="showFullPath = !showFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
      <nuxt-link v-if="userCanUpdate && !isFile" :to="`/audiobook/${libraryItemId}/edit`" class="mr-2 md:mr-4" @mousedown.prevent>
        <ui-btn small color="primary">{{ $strings.ButtonManageTracks }}</ui-btn>
      </nuxt-link>
@@ -33,7 +33,7 @@
      </div>
    </transition>

-    <modals-audio-file-data-modal v-model="showAudioFileDataModal" :library-item-id="libraryItemId" :audio-file="selectedAudioFile" />
+    <modals-audio-file-data-modal v-model="showAudioFileDataModal" :audio-file="selectedAudioFile" />
  </div>
 </template>

@@ -74,10 +74,6 @@ export default {
    }
  },
  methods: {
-    toggleFullPath() {
-      this.showFullPath = !this.showFullPath
-      localStorage.setItem('showFullPath', this.showFullPath ? 1 : 0)
-    },
    clickBar() {
      this.showTracks = !this.showTracks
    },
@@ -86,10 +82,6 @@ export default {
      this.showAudioFileDataModal = true
    }
  },
-  mounted() {
-    if (this.userIsAdmin) {
-      this.showFullPath = !!Number(localStorage.getItem('showFullPath') || 0)
-    }
-  }
+  mounted() {}
 }
 </script>
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -19,13 +19,9 @@
          </td>
          <td class="text-sm">{{ user.type }}</td>
          <td class="hidden lg:table-cell">
-            <div v-if="usersOnline[user.id]?.session?.displayTitle">
-              <p class="truncate text-xs">Listening: {{ usersOnline[user.id].session.displayTitle || '' }}</p>
-              <p class="truncate text-xs text-gray-300">{{ getDeviceInfoString(usersOnline[user.id].session.deviceInfo) }}</p>
-            </div>
-            <div v-else-if="user.latestSession?.displayTitle">
-              <p class="truncate text-xs">Last: {{ user.latestSession.displayTitle || '' }}</p>
-              <p class="truncate text-xs text-gray-300">{{ getDeviceInfoString(user.latestSession.deviceInfo) }}</p>
+            <div v-if="usersOnline[user.id]">
+              <p v-if="usersOnline[user.id].session && usersOnline[user.id].session.libraryItem" class="truncate text-xs">Listening: {{ usersOnline[user.id].session.libraryItem.media.metadata.title || '' }}</p>
+              <p v-else-if="usersOnline[user.id].mostRecent && usersOnline[user.id].mostRecent.media" class="truncate text-xs">Last: {{ usersOnline[user.id].mostRecent.media.metadata.title }}</p>
            </div>
          </td>
          <td class="text-xs font-mono hidden sm:table-cell">
@@ -52,6 +48,8 @@
        </tr>
      </table>
    </div>
+
+    <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
  </div>
 </template>

@@ -60,6 +58,8 @@ export default {
  data() {
    return {
      users: [],
+      selectedAccount: null,
+      showAccountModal: false,
      isDeletingUser: false
    }
  },
@@ -83,12 +83,6 @@ export default {
    }
  },
  methods: {
-    getDeviceInfoString(deviceInfo) {
-      if (!deviceInfo) return ''
-      if (deviceInfo.manufacturer && deviceInfo.model) return `${deviceInfo.manufacturer} ${deviceInfo.model}`
-
-      return `${deviceInfo.osName || 'Unknown'} ${deviceInfo.osVersion || ''} ${deviceInfo.browserName || ''}`
-    },
    deleteUserClick(user) {
      if (this.isDeletingUser) return
      if (confirm(this.$getString('MessageRemoveUserWarning', [user.username]))) {
@@ -110,12 +104,17 @@ export default {
          })
      }
    },
+    clickAddUser() {
+      this.selectedAccount = null
+      this.showAccountModal = true
+    },
    editUser(user) {
-      this.$emit('edit', user)
+      this.selectedAccount = user
+      this.showAccountModal = true
    },
    loadUsers() {
      this.$axios
-        .$get('/api/users?include=latestSession')
+        .$get('/api/users')
        .then((res) => {
          this.users = res.users.sort((a, b) => {
            return a.createdAt - b.createdAt
--- a/client/components/tables/collection/BookTableRow.vue
+++ b/client/components/tables/collection/BookTableRow.vue
@@ -1,18 +1,16 @@
 <template>
  <div class="w-full px-1 md:px-2 py-2 overflow-hidden relative" @mouseover="mouseover" @mouseleave="mouseleave" :class="isHovering ? 'bg-white bg-opacity-5' : ''">
-    <div v-if="book" class="flex h-18 md:h-[5.5rem]">
+    <div v-if="book" class="flex h-16 md:h-20">
      <div class="w-10 min-w-10 md:w-16 md:max-w-16 h-full">
        <div class="flex h-full items-center justify-center">
          <span class="material-icons drag-handle text-lg md:text-xl">menu</span>
        </div>
      </div>
-      <div class="h-full flex items-center" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
-        <div class="relative" :style="{ height: coverHeight + 'px', minHeight: coverHeight + 'px', maxHeight: coverHeight + 'px' }">
-          <covers-book-cover :library-item="book" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-          <div class="absolute top-0 left-0 flex items-center justify-center bg-black bg-opacity-50 h-full w-full z-10" v-show="isHovering && showPlayBtn">
-            <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-40 cursor-pointer" @click="playClick">
-              <span class="material-icons text-2xl">play_arrow</span>
-            </div>
+      <div class="h-full relative flex items-center" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
+        <covers-book-cover :library-item="book" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <div class="absolute top-0 left-0 bg-black bg-opacity-50 flex items-center justify-center h-full w-full z-10" v-show="isHovering && showPlayBtn">
+          <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-40 cursor-pointer" @click="playClick">
+            <span class="material-icons text-2xl">play_arrow</span>
          </div>
        </div>
      </div>
@@ -21,16 +19,13 @@
          <div class="truncate max-w-48 md:max-w-md">
            <nuxt-link :to="`/item/${book.id}`" class="truncate hover:underline text-sm md:text-base">{{ bookTitle }}</nuxt-link>
          </div>
-          <div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300">
-            <nuxt-link v-for="_series in seriesList" :key="_series.id" :to="`/library/${book.libraryId}/series/${_series.id}`" class="hover:underline font-sans text-gray-300"> {{ _series.text }}</nuxt-link>
-          </div>
          <div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300">
            <template v-for="(author, index) in bookAuthors">
              <nuxt-link :key="author.id" :to="`/author/${author.id}`" class="truncate hover:underline">{{ author.name }}</nuxt-link
              ><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">,&nbsp;</span>
            </template>
          </div>
-          <p v-if="media.duration" class="text-xs md:text-sm text-gray-400">{{ bookDuration }}</p>
+          <p class="text-xs md:text-sm text-gray-400">{{ bookDuration }}</p>
        </div>
      </div>
    </div>
@@ -101,19 +96,6 @@ export default {
    bookDuration() {
      return this.$elapsedPretty(this.media.duration)
    },
-    series() {
-      return this.mediaMetadata.series || []
-    },
-    seriesList() {
-      return this.series.map((se) => {
-        let text = se.name
-        if (se.sequence) text += ` #${se.sequence}`
-        return {
-          ...se,
-          text
-        }
-      })
-    },
    isMissing() {
      return this.book.isMissing
    },
@@ -135,9 +117,6 @@ export default {
    coverSize() {
      return this.$store.state.globals.isMobile ? 30 : 50
    },
-    coverHeight() {
-      return this.coverSize * 1.6
-    },
    coverWidth() {
      if (this.bookCoverAspectRatio === 1) return this.coverSize * 1.6
      return this.coverSize
@@ -188,6 +167,7 @@ export default {
        .$patch(`/api/me/progress/${this.book.id}`, updatePayload)
        .then(() => {
          this.isProcessingReadUpdate = false
+          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
        })
        .catch((error) => {
          console.error('Failed', error)
--- a/client/components/tables/library/LibrariesTable.vue
+++ b/client/components/tables/library/LibrariesTable.vue
@@ -11,6 +11,10 @@
      <ui-btn @click="clickAddLibrary">{{ $strings.ButtonAddYourFirstLibrary }}</ui-btn>
    </div>

+    <p v-if="libraries.length" class="text-xs mt-4 text-gray-200">
+      *<strong>{{ $strings.ButtonForceReScan }}</strong> {{ $strings.MessageForceReScanDescription }}
+    </p>
+
    <p v-if="libraries.length && libraries.some((li) => li.mediaType === 'book')" class="text-xs mt-4 text-gray-200">
      **<strong>{{ $strings.ButtonMatchBooks }}</strong> {{ $strings.MessageMatchBooksDescription }}
    </p>
@@ -42,10 +46,13 @@ export default {
      return this.$store.getters['libraries/getCurrentLibrary']
    },
    currentLibraryId() {
-      return this.currentLibrary?.id || null
+      return this.currentLibrary ? this.currentLibrary.id : null
    },
    libraries() {
      return this.$store.getters['libraries/getSortedLibraries']()
+    },
+    libraryScans() {
+      return this.$store.state.scanners.libraryScans
    }
  },
  methods: {
--- a/client/components/tables/library/LibraryItem.vue
+++ b/client/components/tables/library/LibraryItem.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="w-full pl-2 pr-4 md:px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
    <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <ui-library-icon v-if="!isScanning" :icon="library.icon" :size="6" font-size="lg md:text-xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
+    <ui-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" font-size="lg md:text-xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
    <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
      <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
    </svg>
@@ -9,14 +9,11 @@

    <div class="flex-grow" />

-    <!-- Scan button only shown on desktop -->
-    <ui-btn v-if="!isScanning && !isDeleting" color="bg" class="hidden md:block mx-2 text-xs" :padding-y="1" :padding-x="3" @click.stop="scanBtnClick">{{ this.$strings.ButtonScan }}</ui-btn>
-
    <!-- Desktop context menu icon -->
-    <ui-context-menu-dropdown v-if="!isScanning && !isDeleting" :items="contextMenuItems" :icon-class="`text-1.5xl text-gray-${isHovering ? 50 : 400}`" class="!hidden md:!block" @action="contextMenuAction" />
+    <ui-context-menu-dropdown v-if="!libraryScan && !isDeleting" :items="contextMenuItems" :icon-class="`text-1.5xl text-gray-${isHovering ? 50 : 400}`" class="!hidden md:!block" @action="contextMenuAction" />

    <!-- Mobile context menu icon -->
-    <span v-if="!isScanning && !isDeleting" class="!block md:!hidden material-icons text-xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>
+    <span v-if="!libraryScan && !isDeleting" class="!block md:!hidden material-icons text-xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>

    <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
      <svg viewBox="0 0 24 24" class="w-6 h-6">
@@ -51,8 +48,8 @@ export default {
    isHovering() {
      return this.mouseover && !this.dragging
    },
-    isScanning() {
-      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.library.id)
+    libraryScan() {
+      return this.$store.getters['scanners/getLibraryScan'](this.library.id)
    },
    mediaType() {
      return this.library.mediaType
@@ -74,6 +71,11 @@ export default {
          text: this.$strings.ButtonScan,
          action: 'scan',
          value: 'scan'
+        },
+        {
+          text: this.$strings.ButtonForceReScan,
+          action: 'force-scan',
+          value: 'force-scan'
        }
      ]
      if (this.isBookLibrary) {
@@ -92,17 +94,14 @@ export default {
    }
  },
  methods: {
-    scanBtnClick() {
-      this.scan()
-    },
-    contextMenuAction({ action }) {
+    contextMenuAction(action) {
      this.showMobileMenu = false
      if (action === 'edit') {
        this.editClick()
      } else if (action === 'scan') {
        this.scan()
-      } else if (action === 'force-rescan') {
-        this.scan(true)
+      } else if (action === 'force-scan') {
+        this.forceScan()
      } else if (action === 'match-books') {
        this.matchAll()
      } else if (action === 'delete') {
@@ -127,17 +126,37 @@ export default {
    editClick() {
      this.$emit('edit', this.library)
    },
-    scan(force = false) {
+    scan() {
      this.$store
-        .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force })
+        .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id })
        .then(() => {
-          // this.$toast.success(this.$strings.ToastLibraryScanStarted)
+          this.$toast.success(this.$strings.ToastLibraryScanStarted)
        })
        .catch((error) => {
          console.error('Failed to start scan', error)
          this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
        })
    },
+    forceScan() {
+      const payload = {
+        message: this.$strings.MessageConfirmForceReScan,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$store
+              .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force: 1 })
+              .then(() => {
+                this.$toast.success(this.$strings.ToastLibraryScanStarted)
+              })
+              .catch((error) => {
+                console.error('Failed to start scan', error)
+                this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
    deleteClick() {
      const payload = {
        message: this.$getString('MessageConfirmDeleteLibrary', [this.library.name]),
--- a/client/components/tables/playlist/ItemTableRow.vue
+++ b/client/components/tables/playlist/ItemTableRow.vue
@@ -198,6 +198,7 @@ export default {
        .$patch(routepath, updatePayload)
        .then(() => {
          this.isProcessingReadUpdate = false
+          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
        })
        .catch((error) => {
          console.error('Failed', error)
--- a/client/components/tables/podcast/EpisodeTableRow.vue
+++ b/client/components/tables/podcast/EpisodeTableRow.vue
@@ -1,22 +1,19 @@
 <template>
-  <div :id="`lazy-episode-${index}`" class="w-full h-full cursor-pointer" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div class="flex" @click="clickedEpisode">
-      <div class="flex-grow">
+  <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
+    <div v-if="episode" class="flex items-center cursor-pointer" :class="{ 'opacity-70': isSelected || selectionMode }" @click="clickedEpisode">
+      <div class="flex-grow px-2">
        <div class="flex items-center">
-          <span class="text-sm font-semibold">{{ episodeTitle }}</span>
-          <widgets-podcast-type-indicator :type="episodeType" />
+          <span class="text-sm font-semibold">{{ title }}</span>
+          <widgets-podcast-type-indicator :type="episode.episodeType" />
        </div>

-        <div class="h-10 flex items-center mt-1.5 mb-0.5">
-          <p class="text-sm text-gray-200 episode-subtitle" v-html="episodeSubtitle"></p>
-        </div>
-        <div class="h-8 flex items-center">
-          <div class="w-full inline-flex justify-between max-w-xl">
-            <p v-if="episode?.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
-            <p v-if="episode?.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
-            <p v-if="episode?.chapters?.length" class="text-sm text-gray-300">{{ episode.chapters.length }} Chapters</p>
-            <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
-          </div>
+        <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5">{{ subtitle }}</p>
+
+        <div class="flex justify-between pt-2 max-w-xl">
+          <p v-if="episode.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
+          <p v-if="episode.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
+          <p v-if="episode.chapters?.length" class="text-sm text-gray-300">{{ episode.chapters.length }} Chapters</p>
+          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
        </div>

        <div class="flex items-center pt-2">
@@ -25,6 +22,10 @@
            <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
          </button>

+          <!-- <button v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" class="h-8 w-8 flex justify-center items-center mx-2" :class="isQueued ? 'text-success' : ''" @click.stop="queueBtnClick">
+            <span class="material-icons-outlined">{{ isQueued ? 'playlist_add_check' : 'queue' }}</span>
+          </button> -->
+
          <ui-tooltip v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" :text="isQueued ? $strings.MessageRemoveFromPlayerQueue : $strings.MessageAddToPlayerQueue" :class="isQueued ? 'text-success' : ''" direction="top">
            <ui-icon-btn :icon="isQueued ? 'playlist_add_check' : 'playlist_play'" borderless @click="queueBtnClick" />
          </ui-tooltip>
@@ -41,11 +42,10 @@
          <ui-icon-btn v-if="userCanDelete" icon="close" borderless @click="removeClick" />
        </div>
      </div>
-      <div v-if="isHovering || isSelected || isSelectionMode" class="hidden md:block w-12 min-w-12" />
+      <div v-if="isHovering || isSelected || selectionMode" class="hidden md:block w-12 min-w-12" />
    </div>
-
-    <div v-if="isSelected || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-10 z-10 cursor-pointer" @click.stop="clickedSelectionBg" />
-    <div class="hidden md:block md:w-12 md:min-w-12 md:-right-0 md:absolute md:top-0 h-full transform transition-transform z-20" :class="!isHovering && !isSelected && !isSelectionMode ? 'translate-x-24' : 'translate-x-0'">
+    <div v-if="isSelected || selectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-10 z-10 cursor-pointer" @click.stop="clickedSelectionBg" />
+    <div class="hidden md:block md:w-12 md:min-w-12 md:-right-0 md:absolute md:top-0 h-full transform transition-transform z-20" :class="!isHovering && !isSelected && !selectionMode ? 'translate-x-24' : 'translate-x-0'">
      <div class="flex h-full items-center">
        <div class="mx-1">
          <ui-checkbox v-model="isSelected" @input="selectedUpdated" checkbox-bg="bg" />
@@ -60,91 +60,84 @@
 <script>
 export default {
  props: {
-    index: Number,
    libraryItemId: String,
    episode: {
      type: Object,
-      default: () => null
-    }
+      default: () => {}
+    },
+    selectionMode: Boolean
  },
  data() {
    return {
      isProcessingReadUpdate: false,
      processingRemove: false,
      isHovering: false,
-      isSelected: false,
-      isSelectionMode: false
+      isSelected: false
    }
  },
  computed: {
-    store() {
-      return this.$store || this.$nuxt.$store
-    },
-    axios() {
-      return this.$axios || this.$nuxt.$axios
-    },
    userCanUpdate() {
-      return this.store.getters['user/getUserCanUpdate']
+      return this.$store.getters['user/getUserCanUpdate']
    },
    userCanDelete() {
-      return this.store.getters['user/getUserCanDelete']
+      return this.$store.getters['user/getUserCanDelete']
    },
-    episodeId() {
-      return this.episode?.id || ''
+    audioFile() {
+      return this.episode.audioFile
    },
-    episodeTitle() {
-      return this.episode?.title || ''
+    title() {
+      return this.episode.title || ''
    },
-    episodeSubtitle() {
-      return this.episode?.subtitle || ''
+    subtitle() {
+      return this.episode.subtitle || ''
    },
-    episodeType() {
-      return this.episode?.episodeType || ''
+    description() {
+      return this.episode.description || ''
    },
-    publishedAt() {
-      return this.episode?.publishedAt
-    },
-    dateFormat() {
-      return this.store.state.serverSettings.dateFormat
-    },
-    itemProgress() {
-      return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episodeId)
-    },
-    itemProgressPercent() {
-      return this.itemProgress?.progress || 0
-    },
-    userIsFinished() {
-      return !!this.itemProgress?.isFinished
+    duration() {
+      return this.$secondsToTimestamp(this.episode.duration)
    },
    libraryItemIdStreaming() {
-      return this.store.getters['getLibraryItemIdStreaming']
+      return this.$store.getters['getLibraryItemIdStreaming']
    },
    isStreamingFromDifferentLibrary() {
-      return this.store.getters['getIsStreamingFromDifferentLibrary']
+      return this.$store.getters['getIsStreamingFromDifferentLibrary']
    },
    isStreaming() {
-      return this.store.getters['getIsMediaStreaming'](this.libraryItemId, this.episodeId)
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
    },
    isQueued() {
-      return this.store.getters['getIsMediaQueued'](this.libraryItemId, this.episodeId)
+      return this.$store.getters['getIsMediaQueued'](this.libraryItemId, this.episode.id)
    },
    streamIsPlaying() {
-      return this.store.state.streamIsPlaying && this.isStreaming
+      return this.$store.state.streamIsPlaying && this.isStreaming
+    },
+    itemProgress() {
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episode.id)
+    },
+    itemProgressPercent() {
+      return this.itemProgress ? this.itemProgress.progress : 0
+    },
+    userIsFinished() {
+      return this.itemProgress ? !!this.itemProgress.isFinished : false
    },
    timeRemaining() {
      if (this.streamIsPlaying) return 'Playing'
-      if (!this.itemProgress) return this.$elapsedPretty(this.episode?.duration || 0)
+      if (!this.itemProgress) return this.$elapsedPretty(this.episode.duration)
      if (this.userIsFinished) return 'Finished'
-
-      const duration = this.itemProgress.duration || this.episode?.duration || 0
-      const remaining = Math.floor(duration - this.itemProgress.currentTime)
+      var remaining = Math.floor(this.itemProgress.duration - this.itemProgress.currentTime)
      return `${this.$elapsedPretty(remaining)} left`
+    },
+    publishedAt() {
+      return this.episode.publishedAt
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
    }
  },
  methods: {
-    setSelectionMode(isSelectionMode) {
-      this.isSelectionMode = isSelectionMode
-      if (!this.isSelectionMode) this.isSelected = false
+    clickAddToPlaylist() {
+      this.$emit('addToPlaylist', this.episode)
    },
    clickedEpisode() {
      this.$emit('view', this.episode)
@@ -162,23 +155,16 @@ export default {
    mouseleave() {
      this.isHovering = false
    },
+    clickEdit() {
+      this.$emit('edit', this.episode)
+    },
    playClick() {
      if (this.streamIsPlaying) {
-        const eventBus = this.$eventBus || this.$nuxt.$eventBus
-        eventBus.$emit('pause-item')
+        this.$eventBus.$emit('pause-item')
      } else {
        this.$emit('play', this.episode)
      }
    },
-    queueBtnClick() {
-      if (this.isQueued) {
-        // Remove from queue
-        this.store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId: this.episodeId })
-      } else {
-        // Add to queue
-        this.$emit('addToQueue', this.episode)
-      }
-    },
    toggleFinished(confirmed = false) {
      if (!this.userIsFinished && this.itemProgressPercent > 0 && !confirmed) {
        const payload = {
@@ -190,47 +176,38 @@ export default {
          },
          type: 'yesNo'
        }
-        this.store.commit('globals/setConfirmPrompt', payload)
+        this.$store.commit('globals/setConfirmPrompt', payload)
        return
      }

-      const updatePayload = {
+      var updatePayload = {
        isFinished: !this.userIsFinished
      }
      this.isProcessingReadUpdate = true
-      this.axios
-        .$patch(`/api/me/progress/${this.libraryItemId}/${this.episodeId}`, updatePayload)
+      this.$axios
+        .$patch(`/api/me/progress/${this.libraryItemId}/${this.episode.id}`, updatePayload)
        .then(() => {
          this.isProcessingReadUpdate = false
+          this.$toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
        })
        .catch((error) => {
          console.error('Failed', error)
          this.isProcessingReadUpdate = false
-          const toast = this.$toast || this.$nuxt.$toast
-          toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
+          this.$toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
        })
    },
-    clickAddToPlaylist() {
-      this.$emit('addToPlaylist', this.episode)
-    },
-    clickEdit() {
-      this.$emit('edit', this.episode)
-    },
    removeClick() {
      this.$emit('remove', this.episode)
    },
-    destroy() {
-      // destroy the vue listeners, etc
-      this.$destroy()
-
-      // remove the element from the DOM
-      if (this.$el && this.$el.parentNode) {
-        this.$el.parentNode.removeChild(this.$el)
-      } else if (this.$el && this.$el.remove) {
-        this.$el.remove()
+    queueBtnClick() {
+      if (this.isQueued) {
+        // Remove from queue
+        this.$store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId: this.episode.id })
+      } else {
+        // Add to queue
+        this.$emit('addToQueue', this.episode)
      }
    }
-  },
-  mounted() {}
+  }
 }
-</script>
+</script>
--- a/client/components/tables/podcast/EpisodesTable.vue
+++ b/client/components/tables/podcast/EpisodesTable.vue
@@ -0,0 +1,358 @@
+<template>
+  <div class="w-full py-6">
+    <p class="text-lg mb-2 font-semibold md:hidden">{{ $strings.HeaderEpisodes }}</p>
+    <div class="flex items-center mb-4">
+      <p class="text-lg mb-0 font-semibold hidden md:block">{{ $strings.HeaderEpisodes }}</p>
+      <div class="flex-grow hidden md:block" />
+      <template v-if="isSelectionMode">
+        <ui-tooltip :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
+          <ui-read-icon-btn :disabled="processing" :is-read="selectedIsFinished" @click="toggleBatchFinished" class="mx-1.5" />
+        </ui-tooltip>
+        <ui-btn color="error" :disabled="processing" small class="h-9" @click="removeSelectedEpisodes">{{ $getString('MessageRemoveEpisodes', [selectedEpisodes.length]) }}</ui-btn>
+        <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">{{ $strings.ButtonCancel }}</ui-btn>
+      </template>
+      <template v-else>
+        <controls-filter-select v-model="filterKey" :items="filterItems" class="w-36 h-9 sm:ml-4" />
+        <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+        <div class="flex-grow md:hidden" />
+        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" class="ml-1" @action="contextMenuAction" />
+      </template>
+    </div>
+    <p v-if="!episodes.length" class="py-4 text-center text-lg">{{ $strings.MessageNoEpisodes }}</p>
+    <div v-if="episodes.length" class="w-full py-3 mx-auto flex">
+      <form @submit.prevent="submit" class="flex flex-grow">
+        <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
+      </form>
+    </div>
+    <template v-for="episode in episodesList">
+      <tables-podcast-episode-table-row ref="episodeRow" :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" :selection-mode="isSelectionMode" class="item" @play="playEpisode" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" @selected="episodeSelected" @addToQueue="addEpisodeToQueue" @addToPlaylist="addToPlaylist" />
+    </template>
+
+    <modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      episodesCopy: [],
+      filterKey: 'incomplete',
+      sortKey: 'publishedAt',
+      sortDesc: true,
+      selectedEpisode: null,
+      showPodcastRemoveModal: false,
+      selectedEpisodes: [],
+      episodesToRemove: [],
+      processing: false,
+      quickMatchingEpisodes: false,
+      search: null,
+      searchTimeout: null,
+      searchText: null
+    }
+  },
+  watch: {
+    libraryItem: {
+      handler() {
+        this.init()
+      }
+    }
+  },
+  computed: {
+    contextMenuItems() {
+      if (!this.userIsAdminOrUp) return []
+      return [
+        {
+          text: 'Quick match all episodes',
+          action: 'quick-match-episodes'
+        }
+      ]
+    },
+    sortItems() {
+      return [
+        {
+          text: this.$strings.LabelPubDate,
+          value: 'publishedAt'
+        },
+        {
+          text: this.$strings.LabelTitle,
+          value: 'title'
+        },
+        {
+          text: this.$strings.LabelSeason,
+          value: 'season'
+        },
+        {
+          text: this.$strings.LabelEpisode,
+          value: 'episode'
+        }
+      ]
+    },
+    filterItems() {
+      return [
+        {
+          value: 'all',
+          text: this.$strings.LabelShowAll
+        },
+        {
+          value: 'incomplete',
+          text: this.$strings.LabelIncomplete
+        },
+        {
+          value: 'complete',
+          text: this.$strings.LabelComplete
+        },
+        {
+          value: 'in_progress',
+          text: this.$strings.LabelInProgress
+        }
+      ]
+    },
+    isSelectionMode() {
+      return this.selectedEpisodes.length > 0
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    media() {
+      return this.libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    episodes() {
+      return this.media.episodes || []
+    },
+    episodesSorted() {
+      return this.episodesCopy
+        .filter((ep) => {
+          if (this.filterKey === 'all') return true
+          const episodeProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, ep.id)
+          if (this.filterKey === 'incomplete') return !episodeProgress || !episodeProgress.isFinished
+          if (this.filterKey === 'complete') return episodeProgress && episodeProgress.isFinished
+          return episodeProgress && !episodeProgress.isFinished
+        })
+        .sort((a, b) => {
+          let aValue = a[this.sortKey]
+          let bValue = b[this.sortKey]
+
+          // Sort episodes with no pub date as the oldest
+          if (this.sortKey === 'publishedAt') {
+            if (!aValue) aValue = Number.MAX_VALUE
+            if (!bValue) bValue = Number.MAX_VALUE
+          }
+
+          if (this.sortDesc) {
+            return String(bValue).localeCompare(String(aValue), undefined, { numeric: true, sensitivity: 'base' })
+          }
+          return String(aValue).localeCompare(String(bValue), undefined, { numeric: true, sensitivity: 'base' })
+        })
+    },
+    episodesList() {
+      return this.episodesSorted.filter((episode) => {
+        if (!this.searchText) return true
+        return (episode.title && episode.title.toLowerCase().includes(this.searchText)) || (episode.subtitle && episode.subtitle.toLowerCase().includes(this.searchText))
+      })
+    },
+    selectedIsFinished() {
+      // Find an item that is not finished, if none then all items finished
+      return !this.selectedEpisodes.find((episode) => {
+        var itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        return !itemProgress || !itemProgress.isFinished
+      })
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
+    }
+  },
+  methods: {
+    inputUpdate() {
+      clearTimeout(this.searchTimeout)
+      this.searchTimeout = setTimeout(() => {
+        if (!this.search || !this.search.trim()) {
+          this.searchText = ''
+          return
+        }
+        this.searchText = this.search.toLowerCase().trim()
+      }, 500)
+    },
+    contextMenuAction(action) {
+      if (action === 'quick-match-episodes') {
+        if (this.quickMatchingEpisodes) return
+
+        this.quickMatchAllEpisodes()
+      }
+    },
+    quickMatchAllEpisodes() {
+      if (!this.mediaMetadata.feedUrl) {
+        this.$toast.error(this.$strings.MessagePodcastHasNoRSSFeedForMatching)
+        return
+      }
+      this.quickMatchingEpisodes = true
+
+      const payload = {
+        message: 'Quick matching episodes will overwrite details if a match is found. Only unmatched episodes will be updated. Are you sure?',
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$axios
+              .$post(`/api/podcasts/${this.libraryItem.id}/match-episodes?override=1`)
+              .then((data) => {
+                if (data.numEpisodesUpdated) {
+                  this.$toast.success(`${data.numEpisodesUpdated} episodes updated`)
+                } else {
+                  this.$toast.info('No changes were made')
+                }
+              })
+              .catch((error) => {
+                console.error('Failed to request match episodes', error)
+                this.$toast.error('Failed to match episodes')
+              })
+          }
+          this.quickMatchingEpisodes = false
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    addToPlaylist(episode) {
+      this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode }])
+      this.$store.commit('globals/setShowPlaylistsModal', true)
+    },
+    addEpisodeToQueue(episode) {
+      const queueItem = {
+        libraryItemId: this.libraryItem.id,
+        libraryId: this.libraryItem.libraryId,
+        episodeId: episode.id,
+        title: episode.title,
+        subtitle: this.mediaMetadata.title,
+        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
+        duration: episode.audioFile.duration || null,
+        coverPath: this.media.coverPath || null
+      }
+      this.$store.commit('addItemToQueue', queueItem)
+    },
+    toggleBatchFinished() {
+      this.processing = true
+      var newIsFinished = !this.selectedIsFinished
+      var updateProgressPayloads = this.selectedEpisodes.map((episode) => {
+        return {
+          libraryItemId: this.libraryItem.id,
+          episodeId: episode.id,
+          isFinished: newIsFinished
+        }
+      })
+
+      this.$axios
+        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
+          this.processing = false
+          this.clearSelected()
+        })
+        .catch((error) => {
+          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
+          console.error('Failed to batch update read/not read', error)
+          this.processing = false
+        })
+    },
+    removeEpisodeModalToggled(val) {
+      if (!val) this.episodesToRemove = []
+    },
+    clearSelected() {
+      const episodeRows = this.$refs.episodeRow
+      if (episodeRows && episodeRows.length) {
+        for (const epRow of episodeRows) {
+          if (epRow) epRow.isSelected = false
+        }
+      }
+      this.selectedEpisodes = []
+    },
+    removeSelectedEpisodes() {
+      this.episodesToRemove = this.selectedEpisodes
+      this.showPodcastRemoveModal = true
+    },
+    episodeSelected({ isSelected, episode }) {
+      if (isSelected) {
+        this.selectedEpisodes.push(episode)
+      } else {
+        this.selectedEpisodes = this.selectedEpisodes.filter((ep) => ep.id !== episode.id)
+      }
+    },
+    playEpisode(episode) {
+      const queueItems = []
+
+      const episodesInListeningOrder = this.episodesCopy.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
+      const episodeIndex = episodesInListeningOrder.findIndex((e) => e.id === episode.id)
+      for (let i = episodeIndex; i < episodesInListeningOrder.length; i++) {
+        const episode = episodesInListeningOrder[i]
+        const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+        if (!podcastProgress || !podcastProgress.isFinished) {
+          queueItems.push({
+            libraryItemId: this.libraryItem.id,
+            libraryId: this.libraryItem.libraryId,
+            episodeId: episode.id,
+            title: episode.title,
+            subtitle: this.mediaMetadata.title,
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
+            duration: episode.audioFile.duration || null,
+            coverPath: this.media.coverPath || null
+          })
+        }
+      }
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: this.libraryItem.id,
+        episodeId: episode.id,
+        queueItems
+      })
+    },
+    removeEpisode(episode) {
+      this.episodesToRemove = [episode]
+      this.showPodcastRemoveModal = true
+    },
+    editEpisode(episode) {
+      const episodeIds = this.episodesSorted.map((e) => e.id)
+      this.$store.commit('setEpisodeTableEpisodeIds', episodeIds)
+      this.$store.commit('setSelectedLibraryItem', this.libraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
+    },
+    viewEpisode(episode) {
+      this.$store.commit('setSelectedLibraryItem', this.libraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowViewPodcastEpisodeModal', true)
+    },
+    init() {
+      this.episodesCopy = this.episodes.map((ep) => ({ ...ep }))
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style>
+.episode-item {
+  transition: all 0.4s ease;
+}
+
+.episode-enter-from,
+.episode-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.episode-leave-active {
+  position: absolute;
+}
+</style>
--- a/client/components/tables/podcast/LazyEpisodesTable.vue
+++ b/client/components/tables/podcast/LazyEpisodesTable.vue
@@ -1,558 +0,0 @@
-<template>
-  <div id="lazy-episodes-table" class="w-full py-6">
-    <div class="flex flex-wrap flex-col md:flex-row md:items-center mb-4">
-      <div class="flex items-center flex-nowrap whitespace-nowrap mb-2 md:mb-0">
-        <p class="text-lg mb-0 font-semibold">{{ $strings.HeaderEpisodes }}</p>
-        <div class="inline-flex bg-white/5 px-1 mx-2 rounded-md text-sm text-gray-100">
-          <p v-if="episodesList.length === episodes.length">{{ episodes.length }}</p>
-          <p v-else>{{ episodesList.length }} / {{ episodes.length }}</p>
-        </div>
-      </div>
-      <div class="flex-grow hidden md:block" />
-      <div class="flex items-center">
-        <template v-if="isSelectionMode">
-          <ui-tooltip :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
-            <ui-read-icon-btn :disabled="processing" :is-read="selectedIsFinished" @click="toggleBatchFinished" class="mx-1.5" />
-          </ui-tooltip>
-          <ui-btn color="error" :disabled="processing" small class="h-9" @click="removeSelectedEpisodes">{{ $getString('MessageRemoveEpisodes', [selectedEpisodes.length]) }}</ui-btn>
-          <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">{{ $strings.ButtonCancel }}</ui-btn>
-        </template>
-        <template v-else>
-          <controls-filter-select v-model="filterKey" :items="filterItems" class="w-36 h-9 md:ml-4" @change="filterSortChanged" />
-          <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-44 md:w-48 h-9 ml-1 sm:ml-4" @change="filterSortChanged" />
-          <div class="flex-grow md:hidden" />
-          <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" class="ml-1" @action="contextMenuAction" />
-        </template>
-      </div>
-    </div>
-    <!-- <p v-if="!episodes.length" class="py-4 text-center text-lg">{{ $strings.MessageNoEpisodes }}</p> -->
-    <div v-if="episodes.length" class="w-full py-3 mx-auto flex">
-      <form @submit.prevent="submit" class="flex flex-grow">
-        <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
-      </form>
-    </div>
-    <div class="relative min-h-[176px]">
-      <template v-for="episode in totalEpisodes">
-        <div :key="episode" :id="`episode-${episode - 1}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
-          <!-- episode is mounted here -->
-        </div>
-      </template>
-      <div v-if="isSearching" class="w-full h-full absolute inset-0 flex justify-center py-12" :class="{ 'bg-black/50': totalEpisodes }">
-        <ui-loading-indicator />
-      </div>
-      <div v-else-if="!totalEpisodes" class="h-44 flex items-center justify-center">
-        <p class="text-lg">{{ $strings.MessageNoEpisodes }}</p>
-      </div>
-    </div>
-
-    <modals-podcast-remove-episode v-model="showPodcastRemoveModal" @input="removeEpisodeModalToggled" :library-item="libraryItem" :episodes="episodesToRemove" @clearSelected="clearSelected" />
-  </div>
-</template>
-
-<script>
-import Vue from 'vue'
-import LazyEpisodeRow from './LazyEpisodeRow.vue'
-
-export default {
-  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      episodesCopy: [],
-      filterKey: 'incomplete',
-      sortKey: 'publishedAt',
-      sortDesc: true,
-      selectedEpisode: null,
-      showPodcastRemoveModal: false,
-      selectedEpisodes: [],
-      episodesToRemove: [],
-      processing: false,
-      search: null,
-      searchTimeout: null,
-      searchText: null,
-      isSearching: false,
-      totalEpisodes: 0,
-      episodesPerPage: null,
-      episodeIndexesMounted: [],
-      episodeComponentRefs: {},
-      windowHeight: 0,
-      episodesTableOffsetTop: 0,
-      episodeRowHeight: 176
-    }
-  },
-  watch: {
-    libraryItem: {
-      handler() {
-        this.init()
-      }
-    }
-  },
-  computed: {
-    contextMenuItems() {
-      if (!this.userIsAdminOrUp) return []
-      return [
-        {
-          text: 'Quick match all episodes',
-          action: 'quick-match-episodes'
-        },
-        {
-          text: this.allEpisodesFinished ? this.$strings.MessageMarkAllEpisodesNotFinished : this.$strings.MessageMarkAllEpisodesFinished,
-          action: 'batch-mark-as-finished'
-        }
-      ]
-    },
-    sortItems() {
-      return [
-        {
-          text: this.$strings.LabelPubDate,
-          value: 'publishedAt'
-        },
-        {
-          text: this.$strings.LabelTitle,
-          value: 'title'
-        },
-        {
-          text: this.$strings.LabelSeason,
-          value: 'season'
-        },
-        {
-          text: this.$strings.LabelEpisode,
-          value: 'episode'
-        }
-      ]
-    },
-    filterItems() {
-      return [
-        {
-          value: 'all',
-          text: this.$strings.LabelShowAll
-        },
-        {
-          value: 'incomplete',
-          text: this.$strings.LabelIncomplete
-        },
-        {
-          value: 'complete',
-          text: this.$strings.LabelComplete
-        },
-        {
-          value: 'in_progress',
-          text: this.$strings.LabelInProgress
-        }
-      ]
-    },
-    isSelectionMode() {
-      return this.selectedEpisodes.length > 0
-    },
-    userIsAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
-    media() {
-      return this.libraryItem.media || {}
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
-    episodes() {
-      return this.media.episodes || []
-    },
-    episodesSorted() {
-      return this.episodesCopy
-        .filter((ep) => {
-          if (this.filterKey === 'all') return true
-          const episodeProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, ep.id)
-          if (this.filterKey === 'incomplete') return !episodeProgress || !episodeProgress.isFinished
-          if (this.filterKey === 'complete') return episodeProgress && episodeProgress.isFinished
-          return episodeProgress && !episodeProgress.isFinished
-        })
-        .sort((a, b) => {
-          let aValue = a[this.sortKey]
-          let bValue = b[this.sortKey]
-
-          // Sort episodes with no pub date as the oldest
-          if (this.sortKey === 'publishedAt') {
-            if (!aValue) aValue = Number.MAX_VALUE
-            if (!bValue) bValue = Number.MAX_VALUE
-          }
-
-          if (this.sortDesc) {
-            return String(bValue).localeCompare(String(aValue), undefined, { numeric: true, sensitivity: 'base' })
-          }
-          return String(aValue).localeCompare(String(bValue), undefined, { numeric: true, sensitivity: 'base' })
-        })
-    },
-    episodesList() {
-      return this.episodesSorted.filter((episode) => {
-        if (!this.searchText) return true
-        return episode.title?.toLowerCase().includes(this.searchText) || episode.subtitle?.toLowerCase().includes(this.searchText)
-      })
-    },
-    selectedIsFinished() {
-      // Find an item that is not finished, if none then all items finished
-      return !this.selectedEpisodes.some((episode) => {
-        const itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
-        return !itemProgress?.isFinished
-      })
-    },
-    allEpisodesFinished() {
-      return !this.episodesSorted.some((episode) => {
-        const itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
-        return !itemProgress?.isFinished
-      })
-    },
-    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
-    },
-    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
-    }
-  },
-  methods: {
-    submit() {},
-    inputUpdate() {
-      clearTimeout(this.searchTimeout)
-      this.isSearching = true
-      let searchStart = this.searchText
-      this.searchTimeout = setTimeout(() => {
-        this.isSearching = false
-        if (!this.search?.trim()) {
-          this.searchText = ''
-        } else {
-          this.searchText = this.search.toLowerCase().trim()
-        }
-        if (searchStart !== this.searchText) {
-          this.init()
-        }
-      }, 750)
-    },
-    contextMenuAction({ action }) {
-      if (action === 'quick-match-episodes') {
-        if (this.processing) return
-
-        this.quickMatchAllEpisodes()
-      } else if (action === 'batch-mark-as-finished') {
-        if (this.processing) return
-
-        this.markAllEpisodesFinished()
-      }
-    },
-    markAllEpisodesFinished() {
-      const newIsFinished = !this.allEpisodesFinished
-      const payload = {
-        message: newIsFinished ? this.$strings.MessageConfirmMarkAllEpisodesFinished : this.$strings.MessageConfirmMarkAllEpisodesNotFinished,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.batchUpdateEpisodesFinished(this.episodesSorted, newIsFinished)
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    quickMatchAllEpisodes() {
-      if (!this.mediaMetadata.feedUrl) {
-        this.$toast.error(this.$strings.MessagePodcastHasNoRSSFeedForMatching)
-        return
-      }
-      this.processing = true
-
-      const payload = {
-        message: 'Quick matching episodes will overwrite details if a match is found. Only unmatched episodes will be updated. Are you sure?',
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.$axios
-              .$post(`/api/podcasts/${this.libraryItem.id}/match-episodes?override=1`)
-              .then((data) => {
-                if (data.numEpisodesUpdated) {
-                  this.$toast.success(`${data.numEpisodesUpdated} episodes updated`)
-                } else {
-                  this.$toast.info('No changes were made')
-                }
-              })
-              .catch((error) => {
-                console.error('Failed to request match episodes', error)
-                this.$toast.error('Failed to match episodes')
-              })
-          }
-          this.processing = false
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    addToPlaylist(episode) {
-      this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode }])
-      this.$store.commit('globals/setShowPlaylistsModal', true)
-    },
-    addEpisodeToQueue(episode) {
-      const queueItem = {
-        libraryItemId: this.libraryItem.id,
-        libraryId: this.libraryItem.libraryId,
-        episodeId: episode.id,
-        title: episode.title,
-        subtitle: this.mediaMetadata.title,
-        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
-        duration: episode.audioFile.duration || null,
-        coverPath: this.media.coverPath || null
-      }
-      this.$store.commit('addItemToQueue', queueItem)
-    },
-    toggleBatchFinished() {
-      this.batchUpdateEpisodesFinished(this.selectedEpisodes, !this.selectedIsFinished)
-    },
-    batchUpdateEpisodesFinished(episodes, newIsFinished) {
-      this.processing = true
-
-      const updateProgressPayloads = episodes.map((episode) => {
-        return {
-          libraryItemId: this.libraryItem.id,
-          episodeId: episode.id,
-          isFinished: newIsFinished
-        }
-      })
-      return this.$axios
-        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
-        .then(() => {
-          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
-          this.processing = false
-          this.clearSelected()
-        })
-        .catch((error) => {
-          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
-          console.error('Failed to batch update read/not read', error)
-          this.processing = false
-        })
-    },
-    removeEpisodeModalToggled(val) {
-      if (!val) this.episodesToRemove = []
-    },
-    clearSelected() {
-      this.selectedEpisodes = []
-      this.setSelectionModeForEpisodes()
-    },
-    removeSelectedEpisodes() {
-      this.episodesToRemove = this.selectedEpisodes
-      this.showPodcastRemoveModal = true
-    },
-    episodeSelected({ isSelected, episode }) {
-      let isSelectionModeBefore = this.isSelectionMode
-      if (isSelected) {
-        this.selectedEpisodes.push(episode)
-      } else {
-        this.selectedEpisodes = this.selectedEpisodes.filter((ep) => ep.id !== episode.id)
-      }
-      if (this.isSelectionMode !== isSelectionModeBefore) {
-        this.setSelectionModeForEpisodes()
-      }
-    },
-    setSelectionModeForEpisodes() {
-      for (const key in this.episodeComponentRefs) {
-        if (this.episodeComponentRefs[key]?.setSelectionMode) {
-          this.episodeComponentRefs[key].setSelectionMode(this.isSelectionMode)
-        }
-      }
-    },
-    playEpisode(episode) {
-      const queueItems = []
-
-      const episodesInListeningOrder = this.episodesCopy.map((ep) => ({ ...ep })).sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
-      const episodeIndex = episodesInListeningOrder.findIndex((e) => e.id === episode.id)
-      for (let i = episodeIndex; i < episodesInListeningOrder.length; i++) {
-        const episode = episodesInListeningOrder[i]
-        const podcastProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
-        if (!podcastProgress || !podcastProgress.isFinished) {
-          queueItems.push({
-            libraryItemId: this.libraryItem.id,
-            libraryId: this.libraryItem.libraryId,
-            episodeId: episode.id,
-            title: episode.title,
-            subtitle: this.mediaMetadata.title,
-            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
-            duration: episode.audioFile.duration || null,
-            coverPath: this.media.coverPath || null
-          })
-        }
-      }
-
-      this.$eventBus.$emit('play-item', {
-        libraryItemId: this.libraryItem.id,
-        episodeId: episode.id,
-        queueItems
-      })
-    },
-    removeEpisode(episode) {
-      this.episodesToRemove = [episode]
-      this.showPodcastRemoveModal = true
-    },
-    editEpisode(episode) {
-      const episodeIds = this.episodesSorted.map((e) => e.id)
-      this.$store.commit('setEpisodeTableEpisodeIds', episodeIds)
-      this.$store.commit('setSelectedLibraryItem', this.libraryItem)
-      this.$store.commit('globals/setSelectedEpisode', episode)
-      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
-    },
-    viewEpisode(episode) {
-      this.$store.commit('setSelectedLibraryItem', this.libraryItem)
-      this.$store.commit('globals/setSelectedEpisode', episode)
-      this.$store.commit('globals/setShowViewPodcastEpisodeModal', true)
-    },
-    destroyEpisodeComponents() {
-      for (const key in this.episodeComponentRefs) {
-        if (this.episodeComponentRefs[key]?.destroy) {
-          this.episodeComponentRefs[key].destroy()
-        }
-      }
-      this.episodeComponentRefs = {}
-      this.episodeIndexesMounted = []
-    },
-    mountEpisode(index) {
-      const episodeEl = document.getElementById(`episode-${index}`)
-      if (!episodeEl) {
-        console.warn('Episode row el not found at ' + index)
-        return
-      }
-
-      this.episodeIndexesMounted.push(index)
-
-      if (this.episodeComponentRefs[index]) {
-        const episodeComponent = this.episodeComponentRefs[index]
-        episodeEl.appendChild(episodeComponent.$el)
-        if (this.isSelectionMode) {
-          episodeComponent.setSelectionMode(true)
-          if (this.selectedEpisodes.some((i) => i.id === episodeComponent.episodeId)) {
-            episodeComponent.isSelected = true
-          } else {
-            episodeComponent.isSelected = false
-          }
-        } else {
-          episodeComponent.setSelectionMode(false)
-        }
-      } else {
-        const _this = this
-        const ComponentClass = Vue.extend(LazyEpisodeRow)
-        const instance = new ComponentClass({
-          propsData: {
-            index,
-            libraryItemId: this.libraryItem.id,
-            episode: this.episodesList[index]
-          },
-          created() {
-            this.$on('selected', (payload) => {
-              _this.episodeSelected(payload)
-            })
-            this.$on('view', (payload) => {
-              _this.viewEpisode(payload)
-            })
-            this.$on('play', (payload) => {
-              _this.playEpisode(payload)
-            })
-            this.$on('addToQueue', (payload) => {
-              _this.addEpisodeToQueue(payload)
-            })
-            this.$on('remove', (payload) => {
-              _this.removeEpisode(payload)
-            })
-            this.$on('edit', (payload) => {
-              _this.editEpisode(payload)
-            })
-            this.$on('addToPlaylist', (payload) => {
-              _this.addToPlaylist(payload)
-            })
-          }
-        })
-        this.episodeComponentRefs[index] = instance
-        instance.$mount()
-        episodeEl.appendChild(instance.$el)
-
-        if (this.isSelectionMode) {
-          instance.setSelectionMode(true)
-          if (this.selectedEpisodes.some((i) => i.id === this.episodesList[index].id)) {
-            instance.isSelected = true
-          }
-        }
-      }
-    },
-    mountEpisodes(startIndex, endIndex) {
-      for (let i = startIndex; i < endIndex; i++) {
-        if (!this.episodeIndexesMounted.includes(i)) {
-          this.mountEpisode(i)
-        }
-      }
-    },
-    scroll(evt) {
-      if (!evt?.target?.scrollTop) return
-      const scrollTop = Math.max(evt.target.scrollTop - this.episodesTableOffsetTop, 0)
-      let firstEpisodeIndex = Math.floor(scrollTop / this.episodeRowHeight)
-      let lastEpisodeIndex = Math.ceil((scrollTop + this.windowHeight) / this.episodeRowHeight)
-      lastEpisodeIndex = Math.min(this.totalEpisodes - 1, lastEpisodeIndex)
-
-      this.episodeIndexesMounted = this.episodeIndexesMounted.filter((_index) => {
-        if (_index < firstEpisodeIndex || _index >= lastEpisodeIndex) {
-          const el = document.getElementById(`lazy-episode-${_index}`)
-          if (el) el.remove()
-          return false
-        }
-        return true
-      })
-      this.mountEpisodes(firstEpisodeIndex, lastEpisodeIndex + 1)
-    },
-    initListeners() {
-      const itemPageWrapper = document.getElementById('item-page-wrapper')
-      if (itemPageWrapper) {
-        itemPageWrapper.addEventListener('scroll', this.scroll)
-      }
-    },
-    removeListeners() {
-      const itemPageWrapper = document.getElementById('item-page-wrapper')
-      if (itemPageWrapper) {
-        itemPageWrapper.removeEventListener('scroll', this.scroll)
-      }
-    },
-    filterSortChanged() {
-      this.init()
-    },
-    init() {
-      this.destroyEpisodeComponents()
-      this.totalEpisodes = this.episodesList.length
-
-      const lazyEpisodesTableEl = document.getElementById('lazy-episodes-table')
-      this.episodesTableOffsetTop = (lazyEpisodesTableEl?.offsetTop || 0) + 64
-
-      this.windowHeight = window.innerHeight
-      this.episodesPerPage = Math.ceil(this.windowHeight / this.episodeRowHeight)
-
-      this.$nextTick(() => {
-        this.mountEpisodes(0, Math.min(this.episodesPerPage, this.totalEpisodes))
-      })
-    }
-  },
-  mounted() {
-    this.episodesCopy = this.episodes.map((ep) => ({ ...ep }))
-    this.initListeners()
-    this.init()
-  },
-  beforeDestroy() {
-    this.removeListeners()
-  }
-}
-</script>
-
-<style>
-.episode-item {
-  transition: all 0.4s ease;
-}
-
-.episode-enter-from,
-.episode-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-.episode-leave-active {
-  position: absolute;
-}
-</style>
--- a/client/components/ui/Btn.vue
+++ b/client/components/ui/Btn.vue
@@ -1,5 +1,5 @@
 <template>
-  <nuxt-link v-if="to" :to="to" class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList">
+  <nuxt-link v-if="to" :to="to" class="btn outline-none rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList">
    <slot />
    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
      <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
@@ -7,7 +7,7 @@
      </svg>
    </div>
  </nuxt-link>
-  <button v-else class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
+  <button v-else class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
    <slot />
    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
      <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
@@ -72,3 +72,23 @@ export default {
  mounted() {}
 }
 </script>
+
+<style>
+.btn::before {
+  content: '';
+  position: absolute;
+  border-radius: 6px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0);
+  transition: all 0.1s ease-in-out;
+}
+.btn:hover:not(:disabled)::before {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+button:disabled::before {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
--- a/client/components/ui/Checkbox.vue
+++ b/client/components/ui/Checkbox.vue
@@ -2,8 +2,7 @@
  <label class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''">
    <div class="border-2 rounded flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
      <input v-model="selected" :disabled="disabled" type="checkbox" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" />
-      <span v-if="partial" class="material-icons text-base leading-none text-gray-400">remove</span>
-      <svg v-else-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
+      <svg v-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
    </div>
    <div v-if="label" class="select-none" :class="[labelClassname, disabled ? 'text-gray-400' : 'text-gray-100']">{{ label }}</div>
  </label>
@@ -32,8 +31,7 @@ export default {
      type: String,
      default: ''
    },
-    disabled: Boolean,
-    partial: Boolean
+    disabled: Boolean
  },
  data() {
    return {}
--- a/client/components/ui/ContextMenuDropdown.vue
+++ b/client/components/ui/ContextMenuDropdown.vue
@@ -1,37 +1,16 @@
 <template>
  <div class="relative h-9 w-9" v-click-outside="clickOutsideObj">
-    <slot :disabled="disabled" :showMenu="showMenu" :clickShowMenu="clickShowMenu" :processing="processing">
-      <button v-if="!processing" type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
+    <slot :disabled="disabled" :showMenu="showMenu" :clickShowMenu="clickShowMenu">
+      <button type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
        <span class="material-icons" :class="iconClass">more_vert</span>
      </button>
-      <div v-else class="h-full w-full flex items-center justify-center">
-        <widgets-loading-spinner />
-      </div>
    </slot>

    <transition name="menu">
-      <div v-show="showMenu" ref="menuWrapper" class="absolute right-0 mt-1 z-10 bg-bg border border-black-200 shadow-lg rounded-md py-1 focus:outline-none sm:text-sm" :style="{ width: menuWidth + 'px' }">
+      <div v-show="showMenu" class="absolute right-0 mt-1 z-10 bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 overflow-auto focus:outline-none sm:text-sm" :style="{ width: menuWidth }">
        <template v-for="(item, index) in items">
-          <template v-if="item.subitems">
-            <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-default" :class="{ 'bg-white/5': mouseoverItemIndex == index }" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
-              <p>{{ item.text }}</p>
-            </div>
-            <div
-              v-if="mouseoverItemIndex === index"
-              :key="`subitems-${index}`"
-              @mouseover="mouseoverSubItemMenu(index)"
-              @mouseleave="mouseleaveSubItemMenu(index)"
-              class="absolute bg-bg border rounded-b-md border-black-200 shadow-lg z-50 -ml-px py-1"
-              :class="openSubMenuLeft ? 'rounded-l-md' : 'rounded-r-md'"
-              :style="{ left: submenuLeftPos + 'px', top: index * 28 + 'px', width: submenuWidth + 'px' }"
-            >
-              <div v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @click.stop="clickAction(subitem.action, subitem.data)">
-                <p>{{ subitem.text }}</p>
-              </div>
-            </div>
-          </template>
-          <div v-else :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.action)">
-            <p class="text-left">{{ item.text }}</p>
+          <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.action)">
+            <p>{{ item.text }}</p>
          </div>
        </template>
      </div>
@@ -52,10 +31,9 @@ export default {
      default: ''
    },
    menuWidth: {
-      type: Number,
-      default: 192
-    },
-    processing: Boolean
+      type: String,
+      default: '192px'
+    }
  },
  data() {
    return {
@@ -64,54 +42,22 @@ export default {
        events: ['mousedown'],
        isActive: true
      },
-      submenuWidth: 144,
-      showMenu: false,
-      mouseoverItemIndex: null,
-      isOverSubItemMenu: false,
-      openSubMenuLeft: false
-    }
-  },
-  computed: {
-    submenuLeftPos() {
-      return this.openSubMenuLeft ? -(this.submenuWidth - 1) : this.menuWidth - 0.5
+      showMenu: false
    }
  },
+  computed: {},
  methods: {
-    mouseoverSubItemMenu(index) {
-      this.isOverSubItemMenu = true
-    },
-    mouseleaveSubItemMenu(index) {
-      setTimeout(() => {
-        if (this.isOverSubItemMenu && this.mouseoverItemIndex === index) this.mouseoverItemIndex = null
-      }, 1)
-    },
-    mouseoverItem(index) {
-      this.isOverSubItemMenu = false
-      this.mouseoverItemIndex = index
-    },
-    mouseleaveItem(index) {
-      setTimeout(() => {
-        if (this.isOverSubItemMenu) return
-        if (this.mouseoverItemIndex === index) this.mouseoverItemIndex = null
-      }, 1)
-    },
    clickShowMenu() {
      if (this.disabled) return
      this.showMenu = !this.showMenu
-      this.$nextTick(() => {
-        const boundingRect = this.$refs.menuWrapper?.getBoundingClientRect()
-        if (boundingRect) {
-          this.openSubMenuLeft = window.innerWidth - boundingRect.x < this.menuWidth + this.submenuWidth + 5
-        }
-      })
    },
    clickedOutside() {
      this.showMenu = false
    },
-    clickAction(action, data) {
+    clickAction(action) {
      if (this.disabled) return
      this.showMenu = false
-      this.$emit('action', { action, data })
+      this.$emit('action', action)
    }
  },
  mounted() {}
--- a/client/components/ui/Dropdown.vue
+++ b/client/components/ui/Dropdown.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="relative w-full" v-click-outside="clickOutsideObj">
-    <p v-if="label" class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
+    <p class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
    <button type="button" :aria-label="longLabel" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
      <span class="flex items-center">
        <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
@@ -13,7 +13,7 @@
    </button>

    <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox">
        <template v-for="item in itemsToShow">
          <li :key="item.value" class="text-gray-100 relative py-2 cursor-pointer hover:bg-black-400" :id="'listbox-option-' + item.value" role="option" tabindex="0" @keyup.enter="clickedOption(item.value)" @click="clickedOption(item.value)">
            <div class="flex items-center">
@@ -64,7 +64,7 @@ export default {
    },
    itemsToShow() {
      return this.items.map((i) => {
-        if (typeof i === 'string' || typeof i === 'number') {
+        if (typeof i === 'string') {
          return {
            text: i,
            value: i
--- a/client/components/ui/InputDropdown.vue
+++ b/client/components/ui/InputDropdown.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="w-full">
-    <label v-if="label" class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
+    <label class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
    <div ref="wrapper" class="relative">
      <form @submit.prevent="submitForm">
        <div ref="inputWrapper" class="input-wrapper flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-2" :class="disabled ? 'pointer-events-none bg-black-300 text-gray-400' : 'bg-primary'">
-          <input ref="input" v-model="textInput" :disabled="disabled" :readonly="!editable" class="h-full w-full bg-transparent focus:outline-none px-1" @focus="inputFocus" @blur="inputBlur" />
+          <input ref="input" v-model="textInput" :disabled="disabled" :readonly="!editable" class="h-full w-full bg-transparent focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
        </div>
      </form>

@@ -48,6 +48,8 @@ export default {
  data() {
    return {
      isFocused: false,
+      // currentSearch: null,
+      typingTimeout: null,
      textInput: null
    }
  },
@@ -81,6 +83,12 @@ export default {
    }
  },
  methods: {
+    keydownInput() {
+      clearTimeout(this.typingTimeout)
+      this.typingTimeout = setTimeout(() => {
+        // this.currentSearch = this.textInput
+      }, 100)
+    },
    setFocus() {
      if (this.$refs.input && this.editable) this.$refs.input.focus()
    },
@@ -125,9 +133,11 @@ export default {
      if (val && !this.items.includes(val)) {
        this.$emit('newItem', val)
      }
+      // this.currentSearch = null
    },
    clickedOption(e, item) {
      this.textInput = null
+      // this.currentSearch = null
      this.input = item
      if (this.$refs.input) this.$refs.input.blur()
    }
--- a/client/components/ui/LibrariesDropdown.vue
+++ b/client/components/ui/LibrariesDropdown.vue
@@ -1,14 +1,6 @@
 <template>
  <div v-if="currentLibrary" class="relative h-8 max-w-52 md:min-w-32" v-click-outside="clickOutsideObj">
-    <button
-      type="button"
-      :disabled="disabled"
-      class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200"
-      aria-haspopup="listbox"
-      :aria-expanded="showMenu"
-      :aria-label="$strings.ButtonLibrary + ': ' + currentLibrary.name"
-      @click.stop.prevent="clickShowMenu"
-    >
+    <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" :aria-label="$strings.ButtonLibrary + ': ' + currentLibrary.name" @click.stop.prevent="clickShowMenu">
      <div class="flex items-center justify-center sm:justify-start">
        <ui-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
        <span class="hidden sm:block truncate">{{ currentLibrary.name }}</span>
@@ -16,7 +8,7 @@
    </button>

    <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full min-w-48 bg-primary border border-black-200 shadow-lg rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm librariesDropdownMenu" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
        <template v-for="library in librariesFiltered">
          <li :key="library.id" class="text-gray-400 hover:text-white relative py-2 cursor-pointer hover:bg-black-400" role="option" tabindex="0" @keydown.enter="selectLibrary(library)" @click="selectLibrary(library)">
            <div class="flex items-center px-2">
@@ -101,10 +93,4 @@ export default {
  },
  mounted() {}
 }
-</script>
-
-<style scoped>
-.librariesDropdownMenu {
-  max-height: calc(100vh - 75px);
-}
-</style>
+</script>
--- a/client/components/ui/Menu.vue
+++ b/client/components/ui/Menu.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="relative" v-click-outside="clickOutside">
+    <button type="button" class="relative w-full bg-fg border border-gray-500 rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="showMenu = !showMenu">
+      <span class="flex items-center">
+        <span class="block truncate">{{ label }}</span>
+      </span>
+      <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        <span class="material-icons text-2xl text-gray-100" aria-label="User Account" role="button">person</span>
+      </span>
+    </button>
+
+    <transition name="menu">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-activedescendant="listbox-option-3">
+        <template v-for="item in items">
+          <nuxt-link :key="item.value" v-if="item.to" :to="item.to">
+            <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+              <div class="flex items-center">
+                <span class="font-normal ml-3 block truncate font-sans">{{ item.text }}</span>
+              </div>
+            </li>
+          </nuxt-link>
+          <li v-else :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+            <div class="flex items-center">
+              <span class="font-normal ml-3 block truncate font-sans">{{ item.text }}</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: 'Menu'
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showMenu: false
+    }
+  },
+  methods: {
+    clickOutside() {
+      this.showMenu = false
+    },
+    clickedOption(itemValue) {
+      this.$emit('action', itemValue)
+      this.showMenu = false
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/ui/MultiSelect.vue
+++ b/client/components/ui/MultiSelect.vue
@@ -11,7 +11,7 @@
            </div>
            {{ item }}
          </div>
-          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
        </div>
      </form>

@@ -50,11 +50,7 @@ export default {
    label: String,
    disabled: Boolean,
    readonly: Boolean,
-    showEdit: Boolean,
-    menuDisabled: {
-      type: Boolean,
-      default: false
-    },
+    showEdit: Boolean
  },
  data() {
    return {
@@ -81,7 +77,7 @@ export default {
      }
    },
    showMenu() {
-      return this.isFocused && !this.menuDisabled
+      return this.isFocused
    },
    wrapperClass() {
      var classes = []
@@ -149,31 +145,6 @@ export default {
      this.menu.style.left = boundingBox.x + 'px'
      this.menu.style.width = boundingBox.width + 'px'
    },
-    inputPaste(evt) {
-      setTimeout(() => {
-        const pastedText = evt.target?.value || ''
-        console.log('Pasted text=', pastedText)
-        const pastedItems = [
-          ...new Set(
-            pastedText
-              .split(';')
-              .map((i) => i.trim())
-              .filter((i) => i)
-          )
-        ]
-
-        // Filter out items already selected
-        const itemsToAdd = pastedItems.filter((i) => !this.selected.some((_i) => _i.toLowerCase() === i.toLowerCase()))
-        if (pastedItems.length && !itemsToAdd.length) {
-          this.textInput = null
-          this.currentSearch = null
-        } else {
-          for (const itemToAdd of itemsToAdd) {
-            this.insertNewItem(itemToAdd)
-          }
-        }
-      }, 10)
-    },
    inputFocus() {
      if (!this.menu) {
        this.unmountMountMenu()
--- a/client/components/ui/MultiSelectDropdown.vue
+++ b/client/components/ui/MultiSelectDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full" v-click-outside="clickOutsideObj">
+  <div class="w-full" v-click-outside="closeMenu">
    <p class="px-1 text-sm font-semibold">{{ label }}</p>
    <div ref="wrapper" class="relative">
      <div ref="inputWrapper" style="min-height: 40px" class="flex-wrap relative w-full shadow-sm flex items-center bg-primary border border-gray-600 rounded-md px-2 py-1 cursor-pointer" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
@@ -11,24 +11,23 @@
        </div>
      </div>

-      <transition name="menu">
-        <ul ref="menu" v-show="showMenu" class="absolute z-60 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
-          <template v-for="item in items">
-            <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
-              <p class="font-normal ml-3 block truncate">{{ item.text }}</p>
-
-              <div v-if="selected.includes(item.value)" class="text-yellow-400 absolute inset-y-0 right-0 my-auto w-5 h-5 mr-3 overflow-hidden">
-                <span class="material-icons text-xl">checkmark</span>
-              </div>
-            </li>
-          </template>
-          <li v-if="!items.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
-            <div class="flex items-center justify-center">
-              <span class="font-normal">{{ $strings.MessageNoItems }}</span>
+      <ul ref="menu" v-show="showMenu" class="absolute z-60 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+        <template v-for="item in items">
+          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
+            <div class="flex items-center">
+              <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
            </div>
+            <span v-if="selected.includes(item.value)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
+              <span class="material-icons text-xl">checkmark</span>
+            </span>
          </li>
-        </ul>
-      </transition>
+        </template>
+        <li v-if="!items.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
+          <div class="flex items-center justify-center">
+            <span class="font-normal">{{ $strings.MessageNoItems }}</span>
+          </div>
+        </li>
+      </ul>
    </div>
  </div>
 </template>
@@ -49,12 +48,7 @@ export default {
  data() {
    return {
      showMenu: false,
-      menu: null,
-      clickOutsideObj: {
-        handler: this.closeMenu,
-        events: ['mousedown'],
-        isActive: true
-      }
+      menu: null
    }
  },
  computed: {
--- a/client/components/ui/MultiSelectQueryInput.vue
+++ b/client/components/ui/MultiSelectQueryInput.vue
@@ -14,7 +14,7 @@
          <div v-if="showEdit && !disabled" class="rounded-full cursor-pointer w-6 h-6 mx-0.5 bg-bg flex items-center justify-center">
            <span class="material-icons text-white hover:text-success pt-px pr-px" style="font-size: 1.1rem" @click.stop="addItem">add</span>
          </div>
-          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
        </div>
      </form>

@@ -46,7 +46,7 @@ export default {
      type: Array,
      default: () => []
    },
-    filterKey: String,
+    endpoint: String,
    label: String,
    disabled: Boolean,
    readonly: Boolean,
@@ -60,6 +60,7 @@ export default {
    return {
      textInput: null,
      currentSearch: null,
+      searching: false,
      typingTimeout: null,
      isFocused: false,
      menu: null,
@@ -96,9 +97,6 @@ export default {
    },
    itemsToShow() {
      return this.items
-    },
-    filterData() {
-      return this.$store.state.libraries.filterData || {}
    }
  },
  methods: {
@@ -111,16 +109,20 @@ export default {
    getIsSelected(itemValue) {
      return !!this.selected.find((i) => i.id === itemValue)
    },
-    search() {
-      if (!this.textInput) return
+    async search() {
+      if (this.searching) return
      this.currentSearch = this.textInput
-      const dataToSearch = this.filterData[this.filterKey] || []
-
-      const results = dataToSearch.filter((au) => {
-        return au.name.toLowerCase().includes(this.currentSearch.toLowerCase().trim())
-      })
+      this.searching = true
+      const results = await this.$axios
+        .$get(`/api/${this.endpoint}?q=${this.currentSearch}&limit=15&token=${this.userToken}`)
+        .then((res) => res.results || res)
+        .catch((error) => {
+          console.error('Failed to get search results', error)
+          return []
+        })

      this.items = results || []
+      this.searching = false
    },
    keydownInput() {
      clearTimeout(this.typingTimeout)
@@ -166,34 +168,6 @@ export default {
      this.menu.style.left = boundingBox.x + 'px'
      this.menu.style.width = boundingBox.width + 'px'
    },
-    inputPaste(evt) {
-      setTimeout(() => {
-        const pastedText = evt.target?.value || ''
-        console.log('Pasted text=', pastedText)
-        const pastedItems = [
-          ...new Set(
-            pastedText
-              .split(';')
-              .map((i) => i.trim())
-              .filter((i) => i)
-          )
-        ]
-
-        // Filter out items already selected
-        const itemsToAdd = pastedItems.filter((i) => !this.selected.some((_i) => _i[this.textKey].toLowerCase() === i.toLowerCase()))
-        if (pastedItems.length && !itemsToAdd.length) {
-          this.textInput = null
-          this.currentSearch = null
-        } else {
-          for (const [index, itemToAdd] of itemsToAdd.entries()) {
-            this.insertNewItem({
-              id: `new-${Date.now()}-${index}`,
-              name: itemToAdd
-            })
-          }
-        }
-      }, 10)
-    },
    inputFocus() {
      if (!this.menu) {
        this.unmountMountMenu()
--- a/client/components/ui/RangeInput.vue
+++ b/client/components/ui/RangeInput.vue
@@ -1,86 +0,0 @@
-<template>
-  <div class="inline-flex">
-    <input v-model="input" type="range" :min="min" :max="max" :step="step" />
-
-    <p class="text-sm ml-2">{{ input }}%</p>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: [String, Number],
-    min: Number,
-    max: Number,
-    step: Number
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    input: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
-
-<style scoped>
-input[type='range'] {
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-  cursor: pointer;
-}
-input[type='range']:focus {
-  outline: none;
-}
-
-/* chromium */
-input[type='range']::-webkit-slider-runnable-track {
-  background-color: rgb(0 0 0 / 0.25);
-  border-radius: 9999px;
-  height: 0.75rem;
-}
-input[type='range']::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  margin-top: -0.25rem;
-  border-radius: 9999px;
-  background-color: rgb(255 255 255 / 0.7);
-  height: 1.25rem;
-  width: 1.25rem;
-}
-input[type='range']:focus::-webkit-slider-thumb {
-  border: 1px solid #6b6b6b;
-  outline: 3px solid #6b6b6b;
-  outline-offset: 0.125rem;
-}
-
-/* firefox */
-input[type='range']::-moz-range-track {
-  background-color: rgb(0 0 0 / 0.25);
-  border-radius: 9999px;
-  height: 0.75rem;
-}
-input[type='range']::-moz-range-thumb {
-  border: none;
-  border-radius: 9999px;
-  margin-top: -0.25rem;
-  background-color: rgb(255 255 255 / 0.7);
-  height: 1.25rem;
-  width: 1.25rem;
-}
-input[type='range']:focus::-moz-range-thumb {
-  border: 1px solid #6b6b6b;
-  outline: 3px solid #6b6b6b;
-  outline-offset: 0.125rem;
-}
-</style>
--- a/client/components/ui/TextInput.vue
+++ b/client/components/ui/TextInput.vue
@@ -68,7 +68,6 @@ export default {
  methods: {
    clear() {
      this.inputValue = ''
-      this.$emit('clear')
    },
    focused() {
      this.isFocused = true
--- a/client/components/ui/TextareaWithLabel.vue
+++ b/client/components/ui/TextareaWithLabel.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="w-full">
    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</p>
-    <ui-textarea-input ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :rows="rows" class="w-full" />
+    <ui-textarea-input ref="input" v-model="inputValue" :disabled="disabled" :rows="rows" class="w-full" />
  </div>
 </template>

@@ -11,7 +11,6 @@ export default {
    value: [String, Number],
    label: String,
    disabled: Boolean,
-    readonly: Boolean,
    rows: {
      type: Number,
      default: 2
--- a/client/components/ui/ToggleBtns.vue
+++ b/client/components/ui/ToggleBtns.vue
@@ -1,85 +0,0 @@
-<template>
-  <div class="inline-flex toggle-btn-wrapper shadow-md">
-    <button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-none relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
-      {{ item.text }}
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: String,
-    /**
-     * [{ "text", "", "value": "" }]
-     */
-    items: {
-      type: Array,
-      default: Object
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {
-    clickBtn(value) {
-      this.$emit('input', value)
-    }
-  },
-  mounted() {}
-}
-</script>
-
-<style scoped>
-.toggle-btn-wrapper .toggle-btn:first-child {
-  border-top-left-radius: 0.375rem /* 6px */;
-  border-bottom-left-radius: 0.375rem /* 6px */;
-}
-.toggle-btn-wrapper .toggle-btn:last-child {
-  border-top-right-radius: 0.375rem /* 6px */;
-  border-bottom-right-radius: 0.375rem /* 6px */;
-}
-.toggle-btn-wrapper .toggle-btn:first-child::before {
-  border-top-left-radius: 0.375rem /* 6px */;
-  border-bottom-left-radius: 0.375rem /* 6px */;
-}
-.toggle-btn-wrapper .toggle-btn:last-child::before {
-  border-top-right-radius: 0.375rem /* 6px */;
-  border-bottom-right-radius: 0.375rem /* 6px */;
-}
-
-.toggle-btn-wrapper .toggle-btn:not(:first-child) {
-  margin-left: -1px;
-}
-
-.toggle-btn::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  transition: all 0.1s ease-in-out;
-}
-.toggle-btn:hover:not(:disabled)::before {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.toggle-btn:hover:not(:disabled) {
-  color: white;
-}
-
-.toggle-btn {
-  color: rgba(255, 255, 255, 0.75);
-}
-.toggle-btn.selected {
-  color: white;
-}
-.toggle-btn.selected::before {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-button.toggle-btn:disabled::before {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
--- a/client/components/ui/VueTrix.vue
+++ b/client/components/ui/VueTrix.vue
@@ -213,9 +213,7 @@ export default {
      // Reload HTML content
      this.$refs.trix.editor.loadHTML(newContent)
      // Move cursor to end of new content updated
-      if (this.autofocus) {
-        this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())
-      }
+      this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())
    },
    getContentEndPosition() {
      return this.$refs.trix.editor.getDocument().toString().length - 1
--- a/client/components/widgets/BookDetailsEdit.vue
+++ b/client/components/widgets/BookDetailsEdit.vue
@@ -12,8 +12,8 @@

      <div class="flex flex-wrap mt-2 -mx-1">
        <div class="w-full md:w-3/4 px-1">
-          <!-- Authors filter only contains authors in this library, uses filter data -->
-          <ui-multi-select-query-input ref="authorsSelect" v-model="details.authors" :label="$strings.LabelAuthors" filter-key="authors" />
+          <!-- Authors filter only contains authors in this library, use query input to query all authors -->
+          <ui-multi-select-query-input ref="authorsSelect" v-model="details.authors" :label="$strings.LabelAuthors" endpoint="authors/search" />
        </div>
        <div class="flex-grow px-1 mt-2 md:mt-0">
          <ui-text-input-with-label ref="publishYearInput" v-model="details.publishedYear" type="number" :label="$strings.LabelPublishYear" />
--- a/client/components/widgets/CloseButton.vue
+++ b/client/components/widgets/CloseButton.vue
@@ -0,0 +1,33 @@
+<template>
+  <button class="bg-error text-white px-2 py-1 shadow-md" @click="$emit('click', $event)">Cancel</button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.Vue-Toastification__close-button.cancel-scan-btn {
+  background-color: rgb(255, 82, 82);
+  color: white;
+  font-size: 0.9rem;
+  opacity: 1;
+  padding: 0px 10px;
+  border-radius: 6px;
+  font-weight: normal;
+  font-family: 'Open Sans';
+  margin-left: 10px;
+  opacity: 0.3;
+}
+.Vue-Toastification__close-button.cancel-scan-btn:hover {
+  background-color: rgb(235, 65, 65);
+  opacity: 1;
+}
+</style>
--- a/client/components/widgets/MoreMenu.vue
+++ b/client/components/widgets/MoreMenu.vue
@@ -1,17 +1,7 @@
 <template>
-  <div ref="wrapper" class="absolute bg-bg rounded-md py-1 border border-black-200 shadow-lg z-50" v-click-outside="clickOutsideObj" :style="{ width: menuWidth + 'px' }" style="top: 0; left: 0">
+  <div class="absolute w-36 bg-bg rounded-md border border-black-200 shadow-lg z-50" v-click-outside="clickOutsideObj" style="top: 0; left: 0">
    <template v-for="(item, index) in items">
-      <template v-if="item.subitems">
-        <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-default" :class="{ 'bg-white/5': mouseoverItemIndex == index }" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
-          <p>{{ item.text }}</p>
-        </div>
-        <div v-if="mouseoverItemIndex === index" :key="`subitems-${index}`" @mouseover="mouseoverSubItemMenu(index)" @mouseleave="mouseleaveSubItemMenu(index)" class="absolute bg-bg rounded-b-md border border-black-200 py-1 shadow-lg z-50" :class="openSubMenuLeft ? 'rounded-l-md' : 'rounded-r-md'" :style="{ left: submenuLeftPos + 'px', top: index * 28 + 'px', width: submenuWidth + 'px' }">
-          <div v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @click.stop="clickAction(subitem.func, subitem.data)">
-            <p>{{ subitem.text }}</p>
-          </div>
-        </div>
-      </template>
-      <div v-else :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop="clickAction(item.func)">
+      <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.func)">
        <p>{{ item.text }}</p>
      </div>
    </template>
@@ -32,43 +22,13 @@ export default {
        handler: this.clickedOutside,
        events: ['mousedown'],
        isActive: true
-      },
-      submenuWidth: 144,
-      menuWidth: 144,
-      mouseoverItemIndex: null,
-      isOverSubItemMenu: false,
-      openSubMenuLeft: false
-    }
-  },
-  computed: {
-    submenuLeftPos() {
-      return this.openSubMenuLeft ? -this.submenuWidth : this.menuWidth - 1.5
+      }
    }
  },
+  computed: {},
  methods: {
-    mouseoverSubItemMenu(index) {
-      this.isOverSubItemMenu = true
-    },
-    mouseleaveSubItemMenu(index) {
-      setTimeout(() => {
-        if (this.isOverSubItemMenu && this.mouseoverItemIndex === index) this.mouseoverItemIndex = null
-      }, 1)
-    },
-    mouseoverItem(index) {
-      this.isOverSubItemMenu = false
-      this.mouseoverItemIndex = index
-    },
-    mouseleaveItem(index) {
-      setTimeout(() => {
-        if (this.isOverSubItemMenu) return
-        if (this.mouseoverItemIndex === index) this.mouseoverItemIndex = null
-      }, 1)
-    },
-    clickAction(func, data) {
-      this.$emit('action', {
-        func,
-        data
-      })
+    clickAction(func) {
+      this.$emit('action', func)
      this.close()
    },
    clickedOutside(e) {
@@ -84,14 +44,7 @@ export default {
      this.$el.parentNode.removeChild(this.$el)
    }
  },
-  mounted() {
-    this.$nextTick(() => {
-      const boundingRect = this.$refs.wrapper?.getBoundingClientRect()
-      if (boundingRect) {
-        this.openSubMenuLeft = window.innerWidth - boundingRect.x < this.menuWidth + this.submenuWidth + 5
-      }
-    })
-  },
+  mounted() {},
  beforeDestroy() {}
 }
 </script>
--- a/client/components/widgets/NotificationWidget.vue
+++ b/client/components/widgets/NotificationWidget.vue
@@ -1,23 +1,19 @@
 <template>
-  <div v-if="tasksToShow.length" class="w-4 h-4 mx-3 relative" v-click-outside="clickOutsideObj">
+  <div v-if="tasksRunning" class="w-4 h-4 mx-3 relative" v-click-outside="clickOutsideObj">
    <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full cursor-pointer" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
      <div class="flex h-full items-center justify-center">
-        <ui-tooltip v-if="tasksRunning" :text="$strings.LabelTasks" direction="bottom" class="flex items-center">
+        <ui-tooltip text="Tasks running" direction="bottom" class="flex items-center">
          <widgets-loading-spinner />
        </ui-tooltip>
-        <ui-tooltip v-else text="Activities" direction="bottom" class="flex items-center">
-          <span class="material-icons text-1.5xl" aria-label="Activities" role="button">notifications</span>
-        </ui-tooltip>
      </div>
-      <div v-if="showUnseenSuccessIndicator" class="w-2 h-2 rounded-full bg-success pointer-events-none absolute -top-1 -right-0.5" />
-      <div v-if="showUnseenSuccessIndicator" class="w-2 h-2 rounded-full bg-success/50 pointer-events-none absolute animate-ping -top-1 -right-0.5" />
    </button>
    <transition name="menu">
      <div class="sm:w-80 w-full relative">
-        <div v-show="showMenu" class="absolute z-40 -mt-px w-40 sm:w-full bg-bg border border-black-200 shadow-lg rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalTaskRunningMenu">
+        <div v-show="showMenu" class="absolute z-40 -mt-px w-40 sm:w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalTaskRunningMenu">
          <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-            <template v-if="tasksToShow.length">
-              <template v-for="task in tasksToShow">
+            <template v-if="tasksRunningOrFailed.length">
+              <p class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelTasks }}</p>
+              <template v-for="task in tasksRunningOrFailed">
                <nuxt-link :key="task.id" v-if="actionLink(task)" :to="actionLink(task)">
                  <li class="text-gray-50 select-none relative hover:bg-black-400 py-1 cursor-pointer">
                    <cards-item-task-running-card :task="task" />
@@ -48,8 +44,7 @@ export default {
        isActive: true
      },
      showMenu: false,
-      disabled: false,
-      tasksSeen: []
+      disabled: false
    }
  },
  computed: {
@@ -59,24 +54,15 @@ export default {
    tasksRunning() {
      return this.tasks.some((t) => !t.isFinished)
    },
-    tasksToShow() {
-      // return just the tasks that are running or failed (or show success) in the last 1 minute
-      const tasks = this.tasks.filter((t) => !t.isFinished || ((t.isFailed || t.showSuccess) && t.finishedAt > new Date().getTime() - 1000 * 60)) || []
-      return tasks.sort((a, b) => b.startedAt - a.startedAt)
-    },
-    showUnseenSuccessIndicator() {
-      return this.tasksToShow.some((t) => t.isFinished && !t.isFailed && !this.tasksSeen.includes(t.id))
+    tasksRunningOrFailed() {
+      // return just the tasks that are running or failed in the last 1 minute
+      return this.tasks.filter((t) => !t.isFinished || (t.isFailed && t.finishedAt > new Date().getTime() - 1000 * 60)) || []
    }
  },
  methods: {
    clickShowMenu() {
      if (this.disabled) return
      this.showMenu = !this.showMenu
-      if (this.showMenu) {
-        this.tasksToShow.forEach((t) => {
-          if (!this.tasksSeen.includes(t.id)) this.tasksSeen.push(t.id)
-        })
-      }
    },
    clickedOutside() {
      this.showMenu = false
@@ -89,25 +75,12 @@ export default {
          return `/audiobook/${task.data.libraryItemId}/manage?tool=m4b`
        case 'embed-metadata':
          return `/audiobook/${task.data.libraryItemId}/manage?tool=embed`
-        case 'scan-item':
-          return `/item/${task.data.libraryItemId}`
        default:
          return ''
      }
-    },
-    taskFinished(task) {
-      // add task as seen if menu is open when it finished
-      if (this.showMenu && !this.tasksSeen.includes(task.id)) {
-        this.tasksSeen.push(task.id)
-      }
    }
  },
-  mounted() {
-    this.$root.socket?.on('task_finished', this.taskFinished)
-  },
-  beforeDestroy() {
-    this.$root.socket?.off('task_finished', this.taskFinished)
-  }
+  mounted() {}
 }
 </script>

--- a/Show More
+++ b/Show More