diff --git a/app/main/views/api_keys.py b/app/main/views/api_keys.py
index 577b73e39..4525a0365 100644
--- a/app/main/views/api_keys.py
+++ b/app/main/views/api_keys.py
@@ -7,6 +7,15 @@ from app.utils import user_has_permissions
 from app.notify_client.api_key_api_client import KEY_TYPE_NORMAL, KEY_TYPE_TEST, KEY_TYPE_TEAM
 
 
+@main.route("/services/<service_id>/api")
+@login_required
+@user_has_permissions('manage_api_keys')
+def api_integration(service_id):
+    return render_template(
+        'views/api/index.html'
+    )
+
+
 @main.route("/services/<service_id>/api/keys")
 @login_required
 @user_has_permissions('manage_api_keys')
diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html
index 75c81f8f7..9d854eb50 100644
--- a/app/templates/main_nav.html
+++ b/app/templates/main_nav.html
@@ -58,7 +58,7 @@
     <li><a href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
   {% endif %}
   {% if current_user.has_permissions(['manage_api_keys']) %}
-    <li><a href="{{ url_for('.api_keys', service_id=current_service.id) }}">API integration</a></li>
+    <li><a href="{{ url_for('.api_integration', service_id=current_service.id) }}">API integration</a></li>
   {% endif %}
   </ul>
 </nav>
diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html
new file mode 100644
index 000000000..6810e5147
--- /dev/null
+++ b/app/templates/views/api/index.html
@@ -0,0 +1,32 @@
+{% extends "withnav_template.html" %}
+{% from "components/table.html" import list_table, field, hidden_field_heading %}
+{% from "components/api-key.html" import api_key %}
+
+{% block page_title %}
+  API integration – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <h1 class="heading-large">
+    API integration
+  </h1>
+
+  <a href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
+
+  <h2 class="heading-medium">API clients</h2>
+  <ul class="list list-bullet">
+    {% for name, url in [
+      ('Java', 'https://github.com/alphagov/notifications-java-client'),
+      ('Node JS', 'https://github.com/alphagov/notifications-node-client'),
+      ('PHP', 'https://github.com/alphagov/notifications-php-client'),
+      ('Python', 'https://quis.github.io/govuk_documentation_prototype/'),
+      ('Ruby', 'https://github.com/alphagov/notifications-ruby-client')
+    ] %}
+    <li>
+      <a href="{{ url }}">{{ name }}</a>
+    </li>
+    {% endfor %}
+  </ul>
+
+{% endblock %}
diff --git a/app/templates/views/api/keys.html b/app/templates/views/api/keys.html
index 7e7ad0b30..3d6e03cb8 100644
--- a/app/templates/views/api/keys.html
+++ b/app/templates/views/api/keys.html
@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/table.html" import list_table, field, hidden_field_heading %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
   API integration – GOV.UK Notify
@@ -11,7 +12,7 @@
   <div class="grid-row bottom-gutter-1-2">
     <div class="column-two-thirds">
       <h1 class="heading-large">
-        API integration
+        API keys
       </h1>
     </div>
     <div class="column-one-third">
@@ -26,8 +27,9 @@
     caption_visible=false,
     field_headings=[
       'API keys',
-      hidden_field_heading('Action')
+      'Action'
     ],
+    field_headings_visible=False
   ) %}
     {% call field() %}
       <div class="file-list">
@@ -58,19 +60,9 @@
     {{ api_key(current_service.id, "Service ID", thing="service ID") }}
   </div>
 
-  <h2 class="heading-medium">API clients</h2>
-  <ul class="list list-bullet">
-    {% for name, url in [
-      ('Java', 'https://github.com/alphagov/notifications-java-client'),
-      ('Node JS', 'https://github.com/alphagov/notifications-node-client'),
-      ('PHP', 'https://github.com/alphagov/notifications-php-client'),
-      ('Python', 'https://github.com/alphagov/notifications-python-client'),
-      ('Ruby', 'https://github.com/alphagov/notifications-ruby-client')
-    ] %}
-    <li>
-      <a href="{{ url }}">{{ name }}</a>
-    </li>
-    {% endfor %}
-  </ul>
+  {{ page_footer(
+    secondary_link=url_for('.api_integration', service_id=current_service.id),
+    secondary_link_text='Back to API integration'
+  ) }}
 
 {% endblock %}
diff --git a/tests/app/main/views/test_api_keys.py b/tests/app/main/views/test_api_keys.py
index d63b540e7..54ba99199 100644
--- a/tests/app/main/views/test_api_keys.py
+++ b/tests/app/main/views/test_api_keys.py
@@ -1,10 +1,26 @@
 import uuid
 
 from flask import url_for
+from bs4 import BeautifulSoup
 
 from tests import validate_route_permission
 
 
+def test_should_show_api_page(
+    app_,
+    mock_login,
+    api_user_active,
+    mock_get_service,
+    mock_has_permissions
+):
+    with app_.test_request_context(), app_.test_client() as client:
+        client.login(api_user_active)
+        response = client.get(url_for('main.api_integration', service_id=str(uuid.uuid4())))
+        assert response.status_code == 200
+        page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
+        assert page.h1.string.strip() == 'API integration'
+
+
 def test_should_show_empty_api_keys_page(app_,
                                          api_user_pending,
                                          mock_login,
diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py
index 56c00c418..740af554c 100644
--- a/tests/app/main/views/test_dashboard.py
+++ b/tests/app/main/views/test_dashboard.py
@@ -342,7 +342,7 @@ def test_menu_manage_api_keys(mocker,
         assert url_for('main.service_settings', service_id=service_one['id']) not in page
         assert url_for('main.show_all_services') not in page
 
-        assert url_for('main.api_keys', service_id=service_one['id']) in page
+        assert url_for('main.api_integration', service_id=service_one['id']) in page
 
 
 def test_menu_all_services_for_platform_admin_user(mocker,