diff --git a/client/assets/app.css b/client/assets/app.css
index c72ed99cd..3e0c98f30 100644
--- a/client/assets/app.css
+++ b/client/assets/app.css
@@ -112,7 +112,7 @@ input[type=number] {
   background-color: #373838;
 }
 
-.tracksTable tr:hover {
+.tracksTable tr:hover:not(:has(th)) {
   background-color: #474747;
 }
 
diff --git a/client/components/app/SideRail.vue b/client/components/app/SideRail.vue
index 25350d24d..995f4c232 100644
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@@ -49,6 +49,14 @@
       <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>
+
+      <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
+
+      <div v-show="isPlaylistsPage" 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
@@ -62,6 +70,14 @@
       <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}/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>
+
+      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.LabelNarrators }}</p>
+
+      <div v-show="isNarratorsPage" 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>
 
@@ -78,14 +94,6 @@
       <div v-show="isMusicAlbumsPage" 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>
-
-      <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
-
-      <div v-show="isPlaylistsPage" 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>
 
@@ -178,6 +186,9 @@ export default {
     isAuthorsPage() {
       return this.$route.name === 'library-library-authors'
     },
+    isNarratorsPage() {
+      return this.$route.name === 'library-library-narrators'
+    },
     isPlaylistsPage() {
       return this.paramId === 'playlists'
     },
diff --git a/client/components/cards/NarratorCard.vue b/client/components/cards/NarratorCard.vue
index 9d3e5a303..7b8848cca 100644
--- 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-20">
-        <span class="material-icons-outlined text-8xl">record_voice_over</span>
+      <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>
 
       <!-- Narrator name & num books overlay -->
diff --git a/client/components/content/LibraryItemDetails.vue b/client/components/content/LibraryItemDetails.vue
new file mode 100644
index 000000000..9b9d6b0c7
--- /dev/null
+++ b/client/components/content/LibraryItemDetails.vue
@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <div v-if="narrators?.length" class="flex py-0.5 mt-4">
+      <div class="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-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPublishYear }}</span>
+      </div>
+      <div>
+        {{ publishedYear }}
+      </div>
+    </div>
+    <div v-if="musicAlbum" class="flex py-0.5">
+      <div class="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-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-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-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-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-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-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-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-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 || []
+    },
+    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>
\ No newline at end of file
diff --git a/client/components/tables/LibraryFilesTable.vue b/client/components/tables/LibraryFilesTable.vue
index 12ad86e5b..f3a243318 100644
--- a/client/components/tables/LibraryFilesTable.vue
+++ b/client/components/tables/LibraryFilesTable.vue
@@ -70,6 +70,9 @@ export default {
       return this.libraryItem.libraryFiles || []
     },
     audioFiles() {
+      if (this.libraryItem.mediaType === 'podcast') {
+        return this.libraryItem.media?.episodes.map((ep) => ep.audioFile) || []
+      }
       return this.libraryItem.media?.audioFiles || []
     },
     filesWithAudioFile() {
diff --git a/client/nuxt.config.js b/client/nuxt.config.js
index 029e411d6..f3241d284 100644
--- a/client/nuxt.config.js
+++ b/client/nuxt.config.js
@@ -45,7 +45,6 @@ module.exports = ({ command }) => ({
   plugins: [
     '@/plugins/constants.js',
     '@/plugins/init.client.js',
-    '@/plugins/sortable.js',
     '@/plugins/favicon.js',
     '@/plugins/axios.js',
     '@/plugins/toast.js',
diff --git a/client/pages/config/item-metadata-utils/tags.vue b/client/pages/config/item-metadata-utils/tags.vue
index 9bddaace4..1374b7b83 100644
--- a/client/pages/config/item-metadata-utils/tags.vue
+++ b/client/pages/config/item-metadata-utils/tags.vue
@@ -17,8 +17,8 @@
           <ui-text-input v-else v-model="newTagName" />
           <div class="flex-grow" />
           <template v-if="editingTag !== tag">
-            <ui-icon-btn v-if="editingTag !== tag" icon="edit" borderless :size="8" icon-font-size="1.1rem" class="mx-1" @click="editTagClick(tag)" />
-            <ui-icon-btn v-if="editingTag !== tag" icon="delete" borderless :size="8" icon-font-size="1.1rem" @click="removeTagClick(tag)" />
+            <ui-icon-btn icon="edit" borderless :size="8" icon-font-size="1.1rem" class="mx-1" @click="editTagClick(tag)" />
+            <ui-icon-btn icon="delete" borderless :size="8" icon-font-size="1.1rem" @click="removeTagClick(tag)" />
           </template>
           <template v-else>
             <ui-btn color="success" small class="mx-2" @click.stop="saveTagClick">{{ $strings.ButtonSave }}</ui-btn>
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index f03d25169..8fb1837f5 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -47,84 +47,7 @@
                 <p v-else class="mb-2 mt-0.5 text-gray-200 text-xl">by Unknown</p>
               </template>
 
-              <div v-if="narrator" class="flex py-0.5 mt-4">
-                <div class="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-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPublishYear }}</span>
-                </div>
-                <div>
-                  {{ publishedYear }}
-                </div>
-              </div>
-              <div v-if="musicAlbum" class="flex py-0.5">
-                <div class="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-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-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-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">Disc</span>
-                </div>
-                <div>
-                  {{ musicDiscPretty }}
-                </div>
-              </div>
-              <div class="flex py-0.5" v-if="genres.length">
-                <div class="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 v-if="tracks.length || audioFile || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
-                <div class="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-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelSize }}</span>
-                </div>
-                <div>
-                  {{ sizePretty }}
-                </div>
-              </div>
+              <content-library-item-details :library-item="libraryItem" />
             </div>
             <div class="hidden md:block flex-grow" />
           </div>
@@ -339,9 +262,6 @@ export default {
     libraryId() {
       return this.libraryItem.libraryId
     },
-    folderId() {
-      return this.libraryItem.folderId
-    },
     libraryItemId() {
       return this.libraryItem.id
     },
@@ -367,19 +287,10 @@ export default {
     title() {
       return this.mediaMetadata.title || 'No Title'
     },
-    publishedYear() {
-      return this.mediaMetadata.publishedYear
-    },
-    narrator() {
-      return this.mediaMetadata.narratorName
-    },
     bookSubtitle() {
       if (this.isPodcast) return null
       return this.mediaMetadata.subtitle
     },
-    genres() {
-      return this.mediaMetadata.genres || []
-    },
     podcastAuthor() {
       return this.mediaMetadata.author || ''
     },
@@ -389,25 +300,6 @@ export default {
     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 || []
-    },
     series() {
       return this.mediaMetadata.series || []
     },
@@ -421,26 +313,10 @@ export default {
         }
       })
     },
-    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)
-    },
     libraryFiles() {
       return this.libraryItem.libraryFiles || []
     },
diff --git a/client/pages/library/_library/narrators.vue b/client/pages/library/_library/narrators.vue
new file mode 100644
index 000000000..22d583c70
--- /dev/null
+++ b/client/pages/library/_library/narrators.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="page relative" :class="streamLibraryItem ? 'streaming' : ''">
+    <app-book-shelf-toolbar page="narrators" is-home />
+    <div id="bookshelf" class="w-full h-full px-1 py-4 md:p-8 relative overflow-y-auto">
+      <table class="tracksTable max-w-2xl mx-auto">
+        <tr>
+          <th class="text-left">{{ $strings.LabelName }}</th>
+          <th class="text-center w-24">{{ $strings.LabelBooks }}</th>
+          <th v-if="userCanUpdate" class="w-40"></th>
+        </tr>
+        <tr v-for="narrator in narrators" :key="narrator.id">
+          <td>
+            <p v-if="selectedNarrator?.id !== narrator.id" class="text-sm md:text-base text-gray-100">{{ narrator.name }}</p>
+            <form v-else @submit.prevent="saveClick">
+              <ui-text-input v-model="newNarratorName" />
+            </form>
+          </td>
+          <td class="text-center w-24">
+            <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${narrator.id}`" class="hover:underline">{{ narrator.numBooks }}</nuxt-link>
+          </td>
+          <td v-if="userCanUpdate" class="w-40">
+            <div class="flex justify-end items-center h-10">
+              <template v-if="selectedNarrator?.id !== narrator.id">
+                <ui-icon-btn icon="edit" borderless :size="8" icon-font-size="1.1rem" class="mx-1" @click="editClick(narrator)" />
+                <ui-icon-btn icon="delete" borderless :size="8" icon-font-size="1.1rem" @click="removeClick(narrator)" />
+              </template>
+              <template v-else>
+                <ui-btn color="success" small class="mr-2" @click.stop="saveClick">{{ $strings.ButtonSave }}</ui-btn>
+                <ui-btn small @click.stop="cancelEditClick">{{ $strings.ButtonCancel }}</ui-btn>
+              </template>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <div v-if="loading" class="absolute top-0 left-0 w-full h-[calc(100%-40px)] mt-10 flex items-center justify-center bg-black/25">
+      <ui-loading-indicator />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, params, redirect, query, app }) {
+    const libraryId = params.library
+    const libraryData = await store.dispatch('libraries/fetch', libraryId)
+    if (!libraryData) {
+      return redirect('/oops?message=Library not found')
+    }
+
+    const library = libraryData.library
+    if (library.mediaType === 'podcast') {
+      return redirect(`/library/${libraryId}`)
+    }
+
+    return {
+      libraryId
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      narrators: [],
+      selectedNarrator: null,
+      newNarratorName: null
+    }
+  },
+  computed: {
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    }
+  },
+  methods: {
+    removeClick(narrator) {
+      const payload = {
+        message: this.$getString('MessageConfirmRemoveNarrator', [narrator.name]),
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.removeNarrator(narrator.id)
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    editClick(narrator) {
+      this.selectedNarrator = narrator
+      this.newNarratorName = narrator.name
+    },
+    cancelEditClick() {
+      this.selectedNarrator = null
+      this.newNarratorName = null
+    },
+    saveClick() {
+      if (!this.selectedNarrator) return
+      this.newNarratorName = this.newNarratorName?.trim() || ''
+      if (!this.newNarratorName || this.newNarratorName === this.selectedNarrator.name) {
+        this.cancelEditClick()
+        return
+      }
+
+      this.loading = true
+      this.$axios
+        .$patch(`/api/libraries/${this.currentLibraryId}/narrators/${this.selectedNarrator.id}`, { name: this.newNarratorName })
+        .then((data) => {
+          if (data.updated) {
+            this.$toast.success(this.$getString('MessageItemsUpdated', [data.updated]))
+          } else {
+            this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+          }
+          this.cancelEditClick()
+          this.init()
+        })
+        .catch((error) => {
+          console.error('Failed to updated narrator', error)
+          this.$toast.error('Failed to update narrator')
+          this.loading = false
+        })
+    },
+    removeNarrator(id) {
+      this.loading = true
+      this.$axios
+        .$delete(`/api/libraries/${this.currentLibraryId}/narrators/${id}`)
+        .then((data) => {
+          if (data.updated) {
+            this.$toast.success(this.$getString('MessageItemsUpdated', [data.updated]))
+          } else {
+            this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+          }
+          this.init()
+        })
+        .catch((error) => {
+          console.error('Failed to remove narrator', error)
+          this.$toast.error('Failed to remove narrator')
+          this.loading = false
+        })
+    },
+    async init() {
+      this.narrators = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/narrators`)
+        .then((response) => response.narrators)
+        .catch((error) => {
+          console.error('Failed to load narrators', error)
+          return []
+        })
+      this.loading = false
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {}
+}
+</script>
\ No newline at end of file
diff --git a/client/plugins/sortable.js b/client/plugins/sortable.js
deleted file mode 100644
index f1d13208d..000000000
--- a/client/plugins/sortable.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function ({ $config }) {
-  const script = document.createElement('script')
-  script.type = 'text/javascript'
-  script.src = `${$config.routerBasePath || ''}/libs/sortable.js`
-
-  document.head.appendChild(script)
-}
\ No newline at end of file
diff --git a/client/static/libs/sortable.js b/client/static/libs/sortable.js
deleted file mode 100644
index a2abe265d..000000000
--- a/client/static/libs/sortable.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/*! Sortable 1.8.4 - MIT | git://github.com/SortableJS/Sortable.git */
-
-!function (t) { "use strict"; "function" == typeof define && define.amd ? define(t) : "undefined" != typeof module && void 0 !== module.exports ? module.exports = t() : window.Sortable = t() }(function () { "use strict"; if ("undefined" == typeof window || !window.document) return function () { throw new Error("Sortable.js requires a window with a document") }; var U, V, f, u, q, G, h, X, Y, A, K, n, Z, Q, l, s, c, p, k, J, $, tt, et, ot, g, nt, I = [], B = !1, v = !1, it = !1, d = [], rt = !1, at = !1, m = [], i = /\s+/g, lt = "Sortable" + (new Date).getTime(), b = window, st = b.document, w = b.parseInt, ct = b.setTimeout, e = b.jQuery || b.Zepto, o = b.Polymer, r = { capture: !1, passive: !1 }, dt = !!navigator.userAgent.match(/(?:Trident.*rv[ :]?11\.|msie|iemobile)/i), _ = !!navigator.userAgent.match(/Edge/i), y = !!navigator.userAgent.match(/firefox/i), D = !(!navigator.userAgent.match(/safari/i) || navigator.userAgent.match(/chrome/i) || navigator.userAgent.match(/android/i)), S = !!navigator.userAgent.match(/iP(ad|od|hone)/i), T = _ || dt ? "cssFloat" : "float", a = "draggable" in st.createElement("div"), C = function () { if (dt) return !1; var t = st.createElement("x"); return t.style.cssText = "pointer-events:auto", "auto" === t.style.pointerEvents }(), ht = !1, E = !1, ut = Math.abs, x = Math.min, N = Math.max, M = [], P = function (t, e) { var o = Dt(t), n = w(o.width) - w(o.paddingLeft) - w(o.paddingRight) - w(o.borderLeftWidth) - w(o.borderRightWidth), i = Mt(t, 0, e), r = Mt(t, 1, e), a = i && Dt(i), l = r && Dt(r), s = a && w(a.marginLeft) + w(a.marginRight) + Lt(i).width, c = l && w(l.marginLeft) + w(l.marginRight) + Lt(r).width; if ("flex" === o.display) return "column" === o.flexDirection || "column-reverse" === o.flexDirection ? "vertical" : "horizontal"; if ("grid" === o.display) return o.gridTemplateColumns.split(" ").length <= 1 ? "vertical" : "horizontal"; if (i && "none" !== a.float) { var d = "left" === a.float ? "left" : "right"; return !r || "both" !== l.clear && l.clear !== d ? "horizontal" : "vertical" } return i && ("block" === a.display || "flex" === a.display || "table" === a.display || "grid" === a.display || n <= s && "none" === o[T] || r && "none" === o[T] && n < s + c) ? "vertical" : "horizontal" }, O = function (t, e) { if (!t || !t.getBoundingClientRect) return H(); var o = t, n = !1; do { if (o.clientWidth < o.scrollWidth || o.clientHeight < o.scrollHeight) { var i = Dt(o); if (o.clientWidth < o.scrollWidth && ("auto" == i.overflowX || "scroll" == i.overflowX) || o.clientHeight < o.scrollHeight && ("auto" == i.overflowY || "scroll" == i.overflowY)) { if (!o || !o.getBoundingClientRect || o === st.body) return H(); if (n || e) return o; n = !0 } } } while (o = o.parentNode); return H() }, H = function () { return dt ? st.documentElement : st.scrollingElement }, ft = function (t, e, o) { t.scrollLeft += e, t.scrollTop += o }, R = It(function (o, t, e, n) { if (t.scroll) { var i = e ? e[lt] : window, r = t.scrollSensitivity, a = t.scrollSpeed, l = o.clientX, s = o.clientY, c = H(), d = !1; Y !== e && (L(), X = t.scroll, A = t.scrollFn, !0 === X && (X = O(e, !0), Y = X)); var h = 0, u = X; do { var f, p, g, v, m, b, w, _, y, D = u, S = Lt(D), T = S.top, C = S.bottom, E = S.left, x = S.right, N = S.width, M = S.height; if (f = D.scrollWidth, p = D.scrollHeight, g = Dt(D), _ = D.scrollLeft, y = D.scrollTop, w = D === c ? (b = N < f && ("auto" === g.overflowX || "scroll" === g.overflowX || "visible" === g.overflowX), M < p && ("auto" === g.overflowY || "scroll" === g.overflowY || "visible" === g.overflowY)) : (b = N < f && ("auto" === g.overflowX || "scroll" === g.overflowX), M < p && ("auto" === g.overflowY || "scroll" === g.overflowY)), v = b && (ut(x - l) <= r && _ + N < f) - (ut(E - l) <= r && !!_), m = w && (ut(C - s) <= r && y + M < p) - (ut(T - s) <= r && !!y), !I[h]) for (var P = 0; P <= h; P++)I[P] || (I[P] = {}); I[h].vx == v && I[h].vy == m && I[h].el === D || (I[h].el = D, I[h].vx = v, I[h].vy = m, clearInterval(I[h].pid), !D || 0 == v && 0 == m || (d = !0, I[h].pid = setInterval(function () { n && 0 === this.layer && (mt.active._emulateDragOver(!0), mt.active._onTouchMove(k, !0)); var t = I[this.layer].vy ? I[this.layer].vy * a : 0, e = I[this.layer].vx ? I[this.layer].vx * a : 0; "function" == typeof A && "continue" !== A.call(i, e, t, o, k, I[this.layer].el) || ft(I[this.layer].el, e, t) }.bind({ layer: h }), 24))), h++ } while (t.bubbleScroll && u !== c && (u = O(u, !1))); B = d } }, 30), L = function () { I.forEach(function (t) { clearInterval(t.pid) }), I = [] }, W = function (t) { function s(a, l) { return function (t, e, o, n) { var i = t.options.group.name && e.options.group.name && t.options.group.name === e.options.group.name; if (null == a && (l || i)) return !0; if (null == a || !1 === a) return !1; if (l && "clone" === a) return a; if ("function" == typeof a) return s(a(t, e, o, n), l)(t, e, o, n); var r = (l ? t : e).options.group.name; return !0 === a || "string" == typeof a && a === r || a.join && -1 < a.indexOf(r) } } var e = {}, o = t.group; o && "object" == typeof o || (o = { name: o }), e.name = o.name, e.checkPull = s(o.pull, !0), e.checkPut = s(o.put), e.revertClone = o.revertClone, t.group = e }, F = function (t) { U && U.parentNode && U.parentNode[lt] && U.parentNode[lt]._computeIsAligned(t) }, pt = function (t, e) { for (var o = e; !o[lt];)o = o.parentNode; return t === o }, gt = function (t, e, o) { for (var n = t.parentNode; n && !n[lt];)n = n.parentNode; n && n[lt][o](Bt(e, { artificialBubble: !0 })) }, z = function () { !C && f && Dt(f, "display", "none") }, j = function () { !C && f && Dt(f, "display", "") }; st.addEventListener("click", function (t) { if (it) return t.preventDefault(), t.stopPropagation && t.stopPropagation(), t.stopImmediatePropagation && t.stopImmediatePropagation(), it = !1 }, !0); var vt, t = function (t) { if (t = t.touches ? t.touches[0] : t, U) { var e = function (t, e) { for (var o = 0; o < d.length; o++)if (!Pt(d[o])) { var n = Lt(d[o]), i = d[o][lt].options.emptyInsertThreshold, r = t >= n.left - i && t <= n.right + i, a = e >= n.top - i && e <= n.bottom + i; if (r && a) return d[o] } }(t.clientX, t.clientY); e && e[lt]._onDragOver({ clientX: t.clientX, clientY: t.clientY, target: e, rootEl: e }) } }; function mt(t, e) { if (!t || !t.nodeType || 1 !== t.nodeType) throw "Sortable: `el` must be HTMLElement, not " + {}.toString.call(t); this.el = t, this.options = e = Bt({}, e), t[lt] = this; var o = { group: null, sort: !0, disabled: !1, store: null, handle: null, scroll: !0, scrollSensitivity: 30, scrollSpeed: 10, bubbleScroll: !0, draggable: /[uo]l/i.test(t.nodeName) ? ">li" : ">*", swapThreshold: 1, invertSwap: !1, invertedSwapThreshold: null, removeCloneOnHide: !0, direction: function () { return P(t, this.options) }, ghostClass: "sortable-ghost", chosenClass: "sortable-chosen", dragClass: "sortable-drag", ignore: "a, img", filter: null, preventOnFilter: !0, animation: 0, easing: null, setData: function (t, e) { t.setData("Text", e.textContent) }, dropBubble: !1, dragoverBubble: !1, dataIdAttr: "data-id", delay: 0, touchStartThreshold: w(window.devicePixelRatio, 10) || 1, forceFallback: !1, fallbackClass: "sortable-fallback", fallbackOnBody: !1, fallbackTolerance: 0, fallbackOffset: { x: 0, y: 0 }, supportPointer: !1 !== mt.supportPointer && ("PointerEvent" in window || window.navigator && "msPointerEnabled" in window.navigator), emptyInsertThreshold: 5 }; for (var n in o) !(n in e) && (e[n] = o[n]); for (var i in W(e), this) "_" === i.charAt(0) && "function" == typeof this[i] && (this[i] = this[i].bind(this)); this.nativeDraggable = !e.forceFallback && a, this.nativeDraggable && (this.options.touchStartThreshold = 1), e.supportPointer ? wt(t, "pointerdown", this._onTapStart) : (wt(t, "mousedown", this._onTapStart), wt(t, "touchstart", this._onTapStart)), this.nativeDraggable && (wt(t, "dragover", this), wt(t, "dragenter", this)), d.push(this.el), e.store && e.store.get && this.sort(e.store.get(this) || []) } function bt(t, e, o, n) { if (t) { o = o || st; do { if (null != e && (">" === e[0] && t.parentNode === o && kt(t, e.substring(1)) || kt(t, e)) || n && t === o) return t; if (t === o) break } while (t = (i = t).host && i !== st && i.host.nodeType ? i.host : i.parentNode) } var i; return null } function wt(t, e, o) { t.addEventListener(e, o, r) } function _t(t, e, o) { t.removeEventListener(e, o, r) } function yt(t, e, o) { if (t && e) if (t.classList) t.classList[o ? "add" : "remove"](e); else { var n = (" " + t.className + " ").replace(i, " ").replace(" " + e + " ", " "); t.className = (n + (o ? " " + e : "")).replace(i, " ") } } function Dt(t, e, o) { var n = t && t.style; if (n) { if (void 0 === o) return st.defaultView && st.defaultView.getComputedStyle ? o = st.defaultView.getComputedStyle(t, "") : t.currentStyle && (o = t.currentStyle), void 0 === e ? o : o[e]; e in n || -1 !== e.indexOf("webkit") || (e = "-webkit-" + e), n[e] = o + ("string" == typeof o ? "" : "px") } } function St(t) { var e = ""; do { var o = Dt(t, "transform"); o && "none" !== o && (e = o + " " + e) } while (t = t.parentNode); return window.DOMMatrix ? new DOMMatrix(e) : window.WebKitCSSMatrix ? new WebKitCSSMatrix(e) : window.CSSMatrix ? new CSSMatrix(e) : void 0 } function Tt(t, e, o) { if (t) { var n = t.getElementsByTagName(e), i = 0, r = n.length; if (o) for (; i < r; i++)o(n[i], i); return n } return [] } function Ct(t, e, o, n, i, r, a, l, s) { var c, d = (t = t || e[lt]).options, h = "on" + o.charAt(0).toUpperCase() + o.substr(1); !window.CustomEvent || dt || _ ? (c = st.createEvent("Event")).initEvent(o, !0, !0) : c = new CustomEvent(o, { bubbles: !0, cancelable: !0 }), c.to = i || e, c.from = r || e, c.item = n || e, c.clone = u, c.oldIndex = a, c.newIndex = l, c.originalEvent = s, c.pullMode = Q ? Q.lastPutMode : void 0, e && e.dispatchEvent(c), d[h] && d[h].call(t, c) } function Et(t, e, o, n, i, r, a, l) { var s, c, d = t[lt], h = d.options.onMove; return !window.CustomEvent || dt || _ ? (s = st.createEvent("Event")).initEvent("move", !0, !0) : s = new CustomEvent("move", { bubbles: !0, cancelable: !0 }), s.to = e, s.from = t, s.dragged = o, s.draggedRect = n, s.related = i || e, s.relatedRect = r || Lt(e), s.willInsertAfter = l, s.originalEvent = a, t.dispatchEvent(s), h && (c = h.call(d, s, a)), c } function xt(t) { t.draggable = !1 } function Nt() { ht = !1 } function Mt(t, e, o) { for (var n = 0, i = 0, r = t.children; i < r.length;) { if ("none" !== r[i].style.display && r[i] !== f && r[i] !== U && bt(r[i], o.draggable, t, !1)) { if (n === e) return r[i]; n++ } i++ } return null } function Pt(t) { for (var e = t.lastElementChild; e && (e === f || "none" === e.style.display);)e = e.previousElementSibling; return e || null } function Xt(t) { return At(U) < At(t) ? 1 : -1 } function Yt(t) { for (var e = t.tagName + t.className + t.src + t.href + t.textContent, o = e.length, n = 0; o--;)n += e.charCodeAt(o); return n.toString(36) } function At(t, e) { var o = 0; if (!t || !t.parentNode) return -1; for (; t && (t = t.previousElementSibling);)"TEMPLATE" !== t.nodeName.toUpperCase() && t !== u && o++; return o } function kt(t, e) { if (t) try { if (t.matches) return t.matches(e); if (t.msMatchesSelector) return t.msMatchesSelector(e); if (t.webkitMatchesSelector) return t.webkitMatchesSelector(e) } catch (t) { return !1 } return !1 } function It(o, n) { return function () { if (!vt) { var t = arguments, e = this; vt = ct(function () { 1 === t.length ? o.call(e, t[0]) : o.apply(e, t), vt = void 0 }, n) } } } function Bt(t, e) { if (t && e) for (var o in e) e.hasOwnProperty(o) && (t[o] = e[o]); return t } function Ot(t) { return o && o.dom ? o.dom(t).cloneNode(!0) : e ? e(t).clone(!0)[0] : t.cloneNode(!0) } function Ht(t) { return ct(t, 0) } function Rt(t) { return clearTimeout(t) } function Lt(t, e, o, n) { if (t.getBoundingClientRect || t === b) { var i, r, a, l, s, c, d; if (d = t !== b && t !== H() ? (r = (i = t.getBoundingClientRect()).top, a = i.left, l = i.bottom, s = i.right, c = i.height, i.width) : (a = r = 0, l = window.innerHeight, s = window.innerWidth, c = window.innerHeight, window.innerWidth), n && t !== b && (o = o || t.parentNode, !dt)) do { if (o && o.getBoundingClientRect && "none" !== Dt(o, "transform")) { var h = o.getBoundingClientRect(); r -= h.top + w(Dt(o, "border-top-width")), a -= h.left + w(Dt(o, "border-left-width")), l = r + i.height, s = a + i.width; break } } while (o = o.parentNode); if (e && t !== b) { var u = St(o || t), f = u && u.a, p = u && u.d; u && (l = (r /= p) + (c /= p), s = (a /= f) + (d /= f)) } return { top: r, left: a, bottom: l, right: s, width: d, height: c } } } function Wt(t, e) { for (var o = O(t, !0), n = Lt(t)[e]; o;) { var i = Lt(o)[e]; if (!("top" === e || "left" === e ? i <= n : n <= i)) return o; if (o === H()) break; o = O(o, !1) } return !1 } function Ft(t) { var e = 0, o = 0, n = H(); if (t) do { var i = St(t), r = i.a, a = i.d; e += t.scrollLeft * r, o += t.scrollTop * a } while (t !== n && (t = t.parentNode)); return [e, o] } return wt(st, "dragover", t), wt(st, "mousemove", t), wt(st, "touchmove", t), mt.prototype = { constructor: mt, _computeIsAligned: function (t) { var e; if (f && !C ? (z(), e = st.elementFromPoint(t.clientX, t.clientY), j()) : e = t.target, e = bt(e, this.options.draggable, this.el, !1), !E && U && U.parentNode === this.el) { for (var o, n, i, r, a, l, s, c, d = this.el.children, h = 0; h < d.length; h++)bt(d[h], this.options.draggable, this.el, !1) && d[h] !== e && (d[h].sortableMouseAligned = (o = t.clientX, n = t.clientY, i = d[h], r = this._getDirection(t, null), this.options, void 0, a = Lt(i), l = "vertical" === r ? a.left : a.top, s = "vertical" === r ? a.right : a.bottom, l < (c = "vertical" === r ? o : n) && c < s)); bt(e, this.options.draggable, this.el, !0) || ($ = null), E = !0, ct(function () { E = !1 }, 30) } }, _getDirection: function (t, e) { return "function" == typeof this.options.direction ? this.options.direction.call(this, t, e, U) : this.options.direction }, _onTapStart: function (t) { if (t.cancelable) { var e, o = this, n = this.el, i = this.options, r = i.preventOnFilter, a = t.type, l = t.touches && t.touches[0], s = (l || t).target, c = t.target.shadowRoot && (t.path && t.path[0] || t.composedPath && t.composedPath()[0]) || s, d = i.filter; if (function (t) { M.length = 0; var e = t.getElementsByTagName("input"), o = e.length; for (; o--;) { var n = e[o]; n.checked && M.push(n) } }(n), (!dt || t.artificialBubble || pt(n, s)) && !U && !(/mousedown|pointerdown/.test(a) && 0 !== t.button || i.disabled || c.isContentEditable)) if (s = bt(s, i.draggable, n, !1)) { if (h !== s) { if (e = At(s, i.draggable), "function" == typeof d) { if (d.call(this, t, s, this)) return Ct(o, c, "filter", s, n, n, e), void (r && t.cancelable && t.preventDefault()) } else if (d && (d = d.split(",").some(function (t) { if (t = bt(c, t.trim(), n, !1)) return Ct(o, t, "filter", s, n, n, e), !0 }))) return void (r && t.cancelable && t.preventDefault()); i.handle && !bt(c, i.handle, n, !1) || this._prepareDragStart(t, l, s, e) } } else dt && gt(n, t, "_onTapStart") } }, _handleAutoScroll: function (e, o) { if (U && this.options.scroll) { var n = e.clientX, i = e.clientY, t = st.elementFromPoint(n, i), r = this; if (o || _ || dt || D) { R(e, r.options, t, o); var a = O(t, !0); !B || l && n === s && i === c || (l && clearInterval(l), l = setInterval(function () { if (U) { var t = O(st.elementFromPoint(n, i), !0); t !== a && (a = t, L(), R(e, r.options, a, o)) } }, 10), s = n, c = i) } else { if (!r.options.bubbleScroll || O(t, !0) === H()) return void L(); R(e, r.options, O(t, !1), !1) } } }, _prepareDragStart: function (t, e, o, n) { var i, r = this, a = r.el, l = r.options, s = a.ownerDocument; o && !U && o.parentNode === a && (q = a, V = (U = o).parentNode, G = U.nextSibling, h = o, Z = l.group, K = n, p = { target: U, clientX: (e || t).clientX, clientY: (e || t).clientY }, this._lastX = (e || t).clientX, this._lastY = (e || t).clientY, U.style["will-change"] = "all", U.style.transition = "", U.style.transform = "", i = function () { r._disableDelayedDragEvents(), !y && r.nativeDraggable && (U.draggable = !0), r._triggerDragStart(t, e), Ct(r, q, "choose", U, q, q, K), yt(U, l.chosenClass, !0) }, l.ignore.split(",").forEach(function (t) { Tt(U, t.trim(), xt) }), l.supportPointer ? wt(s, "pointerup", r._onDrop) : (wt(s, "mouseup", r._onDrop), wt(s, "touchend", r._onDrop), wt(s, "touchcancel", r._onDrop)), y && this.nativeDraggable && (this.options.touchStartThreshold = 4, U.draggable = !0), !l.delay || this.nativeDraggable && (_ || dt) ? i() : (wt(s, "mouseup", r._disableDelayedDrag), wt(s, "touchend", r._disableDelayedDrag), wt(s, "touchcancel", r._disableDelayedDrag), wt(s, "mousemove", r._delayedDragTouchMoveHandler), wt(s, "touchmove", r._delayedDragTouchMoveHandler), l.supportPointer && wt(s, "pointermove", r._delayedDragTouchMoveHandler), r._dragStartTimer = ct(i, l.delay))) }, _delayedDragTouchMoveHandler: function (t) { var e = t.touches ? t.touches[0] : t; N(ut(e.clientX - this._lastX), ut(e.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1)) && this._disableDelayedDrag() }, _disableDelayedDrag: function () { U && xt(U), clearTimeout(this._dragStartTimer), this._disableDelayedDragEvents() }, _disableDelayedDragEvents: function () { var t = this.el.ownerDocument; _t(t, "mouseup", this._disableDelayedDrag), _t(t, "touchend", this._disableDelayedDrag), _t(t, "touchcancel", this._disableDelayedDrag), _t(t, "mousemove", this._delayedDragTouchMoveHandler), _t(t, "touchmove", this._delayedDragTouchMoveHandler), _t(t, "pointermove", this._delayedDragTouchMoveHandler) }, _triggerDragStart: function (t, e) { e = e || ("touch" == t.pointerType ? t : null), !this.nativeDraggable || e ? this.options.supportPointer ? wt(st, "pointermove", this._onTouchMove) : wt(st, e ? "touchmove" : "mousemove", this._onTouchMove) : (wt(U, "dragend", this), wt(q, "dragstart", this._onDragStart)); try { st.selection ? Ht(function () { st.selection.empty() }) : window.getSelection().removeAllRanges() } catch (t) { } }, _dragStarted: function (t, e) { if (v = !1, q && U) { this.nativeDraggable && (wt(st, "dragover", this._handleAutoScroll), wt(st, "dragover", F)); var o = this.options; !t && yt(U, o.dragClass, !1), yt(U, o.ghostClass, !0), Dt(U, "transform", ""), mt.active = this, t && this._appendGhost(), Ct(this, q, "start", U, q, q, K, void 0, e) } else this._nulling() }, _emulateDragOver: function (t) { if (k) { if (this._lastX === k.clientX && this._lastY === k.clientY && !t) return; this._lastX = k.clientX, this._lastY = k.clientY, z(); for (var e = st.elementFromPoint(k.clientX, k.clientY), o = e; e && e.shadowRoot;)o = e = e.shadowRoot.elementFromPoint(k.clientX, k.clientY); if (o) do { if (o[lt]) if (o[lt]._onDragOver({ clientX: k.clientX, clientY: k.clientY, target: e, rootEl: o }) && !this.options.dragoverBubble) break; e = o } while (o = o.parentNode); U.parentNode[lt]._computeIsAligned(k), j() } }, _onTouchMove: function (t, e) { if (p) { var o = this.options, n = o.fallbackTolerance, i = o.fallbackOffset, r = t.touches ? t.touches[0] : t, a = f && St(f), l = f && a && a.a, s = f && a && a.d, c = S && g && Ft(g), d = (r.clientX - p.clientX + i.x) / (l || 1) + (c ? c[0] - m[0] : 0) / (l || 1), h = (r.clientY - p.clientY + i.y) / (s || 1) + (c ? c[1] - m[1] : 0) / (s || 1), u = t.touches ? "translate3d(" + d + "px," + h + "px,0)" : "translate(" + d + "px," + h + "px)"; if (!mt.active && !v) { if (n && x(ut(r.clientX - this._lastX), ut(r.clientY - this._lastY)) < n) return; this._onDragStart(t, !0) } !e && this._handleAutoScroll(r, !0), J = !0, k = r, Dt(f, "webkitTransform", u), Dt(f, "mozTransform", u), Dt(f, "msTransform", u), Dt(f, "transform", u), t.cancelable && t.preventDefault() } }, _appendGhost: function () { if (!f) { var t = this.options.fallbackOnBody ? st.body : q, e = Lt(U, !0, t, !S), o = (Dt(U), this.options); if (S) { for (g = t; "static" === Dt(g, "position") && "none" === Dt(g, "transform") && g !== st;)g = g.parentNode; if (g !== st) { var n = Lt(g, !0); e.top -= n.top, e.left -= n.left } g !== st.body && g !== st.documentElement ? (g === st && (g = H()), e.top += g.scrollTop, e.left += g.scrollLeft) : g = H(), m = Ft(g) } yt(f = U.cloneNode(!0), o.ghostClass, !1), yt(f, o.fallbackClass, !0), yt(f, o.dragClass, !0), Dt(f, "box-sizing", "border-box"), Dt(f, "margin", 0), Dt(f, "top", e.top), Dt(f, "left", e.left), Dt(f, "width", e.width), Dt(f, "height", e.height), Dt(f, "opacity", "0.8"), Dt(f, "position", S ? "absolute" : "fixed"), Dt(f, "zIndex", "100000"), Dt(f, "pointerEvents", "none"), t.appendChild(f) } }, _onDragStart: function (t, e) { var o = this, n = t.dataTransfer, i = o.options; (u = Ot(U)).draggable = !1, u.style["will-change"] = "", this._hideClone(), yt(u, o.options.chosenClass, !1), o._cloneId = Ht(function () { o.options.removeCloneOnHide || q.insertBefore(u, U), Ct(o, q, "clone", U) }), !e && yt(U, i.dragClass, !0), e ? (it = !0, o._loopId = setInterval(o._emulateDragOver, 50)) : (_t(st, "mouseup", o._onDrop), _t(st, "touchend", o._onDrop), _t(st, "touchcancel", o._onDrop), n && (n.effectAllowed = "move", i.setData && i.setData.call(o, n, U)), wt(st, "drop", o), Dt(U, "transform", "translateZ(0)")), v = !0, o._dragStartId = Ht(o._dragStarted.bind(o, e, t)), wt(st, "selectstart", o), D && Dt(st.body, "user-select", "none") }, _onDragOver: function (e) { var o, n, t, i = this.el, r = e.target, a = this.options, l = a.group, s = mt.active, c = Z === l, d = a.sort, h = this; if (!ht && (!dt || e.rootEl || e.artificialBubble || pt(i, r))) { if (void 0 !== e.preventDefault && e.cancelable && e.preventDefault(), J = !0, r = bt(r, a.draggable, i, !0), bt(e.target, null, U, !0) || r.animated) return z(!1); if (r !== U && (it = !1), s && !a.disabled && (c ? d || (t = !q.contains(U)) : Q === this || (this.lastPutMode = Z.checkPull(this, s, U, e)) && l.checkPut(this, s, U, e))) { var u = this._getDirection(e, r); if (o = Lt(U), t) return this._hideClone(), V = q, G ? q.insertBefore(U, G) : q.appendChild(U), z(!0); var f = Pt(i); if (f && (I = e, B = u, O = Lt(Pt(i)), H = "vertical" === B ? I.clientY : I.clientX, R = "vertical" === B ? I.clientX : I.clientY, L = "vertical" === B ? O.bottom : O.right, W = "vertical" === B ? O.left : O.top, F = "vertical" === B ? O.right : O.bottom, !("vertical" === B ? F + 10 < R || R <= F && L < H && W <= R : L < H && W < R || H <= L && F + 10 < R) || f.animated)) { if (r && r !== U && r.parentNode === i) { var p, g = 0, v = r.sortableMouseAligned, m = U.parentNode !== i, b = "vertical" === u ? "top" : "left", w = Wt(r, "top") || Wt(U, "top"), _ = w ? w.scrollTop : void 0; if ($ !== r && (et = null, p = Lt(r)[b], rt = !1), C = r, E = u, x = (T = U) === U && nt || Lt(T), N = C === U && nt || Lt(C), M = "vertical" === E ? x.left : x.top, P = "vertical" === E ? x.right : x.bottom, X = "vertical" === E ? x.width : x.height, Y = "vertical" === E ? N.left : N.top, A = "vertical" === E ? N.right : N.bottom, k = "vertical" === E ? N.width : N.height, et = (M === Y || P === A || M + X / 2 === Y + k / 2) && v || m || w || a.invertSwap || "insert" === et || "swap" === et ? ("swap" !== et && (at = a.invertSwap || m), g = function (t, e, o, n, i, r, a) { var l = Lt(e), s = "vertical" === o ? t.clientY : t.clientX, c = "vertical" === o ? l.height : l.width, d = "vertical" === o ? l.top : l.left, h = "vertical" === o ? l.bottom : l.right, u = Lt(U), f = !1; if (!r) if (a && ot < c * n) if (!rt && (1 === tt ? d + c * i / 2 < s : s < h - c * i / 2) && (rt = !0), rt) f = !0; else { "vertical" === o ? u.top : u.left, "vertical" === o ? u.bottom : u.right; if (1 === tt ? s < d + ot : h - ot < s) return -1 * tt } else if (d + c * (1 - n) / 2 < s && s < h - c * (1 - n) / 2) return Xt(e); if ((f = f || r) && (s < d + c * i / 2 || h - c * i / 2 < s)) return d + c / 2 < s ? 1 : -1; return 0 }(e, r, u, a.swapThreshold, null == a.invertedSwapThreshold ? a.swapThreshold : a.invertedSwapThreshold, at, $ === r), "swap") : (g = Xt(r), "insert"), 0 === g) return z(!1); nt = null, tt = g, n = Lt($ = r); var y = r.nextElementSibling, D = !1, S = Et(q, i, U, o, r, n, e, D = 1 === g); if (!1 !== S) return 1 !== S && -1 !== S || (D = 1 === S), ht = !0, ct(Nt, 30), c ? s._hideClone() : s._showClone(this), D && !y ? i.appendChild(U) : r.parentNode.insertBefore(U, D ? y : r), w && ft(w, 0, _ - w.scrollTop), V = U.parentNode, void 0 === p || at || (ot = ut(p - Lt(r)[b])), j(), z(!0) } } else if (f && i === e.target && (r = f), r && (n = Lt(r)), c ? s._hideClone() : s._showClone(this), !1 !== Et(q, i, U, o, r, n, e, !!r)) return i.appendChild(U), V = i, nt = null, j(), z(!0); if (i.contains(U)) return z(!1) } var T, C, E, x, N, M, P, X, Y, A, k, I, B, O, H, R, L, W, F; return dt && !e.rootEl && gt(i, e, "_onDragOver"), !1 } function z(t) { return t && (c ? s._hideClone() : s._showClone(h), s && (yt(U, Q ? Q.options.ghostClass : s.options.ghostClass, !1), yt(U, a.ghostClass, !0)), Q !== h && h !== mt.active ? Q = h : h === mt.active && (Q = null), o && h._animate(o, U), r && n && h._animate(n, r)), (r === U && !U.animated || r === i && !r.animated) && ($ = null), a.dragoverBubble || e.rootEl || r === st || (h._handleAutoScroll(e), U.parentNode[lt]._computeIsAligned(e)), !a.dragoverBubble && e.stopPropagation && e.stopPropagation(), !0 } function j() { Ct(h, q, "change", r, i, q, K, At(U, a.draggable), e) } }, _animate: function (t, e) { var o = this.options.animation; if (o) { var n = Lt(e); if (e === U && (nt = n), 1 === t.nodeType && (t = Lt(t)), t.left + t.width / 2 !== n.left + n.width / 2 || t.top + t.height / 2 !== n.top + n.height / 2) { var i = St(this.el), r = i && i.a, a = i && i.d; Dt(e, "transition", "none"), Dt(e, "transform", "translate3d(" + (t.left - n.left) / (r || 1) + "px," + (t.top - n.top) / (a || 1) + "px,0)"), e.offsetWidth, Dt(e, "transition", "transform " + o + "ms" + (this.options.easing ? " " + this.options.easing : "")), Dt(e, "transform", "translate3d(0,0,0)") } "number" == typeof e.animated && clearTimeout(e.animated), e.animated = ct(function () { Dt(e, "transition", ""), Dt(e, "transform", ""), e.animated = !1 }, o) } }, _offUpEvents: function () { var t = this.el.ownerDocument; _t(st, "touchmove", this._onTouchMove), _t(st, "pointermove", this._onTouchMove), _t(t, "mouseup", this._onDrop), _t(t, "touchend", this._onDrop), _t(t, "pointerup", this._onDrop), _t(t, "touchcancel", this._onDrop), _t(st, "selectstart", this) }, _onDrop: function (t) { var e = this.el, o = this.options; rt = at = B = v = !1, clearInterval(this._loopId), clearInterval(l), L(), clearTimeout(vt), vt = void 0, clearTimeout(this._dragStartTimer), Rt(this._cloneId), Rt(this._dragStartId), _t(st, "mousemove", this._onTouchMove), this.nativeDraggable && (_t(st, "drop", this), _t(e, "dragstart", this._onDragStart), _t(st, "dragover", this._handleAutoScroll), _t(st, "dragover", F)), D && Dt(st.body, "user-select", ""), this._offUpEvents(), t && (J && (t.cancelable && t.preventDefault(), !o.dropBubble && t.stopPropagation()), f && f.parentNode && f.parentNode.removeChild(f), (q === V || Q && "clone" !== Q.lastPutMode) && u && u.parentNode && u.parentNode.removeChild(u), U && (this.nativeDraggable && _t(U, "dragend", this), xt(U), U.style["will-change"] = "", yt(U, Q ? Q.options.ghostClass : this.options.ghostClass, !1), yt(U, this.options.chosenClass, !1), Ct(this, q, "unchoose", U, V, q, K, null, t), q !== V ? (0 <= (n = At(U, o.draggable)) && (Ct(null, V, "add", U, V, q, K, n, t), Ct(this, q, "remove", U, V, q, K, n, t), Ct(null, V, "sort", U, V, q, K, n, t), Ct(this, q, "sort", U, V, q, K, n, t)), Q && Q.save()) : U.nextSibling !== G && 0 <= (n = At(U, o.draggable)) && (Ct(this, q, "update", U, V, q, K, n, t), Ct(this, q, "sort", U, V, q, K, n, t)), mt.active && (null != n && -1 !== n || (n = K), Ct(this, q, "end", U, V, q, K, n, t), this.save()))), this._nulling() }, _nulling: function () { q = U = V = f = G = u = h = X = Y = I.length = l = s = c = p = k = J = n = K = $ = tt = nt = Q = Z = mt.active = null, M.forEach(function (t) { t.checked = !0 }), M.length = 0 }, handleEvent: function (t) { switch (t.type) { case "drop": case "dragend": this._onDrop(t); break; case "dragenter": case "dragover": U && (this._onDragOver(t), function (t) { t.dataTransfer && (t.dataTransfer.dropEffect = "move"); t.cancelable && t.preventDefault() }(t)); break; case "selectstart": t.preventDefault() } }, toArray: function () { for (var t, e = [], o = this.el.children, n = 0, i = o.length, r = this.options; n < i; n++)bt(t = o[n], r.draggable, this.el, !1) && e.push(t.getAttribute(r.dataIdAttr) || Yt(t)); return e }, sort: function (t) { var n = {}, i = this.el; this.toArray().forEach(function (t, e) { var o = i.children[e]; bt(o, this.options.draggable, i, !1) && (n[t] = o) }, this), t.forEach(function (t) { n[t] && (i.removeChild(n[t]), i.appendChild(n[t])) }) }, save: function () { var t = this.options.store; t && t.set && t.set(this) }, closest: function (t, e) { return bt(t, e || this.options.draggable, this.el, !1) }, option: function (t, e) { var o = this.options; if (void 0 === e) return o[t]; o[t] = e, "group" === t && W(o) }, destroy: function () { var t = this.el; t[lt] = null, _t(t, "mousedown", this._onTapStart), _t(t, "touchstart", this._onTapStart), _t(t, "pointerdown", this._onTapStart), this.nativeDraggable && (_t(t, "dragover", this), _t(t, "dragenter", this)), Array.prototype.forEach.call(t.querySelectorAll("[draggable]"), function (t) { t.removeAttribute("draggable") }), this._onDrop(), d.splice(d.indexOf(this.el), 1), this.el = t = null }, _hideClone: function () { u.cloneHidden || (Dt(u, "display", "none"), u.cloneHidden = !0, u.parentNode && this.options.removeCloneOnHide && u.parentNode.removeChild(u)) }, _showClone: function (t) { "clone" === t.lastPutMode ? u.cloneHidden && (q.contains(U) && !this.options.group.revertClone ? q.insertBefore(u, U) : G ? q.insertBefore(u, G) : q.appendChild(u), this.options.group.revertClone && this._animate(U, u), Dt(u, "display", ""), u.cloneHidden = !1) : this._hideClone() } }, wt(st, "touchmove", function (t) { (mt.active || v) && t.cancelable && t.preventDefault() }), mt.utils = { on: wt, off: _t, css: Dt, find: Tt, is: function (t, e) { return !!bt(t, e, t, !1) }, extend: Bt, throttle: It, closest: bt, toggleClass: yt, clone: Ot, index: At, nextTick: Ht, cancelNextTick: Rt, detectDirection: P, getChild: Mt }, mt.create = function (t, e) { return new mt(t, e) }, mt.version = "1.8.4", mt });
\ No newline at end of file
diff --git a/client/strings/de.json b/client/strings/de.json
index fb5b570af..18f0a9af8 100644
--- a/client/strings/de.json
+++ b/client/strings/de.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Sind Sie sicher, dass Sie die Sammlung \"{0}\" löschen wollen?",
   "MessageConfirmRemoveEpisode": "Sind Sie sicher, dass Sie die Episode \"{0}\" löschen möchten?",
   "MessageConfirmRemoveEpisodes": "Sind Sie sicher, dass Sie {0} Episoden löschen wollen?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Sind Sie sicher, dass Sie die Wiedergabeliste \"{0}\" entfernen möchten?",
   "MessageConfirmRenameGenre": "Sind Sie sicher, dass Sie die Kategorie \"{0}\" in \"{1}\" für alle Hörbücher/Podcasts umbenennen wollen?",
   "MessageConfirmRenameGenreMergeNote": "Hinweis: Kategorie existiert bereits -> Kategorien werden zusammengelegt.",
