diff --git a/app/assets/stylesheets/views/api.scss b/app/assets/stylesheets/views/api.scss
index 98e21685e..4049c43c5 100644
--- a/app/assets/stylesheets/views/api.scss
+++ b/app/assets/stylesheets/views/api.scss
@@ -1,6 +1,8 @@
 .api-notifications {
 
   font-family: monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   border-bottom: 1px solid $border-colour;
 
   &-item {
@@ -8,38 +10,59 @@
     border-top: 1px solid $border-colour;
     padding: 10px 0 0 0;
 
-    &-title {
-      color: $link-colour;
+    &__heading,
+    &__data,
+    &__view {
+      font-family: monospace;
+    }
+
+    &__heading {
+      display: block;
+      margin-bottom: $gutter-half;
+
+      &::before {
+        top: -1.3em;
+      }
+    }
+
+    &__meta {
+
+      display: block;
+      color: $secondary-text-colour;
       text-decoration: none;
-      display: block;
+
+      &-key,
+      &-time {
+        color: $secondary-text-colour;
+        display: inline-block;
+        width: auto;
+      }
+
+      @include govuk-media-query($from: tablet) {
+        &-key,
+        &-time {
+          width: 50%;
+        }
+
+        &-time {
+          text-align: right;
+        }
+      }
+
     }
 
-    &-recipient {
-      display: inline;
-    }
+    &__data {
 
-    &-meta {
-      display: block;
-      color: $secondary-text-colour;
-    }
+      border-left: none;
+      padding-left: 25px;
 
-    &-time {
-      text-align: right;
-    }
+      &-name {
+        color: $secondary-text-colour;
+      }
 
-    &-key {
-      display: inline-block;
-      padding-left: 46px;
-    }
-
-    &-data {
-
-      padding-left: 31px;
-      color: $secondary-text-colour;
-
-      &-item {
-        padding-bottom: 15px;
+      &-value {
         color: $text-colour;
+        padding-bottom: 15px;
       }
 
     }
diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html
index 9397a97b5..cebb5442d 100644
--- a/app/templates/views/api/index.html
+++ b/app/templates/views/api/index.html
@@ -39,43 +39,45 @@
   <div class="api-notifications">
     {% if not api_notifications.notifications %}
       <div class="api-notifications-item">
-        <p class="api-notifications-item-meta">
+        <p class="api-notifications-item__meta">
           When you send messages via the API they’ll appear here.
         </p>
-        <p class="api-notifications-item-meta">
+        <p class="api-notifications-item__meta">
           Notify deletes messages after 7 days.
         </p>
       </div>
     {% endif %}
     {% for notification in api_notifications.notifications %}
-      <details class="api-notifications-item">
-        <summary class="api-notifications-item-title">
-          <h3 class="api-notifications-item-recipient">
+      <details class="api-notifications-item govuk-details govuk-!-margin-bottom-0" data-module="govuk-details">
+        <summary class="govuk-details__summary govuk-clearfix api-notifications-item__heading">
+          <h3>
+            <span class="govuk-details__summary-text">
             {{ notification.to }}
+            </span>
+            <span class="govuk-grid-row api-notifications-item__meta">
+              <span class="govuk-grid-column-one-half api-notifications-item__meta-key">
+                {{notification.key_name}}
+              </span>
+              <span class="govuk-grid-column-one-half api-notifications-item__meta-time">
+                <time class="timeago" datetime="{{ notification.created_at }}">
+                  {{ notification.created_at|format_delta }}
+                </time>
+              </span>
+            </span>
           </h3>
-          <span class="grid-row api-notifications-item-meta">
-            <span class="column-half api-notifications-item-key">
-              {{notification.key_name}}
-            </span>
-            <span class="column-half api-notifications-item-time">
-              <time class="timeago" datetime="{{ notification.created_at }}">
-                {{ notification.created_at|format_delta }}
-              </time>
-            </span>
-          </span>
         </summary>
-        <div>
-          <dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
+        <div class="govuk-details__text api-notifications-item__data govuk-!-padding-top-0">
+          <dl id="notification-{{ notification.id }}">
             {% for key in [
               'id', 'client_reference', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
             ] %}
               {% if notification[key] %}
-                <dt>{{ key }}:</dt>
-                <dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
+                <dt class="api-notifications-item__data-name">{{ key }}:</dt>
+                <dd class="api-notifications-item__data-value">{{ notification[key] }}</dd>
               {% endif %}
             {% endfor %}
             {% if notification.status not in ('pending-virus-check', 'virus-scan-failed') %}
-              <a href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=notification.id) }}">View {{ message_count_label(1, notification.template.template_type, suffix='') }}</a>
+              <a class="api-notifications-item__view" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=notification.id) }}">View {{ message_count_label(1, notification.template.template_type, suffix='') }}</a>
             {% endif %}
           </dl>
         </div>
@@ -84,11 +86,11 @@
     {% if api_notifications.notifications %}
       <div class="api-notifications-item">
         {% if api_notifications.notifications|length == 50 %}
-          <p class="api-notifications-item-meta">
+          <p class="api-notifications-item__meta">
             Only showing the first 50 messages.
           </p>
         {% endif %}
-        <p class="api-notifications-item-meta">
+        <p class="api-notifications-item__meta">
           Notify deletes messages after 7 days.
         </p>
       </div>