diff --git a/.github/actions/prototype-kit-test/action.yml b/.github/actions/prototype-kit-test/action.yml
index f4b95a8b..ec1be4c7 100644
--- a/.github/actions/prototype-kit-test/action.yml
+++ b/.github/actions/prototype-kit-test/action.yml
@@ -47,6 +47,7 @@ runs:
         echo -e "{% from \"nationalarchives/components/hero/macro.njk\" import tnaHero %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/index-grid/macro.njk\" import tnaIndexGrid %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/message/macro.njk\" import tnaMessage %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/pagination/macro.njk\" import tnaMessage %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/phase-banner/macro.njk\" import tnaPhaseBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/picture/macro.njk\" import tnaPicture %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/profile/macro.njk\" import tnaProfile %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -69,6 +70,7 @@ runs:
         echo "{{ tnaHero({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaIndexGrid({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaMessage({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaPagination({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPhaseBanner({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPicture({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaProfile({}) }}" >> prototype/app/views/index.html &&
diff --git a/src/nationalarchives/components/_index.scss b/src/nationalarchives/components/_index.scss
index 754ebcef..e1e938a7 100644
--- a/src/nationalarchives/components/_index.scss
+++ b/src/nationalarchives/components/_index.scss
@@ -10,6 +10,7 @@
 @use "hero";
 @use "index-grid";
 @use "message";
+@use "pagination";
 @use "phase-banner";
 @use "picture";
 @use "profile";
diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk
index 6ee86ea1..b6888490 100644
--- a/src/nationalarchives/components/footer/template.njk
+++ b/src/nationalarchives/components/footer/template.njk
@@ -20,7 +20,7 @@
       </div>
       {%- endif -%}
       {%- if params.social -%}
-        <nav class="tna-footer__social" aria-label="Social links">
+        <nav class="tna-footer__social" role="navigation" aria-label="Social links">
           <ul class="tna-ul tna-ul--plain tna-footer__social-items">
           {%- for item in params.social -%}
             <li class="tna-footer__social-item">
@@ -49,7 +49,7 @@
     {%- if params.navigation -%}
     <div class="tna-footer__navigation tna-column {% if params.showNewsletter %}tna-column--width-1-2{% else %}tna-column--width-2-3{% endif %} tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-column--order-2 tna-column--order-4-medium tna-columns tna-columns--2 tna-columns--1-tiny">
       {%- for group in params.navigation -%}
-      <nav class="tna-footer__navigation-block tna-columns__block" aria-label="{{ group.title }}">
+      <nav class="tna-footer__navigation-block tna-columns__block" role="navigation" aria-label="{{ group.title }}">
         <h3 class="tna-footer__navigation-block-heading tna-heading tna-heading--m">
           {{ group.title }}
         </h3>
@@ -89,7 +89,7 @@
   </div>
   <div class="tna-container">
     {%- if params.legal -%}
-    <nav class="tna-footer__legal tna-column tna-column--full" aria-label="General site links">
+    <nav class="tna-footer__legal tna-column tna-column--full" role="navigation" aria-label="General site links">
       <ul class="tna-footer__legal-items tna-ul tna-ul--plain">
         {%- for item in params.legal -%}
         <li class="tna-footer__legal-item">
