diff --git a/front/src/components/common/Duration.vue b/front/src/components/common/Duration.vue
new file mode 100644
index 0000000000000000000000000000000000000000..380e43e5e331c5d9adc24c4b2e15d168d048f310
--- /dev/null
+++ b/front/src/components/common/Duration.vue
@@ -0,0 +1,22 @@
+<template>
+  <span>
+    <translate
+      v-if="durationData.hours > 0"
+      :translate-params="{minutes: durationData.minutes, hours: durationData.hours}">%{ hours }h %{ minutes } min</translate>
+    <translate
+      v-else
+      :translate-params="{minutes: durationData.minutes}">%{ minutes } min</translate>
+  </span>
+</template>
+<script>
+import {secondsToObject} from '@/filters'
+
+export default {
+  props: ['seconds'],
+  computed: {
+    durationData () {
+      return secondsToObject(this.seconds)
+    }
+  }
+}
+</script>
diff --git a/front/src/components/globals.js b/front/src/components/globals.js
index 4f7fcae5fabaaf0df49ea6197826999b16effe64..6865ac1bc55f74c20914169d48560b96759ec852 100644
--- a/front/src/components/globals.js
+++ b/front/src/components/globals.js
@@ -12,6 +12,10 @@ import UserLink from '@/components/common/UserLink'
 
 Vue.component('user-link', UserLink)
 
+import Duration from '@/components/common/Duration'
+
+Vue.component('duration', Duration)
+
 import DangerousButton from '@/components/common/DangerousButton'
 
 Vue.component('dangerous-button', DangerousButton)
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index 910be850adff06d659b2806ba3b8764e4193307a..987570b057400aacbd500d82818f04134a32b472 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -12,6 +12,9 @@
       <div class="meta">
         <human-date :date="playlist.modification_date" />
       </div>
+      <div class="meta">
+        <duration :seconds="playlist.duration" />
+      </div>
     </div>
     <div class="extra content">
       <user-link :user="playlist.user" class="left floated" />
@@ -30,7 +33,6 @@
 
 <script>
 import PlayButton from '@/components/audio/PlayButton'
-import {hashCode, intToRGB} from '@/utils/color'
 
 export default {
   props: ['playlist'],
@@ -44,11 +46,8 @@ export default {
         url = self.$store.getters['instance/absoluteUrl'](url)
         return `url("${url}")`
       }).slice(0, 4)
-      let bgColor = intToRGB(hashCode(this.playlist.name + this.playlist.user.username))
-
       return {
-        'background-image': urls.join(', '),
-        'background-color': `#${bgColor}`
+        'background-image': urls.join(', ')
       }
     }
   }
@@ -59,6 +58,7 @@ export default {
 <style scoped>
 
 .attached.button {
+  background-color: rgb(243, 244, 245);
   background-size: 25% ;
   background-repeat: no-repeat;
   background-origin: border-box;
diff --git a/front/src/filters.js b/front/src/filters.js
index 11751559961c393b9d5bb3369aba199f8badf34a..878b3c9f2813756914afdbe62c8f4459768b61ac 100644
--- a/front/src/filters.js
+++ b/front/src/filters.js
@@ -28,6 +28,16 @@ export function ago (date) {
 
 Vue.filter('ago', ago)
 
+export function secondsToObject (seconds) {
+  let m = moment.duration(seconds, 'seconds')
+  return {
+    minutes: m.minutes(),
+    hours: parseInt(m.asHours())
+  }
+}
+
+Vue.filter('secondsToObject', secondsToObject)
+
 export function momentFormat (date, format) {
   format = format || 'lll'
   return moment(date).format(format)
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 3fd4730bc58cf26c5197b19dd9e258ced8eb657e..f9d2327759f814ff582769534cf9edcabffc5b04 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -9,14 +9,15 @@
           <i class="circular inverted list yellow icon"></i>
           <div class="content">
             {{ playlist.name }}
-            <translate
-              tag="div"
-              class="sub header"
-              translate-plural="Playlist containing %{ count } tracks, by %{ username }"
-              :translate-n="playlistTracks.length"
-              :translate-params="{count: playlistTracks.length, username: playlist.user.username}">
-              Playlist containing %{ count } track, by %{ username }
-            </translate>
+            <div class="sub header">
+              <translate
+                translate-plural="Playlist containing %{ count } tracks, by %{ username }"
+                :translate-n="playlistTracks.length"
+                :translate-params="{count: playlistTracks.length, username: playlist.user.username}">
+                Playlist containing %{ count } track, by %{ username }
+              </translate><br>
+              <duration :seconds="playlist.duration" />
+            </div>
           </div>
         </h2>
         <div class="ui hidden divider"></div>