diff --git a/app/controllers/admin/base_controller.rb b/app/controllers/admin/base_controller.rb
index 39fcd09a483..90d8ab1e69b 100644
--- a/app/controllers/admin/base_controller.rb
+++ b/app/controllers/admin/base_controller.rb
@@ -53,6 +53,11 @@ def render_design_system(design_system_view, legacy_view)
     end
   end
 
+  def show_new_header?
+    current_user.can_preview_design_system?
+  end
+  helper_method :show_new_header?
+
 private
 
   def new_design_system?
diff --git a/app/helpers/admin/header_helper.rb b/app/helpers/admin/header_helper.rb
new file mode 100644
index 00000000000..a4603e9a5d5
--- /dev/null
+++ b/app/helpers/admin/header_helper.rb
@@ -0,0 +1,17 @@
+module Admin::HeaderHelper
+  def sub_nav_item(name, path)
+    {
+      label: name,
+      href: path,
+      current: request.path.start_with?(path),
+    }
+  end
+
+  def main_nav_item(name, path)
+    {
+      text: name,
+      href: path,
+      active: request.path.end_with?(path),
+    }
+  end
+end
diff --git a/app/views/components/_sub_navigation.html.erb b/app/views/components/_sub_navigation.html.erb
index 6eef58d4ba3..b9adf185563 100644
--- a/app/views/components/_sub_navigation.html.erb
+++ b/app/views/components/_sub_navigation.html.erb
@@ -1,20 +1,16 @@
 <%
   items ||= []
 %>
-<%= tag.div class: "govuk-grid-row app-c-sub-navigation" do %>
-  <%= tag.div class: "govuk-grid-column-full" do %>
-    <%= tag.nav role: "navigation", aria: { label: "Sub Navigation" } do %>
-      <%= tag.ul class: "app-c-sub-navigation__list" do %>
-        <% items.each do |item| %>
-          <%
-            item_classes = %w( app-c-sub-navigation__list-item )
-            item_classes << "app-c-sub-navigation__list-item--current" if item[:current]
-            item_aria_attributes = { current: "page" } if item[:current]
-          %>
-          <%= tag.li class: item_classes do %>
-            <%= link_to item[:label], item[:href], class: "govuk-link govuk-link--no-visited-state govuk-link--no-underline app-c-sub-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
-          <% end %>
-        <% end %>
+<%= tag.nav class: "app-c-sub-navigation", role: "navigation", aria: { label: "Sub Navigation" } do %>
+  <%= tag.ul class: "app-c-sub-navigation__list" do %>
+    <% items.each do |item| %>
+      <%
+        item_classes = %w( app-c-sub-navigation__list-item )
+        item_classes << "app-c-sub-navigation__list-item--current" if item[:current]
+        item_aria_attributes = { current: "page" } if item[:current]
+      %>
+      <%= tag.li class: item_classes do %>
+        <%= link_to item[:label], item[:href], class: "govuk-link govuk-link--no-visited-state govuk-link--no-underline app-c-sub-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
       <% end %>
     <% end %>
   <% end %>
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 28ffc2227f5..8b944d73f77 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -21,7 +21,7 @@
 <% end %>
 
 <% content_for :navbar do %>
-  <%= render "shared/header", admin_template: true %>
+  <%= render "shared/legacy_header", admin_template: true %>
   <% if t('admin.whats_new.show_banner') %>
     <div class="govuk-design-system-styling">
       <div class="<%= yield(:full_width) === "true" ? "app-width-container--full-width" : "container" %>">
diff --git a/app/views/layouts/design_system.html.erb b/app/views/layouts/design_system.html.erb
index 0705bc97580..d6278d8a789 100644
--- a/app/views/layouts/design_system.html.erb
+++ b/app/views/layouts/design_system.html.erb
@@ -26,11 +26,15 @@
 
   <%= render "govuk_publishing_components/components/skip_link" %>
 
-  <div class="legacy-whitehall">
-    <div class="environment-<%= environment %> navbar-wrapper">
-      <%= render partial: "shared/header" %>
+  <% if show_new_header? %>
+    <%= render partial: "shared/header" %>
+  <% else %>
+    <div class="legacy-whitehall">
+      <div class="environment-<%= environment %> navbar-wrapper">
+        <%= render partial: "shared/legacy_header" %>
+      </div>
     </div>
