diff --git a/frontend/components/Buttons/QueueButton.vue b/frontend/components/Buttons/QueueButton.vue
index 75231a91e00..7dd75b67de0 100644
--- a/frontend/components/Buttons/QueueButton.vue
+++ b/frontend/components/Buttons/QueueButton.vue
@@ -75,7 +75,25 @@
         <draggable-queue v-if="menu || !destroy" class="ml-4" />
       </v-list>
       <v-spacer />
-      <v-card-actions class="d-flex justify-space-between">
+      <v-card-text v-if="creatingPlaylist" class="py-1">
+        <v-form @submit.prevent="handleSubmit">
+          <v-text-field
+            v-model="playlistName"
+            single-line
+            :label="$t('name')"
+            append-outer-icon="mdi-content-save"
+            hide-details="auto"
+            prepend-icon="mdi-cancel"
+            class="py-1"
+            @click:append-outer="saveQueueAsPlaylist"
+            @click:prepend="cancelSaveQueue"
+          />
+        </v-form>
+      </v-card-text>
+      <v-card-actions
+        v-if="!creatingPlaylist"
+        class="d-flex justify-space-between"
+      >
         <v-tooltip top>
           <template #activator="{ on: tooltip }">
             <v-btn icon v-on="tooltip" @click="playbackManager.stop">
@@ -86,7 +104,7 @@
         </v-tooltip>
         <v-tooltip top>
           <template #activator="{ on: tooltip }">
-            <v-btn icon disabled v-on="tooltip">
+            <v-btn icon v-on="tooltip" @click="askForPlaylistName">
               <v-icon>mdi-content-save</v-icon>
             </v-btn>
           </template>
@@ -102,7 +120,7 @@
 import { BaseItemDto } from '@jellyfin/client-axios';
 import Vue from 'vue';
 import { mapStores } from 'pinia';
-import { playbackManagerStore } from '~/store';
+import { authStore, playbackManagerStore } from '~/store';
 import { InitMode } from '~/store/playbackManager';
 import { getTotalEndsAtTime } from '~/utils/time';
 
