diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd7ce124eb..70b2bf761d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,44 @@
 
 ## Unreleased
 
+:new: **New features**
+
+#### New header with account section
+
+We’ve updated the header component to support account information and links. As part of this work we’ve also made some other improvements to the header, detailed below:
+
+- Show account information and links in the header.
+- Show currently active section or page in the navigation.
+- Remove hardcoded home link from the navigation.
+- Align navigation items to the left by default.
+- Update navigation label from ’Primary navigation’ to ‘Menu’, and remove superfluous `role` and `id` attributes.
+- Update NHS logo in the header to have higher contrast when focused.
+- Refactor CSS classes and BEM naming, use hidden attributes instead of modifier classes, use generic search element.
+
+This was added in [pull request #1058: New header with account section](https://github.com/nhsuk/nhsuk-frontend/pull/1058).
+
 :boom: **Breaking changes**
 
 You must make the following changes when you migrate to this release, or your service might break.
 
+#### Update header component params
+
+If you’re using the `header` Nunjucks macro in your service, you must:
+
+- Remove the boolean `showNav`, `showSearch`, `transactional` and `transactionalService` options from the header component as respective parts of the header are shown automatically when `primaryLinks` or `search` options are provided.
+- Remove the `.nhsuk-header__navigation-list--left-aligned` modifier class, navigation items are now aligned left by default.
+- Replace the `searchAction` option with the nested `search.action` option.
+- Replace the `searchInputName` option with the nested `search.name` option.
+- Replace the `primaryLinks` option with the nested `navigation.items` option, using `text` and `href` instead of `label` and `url`.
+
+To restore the previous justified alignment, where navigation items appeared evenly spaced out, add the new `nhsuk-header__navigation--justified` modifier class to the nested `navigation.classes` option.
+
+#### Update header component HTML markup
+
+You do not need to do anything if you’re using Nunjucks macros.
+
+If you are not using Nunjucks macros, update your HTML markup using the [header examples in the NHS digital service manual](https://service-manual.nhs.uk/design-system/components/header).
+
 #### Rename component `HTML` param to `html`
 
 If you're using the `card`, `details`, `insetText` or `warningCallout` Nunjucks macros, you need to rename the `HTML` param to `html`.
diff --git a/app/_templates/example.njk b/app/_templates/example.njk
index 84f5800806..fa2cb11c99 100644
--- a/app/_templates/example.njk
+++ b/app/_templates/example.njk
@@ -1,2 +1,6 @@
 {% extends 'layout.njk' %}
+
 {% set htmlAttributes = {"style": "background-color: #f0f4f5;"} %}
+
+{# Turn the skip link off #}
+{% block skipLink %}{% endblock %}
diff --git a/app/components/all.njk b/app/components/all.njk
index 595e56d18f..d6ef2f8477 100644
--- a/app/components/all.njk
+++ b/app/components/all.njk
@@ -3,38 +3,33 @@
 {% set title = 'Components' %}
 
 {% block header %}
-  {{ skipLink({
-    "URL": "#maincontent",
-    "heading": "Skip to main content"
-  }) }}
-
   {{ header({
-      "showNav": "true",
-      "showSearch": "true",
-      "primaryLinks": [
+    search: true,
+    navigation: {
+      items: [
         {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z"
+          href: "https://www.nhs.uk/conditions",
+          text: "Health A to Z"
         },
         {
-          'url' : 'https://www.nhs.uk/live-well/',
-          'label' : 'Live Well'
+          href: 'https://www.nhs.uk/live-well/',
+          text: 'Live Well'
         },
         {
-          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
+          href: 'https://www.nhs.uk/conditions/social-care-and-support/',
+          text: 'Care and support'
         },
         {
-          'url'  : 'https://www.nhs.uk/news/',
-          'label' : 'Health news'
+          href: 'https://www.nhs.uk/news/',
+          text: 'Health news'
         },
         {
-          'url' : 'https://www.nhs.uk/service-search',
-          'label' : 'Services near you'
+          href: 'https://www.nhs.uk/service-search',
+          text: 'Services near you'
         }
       ]
-    })
-  }}
+    }
+  }) }}
 {% endblock %}
 
 {% block beforeContent %}
@@ -45,7 +40,7 @@
         href: "#"
       },
       {
-        text: "Health A-Z",
+        text: "Health A to Z",
         href: "#"
       }
     ]
