diff --git a/app/assets/images/search-icon--black.svg b/app/assets/images/search-icon--black.svg
new file mode 100644
index 000000000..fc1ed50dc
--- /dev/null
+++ b/app/assets/images/search-icon--black.svg
@@ -0,0 +1,4 @@
+
diff --git a/app/assets/images/search-icon.svg b/app/assets/images/search-icon.svg
new file mode 100644
index 000000000..262236ad0
--- /dev/null
+++ b/app/assets/images/search-icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/app/assets/stylesheets/components/_super-navigation-header.scss b/app/assets/stylesheets/components/_super-navigation-header.scss
new file mode 100644
index 000000000..e9d7ef2da
--- /dev/null
+++ b/app/assets/stylesheets/components/_super-navigation-header.scss
@@ -0,0 +1,96 @@
+$breakpoint: 769px;
+
+.app-c-super-navigation-header,
+.app-c-super-navigation-header__container {
+ border-bottom: 0;
+ margin-bottom: 0;
+ padding-top: 0;
+}
+
+.app-c-super-navigation-header__header-logo {
+ padding-top: govuk-spacing(2) + 4;
+ padding-bottom: govuk-spacing(2);
+ margin-bottom: 0;
+}
+
+.app-c-super-navigation-header__content {
+ @include govuk-media-query($from: $breakpoint) {
+ text-align: right;
+ }
+}
+
+.app-c-super-navigation-header__items {
+ margin-bottom: 0;
+
+ &.govuk-header__navigation {
+ @include govuk-media-query($from: $breakpoint) {
+ display: flex;
+ justify-content: flex-end;
+ }
+ }
+}
+
+.app-c-super-navigation-header__item {
+ display: flex;
+ margin-right: 0;
+ padding: 0;
+
+ @include govuk-media-query($from: $breakpoint) {
+ display: inline-flex;
+ }
+}
+
+.app-c-super-navigation-header__item-link {
+ padding: govuk-spacing(4) 0;
+ width: 100%;
+
+ @include govuk-media-query($from: $breakpoint) {
+ padding: govuk-spacing(3) + 2;
+ width: auto;
+ }
+}
+
+// Search
+
+.app-c-super-navigation-header__item--search {
+ @include govuk-media-query($from: $breakpoint) {
+ height: 55px;
+ width: 55px;
+ padding: 0;
+ margin-right: govuk-spacing(3);
+ background-color: govuk-colour('blue');
+ }
+}
+
+.app-c-super-navigation-header__item-link--search {
+ @include govuk-media-query($from: $breakpoint) {
+ background-image: image-url("search-icon.svg");
+ background-position: 50%;
+ background-size: 35%;
+ background-repeat: no-repeat;
+ display: inherit;
+ width: 55px;
+
+ &:focus {
+ background-image: image-url("search-icon--black.svg");
+ }
+ }
+}
+
+.app-c-super-navigation-header__item-link-text--search {
+ @include govuk-media-query($from: $breakpoint) {
+ display: block;
+ text-indent: -5000px;
+ overflow: hidden;
+ }
+}
+
+.app-c-super-navigation-header__menu-button {
+ font-size: 19px;
+ font-weight: bold;
+ line-height: 1.3;
+ border-left: 1px solid govuk-colour("mid-grey");
+ border-right: 1px solid govuk-colour("mid-grey");
+ padding: govuk-spacing(3) govuk-spacing(4);
+ top: 0;
+}
diff --git a/app/assets/stylesheets/header-footer-only.scss b/app/assets/stylesheets/header-footer-only.scss
index d4a7462ed..aaa27dc34 100644
--- a/app/assets/stylesheets/header-footer-only.scss
+++ b/app/assets/stylesheets/header-footer-only.scss
@@ -13,6 +13,7 @@ $govuk-use-legacy-palette: false;
@import "components/emergency-banner";
@import "components/global-bar";
+@import "components/super-navigation-header";
@import "components/survey";
// basic styles for HTML5 and other elements
diff --git a/app/views/components/super-navigation-header/_header-content.html.erb b/app/views/components/super-navigation-header/_header-content.html.erb
new file mode 100644
index 000000000..f9466b9b3
--- /dev/null
+++ b/app/views/components/super-navigation-header/_header-content.html.erb
@@ -0,0 +1,21 @@
+
diff --git a/app/views/components/super-navigation-header/_header-logo.html.erb b/app/views/components/super-navigation-header/_header-logo.html.erb
new file mode 100644
index 000000000..0b3e498e5
--- /dev/null
+++ b/app/views/components/super-navigation-header/_header-logo.html.erb
@@ -0,0 +1,33 @@
+
diff --git a/app/views/components/super-navigation-header/_super-navigation-header.html.erb b/app/views/components/super-navigation-header/_super-navigation-header.html.erb
new file mode 100644
index 000000000..0d95731bb
--- /dev/null
+++ b/app/views/components/super-navigation-header/_super-navigation-header.html.erb
@@ -0,0 +1,10 @@
+<%
+ navigation_links = YAML.load(File.read(File.join(File.dirname(__FILE__),"/navigation-links.yml")))
+%>
+
+
diff --git a/app/views/components/super-navigation-header/navigation-links.yml b/app/views/components/super-navigation-header/navigation-links.yml
new file mode 100644
index 000000000..0ba4ea485
--- /dev/null
+++ b/app/views/components/super-navigation-header/navigation-links.yml
@@ -0,0 +1,67 @@
+---
+- label: Topics
+ href: /browse
+ description: Find information and services
+ link_sections:
+ - - label: Benefits
+ href: /browse/benefits
+ - label: Births, death, marriages and care
+ href: /browse/births-deaths-marriages
+ - label: Brexit
+ href: /brexit
+ - label: Business and self-employed
+ href: /browse/business
+ - label: Childcare and parenting
+ href: /browse/childcare-parenting
+ - label: Citizenship and living in the UK
+ href: /browse/citizenship
+ - label: Coronavirus (COVID‑19)
+ href: /coronavirus
+ - label: Crime, justice and the law
+ href: /browse/justice
+ - label: Disabled people
+ href: /browse/disabilities
+ - - label: Driving and transport
+ href: /browse/driving
+ - label: Education and learning
+ href: /browse/education
+ - label: Employing people
+ href: /browse/employing-people
+ - label: Environment and countryside
+ href: /browse/environment-countryside
+ - label: Housing and local services
+ href: /browse/housing-local-services
+ - label: Money and tax
+ href: /browse/tax
+ - label: Passports, travel and living abroad
+ href: /browse/abroad
+ - label: Visas and immigration
+ href: /browse/visas-immigration
+ - label: Working, jobs and pensions
+ href: /browse/working
+- label: Departments
+ href: /government/organisations
+- label: Government activity
+ href: /search/news-and-communications
+ description: Find out what the government is doing
+ link_sections:
+ - - label: News
+ href: /search/news-and-communications
+ description: News stories, speeches, letters and notices
+ - label: Guidance and regulation
+ href: /search/guidance-and-regulation
+ description: Detailed guidance, regulations and rules
+ - label: Research and statistics
+ href: /search/research-and-statistics
+ description: Reports, analysis and official statistics
+ - - label: Policy papers and consultation
+ href: /search/policy-papers-and-consultations
+ description: Consultations and strategy
+ - label: Transparency
+ href: /search/transparency-and-freedom-of-information-releases
+ description: Government data, freedom of information releases and corporate reports
+ footer_links:
+ - - label: How government works
+ href: /government/how-government-works
+ - - label: Get involved
+ href: /government/get-involved
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 1c43cdc46..35ef872e8 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,41 +1,49 @@
-