@@ -653,4 +654,4 @@
   "ToastSocketFailedToConnect": "Verbindung zum WebSocket fehlgeschlagen",
   "ToastUserDeleteFailed": "Benutzer konnte nicht gelöscht werden",
   "ToastUserDeleteSuccess": "Benutzer gelöscht"
-}
+}
\ No newline at end of file
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 31b7145b0..72b1fb1e2 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Are you sure you want to remove collection \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Are you sure you want to remove episode \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Are you sure you want to remove {0} episodes?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
   "MessageConfirmRenameGenreMergeNote": "Note: This genre already exists so they will be merged.",
diff --git a/client/strings/es.json b/client/strings/es.json
index 05fcc220a..7006b95dc 100644
--- a/client/strings/es.json
+++ b/client/strings/es.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Esta seguro que desea remover la colección \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Esta seguro que desea remover el episodio \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Esta seguro que desea remover {0} episodios?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Esta seguro que desea remover su lista de reproducción \"{0}\"?",
   "MessageConfirmRenameGenre": "Esta seguro que desea renombrar el genero \"{0}\" a \"{1}\" de todos los elementos?",
   "MessageConfirmRenameGenreMergeNote": "Nota: Este genero ya existe por lo que se fusionarán.",
diff --git a/client/strings/fr.json b/client/strings/fr.json
index 952c2ea16..70ee629b8 100644
--- a/client/strings/fr.json
+++ b/client/strings/fr.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Êtes-vous sûr de vouloir supprimer la collection « {0} » ?",
   "MessageConfirmRemoveEpisode": "Êtes-vous sûr de vouloir supprimer l’épisode « {0} » ?",
   "MessageConfirmRemoveEpisodes": "Êtes-vous sûr de vouloir supprimer {0} épisodes ?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Êtes-vous sûr de vouloir supprimer la liste de lecture « {0} » ?",
   "MessageConfirmRenameGenre": "Êtes-vous sûr de vouloir renommer le genre « {0} » vers « {1} » pour tous les articles ?",
   "MessageConfirmRenameGenreMergeNote": "Information: Ce genre existe déjà et sera fusionné.",