diff --git a/app/components/header/header-account-logged-in.njk b/app/components/header/header-account-logged-in.njk
new file mode 100644
index 0000000000..9e1b3f2adb
--- /dev/null
+++ b/app/components/header/header-account-logged-in.njk
@@ -0,0 +1,49 @@
+{% set title = "Header with account (logged in)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    service: {
+      text: "Manage patients"
+    },
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "florence.nightingale@nhs.net",
+          icon: true
+        },
+        {
+          action: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    navigation: {
+      items: [
+        {
+          href: "#",
+          text: "Home"
+        },
+        {
+          href: "#",
+          text: "Services"
+        },
+        {
+          href: "#",
+          text: "Your health"
+        },
+        {
+          href: "#",
+          text: "Messages"
+        }, {
+          href: "#",
+          text: "Help and support"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-account-logged-out.njk b/app/components/header/header-account-logged-out.njk
new file mode 100644
index 0000000000..5f1e597990
--- /dev/null
+++ b/app/components/header/header-account-logged-out.njk
@@ -0,0 +1,21 @@
+{% set title = "Header with account (logged out)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    service: {
+      text: "Manage patients"
+    },
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "Log in"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-account-rbac.njk b/app/components/header/header-account-rbac.njk
new file mode 100644
index 0000000000..2adaedf9e8
--- /dev/null
+++ b/app/components/header/header-account-rbac.njk
@@ -0,0 +1,53 @@
+{% set title = "Header with account (logged in, RBAC)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    service: {
+      text: "Manage patients"
+    },
+    search: {
+      placeholder: "NHS number, date of birth",
+      visuallyHiddenLabel: "Search for a user"
+    },
+    account: {
+      items: [
+        {
+          href: "#",
+          text: "Florence Nightingale",
+          icon: true
+        },
+        {
+          text: "RA Manager, Hull and East Yorkshire Hospitals NHS Trust (RWA)"
+        },
+        {
+          href: "#",
+          text: "Change role"
+        },
+        {
+          action: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    navigation: {
+      items: [
+        {
+          href: "#",
+          text: "Home"
+        },
+        {
+          href: "#",
+          text: "Create user"
+        },
+        {
+          href: "#",
+          text: "Find user"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-logo.njk b/app/components/header/header-logo.njk
index b0b0866234..32b74c6a35 100644
--- a/app/components/header/header-logo.njk
+++ b/app/components/header/header-logo.njk
@@ -3,11 +3,5 @@
 {% extends 'example.njk' %}
 
 {% block main %}
-
-  {{ header({
-      "showNav": "false",
-      "showSearch": "false"
-    })
-  }}
-
+  {{ header() }}
 {% endblock %}
diff --git a/app/components/header/header-navigation-justified.njk b/app/components/header/header-navigation-justified.njk
new file mode 100644
index 0000000000..c23728f141
--- /dev/null
+++ b/app/components/header/header-navigation-justified.njk
@@ -0,0 +1,40 @@
+{% set title = 'Header with navigation' %}
+{% from 'components/header/macro.njk' import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    navigation: {
+      classes: "nhsuk-header__navigation--justified",
+      items: [
+        {
+          href: "#",
+          text: "Health A to Z"
+        },
+        {
+          href: "#",
+          text: "Live Well"
+        },
+        {
+          href: "#",
+          text: "Mental health"
+        },
+        {
+          href: "#",
+          text: "Care and support"
+        },
+        {
+          href: "#",
+          text: "Pregnancy",
+          active: true
+        },
+        {
+          href: "#",
+          text: "NHS services"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-navigation.njk b/app/components/header/header-navigation.njk
index daae074f8d..fc88418c07 100644
--- a/app/components/header/header-navigation.njk
+++ b/app/components/header/header-navigation.njk
@@ -5,39 +5,35 @@
 {% block main %}
 
   {{ header({
-      "showNav": "true",
-      "showSearch": "false",
-      "primaryLinks": [
+    navigation: {
+      items: [
         {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z",
-          "classes": "app-header__navigation-item--current",
-          "attributes": {
-            "aria-current": "true"
-          }
+          href: "#",
+          text: "Health A to Z"
         },
         {
-          'url' : 'https://www.nhs.uk/live-well/',
-          'label' : 'Live Well'
+          href: "#",
+          text: "Live Well"
         },
         {
-          'url' : 'https://www.nhs.uk/mental-health/',
-          'label' : 'Mental health'
+          href: "#",
+          text: "Mental health"
         },
         {
-          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
+          href: "#",
+          text: "Care and support"
         },
         {
-          'url'  : 'https://www.nhs.uk/pregnancy/',
-          'label' : 'Pregnancy'
+          href: "#",
+          text: "Pregnancy",
+          active: true
         },
         {
-          'url' : 'https://www.nhs.uk/nhs-services/',
-          'label' : 'NHS services'
+          href: "#",
+          text: "NHS services"
         }
       ]
-    })
-  }}
+    }
+  }) }}
 
 {% endblock %}
diff --git a/app/components/header/header-org-white-account.njk b/app/components/header/header-org-white-account.njk
new file mode 100644
index 0000000000..ba32189f97
--- /dev/null
+++ b/app/components/header/header-org-white-account.njk
@@ -0,0 +1,59 @@
+{% set title = "Header organisational with white header and account" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    classes: "nhsuk-header--white nhsuk-header--white-navigation",
+    logo: {
+      href: "#"
+    },
+    organisation: {
+      name: "Anytown Anyplace",
+      split: "Anywhere",
+      descriptor: "NHS Foundation Trust"
+    },
+    search: {
+      visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+    },
+    account: {
+      items: [
+        {
+          text: "Florence Nightingale",
+          icon: true
+        },
+        {
+          action: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    navigation: {
+      items: [
+        {
+          href: "#",
+          text: "Your hospital visit"
+        },
+        {
+          href: "#",
+          text: "Wards and departments",
+          active: true
+        },
+        {
+          href: "#",
+          text: "Conditions and treatments"
+        },
+        {
+          href: "#",
+          text: "Our people"
+        },
+        {
+          href: "#",
+          text: "Our research"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-org-white-nav.njk b/app/components/header/header-org-white-nav.njk
index 9ee052d73a..6d539781ff 100644
--- a/app/components/header/header-org-white-nav.njk
+++ b/app/components/header/header-org-white-nav.njk
@@ -4,38 +4,44 @@
 
 {% block main %}
 
-{{ header({
-    "showNav": "true",
-    "showSearch": "true",
-    "classes": "nhsuk-header--white nhsuk-header--white-nav",
-    "organisation": {
-      "name": "Anytown Anyplace",
-      "split": "Anywhere",
-      "descriptor": "NHS Foundation Trust"
+  {{ header({
+    classes: "nhsuk-header--white nhsuk-header--white-navigation",
+    logo: {
+      href: "#"
     },
-    "primaryLinks": [
-      {
-        "url"  : "#",
-        "label" : "Your hospital visit"
-      },
-      {
-        'url' : '#',
-        'label' : 'Wards and departments'
-      },
-      {
-        'url'  : '#',
-        'label' : 'Conditions and treatments'
-      },
-      {
-        'url'  : '#',
-        'label' : 'Our people'
-      },
-      {
-        'url' : '#',
-        'label' : 'Our research'
-      }
-    ]
-  })
-}}
+    organisation: {
+      name: "Anytown Anyplace",
+      split: "Anywhere",
+      descriptor: "NHS Foundation Trust"
+    },
+    search: {
+      visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+    },
+    navigation: {
+      items: [
+        {
+          href: "#",
+          text: "Your hospital visit"
+        },
+        {
+          href: "#",
+          text: "Wards and departments",
+          active: true
+        },
+        {
+          href: "#",
+          text: "Conditions and treatments"
+        },
+        {
+          href: "#",
+          text: "Our people"
+        },
+        {
+          href: "#",
+          text: "Our research"
+        }
+      ]
+    }
+  }) }}
 
 {% endblock %}
diff --git a/app/components/header/header-org-white.njk b/app/components/header/header-org-white.njk
index 8c2e0ff5f7..5ac8c00422 100644
--- a/app/components/header/header-org-white.njk
+++ b/app/components/header/header-org-white.njk
@@ -4,38 +4,44 @@
 
 {% block main %}
 
-{{ header({
-    "showNav": "true",
-    "showSearch": "true",
-    "classes": "nhsuk-header--white",
-    "organisation": {
-      "name": "Anytown Anyplace",
-      "split": "Anywhere",
-      "descriptor": "NHS Foundation Trust"
+  {{ header({
+    classes: "nhsuk-header--white",
+    logo: {
+      href: "#"
     },
-    "primaryLinks": [
-      {
-        "url"  : "#",
-        "label" : "Your hospital visit"
-      },
-      {
-        'url' : '#',
-        'label' : 'Wards and departments'
-      },
-      {
-        'url'  : '#',
-        'label' : 'Conditions and treatments'
-      },
-      {
-        'url'  : '#',
-        'label' : 'Our people'
-      },
-      {
-        'url' : '#',
-        'label' : 'Our research'
-      }
-    ]
-  })
-}}
+    organisation: {
+      name: "Anytown Anyplace",
+      split: "Anywhere",
+      descriptor: "NHS Foundation Trust"
+    },
+    search: {
+      visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+    },
+    navigation: {
+      items: [
+        {
+          href: "#",
+          text: "Your hospital visit"
+        },
+        {
+          href: "#",
+          text: "Wards and departments",
+          active: true
+        },
+        {
+          href: "#",
+          text: "Conditions and treatments"
+        },
+        {
+          href: "#",
+          text: "Our people"
+        },
+        {
+          href: "#",
+          text: "Our research"
+        }
+      ]
+    }
+  }) }}
 
 {% endblock %}
diff --git a/app/components/header/header-org.njk b/app/components/header/header-org.njk
index 39ece71853..e7b1ac8b04 100644
--- a/app/components/header/header-org.njk
+++ b/app/components/header/header-org.njk
@@ -4,37 +4,43 @@
 
 {% block main %}
 
-{{ header({
-    "showNav": "true",
-    "showSearch": "true",
-    "organisation": {
-      "name": "Anytown Anyplace",
-      "split": "Anywhere",
-      "descriptor": "NHS Foundation Trust"
+  {{ header({
+    logo: {
+      href: "#"
     },
-    "primaryLinks": [
-      {
-        "url"  : "#",
-        "label" : "Your hospital visit"
-      },
-      {
-        'url' : '#',
-        'label' : 'Wards and departments'
-      },
-      {
-        'url'  : '#',
-        'label' : 'Conditions and treatments'
-      },
-      {
-        'url'  : '#',
-        'label' : 'Our people'
-      },
-      {
-        'url' : '#',
-        'label' : 'Our research'
-      }
-    ]
-  })
-}}
+    organisation: {
+      name: "Anytown Anyplace",
+      split: "Anywhere",
+      descriptor: "NHS Foundation Trust"
+    },
+    search: {
+      visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+    },
+    navigation: {
+      items: [
+        {
+          href: "#",
+          text: "Your hospital visit"
+        },
+        {
+          href: "#",
+          text: "Wards and departments",
+          active: true
+        },
+        {
+          href: "#",
+          text: "Conditions and treatments"
+        },
+        {
+          href: "#",
+          text: "Our people"
+        },
+        {
+          href: "#",
+          text: "Our research"
+        }
+      ]
+    }
+  }) }}
 
 {% endblock %}
diff --git a/app/components/header/header-search.njk b/app/components/header/header-search.njk
index b0a141fcc0..605cecd247 100644
--- a/app/components/header/header-search.njk
+++ b/app/components/header/header-search.njk
@@ -5,35 +5,7 @@
 {% block main %}
 
   {{ header({
-      "showNav": "false",
-      "showSearch": "true",
-      "primaryLinks": [
-        {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z"
-        },
-        {
-          'url' : 'https://www.nhs.uk/live-well/',
-          'label' : 'Live Well'
-        },
-        {
-          'url' : 'https://www.nhs.uk/mental-health/',
-          'label' : 'Mental health'
-        },
-        {
-          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
-        },
-        {
-          'url'  : 'https://www.nhs.uk/pregnancy/',
-          'label' : 'Pregnancy'
-        },
-        {
-          'url' : 'https://www.nhs.uk/nhs-services/',
-          'label' : 'NHS services'
-        }
-      ]
-    })
-  }}
+    search: true
+  }) }}
 
 {% endblock %}
diff --git a/app/components/header/header-service-name-combined-with-logo.njk b/app/components/header/header-service-name-combined-with-logo.njk
new file mode 100644
index 0000000000..ad883731e0
--- /dev/null
+++ b/app/components/header/header-service-name-combined-with-logo.njk
@@ -0,0 +1,14 @@
+{% set title = "Header with service name as a combined link" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    service: {
+      text: "Prototype kit",
+      href: "#"
+    }
+  }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-service-name-unlinked.njk b/app/components/header/header-service-name-unlinked.njk
new file mode 100644
index 0000000000..cb32c4c6c5
--- /dev/null
+++ b/app/components/header/header-service-name-unlinked.njk
@@ -0,0 +1,17 @@
+{% set title = "Header with unlinked service name" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    logo: {
+      href: "#",
+      ariaLabel: "NHS homepage"
+    },
+    service: {
+      text: "Find your NHS number"
+    }
+  }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-service-name-with-account-search-nav.njk b/app/components/header/header-service-name-with-account-search-nav.njk
new file mode 100644
index 0000000000..859ca9a17a
--- /dev/null
+++ b/app/components/header/header-service-name-with-account-search-nav.njk
@@ -0,0 +1,49 @@
+{% set title = "Header with account, navigation and search" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+  {{ header({
+    service: {
+      text: "Search patient directory",
+      href: "#"
+    },
+    search: {
+      visuallyHiddenLabel: "Search patient directory"
+    },
+    account: {
+      items: [
+        {
+          text: "Florence Nightingale",
+          icon: true
+        },
+        {
+          action: "#",
+          text: "Log out"
+        }
+      ]
+    },
+    navigation: {
+      items: [
+        {
+          href: "#",
+          text: "Home"
+        },
+        {
+          href: "#",
+          text: "Patient list"
+        },
+        {
+          href: "#",
+          text: "Advanced search"
+        },
+        {
+          href: "#",
+          text: "Help guides"
+        }
+      ]
+    }
+  }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-service-name-with-nav.njk b/app/components/header/header-service-name-with-nav.njk
index 5b1ba1e788..39fdc7565f 100644
--- a/app/components/header/header-service-name-with-nav.njk
+++ b/app/components/header/header-service-name-with-nav.njk
@@ -5,34 +5,40 @@
 {% block main %}
 
   {{ header({
-    "service": {
-      "name": "Digital service manual"
+    logo: {
+      href: "#"
     },
-    "showNav": "true",
-    "showSearch": "true",
-    "primaryLinks": [
+    service: {
+      text: "Digital service manual",
+      href: "#"
+    },
+    search: {
+      visuallyHiddenLabel: "Search the NHS digital service manual"
+    },
+    navigation: {
+      items: [
         {
-          "url"  : "#",
-          "label" : "Standards and technology"
+          href: "#",
+          text: "Standards and technology"
         },
         {
-          'url' : '#',
-          'label' : 'Design system'
+          href: "#",
+          text: "Design system",
+          current: true
         },
         {
-          'url'  : '#',
-          'label' : 'Content style guide'
+          href: "#",
+          text: "Content style guide"
         },
         {
-          'url'  : '#',
-          'label' : 'Accessibility'
+          href: "#",
+          text: "Accessibility"
         },
         {
-          'url' : '#',
-          'label' : 'Community and contribution'
+          href: "#",
+          text: "Community and contribution"
         }
       ]
-    })
-  }}
-
+    }
+  }) }}
 {% endblock %}
diff --git a/app/components/header/header-service-name.njk b/app/components/header/header-service-name.njk
index e8b5ee02d3..17f8e3412b 100644
--- a/app/components/header/header-service-name.njk
+++ b/app/components/header/header-service-name.njk
@@ -5,10 +5,14 @@
 {% block main %}
 
   {{ header({
-      "service": {
-        "name": "Prototype kit"
-      }
-    })
-  }}
+    logo: {
+      href: "#nhs",
+      ariaLabel: "NHS homepage"
+    },
+    service: {
+      text: "Find your NHS number",
+      href: "#"
+    }
+  }) }}
 
 {% endblock %}
diff --git a/app/components/header/header-transactional-service-name.njk b/app/components/header/header-transactional-service-name.njk
deleted file mode 100644
index a711bc518d..0000000000
--- a/app/components/header/header-transactional-service-name.njk
+++ /dev/null
@@ -1,16 +0,0 @@
-{% set title = 'Header transactional with service name' %}
-{% from 'components/header/macro.njk' import header %}
-{% extends 'example.njk' %}
-
-{% block main %}
-
-  {{ header({
-      "transactionalService": {
-        "name": "Find your NHS number"
-      },
-      "showNav": "false",
-      "showSearch": "false"
-    })
-  }}
-
-{% endblock %}
diff --git a/app/components/header/index.njk b/app/components/header/index.njk
index 56279572f6..61b286a1af 100644
--- a/app/components/header/index.njk
+++ b/app/components/header/index.njk
@@ -5,35 +5,38 @@
 {% block main %}
 
   {{ header({
-      "showNav": "true",
-      "showSearch": "true",
-      "primaryLinks": [
+    logo: {
+      href: "#"
+    },
+    search: true,
+    navigation: {
+      items: [
         {
-          "url"  : "https://www.nhs.uk/conditions",
-          "label" : "Health A-Z"
+          href: "#",
+          text: "Health A to Z"
         },
         {
-          'url' : 'https://www.nhs.uk/live-well/',
-          'label' : 'Live Well'
+          href: "#",
+          text: "Live Well"
         },
         {
-          'url' : 'https://www.nhs.uk/mental-health/',
-          'label' : 'Mental health'
+          href: "#",
+          text: "Mental health"
         },
         {
-          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-          'label' : 'Care and support'
+          href: "#",
+          text: "Care and support"
         },
         {
-          'url'  : 'https://www.nhs.uk/pregnancy/',
-          'label' : 'Pregnancy'
+          href: "#",
+          text: "Pregnancy"
         },
         {
-          'url' : 'https://www.nhs.uk/nhs-services/',
-          'label' : 'NHS services'
+          href: "#",
+          text: "NHS services"
         }
       ]
-    })
-  }}
+    }
+  }) }}
 
 {% endblock %}
diff --git a/app/index.njk b/app/index.njk
index 79fabce3cb..eb42f8b4e0 100644
--- a/app/index.njk
+++ b/app/index.njk
@@ -91,12 +91,18 @@
         <li><a href="components/header/index.html">Header (default)</a></li>
         <li><a href="components/header/header-navigation.html">Header with navigation</a></li>
         <li><a href="components/header/header-search.html">Header with search</a></li>
-        <li><a href="components/header/header-logo.html">Header with logo only</a></li>
+        <li><a href="components/header/header-account-logged-in.html">Header with account (logged in)</a></li>
+        <li><a href="components/header/header-account-logged-out.html">Header with account (logged out)</a></li>
+        <li><a href="components/header/header-account-rbac.html">Header with account (logged in, RBAC)</a></li>
+        <li><a href="components/header/header-logo.html">Header with unlinked logo only</a></li>
         <li><a href="components/header/header-service-name.html">Header with a service name</a></li>
+        <li><a href="components/header/header-service-name-unlinked.html">Header with an unlinked service name</a></li>
+        <li><a href="components/header/header-service-name-combined-with-logo.html">Header with a service name combined with NHS logo</a></li>
         <li><a href="components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
-        <li><a href="components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
+        <li><a href="components/header/header-service-name-with-account-search-nav.html">Header with a service name, account, search and navigation</a></li>
         <li><a href="components/header/header-org.html">Header organisational</a></li>
         <li><a href="components/header/header-org-white.html">Header organisational with white header</a></li>
+        <li><a href="components/header/header-org-white-account.html">Header organisational with white header and account (logged in)</a></li>
         <li><a href="components/header/header-org-white-nav.html">Header organisational with white header and navigation</a></li>
         <li><a href="components/hero/index.html">Hero</a></li>
         <li><a href="components/hero/hero-image.html">Hero with image</a></li>
diff --git a/backstop.config.js b/backstop.config.js
index c8845847f3..4abda102c2 100644
--- a/backstop.config.js
+++ b/backstop.config.js
@@ -584,7 +584,7 @@ module.exports = {
       ]
     },
     {
-      label: 'Header with navigation',
+      label: 'Header with navigation (left aligned)',
       url: `${BASE_URL}/components/header/header-navigation.html`,
       onReadyScript: 'playwright/onReadyResize.js',
       viewports: [
@@ -594,6 +594,17 @@ module.exports = {
         viewports.get('large-desktop')
       ]
     },
+    {
+      label: 'Header with navigation (justified)',
+      url: `${BASE_URL}/components/header/header-navigation-justified.html`,
+      onReadyScript: 'playwright/onReadyResize.js',
+      viewports: [
+        viewports.get('mobile'),
+        viewports.get('tablet'),
+        viewports.get('desktop'),
+        viewports.get('large-desktop')
+      ]
+    },
     {
       label: 'Header with search',
       url: `${BASE_URL}/components/header/header-search.html`,
@@ -604,6 +615,47 @@ module.exports = {
         viewports.get('large-desktop')
       ]
     },
+    {
+      clickSelector: '.nhsuk-header__search-input',
+      label: 'Header with search (focused search input)',
+      url: `${BASE_URL}/components/header/header-search.html`,
+      viewports: [
+        viewports.get('mobile'),
+        viewports.get('tablet'),
+        viewports.get('desktop'),
+        viewports.get('large-desktop')
+      ]
+    },
+    {
+      label: 'Header with account (logged in)',
+      url: `${BASE_URL}/components/header/header-account-logged-in.html`,
+      viewports: [
+        viewports.get('mobile'),
+        viewports.get('tablet'),
+        viewports.get('desktop'),
+        viewports.get('large-desktop')
+      ]
+    },
+    {
+      label: 'Header with account (logged out)',
+      url: `${BASE_URL}/components/header/header-account-logged-out.html`,
+      viewports: [
+        viewports.get('mobile'),
+        viewports.get('tablet'),
+        viewports.get('desktop'),
+        viewports.get('large-desktop')
+      ]
+    },
+    {
+      label: 'Header with account (logged in, RBAC)',
+      url: `${BASE_URL}/components/header/header-account-rbac.html`,
+      viewports: [
+        viewports.get('mobile'),
+        viewports.get('tablet'),
+        viewports.get('desktop'),
+        viewports.get('large-desktop')
+      ]
+    },
     {
       label: 'Header with logo only',
       url: `${BASE_URL}/components/header/header-logo.html`,
@@ -636,8 +688,8 @@ module.exports = {
       ]
     },
     {
-      label: 'Header transactional with service name',
-      url: `${BASE_URL}/components/header/header-transactional-service-name.html`,
+      label: 'Header with account, navigation and search',
+      url: `${BASE_URL}/components/header/header-service-name-with-account-search-nav.html`,
       viewports: [
         viewports.get('mobile'),
         viewports.get('tablet'),
@@ -667,6 +719,18 @@ module.exports = {
         viewports.get('large-desktop')
       ]
     },
+    {
+      clickSelector: '.nhsuk-header__search-input',
+      label: 'Header organisational with white header (focused search input)',
+      url: `${BASE_URL}/components/header/header-org-white.html`,
+      onReadyScript: 'playwright/onReadyResize.js',
+      viewports: [
+        viewports.get('mobile'),
+        viewports.get('tablet'),
+        viewports.get('desktop'),
+        viewports.get('large-desktop')
+      ]
+    },
     {
       label: 'Header organisational with white header, navigation',
       url: `${BASE_URL}/components/header/header-org-white-nav.html`,
@@ -678,6 +742,16 @@ module.exports = {
         viewports.get('large-desktop')
       ]
     },
+    {
+      label: 'Header organisational with white header and account',
+      url: `${BASE_URL}/components/header/header-org-white-account.html`,
+      viewports: [
+        viewports.get('mobile'),
+        viewports.get('tablet'),
+        viewports.get('desktop'),
+        viewports.get('large-desktop')
+      ]
+    },
     {
       clickSelector: '#toggle-menu',
       label: 'Header with navigation open',
diff --git a/packages/assets/icons/icon-user.svg b/packages/assets/icons/icon-user.svg
new file mode 100644
index 0000000000..6bf2120da4
--- /dev/null
+++ b/packages/assets/icons/icon-user.svg
@@ -0,0 +1,3 @@
+<svg class="nhsuk-icon nhsuk-icon__user" xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/components/components.unit.test.mjs b/packages/components/components.unit.test.mjs
index f43063f6f6..0f5b0ac2a2 100644
--- a/packages/components/components.unit.test.mjs
+++ b/packages/components/components.unit.test.mjs
@@ -32,10 +32,6 @@ describe('Components', () => {
         @forward "components/fieldset/fieldset";
         @forward "components/footer/footer";
         @forward "components/header/header";
-        @forward "components/header/header-organisation";
-        @forward "components/header/header-service";
-        @forward "components/header/header-transactional";
-        @forward "components/header/header-white";
         @forward "components/hero/hero";
         @forward "components/hint/hint";
         @forward "components/images/images";
diff --git a/packages/components/header/_header-base.scss b/packages/components/header/_header-base.scss
deleted file mode 100644
index 1d41c0449d..0000000000
--- a/packages/components/header/_header-base.scss
+++ /dev/null
@@ -1,555 +0,0 @@
-@use "sass:math";
-@use "../../core/objects" as *;
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Header component
-///
-/// The behaviour with regards to responsiveness is as follow:
-///
-/// - Mobile to tablet view
-///   Menu toggle button visible and navigation links hidden, search toggle
-///   button visible and search form hidden
-///
-/// - Tablet to desktop view
-///   Menu toggle button visible and navigation links hidden, search toggle
-///   button hidden and search form visible
-///
-/// - Desktop+ view
-///   Menu toggle button hidden and navigation links visible, search toggle
-///   button hidden and search form visible
-///
-/// @group components
-////
-
-.nhsuk-header {
-  background-color: $color_nhsuk-blue;
-}
-
-.nhsuk-header__container {
-  padding: 20px 0;
-  @include nhsuk-width-container;
-
-  @include nhsuk-media-query($from: tablet) {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-.nhsuk-header__logo {
-  @include nhsuk-media-query($until: tablet) {
-    position: relative;
-    z-index: 1;
-  }
-
-  .nhsuk-logo__background {
-    fill: $color_nhsuk-white;
-
-    @include nhsuk-media-query($media-type: print) {
-      fill: $color_nhsuk-blue;
-    }
-  }
-
-  .nhsuk-logo__text {
-    fill: $color_nhsuk-blue;
-
-    @include nhsuk-media-query($media-type: print) {
-      fill: $color_nhsuk-white;
-    }
-  }
-
-  @include nhsuk-media-query($from: tablet) {
-    padding-left: 0;
-  }
-
-  .nhsuk-logo {
-    @include nhsuk-logo-size;
-    border: 0;
-  }
-
-  @include nhsuk-media-query($until: desktop) {
-    max-width: 60%;
-  }
-
-  @media (max-width: 450px) {
-    max-width: 50%;
-  }
-}
-
-.nhsuk-header__link {
-  display: block;
-  @include nhsuk-logo-size;
-  @include nhsuk-link-style-white;
-
-  &:hover {
-    .nhsuk-logo {
-      box-shadow: 0 0 0 $nhsuk-focus-width $color_shade_nhsuk-blue-35;
-    }
-  }
-
-  &:focus {
-    box-shadow: none;
-
-    .nhsuk-logo {
-      box-shadow:
-        0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
-        0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
-    }
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    background-color: transparent;
-  }
-
-  @include nhsuk-media-query($media-type: print) {
-    &::after {
-      content: "";
-    }
-  }
-}
-
-.nhsuk-header__logo--only {
-  max-width: 100%;
-
-  @include nhsuk-media-query($from: tablet) {
-    .nhsuk-header__link--service {
-      align-items: center;
-      display: flex;
-      -ms-flex-align: center;
-      margin-bottom: 0;
-      width: auto;
-    }
-
-    .nhsuk-header__service-name {
-      padding-left: nhsuk-spacing(3);
-    }
-  }
-}
-
-.nhsuk-header__content {
-  position: relative;
-  @include nhsuk-print-hide;
-
-  &.js-show {
-    border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5;
-  }
-
-  @include nhsuk-media-query($from: tablet) {
-    &.js-show {
-      border-bottom: 0;
-    }
-  }
-}
-
-.nhsuk-header__search {
-  position: relative;
-  text-align: right;
-
-  @include nhsuk-media-query($from: tablet) {
-    margin-left: nhsuk-spacing(2);
-  }
-}
-
-.nhsuk-header__search-form {
-  height: 100%;
-  overflow: visible;
-
-  @include nhsuk-media-query($until: tablet) {
-    display: flex;
-    margin: nhsuk-spacing(3) 0 0;
-    position: relative;
-    width: 100%;
-  }
-}
-
-.nhsuk-header__search-wrap {
-  @include nhsuk-media-query($from: tablet) {
-    display: block;
-  }
-}
-
-.nhsuk-search__input {
-  -webkit-appearance: listbox;
-  border-bottom-left-radius: $nhsuk-border-radius;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: $nhsuk-border-radius;
-  border-top-right-radius: 0;
-  padding: 0 nhsuk-spacing(3);
-
-  &:focus {
-    border: nhsuk-spacing(1) solid $nhsuk-focus-text-color;
-    box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color;
-    outline: $nhsuk-focus-width solid transparent;
-    outline-offset: $nhsuk-focus-width;
-    padding: 0 13px;
-  }
-
-  &::placeholder {
-    color: $color_nhsuk-grey-1;
-    font-size: $nhsuk-base-font-size;
-    opacity: 1; // fixes low contrast of placeholder text in firefox
-  }
-
-  &:-ms-input-placeholder {
-    color: $color_nhsuk-grey-1;
-    font-size: $nhsuk-base-font-size;
-  }
-
-  &::-webkit-input-placeholder {
-    color: $color_nhsuk-grey-1;
-    font-size: $nhsuk-base-font-size;
-  }
-
-  @include nhsuk-media-query($until: tablet) {
-    border: 1px solid $color_nhsuk-white;
-    border-bottom-right-radius: $nhsuk-border-radius;
-    border-top-right-radius: $nhsuk-border-radius;
-    flex-grow: 2;
-    -ms-flex-positive: 2;
-    font-size: inherit;
-    height: 40px;
-    margin: 0;
-    outline: none;
-    width: 100%;
-    z-index: 1;
-  }
-
-  @include nhsuk-media-query($from: tablet) {
-    border: 1px solid $color_nhsuk-white;
-    font-size: $nhsuk-base-font-size;
-    height: nhsuk-spacing(6);
-    width: 200px;
-  }
-
-  @include nhsuk-media-query($from: desktop) {
-    width: 235px;
-  }
-}
-
-.nhsuk-search__submit {
-  border: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: $nhsuk-border-radius;
-  border-top-left-radius: 0;
-  border-top-right-radius: $nhsuk-border-radius;
-  float: right;
-  font-size: inherit;
-  line-height: inherit;
-  outline: none;
-  padding: 0;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  @include nhsuk-media-query($until: tablet) {
-    background-color: $color_nhsuk-grey-5;
-    border: 0;
-    height: 40px;
-    margin: 0;
-    padding: nhsuk-spacing(2) nhsuk-spacing(2) 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 9;
-
-    .nhsuk-icon__search {
-      fill: $color_nhsuk-blue;
-      height: 27px;
-      width: 27px;
-    }
-
-    &:hover {
-      background-color: $color_shade_nhsuk-blue-35;
-      border: 1px solid $color_nhsuk-white;
-
-      .nhsuk-icon {
-        fill: $color_nhsuk-white;
-      }
-    }
-
-    &:focus {
-      background-color: $nhsuk-focus-color;
-      box-shadow:
-        0 -4px $nhsuk-focus-color,
-        0 $nhsuk-focus-width $nhsuk-focus-text-color;
-      outline: $nhsuk-focus-width solid transparent;
-      outline-offset: $nhsuk-focus-width;
-
-      &:hover {
-        background-color: $nhsuk-focus-color;
-
-        .nhsuk-icon {
-          fill: $nhsuk-focus-text-color;
-        }
-      }
-
-      .nhsuk-icon {
-        fill: $nhsuk-focus-text-color;
-      }
-    }
-  }
-
-  @include nhsuk-media-query($from: tablet) {
-    background-color: $color_nhsuk-grey-5;
-    display: block;
-    height: nhsuk-spacing(6);
-    line-height: 1;
-    width: 44px;
-
-    .nhsuk-icon__search {
-      height: 27px;
-      width: 27px;
-    }
-
-    &:hover {
-      background-color: $color_shade_nhsuk-blue-35;
-      border: 1px solid $color_nhsuk-white;
-
-      .nhsuk-icon__search {
-        fill: $color_nhsuk-white;
-      }
-    }
-
-    &:focus {
-      box-shadow:
-        0 -2px $nhsuk-focus-color,
-        0 $nhsuk-focus-width $nhsuk-focus-text-color;
-      @include nhsuk-focused-button;
-    }
-
-    &:active {
-      background-color: $color_shade_nhsuk-blue-50;
-      border: 0;
-
-      .nhsuk-icon__search {
-        fill: $color_nhsuk-white;
-      }
-    }
-  }
-}
-
-.nhsuk-header__navigation-link {
-  border-bottom: nhsuk-spacing(1) solid transparent;
-  border-top: nhsuk-spacing(1) solid transparent;
-  color: $color_nhsuk-white;
-  display: block;
-  padding: nhsuk-spacing(3) 2px;
-  text-decoration: underline;
-  white-space: nowrap;
-  @include nhsuk-font(16);
-  @include nhsuk-link-style-white;
-
-  @include nhsuk-media-query($until: tablet) {
-    font-size: inherit;
-  }
-
-  @include nhsuk-media-query($from: tablet) {
-    padding: 12px 2px;
-  }
-
-  .nhsuk-icon__chevron-right {
-    fill: $color_nhsuk-grey-3;
-    position: absolute;
-    right: nhsuk-spacing(1);
-    top: 11px;
-  }
-
-  &:hover {
-    box-shadow: none;
-    text-decoration: none;
-  }
-
-  &:active,
-  &:focus {
-    background-color: $nhsuk-focus-color;
-    border-bottom: $nhsuk-focus-width solid $nhsuk-focus-text-color;
-    box-shadow: none;
-    color: $nhsuk-focus-text-color;
-    outline: $nhsuk-focus-width solid transparent;
-    outline-offset: $nhsuk-focus-width;
-    text-decoration: none;
-
-    &:hover {
-      background-color: $nhsuk-focus-color;
-      color: $nhsuk-focus-text-color;
-    }
-
-    &:visited {
-      background-color: $nhsuk-focus-color;
-      color: $nhsuk-focus-text-color;
-    }
-  }
-}
-
-// menu toggle button, only shows when screen can't fit all nav items
-.nhsuk-header__menu-toggle {
-  background: transparent;
-  border: 0;
-  border-bottom: nhsuk-spacing(1) solid transparent;
-  border-radius: 0;
-  border-top: nhsuk-spacing(1) solid transparent;
-  box-sizing: border-box;
-  cursor: pointer;
-  margin: 0;
-  overflow: visible;
-  position: relative;
-  right: 0;
-  text-align: center;
-  text-decoration: underline;
-  vertical-align: top;
-  visibility: hidden;
-  width: auto;
-  z-index: 1;
-
-  &.nhsuk-header__navigation-link {
-    padding-right: 23px;
-  }
-
-  .nhsuk-icon__chevron-down {
-    right: -3px;
-  }
-}
-
-.nhsuk-header__menu-toggle--visible {
-  visibility: visible;
-  display: block;
-}
-
-.nhsuk-icon__chevron-down {
-  .nhsuk-header__menu-toggle[aria-expanded="true"] & {
-    transform: rotate(270deg);
-  }
-}
-
-.nhsuk-navigation {
-  @include nhsuk-width-container;
-
-  @include nhsuk-media-query($until: tablet) {
-    position: relative;
-    z-index: 10;
-  }
-
-  @include nhsuk-media-query($from: tablet) {
-    border-top: 1px solid $color_transparent_nhsuk-white-20;
-  }
-}
-
-%nhsuk-navigation-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-// ul of visible nav
-.nhsuk-header__navigation-list {
-  @extend %nhsuk-navigation-list;
-  display: flex;
-  flex-wrap: wrap;
-  width: calc(100% + $nhsuk-gutter-half);
-  margin: 0 math.div($nhsuk-gutter-half, 2) * -1;
-
-  @include nhsuk-media-query($from: tablet) {
-    width: calc(100% + $nhsuk-gutter);
-    margin: 0 math.div($nhsuk-gutter, 2) * -1;
-  }
-
-  @include nhsuk-media-query($from: desktop) {
-    justify-content: space-between;
-  }
-
-  .js-enabled & {
-    flex-wrap: nowrap;
-    overflow: hidden;
-  }
-}
-
-.nhsuk-header__navigation-list--left-aligned {
-  @include nhsuk-media-query($from: desktop) {
-    justify-content: initial;
-  }
-}
-
-.nhsuk-header__navigation-item {
-  margin-bottom: 0;
-  padding: 0 math.div($nhsuk-gutter-half, 2);
-
-  @include nhsuk-media-query($from: tablet) {
-    padding: 0 $nhsuk-gutter-half;
-  }
-}
-
-.nhsuk-navigation-container {
-  position: relative;
-  @include nhsuk-print-hide;
-
-  @include nhsuk-media-query($until: tablet) {
-    margin-top: -20px;
-  }
-}
-
-// ul of hidden nav
-.nhsuk-header__drop-down {
-  @extend %nhsuk-navigation-list;
-  background-color: $color_nhsuk-white;
-  border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5;
-  overflow: hidden;
-  position: absolute;
-  right: 0;
-  top: 100%;
-  left: 0;
-  @include nhsuk-print-hide;
-
-  @include nhsuk-media-query($until: tablet) {
-    margin: 0 $nhsuk-gutter-half * -1;
-  }
-
-  .nhsuk-header__navigation-link {
-    margin: 0;
-    padding: 12px 0;
-    @include nhsuk-width-container;
-    @include nhsuk-link-style-default;
-    @include nhsuk-link-style-no-visited-state;
-
-    &:active,
-    &:focus {
-      color: $nhsuk-focus-text-color;
-    }
-  }
-
-  .nhsuk-header__navigation-item {
-    padding: 0;
-    border-top: 1px solid $color_nhsuk-grey-5;
-  }
-}
-
-.nhsuk-header__drop-down--hidden {
-  display: none;
-}
-
-.nhsuk-mobile-menu-container {
-  align-self: center;
-  display: none;
-  padding: 0 math.div($nhsuk-gutter-half, 2);
-
-  @include nhsuk-media-query($from: desktop) {
-    padding: 0 $nhsuk-gutter-half;
-  }
-}
-
-.nhsuk-mobile-menu-container--visible {
-  display: block;
-}
-
-.nhsuk-header__navigation-item--home {
-  @include nhsuk-media-query($from: desktop) {
-    display: none;
-  }
-}
diff --git a/packages/components/header/_header-organisation.scss b/packages/components/header/_header-organisation.scss
deleted file mode 100644
index 2a074f4f1d..0000000000
--- a/packages/components/header/_header-organisation.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-/// These are the styles for the organisation header variants.
-
-.nhsuk-header--organisation {
-  .nhsuk-header__link {
-    height: auto;
-    text-decoration: none;
-    width: auto;
-
-    &:hover {
-      color: $color_nhsuk-white;
-      text-decoration: underline;
-
-      .nhsuk-logo {
-        box-shadow: none;
-      }
-    }
-
-    &:focus {
-      background: $nhsuk-focus-color;
-      box-shadow:
-        0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
-        0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
-
-      .nhsuk-organisation-name,
-      .nhsuk-organisation-descriptor {
-        color: $nhsuk-focus-text-color;
-      }
-
-      .nhsuk-logo {
-        box-shadow: none;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-
-  .nhsuk-header__logo .nhsuk-logo {
-    @include nhsuk-logo-size-small;
-
-    @media (max-width: 450px) {
-      height: nhsuk-spacing(4);
-      width: 60px;
-    }
-
-    @media (max-width: 375px) {
-      height: 20px;
-      width: 50px;
-    }
-  }
-
-  .nhsuk-header__navigation {
-    max-width: 100%;
-  }
-}
-
-.nhsuk-organisation-name {
-  color: $color_nhsuk-white;
-  display: block;
-  font-size: 22px;
-  font-weight: $nhsuk-font-bold;
-  letter-spacing: 0.2px;
-  line-height: 23px;
-  margin-top: -2px;
-
-  @include nhsuk-media-query($media-type: print) {
-    color: $nhsuk-print-text-color;
-  }
-
-  @media (max-width: 450px) {
-    font-size: 17px;
-    letter-spacing: 0.1px;
-    line-height: 17px;
-  }
-
-  @media (max-width: 375px) {
-    font-size: 13px;
-    line-height: 13px;
-  }
-
-  .nhsuk-organisation-name-split {
-    display: block;
-  }
-}
-
-.nhsuk-organisation-descriptor {
-  color: $color_nhsuk-white;
-  display: block;
-  font-size: 15px;
-  font-weight: $nhsuk-font-bold;
-  line-height: 21px;
-
-  @include nhsuk-media-query($media-type: print) {
-    color: $color_nhsuk-blue;
-  }
-
-  @media (max-width: 450px) {
-    font-size: 12px;
-    line-height: 18px;
-  }
-
-  @media (max-width: 375px) {
-    font-size: 10px;
-    line-height: 13px;
-  }
-}
-
-.nhsuk-organisation-logo {
-  border: 0;
-  max-height: 100px;
-  max-width: 280px;
-
-  @media (max-width: 450px) {
-    max-width: 150px;
-  }
-}
-
-.nhsuk-organisation-logo[src$=".svg"] {
-  height: auto;
-  max-width: 220px;
-  width: 100%;
-}
diff --git a/packages/components/header/_header-service.scss b/packages/components/header/_header-service.scss
deleted file mode 100644
index 2a2abf94eb..0000000000
--- a/packages/components/header/_header-service.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-/// These are the styles for the service header variants.
-
-.nhsuk-header__link--service {
-  height: auto;
-  margin-bottom: -(nhsuk-spacing(1));
-  text-decoration: none;
-  width: auto;
-
-  @include nhsuk-media-query($from: large-desktop) {
-    align-items: center;
-    display: flex;
-    -ms-flex-align: center;
-    margin-bottom: 0;
-    width: auto;
-  }
-
-  &:hover {
-    background: none;
-
-    .nhsuk-header__service-name {
-      text-decoration: underline;
-    }
-  }
-
-  &:focus {
-    background: $nhsuk-focus-color;
-    box-shadow:
-      0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
-      0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
-
-    .nhsuk-header__service-name {
-      color: $nhsuk-focus-text-color;
-      text-decoration: none;
-    }
-
-    .nhsuk-logo {
-      box-shadow: none;
-    }
-  }
-}
-
-.nhsuk-header__service-name {
-  color: $color_nhsuk-white;
-  display: block;
-  padding-left: 0;
-  padding-right: 0;
-
-  @include nhsuk-font(19);
-
-  @include nhsuk-media-query($from: large-desktop) {
-    padding-left: nhsuk-spacing(3);
-  }
-
-  @include nhsuk-media-query($until: large-desktop) {
-    max-width: 220px;
-  }
-}
diff --git a/packages/components/header/_header-transactional.scss b/packages/components/header/_header-transactional.scss
deleted file mode 100644
index f5cf3237e6..0000000000
--- a/packages/components/header/_header-transactional.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@use "../../core/tools" as *;
-
-/// These are the styles for the transactional header variants.
-
-.nhsuk-header__transactional-service-name {
-  margin-bottom: -(nhsuk-spacing(1));
-  padding-left: nhsuk-spacing(3);
-  padding-top: 2px;
-
-  @include nhsuk-media-query($until: tablet) {
-    padding-left: 0;
-    padding-top: nhsuk-spacing(2);
-    width: 100%;
-  }
-}
-
-.nhsuk-header__transactional-service-name--link {
-  @include nhsuk-link-style-white;
-  @include nhsuk-font(19);
-
-  &:link {
-    text-decoration: none;
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.nhsuk-header__transactional {
-  .nhsuk-header__container {
-    justify-content: normal;
-  }
-
-  .nhsuk-header__link {
-    display: block;
-    @include nhsuk-logo-size-small;
-  }
-
-  .nhsuk-logo {
-    @include nhsuk-logo-size-small;
-  }
-}
-
-.nhsuk-header__transactional--logo {
-  max-width: 100%;
-
-  @include nhsuk-media-query($from: tablet) {
-    .nhsuk-header__link--service {
-      align-items: center;
-      display: flex;
-      -ms-flex-align: center;
-      margin-bottom: 0;
-      width: auto;
-    }
-
-    .nhsuk-header__service-name {
-      padding-left: nhsuk-spacing(3);
-    }
-  }
-}
diff --git a/packages/components/header/_header-white.scss b/packages/components/header/_header-white.scss
deleted file mode 100644
index 99b568df85..0000000000
--- a/packages/components/header/_header-white.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-/// These are the styles for the white header variants.
-
-.nhsuk-header--white {
-  background-color: $color_nhsuk-white;
-
-  .nhsuk-header__search-wrap {
-    margin-bottom: nhsuk-spacing(3);
-
-    @include nhsuk-media-query($until: tablet) {
-      &::after {
-        background: $color_nhsuk-white;
-      }
-    }
-  }
-
-  .nhsuk-navigation-container {
-    background-color: $color_nhsuk-blue;
-  }
-
-  .nhsuk-navigation {
-    border-top-width: 0;
-  }
-
-  .nhsuk-logo {
-    .nhsuk-logo__background {
-      fill: $color_nhsuk-blue;
-    }
-
-    .nhsuk-logo__text {
-      fill: $color_nhsuk-white;
-    }
-  }
-
-  .nhsuk-header__link {
-    &:hover {
-      color: $nhsuk-text-color;
-      text-decoration: underline;
-
-      .nhsuk-organisation-descriptor {
-        color: $nhsuk-text-color;
-      }
-    }
-  }
-
-  .nhsuk-search__submit {
-    background-color: $color_nhsuk-blue;
-
-    .nhsuk-icon__search {
-      fill: $color_nhsuk-white;
-    }
-
-    &:hover {
-      background-color: $color_shade_nhsuk-blue-20;
-      border-color: $color_shade_nhsuk-blue-20;
-    }
-
-    &:focus {
-      background-color: $nhsuk-focus-color;
-
-      .nhsuk-icon__search {
-        fill: $nhsuk-focus-text-color;
-      }
-    }
-  }
-
-  .nhsuk-search__input {
-    border: 1px solid $color_nhsuk-grey-3;
-
-    &:focus {
-      border: 2px solid $nhsuk-focus-text-color;
-
-      @include nhsuk-media-query($until: tablet) {
-        border: $nhsuk-focus-width solid $nhsuk-focus-text-color;
-      }
-    }
-  }
-
-  .nhsuk-header__search-form {
-    @include nhsuk-media-query($until: tablet) {
-      padding-top: 0;
-    }
-  }
-
-  .nhsuk-organisation-name {
-    color: nhsuk-shade($color_nhsuk-black, 100%);
-  }
-
-  .nhsuk-organisation-descriptor {
-    color: $color_nhsuk-blue;
-  }
-
-  .nhsuk-header__transactional-service-name--link {
-    color: $color_nhsuk-black;
-  }
-
-  .nhsuk-header__service-name {
-    color: $nhsuk-text-color;
-  }
-}
-
-.nhsuk-header--white-nav {
-  .nhsuk-navigation-container {
-    background-color: $color_nhsuk-white;
-  }
-
-  .nhsuk-navigation {
-    background-color: $color_nhsuk-white;
-    border-top: 1px solid $color_nhsuk-grey-5;
-
-    .nhsuk-header__navigation-link {
-      @include nhsuk-link-style-default;
-      @include nhsuk-link-style-no-visited-state;
-
-      &:active,
-      &:focus {
-        color: $nhsuk-focus-text-color;
-      }
-    }
-  }
-}
diff --git a/packages/components/header/_index.scss b/packages/components/header/_index.scss
index a9e632ca99..f9ae6dde0c 100644
--- a/packages/components/header/_index.scss
+++ b/packages/components/header/_index.scss
@@ -1,5 +1,678 @@
-@forward "header-base";
-@forward "header-organisation";
-@forward "header-service";
-@forward "header-transactional";
-@forward "header-white";
+@use "sass:math";
+@use "../../core/objects" as *;
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+$_header-item-padding: 12px;
+
+////
+/// Header component
+///
+/// The behaviour with regards to responsiveness is as follow:
+///
+/// - Mobile to tablet view
+///   Menu toggle button visible and navigation links hidden, search toggle
+///   button visible and search form hidden
+///
+/// - Tablet to desktop view
+///   Menu toggle button visible and navigation links hidden, search toggle
+///   button hidden and search form visible
+///
+/// - Desktop+ view
+///   Menu toggle button hidden and navigation links visible, search toggle
+///   button hidden and search form visible
+///
+/// @group components
+////
+
+.nhsuk-header {
+  background-color: $color_nhsuk-blue;
+  color: $color_nhsuk-white;
+
+  @include nhsuk-media-query($media-type: print) {
+    color: $color_nhsuk-black;
+  }
+}
+
+.nhsuk-header__container {
+  display: flex;
+  flex-flow: column wrap;
+  gap: nhsuk-spacing(3);
+  padding: nhsuk-spacing(3) 0;
+  @include nhsuk-width-container;
+
+  @include nhsuk-media-query($from: tablet) {
+    flex-direction: row;
+  }
+}
+
+/// Service logo (and optional name)
+
+.nhsuk-header__service,
+.nhsuk-header__service-logo {
+  align-items: center;
+  display: flex;
+  flex-grow: 999;
+  flex-wrap: wrap;
+  gap: nhsuk-spacing(2) nhsuk-spacing(3);
+  margin-right: auto;
+}
+
+.nhsuk-header__service-logo {
+  flex-grow: 0;
+}
+
+.nhsuk-header__service-name {
+  flex-grow: 999;
+  text-wrap: balance;
+  @include nhsuk-font(19, $line-height: 1.1);
+}
+
+.nhsuk-header__service-logo,
+.nhsuk-header__service-name[href] {
+  @include nhsuk-link-style-white;
+
+  &:link {
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  @include nhsuk-media-query($media-type: print) {
+    &::after {
+      content: "";
+    }
+  }
+}
+
+/// Account
+
+.nhsuk-header__account {
+  position: relative;
+  z-index: 10;
+  border-radius: $nhsuk-border-radius;
+  flex-grow: 1;
+
+  .nhsuk-icon__user {
+    height: 24px;
+    width: 24px;
+    flex-shrink: 0;
+  }
+
+  &,
+  &::before {
+    background-color: nhsuk-shade($color_nhsuk-blue, 20%);
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid nhsuk-shade($color_nhsuk-blue, 20%);
+    border-radius: $nhsuk-border-radius + 1px;
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    align-self: start;
+
+    // Expand header account by 1px to ensure the search
+    // input does not appear to be taller when inline
+    &::before {
+      top: -1px;
+      bottom: -1px;
+    }
+  }
+}
+
+.nhsuk-header__account-list {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1px;
+  list-style: none;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.nhsuk-header__account-item {
+  display: flex;
+  flex-grow: 1;
+  gap: nhsuk-spacing(2);
+  margin: 0;
+  outline: 1px solid $color_nhsuk-blue;
+  overflow-wrap: anywhere;
+  padding: nhsuk-spacing(2) $_header-item-padding;
+  @include nhsuk-font(16);
+
+  &:nth-last-child(2) {
+    margin-right: auto;
+  }
+
+  &:last-child {
+    flex-grow: 0;
+  }
+}
+
+.nhsuk-header__account-button,
+.nhsuk-header__account-link {
+  display: flex;
+  gap: nhsuk-spacing(2);
+  overflow-wrap: anywhere;
+  @include nhsuk-link-style-white;
+}
+
+.nhsuk-header__account-button {
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  @include nhsuk-font(16);
+}
+
+/// Search
+
+.nhsuk-header__search {
+  flex-grow: 1;
+  position: relative;
+  z-index: 10;
+
+  @include nhsuk-print-hide;
+
+  .nhsuk-icon__search {
+    height: 28px;
+    width: 28px;
+
+    // Adjust optical alignment due to the handle appearing
+    // to push the magnifying glass circle to the top left
+    margin: 0 -2px -2px 0;
+  }
+}
+
+.nhsuk-header__search-form {
+  display: flex;
+  height: 100%;
+  overflow: visible;
+}
+
+// 1. Disable default search input appearance
+.nhsuk-header__search-input.nhsuk-input {
+  border-color: transparent;
+  border-radius: $nhsuk-border-radius 0 0 $nhsuk-border-radius;
+  height: 40px;
+  margin-right: -$nhsuk-border-width-form-element;
+  padding-right: $_header-item-padding;
+  padding-left: $_header-item-padding - $nhsuk-border-width-form-element;
+  width: 100%;
+  @include nhsuk-font-size(16);
+
+  &:focus {
+    z-index: 10;
+  }
+
+  &::placeholder {
+    color: $color_nhsuk-grey-1;
+    opacity: 1; // Fixes low contrast of placeholder text in firefox
+  }
+
+  // Hide search input clear button (IE)
+  &::-ms-clear {
+    display: none;
+  }
+
+  // Hide search input icon and cancel button (WebKit, Blink)
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  @include nhsuk-media-query($until: tablet) {
+    font-size: inherit;
+  }
+}
+
+.nhsuk-header__search-submit {
+  background-color: $color_nhsuk-grey-5;
+  border: 0;
+  border-radius: 0 $nhsuk-border-radius $nhsuk-border-radius 0;
+  color: $color_nhsuk-blue;
+  flex-shrink: 0;
+  height: nhsuk-spacing(6);
+  line-height: 1;
+  margin: 0;
+  width: 44px;
+  cursor: pointer;
+
+  &:hover,
+  &:active {
+    background-color: $color_shade_nhsuk-blue-35;
+    box-shadow: inset 0 0 0 1px $color_nhsuk-white;
+    color: $color_nhsuk-white;
+  }
+
+  &:active {
+    background-color: $color_shade_nhsuk-blue-50;
+  }
+
+  &:focus {
+    @include nhsuk-focused-button;
+  }
+}
+
+/// Navigation
+
+.nhsuk-header__navigation {
+  position: relative;
+  @include nhsuk-print-hide;
+
+  @include nhsuk-media-query($until: tablet) {
+    margin-top: math.div($nhsuk-gutter, 2) * -1;
+  }
+}
+
+.nhsuk-header__navigation-container {
+  @include nhsuk-width-container;
+
+  @include nhsuk-media-query($until: tablet) {
+    position: relative;
+    z-index: 10;
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    border-top: 1px solid $color_transparent_nhsuk-white-20;
+  }
+}
+
+.nhsuk-header__navigation-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0 math.div($nhsuk-gutter-half, 2) * -1;
+  padding: 0;
+  width: calc(100% + $nhsuk-gutter-half);
+
+  @include nhsuk-media-query($from: tablet) {
+    width: calc(100% + $nhsuk-gutter);
+    margin: 0 math.div($nhsuk-gutter, 2) * -1;
+  }
+
+  .nhsuk-header__navigation--justified & {
+    @include nhsuk-media-query($from: desktop) {
+      justify-content: space-between;
+    }
+  }
+
+  .js-enabled & {
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+}
+
+.nhsuk-header__navigation-item {
+  margin-bottom: 0;
+  padding: 0 math.div($nhsuk-gutter-half, 2);
+
+  @include nhsuk-media-query($from: tablet) {
+    padding: 0 $nhsuk-gutter-half;
+  }
+}
+
+// This is a <strong> element used as a fallback mechanism for visually
+// indicating current page in scenarios where CSS isn’t available.
+// We don’t actually want it to be bold normally, so inherit parent font-weight.
+.nhsuk-header__navigation-item-current-fallback {
+  font-weight: inherit;
+}
+
+.nhsuk-header__navigation-link {
+  display: block;
+  padding: nhsuk-spacing(3) 2px;
+  white-space: nowrap;
+  @include nhsuk-font(16);
+  @include nhsuk-link-style-white;
+
+  // Visual indicator for current navigation item has grey line on bottom edge,
+  // and no underline on the link.
+  &[aria-current="page"],
+  &[aria-current="true"] {
+    text-decoration: none;
+    box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-border-color;
+  }
+
+  &:focus {
+    box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-color;
+  }
+
+  @include nhsuk-media-query($until: tablet) {
+    font-size: inherit;
+  }
+}
+
+/// Menu (shown when screen can’t fit all navigation items)
+
+.nhsuk-header__menu {
+  align-self: center;
+  padding: 0 math.div($nhsuk-gutter-half, 2);
+
+  &[hidden] {
+    display: none;
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    padding: 0 $nhsuk-gutter-half;
+  }
+}
+
+.nhsuk-header__menu-toggle {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  margin: 0;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: top;
+
+  &[hidden] {
+    display: none;
+  }
+
+  .nhsuk-icon__chevron-down {
+    width: nhsuk-spacing(4);
+    height: nhsuk-spacing(4);
+    transform: rotate(90deg);
+
+    // Move icon to align with edge of button, offseting 8px of empty
+    // SVG viewbox but keeping the same 2px padding used by text links
+    margin-right: -8px + 2px;
+  }
+
+  &[aria-expanded="true"] .nhsuk-icon__chevron-down {
+    transform: rotate(270deg);
+  }
+}
+
+.nhsuk-header__menu-list {
+  background-color: $color_nhsuk-white;
+  border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-4;
+  list-style: none;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  left: 0;
+  @include nhsuk-print-hide;
+
+  &[hidden] {
+    display: none;
+  }
+
+  @include nhsuk-media-query($until: tablet) {
+    margin: 0 $nhsuk-gutter-half * -1;
+  }
+
+  .nhsuk-header__navigation-link {
+    @include nhsuk-width-container;
+    @include nhsuk-link-style-default;
+    @include nhsuk-link-style-no-visited-state;
+
+    // When in expanded menu, a current item link should revert to having a
+    // no box-shadow, with a box-shadow added to containing list item instead.
+    &[aria-current="page"],
+    &[aria-current="true"] {
+      box-shadow: none;
+    }
+
+    // But when focused the black line at the bottom should return,
+    // again using box-shadow.
+    &:focus {
+      box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-color;
+    }
+  }
+
+  .nhsuk-header__navigation-item {
+    border-top: 1px solid $color_nhsuk-grey-5;
+    padding: 0;
+  }
+
+  // Current item within expended mobile menu gets blue line on left edge.
+  //
+  // The blue line uses an inset box-shadow instead of a border, as there’s
+  // already a grey border on the top, and using 2 different colour borders
+  // creates an awkward diagonal line where they meet.
+  .nhsuk-header__navigation-item--current {
+    box-shadow: inset 6px 0 $color_nhsuk-blue;
+  }
+}
+
+/// White header variant
+
+.nhsuk-header--white {
+  background-color: $color_nhsuk-white;
+
+  .nhsuk-header__container,
+  .nhsuk-header__logo {
+    color: $color_nhsuk-blue;
+  }
+
+  .nhsuk-header__service-logo {
+    @include nhsuk-link-style-default;
+
+    &:link {
+      text-decoration: none;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      .nhsuk-header__organisation-name,
+      .nhsuk-header__organisation-name-descriptor {
+        color: inherit;
+      }
+    }
+
+    &:focus {
+      .nhsuk-header__logo {
+        color: inherit;
+      }
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .nhsuk-header__account,
+  .nhsuk-header__account::before {
+    background-color: $color_nhsuk-grey-5;
+  }
+
+  .nhsuk-header__account::before {
+    border-color: $color_nhsuk-grey-4;
+  }
+
+  .nhsuk-header__account-item {
+    outline-color: $color_nhsuk-grey-4;
+  }
+
+  .nhsuk-header__account-button,
+  .nhsuk-header__account-link {
+    @include nhsuk-link-style-default;
+    @include nhsuk-link-style-no-visited-state;
+  }
+
+  .nhsuk-header__search-input.nhsuk-input:not(:focus) {
+    margin-right: -1px;
+    padding-left: $_header-item-padding - 1px;
+    border-color: $color_nhsuk-grey-3;
+    border-width: 1px;
+  }
+
+  .nhsuk-header__search-submit {
+    background-color: $color_nhsuk-blue;
+    color: $color_nhsuk-white;
+
+    &:hover,
+    &:active {
+      background-color: $color_shade_nhsuk-blue-20;
+      border-color: $color_shade_nhsuk-blue-20;
+      box-shadow: none;
+    }
+
+    &:active {
+      background-color: $color_shade_nhsuk-blue-50;
+    }
+
+    &:focus {
+      @include nhsuk-focused-button;
+    }
+  }
+
+  .nhsuk-header__organisation-name,
+  .nhsuk-header__service-name {
+    color: $color_nhsuk-black;
+  }
+
+  .nhsuk-header__organisation-name-descriptor {
+    color: $color_nhsuk-blue;
+  }
+
+  .nhsuk-header__navigation {
+    background-color: $color_nhsuk-blue;
+
+    @include nhsuk-media-query($until: tablet) {
+      margin-top: 0;
+    }
+  }
+
+  .nhsuk-header__navigation-container {
+    border-top-width: 0;
+  }
+}
+
+.nhsuk-header--white-navigation {
+  .nhsuk-header__navigation {
+    background-color: $color_nhsuk-white;
+    color: $color_nhsuk-blue;
+
+    @include nhsuk-media-query($until: tablet) {
+      margin-top: -(nhsuk-spacing(3));
+    }
+  }
+
+  .nhsuk-header__navigation-container {
+    border-color: $color_nhsuk-grey-4;
+    border-top-width: 1px;
+  }
+
+  .nhsuk-header__navigation-link {
+    @include nhsuk-link-style-default;
+    @include nhsuk-link-style-no-visited-state;
+
+    // Visual indicator for current navigation item has blue line on
+    // bottom edge instead of grey in the regular Header nav
+    &[aria-current="page"],
+    &[aria-current="true"] {
+      text-decoration: none;
+      box-shadow: inset 0 ($nhsuk-focus-width * -1) $color_nhsuk-blue;
+    }
+
+    &:focus {
+      box-shadow: inset 0 ($nhsuk-focus-width * -1) $color_nhsuk-black;
+    }
+  }
+
+  // Menu
+  .nhsuk-header__menu-toggle {
+    text-decoration: none;
+
+    &:not(:focus):not(:active):hover {
+      color: $color_nhsuk-blue;
+    }
+  }
+
+  .nhsuk-header__menu-list {
+    // When in expanded menu, a current item link should revert to having a
+    // no box-shadow, with a box-shadow added to containing list item instead.
+    .nhsuk-header__navigation-link[aria-current="page"],
+    .nhsuk-header__navigation-link[aria-current="true"] {
+      box-shadow: none;
+    }
+  }
+}
+
+/// Organisation header variant
+
+.nhsuk-header--organisation {
+  .nhsuk-header__service-logo {
+    display: block;
+
+    &:focus {
+      .nhsuk-header__organisation-name,
+      .nhsuk-header__organisation-name-descriptor {
+        color: $nhsuk-focus-text-color;
+      }
+    }
+  }
+
+  .nhsuk-header__logo {
+    height: 24px;
+    width: 60px;
+
+    @include nhsuk-media-query($from: tablet) {
+      height: 32px;
+      width: 80px;
+    }
+  }
+}
+
+.nhsuk-header__organisation-name {
+  color: $color_nhsuk-white;
+  display: block;
+  @include nhsuk-font(22, $weight: bold, $line-height: 1.1);
+
+  @include nhsuk-media-query($media-type: print) {
+    color: $nhsuk-print-text-color;
+  }
+}
+
+.nhsuk-header__organisation-name-split {
+  display: block;
+}
+
+.nhsuk-header__organisation-name-descriptor {
+  color: $color_nhsuk-white;
+  display: block;
+  @include nhsuk-font(14, $weight: bold);
+
+  @include nhsuk-media-query($media-type: print) {
+    color: $color_nhsuk-blue;
+  }
+}
+
+.nhsuk-header__organisation-logo {
+  border: 0;
+  max-height: 100px;
+  max-width: 280px;
+
+  @media (max-width: 450px) {
+    max-width: 150px;
+  }
+
+  &[src$=".svg"] {
+    height: auto;
+    max-width: 220px;
+    width: 100%;
+  }
+}
diff --git a/packages/components/header/header.js b/packages/components/header/header.js
index cec0423f00..3ef5afa604 100644
--- a/packages/components/header/header.js
+++ b/packages/components/header/header.js
@@ -12,6 +12,7 @@ class Header {
 
     this.$root = $root
 
+    this.navigation = this.$root.querySelector('.nhsuk-header__navigation')
     this.navigationList = this.$root.querySelector(
       '.nhsuk-header__navigation-list'
     )
@@ -19,30 +20,28 @@ class Header {
       '.nhsuk-header__navigation-item'
     )
 
-    this.mobileMenuToggleButton = this.$root.querySelector(
-      '.nhsuk-header__menu-toggle'
-    )
-    this.mobileMenuContainer = this.$root.querySelector(
-      '.nhsuk-mobile-menu-container'
-    )
+    this.menu = this.$root.querySelector('.nhsuk-header__menu')
+    this.menuToggle = this.$root.querySelector('.nhsuk-header__menu-toggle')
 
     if (
+      !this.navigation ||
       !this.navigationList ||
       !this.navigationItems ||
       !this.navigationItems.length ||
-      !this.mobileMenuToggleButton ||
-      !this.mobileMenuContainer
+      !this.menu ||
+      !this.menuToggle
     ) {
       return this
     }
 
-    this.mobileMenu = document.createElement('ul')
+    this.menuList = document.createElement('ul')
+
     this.menuIsEnabled = false
     this.menuIsOpen = false
 
     this.handleEscapeKey = this.onEscapeKey.bind(this)
     this.handleUpdateNavigation = this.debounce(this.updateNavigation)
-    this.handleToggleMobileMenu = this.toggleMobileMenu.bind(this)
+    this.handleToggleMenu = this.toggleMenu.bind(this)
 
     this.setupNavigation()
     this.updateNavigation()
@@ -68,10 +67,7 @@ class Header {
 
     // Reset and calculate widths on every resize
     this.breakpoints.forEach((breakpoint) => {
-      this.navigationList.insertBefore(
-        breakpoint.element,
-        this.mobileMenuContainer
-      )
+      this.navigationList.insertBefore(breakpoint.element, this.menu)
 
       // Calculate widths
       right += breakpoint.element.offsetWidth
@@ -97,87 +93,65 @@ class Header {
   }
 
   /**
-   * Add the mobile menu to the DOM
+   * Add the menu to the DOM
    */
-  setupMobileMenu() {
-    if (this.mobileMenu.parentElement) {
+  setupMenu() {
+    if (this.menuList.parentElement) {
       return
     }
 
-    this.mobileMenuContainer.appendChild(this.mobileMenu)
-    this.mobileMenu.classList.add(
-      'nhsuk-header__drop-down',
-      'nhsuk-header__drop-down--hidden'
-    )
+    this.menuList.classList.add('nhsuk-header__menu-list')
+    this.menuList.setAttribute('hidden', '')
+    this.menu.appendChild(this.menuList)
   }
 
   /**
-   * Enable the mobile menu
+   * Enable the menu
    */
-  enableMobileMenu() {
+  enableMenu() {
     if (this.menuIsEnabled) {
       return
     }
 
     this.menuIsEnabled = true
-
-    this.mobileMenuToggleButton.classList.add(
-      'nhsuk-header__menu-toggle--visible'
-    )
-
-    this.mobileMenuContainer.classList.add(
-      'nhsuk-mobile-menu-container--visible'
-    )
+    this.menu.removeAttribute('hidden')
 
     // Add click listener to toggle menu
-    this.mobileMenuToggleButton.addEventListener(
-      'click',
-      this.handleToggleMobileMenu
-    )
+    this.menuToggle.addEventListener('click', this.handleToggleMenu)
   }
 
   /**
-   * Disable the mobile menu
+   * Disable the menu
    */
-  disableMobileMenu() {
+  disableMenu() {
     if (!this.menuIsEnabled) {
       return
     }
 
-    this.closeMobileMenu()
+    this.closeMenu()
     this.menuIsEnabled = false
+    this.menu.setAttribute('hidden', '')
 
-    this.mobileMenuToggleButton.classList.remove(
-      'nhsuk-header__menu-toggle--visible'
-    )
-
-    this.mobileMenuContainer.classList.remove(
-      'nhsuk-mobile-menu-container--visible'
-    )
-
-    // Remove click listener to toggle menu
-    this.mobileMenuToggleButton.removeEventListener(
-      'click',
-      this.handleToggleMobileMenu
-    )
+    // Remove click listener from toggle menu
+    this.menuToggle.removeEventListener('click', this.handleToggleMenu)
   }
 
   /**
-   * Close the mobile menu
+   * Close the menu
    *
-   * Closes the mobile menu and updates accessibility state.
+   * Closes the menu and updates accessibility state.
    *
    * Removes the margin-bottom from the navigation
    */
-  closeMobileMenu() {
+  closeMenu() {
     if (!this.menuIsEnabled || !this.menuIsOpen) {
       return
     }
 
     this.menuIsOpen = false
-    this.mobileMenu.classList.add('nhsuk-header__drop-down--hidden')
-    this.$root.style.marginBottom = 0
-    this.mobileMenuToggleButton.setAttribute('aria-expanded', 'false')
+    this.menuList.setAttribute('hidden', '')
+    this.menuToggle.setAttribute('aria-expanded', 'false')
+    this.navigation.style.marginBottom = 0
 
     // Remove escape key listener to close menu
     document.removeEventListener('keydown', this.handleEscapeKey)
@@ -187,36 +161,35 @@ class Header {
    * Escape key handler
    *
    * This function is called when the user
-   * presses the escape key to close the mobile menu.
+   * presses the escape key to close the menu.
    *
    * @param {KeyboardEvent} event - Key press event
    */
   onEscapeKey(event) {
     if (event.key === 'Escape') {
-      this.closeMobileMenu()
+      this.closeMenu()
     }
   }
 
   /**
-   * Open the mobile menu
+   * Open the menu
    *
-   * Opens the mobile menu and updates accessibility state.
+   * Opens the menu and updates accessibility state.
    *
-   * The mobile menu is absolutely positioned, so it adds a margin
+   * The menu is absolutely positioned, so it adds a margin
    * to the bottom of the navigation to prevent it from overlapping
    *
    * Adds event listeners for the close button,
    */
-  openMobileMenu() {
+  openMenu() {
     if (!this.menuIsEnabled || this.menuIsOpen) {
       return
     }
 
     this.menuIsOpen = true
-    this.mobileMenu.classList.remove('nhsuk-header__drop-down--hidden')
-    const marginBody = this.mobileMenu.offsetHeight
-    this.$root.style.marginBottom = `${marginBody}px`
-    this.mobileMenuToggleButton.setAttribute('aria-expanded', 'true')
+    this.menuList.removeAttribute('hidden')
+    this.menuToggle.setAttribute('aria-expanded', 'true')
+    this.navigation.style.marginBottom = `${this.menuList.offsetHeight}px`
 
     // Add escape key listener to close menu
     document.addEventListener('keydown', this.handleEscapeKey)
@@ -225,24 +198,24 @@ class Header {
   /**
    * Handle menu button click
    *
-   * Toggles the mobile menu between open and closed
+   * Toggles the menu between open and closed
    */
-  toggleMobileMenu() {
+  toggleMenu() {
     if (!this.menuIsEnabled) {
       return
     }
 
     if (this.menuIsOpen) {
-      this.closeMobileMenu()
+      this.closeMenu()
     } else {
-      this.openMobileMenu()
+      this.openMenu()
     }
   }
 
   /**
    * Update navigation for the available space
    *
-   * Moves all items that overflow the available space into the mobile menu
+   * Moves all items that overflow the available space into the menu
    */
   updateNavigation() {
     this.resetNavigation()
@@ -252,22 +225,22 @@ class Header {
       return breakpoint.right > this.width
     })
 
-    // Disable mobile menu if empty
+    // Disable menu if empty
     if (!menuItems.length) {
-      this.disableMobileMenu()
+      this.disableMenu()
       return
     }
 
-    this.setupMobileMenu()
-    this.enableMobileMenu()
+    this.setupMenu()
+    this.enableMenu()
 
     // Subtract space for menu button
-    this.width -= this.mobileMenuContainer.offsetWidth
+    this.width -= this.menu.offsetWidth
 
     // Move items based on available width
     this.breakpoints.forEach((breakpoint) => {
       if (breakpoint.right > this.width) {
-        this.mobileMenu.insertAdjacentElement('beforeend', breakpoint.element)
+        this.menuList.insertAdjacentElement('beforeend', breakpoint.element)
       }
     })
   }
@@ -281,7 +254,7 @@ class Header {
  */
 module.exports = (options = {}) => {
   const $scope = options.scope || document
-  const $root = $scope.querySelector('.nhsuk-navigation')
+  const $root = $scope.querySelector('.nhsuk-header')
 
   new Header($root)
 }
diff --git a/packages/components/header/header.jsdom.test.mjs b/packages/components/header/header.jsdom.test.mjs
index 1247f423f0..500729275b 100644
--- a/packages/components/header/header.jsdom.test.mjs
+++ b/packages/components/header/header.jsdom.test.mjs
@@ -19,67 +19,79 @@ describe('Header class', () => {
 
   beforeEach(() => {
     document.body.innerHTML = `
-      <div class="nhsuk-navigation-container">
-        <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-          <ul class="nhsuk-header__navigation-list">
-            <li class="nhsuk-header__navigation-item">
-              <a class="nhsuk-header__navigation-link" href="#">
-                Health A-Z
-              </a>
-            </li>
-            <li class="nhsuk-header__navigation-item">
-              <a class="nhsuk-header__navigation-link" href="#">
-                NHS services
-              </a>
-            </li>
-            <li class="nhsuk-header__navigation-item">
-              <a class="nhsuk-header__navigation-link" href="#">
-                Live Well
-              </a>
-            </li>
-            <li class="nhsuk-header__navigation-item">
-              <a class="nhsuk-header__navigation-link" href="#">
-                Mental health
-              </a>
-            </li>
-            <li class="nhsuk-header__navigation-item">
-              <a class="nhsuk-header__navigation-link" href="#">
-                Care and support
-              </a>
-            </li>
-            <li class="nhsuk-header__navigation-item">
-              <a class="nhsuk-header__navigation-link" href="#">
-                Pregnancy
-              </a>
-            </li>
-            <li class="nhsuk-header__navigation-item">
-              <a class="nhsuk-header__navigation-link" href="#">
-                Home
-              </a>
-            </li>
-            <li class="nhsuk-header__navigation-item">
-              <a class="nhsuk-header__navigation-link" href="#">
-                Another one
-              </a>
-            </li>
-            <li class="nhsuk-mobile-menu-container">
-              <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
-                <span class="nhsuk-u-visually-hidden">Browse</span>
-                More
-                <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-                  <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-                </svg>
-              </button>
-            </li>
-          </ul>
+      <header class="nhsuk-header" role="banner">
+        <div class="nhsuk-header__container">
+          <div class="nhsuk-header__service">
+            <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100">
+              <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"></path>
+            </svg>
+          </div>
+        </div>
+        <nav class="nhsuk-header__navigation" aria-label="Menu">
+          <div class="nhsuk-header__navigation-container">
+            <ul class="nhsuk-header__navigation-list">
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="#">
+                  Health A to Z
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="#">
+                  NHS services
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="#">
+                  Live Well
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="#">
+                  Mental health
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="#">
+                  Care and support
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="#">
+                  Pregnancy
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="#">
+                  Home
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="#">
+                  Another one
+                </a>
+              </li>
+              <li class="nhsuk-header__menu" hidden>
+                <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
+                  <span class="nhsuk-u-visually-hidden">Browse</span>
+                  More
+                  <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                    <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
+                  </svg>
+                </button>
+              </li>
+            </ul>
+          </div>
         </nav>
-      </div>
+      </header>
     `
 
-    const $container = document.querySelector('.nhsuk-navigation-container')
+    const $container = document.querySelector('.nhsuk-header')
 
     $navigation = getByRole($container, 'navigation')
-    $menuButton = getByRole($container, 'button', { name: 'Browse More' })
+    $menuButton = getByRole($container, 'button', {
+      name: 'Browse More',
+      hidden: true
+    })
 
     listWidth = 800
     itemWidth = 100
@@ -157,13 +169,13 @@ describe('Header class', () => {
   describe('Menu button', () => {
     it('should be hidden by default', () => {
       expect($menuButton).toHaveRole('button')
-      expect($menuButton).not.toHaveClass('nhsuk-header__menu-toggle--visible')
+      expect($menuButton.parentElement).toHaveAttribute('hidden')
     })
 
     it('should be hidden when items do not overflow', () => {
       initHeader()
 
-      expect($menuButton).not.toHaveClass('nhsuk-header__menu-toggle--visible')
+      expect($menuButton.parentElement).toHaveAttribute('hidden')
     })
 
     it('should be visible when items overflow', () => {
@@ -171,7 +183,7 @@ describe('Header class', () => {
 
       initHeader()
 
-      expect($menuButton).toHaveClass('nhsuk-header__menu-toggle--visible')
+      expect($menuButton.parentElement).not.toHaveAttribute('hidden')
     })
 
     it('should toggle menu via click', () => {
@@ -180,17 +192,13 @@ describe('Header class', () => {
       initHeader()
 
       // Menu closed
-      expect($menuButton.nextElementSibling).toHaveClass(
-        'nhsuk-header__drop-down--hidden'
-      )
+      expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
 
       // Open menu
       $menuButton.click()
 
       // Menu open
-      expect($menuButton.nextElementSibling).not.toHaveClass(
-        'nhsuk-header__drop-down--hidden'
-      )
+      expect($menuButton.nextElementSibling).not.toHaveAttribute('hidden')
 
       // Adds listener for escape key
       expect(document.addEventListener).toHaveBeenCalledWith(
@@ -202,9 +210,7 @@ describe('Header class', () => {
       $menuButton.click()
 
       // Menu closed
-      expect($menuButton.nextElementSibling).toHaveClass(
-        'nhsuk-header__drop-down--hidden'
-      )
+      expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
 
       // Removes listener for escape key
       expect(document.removeEventListener).toHaveBeenCalledWith(
@@ -219,25 +225,19 @@ describe('Header class', () => {
       initHeader()
 
       // Menu closed
-      expect($menuButton.nextElementSibling).toHaveClass(
-        'nhsuk-header__drop-down--hidden'
-      )
+      expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
 
       // Open menu
       $menuButton.click()
 
       // Menu open
-      expect($menuButton.nextElementSibling).not.toHaveClass(
-        'nhsuk-header__drop-down--hidden'
-      )
+      expect($menuButton.nextElementSibling).not.toHaveAttribute('hidden')
 
       // Press the escape key to close it
       await user.keyboard('[Escape]')
 
       // Menu closed
-      expect($menuButton.nextElementSibling).toHaveClass(
-        'nhsuk-header__drop-down--hidden'
-      )
+      expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
     })
   })
 
@@ -259,9 +259,7 @@ describe('Header class', () => {
 
       expect($menuButton.nextElementSibling).toBeInTheDocument()
       expect($menuButton.nextElementSibling).toHaveRole('list')
-      expect($menuButton.nextElementSibling).toHaveClass(
-        'nhsuk-header__drop-down--hidden'
-      )
+      expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
     })
 
     it('should be added when items overflow when resized', async () => {
@@ -277,9 +275,7 @@ describe('Header class', () => {
 
       expect($menuButton.nextElementSibling).toBeInTheDocument()
       expect($menuButton.nextElementSibling).toHaveRole('list')
-      expect($menuButton.nextElementSibling).toHaveClass(
-        'nhsuk-header__drop-down--hidden'
-      )
+      expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
     })
   })
 
@@ -332,8 +328,8 @@ describe('Header class', () => {
 
       initHeader()
 
-      const $listItems = $navigation.querySelectorAll('nav > ul > li')
-      const $menuItems = $navigation.querySelectorAll('nav > ul > li li')
+      const $listItems = $navigation.querySelectorAll('div > ul > li')
+      const $menuItems = $navigation.querySelectorAll('div > ul > li li')
 
       expect($listItems).toHaveLength(expected.listItems)
       expect($menuItems).toHaveLength(expected.menuItems)
@@ -352,8 +348,8 @@ describe('Header class', () => {
         fireEvent.resize(window)
         await setTimeout(100)
 
-        const $listItems = $navigation.querySelectorAll('nav > ul > li')
-        const $menuItems = $navigation.querySelectorAll('nav > ul > li li')
+        const $listItems = $navigation.querySelectorAll('div > ul > li')
+        const $menuItems = $navigation.querySelectorAll('div > ul > li li')
 
         expect($listItems).toHaveLength(expected.listItems)
         expect($menuItems).toHaveLength(expected.menuItems)
@@ -373,8 +369,8 @@ describe('Header class', () => {
         fireEvent.resize(window)
         await setTimeout(100)
 
-        const $listItems = $navigation.querySelectorAll('nav > ul > li')
-        const $menuItems = $navigation.querySelectorAll('nav > ul > li li')
+        const $listItems = $navigation.querySelectorAll('div > ul > li')
+        const $menuItems = $navigation.querySelectorAll('div > ul > li li')
 
         expect($listItems).toHaveLength(expected.listItems)
         expect($menuItems).toHaveLength(expected.menuItems)
diff --git a/packages/components/header/macro-options.json b/packages/components/header/macro-options.json
index 4f85fe8e5d..0c48aee1dd 100644
--- a/packages/components/header/macro-options.json
+++ b/packages/components/header/macro-options.json
@@ -1,27 +1,49 @@
 [
   {
-    "name": "showNav",
-    "type": "boolean",
-    "required": true,
-    "description": "Set to `true` to show the navigation links in the header."
-  },
-  {
-    "name": "showSearch",
-    "type": "boolean",
-    "required": true,
-    "description": "Set to `true` to show the site search input form."
-  },
-  {
-    "name": "homeHref",
-    "type": "string",
-    "required": "No",
-    "description": "The `href` of the link for the logo and mobile home link in the navigation links. Defaults to `\"/\"`."
+    "name": "logo",
+    "type": "object",
+    "required": false,
+    "description": "Object containing options for the logo",
+    "params": [
+      {
+        "name": "href",
+        "type": "string",
+        "required": false,
+        "description": "The `href` of the link for the logo. If not set, and a `service.href` is set, or both are set to same value, then the logo and service name will be combined into a single link."
+      },
+      {
+        "name": "src",
+        "type": "string",
+        "required": false,
+        "description": "The path of the logo image, if you are not using the default NHS logo."
+      },
+      {
+        "name": "ariaLabel",
+        "type": "string",
+        "required": false,
+        "description": "The `aria-label` for the logo. Defaults to `\"NHS homepage\"`"
+      }
+    ]
   },
   {
-    "name": "ariaLabel",
-    "type": "string",
-    "required": "No",
-    "description": "Aria label for the logo href. Defaults to `\"NHS homepage\"`."
+    "name": "service",
+    "type": "object",
+    "required": false,
+    "description": "Object containing options for the service name.",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": false,
+        "description": "The text to use for the service name."
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": false,
+        "description": "The `href` of the link for the service name."
+      }
+    ]
   },
   {
     "name": "organisation",
@@ -33,7 +55,7 @@
         "name": "name",
         "type": "string",
         "required": false,
-        "description": "Organisation name value."
+        "description": "Organisation name."
       },
       {
         "name": "split",
@@ -46,110 +68,186 @@
         "type": "string",
         "required": false,
         "description": "Organisation descriptor."
-      },
-      {
-        "name": "logoURL",
-        "type": "string",
-        "required": false,
-        "description": "Organisation logo if using a static asset, such as PNG, is preferred."
       }
     ]
   },
   {
-    "name": "service",
+    "name": "navigation",
     "type": "object",
     "required": false,
-    "description": "Settings for the service name in the header.",
+    "description": "Object containing settings for the primary navigation.",
     "params": [
       {
-        "name": "name",
+        "name": "items",
+        "type": "array",
+        "required": false,
+        "description": "Array of navigation links for use in the header.",
+        "params": [
+          {
+            "name": "href",
+            "type": "string",
+            "required": true,
+            "description": "The href of a navigation item in the header."
+          },
+          {
+            "name": "text",
+            "type": "string",
+            "required": false,
+            "description": "The text of a navigation item in the header."
+          },
+          {
+            "name": "current",
+            "type": "boolean",
+            "required": false,
+            "description": "Set to true if this links to the current page being shown."
+          },
+          {
+            "name": "active",
+            "type": "boolean",
+            "required": false,
+            "description": "Set to true if the current page is within this section, but the link doesn't necessarily link to the current page"
+          },
+          {
+            "name": "classes",
+            "type": "string",
+            "required": false,
+            "description": "Classes to add to the list item containing the link."
+          },
+          {
+            "name": "attributes",
+            "type": "object",
+            "required": false,
+            "description": "HTML attributes (for example data attributes) to add to the list item containing the link."
+          }
+        ]
+      },
+      {
+        "name": "ariaLabel",
         "type": "string",
         "required": false,
-        "description": "Name of the service."
+        "description": "The `aria-label` for the primary navigation. Defaults to `\"Menu\"`"
+      },
+      {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the primary navigation."
+      },
+      {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the primary navigation."
       }
     ]
   },
   {
-    "name": "primaryLinks",
-    "type": "array",
+    "name": "search",
+    "type": "object",
     "required": false,
-    "description": "Array of navigation links for use in the header.",
+    "description": "Object containing settings for a search box",
     "params": [
       {
-        "name": "url",
+        "name": "action",
         "type": "string",
-        "required": true,
-        "description": "The href of a navigation item in the header."
+        "required": false,
+        "description": "The search action endpoint. Defaults to `\"https://www.nhs.uk/search\"`"
       },
       {
-        "name": "label",
+        "name": "name",
         "type": "string",
         "required": false,
-        "description": "The label of a navigation item in the header."
+        "description": "The name for the search field. Defaults to `\"q\"`"
       },
       {
-        "name": "classes",
+        "name": "placeholder",
         "type": "string",
         "required": false,
-        "description": "Classes to add to the list item containing the link."
+        "description": "The placeholder text for the search field. Defaults to `\"Search\"`"
       },
       {
-        "name": "attributes",
-        "type": "object",
+        "name": "visuallyHiddenLabel",
+        "type": "string",
         "required": false,
-        "description": "HTML attributes (for example data attributes) to add to the list item containing the link."
+        "description": "The label for the search field. Defaults to `\"Search the NHS website\"`"
+      },
+      {
+        "name": "visuallyHiddenButton",
+        "type": "string",
+        "required": false,
+        "description": "The label for the visually hidden button. Defaults to `\"Search\"`"
       }
     ]
   },
   {
-    "name": "transactional",
-    "type": "string",
-    "required": "No",
-    "description": "Set to `true` if this is a transactional header (with smaller logo)."
-  },
-  {
-    "name": "transactionalService",
+    "name": "account",
     "type": "object",
     "required": false,
-    "description": "Settings for transactional service header.",
+    "description": "Object containing settings for the account section of the header.",
     "params": [
       {
-        "name": "name",
+        "name": "items",
+        "type": "array",
+        "required": false,
+        "description": "The search action endpoint. Defaults to `\"https://www.nhs.uk/search\"`",
+        "params": [
+          {
+            "name": "text",
+            "type": "string",
+            "required": false,
+            "description": "The text to display for the item. Ignored if `html` is set."
+          },
+          {
+            "name": "html",
+            "type": "string",
+            "required": false,
+            "description": "The html to display for the item. If set, `text` is ignored"
+          },
+          {
+            "name": "icon",
+            "type": "boolean",
+            "required": false,
+            "description": "Whether to include the account icon for the item. Defaults to `false`."
+          },
+          {
+            "name": "action",
+            "type": "string",
+            "required": false,
+            "description": "If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons."
+          },
+          {
+            "name": "method",
+            "type": "string",
+            "required": false,
+            "description": "The value to use for the `method` of the form if `action` is set. Defaults to `\"post\"`"
+          }
+        ]
+      },
+      {
+        "name": "ariaLabel",
         "type": "string",
         "required": false,
-        "description": "Transactional service name value."
+        "description": "The `aria-label` for the account navigation. Defaults to `\"Account\"`"
       },
       {
-        "name": "href",
+        "name": "classes",
         "type": "string",
         "required": false,
-        "description": "The href of the transactional header name."
+        "description": "Classes to add to the account navigation."
       },
       {
-        "name": "longName",
-        "type": "boolean",
+        "name": "attributes",
+        "type": "object",
         "required": false,
-        "description": "Set this to `true` if the transactional service name is longer than 22 characters."
+        "description": "HTML attributes (for example data attributes) to add to the account navigation."
       }
     ]
   },
-  {
-    "name": "searchAction",
-    "type": "string",
-    "required": "No",
-    "description": "Custom search action endpoint."
-  },
-  {
-    "name": "searchInputName",
-    "type": "string",
-    "required": "No",
-    "description": "The name for the search field. Defaults to `\"q\"`."
-  },
   {
     "name": "baseUrl",
     "type": "string",
     "required": false,
-    "description": "Base URL to prepend to the organisation logo URL."
+    "description": "Base URL to prepend to the `logo.src` path."
   },
   {
     "name": "classes",
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index 9839bccbfd..59bf9488fa 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -1,103 +1,144 @@
 {% from "../../macros/attributes.njk" import nhsukAttributes %}
 
-{# Define some defaults #}
-{% set showNav = params.showNav if params.showNav else "false" %}
-{% set showSearch = params.showSearch if params.showSearch else "false" %}
+{%- set searchAction = params.search.action | default("https://www.nhs.uk/search/") %}
+{%- set searchName = params.search.name | default("q") %}
+{%- set searchPlaceholder = params.search.placeholder | default("Search") %}
+{%- set searchVisuallyHiddenButton = params.search.visuallyHiddenButton | default("Search") %}
+{%- set searchVisuallyHiddenLabel = params.search.visuallyHiddenLabel | default("Search the NHS website") %}
 
-{% set nhsLogo %}
-  <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-    <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
-    <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-  </svg>
-{% endset %}
+{#- The NHS logo and service name are combined into a single link if either
+    the logo doesn’t have an `href` set but the service name does, or if both
+    have an exact `href`. This avoids having 2 links to same destination. -#}
+{%- set combineLogoAndServiceNameLinks = (params.service.href and not (params.logo.href)) or (params.service.href and (params.service.href == params.logo.href)) %}
 
-<header class="nhsuk-header
-{%- if params.transactional or params.transactionalService %} nhsuk-header__transactional{% endif %}
-{%- if params.organisation and params.organisation.name %} nhsuk-header--organisation{% endif %}
-{%- if params.classes %} {{ params.classes }}{% endif %}" role="banner"
-{{- nhsukAttributes(params.attributes) }}>
-
-  <div class="nhsuk-header__container">
-    <div class="nhsuk-header__logo
-    {%- if showNav == "false" and showSearch == "false" and params.transactionalService %} nhsuk-header__transactional--logo{% endif %}
-    {%- if showNav == "false" and showSearch == "false" and not params.transactionalService %} nhsuk-header__logo--only{% endif %}">
-      {%- if params.organisation %}
-      <a class="nhsuk-header__link" href="{% if params.homeHref %}{{ params.homeHref }}{% else %}/{% endif %}" aria-label="{{ params.organisation.name }} {{ params.organisation.split }} {{ params.organisation.descriptor }} homepage">
-        {%- if params.organisation.logoURL %}
-        <img class="nhsuk-organisation-logo" src="{{ baseUrl }}{{ params.organisation.logoURL }}" alt=""/>
-        {%- else -%}
-        {{ nhsLogo | safe }}
-        <span class="nhsuk-organisation-name">{{ params.organisation.name }}{% if params.organisation.split %} <span class="nhsuk-organisation-name-split">{{ params.organisation.split }}</span>{% endif %}</span>
-        {% if params.organisation.descriptor %}<span class="nhsuk-organisation-descriptor">{{ params.organisation.descriptor }}</span>{% endif %}
-        {%- endif %}
-      </a>
-      {%- else -%}
-      <a class="nhsuk-header__link{% if params.service %} nhsuk-header__link--service {% endif %}" href="{% if params.homeHref %}{{ params.homeHref }}{% else %}/{% endif %}" aria-label="{% if params.ariaLabel %}{{ params.ariaLabel }}{% else %}NHS homepage{% endif %}">
-        {{ nhsLogo | safe }}
-        {%- if params.service %}
-        <span class="nhsuk-header__service-name">
-          {{ params.service.name }}
-        </span>
-        {%- endif %}
-      </a>
-      {%- endif %}
-    </div>
+{%- set logoHref = params.service.href if combineLogoAndServiceNameLinks else params.logo.href %}
 
-{%- if showNav == "false" and showSearch == "false"%}
-  {%- if params.transactionalService%}
-    <div class="nhsuk-header__transactional-service-name">
-      <a class="nhsuk-header__transactional-service-name--link" href="{% if params.transactionalService.href %}{{ params.transactionalService.href }}{% else %}/{% endif %}">{{ params.transactionalService.name }}</a>
-    </div>
-  {%- endif %}
+{#- The NHS logo can be replaced by a bitmap image and/or suffixed by an
+    organisation name (with can be split and include a descriptor) -#}
+{%- macro _serviceLogo(logoSrc, organisation) %}
+{% if logoSrc %}
+<img class="nhsuk-header__organisation-logo" src="{{ baseUrl }}{{ logoSrc }}" alt="">
+{% else %}
+<svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100">
+  <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"/>
+</svg>
 {% endif -%}
+{% if organisation -%}
+<span class="nhsuk-header__organisation-name">{{ organisation.name }}{% if organisation.split %} <span class="nhsuk-header__organisation-name-split">{{ organisation.split }}</span>{% endif %}</span>
+{%- if organisation.descriptor %}<span class="nhsuk-header__organisation-name-descriptor">{{ organisation.descriptor }}</span>{% endif -%}
+{%- endif -%}
+{% endmacro %}
 
-{% if showSearch == "true" %}
-    <div class="nhsuk-header__content" id="content-header">
-      <div class="nhsuk-header__search">
-          <div class="nhsuk-header__search-wrap" id="wrap-search">
-            <form class="nhsuk-header__search-form" id="search" action="{{ params.searchAction if params.searchAction else 'https://www.nhs.uk/search/' }}" method="get" role="search">
-              <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
-              <input class="nhsuk-search__input" id="search-field" name="{{ params.searchInputName if params.searchInputName else "search-field" }}" type="search" placeholder="Search" autocomplete="off" >
-              <button class="nhsuk-search__submit" type="submit">
-                <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-                  <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-                </svg>
-                <span class="nhsuk-u-visually-hidden">Search</span>
-              </button>
-            </form>
-          </div>
-        </div>
-    </div>
-{% endif -%}
-  </div>{# close nhsuk-header__container #}
+{%- macro _serviceName(text, href) %}
+{% if href -%}
+<a class="nhsuk-header__service-name" href="{{ href }}">{{ text }}</a>
+{% else -%}
+<span class="nhsuk-header__service-name">{{ text }}</span>
+{%- endif -%}
+{% endmacro %}
 
-{% if showNav == "true" and params.primaryLinks %}
-  <div class="nhsuk-navigation-container">
-    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-      <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
-        {%- for item in params.primaryLinks %}
-        <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
-          <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
-            {{item.label}}
+{%- macro _accountItem(item) %}
+{% if item.icon %}
+<svg class="nhsuk-icon nhsuk-icon__user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"></path>
+</svg>
+{%- endif %}
+{{- item.html | safe if item.html else item.text -}}
+{% endmacro %}
+
+<header class="nhsuk-header
+  {%- if params.organisation %} nhsuk-header--organisation{% endif %}
+  {%- if params.classes %} {{ params.classes }}{% endif %}" role="banner"
+  {{- nhsukAttributes(params.attributes) }}>
+  <div class="nhsuk-header__container">
+    <div class="nhsuk-header__service">
+    {% if logoHref %}
+      <a class="nhsuk-header__service-logo" href="{{ logoHref }}" aria-label="{{ params.logo.ariaLabel | default("NHS homepage") }}">
+        {{ _serviceLogo(params.logo.src, params.organisation) | indent(8) }}
+        {{- _serviceName(params.service.text) if combineLogoAndServiceNameLinks }}
+      </a>
+    {% else %}
+      {{ _serviceLogo(params.logo.src, params.organisation) | indent(6) }}
+      {{- _serviceName(params.service.text) if combineLogoAndServiceNameLinks }}
+    {% endif %}
+    {% if params.service.text and not combineLogoAndServiceNameLinks %}
+      {{ _serviceName(params.service.text, params.service.href) | indent(6) }}
+    {% endif %}
+    </div>
+{% if params.search %}
+    <search class="nhsuk-header__search">
+      <form class="nhsuk-header__search-form" id="search" action="{{ searchAction }}" method="get">
+        <label class="nhsuk-u-visually-hidden" for="search-field">{{ searchVisuallyHiddenLabel }}</label>
+        <input class="nhsuk-header__search-input nhsuk-input" id="search-field" name="{{ searchName }}" type="search" placeholder="{{ searchPlaceholder }}" autocomplete="off">
+        <button class="nhsuk-header__search-submit" type="submit">
+          <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
+          </svg>
+          <span class="nhsuk-u-visually-hidden">{{ searchVisuallyHiddenButton }}</span>
+        </button>
+      </form>
+    </search>
+{% endif %}
+{% if params.account %}
+    <nav class="nhsuk-header__account
+      {%- if params.account.classes %} {{ params.account.classes }}{% endif %}" aria-label="{{ params.account.ariaLabel | default("Account") }}"
+      {{- nhsukAttributes(params.account.attributes) }}>
+      <ul class="nhsuk-header__account-list">
+      {% for item in params.account.items %}
+        {% if item %}
+        <li class="nhsuk-header__account-item {%- if item.classes %} {{ item.classes }}{% endif %}">
+        {% if item.href %}
+          <a class="nhsuk-header__account-link" href="{{ item.href }}">
+            {{ _accountItem(item) | indent(12) }}
           </a>
+        {% elif item.action %}
+          <form class="nhsuk-header__account-form" action="{{ item.action }}" method="{{ item.method or "post" }}">
+            <button class="nhsuk-header__account-button">
+              {{ _accountItem(item) | indent(14) }}
+            </button>
+          </form>
+        {% else %}
+          {{ _accountItem(item) | indent(10) }}
+        {% endif %}
         </li>
-        {%- endfor %}
-        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
-          <a class="nhsuk-header__navigation-link"  href="/">
-            Home
+        {% endif %}
+      {% endfor %}
+      </ul>
+    </nav>
+{% endif %}
+  </div>
+{% if params.navigation and params.navigation.items | length %}
+  <nav class="nhsuk-header__navigation
+    {%- if params.navigation.classes %} {{ params.navigation.classes }}{% endif %}" aria-label="{{ params.navigation.ariaLabel | default("Menu") }}"
+    {{- nhsukAttributes(params.navigation.attributes) }}>
+    <div class="nhsuk-header__navigation-container">
+      <ul class="nhsuk-header__navigation-list">
+      {% for item in params.navigation.items %}
+        {% set linkInnerContent %}
+          {#- Wrap active links in strong element so users who override colours
+              or styles still have some indicator of the current nav item. -#}
+          {%- if item.active or item.current -%}
+            <strong class="nhsuk-header__navigation-item-current-fallback">{{ item.text }}</strong>
+          {%- else -%}
+            {{- item.text -}}
+          {%- endif -%}
+        {% endset %}
+        <li class="nhsuk-header__navigation-item {%- if item.active or item.current %} nhsuk-header__navigation-item--current{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
+          <a class="nhsuk-header__navigation-link" href="{{ item.href }}" {%- if item.active or item.current %} aria-current="{{ "page" if item.current else "true" }}"{% endif %}>
+            {{- linkInnerContent | safe -}}
           </a>
         </li>
-        <li class="nhsuk-mobile-menu-container">
+      {% endfor %}
+        <li class="nhsuk-header__menu" hidden>
           <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
-            <span class="nhsuk-u-visually-hidden">Browse</span>
-            More
+            <span class="nhsuk-u-visually-hidden">Browse </span>More
             <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
               <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
             </svg>
           </button>
         </li>
       </ul>
-    </nav>
-  </div>
-{% endif -%}
+    </div>
+  </nav>
+{% endif %}
 </header>
diff --git a/packages/core/styles/_icons.scss b/packages/core/styles/_icons.scss
index f35b043573..3882840719 100644
--- a/packages/core/styles/_icons.scss
+++ b/packages/core/styles/_icons.scss
@@ -16,7 +16,11 @@
 /// Default icon colours
 
 .nhsuk-icon__search {
-  fill: $color_nhsuk-blue;
+  fill: currentcolor;
+}
+
+.nhsuk-icon__user {
+  fill: currentcolor;
 }
 
 .nhsuk-icon__chevron-left {
@@ -53,19 +57,6 @@
 
 .nhsuk-icon__chevron-down {
   fill: currentcolor;
-  height: 24px;
-  position: absolute;
-  right: 4px;
-  transform: rotate(90deg);
-  width: 24px;
-}
-
-.nhsuk-icon__chevron-up {
-  fill: $color_nhsuk-blue;
-
-  path {
-    fill: $color_nhsuk-white;
-  }
 }
 
 .nhsuk-icon__emdash {
diff --git a/tests/backstop/bitmaps_reference/Header_default_desktop.png b/tests/backstop/bitmaps_reference/Header_default_desktop.png
index a298b60a6a..f1d9a467c8 100644
Binary files a/tests/backstop/bitmaps_reference/Header_default_desktop.png and b/tests/backstop/bitmaps_reference/Header_default_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_default_large-desktop.png b/tests/backstop/bitmaps_reference/Header_default_large-desktop.png
index 15b14786ad..46754ba86f 100644
Binary files a/tests/backstop/bitmaps_reference/Header_default_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_default_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_default_mobile.png b/tests/backstop/bitmaps_reference/Header_default_mobile.png
index 8efa79773c..7c882b184c 100644
Binary files a/tests/backstop/bitmaps_reference/Header_default_mobile.png and b/tests/backstop/bitmaps_reference/Header_default_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_default_tablet.png b/tests/backstop/bitmaps_reference/Header_default_tablet.png
index 311238293a..8bbbc55988 100644
Binary files a/tests/backstop/bitmaps_reference/Header_default_tablet.png and b/tests/backstop/bitmaps_reference/Header_default_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_desktop.png
index 6876d8a26e..8734d8bdff 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_large-desktop.png
index 1400a6e6ee..0524569eca 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_mobile.png
index 5d896cfafd..b37b9717b0 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_mobile.png and b/tests/backstop/bitmaps_reference/Header_organisational_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_tablet.png
index 67bd7c470f..5ceb0077a0 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_tablet.png and b/tests/backstop/bitmaps_reference/Header_organisational_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_desktop.png
new file mode 100644
index 0000000000..2ea7b467a6
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_large-desktop.png
new file mode 100644
index 0000000000..1759c1a0df
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_mobile.png
new file mode 100644
index 0000000000..7dd9426eb4
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_tablet.png
new file mode 100644
index 0000000000..fc06799fbc
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_desktop.png
index 5559dd7e57..d9aef360e5 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_desktop.png
new file mode 100644
index 0000000000..1724765355
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_large-desktop.png
new file mode 100644
index 0000000000..7dd17ba03f
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_mobile.png
new file mode 100644
index 0000000000..dba76f863b
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_tablet.png
new file mode 100644
index 0000000000..7b0f7110b2
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_large-desktop.png
index a518b07739..ed4fa69bcf 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_mobile.png
index 9966dcc3c2..84442a47ef 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_mobile.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_desktop.png
index b0995049d7..c28959609e 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_large-desktop.png
index ec783c1e61..4f146f9d9f 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_mobile.png
index 8db97fb285..a4085aa0a3 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_mobile.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_tablet.png
index b924b68132..d791e4d64d 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_tablet.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_tablet.png
index 6065b01d44..0796f4e256 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_tablet.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_desktop.png b/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_desktop.png
deleted file mode 100644
index cbbe317956..0000000000
Binary files a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_desktop.png and /dev/null differ
diff --git a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_large-desktop.png b/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_large-desktop.png
deleted file mode 100644
index b3dcf84cdc..0000000000
Binary files a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_large-desktop.png and /dev/null differ
diff --git a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_mobile.png b/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_mobile.png
deleted file mode 100644
index 974880d6c7..0000000000
Binary files a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_mobile.png and /dev/null differ
diff --git a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_tablet.png b/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_tablet.png
deleted file mode 100644
index 743a61f188..0000000000
Binary files a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_tablet.png and /dev/null differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_desktop.png
new file mode 100644
index 0000000000..6ae4a44672
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_large-desktop.png
new file mode 100644
index 0000000000..a7b5060e81
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_mobile.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_mobile.png
new file mode 100644
index 0000000000..3694a2920e
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_tablet.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_tablet.png
new file mode 100644
index 0000000000..d9c4619c38
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_desktop.png
new file mode 100644
index 0000000000..fd94ee856b
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_large-desktop.png
new file mode 100644
index 0000000000..a257ea1784
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_mobile.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_mobile.png
new file mode 100644
index 0000000000..0664aed6ed
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_tablet.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_tablet.png
new file mode 100644
index 0000000000..5229dd40ab
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_out_desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_desktop.png
new file mode 100644
index 0000000000..5c74452f24
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_out_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_large-desktop.png
new file mode 100644
index 0000000000..5bda0f604b
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_out_mobile.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_mobile.png
new file mode 100644
index 0000000000..dcec3617e1
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_out_tablet.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_tablet.png
new file mode 100644
index 0000000000..16431351f9
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_desktop.png
new file mode 100644
index 0000000000..5dfcae1301
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_large-desktop.png
new file mode 100644
index 0000000000..90203e6900
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_mobile.png b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_mobile.png
new file mode 100644
index 0000000000..415ac43e07
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_tablet.png b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_tablet.png
new file mode 100644
index 0000000000..2a4647c61e
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_logo_only_desktop.png b/tests/backstop/bitmaps_reference/Header_with_logo_only_desktop.png
index 6520a97132..60be112bd6 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_logo_only_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_logo_only_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_logo_only_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_logo_only_large-desktop.png
index adae313b13..0893b98ff5 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_logo_only_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_logo_only_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_logo_only_mobile.png b/tests/backstop/bitmaps_reference/Header_with_logo_only_mobile.png
index 7c185de470..7e252528fb 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_logo_only_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_logo_only_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_logo_only_tablet.png b/tests/backstop/bitmaps_reference/Header_with_logo_only_tablet.png
index baf5a28028..796e7e500a 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_logo_only_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_logo_only_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_desktop.png
index a9c64387eb..095699866b 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_justified_desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_desktop.png
new file mode 100644
index 0000000000..eb09444bfe
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_justified_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_large-desktop.png
new file mode 100644
index 0000000000..98709442ac
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_justified_mobile.png b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_mobile.png
new file mode 100644
index 0000000000..f1d9b9546e
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_justified_tablet.png b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_tablet.png
new file mode 100644
index 0000000000..8c5b8efbee
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_large-desktop.png
index 795db71fe8..a0d9aaad1b 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_desktop.png
new file mode 100644
index 0000000000..71a078d8eb
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_large-desktop.png
new file mode 100644
index 0000000000..f2b91cae94
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_mobile.png b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_mobile.png
new file mode 100644
index 0000000000..f1d9b9546e
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_tablet.png b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_tablet.png
new file mode 100644
index 0000000000..8c5b8efbee
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_mobile.png b/tests/backstop/bitmaps_reference/Header_with_navigation_mobile.png
index 9d5b2846f3..f1d9b9546e 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_open_mobile.png b/tests/backstop/bitmaps_reference/Header_with_navigation_open_mobile.png
index cad2799d5f..2b232f5d3b 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_open_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_open_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_open_tablet.png b/tests/backstop/bitmaps_reference/Header_with_navigation_open_tablet.png
index ebf8401e15..18a600f2b3 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_open_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_open_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_tablet.png b/tests/backstop/bitmaps_reference/Header_with_navigation_tablet.png
index 0db8a08ff9..a72f7173e9 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_desktop.png b/tests/backstop/bitmaps_reference/Header_with_search_desktop.png
index f8792cb07a..4be235d086 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_search_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_search_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_desktop.png b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_desktop.png
new file mode 100644
index 0000000000..e3b6c9549b
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_large-desktop.png
new file mode 100644
index 0000000000..e73b24819d
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_mobile.png b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_mobile.png
new file mode 100644
index 0000000000..c2db0a79b3
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_tablet.png b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_tablet.png
new file mode 100644
index 0000000000..282733eb19
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_search_large-desktop.png
index edff08e302..fd1afb28ce 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_search_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_search_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_mobile.png b/tests/backstop/bitmaps_reference/Header_with_search_mobile.png
index 627b406409..7ceb48fcc3 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_search_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_search_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_tablet.png b/tests/backstop/bitmaps_reference/Header_with_search_tablet.png
index 04b5f849d0..fb29eee7c9 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_search_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_search_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_desktop.png b/tests/backstop/bitmaps_reference/Header_with_service_name_desktop.png
index fa301b7785..fb8a5b0fff 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_service_name_large-desktop.png
index 76d160c4d1..ac8ac2e62c 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_mobile.png b/tests/backstop/bitmaps_reference/Header_with_service_name_mobile.png
index 08ec786dbd..1ad2987fdb 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_desktop.png b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_desktop.png
index 455fa54576..461950db0a 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_large-desktop.png
index bc888574e5..4a2e5c7c64 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_mobile.png b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_mobile.png
index 1173239f9f..440e0deb1c 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_tablet.png b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_tablet.png
index 2a37c2f96d..39c4b7fbb1 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_tablet.png b/tests/backstop/bitmaps_reference/Header_with_service_name_tablet.png
index 14902ded06..bae9599327 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_tablet.png differ