diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 760ea533f..1275150d2 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -1,6 +1,7 @@
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/lib
 //= require govuk_publishing_components/components/button
+//= require govuk_publishing_components/components/details
 //= require govuk_publishing_components/components/layout-header
 //= require govuk_publishing_components/components/skip-link
 //= require govuk_publishing_components/components/table
diff --git a/app/assets/stylesheets/_broken-links-report.scss b/app/assets/stylesheets/_broken-links-report.scss
index 5f9d89127..ed709c006 100644
--- a/app/assets/stylesheets/_broken-links-report.scss
+++ b/app/assets/stylesheets/_broken-links-report.scss
@@ -1,41 +1,21 @@
-.broken-links-report {
-  .issue-summary {
-    font-weight: normal;
-  }
-
-  .issue-list {
-    list-style: none;
-    padding-left: 0;
-
-    li {
-      margin-top: 5px;
-    }
-  }
+.app-inset-prompt {
+  @include govuk-text-colour;
+  @include govuk-responsive-padding(4);
+  @include govuk-responsive-margin(6, "bottom");
 
-  .issue-status-description {
-    margin-top: 10px;
-  }
+  border-left: $govuk-border-width-narrow solid govuk-colour("dark-grey");
+  background-color: govuk-colour("light-grey");
 
-  .issue-list + .issue-status-description {
-    margin: 15px 0;
+  @include govuk-media-query($from: tablet) {
+    border-left: $govuk-border-width solid govuk-colour("dark-grey");
   }
 
-  .display-issue-details {
-    display: block;
-    font-weight: bold;
-    padding-top: 5px;
-  }
-
-  .display-issue-details::-webkit-details-marker {
-    display: none;
-  }
-
-  .display-issue-details:before {
-    content: "\25B6";
-    padding-right: 3px;
+  &:focus {
+    outline: $govuk-focus-width solid $govuk-focus-colour;
   }
+}
 
-  details[open] > .display-issue-details:before {
-    content: "\25BC";
-  }
+.app-inset-prompt--error {
+  border-color: $govuk-error-colour;
+  background-color: govuk-tint($govuk-error-colour, 90%);
 }
diff --git a/app/assets/stylesheets/_header.scss b/app/assets/stylesheets/_header.scss
index b432fdd15..96f5a71b3 100644
--- a/app/assets/stylesheets/_header.scss
+++ b/app/assets/stylesheets/_header.scss
@@ -1,21 +1,3 @@
 .page-header {
   border-bottom: none;
-
-  .document-slug {
-    color: $text-muted;
-    font-size: $font-size-large;
-    display: block;
-    margin-top: 5px;
-    font-weight: normal;
-    padding: 0;
-  }
-
-  .document-slug li {
-    display: inline;
-    list-style: none;
-  }
-
-  .document-slug li + li:before {
-    content: "– ";
-  }
 }
diff --git a/app/assets/stylesheets/application-legacy.scss b/app/assets/stylesheets/application-legacy.scss
index 2bfd9fae3..d40cd81e5 100644
--- a/app/assets/stylesheets/application-legacy.scss
+++ b/app/assets/stylesheets/application-legacy.scss
@@ -14,7 +14,6 @@
 @import "navbar";
 @import "header";
 @import "ordered_lists";
-@import "broken-links-report";
 
 p.no-content-message { // stylelint-disable-line selector-no-qualifying-type
   @include core-19;
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 30d221521..d7ec13d2c 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,12 +1,29 @@
+$govuk-page-width: 1140px;
+
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 
 @import "govuk_publishing_components/components/breadcrumbs";
 @import "govuk_publishing_components/components/button";
+@import "govuk_publishing_components/components/details";
+@import "govuk_publishing_components/components/error-alert";
+@import "govuk_publishing_components/components/error-message";
+@import "govuk_publishing_components/components/hint";
+@import "govuk_publishing_components/components/input";
+@import "govuk_publishing_components/components/label";
 @import "govuk_publishing_components/components/layout-footer";
+@import "govuk_publishing_components/components/layout-for-admin";
 @import "govuk_publishing_components/components/layout-header";
+@import "govuk_publishing_components/components/notice";
+@import "govuk_publishing_components/components/search";
 @import "govuk_publishing_components/components/skip-link";
+@import "govuk_publishing_components/components/success-alert";
+@import "govuk_publishing_components/components/summary-list";
 @import "govuk_publishing_components/components/table";
 @import "govuk_publishing_components/components/title";
+@import "govuk_publishing_components/components/warning-text";
 
+@import "views/manuals";
 @import "views/whats_new";
+
+@import "broken-links-report";
diff --git a/app/assets/stylesheets/views/manuals.scss b/app/assets/stylesheets/views/manuals.scss
new file mode 100644
index 000000000..5a078f0b5
--- /dev/null
+++ b/app/assets/stylesheets/views/manuals.scss
@@ -0,0 +1,40 @@
+.app-view-manuals__section {
+  padding: govuk-spacing(3) 0;
+}
+
+.app-view-manuals__section:first-child {
+  padding-top: 0;
+}
+
+.app-view-manuals__sidebar-actions {
+  padding: govuk-spacing(3);
+  margin-bottom: govuk-spacing(6);
+  background-color: govuk-colour("light-grey");
+
+  .gem-c-button {
+    width: 100%;
+  }
+
+  .govuk-list {
+    margin-bottom: 0;
+
+    li:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.app-view-summary__sidebar-actions .govuk-list--spaced li:last-child div + .broken-links-report {
+  margin-top: govuk-spacing(6);
+}
+
+.app-flash-container {
+  .govuk-notification-banner {
+    margin-top: govuk-spacing(4);
+  }
+
+  .gem-c-error-alert {
+    margin-bottom: 0;
+    margin-top: govuk-spacing(4);
+  }
+}
diff --git a/app/controllers/manuals_controller.rb b/app/controllers/manuals_controller.rb
index b5ecefec4..022a536ab 100644
--- a/app/controllers/manuals_controller.rb
+++ b/app/controllers/manuals_controller.rb
@@ -27,6 +27,7 @@ def show
 
     render(
       :show,
+      layout: "design_system",
       locals: {
         manual:,
         slug_unique:,
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 52f4a5316..aa287beff 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -15,6 +15,129 @@ def state(manual)
     tag.span(state, class: classes).html_safe
   end
 
+  def state_label(manual)
+    state_text = manual.publication_state
+
+    if state_text == "published" && manual.draft?
+      state_text << " with new draft"
+    end
+
+    classes = "govuk-tag govuk-tag--s"
+    classes << if manual.draft?
+                 " govuk-tag--blue"
+               elsif manual.published?
+                 " govuk-tag--green"
+               else
+                 " govuk-tag--grey"
+               end
+
+    tag.span(state_text, class: classes).html_safe
+  end
+
+  def manual_metadata_rows(manual)
+    rows = [
+      {
+        key: "Status",
+        value: state_label(manual),
+      },
+    ]
+
+    if current_user_is_gds_editor?
+      rows << {
+        key: "From",
+        value: link_to(manual.organisation_slug, url_for_public_org(manual.organisation_slug)),
+      }
+    end
+
+    if manual.originally_published_at.present?
+      actions = [
+        {
+          label: "Edit",
+          href: original_publication_date_manual_path(manual),
+        },
+      ]
+      row = {
+        key: "Originally published",
+        value: nice_time_format(manual.originally_published_at),
+      }
+      row[:actions] = actions
+      rows << row
+    end
+
+    if manual.publish_tasks.any?
+      rows << {
+        key: "Last published",
+        value: publication_task_state(manual.publish_tasks.first),
+      }
+    end
+    rows
+  end
+
+  def manual_front_page_rows(manual)
+    rows = [
+      {
+        key: "Slug",
+        value: manual.slug,
+      },
+      {
+        key: "Title",
+        value: sanitize(manual.title),
+      },
+      {
+        key: "Summary",
+        value: sanitize(manual.summary),
+      },
+    ]
+
+    if manual.body.present?
+      rows << {
+        key: "Body",
+        value: simple_format(truncate(manual.body, length: 500, class: "govuk-!-margin-top-0")),
+      }
+    end
+
+    rows
+  end
+
+  def manual_sidebar_action_items(manual, slug_unique)
+    items = []
+
+    if allow_publish?(manual, slug_unique)
+      items << render("govuk_publishing_components/components/button", {
+        text: "Publish",
+        href: confirm_publish_manual_path(manual),
+      })
+    end
+
+    unless manual.has_ever_been_published?
+      items << render("govuk_publishing_components/components/button", {
+        text: "Discard",
+        destructive: true,
+      })
+    end
+
+    items
+  end
+
+  def manual_section_rows(manual)
+    manual.sections.map do |section|
+      row = {}
+
+      row[:key] = if section.state == "draft"
+                    tag.span("DRAFT", class: "govuk-tag govuk-tag--s govuk-tag--blue") <<
+                      tag.span(section.title, class: "govuk-!-static-margin-2")
+                  else
+                    tag.span(section.title)
+                  end
+      row[:value] = last_updated_text(section)
+      row[:actions] = [{
+        label: "View",
+        href: manual_section_path(manual, section),
+      }]
+      row
+    end
+  end
+
   def show_preview?(item)
     if item.respond_to?(:sections)
       item.draft? || item.sections.any?(&:draft?)
diff --git a/app/views/admin/link_check_reports/_form.html.erb b/app/views/admin/link_check_reports/_form.html.erb
index 557c47571..3f2a41f78 100644
--- a/app/views/admin/link_check_reports/_form.html.erb
+++ b/app/views/admin/link_check_reports/_form.html.erb
@@ -1,3 +1,6 @@
 <%= form_tag link_check_reports_path(link_reportable: reportable), remote: true do %>
-  <%= submit_tag button_text, class: "btn btn-default add-top-margin remove-bottom-margin" %>
+  <%= render "govuk_publishing_components/components/button", {
+    text: button_text,
+    secondary_quiet: true
+  } %>
 <% end %>
diff --git a/app/views/admin/link_check_reports/_link_check_report.html.erb b/app/views/admin/link_check_reports/_link_check_report.html.erb
index 095a37cb6..c287ee7e1 100644
--- a/app/views/admin/link_check_reports/_link_check_report.html.erb
+++ b/app/views/admin/link_check_reports/_link_check_report.html.erb
@@ -1,34 +1,36 @@
 <div class="broken-links-report">
   <% if !report.present? %>
-    <section class="alert alert-info">
-      <p>Check this document for broken links. The report will take a few moments to complete.</p>
+    <section class="app-inset-prompt">
+      <p class="govuk-body">Check this document for broken links. The report will take a few moments to complete.</p>
       <%= render 'admin/link_check_reports/form', reportable: reportable, button_text: 'Check for broken links' %>
     </section>
   <% elsif report.in_progress? %>
-    <section class="alert alert-info">
-      Broken link report in progress.<br />Please wait.
+    <section class="app-inset-prompt">
+      <p class="govuk-body">Broken link report in progress.</p>
+      <p class="govuk-body">Please wait.
       <%= link_to "Refresh",
                   link_check_report_path(report.id),
                   class: 'js-broken-links-refresh js-hidden',
-                  remote: true %>
+                  remote: true %></p>
     </section>
   <% elsif report.broken_links.any? || report.caution_links.any? %>
-    <section class="alert alert-warning">
-      <h3 class="remove-top-margin"><%= t "broken_links.title" %></h3>
+    <section class="app-inset-prompt app-inset-prompt--error">
+      <h3 class="remove-top-margin govuk-heading-s"><%= t "broken_links.title" %></h3>
       <% report.links.sort_by(&:status).group_by(&:status).each do |status, links| %>
         <% next unless %w(broken caution).include? status %>
-        <p class="issue-status-description"><%= t "broken_links.#{status}.subheading" %></p>
-        <ul class="issue-list">
+        <p class="govuk-body"><%= t "broken_links.#{status}.subheading" %></p>
+        <ul class="govuk-list">
           <% links.each do |link| %>
             <li>
-              <%= link_to link.uri.truncate(50), link.uri, title: link.uri, class: 'link-inherit' %>
-              <details>
-                <summary class="display-issue-details">See more details about this link</summary>
-                <p class="issue-summary"><%= link.problem_summary %></p>
+              <%= link_to link.uri.truncate(50), link.uri, title: link.uri, class: 'govuk-link' %>
+              <%= render "govuk_publishing_components/components/details", {
+                title: "See more details about this link"
+              } do %>
+                <p><%= link.problem_summary %></p>
                 <% if link.suggested_fix %>
-                  <p class="issue-summary">Suggested fix: <%= link.suggested_fix %></p>
-                <% end %>
-              </details>
+                  <p>Suggested fix: <%= link.suggested_fix %></p>
+                  <% end %>
+              <% end %>
             </li>
           <% end %>
         </ul>
@@ -36,8 +38,8 @@
       <%= render 'admin/link_check_reports/form', reportable: reportable, button_text: 'Check again' %>
     </section>
   <% else %>
-    <section class='alert alert-success'>
-      <p><span class="glyphicon glyphicon-ok add-right-margin"></span> This document contains no broken links.</p>
+    <section class="app-inset-prompt">
+      <p class="govuk-body">This document contains no broken links.</p>
       <%= render 'admin/link_check_reports/form', reportable: reportable, button_text: 'Check again' %>
     </section>
   <% end %>
diff --git a/app/views/layouts/design_system.html.erb b/app/views/layouts/design_system.html.erb
index e732378c5..9516e8e28 100644
--- a/app/views/layouts/design_system.html.erb
+++ b/app/views/layouts/design_system.html.erb
@@ -15,6 +15,32 @@
       navigation_items: navigation_links_internal + navigation_links_auth,
   } %>
 
+  <% unless flash.empty? %>
+    <div class="govuk-width-container">
+      <div class="govuk-grid-row app-flash-container">
+        <% flash.each do |type, msg| %>
+          <% if type == "notice" %>
+            <%= render "govuk_publishing_components/components/notice", {
+              description: msg,
+              margin_bottom: 0,
+            } %>
+          <% elsif type == "success" %>
+            <%= render "govuk_publishing_components/components/success_alert", {
+              message: msg,
+              margin_bottom: 0,
+            } %>
+          <% elsif type == "error" %>
+            <%= render "govuk_publishing_components/components/error_alert", {
+              message: msg,
+            } %>
+          <% else %>
+            <%= msg %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
   <div class="govuk-width-container">
     <%= yield(:breadcrumbs) %>
 
diff --git a/app/views/manuals/_title.html.erb b/app/views/manuals/_title.html.erb
deleted file mode 100644
index ebc9065cd..000000000
--- a/app/views/manuals/_title.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<h1 class="page-header"><%= manual.title %>
-  <ul class='document-slug'>
-    <li title='<% if !manual.published? %>When published this manual will appear at this URL<% end %>'>
-      <%= manual.slug %>
-    </li>
-    <% if manual.published? %>
-      <li><%= link_to "View on website", public_url %></li>
-    <% end %>
-    <% if show_preview?(manual) %>
-      <li><%= link_to "Preview draft", content_preview_url(manual) %></li>
-    <% end %>
-  </ul>
-</h1>
diff --git a/app/views/manuals/show.html.erb b/app/views/manuals/show.html.erb
index 385c374a1..e53b4d591 100644
--- a/app/views/manuals/show.html.erb
+++ b/app/views/manuals/show.html.erb
@@ -1,117 +1,135 @@
 <% content_for :page_title, manual.title %>
 
 <% content_for :breadcrumbs do %>
-  <li><%= link_to "Your manuals", manuals_path %></li>
-  <li class='active'><%= manual.title %></li>
+  <%= render "govuk_publishing_components/components/breadcrumbs", {
+    collapse_on_mobile: true,
+    breadcrumbs: [
+      {
+        title: "Your manuals",
+        url: manuals_path
+      },
+      {
+        title: manual.title,
+        url: manual_path(manual)
+      },
+    ]
+  } %>
 <% end %>
 
-<%= render partial: "title", locals: { manual: manual, public_url: url_for_public_manual(manual) } %>
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    <h1 class="govuk-heading-xl"><%= manual.title %></h1>
+  </div>
+</div>
 
-<div class="row">
-  <div class="col-md-8">
-    <div class="row">
-      <div class="col-md-12">
-        <% unless clashing_sections.empty? %>
-          <p>Warning: There are duplicate section slugs in this manual.</p>
-          <ul>
-            <% clashing_sections.each do |slug, sections| %>
-              <li><%= slug %></li>
-            <% end %>
-          </ul>
-        <% end %>
-      </div>
+<div class="govuk-grid-row">
+  <% unless clashing_sections.empty? %>
+    <%= render "govuk_publishing_components/components/warning_text", {
+      text: "Warning: There are duplicate section slugs in this manual."
+    } %>
+    <% clashing_sections_list = clashing_sections.map do |slug, sections|; slug; end %>
+    <%= render "govuk_publishing_components/components/list", {
+      visible_counters: true,
+      items: clashing_sections_list
+    } %>
+  <% end %>
 
-      <div class="col-md-12">
-        <h2>Summary</h2>
-        <p class="lead"><%= manual.summary %></p>
-      </div>
+  <div class="govuk-grid-column-two-thirds">
 
-      <% if manual.body.present? %>
-        <div class=" col-md-12">
-          <h2>Body</h2>
-          <pre class="body-pre add-bottom-margin"><%= manual.body %></pre>
-        </div>
-      <% end %>
+    <section class="app-view-manuals__section">
+      <%= render "shared/summary_card_component", {
+        title: "About this manual",
+        summary_card_actions: [
+          {
+            label: "Edit first publication date",
+            href: original_publication_date_manual_path(manual)
+          },
+        ],
+        rows: manual_metadata_rows(manual),
+      } %>
+    </section>
 
-      <div class="col-md-12 add-bottom-margin">
-        <h2>Metadata</h2>
-        <dl class="metadata-list">
-          <dt>State</dt>
-          <dd><%= state(manual) %></dd>
-        </dl>
-        <% if manual.publish_tasks.any? %>
-          <dl class="metadata-list">
-            <dt>Last published</dt>
-            <dd><%= publication_task_state(manual.publish_tasks.first) %></dd>
-          </dl>
-        <% end %>
-        <% if current_user_is_gds_editor? %>
-          <dl class="metadata-list">
-            <dt>From</dt>
-            <dd><%= link_to manual.organisation_slug, url_for_public_org(manual.organisation_slug) %></dd>
-          </dl>
-        <% end %>
-        <% if manual.originally_published_at.present? %>
-          <dl class="metadata-list">
-            <dt>Originally published</dt>
-            <dd><%= nice_time_format(manual.originally_published_at) %><% if manual.use_originally_published_at_for_public_timestamp? %><br/>This will be used as the public updated at timestamp on GOV.UK.<% end %></dd>
-          </dl>
-        <% end %>
-      </div>
+    <% if show_preview?(manual) %>
+      <section class="app-view-manuals__section">
+        <h2 class="govuk-heading-l">Preview</h2>
+        <p class="govuk-body">
+          <%= link_to "Preview on website (opens in new tab)", content_preview_url(manual), target: "_blank" %></p>
+      </section>
+    <% end %>
+
+    <section class="app-view-manuals__section">
+      <%= render "shared/summary_card_component", {
+        title: "Front page",
+        summary_card_actions: [
+          {
+            label: "Edit",
+            href: edit_manual_path(manual)
+          }
+        ],
+        rows: manual_front_page_rows(manual),
+      } %>
+    </section>
 
-      <div class="col-md-12">
-        <h2>Sections</h2>
-        <div class="well add-bottom-margin">
-          <%= link_to 'Reorder sections', reorder_manual_sections_path(manual), class: 'btn btn-default add-right-margin' %>
-          <%= link_to 'Add section', new_manual_section_path(manual), class: 'btn btn-default' %>
-        </div>
-        <% if manual.sections.any? %>
-        <ul class="document-list">
-         <% manual.sections.each do |section| %>
-            <li class="document">
-              <% if section.state == "draft" %>
-                <span class="label label-primary">draft</span>
-              <% end %>
-              <%= link_to(section.title, manual_section_path(manual, section), class: 'document-title') %>
-              <ul class="metadata">
-                <li class="text-muted"><%= last_updated_text(section) %></li>
-              </ul>
+    <section class="app-view-manuals__section">
+      <%= render "shared/summary_card_component", {
+        title: "Sections",
+        summary_card_actions: [
+          {
+            label: "Reorder sections",
+            href: reorder_manual_sections_path(manual)
+          },
+          {
+            label: "Add section",
+            href: new_manual_section_path(manual)
+          },
+        ],
+        rows: manual_section_rows(manual),
+      } %>
+    </section>
+  </div>
+
+  <div class="govuk-grid-column-one-third">
+    <% if allow_publish?(manual, slug_unique) || !manual.has_ever_been_published? %>
+      <div class="app-view-manuals__sidebar-actions">
+        <ul class="govuk-list govuk-list--spaced">
+        <% if allow_publish?(manual, slug_unique) %>
+            <li>
+              <%= render("govuk_publishing_components/components/button", {
+                text: "Publish",
+                href: confirm_publish_manual_path(manual),
+              }) %>
+            </li>
+        <% end %>
+        <%# if false %><%# Comment out discard for now %>
+          <% unless manual.has_ever_been_published? %>
+            <li>
+              <%= render("govuk_publishing_components/components/button", {
+                text: "Discard draft",
+                href: confirm_discard_manual_path(manual),
+                destructive: true,
+              }) %>
             </li>
           <% end %>
+        <%# end %>
         </ul>
-        <% else %>
-          <p class='no-content-message'>You haven&rsquo;t added any sections to this manual yet.</p>
-        <% end %>
-
-        <h2>Actions</h2>
-        <div class="well">
-          <%= link_to 'Edit manual', edit_manual_path(manual), class: 'btn btn-success add-right-margin' %>
-          <%= link_to 'Edit first publication date', original_publication_date_manual_path(manual), class: 'btn btn-default' %>
-        </div>
-
-        <div class="panel panel-default">
-          <div class="panel-heading"><h3>Publish manual</h3></div>
-          <div class="panel-body">
-            <%= publish_text(manual, slug_unique) %>
-            <% if allow_publish?(manual, slug_unique) %>
-              <%= link_to 'Publish manual', confirm_publish_manual_path(manual), class: 'btn btn-danger' %>
-            <% end %>
-          </div>
-        </div>
       </div>
-    </div>
+    <% end %>
 
-    <% unless manual.has_ever_been_published? %>
-      <div class="panel panel-default">
-        <div class="panel-heading"><h3>Discard draft manual</h3></div>
-        <div class="panel-body">
-          <%= link_to 'Discard draft', confirm_discard_manual_path(manual), class: 'btn btn-danger' %>
-        </div>
+    <% if manual.published? %>
+      <div class="app-view-manuals__sidebar-actions">
+        <p class="govuk-body">
+          <%= link_to "View on website (opens in new tab)", url_for_public_manual(manual), target: "_blank", class: "govuk-link" %></p>
       </div>
     <% end %>
-  </div>
 
-  <div class="col-md-4">
     <%= render "admin/link_check_reports/link_check_report", reportable: { manual_id: manual.to_param }, report: manual.link_check_report %>
+
+    <% if manual.draft? && manual.has_ever_been_published? %>
+      <div class="app-inset-prompt">
+        <p class="govuk-body">This is a new draft of a document that has already been published.</p>
+        <p class="govuk-body">
+          <%= link_to "Go to published edition", url_for_public_manual(manual), target: "_blank", class: "govuk-link" %></p>
+      </div>
+    <% end %>
   </div>
 </div>
diff --git a/app/views/shared/_summary_card_component.html.erb b/app/views/shared/_summary_card_component.html.erb
new file mode 100644
index 000000000..8ba838f82
--- /dev/null
+++ b/app/views/shared/_summary_card_component.html.erb
@@ -0,0 +1,41 @@
+<%
+  id ||= nil
+  data_attributes ||= {}
+  summary_card_actions ||= []
+  rows ||=[]
+%>
+<%= tag.div class: "app-c-summary-card-component", id: id, data: data_attributes do %>
+  <div class="govuk-summary-card">
+    <div class="govuk-summary-card__title-wrapper">
+      <h2 class="govuk-summary-card__title"><%= title %></h2>
+      <ul class="govuk-summary-card__actions">
+        <% summary_card_actions.each do |action| %>
+          <li class="govuk-summary-card__action">
+            <%= link_to sanitize(action[:label] + tag.span(" #{title}", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state #{"gem-link--destructive govuk-!-font-weight-bold" if action[:destructive]}".strip %>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+    <div class="govuk-summary-card__content">
+      <dl class="govuk-summary-list">
+        <% rows.each do |row| %>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key"><%= row[:key] %></dt>
+            <dd class="govuk-summary-list__value"><%= row[:value] %></dd>
+            <% if row[:actions].present? %>
+              <dd class="govuk-summary-list__actions">
+                <% row[:actions].each do |action| %>
+                  <% if action[:opens_in_new_tab] %>
+                    <%= link_to sanitize(action[:label] + tag.span(" #{row[:key]} (opens in new tab)", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state govuk-!-margin-left-2", rel: "noreferrer noopener", target: "_blank" %>
+                  <% else %>
+                    <%= link_to sanitize(action[:label] + tag.span(" #{row[:key]}", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state govuk-!-margin-left-2 #{"gem-link--destructive" if action[:destructive]}".strip %>
+                  <% end %>
+                <% end %>
+              </dd>
+            <% end %>
+          </div>
+        <% end %>
+      </dl>
+    </div>
+  </div>
+<% end %>
diff --git a/features/step_definitions/manual_steps.rb b/features/step_definitions/manual_steps.rb
index 08e1ef379..a901b0229 100644
--- a/features/step_definitions/manual_steps.rb
+++ b/features/step_definitions/manual_steps.rb
@@ -301,8 +301,8 @@
 
 When(/^I click the publish manual button$/) do
   go_to_manual_page(@manual.title) if current_path != manual_path(@manual)
-  expect(page).to have_link("Publish manual", href: confirm_publish_manual_path(@manual))
-  click_on "Publish manual"
+  expect(page).to have_link("Publish", href: confirm_publish_manual_path(@manual))
+  click_on "Publish"
 end
 
 Then(/^I am asked to confirm the publishing of a section titled "(.*?)"$/) do |section_title|
@@ -590,7 +590,7 @@
 Then(/^I can see the change note and update type form when editing existing sections$/) do
   @sections.each do |section|
     go_to_manual_page(@manual.title)
-    click_on section.title
+    click_link section.title, href: manual_section_path(@manual, section)
     click_on "Edit section"
 
     check_that_change_note_fields_are_present
@@ -778,7 +778,7 @@
 
 Then(/^the order of the sections in the manual should have been updated$/) do
   @reordered_section_attributes.map { |sec| sec[:title] }.each.with_index do |title, index|
-    expect(page).to have_css(".document-list li.document:nth-child(#{index + 1}) .document-title", text: title)
+    expect(page).to have_css(".govuk-summary-list .govuk-summary-list__row:nth-child(#{index + 1}) dt.govuk-summary-list__key", text: title)
   end
 end
 
@@ -812,5 +812,5 @@
 
   click_on @manual.title
 
-  expect(page).to have_selector(:xpath, "//dt[.='State']/following-sibling::dd[.='#{status}']")
+  expect(page).to have_selector(:xpath, "//dt[.='Status']/following-sibling::dd[.='#{status}']")
 end
diff --git a/features/support/manual_helpers.rb b/features/support/manual_helpers.rb
index 980bbfebb..70f7ff847 100644
--- a/features/support/manual_helpers.rb
+++ b/features/support/manual_helpers.rb
@@ -91,7 +91,9 @@ def edit_manual_without_ui(manual, fields, organisation_slug: "ministry-of-tea")
 
   def edit_section(manual_title, section_title, new_fields)
     go_to_manual_page(manual_title)
-    click_on section_title
+    within(:xpath, "//div[dt[span[.='#{section_title}']]]") do
+      click_on("View")
+    end
     click_on "Edit"
     fill_in_fields(new_fields)
 
@@ -148,7 +150,7 @@ def save_as_draft
   end
 
   def publish_manual
-    click_on "Publish manual"
+    click_on "Publish"
     page.should have_button("Publish")
     click_on "Publish"
   end
@@ -202,7 +204,7 @@ def check_section_was_removed(manual_id, section_uuid)
 
   def go_to_edit_page_for_manual(manual_title)
     go_to_manual_page(manual_title)
-    click_on("Edit manual")
+    click_on("Front page")
   end
 
   def check_for_errors_for_fields(field)
@@ -211,7 +213,7 @@ def check_for_errors_for_fields(field)
 
   def check_content_preview_link(slug)
     preview_url = "#{Plek.external_url_for('draft-origin')}/#{slug}"
-    expect(page).to have_link("Preview draft", href: preview_url)
+    expect(page).to have_link("Preview on website (opens in new tab)", href: preview_url)
   end
 
   def check_live_link(slug)
diff --git a/spec/features/manual_urls_spec.rb b/spec/features/manual_urls_spec.rb
index fa05226c6..a4776e574 100644
--- a/spec/features/manual_urls_spec.rb
+++ b/spec/features/manual_urls_spec.rb
@@ -15,7 +15,7 @@
 
     click_on "A manual"
 
-    expect(page).to have_link("Edit manual", href: %r{/manuals/#{manual.id}/edit$})
+    expect(page).to have_link("Edit", href: %r{/manuals/#{manual.id}/edit$})
     expect(page).to have_link("Section 1", href: %r{/manuals/#{manual.id}/sections/#{section.uuid}$})
 
     click_on "Section 1"
diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb
index aba02d4d8..46c2a0d4f 100644
--- a/spec/helpers/application_helper_spec.rb
+++ b/spec/helpers/application_helper_spec.rb
@@ -92,4 +92,272 @@ def current_user_can_publish? = false
       end
     end
   end
+
+  describe "#state_label" do
+    it "returns a span with general tag classes" do
+      manual = FactoryBot.build_stubbed(:manual)
+
+      result = state_label(manual)
+
+      expect(result).to include("govuk-tag govuk-tag--s")
+    end
+
+    context "when manual is in draft state and has been published" do
+      let(:manual) { FactoryBot.build_stubbed(:manual, state: "draft", ever_been_published: true) }
+
+      it "returns a span with blue class" do
+        result = state_label(manual)
+
+        expect(result).to include("govuk-tag--blue")
+      end
+
+      it "appends text to publication state text" do
+        result = state_label(manual)
+
+        expect(result).to include("published with new draft")
+      end
+    end
+
+    context "when manual is in draft state and has never been published" do
+      let(:manual) { FactoryBot.build_stubbed(:manual, state: "draft", ever_been_published: false) }
+
+      it "returns a span with blue class" do
+        result = state_label(manual)
+
+        expect(result).to include("govuk-tag--blue")
+      end
+    end
+
+    context "when manual is in published state" do
+      let(:manual) { FactoryBot.build_stubbed(:manual, state: "published") }
+
+      it "returns a span with green class for an unedited published manual" do
+        result = state_label(manual)
+
+        expect(result).to include("govuk-tag--green")
+      end
+    end
+
+    context "when manual is in withdrawn state" do
+      let(:manual) { FactoryBot.build_stubbed(:manual, state: "withdrawn") }
+
+      it "returns a span with grey class for an unedited published manual" do
+        result = state_label(manual)
+
+        expect(result).to include("govuk-tag--grey")
+      end
+    end
+  end
+
+  describe "#manual_metadata_rows" do
+    before do
+      allow_any_instance_of(ApplicationHelper).to receive(:current_user_is_gds_editor?).and_return(false)
+    end
+
+    it "returns a 'status' row" do
+      manual = FactoryBot.build_stubbed(:manual)
+      allow_any_instance_of(ApplicationHelper).to receive(:state_label).and_return("state_label")
+      manual.publish_tasks = []
+
+      rows = manual_metadata_rows(manual)
+
+      expect(rows).to include(
+        { key: "Status", value: "state_label" },
+      )
+    end
+
+    it "returns a 'from' row when the current user is a gds editor" do
+      organisation_slug = "Organisational slug"
+      manual = FactoryBot.build_stubbed(:manual, organisation_slug:)
+      allow_any_instance_of(ApplicationHelper).to receive(:current_user_is_gds_editor?).and_return(true)
+      allow_any_instance_of(ApplicationHelper).to receive(:url_for_public_org).and_return("government/organisation_slug")
+      manual.publish_tasks = []
+
+      rows = manual_metadata_rows(manual)
+
+      expect(rows).to include(
+        { key: "From", value: link_to(manual.organisation_slug, "government/organisation_slug") },
+      )
+    end
+
+    it "does not return a 'from' row when the current user is not a gds editor" do
+      organisation_slug = "Organisational slug"
+      manual = FactoryBot.build_stubbed(:manual, organisation_slug:)
+      allow_any_instance_of(ApplicationHelper).to receive(:current_user_is_gds_editor?).and_return(false)
+      manual.publish_tasks = []
+
+      rows = manual_metadata_rows(manual)
+
+      expect(rows).not_to include(include(key: "From"))
+    end
+
+    it "returns a 'originally published' row when the manual has an original publication date" do
+      manual = FactoryBot.build_stubbed(:manual, originally_published_at: Time.zone.now)
+      allow_any_instance_of(ApplicationHelper).to receive(:nice_time_format).and_return("nice time format")
+      allow_any_instance_of(ApplicationHelper).to receive(:original_publication_date_manual_path).and_return("original publication date path")
+      manual.publish_tasks = []
+
+      rows = manual_metadata_rows(manual)
+
+      expect(rows).to include(
+        { key: "Originally published",
+          value: "nice time format",
+          actions: [{ label: "Edit", href: "original publication date path" }] },
+      )
+    end
+
+    it "does not return a 'first published' row when the manual does not have an original publication date" do
+      manual = FactoryBot.build_stubbed(:manual)
+      manual.publish_tasks = []
+
+      rows = manual_metadata_rows(manual)
+
+      expect(rows).not_to include(include(key: "First published"))
+    end
+
+    it "returns a 'last published' row when the manual has publish tasks" do
+      manual = FactoryBot.build_stubbed(:manual)
+      allow_any_instance_of(ApplicationHelper).to receive(:publication_task_state).and_return("test publication task state")
+      manual.publish_tasks = [{ updated_at: Time.zone.now, state: "queued" }]
+
+      rows = manual_metadata_rows(manual)
+
+      expect(rows).to include(
+        { key: "Last published",
+          value: "test publication task state" },
+      )
+    end
+
+    it "does not return an 'updated' row when the manual does not have publish tasks" do
+      manual = FactoryBot.build_stubbed(:manual)
+      manual.publish_tasks = []
+
+      rows = manual_metadata_rows(manual)
+
+      expect(rows).not_to include(include(key: "Updated"))
+    end
+  end
+
+  describe "#manual_front_page_rows" do
+    it "returns rows for slug, title, and summary" do
+      slug = "/test-slug"
+      title = "test title"
+      summary = "test summary"
+      manual = FactoryBot.build_stubbed(:manual, slug:, title:, summary:)
+
+      rows = manual_front_page_rows(manual)
+
+      expect(rows).to include(
+        { key: "Slug", value: slug },
+        { key: "Title", value: title },
+        { key: "Summary", value: summary },
+      )
+    end
+
+    it "returns a simple-formatted row for the body when it is not empty" do
+      manual = FactoryBot.build_stubbed(:manual, body: "a manual body")
+
+      rows = manual_front_page_rows(manual)
+
+      expect(rows).to include(
+        { key: "Body", value: "<p>a manual body</p>" },
+      )
+    end
+
+    it "does not return a row for the body when it is empty" do
+      manual = FactoryBot.build_stubbed(:manual, body: "")
+
+      rows = manual_front_page_rows(manual)
+
+      expect(rows).to_not include(include(key: "Body"))
+    end
+  end
+
+  describe "#manual_sidebar_action_items" do
+    before do
+      allow_any_instance_of(ApplicationHelper).to receive(:allow_publish?).and_return(true)
+    end
+
+    it "returns a 'publish' button when the manual is allowed to be published" do
+      manual = FactoryBot.build_stubbed(:manual)
+      confirm_publish_path = "/manual/blah/confirm_publish"
+      allow_any_instance_of(ApplicationHelper).to receive(:allow_publish?).and_return(true)
+      allow_any_instance_of(ApplicationHelper).to receive(:confirm_publish_manual_path).and_return(confirm_publish_path)
+
+      items = manual_sidebar_action_items(manual, true)
+
+      expect(items).to include(include("Publish"))
+      expect(items).to include(include(confirm_publish_path))
+    end
+
+    it "does not return a 'publish' button when the manual is not allowed to be published" do
+      manual = FactoryBot.build_stubbed(:manual)
+      allow_any_instance_of(ApplicationHelper).to receive(:allow_publish?).and_return(false)
+
+      items = manual_sidebar_action_items(manual, true)
+
+      expect(items).not_to include(include("Publish"))
+    end
+
+    it "returns a 'discard' button when the manual has never been published" do
+      manual = FactoryBot.build_stubbed(:manual, ever_been_published: false)
+
+      items = manual_sidebar_action_items(manual, true)
+
+      expect(items).to include(include("Discard"))
+    end
+
+    it "does not return a 'discard' button when the manual has been published" do
+      manual = FactoryBot.build_stubbed(:manual, ever_been_published: true)
+
+      items = manual_sidebar_action_items(manual, true)
+
+      expect(items).not_to include(include("Discard"))
+    end
+  end
+
+  describe "#manual_section_rows" do
+    before do
+      allow_any_instance_of(ApplicationHelper).to receive(:last_updated_text).and_return("")
+    end
+
+    it "returns a row for each section in the manual" do
+      manual = FactoryBot.build_stubbed(:manual)
+      manual.build_section({})
+      manual.build_section({})
+
+      rows = manual_section_rows(manual)
+
+      expect(rows.length).to be(2)
+    end
+
+    it "adds a 'DRAFT' tag to the key when the section is in the 'draft' state" do
+      manual = FactoryBot.build_stubbed(:manual)
+      manual.build_section({ state: "draft", title: "test title" })
+
+      rows = manual_section_rows(manual)
+
+      expect(rows).to include(include(key: include(">DRAFT</span>")))
+      expect(rows).to include(include(key: include(">test title</span>")))
+    end
+
+    it "does not add a 'DRAFT' tag to the key when the section is in the 'published' state" do
+      manual = FactoryBot.build_stubbed(:manual)
+      manual.build_section({ state: "published", title: "test title" })
+
+      rows = manual_section_rows(manual)
+
+      expect(rows).not_to include(include(key: include(">DRAFT</span>")))
+      expect(rows).to include(include(key: include(">test title</span>")))
+    end
+
+    it "uses the section's title for the key when the section is in the 'published state" do
+      manual = FactoryBot.build_stubbed(:manual)
+      manual.build_section({ state: "published", title: "test title" })
+
+      rows = manual_section_rows(manual)
+
+      expect(rows).to include(include(key: "<span>test title</span>"))
+    end
+  end
 end
diff --git a/spec/views/admin/link_check_reports/_form.html.erb.spec.rb b/spec/views/admin/link_check_reports/_form.html.erb.spec.rb
new file mode 100644
index 000000000..c6c584147
--- /dev/null
+++ b/spec/views/admin/link_check_reports/_form.html.erb.spec.rb
@@ -0,0 +1,12 @@
+require "spec_helper"
+
+describe "admin/link_check_reports/_form", type: :view do
+  it "renders a button with the specified text" do
+    allow(view).to receive(:reportable).and_return({})
+    allow(view).to receive(:button_text).and_return("Do the thing")
+
+    render
+
+    expect(rendered).to have_css("button", exact_text: "Do the thing")
+  end
+end
diff --git a/spec/views/manuals/show.html.erb_spec.rb b/spec/views/manuals/show.html.erb_spec.rb
index c35a8c597..9923e41c5 100644
--- a/spec/views/manuals/show.html.erb_spec.rb
+++ b/spec/views/manuals/show.html.erb_spec.rb
@@ -23,4 +23,25 @@
 
     expect(rendered).to match(/Discard draft/)
   end
+
+  [
+    [:notice, ".govuk-notification-banner .govuk-notification-banner__content"],
+    [:success, ".govuk-notification-banner .govuk-notification-banner__content"],
+    [:error, ".gem-c-error-alert .gem-c-error-alert__message"],
+  ].each do |flash_type, msg_css_selector|
+    it "renders a #{flash_type} flash message" do
+      manual = FactoryBot.build_stubbed(:manual)
+      manual.publish_tasks = []
+      msg = "A flash message"
+      flash[flash_type] = msg
+      allow(view).to receive(:flash).and_return(flash)
+      allow(view).to receive(:current_user).and_return(FactoryBot.build_stubbed(:user))
+
+      render template: "manuals/show",
+             layout: "layouts/design_system",
+             locals: { manual:, slug_unique: true, clashing_sections: [] }
+
+      expect(rendered).to have_css(msg_css_selector, text: msg)
+    end
+  end
 end