diff --git a/client/strings/gu.json b/client/strings/gu.json
index 7825882e9..5cd23a02d 100644
--- a/client/strings/gu.json
+++ b/client/strings/gu.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Are you sure you want to remove collection \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Are you sure you want to remove episode \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Are you sure you want to remove {0} episodes?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
   "MessageConfirmRenameGenreMergeNote": "Note: This genre already exists so they will be merged.",
diff --git a/client/strings/hi.json b/client/strings/hi.json
index fa4de440a..6e8e82a62 100644
--- a/client/strings/hi.json
+++ b/client/strings/hi.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Are you sure you want to remove collection \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Are you sure you want to remove episode \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Are you sure you want to remove {0} episodes?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
   "MessageConfirmRenameGenreMergeNote": "Note: This genre already exists so they will be merged.",
diff --git a/client/strings/hr.json b/client/strings/hr.json
index 777aef15a..35ad18a17 100644
--- a/client/strings/hr.json
+++ b/client/strings/hr.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "AJeste li sigurni da želite obrisati kolekciju \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Jeste li sigurni da želite obrisati epizodu \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Jeste li sigurni da želite obrisati {0} epizoda/-u?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
   "MessageConfirmRenameGenreMergeNote": "Note: This genre already exists so they will be merged.",
diff --git a/client/strings/it.json b/client/strings/it.json
index 9606aaf4d..d4d877cc0 100644
--- a/client/strings/it.json
+++ b/client/strings/it.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Sei sicuro di voler rimuovere la Raccolta \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Sei sicuro di voler rimuovere l'episodio \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Sei sicuro di voler rimuovere  {0} episodi?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Sei sicuro di voler rimuovere la tua playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Sei sicuro di voler rinominare il genere \"{0}\" in \"{1}\" per tutti gli oggetti?",
   "MessageConfirmRenameGenreMergeNote": "Note: Questo genere esiste già quindi verra unito.",
