diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index 86e3bff1..57f89a5c 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -11,6 +11,22 @@
                   genre.name
                 }}</a>
               </p>
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Albums</span>
+                  <span class="title is-6">{{ genre.album_count }}</span>
+                </p>
+                <p>
+                  <span class="heading">Tracks</span>
+                  <span class="title is-6">{{ genre.track_count }}</span>
+                </p>
+                <p>
+                  <span class="heading">Length</span>
+                  <span class="title is-6">{{
+                    $filters.duration(genre.length_ms)
+                  }}</span>
+                </p>
+              </div>
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
diff --git a/web-src/src/pages/PageGenre.vue b/web-src/src/pages/PageGenre.vue
index 5026f25b..11eeee0f 100644
--- a/web-src/src/pages/PageGenre.vue
+++ b/web-src/src/pages/PageGenre.vue
@@ -6,7 +6,7 @@
       </template>
       <template #heading-left>
         <p class="title is-4">
-          {{ name }}
+          {{ genre.name }}
         </p>
       </template>
       <template #heading-right>
@@ -27,13 +27,15 @@
       </template>
       <template #content>
         <p class="heading has-text-centered-mobile">
-          {{ albums_list.total }} albums |
-          <a class="has-text-link" @click="open_tracks">tracks</a>
+          {{ genre.album_count }} albums |
+          <a class="has-text-link" @click="open_tracks"
+            >{{ genre.track_count }} tracks</a
+          >
         </p>
         <list-albums :albums="albums_list" />
         <modal-dialog-genre
           :show="show_genre_details_modal"
-          :genre="{ name: name }"
+          :genre="genre"
           @close="show_genre_details_modal = false"
         />
       </template>
@@ -51,12 +53,15 @@ import { bySortName, GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load: function (to) {
-    return webapi.library_genre(to.params.genre)
+    return Promise.all([
+      webapi.library_genre(to.params.genre),
+      webapi.library_genre_albums(to.params.genre)
+    ])
   },
 
   set: function (vm, response) {
-    vm.name = vm.$route.params.genre
-    vm.albums_list = new GroupByList(response.data.albums)
+    vm.genre = response[0].data
+    vm.albums_list = new GroupByList(response[1].data.albums)
     vm.albums_list.group(bySortName('name_sort'))
   }
 }
@@ -89,7 +94,7 @@ export default {
 
   data() {
     return {
-      name: '',
+      genre: {},
       albums_list: new GroupByList(),
 
       show_genre_details_modal: false
@@ -99,12 +104,15 @@ export default {
   methods: {
     open_tracks: function () {
       this.show_details_modal = false
-      this.$router.push({ name: 'GenreTracks', params: { genre: this.name } })
+      this.$router.push({
+        name: 'GenreTracks',
+        params: { genre: this.genre.name }
+      })
     },
 
     play: function () {
       webapi.player_play_expression(
-        'genre is "' + this.name + '" and media_kind is music',
+        'genre is "' + this.genre.name + '" and media_kind is music',
         true
       )
     }
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 7b92052d..985c5ce4 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -6,7 +6,7 @@
       </template>
       <template #heading-left>
         <p class="title is-4">
-          {{ genre }}
+          {{ genre.name }}
         </p>
       </template>
       <template #heading-right>
@@ -27,13 +27,15 @@
       </template>
       <template #content>
         <p class="heading has-text-centered-mobile">
-          <a class="has-text-link" @click="open_genre">albums</a> |
-          {{ tracks.total }} tracks
+          <a class="has-text-link" @click="open_genre"
+            >{{ genre.album_count }} albums</a
+          >
+          | {{ genre.track_count }} tracks
         </p>
         <list-tracks :tracks="tracks.items" :expression="expression" />
         <modal-dialog-genre
           :show="show_genre_details_modal"
-          :genre="{ name: genre }"
+          :genre="genre"
           @close="show_genre_details_modal = false"
         />
       </template>
@@ -50,12 +52,15 @@ import webapi from '@/webapi'
 
 const dataObject = {
   load: function (to) {
-    return webapi.library_genre_tracks(to.params.genre)
+    return Promise.all([
+      webapi.library_genre(to.params.genre),
+      webapi.library_genre_tracks(to.params.genre)
+    ])
   },
 
   set: function (vm, response) {
-    vm.genre = vm.$route.params.genre
-    vm.tracks = response.data.tracks
+    vm.genre = response[0].data
+    vm.tracks = response[1].data.tracks
   }
 }
 
@@ -102,14 +107,14 @@ export default {
     },
 
     expression() {
-      return 'genre is "' + this.genre + '" and media_kind is music'
+      return 'genre is "' + this.genre.name + '" and media_kind is music'
     }
   },
 
   methods: {
     open_genre: function () {
       this.show_details_modal = false
-      this.$router.push({ name: 'Genre', params: { genre: this.genre } })
+      this.$router.push({ name: 'Genre', params: { genre: this.genre.name } })
     },
 
     play: function () {
diff --git a/web-src/src/webapi/index.js b/web-src/src/webapi/index.js
index 5266345c..fadc7319 100644
--- a/web-src/src/webapi/index.js
+++ b/web-src/src/webapi/index.js
@@ -297,6 +297,10 @@ export default {
   },
 
   library_genre(genre) {
+    return axios.get(`./api/library/genres/${encodeURIComponent(genre)}`)
+  },
+
+  library_genre_albums(genre) {
     const genreParams = {
       type: 'albums',
       media_kind: 'music',