-  </div>
+  <% end %>
 
   <div class="govuk-width-container">
     <%= render "shared/phase_banner", {
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
index 84ca8de9967..915f51000f3 100644
--- a/app/views/shared/_header.html.erb
+++ b/app/views/shared/_header.html.erb
@@ -1,88 +1,54 @@
-<% environment_style = GovukAdminTemplate.environment_style %>
-<% environment_label = GovukAdminTemplate.environment_label %>
 <% environment = GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment %>
 <% admin_template ||= false %>
+<% organisation = current_user&.organisation %>
+<% user = current_user %>
 
-<header class="
-  masthead
-  navbar
-  navbar-default
-  navbar-inverse
-  navbar-static-top
-  <% if !t('admin.whats_new.show_banner') && admin_template %>add-bottom-margin<% end %>
-  <% if environment_style %>environment-indicator<% end %>" role="banner">
-  <div class="navbar-container container-fluid">
-    <div class="navbar-header">
-      <%# Bootstrap toggle for collapsed navbar content, used at smaller widths %>
-      <a class="navbar-toggle" data-toggle="collapse" data-target="header .navbar-collapse">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </a>
-      <%= link_to "GOV.UK Whitehall", admin_root_path, :class => "navbar-brand" %>
-      <% if environment_label %>
-        <div class="environment-label">
-          <%= environment_label %>
-        </div>
-      <% end %>
-    </div>
-    <nav role="navigation" class="collapse navbar-collapse">
-      <ul class="nav navbar-nav">
-        <li><%= link_to "Dashboard", admin_root_path %></li>
-        <li><%= link_to "View website", Whitehall.public_root, class: "open_website" %></li>
-      </ul>
-      <div class="navbar-text pull-right remove-bottom-margin">
-        <ul class="list-inline">
-            <li>
-                <%= signon_link %>
-            </li>
-          <% if user_signed_in? %>
-            <li>
-              <%= link_to current_user.name, admin_user_path(current_user), id: "#user_settings" %>
-            </li>
-            <li>
-              <%= link_to "Logout", "/auth/gds/sign_out" %>
-            </li>
-          <% end %>
-          <%= admin_users_header_link %>
-        </ul>
-      </div>
-    </nav>
-  </div>
+<%= render "govuk_publishing_components/components/layout_header", {
+  product_name: "Whitehall Publisher",
+  environment: environment,
+  navigation_items: [
+    main_nav_item("Dashboard", admin_root_path),
+    {
+      text: "View website",
+      href: Whitehall.public_root,
+    },
+    {
+      text: "Switch app",
+      href: Plek.external_url_for("signon"),
+    },
+    *(
+      if user_signed_in?
+        [
+          main_nav_item(user.name, admin_user_path(user)),
+          {
+            text: "Logout",
+            href: "/auth/gds/sign_out",
+          }]
+      end),
+    main_nav_item("All users", admin_users_path),
+  ],
+} %>
 
-  <div class="container-fluid">
-    <ul id="global-nav" class="masthead-tabs list-unstyled">
-      <li class="masthead-tab-item js-create-new create-new" data-module="navbar-toggle">
-        <a href="#new-document-menu" class="toggler js-navbar-toggle__toggler" id="new-document-label">New document</a>
-        <%= document_creation_dropdown %>
-      </li>
-      <%= admin_documents_header_link %>
-      <%= admin_statistics_announcements_link %>
-      <%= admin_featured_header_link %>
-      <%= admin_user_organisation_header_link %>
-      <li class="js-more-nav masthead-tab-item" data-module="navbar-toggle">
-        <a href="#more-links-menu" id="more-links-label" class="toggler js-navbar-toggle__toggler">More</a>
-        <ul id="more-links-menu" class="masthead-menu masthead-menu-right js-hidden unstyled js-navbar-toggle__menu hide-before-js-module-init" role="menu" aria-labelledby="more-links-label">
-          <%= admin_organisations_header_menu_link %>
-          <%= admin_policy_groups_header_menu_link %>
-          <%= admin_roles_header_menu_link %>
-          <%= admin_people_header_menu_link %>
-          <%= admin_topical_events_header_menu_link %>
-          <%= admin_worldwide_organisations_header_menu_link %>
-          <%= admin_world_location_news_header_menu_link %>
-          <%= admin_fields_of_operation_header_menu_link %>
-          <%= admin_cabinet_ministers_header_menu_link %>
-          <%= admin_get_involved_header_menu_link %>
-          <%= admin_sitewide_settings_header_menu_link %>
-          <%= admin_governments_header_menu_link %>
-        </ul>
-      </li>
-    </ul>
-  </div>
-  <% if admin_template %>
-    <section class="notices">
-      <%= render partial: "shared/notices" %>
-    </section>
-  <% end %>
-</header>
+<div class="govuk-width-container">
+  <%= render "components/sub_navigation", {
+    items: [
+      sub_nav_item("New document", admin_new_document_path),
+      sub_nav_item("Documents", admin_editions_path),
+      sub_nav_item("Statistics announcements", admin_statistics_announcements_path),
+      *(
+        if user_signed_in? && organisation
+          [
+            sub_nav_item("Featured documents", features_admin_organisation_path(organisation, locale: nil)),
+            sub_nav_item("Corporate information", admin_organisation_corporate_information_pages_path(organisation)),
+          ]
+        end),
+      sub_nav_item("More", admin_more_path),
+    ],
+  } %>
+</div>
+
+<% if admin_template %>
+  <section class="notices">
+    <%= render partial: "shared/notices" %>
+  </section>
+<% end %>
diff --git a/app/views/shared/_legacy_header.html.erb b/app/views/shared/_legacy_header.html.erb
new file mode 100644
index 00000000000..84ca8de9967
--- /dev/null
+++ b/app/views/shared/_legacy_header.html.erb
@@ -0,0 +1,88 @@
+<% environment_style = GovukAdminTemplate.environment_style %>
+<% environment_label = GovukAdminTemplate.environment_label %>
+<% environment = GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment %>
+<% admin_template ||= false %>
+
+<header class="
+  masthead
+  navbar
+  navbar-default
+  navbar-inverse
+  navbar-static-top
+  <% if !t('admin.whats_new.show_banner') && admin_template %>add-bottom-margin<% end %>
+  <% if environment_style %>environment-indicator<% end %>" role="banner">
+  <div class="navbar-container container-fluid">
+    <div class="navbar-header">
+      <%# Bootstrap toggle for collapsed navbar content, used at smaller widths %>
+      <a class="navbar-toggle" data-toggle="collapse" data-target="header .navbar-collapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </a>
+      <%= link_to "GOV.UK Whitehall", admin_root_path, :class => "navbar-brand" %>
+      <% if environment_label %>
+        <div class="environment-label">
+          <%= environment_label %>
+        </div>
+      <% end %>
+    </div>
+    <nav role="navigation" class="collapse navbar-collapse">
+      <ul class="nav navbar-nav">
+        <li><%= link_to "Dashboard", admin_root_path %></li>
+        <li><%= link_to "View website", Whitehall.public_root, class: "open_website" %></li>
+      </ul>
+      <div class="navbar-text pull-right remove-bottom-margin">
+        <ul class="list-inline">
+            <li>
+                <%= signon_link %>
+            </li>
+          <% if user_signed_in? %>
+            <li>
+              <%= link_to current_user.name, admin_user_path(current_user), id: "#user_settings" %>
+            </li>
+            <li>
+              <%= link_to "Logout", "/auth/gds/sign_out" %>
+            </li>
+          <% end %>
+          <%= admin_users_header_link %>
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <div class="container-fluid">
+    <ul id="global-nav" class="masthead-tabs list-unstyled">
+      <li class="masthead-tab-item js-create-new create-new" data-module="navbar-toggle">
+        <a href="#new-document-menu" class="toggler js-navbar-toggle__toggler" id="new-document-label">New document</a>
+        <%= document_creation_dropdown %>
+      </li>
+      <%= admin_documents_header_link %>
+      <%= admin_statistics_announcements_link %>
+      <%= admin_featured_header_link %>
+      <%= admin_user_organisation_header_link %>
+      <li class="js-more-nav masthead-tab-item" data-module="navbar-toggle">
+        <a href="#more-links-menu" id="more-links-label" class="toggler js-navbar-toggle__toggler">More</a>
+        <ul id="more-links-menu" class="masthead-menu masthead-menu-right js-hidden unstyled js-navbar-toggle__menu hide-before-js-module-init" role="menu" aria-labelledby="more-links-label">
+          <%= admin_organisations_header_menu_link %>
+          <%= admin_policy_groups_header_menu_link %>
+          <%= admin_roles_header_menu_link %>
+          <%= admin_people_header_menu_link %>
+          <%= admin_topical_events_header_menu_link %>
+          <%= admin_worldwide_organisations_header_menu_link %>
+          <%= admin_world_location_news_header_menu_link %>
+          <%= admin_fields_of_operation_header_menu_link %>
+          <%= admin_cabinet_ministers_header_menu_link %>
+          <%= admin_get_involved_header_menu_link %>
+          <%= admin_sitewide_settings_header_menu_link %>
+          <%= admin_governments_header_menu_link %>
+        </ul>
+      </li>
+    </ul>
+  </div>
+  <% if admin_template %>
+    <section class="notices">
+      <%= render partial: "shared/notices" %>
+    </section>
+  <% end %>
+</header>
diff --git a/test/functional/admin/base_controller_test.rb b/test/functional/admin/base_controller_test.rb
new file mode 100644
index 00000000000..9335502a963
--- /dev/null
+++ b/test/functional/admin/base_controller_test.rb
@@ -0,0 +1,197 @@
+require "test_helper"
+
+class Admin::BaseControllerTest < ActionController::TestCase
+  include GdsApi::TestHelpers::PublishingApi
+
+  view_test "renders new header component if login as a design system user" do
+    login_as_preview_design_system_user :gds_editor, create(:organisation, name: "my-test-org")
+    @controller = Admin::NewDocumentController.new
+
+    get :index
+
+    assert_select ".gem-c-layout-header__logo", text: /Whitehall Publisher/
+    assert_select ".govuk-header__navigation-item", text: "Dashboard"
+  end
+
+  view_test "highlights the 'Dashboard' tab when it is the currently selected tab- Main navigation" do
+    login_as_preview_design_system_user :gds_editor
+    @controller = Admin::DashboardController.new
+
+    get :index
+
+    assert_active_item("/government/admin")
+    assert_not_active_item("/government/admin/users")
+    assert_not_active_item("/government/admin/users/1")
+  end
+
+  view_test "highlights the 'All users' tab when it is the currently selected tab- Main navigation" do
+    login_as_preview_design_system_user :gds_editor
+    @controller = Admin::UsersController.new
+
+    get :index
+
+    assert_active_item("/government/admin/users")
+    assert_not_active_item("/government/admin")
+    assert_not_active_item("/government/admin/users/1")
+  end
+
+  view_test "highlights the current user name tab when it is the currently selected tab-Main navigation" do
+    user = login_as_preview_design_system_user :gds_editor
+    @controller = Admin::UsersController.new
+
+    get :show, params: { id: user.id }
+
+    assert_active_item("/government/admin/users/#{user.id}")
+    assert_not_active_item("/government/admin")
+    assert_not_active_item("/government/admin/users")
+  end
+
+  view_test "renders new sub-navigation header component if login as a design system user" do
+    login_as_preview_design_system_user :gds_editor, create(:organisation, name: "my-test-org")
+    @controller = Admin::NewDocumentController.new
+
+    get :index
+
+    assert_select ".app-c-sub-navigation", count: 1
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/new-document\"]", text: "New document"
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/editions\"]", text: "Documents"
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/statistics_announcements\"]", text: "Statistics announcements"
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/organisations/my-test-org/features\"]", text: "Featured documents"
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/organisations/my-test-org/corporate_information_pages\"]", text: "Corporate information"
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/more\"]", text: "More"
+  end
+
+  view_test "highlights the 'New documents' tab when it is the currently selected tab- Sub-navigation" do
+    login_as_preview_design_system_user :gds_editor, create(:organisation, name: "my-test-org")
+    @controller = Admin::NewDocumentController.new
+
+    get :index
+
+    assert_current_item("/government/admin/new-document")
+    assert_not_current_item("/government/admin/editions")
+    assert_not_current_item("/government/admin/statistics_announcements")
+    assert_not_current_item("/government/admin/organisations/my-test-org/features")
+    assert_not_current_item("/government/admin/organisations/my-test-org/corporate_information_pages")
+    assert_not_current_item("/government/admin/more")
+  end
+
+  view_test "highlights the 'Documents' tab when it is the currently selected tab- Sub-navigation" do
+    login_as_preview_design_system_user :gds_editor, create(:organisation, name: "my-test-org")
+    @controller = Admin::EditionsController.new
+
+    get :index, params: { type: 1 }
+
+    assert_current_item("/government/admin/editions")
+    assert_not_current_item("/government/admin/new-document")
+    assert_not_current_item("/government/admin/statistics_announcements")
+    assert_not_current_item("/government/admin/organisations/my-test-org/features")
+    assert_not_current_item("/government/admin/organisations/my-test-org/corporate_information_pages")
+    assert_not_current_item("/government/admin/more")
+  end
+
+  view_test "highlights the 'Statistics announcements' tab when it is the currently selected tab- Sub-navigation" do
+    login_as_preview_design_system_user :gds_editor, create(:organisation, name: "my-test-org")
+    @controller = Admin::StatisticsAnnouncementsController.new
+
+    get :index
+
+    assert_current_item("/government/admin/statistics_announcements")
+    assert_not_current_item("/government/admin/new-document")
+    assert_not_current_item("/government/admin/editions")
+    assert_not_current_item("/government/admin/organisations/my-test-org/features")
+    assert_not_current_item("/government/admin/organisations/my-test-org/corporate_information_pages")
+    assert_not_current_item("/government/admin/more")
+  end
+
+  view_test "highlights the 'Features' tab when it is the currently selected tab- Sub-navigation" do
+    my_test_org = create(:organisation, name: "my-test-org")
+    login_as_preview_design_system_user :gds_editor, my_test_org
+    @controller = Admin::OrganisationsController.new
+
+    get :features, params: { id: my_test_org }
+
+    assert_current_item("/government/admin/organisations/my-test-org/features")
+    assert_not_current_item("/government/admin/new-document")
+    assert_not_current_item("/government/admin/editions")
+    assert_not_current_item("/government/admin/statistics_announcements")
+    assert_not_current_item("/government/admin/organisations/my-test-org/corporate_information_pages")
+    assert_not_current_item("/government/admin/more")
+  end
+
+  view_test "highlights the 'Corporate information pages' tab when it is the currently selected tab- Sub-navigation" do
+    my_test_org = create(:organisation, name: "my-test-org")
+    login_as_preview_design_system_user :gds_editor, my_test_org
+    @controller = Admin::CorporateInformationPagesController.new
+
+    get :index, params: { organisation_id: my_test_org }
+
+    assert_current_item("/government/admin/organisations/my-test-org/corporate_information_pages")
+    assert_not_current_item("/government/admin/new-document")
+    assert_not_current_item("/government/admin/editions")
+    assert_not_current_item("/government/admin/statistics_announcements")
+    assert_not_current_item("/government/admin/organisations/my-test-org/features")
+    assert_not_current_item("/government/admin/more")
+  end
+
+  view_test "highlights the 'More' tab when it is the currently selected tab- Sub-navigation" do
+    login_as_preview_design_system_user :gds_editor, create(:organisation, name: "my-test-org")
+    @controller = Admin::MoreController.new
+
+    get :index
+
+    assert_current_item("/government/admin/more")
+    assert_not_current_item("/government/admin/new-document")
+    assert_not_current_item("/government/admin/editions")
+    assert_not_current_item("/government/admin/statistics_announcements")
+    assert_not_current_item("/government/admin/organisations/my-test-org/corporate_information_pages")
+    assert_not_current_item("/government/admin/organisations/my-test-org/features")
+  end
+
+  view_test "only renders non-organisation header links if not logged in" do
+    # It's not possible, at the moment, to show the new design system layout if no user is signed in,
+    # but once we remove the legacy layout, the design system will be the default layout. In order to
+    # test this for now we stub some BaseController methods—this stubbing won't be necessary once the
+    # design system transition has been completed.
+    Admin::BaseController.any_instance.stubs(:show_new_header?).returns(true)
+    Admin::BaseController.any_instance.stubs(:preview_design_system?).returns(true)
+    @controller = Admin::NewDocumentController.new
+
+    get :index
+
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/organisations/my-test-org/features\"]", false
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/organisations/my-test-org/corporate_information_pages\"]", false
+
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/new-document\"]"
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/editions\"]"
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/statistics_announcements\"]"
+    assert_select ".app-c-sub-navigation__list .app-c-sub-navigation__list-item a[href=\"/government/admin/more\"]"
+  end
+
+  view_test "renders legacy header component if login as a non design system user" do
+    login_as :gds_editor
+    @controller = Admin::NewDocumentController.new
+
+    get :index
+
+    assert_select ".govuk-header__navigation-item", false
+    assert_select ".nav.navbar-nav", text: /Dashboard/
+  end
+
+private
+
+  def assert_not_current_item(path)
+    assert_select ".app-c-sub-navigation__list-item--current a[href=\"#{path}\"]", false
+  end
+
+  def assert_current_item(path)
+    assert_select ".app-c-sub-navigation__list-item--current a[href=\"#{path}\"]"
+  end
+
+  def assert_not_active_item(path)
+    assert_select ".govuk-header__navigation-item--active a[href=\"#{path}\"]", false
+  end
+
+  def assert_active_item(path)
+    assert_select ".govuk-header__navigation-item--active a[href=\"#{path}\"]"
+  end
+end