diff --git a/src/nationalarchives/components/pagination/_index.scss b/src/nationalarchives/components/pagination/_index.scss
new file mode 100644
index 00000000..a935dede
--- /dev/null
+++ b/src/nationalarchives/components/pagination/_index.scss
@@ -0,0 +1 @@
+@use "pagination";
diff --git a/src/nationalarchives/components/pagination/fixtures.json b/src/nationalarchives/components/pagination/fixtures.json
new file mode 100644
index 00000000..cdc1edfa
--- /dev/null
+++ b/src/nationalarchives/components/pagination/fixtures.json
@@ -0,0 +1,4 @@
+{
+  "component": "pagination",
+  "fixtures": []
+}
diff --git a/src/nationalarchives/components/pagination/macro-options.json b/src/nationalarchives/components/pagination/macro-options.json
new file mode 100644
index 00000000..f83ac7cc
--- /dev/null
+++ b/src/nationalarchives/components/pagination/macro-options.json
@@ -0,0 +1,116 @@
+[
+  {
+    "name": "previous",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "items",
+    "type": "array",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "number",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "current",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "ellipsis",
+        "type": "boolean",
+        "required": false,
+        "description": "Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as `true`, any other options for the item are ignored."
+      },
+      {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "next",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "landmarkLabel",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the pagination."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the pagination."
+  }
+]
diff --git a/src/nationalarchives/components/pagination/macro.njk b/src/nationalarchives/components/pagination/macro.njk
new file mode 100644
index 00000000..6ad500b6
--- /dev/null
+++ b/src/nationalarchives/components/pagination/macro.njk
@@ -0,0 +1,3 @@
+{% macro tnaPagination(params) %}
+  {%- include "nationalarchives/components/pagination/template.njk" -%}
+{% endmacro %}
\ No newline at end of file
diff --git a/src/nationalarchives/components/pagination/pagination.scss b/src/nationalarchives/components/pagination/pagination.scss
new file mode 100644
index 00000000..055a0891
--- /dev/null
+++ b/src/nationalarchives/components/pagination/pagination.scss
@@ -0,0 +1,85 @@
+@use "../../tools/colour";
+@use "../../tools/typography";
+@use "../../utilities";
+
+.tna-pagination {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  &__prev {
+  }
+
+  &__next {
+  }
+
+  &__link {
+    min-width: 2rem;
+    padding: 0.5rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+  }
+
+  &__icon {
+    display: inline-block;
+
+    &--prev {
+      margin-right: 0.5rem;
+    }
+
+    &--next {
+      margin-left: 0.5rem;
+    }
+  }
+
+  &__link-title {
+    @include typography.main-font-weight-bold;
+  }
+
+  &__list {
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    align-items: center;
+
+    list-style: none;
+  }
+
+  &__item {
+    &--ellipses {
+      min-width: 2rem;
+      padding: 0.5rem;
+
+      text-align: center;
+    }
+
+    &--current {
+      @include colour.accent;
+    }
+  }
+
+  &__prev &__link,
+  &__next &__link,
+  &__item:not(&__item--current) &__link {
+    &:hover {
+      @include colour.tint-background;
+    }
+  }
+
+  @include colour.on-high-contrast {
+    &__link {
+      @include colour.colour-border("keyline-dark", 1px);
+    }
+
+    &__list {
+      gap: 0.25rem;
+    }
+  }
+}
diff --git a/src/nationalarchives/components/pagination/pagination.stories.js b/src/nationalarchives/components/pagination/pagination.stories.js
new file mode 100644
index 00000000..6f168ce9
--- /dev/null
+++ b/src/nationalarchives/components/pagination/pagination.stories.js
@@ -0,0 +1,72 @@
+import Pagination from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  previous: { control: "object" },
+  items: { control: "object" },
+  next: { control: "object" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Pagination",
+  argTypes,
+};
+
+const Template = ({ previous, items, next, classes, attributes }) =>
+  Pagination({
+    params: {
+      previous,
+      items,
+      next,
+      classes,
+      attributes,
+    },
+  });
+
+export const Standard = Template.bind({});
+Standard.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 6,
+      href: "#",
+    },
+    {
+      number: 7,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 8,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
diff --git a/src/nationalarchives/components/pagination/template.njk b/src/nationalarchives/components/pagination/template.njk
new file mode 100644
index 00000000..637d33cc
--- /dev/null
+++ b/src/nationalarchives/components/pagination/template.njk
@@ -0,0 +1,38 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<nav class="tna-pagination {{ containerClasses | join(' ') }}" role="navigation" aria-label="{{ params.landmarkLabel if params.landmarkLabel else 'Results' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {% if params.previous -%}
+  <div class="tna-pagination__prev">
+    <a class="tna-pagination__link" href="{{ params.previous.href }}" rel="prev">
+      <svg class="tna-pagination__icon tna-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+        <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+      </svg>
+      <span class="tna-pagination__link-title">
+        {{ params.previous.text if params.previous.text else 'Previous' }}
+      </span>
+    </a>
+  </div>
+  {% endif -%}
+  <ul class="tna-pagination__list">
+    {% for item in params.items -%}
+      {% if item.ellipsis -%}
+      <li class="tna-pagination__item tna-pagination__item--ellipses">&ctdot;</li>
+      {% else -%}
+      <li class="tna-pagination__item{{ ' tna-pagination__item--current' if item.current }}">
+        <a class="tna-pagination__link" href="{{ item.href }}" aria-label="{{ item.label }}">
+          {{ item.number }}
+        </a>
+      </li>
+      {% endif -%}
+    {% endfor -%}
+  </ul>
+  {% if params.next -%}
+  <div class="tna-pagination__next">
+    <a class="tna-pagination__link" href="{{ params.next.href }}" rel="next">
+      <span class="tna-pagination__link-title">{{ params.next.text if params.next.text else 'Next' }}</span>
+      <svg class="tna-pagination__icon tna-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+        <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+      </svg>
+    </a>
+  </div>
+  {% endif -%}
+</nav>
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
index 773e391e..73fd7d07 100644
--- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
+++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -9,6 +9,7 @@ import Header from "../../../components/header/template.njk";
 import Hero from "../../../components/hero/template.njk";
 import IndexGrid from "../../../components/index-grid/template.njk";
 import Message from "../../../components/message/template.njk";
+import Pagination from "../../../components/pagination/template.njk";
 import PhaseBanner from "../../../components/phase-banner/template.njk";
 import Picture from "../../../components/picture/template.njk";
 import Tabs from "../../../components/tabs/template.njk";
@@ -310,6 +311,8 @@ const Template = ({ theme, accent }) => {
             </h2>
           </hgroup>
           <p>Lorem ipsum <a href="#">link</a></p>
+        </div>
+        <div class="tna-column tna-column--width-1-2 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
           <h3 class="tna-heading tna-heading--m">
             Descriptions
           </h3>
@@ -320,9 +323,9 @@ const Template = ({ theme, accent }) => {
             <dd>Lorem ipsum</dd>
             <dt>Gamma</dt>
             <dd>Lorem ipsum</dd>
-            <dt>Delta</dt>
-            <dd>Lorem ipsum</dd>
           </dl>
+        </div>
+        <div class="tna-column tna-column--width-1-2 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
           <h3 class="tna-heading tna-heading--m">
             Descriptions
           </h3>
@@ -333,9 +336,9 @@ const Template = ({ theme, accent }) => {
             <dd>Lorem ipsum</dd>
             <dt>Gamma</dt>
             <dd>Lorem ipsum</dd>
-            <dt>Delta</dt>
-            <dd>Lorem ipsum</dd>
           </dl>
+        </div>
+        <div class="tna-column tna-column--full tna-!--margin-top-m">
           <h3 class="tna-heading tna-heading--m">
             Descriptions
           </h3>
@@ -711,6 +714,52 @@ const Template = ({ theme, accent }) => {
           </div>
         </div>
       </div>
+      <div class="tna-section">
+        <div class="tna-container">
+          <div class="tna-column tna-column--full">
+            ${Pagination({
+              params: {
+                previous: {
+                  href: "#",
+                },
+                items: [
+                  {
+                    number: 1,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 6,
+                    href: "#",
+                  },
+                  {
+                    number: 7,
+                    current: true,
+                    href: "#",
+                  },
+                  {
+                    number: 8,
+                    href: "#",
+                  },
+                  {
+                    ellipsis: true,
+                  },
+                  {
+                    number: 42,
+                    href: "#",
+                  },
+                ],
+                next: {
+                  href: "#",
+                },
+                classes: "tna-pagination--demo",
+              },
+            })}
+          </div>
+        </div>
+      </div>
     </main>
     ${Footer({
       params: {
diff --git a/src/nationalarchives/utilities/_a11y.scss b/src/nationalarchives/utilities/_a11y.scss
index e6b7877f..0e0d734d 100644
--- a/src/nationalarchives/utilities/_a11y.scss
+++ b/src/nationalarchives/utilities/_a11y.scss
@@ -1,3 +1,5 @@
+@use "../tools/colour";
+
 .tna-visually-hidden {
   width: 1px !important;
   height: 1px !important;
@@ -22,3 +24,10 @@
     content: "\00a0";
   }
 }
+
+*:focus {
+  z-index: 9;
+
+  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
+  outline-offset: 0.125rem;
+}
diff --git a/src/nationalarchives/utilities/_global.scss b/src/nationalarchives/utilities/_global.scss
index ea7cb306..5e8b471d 100644
--- a/src/nationalarchives/utilities/_global.scss
+++ b/src/nationalarchives/utilities/_global.scss
@@ -126,11 +126,6 @@ canvas {
   display: none;
 }
 
-*:focus {
-  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
-  outline-offset: 0.125rem;
-}
-
 hr {
   margin: 2rem 0;
 
diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss
index d44c9bc8..2375ae00 100644
--- a/src/nationalarchives/variables/_colour.scss
+++ b/src/nationalarchives/variables/_colour.scss
@@ -92,7 +92,7 @@ $colour-palette-dark: map.merge(
     "font-light": rgba(map.get($colour-palette-brand, "white"), 0.5),
     "icon-light": rgba(map.get($colour-palette-brand, "white"), 0.35),
     "link": map.get($colour-palette-brand, "blue"),
-    "link-visited": map.get($colour-palette-default, "contrast-link-visited"),
+    "link-visited": #a8f,
     "keyline": rgba(map.get($colour-palette-brand, "white"), 0.25),
     "keyline-dark": map.get($colour-palette-brand, "white"),
     "button-text": map.get($colour-palette-brand, "black"),
diff --git a/tasks/test-package.js b/tasks/test-package.js
index b2779a88..b93a0d78 100644
--- a/tasks/test-package.js
+++ b/tasks/test-package.js
@@ -64,6 +64,7 @@ const checkExists = [
   ...componentFiles("hero"),
   ...componentFiles("index-grid"),
   ...componentFiles("message"),
+  ...componentFiles("pagination"),
   ...componentFiles("phase-banner"),
   ...componentFiles("picture", "Picture"),
   ...componentFiles("profile"),