diff --git a/dev.yml b/dev.yml
index 469606bf07df2558837dde3db572d1d4991a9622..25ba6b331154289e7e284b522442a67bb0861756 100644
--- a/dev.yml
+++ b/dev.yml
@@ -6,9 +6,9 @@ services:
     build:
       dockerfile: ./docker/Dockerfile.dev
       context: .
+    env_file: .env
     environment:
       - "HOST=0.0.0.0"
-      - "BACKEND_URL=http://localhost:6001"
     ports:
       - "8080:8080"
     volumes:
diff --git a/src/App.vue b/src/App.vue
index e9101a7be50e4869af11b44051d7f9b91060f7fd..9472956f8f392d05745e9a6d27ce575d167256e6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,4 +34,8 @@ export default {
 .ui.small.text.container {
   max-width: 500px !important;
 }
+
+.button.icon.tiny {
+    padding: 0.5em !important;
+}
 </style>
diff --git a/src/components/audio/album/Card.vue b/src/components/audio/album/Card.vue
index 8c102fd46772de951fae5730f65990e37a78fc86..05a84ad242eb5aafe20b61a39200b139c8a61254 100644
--- a/src/components/audio/album/Card.vue
+++ b/src/components/audio/album/Card.vue
@@ -11,7 +11,26 @@
             {{ album.artist.name }}
           </router-link>
         </div>
-        <div class="description">
+        <div class="description" v-if="mode === 'rich'">
+          <table class="ui very basic fixed single line compact table">
+            <tbody>
+              <tr v-for="track in tracks">
+                <td>
+                  <button @click="queue.append(track)" class="ui tiny icon button">
+                    <i class="play icon"></i>
+                  </button>
+                </td>
+                <td colspan="6">{{ track.title }}</td>
+                <td>
+                  <track-favorite-icon :track="track"></track-favorite-icon>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="center aligned segment" v-if="album.tracks.length > initialTracks">
+            <em v-if="!showAllTracks" @click="showAllTracks = true" class="expand">Show {{ album.tracks.length - initialTracks }} more tracks</em>
+            <em v-else @click="showAllTracks = false" class="expand">Collapse</em>
+          </div>
         </div>
       </div>
       <div class="extra content">
@@ -30,19 +49,47 @@
 <script>
 import queue from '@/audio/queue'
 import backend from '@/audio/backend'
+import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
 
 export default {
-  props: ['album'],
+  props: {
+    album: {type: Object},
+    mode: {type: String, default: 'simple'}
+  },
+  components: {
+    TrackFavoriteIcon
+  },
   data () {
     return {
       backend: backend,
-      queue: queue
+      queue: queue,
+      initialTracks: 4,
+      showAllTracks: false
+    }
+  },
+  computed: {
+    tracks () {
+      if (this.showAllTracks) {
+        return this.album.tracks
+      }
+      return this.album.tracks.slice(0, this.initialTracks)
     }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
 
+tr {
+  .favorite-icon:not(.favorited) {
+    display: none;
+  }
+  &:hover .favorite-icon {
+    display: inherit;
+  }
+}
+.expand {
+  cursor: pointer;
+}
 </style>
diff --git a/src/components/audio/artist/Card.vue b/src/components/audio/artist/Card.vue
index 2d937cc66fb263124317fabf259ebcea57a85fd1..64cc4688c3e63884ba483b5b22637b399ffd2806 100644
--- a/src/components/audio/artist/Card.vue
+++ b/src/components/audio/artist/Card.vue
@@ -7,7 +7,7 @@
           </router-link>
         </div>
         <div class="description">
-          <table class="ui compact very basic fixed single line  table">
+          <table class="ui compact very basic fixed single line table">
             <tbody>
               <tr v-for="album in artist.albums.slice(0, 3)">
                 <td>
diff --git a/src/components/audio/track/Table.vue b/src/components/audio/track/Table.vue
index e89ea1eb20281ddd630b63e4aad93a64c0d832be..9e64d9caca297176de3238794579d100d85c4aed 100644
--- a/src/components/audio/track/Table.vue
+++ b/src/components/audio/track/Table.vue
@@ -13,7 +13,7 @@
     <tbody>
       <tr v-for="track in tracks">
         <td>
-          <button @click="queue.append(track)" class="ui tiny teal icon button">
+          <button @click="queue.append(track)" class="ui tiny icon button">
             <i class="play icon"></i>
           </button>
         </td>
diff --git a/src/components/browse/Artist.vue b/src/components/browse/Artist.vue
index 9cf90a8f815fe8ce48904af1f570cdd6268518bd..04d7d680416fe2b0dee9a7152dae117172b7e61b 100644
--- a/src/components/browse/Artist.vue
+++ b/src/components/browse/Artist.vue
@@ -27,8 +27,10 @@
         </a>
       </div>
       <h2>Albums by this artist</h2>
-      <div class="ui cards">
-        <album-card :album="album" :key="album.id" v-for="album in albums"></album-card>
+      <div class="ui stackable three column grid">
+        <div class="column" :key="album.id" v-for="album in albums">
+          <album-card :mode="'rich'" class="fluid" :album="album"></album-card>
+        </div>
       </div>
     </template>
   </div>
diff --git a/src/components/favorites/TrackFavoriteIcon.vue b/src/components/favorites/TrackFavoriteIcon.vue
index 23051a5a80132ab3d8cf72acfe7f03702c454a71..d7b765c3fe935a72f0bae9f301247d8d482ef88f 100644
--- a/src/components/favorites/TrackFavoriteIcon.vue
+++ b/src/components/favorites/TrackFavoriteIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <i @click="favoriteTracks.set(track.id, !isFavorite)" :class="['heart', {'pink': isFavorite}, 'icon']" :title="title"></i>
+  <i @click="favoriteTracks.set(track.id, !isFavorite)" :class="['favorite-icon', 'heart', {'pink': isFavorite}, {'favorited': isFavorite}, 'icon']" :title="title"></i>
 </template>
 
 <script>