diff --git a/src/renderer/components/FtCommunityPost/FtCommunityPost.vue b/src/renderer/components/FtCommunityPost/FtCommunityPost.vue
index 5d879e954eb7d..69cb119a31065 100644
--- a/src/renderer/components/FtCommunityPost/FtCommunityPost.vue
+++ b/src/renderer/components/FtCommunityPost/FtCommunityPost.vue
@@ -166,7 +166,7 @@ import { A11y, Navigation, Pagination } from 'swiper/modules'
 import { computed, onMounted, ref } from 'vue'
 
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
-import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
+import FtListPlaylist from '../FtListPlaylist/FtListPlaylist.vue'
 import FtCommunityPoll from '../FtCommunityPoll/FtCommunityPoll.vue'
 
 import store from '../../store/index'
diff --git a/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue b/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue
index 5b96947909f00..fbd87924cf093 100644
--- a/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue
+++ b/src/renderer/components/FtListLazyWrapper/FtListLazyWrapper.vue
@@ -60,7 +60,7 @@ import { computed, ref } from 'vue'
 
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
 import FtListChannel from '../FtListChannel/FtListChannel.vue'
-import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
+import FtListPlaylist from '../FtListPlaylist/FtListPlaylist.vue'
 import FtCommunityPost from '../FtCommunityPost/FtCommunityPost.vue'
 import FtListHashtag from '../FtListHashtag/FtListHashtag.vue'
 
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.scss b/src/renderer/components/FtListPlaylist/FtListPlaylist.scss
similarity index 55%
rename from src/renderer/components/ft-list-playlist/ft-list-playlist.scss
rename to src/renderer/components/FtListPlaylist/FtListPlaylist.scss
index 0b80f3851c5ae..3fae7a4aecdb1 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.scss
+++ b/src/renderer/components/FtListPlaylist/FtListPlaylist.scss
@@ -1 +1,5 @@
 @use '../../scss-partials/ft-list-item';
