diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index 5d3b57ce5..3b04ed497 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -55,3 +55,26 @@
     color: $text-colour;
   }
 }
+
+.pill-separate {
+
+  &-item {
+
+    display: block;
+    text-align: left;
+    padding: 10px $gutter-half;
+
+    &:link,
+    &:visited {
+      background: $link-colour;
+      color: $white;
+      text-decoration: underline;
+    }
+
+    &:hover {
+      color: $light-blue-25;
+    }
+
+  }
+
+}
diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html
index db6586550..cf782ce5c 100644
--- a/app/templates/views/api/index.html
+++ b/app/templates/views/api/index.html
@@ -8,11 +8,17 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  <h1 class="heading-large bottom-gutter">
     API integration
   </h1>
 
-  <a href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
-  <a href="{{ url_for('.api_documentation', service_id=current_service.id) }}">Documentation</a>
+  <nav class="grid-row">
+    <div class="column-half">
+      <a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
+    </div>
+    <div class="column-half">
+      <a class="pill-separate-item" href="{{ url_for('.api_documentation', service_id=current_service.id) }}">Documentation</a>
+    </div>
+  </nav>
 
 {% endblock %}
diff --git a/app/templates/views/dashboard/write-first-messages.html b/app/templates/views/dashboard/write-first-messages.html
index 3fe87f68a..ecf754b33 100644
--- a/app/templates/views/dashboard/write-first-messages.html
+++ b/app/templates/views/dashboard/write-first-messages.html
@@ -1,16 +1,10 @@
-{% from "components/banner.html" import banner_wrapper %}
-
 <h2 class="heading-medium">Get started</h2>
 
-  <nav class="grid-row">
-    <div class="column-half">
-      {% call banner_wrapper(type="mode") %}
-        <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type='email') }}">Write an email
-      {% endcall %}
-    </div>
-    <div class="column-half">
-      {% call banner_wrapper(type="mode") %}
-        <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type='sms') }}">Write a text message</a>
-      {% endcall %}
-    </div>
-  </nav>
+<nav class="grid-row">
+  <div class="column-half">
+    <a class="pill-separate-item" href="{{ url_for('.choose_template', service_id=current_service.id, template_type='email') }}">Write an email</a>
+  </div>
+  <div class="column-half">
+    <a class="pill-separate-item" href="{{ url_for('.choose_template', service_id=current_service.id, template_type='sms') }}">Write a text message</a>
+  </div>
+</nav>