diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13f293f7e..fc4e82491 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # NHS digital service manual Changelog
 
+## Unreleased
+
+:new: **New features**
+- Add NHS login button variant
+
 ## 7.2.0 - 6 November 2024
 
 :new: **New features**
diff --git a/app/views/design-system/components/buttons/index.njk b/app/views/design-system/components/buttons/index.njk
index 22ae80253..df2caf377 100644
--- a/app/views/design-system/components/buttons/index.njk
+++ b/app/views/design-system/components/buttons/index.njk
@@ -27,12 +27,13 @@
   <p>See the full list of <a href="/design-system">design system changes to meet WCAG 2.2</a>.</p>
 </div>
 
-  <p>We have 4 buttons:</p>
+  <p>We have 5 buttons:</p>
   <ul>
     <li><a href="#primary-button">primary button</a></li>
     <li><a href="#secondary-button">secondary button</a></li>
     <li><a href="#reverse-button">white button on solid background colour (reverse button)</a></li>
     <li><a href="#warning-button">warning button</a></li>
+    <li><a href="#login-button">login button</a></li>
   </ul>
 
   <h2 id="primary-button">Primary button</h2>
@@ -89,6 +90,29 @@
 
   <p>Do not only rely on the red colour of a warning button to communicate the serious nature of the action. This is because not all users will be able to see the colour or will understand what it means. Make sure the context and button text make clear what will happen if the user selects it.</p>
 
+  <h2 id="login-button">Login button</h2>
+
+  {{ designExample({
+    group: "components",
+    item: "buttons",
+    type: "login"
+  }) }}
+
+  <h3>When to use a login button</h3>
+
+  <p>Use the login button to direct users to a login journey on an NHS service.</p>
+  <p>You must use NHS login if you digitally authenticate members of the public. <a href="/standards-and-technology/technology/NHS-login">Learn more about NHS login</a>.</p>
+  <p>Use this button for NHS login on products and services that use the NHS design system. If it does not use the design system, follow the <a href="https://nhsconnect.github.io/nhslogin/button-guidance/">NHS login developer documentation button guidance</a>.</p>
+  <p>This button is also being tested by other services that digitally authenticate health and care staff, such as <a href="https://digital.nhs.uk/services/identity-and-access-management/nhs-care-identity-service-2">NHS Care Identity Service 2 (NHS CIS2, on NHS Digital's website)</a>.</p>
+
+  {{ designExample({
+    group: "components",
+    item: "buttons",
+    type: "login-reverse"
+  }) }}
+
+  <p>Use the NHS login reverse button when placing the button on a dark background.</p>
+
   <h2 id="when-to-use-buttons">When to use buttons</h2>
   <p>Use buttons to start or save transactional journeys.</p>
 
diff --git a/app/views/design-system/components/buttons/login-reverse/index.njk b/app/views/design-system/components/buttons/login-reverse/index.njk
new file mode 100644
index 000000000..965bb2ff7
--- /dev/null
+++ b/app/views/design-system/components/buttons/login-reverse/index.njk
@@ -0,0 +1,6 @@
+{% from 'button/macro.njk' import button %}
+
+{{ button({
+  text: "Continue",
+  classes: "nhsuk-button--login nhsuk-button--login-reverse"
+}) }}
diff --git a/app/views/design-system/components/buttons/login/index.njk b/app/views/design-system/components/buttons/login/index.njk
new file mode 100644
index 000000000..7822d19d3
--- /dev/null
+++ b/app/views/design-system/components/buttons/login/index.njk
@@ -0,0 +1,6 @@
+{% from 'button/macro.njk' import button %}
+
+{{ button({
+  text: "Continue",
+  classes: "nhsuk-button--login"
+}) }}
diff --git a/package-lock.json b/package-lock.json
index ae57d4905..011c18ce9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "highlight.js": "^11.2.0",
         "js-beautify": "^1.14.0",
         "lunr": "^2.3.9",
-        "nhsuk-frontend": "^9.1.0",
+        "nhsuk-frontend": "github:nhsuk/nhsuk-frontend#pull/992/head",
         "nunjucks": "^3.2.4"
       },
       "devDependencies": {
@@ -10684,8 +10684,8 @@
     },
     "node_modules/nhsuk-frontend": {
       "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/nhsuk-frontend/-/nhsuk-frontend-9.1.0.tgz",
-      "integrity": "sha512-z2hcZDUDz12hjBTWLasq5lfX+sv2jwZFkUdip8qL9fBQ6qykyQFQ8PjWuBBgQN03IU0wMkV3BBLbwBjFiSxREQ==",
+      "resolved": "git+ssh://git@github.com/nhsuk/nhsuk-frontend.git#26cbf79f966c86b472b843a105ca6c4949a700cc",
+      "license": "MIT",
       "engines": {
         "node": ">=20.0.0"
       }
diff --git a/package.json b/package.json
index c96f1097f..7e6fe14b5 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "js-beautify": "^1.14.0",
     "lunr": "^2.3.9",
     "nhsuk-frontend": "^9.1.0",
+    "nhsuk-frontend": "github:nhsuk/nhsuk-frontend#pull/992/head",
     "nunjucks": "^3.2.4"
   },
   "devDependencies": {