diff --git a/client/strings/pl.json b/client/strings/pl.json
index 7babe3f4e..5a5ad81cc 100644
--- a/client/strings/pl.json
+++ b/client/strings/pl.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Czy na pewno chcesz usunąć kolekcję \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Czy na pewno chcesz usunąć odcinek \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Czy na pewno chcesz usunąć {0} odcinki?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
   "MessageConfirmRenameGenreMergeNote": "Note: This genre already exists so they will be merged.",
diff --git a/client/strings/ru.json b/client/strings/ru.json
index 8ac05e056..f3650ba35 100644
--- a/client/strings/ru.json
+++ b/client/strings/ru.json
@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Вы уверены, что хотите удалить коллекцию \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Вы уверены, что хотите удалить эпизод \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Вы уверены, что хотите удалить {0} эпизодов?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Вы уверены, что хотите удалить плейлист \"{0}\"?",
   "MessageConfirmRenameGenre": "Вы уверены, что хотите переименовать жанр \"{0}\" в \"{1}\" для всех элементов?",
   "MessageConfirmRenameGenreMergeNote": "Примечание: Этот жанр уже существует, поэтому они будут объединены.",
diff --git a/client/strings/zh-cn.json b/client/strings/zh-cn.json
index 1ad22d69e..d9e0a774e 100644
--- a/client/strings/zh-cn.json
+++ b/client/strings/zh-cn.json
@@ -155,13 +155,13 @@
   "HeaderUpdateLibrary": "更新媒体库",
   "HeaderUsers": "用户",
   "HeaderYourStats": "你的统计数据",
