diff --git a/opentech/public/news/templates/news/news_page.html b/opentech/public/news/templates/news/news_page.html
index c51afac6c3058dc158e471f09b033ff3592bfa21..0afaa72d287b8b01eadb64aa8748821ad6f386e0 100644
--- a/opentech/public/news/templates/news/news_page.html
+++ b/opentech/public/news/templates/news/news_page.html
@@ -4,20 +4,33 @@
 {% block content %}
 <div class="wrapper wrapper--small">
 
-    <h1>{{ page.title }}</h1>
-
-    {% for author in page.authors.all %}
-        <p><a href="{% pageurl author.author %}">{{ author.author }}</a><p>
-    {% endfor %}
-
-    <p>{{ page.introduction }}</p>
+    <h5 class="heading heading--author">
+        {{ page.display_date|date:"D, Y-m-d H:i" }}
+        {% if page.authors.all %}
+            | By:
+            {% for author in page.authors.all %}
+                <a href="{% pageurl author.author %}">{{ author.author }}</a>
+            {% endfor %}
+        {% endif %}
+    </h5>
+
+    {% if page.introduction %}
+        <h4 class="heading heading--introduction">{{ page.introduction }}</h4>
+    {% endif %}
 
     <section class="main-body">
         {% include_block page.body %}
     </section>
 
-    {% include "includes/share.html" %}
+    {% if page.news_types.all %}
+        <ul class="list list--flex">
+            {% for news_type in page.news_types.all %}
+                <li class="list__label">{{ news_type }}</li>
+            {% endfor %}
+        </ul>
+    {% endif %}
 
+    {% include "includes/share.html" %}
 </div>
 
 {% include "includes/relatedcontent.html" with related_documents=page.related_documents.all related_pages=page.related_pages.all %}
diff --git a/opentech/static_src/src/sass/components/_heading.scss b/opentech/static_src/src/sass/components/_heading.scss
index 7c3fa5fc47b7f494e1bd16f135956e577005f2ce..8ee3e889565dd46d06ad4f8da92d2c0eb51d88d8 100644
--- a/opentech/static_src/src/sass/components/_heading.scss
+++ b/opentech/static_src/src/sass/components/_heading.scss
@@ -5,4 +5,8 @@
         font-weight: $weight--light;
         border-bottom: 1px solid $color--mid-grey;
     }
+
+    &--author {
+        margin: 2rem 0 0;
+    }
 }
diff --git a/opentech/static_src/src/sass/components/_list.scss b/opentech/static_src/src/sass/components/_list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..049460a91ab8a060bd2fe16847597150df0529a4
--- /dev/null
+++ b/opentech/static_src/src/sass/components/_list.scss
@@ -0,0 +1,12 @@
+.list {
+    &--flex {
+        display: flex;
+    }
+
+    &__label {
+        padding: 10px;
+        margin-right: 20px;
+        color: $color--white;
+        background: $color--light-blue;
+    }
+}
diff --git a/opentech/static_src/src/sass/main.scss b/opentech/static_src/src/sass/main.scss
index 2562ffb8f8bfb329f9283e68b7e647370325ce60..f6bec4a81033f9faf43b75c001234e6bdb4a9d5c 100755
--- a/opentech/static_src/src/sass/main.scss
+++ b/opentech/static_src/src/sass/main.scss
@@ -21,6 +21,7 @@
 @import 'components/icon';
 @import 'components/input';
 @import 'components/link';
+@import 'components/list';
 @import 'components/nav';
 @import 'components/responsive-object';
 @import 'components/rich-text';