diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
new file mode 100644
index 000000000..42c56869f
--- /dev/null
+++ b/app/assets/stylesheets/components/pill.scss
@@ -0,0 +1,41 @@
+.pill {
+
+  display: flex;
+
+  a, span {
+    display: block;
+    padding: 10px;  
+    flex-grow: 1;
+    text-align: center;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+  }
+
+  a {
+    background: $panel-colour;
+    color: $link-colour;
+    border: 1px solid $panel-colour;
+    position: relative;
+
+    &:hover {
+      color: $text-colour;
+    }
+
+    &:active,
+    &:focus {
+      z-index: 10;
+    }
+  }
+
+  span {
+    border: 1px solid $grey-1;
+    color: $text-colour;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index b2364a746..5455046c5 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -79,10 +79,6 @@
 
   p {
     margin: 0 0 5px 0;
-
-    a {
-      text-decoration: none;
-    }
   }
 
 }
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 7bcfc9d86..2504e5ff1 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -48,6 +48,7 @@ $path: '/static/images/';
 @import 'components/email-message';
 @import 'components/api-key';
 @import 'components/vendor/previous-next-navigation';
+@import 'components/pill';
 
 @import 'views/job';
 @import 'views/edit-template';
diff --git a/app/main/views/jobs.py b/app/main/views/jobs.py
index 5eb4a44fb..cf5a3128e 100644
--- a/app/main/views/jobs.py
+++ b/app/main/views/jobs.py
@@ -7,7 +7,8 @@ from flask import (
     render_template,
     abort,
     jsonify,
-    request
+    request,
+    url_for
 )
 from flask_login import login_required
 from werkzeug.datastructures import MultiDict
@@ -150,7 +151,31 @@ def view_notifications(service_id):
         page=page,
         prev_page=prev_page,
         next_page=next_page,
-        request_args=request.args
+        request_args=request.args,
+        type_filters=[
+            [item[0], item[1], url_for(
+                '.view_notifications',
+                service_id=current_service['id'],
+                template_type=item[1],
+                status=request.args.get('status', '')
+            )] for item in [
+                ['Emails', 'email'],
+                ['Text messages', 'sms'],
+                ['Both', '']
+            ]
+        ],
+        status_filters=[
+            [item[0], item[1], url_for(
+                '.view_notifications',
+                service_id=current_service['id'],
+                template_type=request.args.get('template_type', ''),
+                status=item[1]
+            )] for item in [
+                ['Successful', 'sent,delivered'],
+                ['Failed', 'failed,complaint,bounce'],
+                ['Both', '']
+            ]
+        ]
     )
 
 
diff --git a/app/templates/components/pill.html b/app/templates/components/pill.html
new file mode 100644
index 000000000..2ca56fa25
--- /dev/null
+++ b/app/templates/components/pill.html
@@ -0,0 +1,16 @@
+{% macro pill(
+  title,
+  items=[],
+  current_value=None
+) %}
+  <nav role='navigation' class='pill' aria-labelledby="pill_{{title}}">
+    <h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
+    {% for label, option, link in items %}
+      {% if current_value == option %}
+        <span aria-hidden="true">{{ label }}</span>
+      {% else %}
+        <a href="{{ link }}">{{ label }}</a>
+      {% endif %}
+    {% endfor %}
+  </nav>
+{% endmacro %}
\ No newline at end of file
diff --git a/app/templates/views/notifications.html b/app/templates/views/notifications.html
index fe2fafc6f..b5bdc0793 100644
--- a/app/templates/views/notifications.html
+++ b/app/templates/views/notifications.html
@@ -1,6 +1,8 @@
 {% extends "withnav_template.html" %}
 {% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading %}
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/pill.html" import pill %}
 
 {% block page_title %}
   Activity – GOV.UK Notify
@@ -8,18 +10,58 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">Activity</h1>
-    <p>
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, page=1) }}">All messages</a>
-    </p>
-    <p>
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, type="sms", page=1) }}">Text messages</a>&emsp;
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, type="email", page=1) }}">Email messages</a>
-    </p>
-    <p>
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, status=['delivered'], page=1) }}">Successful messages</a>&emsp;
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, status=['failed'], page=1) }}">Failed messages</a>
-    </p>
+  <h1 class="heading-large">
+
+    {%- if (request_args.get('template_type', '') == '') and (request_args.get('status', '') == '') -%}
+
+      Activity
+
+    {%- else -%}
+
+      {% if request_args.get('status') != '' %}
+        {% for label, option, _ in status_filters %}
+          {% if request_args.get('status') == option %}
+            {{ label }}
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+
+      {% if request_args.get('template_type') == '' %}
+        emails and text messages
+      {% else %}
+
+        {% for template_label, template_option, _ in type_filters %}
+          {% if request_args.get('template_type') == template_option %}
+            {% if request_args.get('status', '') == '' %}
+              {{ template_label }}
+            {% else %}
+              {{ template_label | lower }}
+            {% endif %}
+          {% endif %}
+        {% endfor %}
+
+      {% endif %}
+
+    {%- endif -%}
+
+  </h1>
+  
+  <div class='grid-row bottom-gutter'>
+    <div class='column-half'>
+      {{ pill(
+        'Type',
+        type_filters,
+        request_args.get('template_type', '')
+      ) }}
+    </div>
+    <div class='column-half'>
+      {{ pill(
+        'Status',
+        status_filters,
+        request_args.get('status', '')
+      ) }}
+    </div>
+  </div>
 
   {% call(item, row_number) list_table(
     notifications,