-  "LabelAbridged": "Abridged",
+  "LabelAbridged": "概要",
   "LabelAccountType": "帐户类型",
   "LabelAccountTypeAdmin": "管理员",
   "LabelAccountTypeGuest": "来宾",
   "LabelAccountTypeUser": "用户",
   "LabelActivity": "活动",
-  "LabelAdded": "Added",
+  "LabelAdded": "添加",
   "LabelAddedAt": "添加于",
   "LabelAddToCollection": "添加到收藏",
   "LabelAddToCollectionBatch": "批量添加 {0} 个媒体到收藏",
@@ -183,15 +183,15 @@
   "LabelBackupsMaxBackupSizeHelp": "为了防止错误配置, 如果备份超过配置的大小, 备份将失败.",
   "LabelBackupsNumberToKeep": "要保留的备份个数",
   "LabelBackupsNumberToKeepHelp": "一次只能删除一个备份, 因此如果你已经有超过此数量的备份, 则应手动删除它们.",
-  "LabelBitrate": "Bitrate",
+  "LabelBitrate": "比特率",
   "LabelBooks": "图书",
   "LabelChangePassword": "修改密码",
-  "LabelChannels": "Channels",
-  "LabelChapters": "Chapters",
+  "LabelChannels": "声道",
+  "LabelChapters": "章节",
   "LabelChaptersFound": "找到的章节",
   "LabelChapterTitle": "章节标题",
   "LabelClosePlayer": "关闭播放器",
