diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index e45d3009..16759ad7 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -23,6 +23,12 @@
                   composer.track_count
                 }}</a>
               </p>
+              <p>
+                <span class="heading">Length</span>
+                <span class="title is-6">{{
+                  $filters.duration(composer.length_ms)
+                }}</span>
+              </p>
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
diff --git a/web-src/src/pages/PageComposer.vue b/web-src/src/pages/PageComposer.vue
index 5bf8da5e..95421ae9 100644
--- a/web-src/src/pages/PageComposer.vue
+++ b/web-src/src/pages/PageComposer.vue
@@ -3,7 +3,7 @@
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4">
-          {{ name }}
+          {{ composer.name }}
         </p>
       </template>
       <template #heading-right>
@@ -24,14 +24,16 @@
       </template>
       <template #content>
         <p class="heading has-text-centered-mobile">
-          {{ albums_list.total }} albums |
-          <a class="has-text-link" @click="open_tracks">tracks</a>
+          {{ composer.album_count }} albums |
+          <a class="has-text-link" @click="open_tracks"
+            >{{ composer.track_count }} tracks</a
+          >
         </p>
         <list-albums :albums="albums_list" :hide_group_title="true" />
 
         <modal-dialog-composer
           :show="show_composer_details_modal"
-          :composer="{ name: name }"
+          :composer="composer"
           @close="show_composer_details_modal = false"
         />
       </template>
@@ -48,12 +50,15 @@ import { GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load: function (to) {
-    return webapi.library_composer(to.params.composer)
+    return Promise.all([
+      webapi.library_composer(to.params.composer),
+      webapi.library_composer_albums(to.params.composer)
+    ])
   },
 
   set: function (vm, response) {
-    vm.name = vm.$route.params.composer
-    vm.albums_list = new GroupByList(response.data.albums)
+    vm.composer = response[0].data
+    vm.albums_list = new GroupByList(response[1].data.albums)
   }
 }
 
@@ -80,7 +85,7 @@ export default {
 
   data() {
     return {
-      name: '',
+      composer: {},
       albums_list: new GroupByList(),
       show_composer_details_modal: false
     }
@@ -90,13 +95,13 @@ export default {
     open_tracks: function () {
       this.$router.push({
         name: 'ComposerTracks',
-        params: { composer: this.name }
+        params: { composer: this.composer.name }
       })
     },
 
     play: function () {
       webapi.player_play_expression(
-        'composer is "' + this.name + '" and media_kind is music',
+        'composer is "' + this.composer.name + '" and media_kind is music',
         true
       )
     }
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index d8ba4f3a..def23664 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -3,7 +3,7 @@
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4">
-          {{ composer }}
+          {{ composer.name }}
         </p>
       </template>
       <template #heading-right>
@@ -24,13 +24,15 @@
       </template>
       <template #content>
         <p class="heading has-text-centered-mobile">
-          <a class="has-text-link" @click="open_albums">albums</a> |
-          {{ tracks.total }} tracks
+          <a class="has-text-link" @click="open_albums"
+            >{{ composer.album_count }} albums</a
+          >
+          | {{ composer.track_count }} tracks
         </p>
         <list-tracks :tracks="tracks.items" :expression="play_expression" />
         <modal-dialog-composer
           :show="show_composer_details_modal"
-          :composer="{ name: composer }"
+          :composer="composer"
           @close="show_composer_details_modal = false"
         />
       </template>
@@ -46,12 +48,15 @@ import webapi from '@/webapi'
 
 const dataObject = {
   load: function (to) {
-    return webapi.library_composer_tracks(to.params.composer)
+    return Promise.all([
+      webapi.library_composer(to.params.composer),
+      webapi.library_composer_tracks(to.params.composer)
+    ])
   },
 
   set: function (vm, response) {
-    vm.composer = vm.$route.params.composer
-    vm.tracks = response.data.tracks
+    vm.composer = response[0].data
+    vm.tracks = response[1].data.tracks
   }
 }
 
@@ -79,7 +84,7 @@ export default {
   data() {
     return {
       tracks: { items: [] },
-      composer: '',
+      composer: {},
 
       show_composer_details_modal: false
     }
@@ -87,7 +92,7 @@ export default {
 
   computed: {
     play_expression() {
-      return 'composer is "' + this.composer + '" and media_kind is music'
+      return 'composer is "' + this.composer.name + '" and media_kind is music'
     }
   },
 
@@ -96,7 +101,7 @@ export default {
       this.show_details_modal = false
       this.$router.push({
         name: 'ComposerAlbums',
-        params: { composer: this.composer }
+        params: { composer: this.composer.name }
       })
     },
 
diff --git a/web-src/src/webapi/index.js b/web-src/src/webapi/index.js
index fadc7319..554f09e7 100644
--- a/web-src/src/webapi/index.js
+++ b/web-src/src/webapi/index.js
@@ -338,6 +338,10 @@ export default {
   },
 
   library_composer(composer) {
+    return axios.get(`./api/library/composers/${encodeURIComponent(composer)}`)
+  },
+
+  library_composer_albums(composer) {
     const params = {
       type: 'albums',
       media_kind: 'music',