@@ -121,11 +139,13 @@ export default Vue.extend({
     return {
       menu: false,
       destroy: false,
-      timeout: undefined as undefined | number
+      timeout: undefined as undefined | number,
+      playlistName: null as string | null,
+      creatingPlaylist: false
     };
   },
   computed: {
-    ...mapStores(playbackManagerStore),
+    ...mapStores(playbackManagerStore, authStore),
     sourceText: {
       get(): string {
         /**
@@ -204,7 +224,24 @@ export default Vue.extend({
     }
   },
   methods: {
-    getTotalEndsAtTime
+    getTotalEndsAtTime,
+    askForPlaylistName() {
+      this.creatingPlaylist = true;
+    },
+    async saveQueueAsPlaylist() {
+      try {
+        await this.$nuxt.$api.playlists.createPlaylist({
+          name: this.playlistName as string,
+          ids: this.playbackManager.queue,
+          userId: this.auth.currentUserId
+        });
+      } finally {
+        this.creatingPlaylist = false;
+      }
+    },
+    cancelSaveQueue() {
+      this.creatingPlaylist = false;
+    }
   }
 });
 </script>
diff --git a/frontend/components/Item/CollectionTabs.vue b/frontend/components/Item/CollectionTabs.vue
index 80f07dce5c9..28b41589341 100644
--- a/frontend/components/Item/CollectionTabs.vue
+++ b/frontend/components/Item/CollectionTabs.vue
@@ -42,8 +42,11 @@ export default Vue.extend({
   computed: {
     ...mapStores(itemsStore),
     children(): Record<string, BaseItemDto[]> | undefined {
-      if (this.items.getChildrenOfParent(this.item.Id)?.length) {
-        return groupBy(this.items.getChildrenOfParent(this.item.Id), 'Type');
+      if (this.items.getChildrenOfParentCollection(this.item.Id)?.length) {
+        return groupBy(
+          this.items.getChildrenOfParentCollection(this.item.Id),
+          'Type'
+        );
       }
     }
   },
diff --git a/frontend/components/Item/PlaylistItems.vue b/frontend/components/Item/PlaylistItems.vue
new file mode 100644
index 00000000000..a2acfe41c09
--- /dev/null
+++ b/frontend/components/Item/PlaylistItems.vue
@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <h1 v-if="!children && !loading" class="text-h5 text-center">
+      {{ $t('collectionEmpty') }}
+    </h1>
+    <skeleton-item-grid v-if="loading" :view-type="''" />
+
+    <v-list v-if="!!children" color="transparent" two-line>
+      <v-list-item-group class="list-group">
+        <draggable
+          v-if="children.length > 0"
+          v-bind="dragOptions"
+          v-model="children"
+          :move="checkMove"
+          class="list-draggable"
+        >
+          <v-hover
+            v-for="(item, index) in children"
+            :key="`${item.Id}-${index}`"
+            v-slot="{ hover }"
+          >
+            <v-list-item ripple @click="playQueueFrom(index)">
+              <v-list-item-action
+                v-if="!hover"
+                class="list-group-item d-flex justify-center d-flex transition"
+                :class="{ 'primary--text font-weight-bold': isPlaying(item) }"
+              >
+                {{ index + 1 }}
+              </v-list-item-action>
+              <v-list-item-action v-else class="justify-center d-flex">
+                <v-icon>mdi-drag-horizontal</v-icon>
+              </v-list-item-action>
+              <v-list-item-avatar tile class="list-group-item">
+                <blurhash-image :item="item" />
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title
+                  class="text-truncate ml-2 list-group-item transition"
+                  :class="{
+                    'primary--text font-weight-bold': isPlaying(item)
+                  }"
+                >
+                  {{ item.Name }}
+                </v-list-item-title>
+                <v-list-item-subtitle
+                  v-if="getArtists(item)"
+                  class="ml-2 list-group-item transition"
+                  :class="{
+                    'primary--text font-weight-bold': isPlaying(item)
+                  }"
+                >
+                  {{ getArtists(item) }}
+                </v-list-item-subtitle>
+              </v-list-item-content>
+
+              <v-list-item-action>
+                <like-button :item="item" />
+              </v-list-item-action>
+              <v-list-item-action class="mr-2">
+                <item-menu :item="item" queue />
+              </v-list-item-action>
+            </v-list-item>
+          </v-hover>
+        </draggable>
+        <div
+          v-for="index in skeletonLength"
+          v-else
+          :key="index"
+          class="d-flex align-center mt-5 mb-5"
+        >
+          <v-skeleton-loader type="avatar" class="ml-3 mr-3" />
+          <v-skeleton-loader type="sentences" width="10em" class="pr-5" />
+        </div>
+      </v-list-item-group>
+    </v-list>
+  </div>
+</template>
+
+<script lang="ts">
+import { BaseItemDto } from '@jellyfin/client-axios';
+import Vue from 'vue';
+import { mapStores } from 'pinia';
+import { MoveEvent } from 'vuedraggable';
+import { itemsStore, playbackManagerStore } from '~/store';
+
+export default Vue.extend({
+  props: {
+    playlist: {
+      type: Object as () => BaseItemDto,
+      required: true
+    }
+  },
+  data() {
+    return {
+      currentTab: 0,
+      loading: false,
+      newIndex: null as number | null,
+      oldIndex: null as number | null,
+      dragOptions: {
+        animation: 500,
+        delay: 0,
+        group: false,
+        dragoverBubble: true,
+        ghostClass: 'ghost'
+      }
+    };
+  },
+  computed: {
+    ...mapStores(itemsStore, playbackManagerStore),
+    children: {
+      get(): BaseItemDto[] {
+        return this.items.getChildrenOfParentPlaylist(
+          this.playlist.Id
+        ) as BaseItemDto[];
+      },
+      set(_: BaseItemDto[]): void {
+        if (this.oldIndex != null && this.newIndex != null) {
+          this.items.movePlaylistItem(
+            this.playlist,
+            this.children[this.oldIndex],
+            this.newIndex
+          );
+        }
+      }
+    }
+  },
+  watch: {
+    playlist: {
+      immediate: true,
+      async handler(playlist: BaseItemDto): Promise<void> {
+        if (!this.children) {
+          this.loading = true;
+          await this.items.fetchAndAddPlaylist(playlist.Id as string);
+          this.loading = false;
+        }
+      }
+    }
+  },
+  methods: {
+    checkMove(evt: MoveEvent<BaseItemDto>) {
+      this.newIndex = evt.draggedContext.futureIndex;
+      this.oldIndex = evt.draggedContext.index;
+    },
+    getArtists(item: BaseItemDto): string | null {
+      if (item.Artists) {
+        return item.Artists.join(', ');
+      } else {
+        return null;
+      }
+    },
+    isPlaying(item: BaseItemDto): boolean {
+      if (this.playbackManager.getCurrentItem === undefined) {
+        return false;
+      }
+
+      return (
+        item.Id === (this.playbackManager.getCurrentItem as BaseItemDto).Id
+      );
+    },
+    async playQueueFrom(playFromIndex: number): Promise<void> {
+      await this.playbackManager.play({
+        item: this.playlist,
+        startFromIndex: playFromIndex,
+        initiator: this.playlist
+      });
+      await this.items.fetchAndAddPlaylist(this.playlist.Id as string);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.list-draggable {
+  user-select: none;
+  min-height: 20px;
+}
+</style>
diff --git a/frontend/pages/item/_itemId/index.vue b/frontend/pages/item/_itemId/index.vue
index 72063aef67b..de64919a9cc 100644
--- a/frontend/pages/item/_itemId/index.vue
+++ b/frontend/pages/item/_itemId/index.vue
@@ -244,6 +244,9 @@
         <v-col v-if="item.Type === 'BoxSet'" cols="12">
           <collection-tabs :item="item" />
         </v-col>
+        <v-col v-if="item.Type === 'Playlist'" cols="12">
+          <playlist-items :playlist="item" />
+        </v-col>
         <v-col cols="12">
           <related-items :id="$route.params.itemId" :item="item" />
         </v-col>
diff --git a/frontend/store/items.ts b/frontend/store/items.ts
index 31a47f54244..5d7cb0b693b 100644
--- a/frontend/store/items.ts
+++ b/frontend/store/items.ts
@@ -1,18 +1,20 @@
 import Vue from 'vue';
-import { BaseItemDto, ItemFields } from '@jellyfin/client-axios';
+import { BaseItemDto, ImageType, ItemFields } from '@jellyfin/client-axios';
 import { defineStore } from 'pinia';
 import { authStore } from '.';
 
 export interface ItemsState {
   byId: Record<string, BaseItemDto>;
   collectionById: Record<string, string[]>;
+  playlistById: Record<string, string[]>;
 }
 
 export const itemsStore = defineStore('items', {
   state: () => {
     return {
       byId: {},
-      collectionById: {}
+      collectionById: {},
+      playlistById: {}
     } as ItemsState;
   },
   actions: {
@@ -62,6 +64,135 @@ export const itemsStore = defineStore('items', {
         Vue.delete(this.byId, id);
       }
     },
+    /**
+     * Moves a playlist item to another index.
+     *
+     * @param parent The playlist containing the item to be moved.
+     * @param localChild The item in the playlist to be moved.
+     * @param index The new index of the item after being moved
+     * @returns A promise representing the resulting playlist after the item is moved.
+     */
+    async movePlaylistItem(
+      parent: BaseItemDto,
+      localChild: BaseItemDto,
+      index: number
+    ): Promise<BaseItemDto[]> {
+      const auth = authStore();
+
+      // You're probably asking "... but why?"
+
+      // Because when the Playback manager is playing these tracks,
+      // it seems to erase the PlaylistItemId from each of the items.
+      // So... I just get a new bunch of them to move things.
+
+      // Probably a better way to do it, but...
+      // ... I didn't feel like figuring that out right now.
+
+      // If you try to fix this, make sure that you can click "Play"
+      // on the playlist, then move tracks.
+
+      const children = await this.$nuxt.$api.playlists.getPlaylistItems({
+        userId: auth.currentUserId,
+        playlistId: parent.Id as string,
+        fields: [ItemFields.PrimaryImageAspectRatio],
+        enableImageTypes: [
+          ImageType.Primary,
+          ImageType.Backdrop,
+          ImageType.Banner,
+          ImageType.Thumb
+        ]
+      });
+
+      const child = children.data.Items?.find(
+        (i) => i.Id === localChild.Id
+      ) as BaseItemDto;
+
+      await this.$nuxt.$api.playlists.moveItem({
+        playlistId: parent.Id as string,
+        itemId: child.PlaylistItemId as string,
+        newIndex: index
+      });
+
+      return await this.fetchAndAddPlaylist(parent.Id as string);
+    },
+    /**
+     * Adds a playlist and it's items to the local store.
+     *
+     * @param parent The playlist containing the children items.
+     * @param children The items in the playlist
+     * @returns The items in the playlist
+     */
+    addPlaylist(parent: BaseItemDto, children: BaseItemDto[]): BaseItemDto[] {
+      if (!parent.Id) {
+        throw new Error("Parent item doesn't have an Id");
+      }
+
+      const childIds = [];
+
+      for (const child of children) {
+        if (child.Id) {
+          if (!this.getItemById(child.Id)) {
+            this.add(child);
+          }
+
+          childIds.push(child.Id);
+        }
+      }
+
+      Vue.set(this.playlistById, parent.Id, childIds);
+
+      return this.getChildrenOfParentPlaylist(parent.Id) as BaseItemDto[];
+    },
+    /**
+     * Fetches the items in a playlist and stores them locally.
+     *
+     * @param parentId The Item ID of the playlist
+     * @returns The items in the playlist.
+     */
+    async fetchAndAddPlaylist(
+      parentId: string | undefined
+    ): Promise<BaseItemDto[]> {
+      const auth = authStore();
+
+      if (parentId && !this.getItemById(parentId)) {
+        const parentItem = (
+          await this.$nuxt.$api.items.getItems({
+            userId: auth.currentUserId,
+            ids: [parentId],
+            fields: Object.values(ItemFields)
+          })
+        ).data;
+
+        if (!parentItem.Items?.[0]) {
+          throw new Error("This parent doesn't exist");
+        }
+
+        this.add(parentItem.Items[0]);
+      }
+
+      const childItems = (
+        await this.$nuxt.$api.playlists.getPlaylistItems({
+          userId: auth.currentUserId,
+          playlistId: parentId as string,
+          fields: [ItemFields.PrimaryImageAspectRatio],
+          enableImageTypes: [
+            ImageType.Primary,
+            ImageType.Backdrop,
+            ImageType.Banner,
+            ImageType.Thumb
+          ]
+        })
+      ).data;
+
+      const parent = this.getItemById(parentId);
+
+      if (childItems.Items) {
+        return this.addPlaylist(parent as BaseItemDto, childItems.Items);
+      } else {
+        // I think this just means it's an empty playlist...?
+        return this.addPlaylist(parent as BaseItemDto, []);
+      }
+    },
     /**
      * Associate an item that has children with its children
      *
@@ -88,7 +219,7 @@ export const itemsStore = defineStore('items', {
 
       Vue.set(this.collectionById, parent.Id, childIds);
 
-      return this.getChildrenOfParent(parent.Id) as BaseItemDto[];
+      return this.getChildrenOfParentCollection(parent.Id) as BaseItemDto[];
     },
     /**
      * Fetches a parent and its children and adds thecollection to the store
@@ -156,7 +287,7 @@ export const itemsStore = defineStore('items', {
         return res;
       };
     },
-    getChildrenOfParent: (state) => {
+    getChildrenOfParentCollection: (state) => {
       return (id: string | undefined): BaseItemDto[] | undefined => {
         if (!id) {
           throw new Error('No itemId provided');
@@ -165,6 +296,24 @@ export const itemsStore = defineStore('items', {
         const res = [] as BaseItemDto[];
         const ids = state.collectionById[id];
 
+        if (ids?.length) {
+          for (const _id of ids) {
+            res.push(state.byId[_id]);
+          }
+
+          return res;
+        }
+      };
+    },
+    getChildrenOfParentPlaylist: (state) => {
+      return (id: string | undefined): BaseItemDto[] | undefined => {
+        if (!id) {
+          throw new Error('No itemId provided');
+        }
+
+        const res = [] as BaseItemDto[];
+        const ids = state.playlistById[id];
+
         if (ids?.length) {
           for (const _id of ids) {
             res.push(state.byId[_id]);