-  "LabelCodec": "Codec",
+  "LabelCodec": "编解码",
   "LabelCollapseSeries": "折叠系列",
   "LabelCollections": "收藏",
   "LabelComplete": "已完成",
@@ -217,7 +217,7 @@
   "LabelDuration": "持续时间",
   "LabelDurationFound": "找到持续时间:",
   "LabelEdit": "编辑",
-  "LabelEmbeddedCover": "Embedded Cover",
+  "LabelEmbeddedCover": "嵌入封面",
   "LabelEnable": "启用",
   "LabelEnd": "结束",
   "LabelEpisode": "剧集",
@@ -235,7 +235,7 @@
   "LabelFinished": "已听完",
   "LabelFolder": "文件夹",
   "LabelFolders": "文件夹",
-  "LabelFormat": "Format",
+  "LabelFormat": "编码格式",
   "LabelGenre": "流派",
   "LabelGenres": "流派",
   "LabelHardDeleteFile": "完全删除文件",
@@ -254,12 +254,12 @@
   "LabelIntervalEveryDay": "每天",
   "LabelIntervalEveryHour": "每小时",
   "LabelInvalidParts": "无效部件",
-  "LabelInvert": "Invert",
+  "LabelInvert": "倒转",
   "LabelItem": "项目",
   "LabelLanguage": "语言",
   "LabelLanguageDefaultServer": "默认服务器语言",
