diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index ee3e0281..b8c11de4 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -61,8 +61,8 @@ export default {
     open_composer(composer) {
       this.selected_composer = composer
       this.$router.push({
-        name: 'ComposerAlbums',
-        params: { composer: composer.name }
+        name: 'music-composer-albums',
+        params: { name: composer.name }
       })
     },
 
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index df681ce8..748770d7 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -100,16 +100,16 @@ export default {
     open_albums() {
       this.$emit('close')
       this.$router.push({
-        name: 'ComposerAlbums',
-        params: { composer: this.composer.name }
+        name: 'music-composer-albums',
+        params: { name: this.composer.name }
       })
     },
 
     open_tracks() {
       this.show_details_modal = false
       this.$router.push({
-        name: 'ComposerTracks',
-        params: { composer: this.composer.name }
+        name: 'music-composer-tracks',
+        params: { name: this.composer.name }
       })
     }
   }
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index c177776c..85f43f1d 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -59,7 +59,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/music/composers"
+                :to="{ name: 'music-composers' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
diff --git a/web-src/src/pages/PageComposer.vue b/web-src/src/pages/PageComposerAlbums.vue
similarity index 92%
rename from web-src/src/pages/PageComposer.vue
rename to web-src/src/pages/PageComposerAlbums.vue
index 4bd00214..a2c9f8fd 100644
--- a/web-src/src/pages/PageComposer.vue
+++ b/web-src/src/pages/PageComposerAlbums.vue
@@ -47,16 +47,16 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupByList } from '@/lib/GroupByList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
 import webapi from '@/webapi'
-import { GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_composer(to.params.composer),
-      webapi.library_composer_albums(to.params.composer)
+      webapi.library_composer(to.params.name),
+      webapi.library_composer_albums(to.params.name)
     ])
   },
 
@@ -67,7 +67,7 @@ const dataObject = {
 }
 
 export default {
-  name: 'PageComposer',
+  name: 'PageComposerAlbums',
   components: {
     ContentWithHeading,
     ListAlbums,
@@ -98,8 +98,8 @@ export default {
   methods: {
     open_tracks() {
       this.$router.push({
-        name: 'ComposerTracks',
-        params: { composer: this.composer.name }
+        name: 'music-composer-tracks',
+        params: { name: this.composer.name }
       })
     },
 
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 2bd2e827..2c55e878 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -61,9 +61,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
@@ -72,8 +72,8 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_composer(to.params.composer),
-      webapi.library_composer_tracks(to.params.composer)
+      webapi.library_composer(to.params.name),
+      webapi.library_composer_tracks(to.params.name)
     ])
   },
 
@@ -153,8 +153,8 @@ export default {
     open_albums() {
       this.show_details_modal = false
       this.$router.push({
-        name: 'ComposerAlbums',
-        params: { composer: this.composer.name }
+        name: 'music-composer-album',
+        params: { name: this.composer.name }
       })
     },
 
diff --git a/web-src/src/pages/PageComposers.vue b/web-src/src/pages/PageComposers.vue
index 00aff010..95a230cc 100644
--- a/web-src/src/pages/PageComposers.vue
+++ b/web-src/src/pages/PageComposers.vue
@@ -21,11 +21,11 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsMusic from '@/components/TabsMusic.vue'
+import { GroupByList, byName } from '@/lib/GroupByList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListComposers from '@/components/ListComposers.vue'
+import TabsMusic from '@/components/TabsMusic.vue'
 import webapi from '@/webapi'
-import { GroupByList, byName } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -40,7 +40,7 @@ const dataObject = {
 
 export default {
   name: 'PageComposers',
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListComposers },
+  components: { ContentWithHeading, IndexButtonList, ListComposers, TabsMusic },
 
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue
index 36bf5dd1..5a4fca14 100644
--- a/web-src/src/pages/PageSearchLibrary.vue
+++ b/web-src/src/pages/PageSearchLibrary.vue
@@ -568,8 +568,8 @@ export default {
 
     open_composer(composer) {
       this.$router.push({
-        name: 'ComposerAlbums',
-        params: { composer: composer.name }
+        name: 'music-composer-albums',
+        params: { name: composer.name }
       })
     },
 
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 67913301..a1f2dee1 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -18,6 +18,9 @@ import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
 import PageBrowseSpotify from '@/pages/PageBrowseSpotify.vue'
 import PageBrowseSpotifyNewReleases from '@/pages/PageBrowseSpotifyNewReleases.vue'
 import PageBrowseSpotifyFeaturedPlaylists from '@/pages/PageBrowseSpotifyFeaturedPlaylists.vue'
+import PageComposerAlbums from '@/pages/PageComposerAlbums.vue'
+import PageComposerTracks from '@/pages/PageComposerTracks.vue'
+import PageComposers from '@/pages/PageComposers.vue'
 import PageFiles from '@/pages/PageFiles.vue'
 import PageGenre from '@/pages/PageGenre.vue'
 import PageGenreTracks from '@/pages/PageGenreTracks.vue'
@@ -33,9 +36,6 @@ import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
 import PageSettingsArtwork from '@/pages/PageSettingsArtwork.vue'
 import PageSettingsOnlineServices from '@/pages/PageSettingsOnlineServices.vue'
 import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
-import PageComposers from '@/pages/PageComposers.vue'
-import PageComposer from '@/pages/PageComposer.vue'
-import PageComposerTracks from '@/pages/PageComposerTracks.vue'
 import PageRadioStreams from '@/pages/PageRadioStreams.vue'
 import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
 import PageSearchSpotify from '@/pages/PageSearchSpotify.vue'
@@ -161,6 +161,24 @@ export const router = createRouter({
       name: 'music-spotify-new-releases',
       path: '/music/spotify/new-releases'
     },
+    {
+      component: PageComposerAlbums,
+      meta: { show_progress: true, has_index: true },
+      name: 'music-composer-albums',
+      path: '/music/composers/:name/albums'
+    },
+    {
+      component: PageComposerTracks,
+      meta: { has_index: true, show_progress: true },
+      name: 'music-composer-tracks',
+      path: '/music/composers/:name/tracks'
+    },
+    {
+      component: PageComposers,
+      meta: { has_index: true, has_tabs: true, show_progress: true },
+      name: 'music-composers',
+      path: '/music/composers'
+    },
     {
       component: PageFiles,
       meta: { show_progress: true },
@@ -185,24 +203,6 @@ export const router = createRouter({
       path: '/music/genres',
       name: 'music-genres'
     },
-    {
-      path: '/music/composers',
-      name: 'Composers',
-      component: PageComposers,
-      meta: { show_progress: true, has_tabs: true, has_index: true }
-    },
-    {
-      path: '/music/composers/:composer/albums',
-      name: 'ComposerAlbums',
-      component: PageComposer,
-      meta: { show_progress: true, has_index: true }
-    },
-    {
-      path: '/music/composers/:composer/tracks',
-      name: 'ComposerTracks',
-      component: PageComposerTracks,
-      meta: { show_progress: true, has_index: true }
-    },
     {
       component: PageNowPlaying,
       name: 'now-playing',