diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index ccf7f3ad..b5b60003 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -1,23 +1,23 @@
 <template>
   <div
     v-for="playlist in playlists"
-    :key="playlist.id"
+    :key="playlist.itemId"
     class="media"
     :playlist="playlist"
-    @click="open_playlist(playlist)"
+    @click="open_playlist(playlist.item)"
   >
     <figure class="media-left fd-has-action">
       <span class="icon">
-        <mdicon :name="icon_name(playlist)" size="16" />
+        <mdicon :name="icon_name(playlist.item)" size="16" />
       </span>
     </figure>
     <div class="media-content fd-has-action is-clipped">
       <h1 class="title is-6">
-        {{ playlist.name }}
+        {{ playlist.item.name }}
       </h1>
     </div>
     <div class="media-right">
-      <a @click.prevent.stop="open_dialog(playlist)">
+      <a @click.prevent.stop="open_dialog(playlist.item)">
         <span class="icon has-text-dark"
           ><mdicon name="dots-vertical" size="16"
         /></span>
diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue
index 7ea0f473..2f62c459 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -20,6 +20,10 @@
                   <span class="heading">Type</span>
                   <span class="title is-6">{{ playlist.type }}</span>
                 </p>
+                <p v-if="!playlist.folder">
+                  <span class="heading">Track count</span>
+                  <span class="title is-6">{{ playlist.item_count }}</span>
+                </p>
               </div>
             </div>
             <footer v-if="!playlist.folder" class="card-footer">
diff --git a/web-src/src/pages/PagePlaylists.vue b/web-src/src/pages/PagePlaylists.vue
index ffae204f..4443da4d 100644
--- a/web-src/src/pages/PagePlaylists.vue
+++ b/web-src/src/pages/PagePlaylists.vue
@@ -4,10 +4,10 @@
       <p class="title is-4">
         {{ playlist.name }}
       </p>
-      <p class="heading">{{ playlists.total }} playlists</p>
+      <p class="heading">{{ playlists.count }} playlists</p>
     </template>
     <template #content>
-      <list-playlists :playlists="playlists.items" />
+      <list-playlists :playlists="playlists" />
     </template>
   </content-with-heading>
 </template>
@@ -16,6 +16,7 @@
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListPlaylists from '@/components/ListPlaylists.vue'
 import webapi from '@/webapi'
+import { GroupByList, noop } from '@/lib/GroupByList'
 
 const dataObject = {
   load: function (to) {
@@ -27,7 +28,7 @@ const dataObject = {
 
   set: function (vm, response) {
     vm.playlist = response[0].data
-    vm.playlists = response[1].data
+    vm.playlists_list = new GroupByList(response[1].data)
   }
 }
 
@@ -51,7 +52,25 @@ export default {
   data() {
     return {
       playlist: {},
-      playlists: {}
+      playlists_list: new GroupByList()
+    }
+  },
+
+  computed: {
+    radio_playlists() {
+      return this.$store.state.config.radio_playlists
+    },
+
+    playlists() {
+      this.playlists_list.group(noop(), [
+        (playlist) =>
+          playlist.folder ||
+          this.radio_playlists ||
+          playlist.stream_count === 0 ||
+          playlist.item_count > playlist.stream_count
+      ])
+
+      return this.playlists_list
     }
   }
 }