-  "LabelLastBookAdded": "Last Book Added",
-  "LabelLastBookUpdated": "Last Book Updated",
+  "LabelLastBookAdded": "最后添加的书",
+  "LabelLastBookUpdated": "最后更新的书",
   "LabelLastSeen": "上次查看时间",
   "LabelLastTime": "最近一次",
   "LabelLastUpdate": "最近更新",
@@ -278,12 +278,12 @@
   "LabelMediaType": "媒体类型",
   "LabelMetadataProvider": "元数据提供者",
   "LabelMetaTag": "元数据标签",
-  "LabelMetaTags": "Meta Tags",
+  "LabelMetaTags": "元标签",
   "LabelMinute": "分钟",
   "LabelMissing": "丢失",
   "LabelMissingParts": "丢失的部分",
   "LabelMore": "更多",
-  "LabelMoreInfo": "More Info",
+  "LabelMoreInfo": "更多..",
   "LabelName": "名称",
   "LabelNarrator": "演播者",
   "LabelNarrators": "演播者",
@@ -413,9 +413,9 @@
   "LabelTag": "标签",
   "LabelTags": "标签",
   "LabelTagsAccessibleToUser": "用户可访问的标签",
-  "LabelTagsNotAccessibleToUser": "Tags not Accessible to User",
+  "LabelTagsNotAccessibleToUser": "用户无法访问标签",
   "LabelTasks": "正在运行的任务",
-  "LabelTimeBase": "Time Base",
+  "LabelTimeBase": "时间基准",
   "LabelTimeListened": "收听时间",
   "LabelTimeListenedToday": "今日收听的时间",
   "LabelTimeRemaining": "剩余 {0}",
