--- a/cms/app-client/app/styles/app.scss	Mon Jul 04 17:56:05 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Mon Jul 04 19:21:37 2016 +0200
@@ -2,6 +2,10 @@
     background-color: #f5f5f5;
 }
 
+button {
+    font-family: sans-serif;
+}
+
 #corpus-app {
     font-family: sans-serif;
     font-size: 12px;

--- a/cms/app-client/app/styles/components/playlist-component.scss	Mon Jul 04 17:56:05 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Mon Jul 04 19:21:37 2016 +0200
@@ -34,31 +34,65 @@
 
 .playlist-component ul li .tools {
     float: right;
+    color: #878e94;
 }
 
-.playlist-component ul li button,
-.playlist-component ul li .fa {
-    color: #878e94;
+.playlist-component ul li .tools button,
+.playlist-component ul li .tools .fa {
     border: 2px solid #878e94;
     cursor: pointer;
+    color: #878e94;
+}
+
+.playlist-component ul li .tools button:hover,
+.playlist-component ul li .tools .fa:hover {
+    background-color: #878e94;
+    color: #fbfbfb;
+}
+
+.playlist-component ul li.playing .tools button:hover,
+.playlist-component ul li.playing .tools .fa:hover {
+    color: #becfd4;
 }
 
-.playlist-component ul li button {
+.playlist-component ul li .tools button {
+    font-size: 12px;
     background-color: transparent;
+    line-height: 20px;
+    padding: 0 10px;
+    margin-top: 10px;
+    float: right;
+    width: 100%;
 }
 
-.playlist-component ul li .fa {
+.playlist-component ul li .tools .time {
+    display: block;
+    line-height: 24px;
+}
+
+.playlist-component ul li .tools .fa {
     border-radius: 100%;
     width: 24px;
     height: 24px;
     line-height: 20px;
-    display: block;
+    float: right;
+    margin-left: 15px;
+    display: inline-block;
+}
+
+.playlist-component ul li .tools .fa-play::before {
+    margin-left: 3px;
 }
 
-.playlist-component ul li .fa-play::before {
-    margin-left: 2px;
+.playlist-component ul li .title,
+.playlist-component ul li .author,
+.playlist-component ul li .language {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    padding-right: 30px;
 }
-
 .playlist-component ul li .title {
     font-weight: bold;
 }

--- a/cms/app-client/app/templates/components/playlist-component.hbs	Mon Jul 04 17:56:05 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Mon Jul 04 19:21:37 2016 +0200
@@ -4,10 +4,18 @@
     <li id="{{document.id}}" class="{{if (eq player.item document.id) 'playing'}}">
         
         <div class="tools">
-            <i class="fa{{if (ifAnd (eq player.playing true) (eq player.item document.id)) ' fa-pause' ' fa-play'}}" {{ action 'setItem' document.id }}>Play</i>
+            <span class="time">
+            {{#if (ifAnd (eq player.playing true) (eq player.item document.id))}}
+                <i class="fa fa-pause" {{ action 'setItem' document.id }}>Pause</i>
+            {{else}}
+                <i class="fa fa-play" {{ action 'setItem' document.id }}>Play</i>
+            {{/if}}
+                {{ to-minutes document.duration }}
+            </span>
             <button{{action 'openNotice' document}}>Notice</button>
         </div>
         <span class="title">{{ document.title }}</span>
+        <span class="author">{{author document.publishers}}</span>
         {{doc-language class="language" url=document.language}}
     </li>
     {{/each}}

--- a/cms/app-client/mirage/serializers/sparse-document.js	Mon Jul 04 17:56:05 2016 +0200
+++ b/cms/app-client/mirage/serializers/sparse-document.js	Mon Jul 04 19:21:37 2016 +0200
@@ -2,5 +2,5 @@
 import BaseSerializer from './application';
 
 export default BaseSerializer.extend({
-    attrs: ['id', 'title', 'language', 'url', 'issued', 'modified']
+    attrs: ['id', 'title', 'language', 'url', 'issued', 'modified', 'publishers', 'mediaArray']
 });