diff --git a/ui/src/App.js b/ui/src/App.js
index 9504f1cbb..0dc096966 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -16,9 +16,9 @@ const App = () => (
     layout={Layout}
     loginPage={Login}
   >
-    <Resource name="song" {...song} options={{ subMenu: 'library' }} />
-    <Resource name="album" {...album} options={{ subMenu: 'library' }} />
     <Resource name="artist" {...artist} options={{ subMenu: 'library' }} />
+    <Resource name="album" {...album} options={{ subMenu: 'library' }} />
+    <Resource name="song" {...song} options={{ subMenu: 'library' }} />
     <Resource name="user" {...user} />
   </Admin>
 )
diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js
index cc0cc79e7..92ad99e7a 100644
--- a/ui/src/album/AlbumList.js
+++ b/ui/src/album/AlbumList.js
@@ -34,8 +34,13 @@ const AlbumDetails = (props) => {
   )
 }
 
-const albumRowClick = (id, basePath, record) =>
-  `/song?filter={"artist":"${record.artist}","album":"${record.name}","album_id":"${record.id}"}&order=ASC&sort=trackNumber`
+const albumRowClick = (id, basePath, record) => {
+  const filter = { album: record.name, album_id: id }
+  if (!record.compilation) {
+    filter.artist = record.artist
+  }
+  return `/song?filter=${JSON.stringify(filter)}&order=ASC&sort=trackNumber`
+}
 
 const AlbumList = (props) => (
   <List
diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js
index 0b58cac55..ba5e7e3aa 100644
--- a/ui/src/artist/ArtistList.js
+++ b/ui/src/artist/ArtistList.js
@@ -15,8 +15,10 @@ const ArtistFilter = (props) => (
   </Filter>
 )
 
-const artistRowClick = (id, basePath, record) =>
-  `/album?filter={"artist":"${record.name}","artist_id":"${record.id}"}&order=ASC&sort=year`
+const artistRowClick = (id, basePath, record) => {
+  const filter = { artist_id: id }
+  return `/album?filter=${JSON.stringify(filter)}&order=ASC&sort=year`
+}
 
 const ArtistList = (props) => (
   <List