diff --git a/app/common/static/styles/_colours.scss b/app/common/static/styles/_colours.scss
index 3b42365..6e241e5 100644
--- a/app/common/static/styles/_colours.scss
+++ b/app/common/static/styles/_colours.scss
@@ -41,8 +41,10 @@ $collection-text-colour: $colour-near-black;
 $collection-background-hover-colour: $colour-orange;
 $collection-text-hover-colour: $colour-near-white;
 
-$mediacard-title-background-colour: $colour-black;
-$mediacard-title-text-colour: $colour-white;
+$mediacard-title-background-colour: $colour-near-black;
+$mediacard-title-text-colour: $colour-near-white;
+$mediacard-border-colour: $colour-near-white;
+$mediacard-border-hover-colour: $colour-orange;
 
 $box-error-background-colour: $colour-red;
 $box-error-text-colour: $colour-near-white;
diff --git a/app/common/static/styles/_template.scss b/app/common/static/styles/_template.scss
index d7e8bb4..f998137 100644
--- a/app/common/static/styles/_template.scss
+++ b/app/common/static/styles/_template.scss
@@ -106,19 +106,32 @@ main {
     }
 
     .mediacard {
+        a {
+            border-radius: 2px 2px 0 0;
+            display: block;
+            border: 3px $mediacard-border-colour solid;
+            &:hover {
+                border: 3px $mediacard-border-hover-colour solid;
+            }
+        }
         .card-title {
             padding: 3px 10px 3px 5px !important;
             margin: 5px !important;
-            line-height: 1.5rem;
-            font-size: 1.5rem;
+            line-height: 1.4rem;
+            font-size: 1.3rem;
             left: initial !important;
             right: 0 !important;
-            max-width: 75% !important;
-            opacity: 80%;
+            max-width: 80% !important;
             background-color: $mediacard-title-background-colour !important;
             color: $mediacard-title-text-colour !important;
             span {
                 font-size: 1rem;
+                line-height: 1rem;
+            }
+        }
+        .card-image {
+            img {
+                border-radius: 0 !important;
             }
         }
     }
diff --git a/app/sync/models.py b/app/sync/models.py
index 34282cf..dbfce5c 100644
--- a/app/sync/models.py
+++ b/app/sync/models.py
@@ -89,6 +89,16 @@ class Source(models.Model):
         SOURCE_TYPE_YOUTUBE_PLAYLIST: 'id',
     }
 
+    PUBLISHED_FIELD = {  # Field returned by indexing which contains the published date
+        SOURCE_TYPE_YOUTUBE_CHANNEL: 'upload_date',
+        SOURCE_TYPE_YOUTUBE_PLAYLIST: 'upload_date',
+    }
+
+    TITLE_FIELD = {  # Field returned by indexing which contains the media title
+        SOURCE_TYPE_YOUTUBE_CHANNEL: 'title',
+        SOURCE_TYPE_YOUTUBE_PLAYLIST: 'title',
+    }
+
     uuid = models.UUIDField(
         _('uuid'),
         primary_key=True,
@@ -443,7 +453,8 @@ class Media(models.Model):
 
     @property
     def title(self):
-        return self.loaded_metadata.get('title', '').strip()
+        k = self.source.TITLE_FIELD.get(self.source.source_type, '')
+        return self.loaded_metadata.get(k, '').strip()
 
     @property
     def name(self):
@@ -452,7 +463,8 @@ class Media(models.Model):
 
     @property
     def upload_date(self):
-        upload_date_str = self.loaded_metadata.get('upload_date', '').strip()
+        k = self.source.PUBLISHED_FIELD.get(self.source.source_type, '')
+        upload_date_str = self.loaded_metadata.get(k, '').strip()
         try:
             return datetime.strptime(upload_date_str, '%Y%m%d')
         except (AttributeError, ValueError) as e:
diff --git a/app/sync/templates/sync/media.html b/app/sync/templates/sync/media.html
index fa394b4..6c134c2 100644
--- a/app/sync/templates/sync/media.html
+++ b/app/sync/templates/sync/media.html
@@ -7,8 +7,8 @@
 <div class="row no-margin-bottom">
   {% for m in media %}
   <div class="col s12 m6 l4 xl3">
-    <a href="{% url 'sync:media-item' pk=m.pk %}" class="collection-item">
-      <div class="card mediacard">
+    <div class="card mediacard">
+      <a href="{% url 'sync:media-item' pk=m.pk %}" class="">
         <div class="card-image">
           <img src="{% if m.thumb %}{% url 'sync:media-thumb' pk=m.pk %}{% else %}{% static 'images/nothumb.png' %}{% endif %}">
           <span class="card-title truncate">{{ m.source }}<br>
@@ -16,8 +16,8 @@
             <span>{{ m.published|date:'Y-m-d' }}</span>
           </span>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
   {% empty %}
   <div class="col s12">
diff --git a/app/sync/views.py b/app/sync/views.py
index 4b59f9f..4a40580 100644
--- a/app/sync/views.py
+++ b/app/sync/views.py
@@ -338,7 +338,11 @@ class MediaThumbView(DetailView):
             thumb = b64decode('R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAA'
                               'AAAABAAEAAAICTAEAOw==')
             content_type = 'image/gif'
-        return HttpResponse(thumb, content_type=content_type)
+        response = HttpResponse(thumb, content_type=content_type)
+        # Thumbnail media is never updated so we can ask the browser to cache it
+        # for ages, 604800 = 7 days
+        response['Cache-Control'] = 'public, max-age=604800'
+        return response
 
 
 class MediaItemView(DetailView):