+
+.blur {
+  filter: blur(20px);
+}
diff --git a/src/renderer/components/FtListPlaylist/FtListPlaylist.vue b/src/renderer/components/FtListPlaylist/FtListPlaylist.vue
new file mode 100644
index 0000000000000..c2a5030b85862
--- /dev/null
+++ b/src/renderer/components/FtListPlaylist/FtListPlaylist.vue
@@ -0,0 +1,281 @@
+<template>
+  <div
+    class="ft-list-video ft-list-item"
+    :class="{
+      [appearance]: true,
+      list: listType === 'list',
+      grid: listType === 'grid'
+    }"
+  >
+    <div
+      class="videoThumbnail"
+    >
+      <RouterLink
+        class="thumbnailLink"
+        :to="playlistPageLinkTo"
+        tabindex="-1"
+        aria-hidden="true"
+      >
+        <img
+          alt=""
+          :src="thumbnailForDisplay"
+          class="thumbnailImage"
+          :class="{ blur: blurThumbnails }"
+        >
+      </RouterLink>
+      <div
+        class="videoCountContainer"
+      >
+        <div class="background" />
+        <div class="inner">
+          <div>{{ videoCount }}</div>
+          <div><FontAwesomeIcon :icon="['fas','list']" /></div>
+        </div>
+      </div>
+    </div>
+    <div class="info">
+      <RouterLink
+        class="title"
+        :to="playlistPageLinkTo"
+      >
+        <h3 class="h3Title">
+          {{ titleForDisplay }}
+        </h3>
+      </RouterLink>
+      <div class="infoLine">
+        <RouterLink
+          v-if="channelId"
+          class="channelName"
+          :to="`/channel/${channelId}`"
+        >
+          {{ channelName }}
+        </RouterLink>
+        <span
+          v-else
+          class="channelName"
+        >
+          {{ channelName }}
+        </span>
+      </div>
+      <FtIconButton
+        v-if="externalPlayer !== '' && !isUserPlaylist"
+        :title="t('Video.External Player.OpenInTemplate', { externalPlayer })"
+        :icon="['fas', 'external-link-alt']"
+        class="externalPlayerButton"
+        theme="base-no-default"
+        :size="16"
+        :use-shadow="false"
+        @click="handleExternalPlayer"
+      />
+      <span
+        v-if="isUserPlaylist"
+        class="playlistIcons"
+      >
+        <FtIconButton
+          :title="markedAsQuickBookmarkTarget ? t('User Playlists.Quick Bookmark Enabled') : t('User Playlists.Enable Quick Bookmark With This Playlist')"
+          :icon="markedAsQuickBookmarkTarget ? ['fas', 'bookmark'] : ['far', 'bookmark']"
+          :disabled="markedAsQuickBookmarkTarget"
+          :theme="markedAsQuickBookmarkTarget ? 'secondary' : 'base-no-default'"
+          :size="16"
+          @disabled-click="handleQuickBookmarkEnabledDisabledClick"
+          @click="enableQuickBookmarkForThisPlaylist"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+
+import store from '../../store/index'
+
+import { showToast } from '../../helpers/utils'
+import thumbnailPlaceholder from '../../assets/img/thumbnail_placeholder.svg'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  appearance: {
+    type: String,
+    required: true
+  },
+  searchQueryText: {
+    type: String,
+    default: ''
+  },
+})
+
+const { t } = useI18n()
+
+let playlistId = ''
+let title = ''
+/** @type {string} */
+let thumbnail = thumbnailPlaceholder
+/** @type {string | null} */
+let channelId = null
+let channelName = ''
+let videoCount = 0
+
+/** @type {import('vue').ComputedRef<'grid' | 'list'>} */
+const listType = computed(() => store.getters.getListType)
+
+const titleForDisplay = computed(() => {
+  if (typeof title !== 'string') {
+    return ''
+  }
+  if (title.length <= 255) {
+    return title
+  }
+
+  return `${title.slice(0, 255)}...`
+})
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const blurThumbnails = computed(() => store.getters.getBlurThumbnails)
+
+/** @type {import('vue').ComputedRef<'' | 'start' | 'middle' | 'end' | 'hidden' | 'blur'>} */
+const thumbnailPreference = computed(() => store.getters.getThumbnailPreference)
+
+/** @type {import('vue').ComputedRef<string>} */
+const thumbnailForDisplay = computed(() => {
+  return thumbnailPreference.value !== 'hidden' ? thumbnail : thumbnailPlaceholder
+})
+
+const isUserPlaylist = computed(() => props.data._id != null)
+
+// For `router-link` attribute `to`
+const playlistPageLinkTo = computed(() => ({
+  path: `/playlist/${playlistId}`,
+  query: {
+    playlistType: isUserPlaylist.value ? 'user' : '',
+    searchQueryText: props.searchQueryText,
+  },
+}))
+
+/** @type {import('vue').ComputedRef<'local' | 'invidious'>} */
+const backendPreference = computed(() => store.getters.getBackendPreference)
+
+/** @type {import('vue').ComputedRef<string>} */
+const currentInvidiousInstanceUrl = computed(() => store.getters.getCurrentInvidiousInstanceUrl)
+
+if (isUserPlaylist.value) {
+  parseUserData()
+} else if (props.data.dataSource === 'local') {
+  parseLocalData()
+} else {
+  parseInvidiousData()
+}
+
+function parseInvidiousData() {
+  title = props.data.title
+
+  thumbnail = props.data.playlistThumbnail
+    .replace('https://i.ytimg.com', currentInvidiousInstanceUrl.value)
+    .replace('hqdefault', 'mqdefault')
+
+  channelName = props.data.author
+  channelId = props.data.authorId
+  playlistId = props.data.playlistId
+  videoCount = props.data.videoCount
+
+  if (props.data.proxyThumbnail === false) {
+    thumbnail = props.data.playlistThumbnail
+  }
+}
+
+function parseLocalData() {
+  title = props.data.title
+
+  thumbnail = props.data.thumbnail
+
+  channelName = props.data.channelName
+  channelId = props.data.channelId
+  playlistId = props.data.playlistId
+  videoCount = props.data.videoCount
+}
+
+function parseUserData() {
+  title = props.data.playlistName
+
+  if (props.data.videos.length > 0) {
+    const origin = backendPreference.value === 'invidious'
+      ? currentInvidiousInstanceUrl.value
+      : 'https://i.ytimg.com'
+
+    thumbnail = `${origin}/vi/${props.data.videos[0].videoId}/mqdefault.jpg`
+  }
+
+  channelName = ''
+  channelId = ''
+  playlistId = props.data._id
+  videoCount = props.data.videos.length
+}
+
+/** @type {import('vue').ComputedRef<string | null>} */
+const quickBookmarkPlaylistId = computed(() => store.getters.getQuickBookmarkTargetPlaylistId)
+
+const markedAsQuickBookmarkTarget = computed(() => {
+  // Only user playlists can be target
+  return playlistId != null &&
+    quickBookmarkPlaylistId.value != null &&
+    quickBookmarkPlaylistId.value === playlistId
+})
+
+function handleQuickBookmarkEnabledDisabledClick() {
+  showToast(t('User Playlists.SinglePlaylistView.Toast["This playlist is already being used for quick bookmark."]'))
+}
+
+async function enableQuickBookmarkForThisPlaylist() {
+  const currentQuickBookmarkTargetPlaylist = store.getters.getQuickBookmarkPlaylist
+
+  store.dispatch('updateQuickBookmarkTargetPlaylistId', playlistId.value)
+
+  if (currentQuickBookmarkTargetPlaylist != null) {
+    showToast(
+      t('User Playlists.SinglePlaylistView.Toast["This playlist is now used for quick bookmark instead of {oldPlaylistName}. Click here to undo"]', {
+        oldPlaylistName: currentQuickBookmarkTargetPlaylist.playlistName,
+      }),
+      5000,
+      () => {
+        store.dispatch('updateQuickBookmarkTargetPlaylistId', currentQuickBookmarkTargetPlaylist._id)
+        showToast(
+          t('User Playlists.SinglePlaylistView.Toast["Reverted to use {oldPlaylistName} for quick bookmark"]', {
+            oldPlaylistName: currentQuickBookmarkTargetPlaylist.playlistName,
+          }),
+          5000,
+        )
+      },
+    )
+  } else {
+    showToast(t('User Playlists.SinglePlaylistView.Toast.This playlist is now used for quick bookmark'))
+  }
+}
+
+/** @type {import('vue').ComputedRef<string>} */
+const externalPlayer = computed(() => store.getters.getExternalPlayer)
+
+/** @type {import('vue').ComputedRef<number>} */
+const defaultPlayback = computed(() => store.getters.getDefaultPlayback)
+
+function handleExternalPlayer() {
+  store.dispatch('openInExternalPlayer', {
+    watchProgress: 0,
+    playbackRate: defaultPlayback.value,
+    videoId: null,
+    playlistId: playlistId,
+    playlistIndex: null,
+    playlistReverse: null,
+    playlistShuffle: null,
+    playlistLoop: null
+  })
+}
+</script>
+
+<style scoped lang="scss" src="./FtListPlaylist.scss" />
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.js b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
deleted file mode 100644
index e36d6e63ff993..0000000000000
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import { defineComponent } from 'vue'
-import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
-import { mapActions } from 'vuex'
-import { showToast } from '../../helpers/utils'
-import thumbnailPlaceholder from '../../assets/img/thumbnail_placeholder.svg'
-
-export default defineComponent({
-  name: 'FtListPlaylist',
-  components: {
-    'ft-icon-button': FtIconButton
-  },
-  props: {
-    data: {
-      type: Object,
-      required: true
-    },
-    appearance: {
-      type: String,
-      required: true
-    },
-    searchQueryText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  data: function () {
-    return {
-      playlistId: '',
-      channelId: '',
-      title: 'Pop Music Playlist - Timeless Pop Songs (Updated Weekly 2020)',
-      thumbnail: thumbnailPlaceholder,
-      channelName: '#RedMusic: Just Hits',
-      videoCount: 200,
-    }
-  },
-  computed: {
-    backendPreference: function () {
-      return this.$store.getters.getBackendPreference
-    },
-    currentInvidiousInstanceUrl: function () {
-      return this.$store.getters.getCurrentInvidiousInstanceUrl
-    },
-
-    quickBookmarkPlaylistId() {
-      return this.$store.getters.getQuickBookmarkTargetPlaylistId
-    },
-    markedAsQuickBookmarkTarget() {
-      // Only user playlists can be target
-      if (this.playlistId == null) { return false }
-      if (this.quickBookmarkPlaylistId == null) { return false }
-
-      return this.quickBookmarkPlaylistId === this.playlistId
-    },
-
-    listType: function () {
-      return this.$store.getters.getListType
-    },
-
-    externalPlayer: function () {
-      return this.$store.getters.getExternalPlayer
-    },
-
-    defaultPlayback: function () {
-      return this.$store.getters.getDefaultPlayback
-    },
-
-    titleForDisplay: function () {
-      if (typeof this.title !== 'string') { return '' }
-      if (this.title.length <= 255) { return this.title }
-
-      return `${this.title.substring(0, 255)}...`
-    },
-
-    blurThumbnails: function () {
-      return this.$store.getters.getBlurThumbnails
-    },
-
-    blurThumbnailsStyle: function () {
-      return this.blurThumbnails ? 'blur(20px)' : null
-    },
-
-    thumbnailPreference: function () {
-      return this.$store.getters.getThumbnailPreference
-    },
-    thumbnailCanBeShown() {
-      return this.thumbnailPreference !== 'hidden'
-    },
-
-    isUserPlaylist() {
-      return this.data._id != null
-    },
-
-    playlistPageLinkTo() {
-      // For `router-link` attribute `to`
-      return {
-        path: `/playlist/${this.playlistId}`,
-        query: {
-          playlistType: this.isUserPlaylist ? 'user' : '',
-          searchQueryText: this.searchQueryText,
-        },
-      }
-    },
-  },
-  created: function () {
-    if (this.isUserPlaylist) {
-      this.parseUserData()
-    } else if (this.data.dataSource === 'local') {
-      this.parseLocalData()
-    } else {
-      this.parseInvidiousData()
-    }
-  },
-  methods: {
-    handleExternalPlayer: function () {
-      this.openInExternalPlayer({
-        watchProgress: 0,
-        playbackRate: this.defaultPlayback,
-        videoId: null,
-        playlistId: this.playlistId,
-        playlistIndex: null,
-        playlistReverse: null,
-        playlistShuffle: null,
-        playlistLoop: null
-      })
-    },
-
-    handleQuickBookmarkEnabledDisabledClick: function () {
-      showToast(this.$t('User Playlists.SinglePlaylistView.Toast["This playlist is already being used for quick bookmark."]'))
-    },
-
-    parseInvidiousData: function () {
-      this.title = this.data.title
-      if (this.thumbnailCanBeShown) {
-        this.thumbnail = this.data.playlistThumbnail.replace('https://i.ytimg.com', this.currentInvidiousInstanceUrl).replace('hqdefault', 'mqdefault')
-      }
-      this.channelName = this.data.author
-      this.channelId = this.data.authorId
-      this.playlistId = this.data.playlistId
-      this.videoCount = this.data.videoCount
-
-      if (this.data.proxyThumbnail === false) {
-        this.thumbnail = this.data.playlistThumbnail
-      }
-    },
-
-    parseLocalData: function () {
-      this.title = this.data.title
-      if (this.thumbnailCanBeShown) {
-        this.thumbnail = this.data.thumbnail
-      }
-      this.channelName = this.data.channelName
-      this.channelId = this.data.channelId
-      this.playlistId = this.data.playlistId
-      this.videoCount = this.data.videoCount
-    },
-
-    parseUserData: function () {
-      this.title = this.data.playlistName
-      if (this.thumbnailCanBeShown && this.data.videos.length > 0) {
-        const thumbnailURL = `https://i.ytimg.com/vi/${this.data.videos[0].videoId}/mqdefault.jpg`
-        if (this.backendPreference === 'invidious') {
-          this.thumbnail = thumbnailURL.replace('https://i.ytimg.com', this.currentInvidiousInstanceUrl)
-        } else {
-          this.thumbnail = thumbnailURL
-        }
-      }
-      this.channelName = ''
-      this.channelId = ''
-      this.playlistId = this.data._id
-      this.videoCount = this.data.videos.length
-    },
-
-    enableQuickBookmarkForThisPlaylist: function () {
-      const currentQuickBookmarkTargetPlaylist = this.$store.getters.getQuickBookmarkPlaylist
-
-      this.updateQuickBookmarkTargetPlaylistId(this.playlistId)
-      if (currentQuickBookmarkTargetPlaylist != null) {
-        showToast(
-          this.$t('User Playlists.SinglePlaylistView.Toast["This playlist is now used for quick bookmark instead of {oldPlaylistName}. Click here to undo"]', {
-            oldPlaylistName: currentQuickBookmarkTargetPlaylist.playlistName,
-          }),
-          5000,
-          () => {
-            this.updateQuickBookmarkTargetPlaylistId(currentQuickBookmarkTargetPlaylist._id)
-            showToast(
-              this.$t('User Playlists.SinglePlaylistView.Toast["Reverted to use {oldPlaylistName} for quick bookmark"]', {
-                oldPlaylistName: currentQuickBookmarkTargetPlaylist.playlistName,
-              }),
-              5000,
-            )
-          },
-        )
-      } else {
-        showToast(this.$t('User Playlists.SinglePlaylistView.Toast.This playlist is now used for quick bookmark'))
-      }
-    },
-
-    ...mapActions([
-      'openInExternalPlayer',
-      'updateQuickBookmarkTargetPlaylistId'
-    ])
-  }
-})
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
deleted file mode 100644
index 0f5bed27762b3..0000000000000
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div
-    class="ft-list-video ft-list-item"
-    :class="{
-      [appearance]: true,
-      list: listType === 'list',
-      grid: listType === 'grid'
-    }"
-  >
-    <div
-      class="videoThumbnail"
-    >
-      <router-link
-        class="thumbnailLink"
-        :to="playlistPageLinkTo"
-        tabindex="-1"
-        aria-hidden="true"
-      >
-        <img
-          alt=""
-          :src="thumbnail"
-          class="thumbnailImage"
-          :style="{filter: blurThumbnailsStyle}"
-        >
-      </router-link>
-      <div
-        class="videoCountContainer"
-      >
-        <div class="background" />
-        <div class="inner">
-          <div>{{ videoCount }}</div>
-          <div><font-awesome-icon :icon="['fas','list']" /></div>
-        </div>
-      </div>
-    </div>
-    <div class="info">
-      <router-link
-        class="title"
-        :to="playlistPageLinkTo"
-      >
-        <h3 class="h3Title">
-          {{ titleForDisplay }}
-        </h3>
-      </router-link>
-      <div class="infoLine">
-        <router-link
-          v-if="channelId"
-          class="channelName"
-          :to="`/channel/${channelId}`"
-        >
-          {{ channelName }}
-        </router-link>
-        <span
-          v-else
-          class="channelName"
-        >
-          {{ channelName }}
-        </span>
-      </div>
-      <ft-icon-button
-        v-if="externalPlayer !== '' && !isUserPlaylist"
-        :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
-        :icon="['fas', 'external-link-alt']"
-        class="externalPlayerButton"
-        theme="base-no-default"
-        :size="16"
-        :use-shadow="false"
-        @click="handleExternalPlayer"
-      />
-      <span
-        v-if="isUserPlaylist"
-        class="playlistIcons"
-      >
-        <ft-icon-button
-          :title="markedAsQuickBookmarkTarget ? $t('User Playlists.Quick Bookmark Enabled') : $t('User Playlists.Enable Quick Bookmark With This Playlist')"
-          :icon="markedAsQuickBookmarkTarget ? ['fas', 'bookmark'] : ['far', 'bookmark']"
-          :disabled="markedAsQuickBookmarkTarget"
-          :theme="markedAsQuickBookmarkTarget ? 'secondary' : 'base-no-default'"
-          :size="16"
-          @disabled-click="handleQuickBookmarkEnabledDisabledClick"
-          @click="enableQuickBookmarkForThisPlaylist"
-        />
-      </span>
-    </div>
-  </div>
-</template>
-
-<script src="./ft-list-playlist.js" />
-<style scoped lang="scss" src="./ft-list-playlist.scss" />