diff --git a/static/src/scss/_content.scss b/static/src/scss/_content.scss
index 5ab750d..eb47936 100644
--- a/static/src/scss/_content.scss
+++ b/static/src/scss/_content.scss
@@ -19,23 +19,12 @@ section.content {
 }
 
 .content-details {
-  .tag {
-    font-size: inherit;
-  }
+  .icon-text {
+    margin-right: $icon-text-spacing * 3;
+    align-items: center;
 
-  .control {
-    font-size: inherit;
-
-    &:not(:last-child) {
-      margin-right: 1rem !important;
-    }
-
-    &.page-tags {
-      font-family: $family-code;
-
-      .tag:not(:first-child) + .tag {
-        padding-left: 0;
-      }
+    span:not(.icon) + span {
+      margin-left: $icon-text-spacing;
     }
   }
 }
@@ -46,17 +35,6 @@ section.content {
   }
 }
 
-.tags.has-addons {
-  @include dark-mode {
-    filter: invert(100%);
-
-    a {
-      // HACK: By inverting the colour, the above invert ends up showing the correct colour
-      color: color.invert($primary);
-    }
-  }
-}
-
 .gslide-description {
   background-color: transparent !important;
 
diff --git a/static/src/scss/_hero.scss b/static/src/scss/_hero.scss
index 9d6d3af..c3ec483 100644
--- a/static/src/scss/_hero.scss
+++ b/static/src/scss/_hero.scss
@@ -102,7 +102,7 @@ section.hero {
   }
 
   .content-details {
-    margin-bottom: 0 !important;
+    margin-bottom: 0.25rem;
   }
 }
 
diff --git a/static/src/scss/_listing.scss b/static/src/scss/_listing.scss
index 556db5b..5ae7203 100644
--- a/static/src/scss/_listing.scss
+++ b/static/src/scss/_listing.scss
@@ -17,9 +17,14 @@
     height: 175px;
   }
 
+  .title {
+    margin-bottom: 0;
+  }
+
   .content-details {
-    font-size: 80%;
-    margin-top: $subtitle-negative-margin;
+    font-size: 90%;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
   }
 
   .media-content .content {
diff --git a/website/common/templates/common/content-details.html b/website/common/templates/common/content-details.html
index 40637cd..94f0e88 100644
--- a/website/common/templates/common/content-details.html
+++ b/website/common/templates/common/content-details.html
@@ -1,35 +1,33 @@
 {% load wagtailcore_tags humanize_tags %}
 
-<div class="content-details field is-grouped is-grouped-multiline {{extra_classes}}">
+<div class="content-details field is-grouped">
 
   {% if page.date %}
-    <div class="control">
-      <div class="tags has-addons">
-        <span class="tag is-dark"><i class="far fa-calendar-alt"></i></span>
-        <span class="tag is-light">{{ page.date|date:"Y-m-d" }}</span>
-      </div>
-    </div>
+    <span class="icon-text">
+      <span class="icon">
+        <i class="far fa-lg fa-calendar-alt"></i>
+      </span>
+      <span>{{ page.date|date:"Y-m-d" }}</span>
+    </span>
   {% endif %}
 
   {% if page.show_reading_time %}
-    <div class="control">
-      <div class="tags has-addons">
-        <span class="tag is-dark"><i class="far fa-clock"></i></span>
-        <span class="tag is-light" {% if page.word_count %}title="{{ page.word_count }} words"{% endif %}>
-          {{ page.reading_time|naturaldelta }}
-        </span>
-      </div>
+    <div class="icon-text" {% if page.word_count %}title="{{ page.word_count }} words"{% endif %}>
+      <span class="icon">
+        <i class="far fa-lg fa-clock"></i>
+      </span>
+      <span>{{ page.reading_time|naturaldelta }}</span>
     </div>
   {% endif %}
 
   {% if page.tags.all %}
-    <div class="control page-tags">
-      <div class="tags has-addons">
-        <span class="tag is-dark"><i class="fas fa-tags"></i></span>
-        {% for tag in page.tags.all %}
-          <span class="tag is-white"><a title="{{ tag.name }}" href="{% pageurl tag %}">#{{ tag.slug }}</a></span>
-        {% endfor %}
-      </div>
+    <div class="icon-text">
+      <span class="icon">
+        <i class="fas fa-lg fa-tags"></i>
+      </span>
+      {% for tag in page.tags.all %}
+        <span><a title="{{ tag.name }}" href="{% pageurl tag %}">#{{ tag.slug }}</a></span>
+      {% endfor %}
     </div>
   {% endif %}
 </div>