diff --git a/client/components/tables/PlaylistItemsTable.vue b/client/components/tables/PlaylistItemsTable.vue
new file mode 100644
index 00000000..46b578b8
--- /dev/null
+++ b/client/components/tables/PlaylistItemsTable.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="w-full bg-primary bg-opacity-40">
+    <div class="w-full h-14 flex items-center px-4 md:px-6 py-2 bg-primary">
+      <p class="pr-4">{{ $strings.HeaderPlaylistItems }}</p>
+
+      <div class="w-6 h-6 md:w-7 md:h-7 bg-white bg-opacity-10 rounded-full flex items-center justify-center">
+        <span class="text-xs md:text-sm font-mono leading-none">{{ items.length }}</span>
+      </div>
+      <div class="flex-grow" />
+      <p v-if="totalDuration" class="text-sm text-gray-200">{{ totalDurationPretty }}</p>
+    </div>
+    <draggable v-model="itemsCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
+      <transition-group type="transition" :name="!drag ? 'playlist-item' : null">
+        <template v-for="(item, index) in itemsCopy">
+          <tables-playlist-item-table-row :key="index" :is-dragging="drag" :item="item" :playlist-id="playlistId" :book-cover-aspect-ratio="bookCoverAspectRatio" class="item" :class="drag ? '' : 'playlist-item-item'" />
+        </template>
+      </transition-group>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+export default {
+  components: {
+    draggable
+  },
+  props: {
+    playlistId: String,
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      drag: false,
+      dragOptions: {
+        animation: 200,
+        group: 'description',
+        ghostClass: 'ghost'
+      },
+      itemsCopy: []
+    }
+  },
+  watch: {
+    books: {
+      handler(newVal) {
+        this.init()
+      }
+    }
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    totalDuration() {
+      var _total = 0
+      this.items.forEach((item) => {
+        if (item.episode) _total += item.episode.duration
+        else _total += item.libraryItem.media.duration
+      })
+      return _total
+    },
+    totalDurationPretty() {
+      return this.$elapsedPrettyExtended(this.totalDuration)
+    }
+  },
+  methods: {
+    draggableUpdate() {
+      var playlistUpdate = {
+        items: this.itemsCopy.map((i) => ({ libraryItemId: i.libraryItemId, episodeId: i.episodeId }))
+      }
+      this.$axios
+        .$patch(`/api/playlists/${this.playlistId}`, playlistUpdate)
+        .then((playlist) => {
+          console.log('Playlist updated', playlist)
+        })
+        .catch((error) => {
+          console.error('Failed to update playlist', error)
+          this.$toast.error('Failed to save playlist items order')
+        })
+    },
+    init() {
+      this.itemsCopy = this.items.map((i) => ({ ...i }))
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style>
+.playlist-item-item {
+  transition: all 0.4s ease;
+}
+
+.playlist-item-enter-from,
+.playlist-item-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.playlist-item-leave-active {
+  position: absolute;
+}
+</style>
\ No newline at end of file
diff --git a/client/components/tables/playlist/ItemTableRow.vue b/client/components/tables/playlist/ItemTableRow.vue
new file mode 100644
index 00000000..a6c0a8e1
--- /dev/null
+++ b/client/components/tables/playlist/ItemTableRow.vue
@@ -0,0 +1,231 @@
+<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="item" 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 relative flex items-center" :style="{ width: coverWidth + 'px', minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }">
+        <covers-book-cover :library-item="libraryItem" :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>
+      <div class="flex-grow overflow-hidden max-w-48 md:max-w-md h-full flex items-center px-2 md:px-3">
+        <div>
+          <div class="truncate max-w-48 md:max-w-md">
+            <nuxt-link :to="`/item/${libraryItem.id}`" class="truncate hover:underline text-sm md:text-base">{{ itemTitle }}</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>
+            <nuxt-link v-if="episode" :to="`/item/${libraryItem.id}`" class="truncate hover:underline">{{ mediaMetadata.title }}</nuxt-link>
+          </div>
+          <p class="text-xs md:text-sm text-gray-400">{{ itemDuration }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="w-40 absolute top-0 -right-24 h-full transform transition-transform" :class="!isHovering ? 'translate-x-0' : translateDistance">
+      <div class="flex h-full items-center">
+        <ui-tooltip :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
+          <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
+        </ui-tooltip>
+        <div v-if="userCanUpdate" class="mx-1" :class="isHovering ? '' : 'ml-6'">
+          <ui-icon-btn icon="edit" borderless @click="clickEdit" />
+        </div>
+        <div v-if="userCanDelete" class="mx-1">
+          <ui-icon-btn icon="close" borderless @click="removeClick" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    playlistId: String,
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    isDragging: Boolean,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      isProcessingReadUpdate: false,
+      processingRemove: false,
+      isHovering: false
+    }
+  },
+  watch: {
+    isDragging: {
+      handler(newVal) {
+        if (newVal) {
+          this.isHovering = false
+        }
+      }
+    }
+  },
+  computed: {
+    translateDistance() {
+      if (!this.userCanUpdate && !this.userCanDelete) return 'translate-x-0'
+      else if (!this.userCanUpdate || !this.userCanDelete) return '-translate-x-12'
+      return '-translate-x-24'
+    },
+    libraryItem() {
+      return this.item.libraryItem || {}
+    },
+    episode() {
+      return this.item.episode
+    },
+    episodeId() {
+      return this.episode ? this.episode.id : null
+    },
+    media() {
+      return this.libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    tracks() {
+      if (this.episode) return []
+      return this.media.tracks || []
+    },
+    itemTitle() {
+      if (this.episode) return this.episode.title
+      return this.mediaMetadata.title || ''
+    },
+    bookAuthors() {
+      if (this.episode) return []
+      return this.mediaMetadata.authors || []
+    },
+    itemDuration() {
+      if (this.episode) return this.episode.duration
+      return this.$elapsedPretty(this.media.duration)
+    },
+    isMissing() {
+      return this.libraryItem.isMissing
+    },
+    isInvalid() {
+      return this.libraryItem.isInvalid
+    },
+    isStreaming() {
+      return this.$store.getters['getIsMediaStreaming'](this.libraryItem.id, this.episodeId)
+    },
+    showPlayBtn() {
+      return !this.isMissing && !this.isInvalid && !this.isStreaming && (this.tracks.length || this.episode)
+    },
+    itemProgress() {
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, this.episodeId)
+    },
+    userIsFinished() {
+      return this.itemProgress ? !!this.itemProgress.isFinished : false
+    },
+    coverSize() {
+      return this.$store.state.globals.isMobile ? 30 : 50
+    },
+    coverWidth() {
+      if (this.bookCoverAspectRatio === 1) return this.coverSize * 1.6
+      return this.coverSize
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    }
+  },
+  methods: {
+    mouseover() {
+      if (this.isDragging) return
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    playClick() {
+      let queueItem = null
+      if (this.episode) {
+        queueItem = {
+          libraryItemId: this.libraryItem.id,
+          libraryId: this.libraryItem.libraryId,
+          episodeId: this.episodeId,
+          title: this.itemTitle,
+          subtitle: this.mediaMetadata.title,
+          caption: '',
+          duration: this.media.duration || null,
+          coverPath: this.media.coverPath || null
+        }
+      } else {
+        queueItem = {
+          libraryItemId: this.libraryItem.id,
+          libraryId: this.libraryItem.libraryId,
+          episodeId: null,
+          title: this.itemTitle,
+          subtitle: this.bookAuthors.map((au) => au.name).join(', '),
+          caption: '',
+          duration: this.media.duration || null,
+          coverPath: this.media.coverPath || null
+        }
+      }
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: this.libraryItem.id,
+        episodeId: this.episodeId,
+        queueItems: [queueItem]
+      })
+    },
+    clickEdit() {
+      // todo: edit
+    },
+    toggleFinished() {
+      var updatePayload = {
+        isFinished: !this.userIsFinished
+      }
+      this.isProcessingReadUpdate = true
+
+      let routepath = `/api/me/progress/${this.libraryItem.id}`
+      if (this.episodeId) routepath += `/${this.episodeId}`
+
+      this.$axios
+        .$patch(routepath, 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
+          this.$toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
+        })
+    },
+    removeClick() {
+      this.processingRemove = true
+
+      let routepath = `/api/playlists/${this.playlistId}/item/${this.libraryItem.id}`
+      if (this.episodeId) routepath += `/${this.episodeId}`
+
+      this.$axios
+        .$delete(routepath)
+        .then((updatedPlaylist) => {
+          console.log(`Item removed from playlist`, updatedPlaylist)
+          this.$toast.success('Item removed from playlist')
+          this.processingRemove = false
+        })
+        .catch((error) => {
+          console.error('Failed to remove item from playlist', error)
+          this.$toast.error('Failed to remove item from playlist')
+          this.processingRemove = false
+        })
+    }
+  },
+  mounted() {}
+}
+</script>
\ No newline at end of file
diff --git a/client/pages/playlist/_id.vue b/client/pages/playlist/_id.vue
new file mode 100644
index 00000000..6ec86849
--- /dev/null
+++ b/client/pages/playlist/_id.vue
@@ -0,0 +1,185 @@
+<template>
+  <div id="page-wrapper" class="bg-bg page overflow-hidden" :class="streamLibraryItem ? 'streaming' : ''">
+    <div class="w-full h-full overflow-y-auto px-2 py-6 md:p-8">
+      <div class="flex flex-col sm:flex-row max-w-6xl mx-auto">
+        <div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 240px">
+          <div class="relative" style="height: fit-content">
+            <covers-playlist-cover :items="playlistItems" :width="240" :height="120 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+          </div>
+        </div>
+        <div class="flex-grow px-2 py-6 md:py-0 md:px-10">
+          <div class="flex items-end flex-row flex-wrap md:flex-nowrap">
+            <h1 class="text-2xl md:text-3xl font-sans w-full md:w-fit mb-4 md:mb-0">
+              {{ playlistName }}
+            </h1>
+            <div class="flex-grow" />
+
+            <ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="clickPlay">
+              <span v-show="!streaming" class="material-icons text-2xl -ml-2 pr-1 text-white">play_arrow</span>
+              {{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
+            </ui-btn>
+
+            <ui-icon-btn v-if="userCanUpdate" icon="edit" class="mx-0.5" @click="editClick" />
+
+            <ui-icon-btn v-if="userCanDelete" icon="delete" class="mx-0.5" @click="removeClick" />
+          </div>
+
+          <div class="my-8 max-w-2xl">
+            <p class="text-base text-gray-100">{{ description }}</p>
+          </div>
+
+          <tables-playlist-items-table :items="playlistItems" :playlist-id="playlistId" />
+        </div>
+      </div>
+    </div>
+    <div v-show="processingRemove" class="absolute top-0 left-0 w-full h-full z-10 bg-black bg-opacity-40 flex items-center justify-center">
+      <ui-loading-indicator />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, params, app, redirect, route }) {
+    if (!store.state.user.user) {
+      return redirect(`/login?redirect=${route.path}`)
+    }
+    var playlist = await app.$axios.$get(`/api/playlists/${params.id}`).catch((error) => {
+      console.error('Failed', error)
+      return false
+    })
+    if (!playlist) {
+      return redirect('/')
+    }
+
+    store.commit('libraries/addUpdateUserPlaylist', playlist)
+    return {
+      playlistId: playlist.id
+    }
+  },
+  data() {
+    return {
+      processingRemove: false
+    }
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    playlistItems() {
+      return this.playlist.items || []
+    },
+    playlistName() {
+      return this.playlist.name || ''
+    },
+    description() {
+      return this.playlist.description || ''
+    },
+    playlist() {
+      return this.$store.getters['libraries/getPlaylist'](this.playlistId) || {}
+    },
+    playableItems() {
+      return this.playlistItems.filter((item) => {
+        const libraryItem = item.libraryItem
+        if (libraryItem.isMissing || libraryItem.isInvalid) return false
+        if (item.episode) return item.episode.audioFile
+        return libraryItem.media.tracks.length
+      })
+    },
+    streaming() {
+      return !!this.playableItems.find((i) => this.$store.getters['getIsMediaStreaming'](i.libraryItemId, i.episodeId))
+    },
+    showPlayButton() {
+      return this.playableItems.length
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    }
+  },
+  methods: {
+    editClick() {
+      this.$store.commit('globals/setEditPlaylist', this.playlist)
+    },
+    removeClick() {
+      if (confirm(`Are you sure you want to remove playlist "${this.playlistName}"?`)) {
+        this.processingRemove = true
+        var playlistName = this.playlistName
+        this.$axios
+          .$delete(`/api/playlists/${this.playlist.id}`)
+          .then(() => {
+            this.processingRemove = false
+            this.$toast.success(`Playlist "${playlistName}" Removed`)
+          })
+          .catch((error) => {
+            console.error('Failed to remove playlist', error)
+            this.processingRemove = false
+            this.$toast.error(`Failed to remove playlist`)
+          })
+      }
+    },
+    clickPlay() {
+      const queueItems = []
+
+      // Playlist queue will start at the first unfinished item
+      //   if all items are finished then entire playlist is queued
+      const itemsWithProgress = this.playableItems.map((item) => {
+        return {
+          ...item,
+          progress: this.$store.getters['user/getUserMediaProgress'](item.libraryItemId, item.episodeId)
+        }
+      })
+
+      const hasUnfinishedItems = itemsWithProgress.some((i) => !i.progress || !i.progress.isFinished)
+      if (!hasUnfinishedItems) {
+        console.warn('All items in playlist are finished - starting at first item')
+      }
+
+      for (let i = 0; i < itemsWithProgress.length; i++) {
+        const playlistItem = itemsWithProgress[i]
+        if (!hasUnfinishedItems || !playlistItem.progress || !playlistItem.progress.isFinished) {
+          const libraryItem = playlistItem.libraryItem
+          if (playlistItem.episode) {
+            queueItems.push({
+              libraryItemId: libraryItem.id,
+              libraryId: libraryItem.libraryId,
+              episodeId: playlistItem.episode.id,
+              title: playlistItem.episode.title,
+              subtitle: libraryItem.media.metadata.title,
+              caption: '',
+              duration: playlistItem.episode.duration || null,
+              coverPath: libraryItem.media.coverPath || null
+            })
+          } else {
+            queueItems.push({
+              libraryItemId: libraryItem.id,
+              libraryId: libraryItem.libraryId,
+              episodeId: null,
+              title: libraryItem.media.metadata.title,
+              subtitle: libraryItem.media.metadata.authors.map((au) => au.name).join(', '),
+              caption: '',
+              duration: libraryItem.media.duration || null,
+              coverPath: libraryItem.media.coverPath || null
+            })
+          }
+        }
+      }
+
+      if (queueItems.length >= 0) {
+        this.$eventBus.$emit('play-item', {
+          libraryItemId: queueItems[0].libraryItemId,
+          episodeId: queueItems[0].episodeId,
+          queueItems
+        })
+      }
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>
diff --git a/client/store/libraries.js b/client/store/libraries.js
index 829b27dc..f884ed59 100644
--- a/client/store/libraries.js
+++ b/client/store/libraries.js
@@ -60,6 +60,9 @@ export const getters = {
   },
   getCollection: state => id => {
     return state.collections.find(c => c.id === id)
+  },
+  getPlaylist: state => id => {
+    return state.userPlaylists.find(p => p.id === id)
   }
 }
 
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 995eb84b..853d93a1 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -112,6 +112,7 @@
   "HeaderOtherFiles": "Other Files",
   "HeaderPermissions": "Permissions",
   "HeaderPlayerQueue": "Player Queue",
+  "HeaderPlaylistItems": "Playlist Items",
   "HeaderPodcastsToAdd": "Podcasts to Add",
   "HeaderPreviewCover": "Preview Cover",
   "HeaderRemoveEpisode": "Remove Episode",