diff --git a/caps/static/scss/api.scss b/caps/static/scss/api.scss
new file mode 100644
index 000000000..02282a8e6
--- /dev/null
+++ b/caps/static/scss/api.scss
@@ -0,0 +1,13 @@
+ul.breadcrumb {
+  li + li {
+    ::before {
+      padding: 0 5px;
+      color: #ccc;
+      content: "/\00a0";
+    }
+  }
+}
+
+.pull-right {
+  float: right !important;
+}
diff --git a/caps/static/scss/main.scss b/caps/static/scss/main.scss
index 8197bea8c..d46620374 100644
--- a/caps/static/scss/main.scss
+++ b/caps/static/scss/main.scss
@@ -32,14 +32,14 @@
 @import "../bootstrap/forms";
 @import "../bootstrap/buttons";
 @import "../bootstrap/transitions";
-// @import "../bootstrap/dropdown";
-// @import "../bootstrap/button-group";
+@import "../bootstrap/dropdown";
+@import "../bootstrap/button-group";
 // @import "../bootstrap/input-group";
 // @import "../bootstrap/custom-forms";
 @import "../bootstrap/nav";
 @import "../bootstrap/navbar";
 @import "../bootstrap/card";
-// @import "../bootstrap/breadcrumb";
+@import "../bootstrap/breadcrumb";
 // @import "../bootstrap/pagination";
 @import "../bootstrap/badge";
 // @import "../bootstrap/jumbotron";
@@ -83,3 +83,4 @@
 @import "homepage";
 @import "council-powers";
 @import "net-zero-local-hero";
+@import "api";
diff --git a/templates/rest_framework/api.html b/templates/rest_framework/api.html
index 254ce1012..675ed70a4 100644
--- a/templates/rest_framework/api.html
+++ b/templates/rest_framework/api.html
@@ -2,9 +2,32 @@
 
 {% load static %}
 {% load pipeline %}
+{% load bootstrap4 %}
 
-{% block title %}CAPS API{% endblock %}
+{% block bootstrap_theme %}
+    {% stylesheet 'main' %}
+{% endblock %}
+
+{% block script %}
+{% bootstrap_javascript jquery='full' %}
+{% endblock %}
+
+{% block title %}Climate Action Plan Explorer API{% endblock %}
 
-{% block branding %}
-<a class="navbar-brand" rel="nofollow" href="/">DATA</a> <span class="navbar-brand">&raquo;</span> <a class="navbar-brand" href="{% url 'api-root' %}">API</a>
+{% block navbar %}
+    {% include 'includes/site-header.html' %}
+    <div class="site-subheader">
+        <nav class="navbar navbar-expand-md navbar-dark">
+            <a class="navbar-brand" href="{% url 'home' %}">Climate Action Plan Explorer</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#secondaryNav" aria-controls="secondaryNav" aria-expanded="false" aria-label="Toggle secondary navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="secondaryNav">
+                <div class="navbar-nav">
+                    <a class="nav-link" href="{% url 'council_list' %}">All councils</a>
+                    <a class="nav-link" href="{% url 'about' %}">About</a>
+                </div>
+            </div>
+        </nav>
+    </div>
 {% endblock %}