@@ -435,7 +435,7 @@
   "LabelTracksMultiTrack": "多轨",
   "LabelTracksSingleTrack": "单轨",
   "LabelType": "类型",
-  "LabelUnabridged": "Unabridged",
+  "LabelUnabridged": "未删节",
   "LabelUnknown": "未知",
   "LabelUpdateCover": "更新封面",
   "LabelUpdateCoverHelp": "找到匹配项时允许覆盖所选书籍存在的封面",
@@ -479,10 +479,11 @@
   "MessageConfirmForceReScan": "你确定要强制重新扫描吗?",
   "MessageConfirmMarkSeriesFinished": "你确定要将此系列中的所有书籍都标记为已听完吗?",
   "MessageConfirmMarkSeriesNotFinished": "你确定要将此系列中的所有书籍都标记为未听完吗?",
-  "MessageConfirmRemoveAllChapters": "Are you sure you want to remove all chapters?",
+  "MessageConfirmRemoveAllChapters": "你确定要移除所有章节吗?",
   "MessageConfirmRemoveCollection": "您确定要移除收藏 \"{0}\"?",
   "MessageConfirmRemoveEpisode": "您确定要移除剧集 \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "你确定要移除 {0} 剧集?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "你确定要移除播放列表 \"{0}\"?",
   "MessageConfirmRenameGenre": "你确定要将所有项目流派 \"{0}\" 重命名到 \"{1}\"?",
   "MessageConfirmRenameGenreMergeNote": "注意: 该流派已经存在, 因此它们将被合并.",
@@ -583,7 +584,7 @@
   "PlaceholderNewFolderPath": "输入文件夹路径",
   "PlaceholderNewPlaylist": "输入播放列表名称",
   "PlaceholderSearch": "查找..",
-  "PlaceholderSearchEpisode": "Search episode..",
+  "PlaceholderSearchEpisode": "搜索剧集..",
   "ToastAccountUpdateFailed": "账户更新失败",
   "ToastAccountUpdateSuccess": "帐户已更新",
   "ToastAuthorImageRemoveFailed": "作者图像删除失败",
diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index abceabca3..0dfd1b6fb 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -684,13 +684,12 @@ class LibraryController {
   }
 
   async getAuthors(req, res) {
-    var libraryItems = req.libraryItems
-    var authors = {}
-    libraryItems.forEach((li) => {
+    const authors = {}
+    req.libraryItems.forEach((li) => {
       if (li.media.metadata.authors && li.media.metadata.authors.length) {
         li.media.metadata.authors.forEach((au) => {
           if (!authors[au.id]) {
-            var _author = this.db.authors.find(_au => _au.id === au.id)
+            const _author = this.db.authors.find(_au => _au.id === au.id)
             if (_author) {
               authors[au.id] = _author.toJSON()
               authors[au.id].numBooks = 1
@@ -707,6 +706,83 @@ class LibraryController {
     })
   }
 
+  async getNarrators(req, res) {
+    const narrators = {}
+    req.libraryItems.forEach((li) => {
+      if (li.media.metadata.narrators && li.media.metadata.narrators.length) {
+        li.media.metadata.narrators.forEach((n) => {
+          if (!narrators[n]) {
+            narrators[n] = {
+              id: encodeURIComponent(Buffer.from(n).toString('base64')),
+              name: n,
+              numBooks: 1
+            }
+          } else {
+            narrators[n].numBooks++
+          }
+        })
+      }
+    })
+
+    res.json({
+      narrators: naturalSort(Object.values(narrators)).asc(n => n.name)
+    })
+  }
+
+  async updateNarrator(req, res) {
+    if (!req.user.canUpdate) {
+      Logger.error(`[LibraryController] Unauthorized user "${req.user.username}" attempted to update narrator`)
+      return res.sendStatus(403)
+    }
+
+    const narratorName = libraryHelpers.decode(req.params.narratorId)
+    const updatedName = req.body.name
+    if (!updatedName) {
+      return res.status(400).send('Invalid request payload. Name not specified.')
+    }
+
+    const itemsUpdated = []
+    for (const libraryItem of req.libraryItems) {
+      if (libraryItem.media.metadata.updateNarrator(narratorName, updatedName)) {
+        itemsUpdated.push(libraryItem)
+      }
+    }
+
+    if (itemsUpdated.length) {
+      await this.db.updateLibraryItems(itemsUpdated)
+      SocketAuthority.emitter('items_updated', itemsUpdated.map(li => li.toJSONExpanded()))
+    }
+
+    res.json({
+      updated: itemsUpdated.length
+    })
+  }
+
+  async removeNarrator(req, res) {
+    if (!req.user.canUpdate) {
+      Logger.error(`[LibraryController] Unauthorized user "${req.user.username}" attempted to remove narrator`)
+      return res.sendStatus(403)
+    }
+
+    const narratorName = libraryHelpers.decode(req.params.narratorId)
+
+    const itemsUpdated = []
+    for (const libraryItem of req.libraryItems) {
+      if (libraryItem.media.metadata.removeNarrator(narratorName)) {
+        itemsUpdated.push(libraryItem)
+      }
+    }
+
+    if (itemsUpdated.length) {
+      await this.db.updateLibraryItems(itemsUpdated)
+      SocketAuthority.emitter('items_updated', itemsUpdated.map(li => li.toJSONExpanded()))
+    }
+
+    res.json({
+      updated: itemsUpdated.length
+    })
+  }
+
   async matchAll(req, res) {
     if (!req.user.isAdminOrUp) {
       Logger.error(`[LibraryController] Non-root user attempted to match library items`, req.user)
@@ -776,7 +852,7 @@ class LibraryController {
       return res.sendStatus(404)
     }
 
-    var library = this.db.libraries.find(lib => lib.id === req.params.id)
+    const library = this.db.libraries.find(lib => lib.id === req.params.id)
     if (!library) {
       return res.status(404).send('Library not found')
     }
diff --git a/server/objects/metadata/BookMetadata.js b/server/objects/metadata/BookMetadata.js
index e6294f5f9..6bd398271 100644
--- a/server/objects/metadata/BookMetadata.js
+++ b/server/objects/metadata/BookMetadata.js
@@ -221,6 +221,32 @@ class BookMetadata {
     })
   }
 
+  /**
+   * Update narrator name if narrator is in book
+   * @param {String} oldNarratorName - Narrator name to get updated
+   * @param {String} newNarratorName - Updated narrator name
+   * @return {Boolean} True if narrator was updated
+   */
+  updateNarrator(oldNarratorName, newNarratorName) {
+    if (!this.hasNarrator(oldNarratorName)) return false
+    this.narrators = this.narrators.filter(n => n !== oldNarratorName)
+    if (!this.hasNarrator(newNarratorName)) {
+      this.narrators.push(newNarratorName)
+    }
+    return true
+  }
+
+  /**
+   * Remove narrator name if narrator is in book
+   * @param {String} narratorName - Narrator name to remove
+   * @return {Boolean} True if narrator was updated
+   */
+  removeNarrator(narratorName) {
+    if (!this.hasNarrator(narratorName)) return false
+    this.narrators = this.narrators.filter(n => n !== narratorName)
+    return true
+  }
+
   setData(scanMediaData = {}) {
     this.title = scanMediaData.title || null
     this.subtitle = scanMediaData.subtitle || null
diff --git a/server/routers/ApiRouter.js b/server/routers/ApiRouter.js
index 1b2df1550..bfb6c9a8b 100644
--- a/server/routers/ApiRouter.js
+++ b/server/routers/ApiRouter.js
@@ -84,6 +84,9 @@ class ApiRouter {
     this.router.get('/libraries/:id/search', LibraryController.middleware.bind(this), LibraryController.search.bind(this))
     this.router.get('/libraries/:id/stats', LibraryController.middleware.bind(this), LibraryController.stats.bind(this))
     this.router.get('/libraries/:id/authors', LibraryController.middleware.bind(this), LibraryController.getAuthors.bind(this))
+    this.router.get('/libraries/:id/narrators', LibraryController.middleware.bind(this), LibraryController.getNarrators.bind(this))
+    this.router.patch('/libraries/:id/narrators/:narratorId', LibraryController.middleware.bind(this), LibraryController.updateNarrator.bind(this))
+    this.router.delete('/libraries/:id/narrators/:narratorId', LibraryController.middleware.bind(this), LibraryController.removeNarrator.bind(this))
     this.router.get('/libraries/:id/matchall', LibraryController.middleware.bind(this), LibraryController.matchAll.bind(this))
     this.router.post('/libraries/:id/scan', LibraryController.middleware.bind(this), LibraryController.scan.bind(this))
     this.router.get('/libraries/:id/recent-episodes', LibraryController.middleware.bind(this), LibraryController.getRecentEpisodes.bind(this))