diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index a56f5097..df85d0e3 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -3,7 +3,6 @@
     v-for="playlist in playlists"
     :key="playlist.itemId"
     class="media is-align-items-center"
-    :playlist="playlist"
     @click="open_playlist(playlist.item)"
   >
     <figure class="media-left is-clickable">
@@ -45,13 +44,16 @@ export default {
 
   methods: {
     open_playlist(playlist) {
-      if (playlist.type !== 'folder') {
+      if (playlist.type === 'folder') {
         this.$router.push({
-          name: 'playlist-tracks',
+          name: 'playlist-folder',
           params: { id: playlist.id }
         })
       } else {
-        this.$router.push({ name: 'playlist', params: { id: playlist.id } })
+        this.$router.push({
+          name: 'playlist',
+          params: { id: playlist.id }
+        })
       }
     },
 
diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue
index a412f896..d67c91b9 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -90,7 +90,7 @@ export default {
     open_playlist() {
       this.$emit('close')
       this.$router.push({
-        name: 'playlist-tracks',
+        name: 'playlist',
         params: { id: this.playlist.id }
       })
     }
diff --git a/web-src/src/locales/de.json b/web-src/src/locales/de.json
index 2d75407e..35cca4cc 100644
--- a/web-src/src/locales/de.json
+++ b/web-src/src/locales/de.json
@@ -380,6 +380,7 @@
       "track-count": "{count} Track|{count} Tracks"
     },
     "playlists": {
+      "title": "Playlisten",
       "count": "{count} Playlist|{count} Playlisten"
     },
     "podcast": {
diff --git a/web-src/src/locales/en.json b/web-src/src/locales/en.json
index d59f0b53..7b3edc09 100644
--- a/web-src/src/locales/en.json
+++ b/web-src/src/locales/en.json
@@ -380,6 +380,7 @@
       "track-count": "{count} track|{count} track|{count} tracks"
     },
     "playlists": {
+      "title": "Playlists",
       "count": "{count} playlist|{count} playlist|{count} playlists"
     },
     "podcast": {
diff --git a/web-src/src/locales/fr.json b/web-src/src/locales/fr.json
index 617f348f..ddfcefe7 100644
--- a/web-src/src/locales/fr.json
+++ b/web-src/src/locales/fr.json
@@ -380,6 +380,7 @@
       "track-count": "{count} piste|{count} piste|{count} pistes"
     },
     "playlists": {
+      "title": "Listes de lecture",
       "count": "{count} liste de lecture|{count} liste de lecture|{count} listes de lecture"
     },
     "podcast": {
diff --git a/web-src/src/locales/zh.json b/web-src/src/locales/zh.json
index 1041ee4c..e6792f4e 100644
--- a/web-src/src/locales/zh.json
+++ b/web-src/src/locales/zh.json
@@ -380,6 +380,7 @@
       "track-count": "{count} 只曲目|{count} 只曲目"
     },
     "playlists": {
+      "title": "播放列表",
       "count": "{count} 个播放列表|{count} 个播放列表"
     },
     "podcast": {
diff --git a/web-src/src/pages/PagePlaylist.vue b/web-src/src/pages/PagePlaylistFolder.vue
similarity index 82%
rename from web-src/src/pages/PagePlaylist.vue
rename to web-src/src/pages/PagePlaylistFolder.vue
index eda6be0e..5b7d7353 100644
--- a/web-src/src/pages/PagePlaylist.vue
+++ b/web-src/src/pages/PagePlaylistFolder.vue
@@ -2,14 +2,19 @@
   <div class="fd-page">
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="playlist.name" />
+        <p
+          class="title is-4"
+          v-text="
+            playlist.id === 0 ? $t('page.playlists.title') : playlist.name
+          "
+        />
         <p
           class="heading"
           v-text="$t('page.playlists.count', { count: playlists.count })"
         />
       </template>
       <template #content>
-        <list-playlists :playlists="playlists" />
+        <list-playlists v-if="has_playlists" :playlists="playlists" />
       </template>
     </content-with-heading>
   </div>
@@ -36,7 +41,7 @@ const dataObject = {
 }
 
 export default {
-  name: 'PagePlaylists',
+  name: 'PagePlaylistFolder',
   components: { ContentWithHeading, ListPlaylists },
 
   beforeRouteEnter(to, from, next) {
@@ -60,10 +65,9 @@ export default {
   },
 
   computed: {
-    radio_playlists() {
-      return this.$store.state.config.radio_playlists
+    has_playlists() {
+      return Object.keys(this.playlists_list.itemsByGroup).length > 0
     },
-
     playlists() {
       this.playlists_list.group(noop(), [
         (playlist) =>
@@ -72,8 +76,10 @@ export default {
           playlist.stream_count === 0 ||
           playlist.item_count > playlist.stream_count
       ])
-
       return this.playlists_list
+    },
+    radio_playlists() {
+      return this.$store.state.config.radio_playlists
     }
   }
 }
diff --git a/web-src/src/pages/PagePlaylistTracks.vue b/web-src/src/pages/PagePlaylistTracks.vue
index 9331583b..61cf692f 100644
--- a/web-src/src/pages/PagePlaylistTracks.vue
+++ b/web-src/src/pages/PagePlaylistTracks.vue
@@ -57,7 +57,7 @@ const dataObject = {
 }
 
 export default {
-  name: 'PagePlaylist',
+  name: 'PagePlaylistTracks',
   components: { ContentWithHeading, ListTracks, ModalDialogPlaylist },
 
   beforeRouteEnter(to, from, next) {
diff --git a/web-src/src/pages/PagePlaylistSpotify.vue b/web-src/src/pages/PagePlaylistTracksSpotify.vue
similarity index 99%
rename from web-src/src/pages/PagePlaylistSpotify.vue
rename to web-src/src/pages/PagePlaylistTracksSpotify.vue
index e1b1a30c..91649826 100644
--- a/web-src/src/pages/PagePlaylistSpotify.vue
+++ b/web-src/src/pages/PagePlaylistTracksSpotify.vue
@@ -66,10 +66,10 @@ import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
 import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
 import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
-import store from '@/store'
-import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
+import store from '@/store'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
+import webapi from '@/webapi'
 
 const PAGE_SIZE = 50
 
@@ -97,7 +97,7 @@ const dataObject = {
 }
 
 export default {
-  name: 'PagePlaylistSpotify',
+  name: 'PagePlaylistTracksSpotify',
   components: {
     ContentWithHeading,
     ModalDialogPlaylistSpotify,
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 388a1aac..2d211249 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -25,9 +25,9 @@ import PageFiles from '@/pages/PageFiles.vue'
 import PageGenreAlbum from '@/pages/PageGenreAlbum.vue'
 import PageGenreTracks from '@/pages/PageGenreTracks.vue'
 import PageGenres from '@/pages/PageGenres.vue'
-import PagePlaylist from '@/pages/PagePlaylist.vue'
-import PagePlaylistSpotify from '@/pages/PagePlaylistSpotify.vue'
+import PagePlaylistFolder from '@/pages/PagePlaylistFolder.vue'
 import PagePlaylistTracks from '@/pages/PagePlaylistTracks.vue'
+import PagePlaylistTracksSpotify from '@/pages/PagePlaylistTracksSpotify.vue'
 import PagePodcast from '@/pages/PagePodcast.vue'
 import PagePodcasts from '@/pages/PagePodcasts.vue'
 import PageNowPlaying from '@/pages/PageNowPlaying.vue'
@@ -211,26 +211,26 @@ export const router = createRouter({
     {
       name: 'playlists',
       path: '/playlists',
-      redirect: { name: 'playlist', params: { id: 0 } }
+      redirect: { name: 'playlist-folder', params: { id: 0 } }
     },
     {
-      component: PagePlaylist,
+      component: PagePlaylistFolder,
       meta: { show_progress: true },
-      name: 'playlist',
+      name: 'playlist-folder',
       path: '/playlists/:id'
     },
-    {
-      component: PagePlaylistSpotify,
-      meta: { show_progress: true },
-      name: 'playlist-spotify',
-      path: '/playlists/spotify/:id'
-    },
     {
       component: PagePlaylistTracks,
       meta: { show_progress: true },
-      name: 'playlist-tracks',
+      name: 'playlist',
       path: '/playlists/:id/tracks'
     },
+    {
+      component: PagePlaylistTracksSpotify,
+      meta: { show_progress: true },
+      name: 'playlist-spotify',
+      path: '/playlists/spotify/:id/tracks'
+    },
     {
       component: PagePodcast,
       meta: { show_progress: true },