diff --git a/web-src/src/components/CoverPlaceholder.vue b/web-src/src/components/CoverArtwork.vue
similarity index 68%
rename from web-src/src/components/CoverPlaceholder.vue
rename to web-src/src/components/CoverArtwork.vue
index 90eb3166..42642a5f 100644
--- a/web-src/src/components/CoverPlaceholder.vue
+++ b/web-src/src/components/CoverArtwork.vue
@@ -1,14 +1,27 @@
 <template>
-  <img :src="dataURI" :alt="alt_text">
+  <figure>
+    <img
+      v-show="artwork_visible"
+      :src="artwork_url_with_size"
+      @load="artwork_loaded"
+      @error="artwork_error"
+      @click="$emit('click')">
+    <img
+      v-show="!artwork_visible"
+      :src="dataURI"
+      :alt="alt_text"
+      @click="$emit('click')">
+  </figure>
 </template>
 
 <script>
+import webapi from '@/webapi'
 import SVGRenderer from '@/lib/SVGRenderer'
 import stringToColor from 'string-to-color'
 
 export default {
-  name: 'CoverPlaceholder',
-  props: ['artist', 'album'],
+  name: 'CoverArtwork',
+  props: ['artist', 'album', 'artwork_url'],
 
   data () {
     return {
@@ -17,11 +30,17 @@ export default {
       height: 600,
       font_family: 'sans-serif',
       font_size: 200,
-      font_weight: 600
+      font_weight: 600,
+
+      artwork_visible: false
     }
   },
 
   computed: {
+    artwork_url_with_size: function () {
+      return webapi.artwork_url_append_size_params(this.artwork_url)
+    },
+
     alt_text () {
       return this.artist + ' - ' + this.album
     },
@@ -76,6 +95,16 @@ export default {
     dataURI () {
       return this.svg.render(this.rendererParams)
     }
+  },
+
+  methods: {
+    artwork_loaded: function () {
+      this.artwork_visible = true
+    },
+
+    artwork_error: function () {
+      this.artwork_visible = false
+    }
   }
 }
 </script>
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 4bfcd4dc..e9f0d69b 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -6,14 +6,16 @@
         <div class="modal-content fd-modal-card">
           <div class="card">
             <div class="card-content">
-              <figure class="image is-square fd-has-margin-bottom" v-show="artwork_visible">
-                <img :src="artwork_url" @load="artwork_loaded" @error="artwork_error" class="fd-has-shadow">
-              </figure>
+              <cover-artwork
+                :artwork_url="album.artwork_url"
+                :artist="album.artist"
+                :album="album.name"
+                class="image is-square fd-has-margin-bottom fd-has-shadow" />
               <p class="title is-4">
                 <a class="has-text-link" @click="open_album">{{ album.name }}</a>
               </p>
               <div class="buttons" v-if="media_kind === 'podcast'">
-                <a class="button is-small" v-if="new_tracks > 0" @click="mark_played">Mark as played</a>
+                <a class="button is-small" @click="mark_played">Mark as played</a>
                 <a class="button is-small" @click="$emit('remove_podcast')">Remove podcast</a>
               </div>
               <div class="content is-small">
@@ -51,10 +53,12 @@
 </template>
 
 <script>
+import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbum',
+  components: { CoverArtwork },
   props: ['show', 'album', 'media_kind', 'new_tracks'],
 
   data () {
diff --git a/web-src/src/mystyles.css b/web-src/src/mystyles.css
index 67f65675..a29fa469 100644
--- a/web-src/src/mystyles.css
+++ b/web-src/src/mystyles.css
@@ -113,6 +113,7 @@ section.fd-tabs-section + section.fd-content {
   height: calc(100vh - 3.25rem - 3.25rem);
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 
 .fd-is-fullheight .fd-is-expanded {
@@ -131,6 +132,7 @@ section.fd-tabs-section + section.fd-content {
   width: 100%;
   height: 100%;
   object-fit: contain;
+  object-position: bottom;
   filter: drop-shadow(0px 0px 1px rgba(0,0,0,.3)) drop-shadow(0px 0px 10px rgba(0,0,0,.3));
 }
 
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index 28cb2d34..5c1bb757 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -2,19 +2,11 @@
   <section>
     <div v-if="now_playing.id > 0" class="fd-is-fullheight">
       <div class="fd-is-expanded">
-        <figure @click="open_dialog(now_playing)" class="fd-cover-image">
-          <img
-            v-show="artwork_visible"
-            :src="artwork_url"
-            class="fd-has-action"
-            @load="artwork_loaded"
-            @error="artwork_error">
-          <cover-placeholder
-            v-show="!artwork_visible"
-            :artist="now_playing.artist"
-            :album="now_playing.album"
-            class="fd-has-action" />
-        </figure>
+        <cover-artwork @click="open_dialog(now_playing)"
+          :artwork_url="now_playing.artwork_url"
+          :artist="now_playing.artist"
+          :album="now_playing.album"
+          class="fd-cover-image fd-has-action" />
       </div>
       <div class="fd-has-padding-left-right">
         <div class="container has-text-centered">
@@ -68,19 +60,18 @@
 <script>
 import ModalDialogQueueItem from '@/components/ModalDialogQueueItem'
 import RangeSlider from 'vue-range-slider'
-import CoverPlaceholder from '@/components/CoverPlaceholder'
+import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 
 export default {
   name: 'PageNowPlaying',
-  components: { ModalDialogQueueItem, RangeSlider, CoverPlaceholder },
+  components: { ModalDialogQueueItem, RangeSlider, CoverArtwork },
 
   data () {
     return {
       item_progress_ms: 0,
       interval_id: 0,
-      artwork_visible: false,
 
       show_details_modal: false,
       selected_item: {}
@@ -113,10 +104,6 @@ export default {
       return this.$store.getters.now_playing
     },
 
-    artwork_url: function () {
-      return webapi.artwork_url_append_size_params(this.now_playing.artwork_url)
-    },
-
     settings_option_show_composer_now_playing () {
       return this.$store.getters.settings_option_show_composer_now_playing
     },
@@ -150,14 +137,6 @@ export default {
       })
     },
 
-    artwork_loaded: function () {
-      this.artwork_visible = true
-    },
-
-    artwork_error: function () {
-      this.artwork_visible = false
-    },
-
     open_dialog: function (item) {
       this.selected_item = item
       this.show_details_modal = true