diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index a801b2ec7..70555d2d1 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -1,14 +1,22 @@
+%banner,
 .banner {
 
   @include core-19;
   background: $turquoise;
   color: $white;
   display: block;
-  padding: $gutter-half $gutter;
+  padding: $gutter-half;
   margin: 0 0 $gutter 0;
   text-align: center;
   position: relative;
 
+}
+
+.banner-with-tick {
+
+  @extend %banner;
+  padding: $gutter-half $gutter;
+
   &:before {
     @include core-24;
     content: '✔';
diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss
index 4fa727388..abdd5f9bf 100644
--- a/app/assets/stylesheets/components/sms-message.scss
+++ b/app/assets/stylesheets/components/sms-message.scss
@@ -45,27 +45,4 @@
     margin: -$gutter-half 0 $gutter 0;
   }
 
-  &-history {
-
-    background: $turquoise;
-    color: $white;
-    padding: $gutter-half;
-    @include bold-19;
-    margin: 0 0 $gutter 0;
-
-    &-heading {
-
-      @include bold-19;
-      margin: 0;
-
-      &-time {
-        @include inline-block;
-        margin-left: 10px;
-        font-weight: normal;
-      }
-
-    }
-
-  }
-
 }
diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html
index 2dab12c5d..a03d2cb0a 100644
--- a/app/templates/components/banner.html
+++ b/app/templates/components/banner.html
@@ -1,3 +1,5 @@
-{% macro banner(body) %}
-  <div class='banner'>{{ body }}</div>
+{% macro banner(body, with_tick=False) %}
+  <div class='banner{% if with_tick %}-with-tick{% endif %}'>
+    {{ body }}
+  </div>
 {% endmacro %}
diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html
index 38d30b877..d0d0f92ce 100644
--- a/app/templates/components/sms-message.html
+++ b/app/templates/components/sms-message.html
@@ -10,11 +10,3 @@
     </p>
   {% endif %}
 {% endmacro %}
-
-{% macro message_status(status, time) %}
-  <div class="sms-message-history">
-    <p class="sms-message-history-heading">
-      {{ status }} <span class="sms-message-history-heading-time">{{ time }}</span>
-    </p>
-  </div>
-{% endmacro %}
diff --git a/app/templates/views/job.html b/app/templates/views/job.html
index 29ae57ba7..b733a5e61 100644
--- a/app/templates/views/job.html
+++ b/app/templates/views/job.html
@@ -14,7 +14,7 @@ GOV.UK Notify | Notifications activity
 		</h1>
 
 		<p>
-    {{ banner(flash_message) }}
+      {{ banner(flash_message, with_tick=True) }}
 		</p>
 
 		<ul class="grid-row job-totals">
diff --git a/app/templates/views/notification.html b/app/templates/views/notification.html
index 1e771062a..4f21b6a96 100644
--- a/app/templates/views/notification.html
+++ b/app/templates/views/notification.html
@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/sms-message.html" import sms_message, message_status %}
+{% from "components/banner.html" import banner %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
@@ -18,7 +19,9 @@ GOV.UK Notify | Notifications activity
 				{{ sms_message(message.message, message.phone) }}
 			</div>
 			<div class="column-one-third">
-				{{ message_status(message.status, delivered_at) }}
+				{{ banner(
+					"{} {}".format(message.status, delivered_at)
+				) }}
 			</div>
 		</div>
 
diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html
index 9ad7ba9a3..882679452 100644
--- a/app/templates/views/styleguide.html
+++ b/app/templates/views/styleguide.html
@@ -4,7 +4,7 @@
 {% from "components/big-number.html" import big_number %}
 {% from "components/browse-list.html" import browse_list %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/sms-message.html" import sms_message, message_status %}
+{% from "components/sms-message.html" import sms_message %}
 {% from "components/table.html" import mapping_table, list_table, row, field %}
 {% from "components/textbox.html" import textbox %}
 
@@ -20,7 +20,12 @@
 
   <h2 class="heading-large">Banner</h2>
   <p>Used to show the result of a user’s action.</p>
-  {{ banner("This is a banner") }}
+  {{ banner("This is a banner", with_tick=True) }}
+  <div class="grid-row">
+    <div class="column-one-third">
+      {{ banner("Delivered 10:20") }}
+    </div>
+  </div>
 
   <h2 class="heading-large">Big number</h2>
 
@@ -97,13 +102,6 @@
     </div>
   </div>
 
-  <h2 class="heading-large">Message status</h2>
-  <div class="grid-row">
-    <div class="column-third">
-      {{ message_status("Delivered 10:20") }}
-    </div>
-  </div>
-
   <h2 class="heading-large">Tables</h2>
 
   {% call mapping_table(