diff --git a/Gemfile b/Gemfile
index f8aaf27f..a3dfe160 100644
--- a/Gemfile
+++ b/Gemfile
@@ -6,7 +6,7 @@ gem 'gds-api-adapters', '~> 60.0.0'
 gem 'govuk_app_config', '~> 2.0'
 gem 'govuk_elements_rails'
 gem 'govuk_frontend_toolkit', '~> 8.2.0'
-gem 'govuk_publishing_components', '~> 20.3.0'
+gem 'govuk_publishing_components', '~> 17.21.0'
 gem 'plek', '3.0.0'
 gem 'rails', '~> 5.2.3'
 gem 'rails-i18n', '~> 5.1.3'
@@ -18,7 +18,7 @@ gem 'uglifier', '>= 1.3.0'
 group :development, :test do
   gem 'govuk-lint'
   gem 'jasmine-rails'
-  gem 'phantomjs', '~> 2.1', '>= 2.1.1.0'
+  gem 'phantomjs', '~> 2.1.1'
 end
 
 group :development do
diff --git a/Gemfile.lock b/Gemfile.lock
index 9d8383d3..9092172d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -114,7 +114,7 @@ GEM
     govuk_frontend_toolkit (8.2.0)
       railties (>= 3.1.0)
       sass (>= 3.2.0)
-    govuk_publishing_components (20.3.0)
+    govuk_publishing_components (17.21.0)
       gds-api-adapters
       govuk_app_config
       govuk_frontend_toolkit
@@ -246,7 +246,7 @@ GEM
       mime-types (>= 1.16, < 4.0)
       netrc (~> 0.8)
     robotex (1.0.0)
-    rouge (3.10.0)
+    rouge (3.7.0)
     rubocop (0.72.0)
       jaro_winkler (~> 1.5.1)
       parallel (~> 1.10)
@@ -274,8 +274,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
-    sassc (2.2.0)
+    sassc (2.0.1)
       ffi (~> 1.9)
+      rake
     sassc-rails (2.1.2)
       railties (>= 4.0.0)
       sassc (>= 2.0)
@@ -359,10 +360,10 @@ DEPENDENCIES
   govuk_app_config (~> 2.0)
   govuk_elements_rails
   govuk_frontend_toolkit (~> 8.2.0)
-  govuk_publishing_components (~> 20.3.0)
+  govuk_publishing_components (~> 17.21.0)
   jasmine-rails
   listen (>= 3.0.5, < 3.2)
-  phantomjs (~> 2.1, >= 2.1.1.0)
+  phantomjs (~> 2.1.1)
   plek (= 3.0.0)
   poltergeist
   pry-byebug
@@ -381,4 +382,4 @@ RUBY VERSION
    ruby 2.6.3p62
 
 BUNDLED WITH
-   1.17.2
+   1.16.2
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 2eda776a..6e618e9b 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,7 +1,4 @@
-$govuk-compatibility-govuktemplate: true;
-$govuk-compatibility-govukfrontendtoolkit: true;
-$govuk-compatibility-govukelements: true;
-@import "govuk_publishing_components/all_components";
+// The main application stylesheet
 
 @import "common";
 
@@ -15,12 +12,18 @@ $govuk-compatibility-govukelements: true;
 @import "modules/community-contact";
 @import "modules/govspeak-wrapper";
 @import "modules/hero";
+@import "modules/improve-this-page";
 @import "modules/link-unit";
 @import "modules/main-service-manual";
+@import "modules/metadata";
 @import "modules/notice";
 @import "modules/page-contents";
 @import "modules/page-header";
 @import "modules/panel";
 @import "modules/related-content";
+@import "modules/search";
 @import "modules/service-standard-point";
+@import "modules/subsections";
 @import "modules/typography";
+
+@import "govuk_publishing_components/all_components";
diff --git a/app/assets/stylesheets/hacks/_full-width.scss b/app/assets/stylesheets/hacks/_full-width.scss
index d77ce2d4..85856a2c 100644
--- a/app/assets/stylesheets/hacks/_full-width.scss
+++ b/app/assets/stylesheets/hacks/_full-width.scss
@@ -1,10 +1,23 @@
-.app-full-width {
-  #global-header-bar { // scss-lint:disable IdSelector
+.full-width {
+  // We're overriding static, we have to use IDs.
+  // scss-lint:disable IdSelector
+  #wrapper {
+    margin: 0;
+    width: auto;
+    max-width: 100%;
+  }
+
+  #global-header-bar {
     display: none;
   }
-}
 
-.app-\!-full-width-override {
-  margin: auto !important;
-  max-width: none !important;
+  .govuk-beta-label {
+    border-bottom: none;
+  }
+
+  .full-page-width-wrapper,
+  #wrapper .report-a-problem-toggle-wrapper,
+  #wrapper .report-a-problem-container {
+    @extend %site-width-container;
+  }
 }
diff --git a/app/assets/stylesheets/hacks/_header-tweaks.scss b/app/assets/stylesheets/hacks/_header-tweaks.scss
index a50dc8fd..a24c393f 100644
--- a/app/assets/stylesheets/hacks/_header-tweaks.scss
+++ b/app/assets/stylesheets/hacks/_header-tweaks.scss
@@ -2,7 +2,7 @@
 // this work, we need to slightly tweak the header's CSS from our app.
 .header-title {
   float: left;
-  color: govuk-colour("white");
+  color: $white;
   @include bold-24;
 
   // When the title appears on its own line (the search box is hidden and only a
diff --git a/app/assets/stylesheets/mixins/_margins.scss b/app/assets/stylesheets/mixins/_margins.scss
index 6ca7103c..33e5e42b 100644
--- a/app/assets/stylesheets/mixins/_margins.scss
+++ b/app/assets/stylesheets/mixins/_margins.scss
@@ -1,16 +1,16 @@
 @mixin responsive-bottom-margin {
-  margin-bottom: govuk-spacing(3);
+  margin-bottom: $gutter-half;
 
   @include media(tablet) {
-    margin-bottom: govuk-spacing(7);
+    margin-bottom: $gutter * 1.5;
   }
 }
 
 @mixin responsive-top-margin {
-  margin-top: govuk-spacing(3);
+  margin-top: $gutter-half;
 
   @include media(tablet) {
-    margin-top: govuk-spacing(7);
+    margin-top: $gutter * 1.5;
   }
 }
 
@@ -21,11 +21,11 @@
 
 
 @mixin gutter-bottom-margin {
-  margin-bottom: govuk-spacing(6);
+  margin-bottom: $gutter;
 }
 
 @mixin gutter-top-margin {
-  margin-top: govuk-spacing(6);
+  margin-top: $gutter;
 }
 
 @mixin gutter-vertical-margins {
@@ -34,9 +34,9 @@
 }
 
 @mixin gutter-bottom-margin-to-double {
-  margin-bottom: govuk-spacing(3);
+  margin-bottom: $gutter;
 
   @include media(tablet) {
-    margin-bottom: govuk-spacing(9);
+    margin-bottom: $gutter * 2;
   }
 }
diff --git a/app/assets/stylesheets/modules/_change-history.scss b/app/assets/stylesheets/modules/_change-history.scss
index fb8c3534..36469b5e 100644
--- a/app/assets/stylesheets/modules/_change-history.scss
+++ b/app/assets/stylesheets/modules/_change-history.scss
@@ -1,3 +1,33 @@
-.app-c-change-history__change-note {
-  color: $govuk-secondary-text-colour;
+.change-history {
+  margin-top: 30px;
+  width: 66%;
+
+  &__latest-change {
+
+    dt {
+      @include core-19;
+    }
+
+    dd {
+      @include bold-24;
+      margin-bottom: 10px;
+    }
+  }
+
+  &__summary {
+    @include core-16;
+    color: $grey-1;
+  }
+
+  &__past {
+
+    time {
+      @include bold-19;
+    }
+
+    li {
+      list-style: none;
+      margin-bottom: 10px;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/modules/_collection.scss b/app/assets/stylesheets/modules/_collection.scss
index 5f451fdc..40e7701e 100644
--- a/app/assets/stylesheets/modules/_collection.scss
+++ b/app/assets/stylesheets/modules/_collection.scss
@@ -1,12 +1,12 @@
 .collection {
-  border-bottom: 1px solid $govuk-border-colour;
+  border-bottom: 1px solid $border-colour;
 
-  padding-bottom: govuk-spacing(3);
-  margin-bottom: govuk-spacing(3);
+  padding-bottom: $gutter-half;
+  margin-bottom: $gutter-half;
 
   @include media(tablet) {
-    padding-bottom: govuk-spacing(6);
-    margin-bottom: govuk-spacing(6);
+    padding-bottom: $gutter;
+    margin-bottom: $gutter;
   }
 
   &:last-child {
@@ -22,7 +22,7 @@
 
   &__description {
     @include core-24;
-    color: $govuk-secondary-text-colour;
+    color: $secondary-text-colour;
     margin-top: 0;
   }
 
diff --git a/app/assets/stylesheets/modules/_community-contact.scss b/app/assets/stylesheets/modules/_community-contact.scss
index cadd5cba..8628f3ec 100644
--- a/app/assets/stylesheets/modules/_community-contact.scss
+++ b/app/assets/stylesheets/modules/_community-contact.scss
@@ -1,6 +1,7 @@
-.app-c-community-contact {
+.community-contact {
+  @include gutter-vertical-margins;
   @include media(tablet) {
     text-align: right;
-    padding-top: govuk-spacing(8);
+    padding-top: $gutter-half;
   }
 }
diff --git a/app/assets/stylesheets/modules/_govspeak-wrapper.scss b/app/assets/stylesheets/modules/_govspeak-wrapper.scss
index 4880188d..e4a99eef 100644
--- a/app/assets/stylesheets/modules/_govspeak-wrapper.scss
+++ b/app/assets/stylesheets/modules/_govspeak-wrapper.scss
@@ -8,12 +8,17 @@
   .govuk-govspeak p,
   .govuk-govspeak ol,
   .govuk-govspeak ul {
-    line-height: 1.45;
     // govspeak margin bottom is 20px
-    margin-bottom: govuk-spacing(3);
+    margin-bottom: $gutter-half;
   }
 
   .govuk-govspeak h2 {
-    @extend %govuk-heading-m;
+    margin-top: 15px;
+    padding-top: 15px;
+    // govspeak margin-top is 45px
+    @include media(tablet) {
+      margin-top: 15px;
+      padding-top: 30px;
+    }
   }
 }
diff --git a/app/assets/stylesheets/modules/_hero.scss b/app/assets/stylesheets/modules/_hero.scss
index 0644458a..e4773fc0 100644
--- a/app/assets/stylesheets/modules/_hero.scss
+++ b/app/assets/stylesheets/modules/_hero.scss
@@ -1,25 +1,57 @@
-.app-c-hero {
-  background-color: $govuk-brand-colour;
-  color: govuk-colour("white");
-  margin-bottom: govuk-spacing(3);
-  position: relative;
-  top: -1px;
+.hero {
+  background-color: $govuk-blue;
+  color: $white;
+
+  margin-bottom: $gutter-half;
 
   @include media(tablet) {
-    margin-bottom: govuk-spacing(6);
+    margin-bottom: $gutter;
   }
 
   a:link,
   a:visited {
-    @include govuk-typography-weight-bold;
+    font-weight: bold;
+    color: $white;
   }
-}
 
-.app-c-hero-lead {
-  line-height: 1.35;
-}
+  a:hover,
+  a:active {
+    color: $light-blue-25;
+  }
+
+  &__content {
+    $border-top-width: 10px;
+
+    @extend %site-width-container;
+
+    padding: ($gutter-half + $border-top-width) 0 $gutter-half;
+
+    @include media(tablet) {
+      padding: ($gutter + $border-top-width) 0 $gutter;
+    }
+  }
 
-.app-c-hero__heading--inverse,
-.app-c-hero__body--inverse {
-  color: govuk-colour("white");
+  &__title {
+    @include core-48;
+    margin-bottom: $gutter;
+    font-weight: bold;
+  }
+
+  &__description {
+    @include core-24;
+  }
+
+  &__feedback-link {
+    @include core-16;
+    line-height: 1.25;
+    margin-top: $gutter;
+
+    @include media(tablet) {
+      margin-top: 0;
+    }
+  }
+
+  &__search {
+    margin-bottom: $gutter-half;
+  }
 }
diff --git a/app/assets/stylesheets/modules/_improve-this-page.scss b/app/assets/stylesheets/modules/_improve-this-page.scss
new file mode 100644
index 00000000..b011b83a
--- /dev/null
+++ b/app/assets/stylesheets/modules/_improve-this-page.scss
@@ -0,0 +1,66 @@
+// Here we're using BEM which uses __ to denote an element within a block
+// scss-lint:disable SelectorFormat
+
+.improve-this-page {
+  @include print {
+    display: none;
+  }
+}
+
+.improve-this-page__prompt {
+  background-color: $govuk-blue;
+  color: $white;
+  padding: 10px $gutter-half 0;
+
+  a:link,
+  a:visited {
+    color: $white;
+    display: inline-block;
+
+    &:focus {
+      color: $black;
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.improve-this-page__page-is-useful-button {
+  margin-right: 0.2em;
+}
+
+.improve-this-page__is-useful-question {
+  @include bold-16;
+
+  display: inline;
+}
+
+.improve-this-page__anything-wrong {
+  float: right;
+}
+
+.improve-this-page__form {
+  margin-top: $gutter;
+  padding: $gutter-half 0;
+  border-top: 10px solid $govuk-blue;
+
+  .form-control {
+    width: 100%;
+  }
+}
+
+.improve-this-page__close {
+  @include core-16;
+
+  text-align: right;
+  display: block;
+  margin-bottom: 10px;
+
+  @include media(tablet) {
+    display: inherit;
+    float: right;
+    padding-top: 0;
+  }
+}
diff --git a/app/assets/stylesheets/modules/_metadata.scss b/app/assets/stylesheets/modules/_metadata.scss
new file mode 100644
index 00000000..07edd347
--- /dev/null
+++ b/app/assets/stylesheets/modules/_metadata.scss
@@ -0,0 +1,31 @@
+.metadata {
+  @include core-14;
+  @extend %contain-floats;
+  margin-bottom: 2em;
+
+  dt {
+    float: left;
+    clear: left;
+    width: auto;
+    min-width: 120px;
+
+    @include media(tablet) {
+      padding-right: $gutter-one-third;
+    }
+  }
+
+  dd {
+    float: left;
+    width: 55%;
+
+    @include media(tablet) {
+      width: 70%;
+    }
+  }
+
+  // Adjust icon position for external links
+  a[rel="external"]:after {
+    content: "\A0\A0\A0\A0\A0\A0";
+    background-position: right 0%;
+  }
+}
diff --git a/app/assets/stylesheets/modules/_notice.scss b/app/assets/stylesheets/modules/_notice.scss
index 07447485..347412f4 100644
--- a/app/assets/stylesheets/modules/_notice.scss
+++ b/app/assets/stylesheets/modules/_notice.scss
@@ -1,17 +1,17 @@
 .notice {
   clear: both;
   @include responsive-bottom-margin;
-  padding: govuk-spacing(3);
+  padding: $gutter-half;
 
-  border: 5px solid $govuk-brand-colour;
+  border: 5px solid $govuk-blue;
 
   @include media(tablet) {
-    padding: govuk-spacing(4);
+    padding: $gutter-two-thirds;
   }
 
   &__title {
     @include bold-36;
-    margin-bottom: govuk-spacing(2);
+    margin-bottom: $gutter-one-third;
   }
 
   &__description {
diff --git a/app/assets/stylesheets/modules/_page-contents.scss b/app/assets/stylesheets/modules/_page-contents.scss
index cb0ea371..26403ee6 100644
--- a/app/assets/stylesheets/modules/_page-contents.scss
+++ b/app/assets/stylesheets/modules/_page-contents.scss
@@ -1,15 +1,43 @@
-.app-c-page-contents {
+.page-contents {
+  margin-top: 1em;
+
+  @include media(tablet) {
+    margin-top: 0;
+    padding: 2em 0;
+  }
+
+  &__title {
+    @include bold-16;
+    margin-bottom: 5px;
+  }
+
   &__list li {
-    margin-left: govuk-spacing(0);
-    padding-right: govuk-spacing(3);
+    @include core-16;
+    list-style-type: none;
+    margin-bottom: 5px;
+    margin-left: $gutter-half;
+    padding-right: $gutter-half;
 
     &:before {
-      content: "– ";
-      display: inline-block;
-      padding-right: govuk-spacing(1);
+      content: "–";
+      float: left;
+      display: block;
+      width: $gutter-half;
+      margin-left: -$gutter-half;
     }
   }
 
+  &__list a {
+    text-decoration: none;
+    // Prevents emboldening from pushing text onto new lines
+    letter-spacing: 0.022em;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
   // Styles required by GOVUK.HighlightActiveNavItem JS
   &__list .active {
     letter-spacing: 0;
diff --git a/app/assets/stylesheets/modules/_page-header.scss b/app/assets/stylesheets/modules/_page-header.scss
index 2e0b4e09..4210c173 100644
--- a/app/assets/stylesheets/modules/_page-header.scss
+++ b/app/assets/stylesheets/modules/_page-header.scss
@@ -1,20 +1,43 @@
-.app-c-page-header {
-  &__intro {
-    p {
-      @extend %govuk-body-m;
-    }
+// Example usage:
+
+// <div class="page-header">
+//   <p class="page-header__context">Context</p>
+//   <h1 class="page-header__title">Agile delivery</h1>
+//   <p class="page-header__summary">
+//     How to work in an agile way: principles, tools and governance.
+//   </p>
+//   <p class="page-header__intro">
+//     Additional descriptive text can sit here
+//   </p>
+// </div>
+
+// Here we're using BEM which uses __ to denote an element within a block
+// scss-lint:disable SelectorFormat
+.page-header {
+  @include responsive-vertical-margins;
 
-    a {
-      @extend %govuk-link;
-    }
+  &__context {
+    @include core-24;
+
+    color: $secondary-text-colour;
+    margin-bottom: 0;
+    padding-bottom: .167em;
   }
 
-  &__heading {
-    margin-bottom: govuk-spacing(3);
+  &__title {
+    @include bold-48;
 
-    @include govuk-media-query($from: tablet) {
-      margin-bottom: govuk-spacing(7) + govuk-spacing(1);
-      margin-top: govuk-spacing(7) + govuk-spacing(1);
-    }
+    @include responsive-bottom-margin;
   }
+
+  &__summary {
+    @include core-24;
+
+    @include responsive-bottom-margin;
+  }
+
+  &__intro {
+    @include core-19;
+  }
+
 }
diff --git a/app/assets/stylesheets/modules/_panel.scss b/app/assets/stylesheets/modules/_panel.scss
index 218f6213..59b0979d 100644
--- a/app/assets/stylesheets/modules/_panel.scss
+++ b/app/assets/stylesheets/modules/_panel.scss
@@ -1,3 +1,19 @@
 .panel {
-  border-top: 1px solid $govuk-border-colour;
+  margin-top: $gutter-half;
+  padding-top: $gutter-half;
+
+  border-top: 1px solid $grey-2;
+
+  @include media(desktop) {
+    margin-top: $gutter;
+  }
+
+  &__title {
+    @include bold-24;
+    margin-bottom: $gutter-half;
+  }
+
+  &__description {
+    @include core-19;
+  }
 }
diff --git a/app/assets/stylesheets/modules/_related-content.scss b/app/assets/stylesheets/modules/_related-content.scss
index a9c8c2c9..c2e1d991 100644
--- a/app/assets/stylesheets/modules/_related-content.scss
+++ b/app/assets/stylesheets/modules/_related-content.scss
@@ -1,14 +1,34 @@
 .related {
   @include media(tablet) {
-    border-top: 1px solid $govuk-border-colour;
+    border-top: 1px solid $border-colour;
   }
 }
 
 .related-item {
+  padding-top: 1em;
+
+  &__title {
+    @include bold-19;
+    margin-bottom: 0.5em;
+  }
+
+  &__description {
+    margin-bottom: 0.5em;
+  }
+
+  &__list {
+    @include core-16;
+    list-style: none;
+  }
+
+  &__list-item {
+    margin-bottom: 0.5em;
+  }
+
   &__email-link {
-    padding-left: 25px;
+    padding-left: 30px;
     font-weight: bold;
-    background: image-url('mail-icon-x2.png') 0 40% no-repeat;
+    background: image-url('mail-icon-x2.png') 5px 40% no-repeat;
     background-size: 20px 14px;
   }
 }
diff --git a/app/assets/stylesheets/modules/_search.scss b/app/assets/stylesheets/modules/_search.scss
new file mode 100644
index 00000000..9ebf4c20
--- /dev/null
+++ b/app/assets/stylesheets/modules/_search.scss
@@ -0,0 +1,118 @@
+.search {
+  @extend %contain-floats;
+
+  &__input {
+    float: left;
+    width: 100%;
+
+    input {
+      width: 100%;
+      margin: 0.5em 0;
+      padding: 6px;
+
+      @include core-19($line-height: (28 / 19), $line-height-640: (28 / 16));
+    }
+  }
+
+  &__submit {
+    float: left;
+    padding: 6px;
+    background: $black;
+    color: $white;
+    border: 0;
+  }
+
+  // IE6 + IE7 always get the simplest version, regardless of whether javascript
+  // is enabled
+  @if ($is-ie == false) or ($ie-version >= 8) {
+    $search-button-size: 40px;
+
+    &__input {
+      @include box-sizing(border-box);
+
+      padding-right: $search-button-size;
+      margin-right: -$search-button-size;
+
+      input {
+        @include box-sizing(border-box);
+        @include appearance(none);
+
+        position: relative;
+        height: $search-button-size;
+        margin: 0;
+
+        border: 0;
+        outline-offset: 0;
+      }
+    }
+
+    &__submit {
+      @include box-sizing(border-box);
+      height: $search-button-size;
+      width: $search-button-size;
+
+      cursor: pointer;
+
+      overflow: hidden;
+      text-indent: -5000px;
+      background: $black image-url("search-button.png") no-repeat 2px 50%;
+
+      @include device-pixel-ratio() {
+        background-size: 52.5px 35px;
+        background-position: 115% 50%;
+      }
+
+      &:hover {
+        background-color: lighten($black, 5%);
+      }
+
+      &:focus {
+        z-index: 15;
+        position: relative;
+      }
+
+      @include border-radius(0);
+    }
+
+    // If JS is enabled, and browser is not IE6 or IE7, position label as a
+    // placeholder
+    .js-enabled & {
+      position: relative;
+      background: $white;
+
+      // Absolutely position the label behind the input
+      &__label {
+        @include core-19($line-height: 40px, $line-height-640: 40px);
+        position: absolute;
+        left: 0;
+        top: 1px;
+        z-index: 5;
+
+        text-indent: 15px;
+
+        color: $secondary-text-colour;
+      }
+
+      // Input is transparent and sits above the label
+      &__input input {
+        position: relative;
+        z-index: 10;
+
+        // Internet Explorer does not play well with "empty" elements. The label
+        // behind the text box becomes selectable (i.e. it acts as if the input
+        // is not there.) Setting a background image fixes it.
+        // http://stackoverflow.com/questions/2098714/input-boxes-with-transparent-background-are-not-clickable-in-ie8
+        // http://stackoverflow.com/questions/9109911/ie-z-index-trouble-on-element-with-transparent-background
+        background: transparent url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
+
+        // Javascript adds a confusingly named `focus` class to the input when
+        // it contains text. We use this to set the background to white, hiding
+        // the label.
+        &:focus,
+        &.focus {
+          background: $white;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/modules/_service-standard-point.scss b/app/assets/stylesheets/modules/_service-standard-point.scss
index 5c820686..8fa85dbf 100644
--- a/app/assets/stylesheets/modules/_service-standard-point.scss
+++ b/app/assets/stylesheets/modules/_service-standard-point.scss
@@ -1,39 +1,45 @@
-.app-c-service-standard-point {
-  border-top: 1px solid $govuk-border-colour;
-  margin-top: govuk-spacing(5);
-  padding-top: govuk-spacing(5);
+.service-standard-point {
+
+  $gutter-tablet: ($gutter * 1.5);  // 45px
+
+  border-top: 1px solid $border-colour;
+  margin-top: 1.5em;
+  padding-top: 1.5em;
 
   &:first-child {
-    margin-top: govuk-spacing(0);
+    margin-top: 0;
   }
 
   &__title {
-    margin-left: govuk-spacing(6);
+    @include bold-24;
+    margin-bottom: 0.5em;
+    margin-left: $gutter;
 
-    @include govuk-media-query($from: tablet) {
-      margin-left: govuk-spacing(8);
+    @include media(tablet) {
+      margin-left: $gutter-tablet;
     }
   }
 
   &__number {
     float: left;
-    margin-left: -(govuk-spacing(6));
+    margin-left: -$gutter;
 
-    @include govuk-media-query($from: tablet) {
-      margin-left: -(govuk-spacing(8));
+    @include media(tablet) {
+      margin-left: -$gutter-tablet;
     }
   }
 
   &__details {
-    margin-bottom: govuk-spacing(2);
-    margin-left: govuk-spacing(6);
+    @include core-19;
+    margin-bottom: 0.5em;
+    margin-left: $gutter;
 
-    @include govuk-media-query($from: tablet) {
-      margin-left: govuk-spacing(8);
+    @include media(tablet) {
+      margin-left: $gutter-tablet;
     }
   }
 
   &__link {
-    margin-top: govuk-spacing(2);
+    margin-top: 0.5em;
   }
 }
diff --git a/app/assets/stylesheets/modules/_subsections.scss b/app/assets/stylesheets/modules/_subsections.scss
new file mode 100644
index 00000000..f3367988
--- /dev/null
+++ b/app/assets/stylesheets/modules/_subsections.scss
@@ -0,0 +1,162 @@
+// Topic subsections
+// Fallback styles first, for when JS is disabled
+
+// Here we're using BEM which uses __ to denote an element within a block
+// scss-lint:disable SelectorFormat
+
+.subsection {
+  width: 100%;
+  margin-bottom: $gutter;
+
+  @include media(tablet) {
+    margin-bottom: $gutter * 1.5;
+  }
+
+  &__title {
+    @include bold-24;
+    margin-bottom: 5px;
+  }
+
+  &__description {
+    @include core-19;
+    margin-bottom: $gutter-one-quarter;
+
+    @include media(tablet) {
+      margin-bottom: $gutter-half;
+    }
+  }
+
+  &__list {
+    @include core-19;
+    padding-left: 0;
+    list-style-type: none;
+  }
+
+  &__list-item {
+    margin-bottom: 0.5em;
+  }
+
+  &__list-item a {
+    text-decoration: none;
+  }
+}
+
+
+ // When JavaScript is enabled, create accordion
+.js-accordion-with-descriptions {
+
+  // Wrapper for 'open all / close all' button
+  .subsection-controls {
+    @extend %contain-floats;
+
+    button {
+      float: right;
+
+      @include core-16;
+      cursor: pointer;
+      background: none;
+      border: none;
+      color: $link-colour;
+      padding: 0.5em 0;
+    }
+  }
+
+  // Wrapper for subsections
+  .subsection-wrapper {
+    @extend %contain-floats;
+    border-bottom: 1px solid $border-colour;
+  }
+
+  .subsection {
+    margin-bottom: 0;
+
+    @include media(tablet) {
+      margin-bottom: 0;
+    }
+
+    &__header {
+      position: relative;
+      padding-top: 14px;
+      padding-bottom: 12px;
+      border-top: 1px solid $border-colour;
+
+      // Change the background of the header on hover
+      &:hover {
+        cursor: pointer;
+        background: $highlight-colour;
+      }
+    }
+
+    &__title {
+      button {
+        color: $govuk-blue;
+        cursor: pointer;
+
+        @include bold-24;
+        background: none;
+        border: 0;
+        padding-left: 0;
+        text-align: left;
+      }
+
+      margin-bottom: 0;
+      margin-right: $gutter-half;
+
+      @include media(tablet) {
+        margin-right: $gutter;
+      }
+    }
+
+    &__description {
+      margin-bottom: 0;
+      margin-right: $gutter-half;
+
+      @include media(tablet) {
+        margin-bottom: 0;
+        margin-right: $gutter;
+      }
+    }
+
+    &__icon {
+      position: absolute;
+      top: 50%;
+      right: 0;
+
+      @include media (tablet) {
+        right: 15px;
+      }
+
+      height: 16px;
+      width: 16px;
+      margin-top: -8px;
+
+      // PNG fallback for SVG
+      background-image: image-url('icons-plus-minus.png');
+      // SVG sprite
+      background: image-url("icons-plus-minus.svg"), linear-gradient(transparent, transparent);
+      background-repeat: no-repeat;
+      background-position: 0 -16px;
+    }
+
+    &--is-open {
+      .subsection__icon {
+        background-position: 0 0;
+      }
+    }
+
+    &__content {
+      padding-top: 5px;
+      padding-bottom: $gutter-half;
+    }
+
+    &--is-open {
+      .subsection__content {
+        @include media(tablet) {
+          padding-top: 10px;
+          padding-bottom: $gutter;
+        }
+      }
+    }
+
+  }
+}
diff --git a/app/assets/stylesheets/modules/_typography.scss b/app/assets/stylesheets/modules/_typography.scss
index 3a547240..a3f8b842 100644
--- a/app/assets/stylesheets/modules/_typography.scss
+++ b/app/assets/stylesheets/modules/_typography.scss
@@ -1,16 +1,11 @@
 // Text
-.app-c-body,
-.app-c-body-s {
-  line-height: 1.45;
-}
+p {
+  margin-top: em(5, 16);
+  margin-bottom: em(20, 16);
 
-.app-link--inverse {
-  &:link,
-  &:visited {
-    color: govuk-colour("white");
+  @include media(tablet) {
+    margin-top: em(5);
+    margin-bottom: em(20);
   }
 
-  &:focus {
-    @include govuk-focused-text;
-  }
 }
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index 53d5b0fb..26b9d15c 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -4,4 +4,9 @@ $is-print: true;
 
 @import "common";
 
+// Modules
+// We're including a subset of all the modules listed in `application.scss` here
+// as not all of them have proper print styling set up.
+@import "modules/improve-this-page";
+
 @import "govuk_publishing_components/all_components_print";
diff --git a/app/presenters/topic_presenter.rb b/app/presenters/topic_presenter.rb
index b28bdead..69621589 100644
--- a/app/presenters/topic_presenter.rb
+++ b/app/presenters/topic_presenter.rb
@@ -37,71 +37,10 @@ def visually_collapsed?
     @visually_collapsed
   end
 
-  def visually_expanded?
-    !visually_collapsed?
-  end
-
-  def display_as_accordion?
-    groups.count > 2 && visually_collapsed?
-  end
-
-  def accordion_content
-    # Each accordion needs a hash, as shown in the GOV.UK Publishing Components
-    # guide: https://components.publishing.service.gov.uk/component-guide/accordion
-    #
-    # This method returns the content in the required shape from the hash
-    # supplied by the `groups` method.
-
-    groups.map { |section|
-      {
-        heading: {
-          text: section.name,
-        },
-        summary: {
-          text: section.description,
-        },
-        content: {
-          html: accordion_section_links(section.linked_items),
-        },
-        expanded: visually_expanded?,
-      }
-    }
-  end
-
 private
 
-  def accordion_section_links links
-    # Expects `links` to be an array of hashes containing `href` and `label`
-    # for the link. For example:
-    #
-    # ```ruby
-    # [
-    #   {
-    #     label: 'Link to example',
-    #     href: 'http://example.com'
-    #   }
-    # ]
-    # ```
-    #
-    # This will return santitised HTML in a string. The above example would
-    # return:
-    #
-    # ```html
-    # <ul class="govuk-list">
-    #   <li>
-    #     <a href="http://example.com" class="govuk-link">Link to example</a>
-    #   </li>
-    # </ul>
-    # ```
-
-    links = links.map { |linked_item|
-      link_html = ActionController::Base.helpers.link_to(linked_item.label, linked_item.href, class: 'govuk-link')
-      "<li>#{link_html}</li>"
-    }
-
-    list = "<ul class=\"govuk-list\">#{links.join('')}</ul>"
-
-    ActionController::Base.helpers.sanitize(list)
+  def topic_breadcrumb
+    { title: title }
   end
 
   def parent_breadcrumbs
@@ -112,8 +51,4 @@ def parent_breadcrumbs
       }
     ]
   end
-
-  def topic_breadcrumb
-    { title: title }
-  end
 end
diff --git a/app/views/content_items/guide.html.erb b/app/views/content_items/guide.html.erb
index 9edf31b1..cc89d3f8 100644
--- a/app/views/content_items/guide.html.erb
+++ b/app/views/content_items/guide.html.erb
@@ -2,104 +2,116 @@
 <% content_for :meta_description, @content_item.description %>
 
 <% content_for :extra_head do %>
-  <%= render "govuk_publishing_components/components/machine_readable_metadata", content_item: @content_item.content_item, schema: :article %>
+  <%= render 'govuk_publishing_components/components/machine_readable_metadata', content_item: @content_item.content_item, schema: :article %>
 <% end %>
 
 <% content_for :phase_message do %>
-  <%= render "shared/custom_phase_message", phase: @content_item.phase %>
+  <%= render 'shared/custom_phase_message', phase: @content_item.phase %>
 <% end %>
 
-<div class="govuk-width-container">
-  <%= render "govuk_publishing_components/components/breadcrumbs", breadcrumbs: @content_item.breadcrumbs %>
+<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @content_item.breadcrumbs %>
 
-  <!-- Page title and contact -->
-  <div class="govuk-grid-row">
+<!-- Page title and contact -->
+<div class="grid-row">
 
-    <div class="govuk-grid-column-two-thirds">
-      <div class="app-c-page-header">
-
-      <%= render "govuk_publishing_components/components/title", {
-        context: @content_item.category_title,
-        title: @content_item.title,
-        margin_bottom: 8
-      } %>
-      <% if @content_item.show_description? %>
-        <p class="govuk-body-l app-c-page-header__summary">
-          <%= @content_item.description %>
-        </p>
-      <% end %>
-      </div>
+  <div class="column-two-thirds">
+    <div class="page-header">
+      <p class="page-header__context"><%= @content_item.category_title %></p>
+      <h1 class="page-header__title">
+        <%= @content_item.title %>
+      </h1>
+    <% if @content_item.show_description? %>
+      <p class="page-header__summary">
+        <%= @content_item.description %>
+      </p>
+    <% end %>
     </div>
+  </div>
+
+  <div class="column-third">
 
-    <div class="govuk-grid-column-one-third app-c-community-contact govuk-!-padding-bottom-5">
+    <div class="community-contact">
       <p>
-        <%= link_to "Give feedback about this page", "/contact/govuk", class: "govuk-link" %>
+        <%= link_to "Give feedback about this page", "/contact/govuk", class: "feedback" %>
       </p>
     </div>
   </div>
+</div>
+
+<!-- Metadata-->
+<div class="grid-row">
+  <div class="column-two-thirds">
 
-  <!-- Metadata-->
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds app-c-metadata--heading">
-      <%= render "govuk_publishing_components/components/metadata", {
-        last_updated: "#{time_ago_in_words(@content_item.visible_updated_at)} ago",
-        from: @content_item.content_owners.map { |content_owner|
-          link_to(content_owner.title, content_owner.href)
-        }
-      } %>
+    <div class="metadata">
+      <dl>
+        <% if @content_item.content_owners.any? %>
+          <dt>Published by:</dt>
+          <% @content_item.content_owners.each do |content_owner| %>
+            <dd>
+              <%= link_to content_owner.title, content_owner.href %>
+            </dd>
+          <% end %>
+        <% end %>
+        <dt>Last updated:</dt>
+        <dd>
+          <%= time_ago_in_words(@content_item.visible_updated_at) %> ago
+        </dd>
+      </dl>
     </div>
+
   </div>
+</div>
 
-  <div class="govuk-grid-row" data-module="highlight-active-section-heading">
-    <div class="govuk-grid-column-one-third">
-      <!--  Page contents -->
-      <div class="page-contents js-page-contents js-stick-at-top-when-scrolling js-sticky-resize">
-        <h2 class="govuk-heading-s govuk-!-margin-bottom-1 govuk-!-margin-top-3">Page contents:</h2>
-        <ul class="govuk-list app-c-page-contents__list">
-          <% @content_item.header_links.each do |header_link| %>
-            <li class="govuk-body-s"><%= link_to(header_link[:title], header_link[:href], class: 'govuk-link') %></li>
-          <% end %>
-        </ul>
-      </div>
+<div class="grid-row" data-module="highlight-active-section-heading">
+  <div class="column-third">
 
+    <!--  Page contents -->
+    <div class="page-contents js-page-contents js-stick-at-top-when-scrolling js-sticky-resize">
+      <h2 class="page-contents__title">Page contents:</h2>
+      <ul class="page-contents__list">
+        <% @content_item.header_links.each do |header_link| %>
+          <li><a href="<%=header_link[:href]%>"><%=header_link[:title]%></a></li>
+        <% end %>
+      </ul>
     </div>
-    <div class="govuk-grid-column-two-thirds">
-      <div class="govspeak-wrapper govuk-!-padding-top-2">
-        <%= render "govuk_publishing_components/components/govspeak", content: @content_item.body.html_safe %>
-      </div>
 
-      <div class="app-c-change-history govuk-!-margin-top-6" data-module="gem-toggle">
-        <div class="app-c-change-history__latest-change">
-          <% if @content_item.content_owners.any? %>
-            <%= render "govuk_publishing_components/components/metadata", {
-              last_updated: time_ago_in_words(@content_item.visible_updated_at),
-              from: @content_item.content_owners.map { |content_owner|
-                link_to(content_owner.title, content_owner.href)
-              }
-            } %>
+  </div>
+  <div class="column-two-thirds">
+
+    <div class="govspeak-wrapper">
+      <%= render 'govuk_publishing_components/components/govspeak', content: @content_item.body.html_safe %>
+    </div>
+
+    <div class="change-history" data-module="gem-toggle">
+      <div class="change-history__latest-change">
+        <dl>
+        <% if @content_item.content_owners.any? %>
+          <dt>Published by:</dt>
+          <% @content_item.content_owners.each do |content_owner| %>
+            <dd>
+              <%= link_to content_owner.title, content_owner.href %>
+            </dd>
           <% end %>
-            <% if @content_item.latest_change.present? %>
-              <dl>
-                <dt class="govuk-body govuk-!-margin-bottom-0">Last update:</dt>
-                <dd>
-                  <%= render partial: 'shared/change_history', locals: {change: @content_item.latest_change} %>
-                </dd>
-              </dl>
-            <% end %>
-        </div>
-        <% if @content_item.previous_changes.present? %>
-          <p class="govuk-!-margin-bottom-3">
-            <a href="#full-history" data-controls="full-history" data-toggled-text="- Hide all page updates (<%= @content_item.previous_changes.length %>)" data-expanded="false" role="button" aria-controls="full-history" aria-expanded="false">+ Show all page updates (<%= @content_item.previous_changes.length %>)</a>
-          </p>
-          <ol id="full-history" class="app-c-change-history__past govuk-list js-hidden" aria-live="polite" role="region">
-            <% @content_item.previous_changes.each do |previous_change| %>
-              <li>
-                <%= render partial: 'shared/change_history', locals: { change: previous_change, compressed: true} %>
-              </li>
-            <% end %>
-          </ol>
         <% end %>
+        <% if @content_item.latest_change.present? %>
+          <dt>Last update:</dt>
+          <dd>
+            <%= render partial: 'shared/change_history', locals: {change: @content_item.latest_change} %>
+          </dd>
+          <% end %>
+        </dl>
       </div>
+    <% if @content_item.previous_changes.present? %>
+      <p><a href="#full-history" data-controls="full-history" data-toggled-text="- Hide all page updates (<%= @content_item.previous_changes.length + 1 %>)" data-expanded="false" role="button" aria-controls="full-history" aria-expanded="false">+ Show all page updates (<%= @content_item.previous_changes.length + 1 %>)</a></p>
+      <ol id="full-history" class="change-history__past js-hidden" aria-live="polite" role="region">
+      <% @content_item.previous_changes.each do |previous_change| %>
+        <li>
+          <%= render partial: 'shared/change_history', locals: {change: previous_change} %>
+        </li>
+      <% end %>
+      </ol>
+    <% end %>
     </div>
+
   </div>
 </div>
diff --git a/app/views/content_items/homepage.html.erb b/app/views/content_items/homepage.html.erb
index 83ca4368..2f2df9f2 100644
--- a/app/views/content_items/homepage.html.erb
+++ b/app/views/content_items/homepage.html.erb
@@ -3,66 +3,64 @@
   content_for :phase_message do
     render 'shared/custom_phase_message_homepage', phase: @content_item.phase
   end
-  content_for :body_classes, 'app-full-width'
+  content_for :body_classes, 'full-width'
 %>
 
-<header class="app-c-hero">
-  <div class="app-c-hero__content govuk-width-container">
-    <div class="govuk-main-wrapper">
-      <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-          <h1 class="govuk-heading-xl govuk-!-margin-bottom-6 app-c-hero__heading--inverse">Service Manual</h1>
-          <p class="govuk-body-lead app-c-hero-lead app-c-hero__body--inverse govuk-!-padding-bottom-1">
-            Helping teams to create and run great public services that meet the <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link app-link--inverse' %>.
-          </p>
+<header class="hero">
+  <div class="hero__content">
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        <h1 class="hero__title">Service Manual</h1>
+
+        <p class="hero__description">
+          Helping teams to create and run great public services that meet the <%= link_to 'Service Standard', '/service-manual/service-standard' %>.
+        </p>
+
+        <div class="hero__search search">
           <form action="/search" method="get" role="search">
+            <label for="search" class="search__label">Search the Service Manual</label>
+            <div class="search__input">
+              <input class="js-search-focus" name="q" id="search" type="search" title="Search the service manual" />
+            </div>
             <input type="hidden" name="filter_manual" value="/service-manual">
-            <%= render "govuk_publishing_components/components/search", {
-              id: "search",
-              label_text: "Search the service manual",
-              name: "q",
-              on_govuk_blue: true,
-              type: "search"
-            } %>
+            <input class="search__submit" type="submit" value="Search">
           </form>
         </div>
-        <div class="govuk-grid-column-one-third">
-          <p class="govuk-body-s app-c-hero__body--inverse">
-            <%= link_to 'Contact the Service Manual team', '/contact/govuk', class: 'govuk-link app-link--inverse' %>
-            with any comments or questions.
-          </p>
-        </div>
+      </div>
+
+      <div class="column-one-third">
+        <p class="hero__feedback-link"><%= link_to 'Contact the Service Manual team', '/contact/govuk' %> with any comments or questions.</p>
       </div>
     </div>
   </div>
 </header>
 
-<div class="govuk-width-container">
-  <div class="govuk-main-wrapper">
-    <% @content_item.topics.each_slice(3) do |row_of_topics| %>
-      <div class="govuk-grid-row">
-        <% row_of_topics.each do |topic| %>
-          <div class="govuk-grid-column-one-third">
-            <h2 class="govuk-heading-s govuk-!-margin-bottom-1"><%= link_to topic["title"], topic["base_path"], class: 'govuk-link' %></h2>
-            <p class="govuk-body-s"><%= topic["description"] %></p>
+<div class="full-page-width-wrapper">
+  <% @content_item.topics.each_slice(3) do |row_of_topics| %>
+    <div class="grid-row">
+      <% row_of_topics.each do |topic| %>
+        <div class="column-one-third">
+          <div class="link-unit">
+            <h2 class="link-unit__title"><%= link_to topic["title"], topic["base_path"] %></h2>
+            <p class="link-unit__description"><%= topic["description"] %></p>
           </div>
-        <% end %>
-      </div>
-    <% end %>
-
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-half">
-        <div class="panel govuk-!-padding-top-3 govuk-!-margin-top-5">
-          <h2 class="govuk-heading-m">The Service Standard</h2>
-          <p class="govuk-body app-c-body">The <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.</p>
         </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="grid-row">
+    <div class="column-half">
+      <div class="panel">
+        <h2 class="panel__title">The Service Standard</h2>
+        <p class="panel__description">The <%= link_to 'Service Standard', '/service-manual/service-standard' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.</p>
       </div>
+    </div>
 
-      <div class="govuk-grid-column-one-half">
-        <div class="panel govuk-!-padding-top-3 govuk-!-margin-top-5">
-          <h2 class="govuk-heading-m">Communities of practice</h2>
-          <p class="govuk-body app-c-body">You can view the <%= link_to 'communities of practice', '/service-manual/communities', class: 'govuk-link' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.</p>
-        </div>
+    <div class="column-half">
+      <div class="panel">
+        <h2 class="panel__title">Communities of practice</h2>
+        <p class="panel__description">You can view the <%= link_to 'communities of practice', '/service-manual/communities' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.</p>
       </div>
     </div>
   </div>
diff --git a/app/views/content_items/service_standard.html.erb b/app/views/content_items/service_standard.html.erb
index 464bf100..4d6446a0 100644
--- a/app/views/content_items/service_standard.html.erb
+++ b/app/views/content_items/service_standard.html.erb
@@ -4,57 +4,68 @@
 <% content_for :phase_message do %>
   <%= render 'shared/custom_phase_message', phase: @content_item.phase %>
 <% end %>
-<div class="govuk-width-container">
-  <%= render "govuk_publishing_components/components/breadcrumbs", breadcrumbs: @content_item.breadcrumbs %>
-
-  <!-- Page title and contact -->
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
-      <div class="app-c-page-header govuk-!-margin-top-3 govuk-!-margin-bottom-3">
-        <%= render "govuk_publishing_components/components/title", {
-          title: @content_item.title,
-        } %>
-        <p class="govuk-body-l govuk-!-margin-bottom-7 app-c-page-header__summary">
-          <%= @content_item.content_item["description"] %>
-        </p>
-        <div class="app-c-page-header__intro govuk-!-padding-bottom-3">
-          <%= @content_item.content_item["details"]["body"].html_safe %>
-        </div>
+
+<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @content_item.breadcrumbs %>
+
+<!-- Page title and contact -->
+<div class="grid-row">
+
+  <div class="column-two-thirds">
+    <div class="page-header">
+      <h1 class="page-header__title"><%= @content_item.title %></h1>
+      <p class="page-header__summary">
+        <%= @content_item.content_item["description"] %>
+      </p>
+      <div class="page-header__intro">
+        <%= @content_item.content_item["details"]["body"].html_safe %>
       </div>
     </div>
   </div>
+</div>
+
+<!-- Points -->
+<div class="grid-row">
+
+  <div class="column-two-thirds">
+    <% @content_item.points.each do |point| %>
+
+      <div class="service-standard-point" id="criterion-<%= point.number -%>">
+        <h2 class="service-standard-point__title">
+          <span class="service-standard-point__number"><%= point.number %>.</span>
+          <%= point.title_without_number %>
+        </h2>
 
-  <!-- Points -->
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
-      <% @content_item.points.each do |point| %>
-        <div class="app-c-service-standard-point" id="criterion-<%= point.number -%>">
-          <h2 class="govuk-heading-m govuk-!-margin-bottom-3 app-c-service-standard-point__title">
-            <span class="app-c-service-standard-point__number"><%= point.number %>.</span>
-            <%= point.title_without_number %>
-          </h2>
-          <div class="app-c-service-standard-point__details">
-            <%= "<p class='govuk-body'>#{point.description}</p>" if point.description.present? %>
-            <p class="govuk-body app-c-service-standard-point__link"><%= link_to "Read more about point #{ point.number }", point.base_path, class: 'govuk-link' %></p>
-          </div>
+        <div class="service-standard-point__details">
+          <p><%= point.description %></p>
+          <p class="service-standard-point__link"><%= link_to "Read more about point #{ point.number }", point.base_path %></p>
         </div>
-      <% end %>
-    </div>
+      </div>
+    <% end %>
+  </div>
 
-    <div class="govuk-grid-column-one-third">
-      <aside class="related govuk-!-padding-top-4">
-        <%= render partial: 'shared/email_signup' if @content_item.email_alert_signup_link.present? %>
-        <% if @content_item.poster_url.present? %>
-          <div class="related-item">
-            <h2 class="govuk-heading-s govuk-!-margin-bottom-2" id="download-poster">
-              Download the poster
-            </h2>
-            <p class="govuk-body">
-              <%= link_to "Download and print your own Service Standard poster", @content_item.poster_url, class: 'govuk-link' %>
-            </p>
-          </div>
-        <% end %>
-      </aside>
-    </div>
+  <div class="column-third">
+    <aside class="related">
+    <% if @content_item.email_alert_signup_link.present? %>
+      <div class="related-item">
+        <h2 class="related-item__title" id="related-subscriptions">
+          Get notifications
+        </h2>
+        <p class="related-item__description">When any points in the Service Standard are updated
+          <%= link_to "email", @content_item.email_alert_signup_link, class: 'related-item__email-link' %>
+        </p>
+      </div>
+    <% end %>
+
+    <% if @content_item.poster_url.present? %>
+      <div class="related-item">
+        <h2 class="related-item__title" id="download-poster">
+          Download the poster
+        </h2>
+        <p class="related-item__description">
+          <%= link_to "Download and print your own Service Standard poster", @content_item.poster_url %>
+        </p>
+      </div>
+    <% end %>
+    </aside>
   </div>
 </div>
diff --git a/app/views/content_items/topic.html.erb b/app/views/content_items/topic.html.erb
index a0a93885..32d9cbfa 100644
--- a/app/views/content_items/topic.html.erb
+++ b/app/views/content_items/topic.html.erb
@@ -4,73 +4,82 @@
 <% content_for :phase_message do %>
   <%= render 'shared/custom_phase_message', phase: @content_item.phase %>
 <% end %>
-<div class="govuk-width-container">
 
-  <%= render "govuk_publishing_components/components/breadcrumbs", breadcrumbs: @content_item.breadcrumbs %>
+<%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @content_item.breadcrumbs %>
 
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
-      <%= render "govuk_publishing_components/components/title", {
-        title: @content_item.title,
-        margin_bottom: 7
-      } %>
-      <p class="govuk-body-l">
+<div class="grid-row">
+  <div class="column-two-thirds">
+    <div class="page-header">
+      <h1 class="page-header__title"><%= @content_item.title %></h1>
+      <p class="page-header__summary">
         <%= @content_item.description %>
       </p>
     </div>
   </div>
+</div>
 
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
-      <% if @content_item.display_as_accordion? %>
-        <%= render "govuk_publishing_components/components/accordion", {
-          items: @content_item.accordion_content
-        } %>
-      <% else %>
-        <% @content_item.groups.each_with_index { |link_group| %>
-          <% if link_group.name.present? %>
-            <div class="subsection__header govuk-!-margin-bottom-3">
-              <h2 class="govuk-heading-m govuk-!-margin-bottom-1 govuk-!-margin-top-3 subsection__title" id="<%= link_group.name.parameterize %>"><%= link_group.name %></h2>
-            <% if link_group.description.present? %>
-              <p class="govuk-body govuk-!-margin-bottom-1 subsection__description"><%= link_group.description %></p>
+<div class="grid-row">
+  <div class="column-two-thirds">
+      <div<% if @content_item.visually_collapsed? %> class="js-hidden" data-module="accordion-with-descriptions"<% end %>>
+        <div class="subsection-wrapper">
+          <% @content_item.groups.each_with_index do |link_group, idx| %>
+            <div class="subsection js-subsection">
+            <% if link_group.name.present? %>
+              <div class="subsection__header">
+                <h2 class="subsection__title" id="<%= link_group.name.parameterize %>"><%= link_group.name %></h2>
+              <% if link_group.description.present? %>
+                <p class="subsection__description"><%= link_group.description %></p>
+              <% end %>
+              </div>
             <% end %>
+              <div class="subsection__content js-subsection-content" id="subsection_content_<%= idx %>">
+                <ul class="subsection__list">
+                  <% link_group.linked_items.each do |linked_item| %>
+                    <li class="subsection__list-item">
+                      <%= link_to linked_item.label, linked_item.href %>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
             </div>
           <% end %>
-          <ul class="govuk-list govuk-!-margin-bottom-9">
-            <% link_group.linked_items.each { |linked_item| %>
-              <li>
-                <%= link_to linked_item.label, linked_item.href, class: 'govuk-link' %>
+        </div>
+      </div>
+  </div>
+
+  <div class="column-third">
+    <aside class="related">
+    <% if @content_item.content_owners.any? %>
+      <div class="related-item">
+        <h2 class="related-item__title" id="related-communities">
+          <%= topic_related_communities_title(@content_item.content_owners) -%>
+        </h2>
+        <p class="related-item__description">
+          Find out what the cross-government community does and how to get involved.
+        </p>
+        <nav role="navigation" aria-labelledby="related-communities" class="related-communities">
+          <ul class="related-item__list">
+            <% @content_item.content_owners.each do |content_owner| %>
+              <li class="related-item__list-item">
+                <%= link_to content_owner.title, content_owner.href %>
               </li>
-            <% } %>
+            <% end %>
           </ul>
-        <% } %>
-      <% end %>
-    </div>
-
-    <div class="govuk-grid-column-one-third">
-      <aside class="related govuk-!-margin-top-3">
-      <% if @content_item.content_owners.any? %>
-        <div class="related-item govuk-!-padding-top-4 govuk-!-margin-bottom-5">
-          <h2 class="related-item__title govuk-heading-s govuk-!-margin-bottom-2" id="related-communities">
-            <%= topic_related_communities_title(@content_item.content_owners) -%>
-          </h2>
-          <p class="related-item__description govuk-body">
-            Find out what the cross-government community does and how to get involved.
-          </p>
-          <nav role="navigation" aria-labelledby="related-communities" class="related-communities">
-            <ul class="related-item__list govuk-list">
-              <% @content_item.content_owners.each do |content_owner| %>
-                <li class="related-item__list-item govuk-body-s">
-                  <%= link_to content_owner.title, content_owner.href, class: 'govuk-link' %>
-                </li>
-              <% end %>
-            </ul>
-          </nav>
-        </div>
-      <% end %>
-      <%= render partial: 'shared/email_signup' if @content_item.email_alert_signup_link.present? %>
-      </aside>
-    </div>
+        </nav>
+      </div>
+    <% end %>
 
+    <% if @content_item.email_alert_signup_link.present? %>
+      <div class="related-item">
+        <h2 class="related-item__title" id="related-subscriptions">
+          Get notifications
+        </h2>
+        <p class="related-item__description">When any guidance within this topic is updated
+          <%= link_to "email", @content_item.email_alert_signup_link, class: 'related-item__email-link' %>
+        </p>
+      </div>
+    <% end %>
+    </aside>
   </div>
+
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 81a3c445..7d82536a 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -8,10 +8,10 @@
   <!--[if IE 8]><%= stylesheet_link_tag "application-ie8" %><script>var ieVersion = 8;</script><![endif]-->
   <%= stylesheet_link_tag "print", media: "print" %>
 
-  <%= javascript_include_tag "application" %>
-  <%= javascript_include_tag "start-modules" if Rails.env.test? %>
+  <%= javascript_include_tag 'application' %>
+  <%= javascript_include_tag 'start-modules' if Rails.env.test? %>
   <%= csrf_meta_tags %>
-  <%= render "govuk_publishing_components/components/meta_tags", content_item: @content_item.content_item %>
+  <%= render 'govuk_publishing_components/components/meta_tags', content_item: @content_item.content_item %>
   <%= yield(:extra_head) %>
   <% if content_for(:meta_description).present? %>
     <meta name="description" content="<%= content_for(:meta_description) %>" />
@@ -22,25 +22,19 @@
       <span class="header-title"><%= content_for(:header_title) || "Service Manual" %></span>
   </div>
 
-  <div id="wrapper" class="app-!-full-width-override <%= wrapper_class %>">
+  <div id="wrapper" class="<%= wrapper_class %>">
     <main role="main" id="content" lang="<%= I18n.locale %>">
-      <div class="govuk-width-container">
-        <div class="govuk-grid-row">
-          <div class="govuk-grid-column-full">
-            <%= render_phase_label @content_item, content_for(:phase_message) %>
-          </div>
-        </div>
+      <div class="full-page-width-wrapper">
+        <%= render_phase_label @content_item, content_for(:phase_message) %>
       </div>
       <%= yield %>
     </main>
 
-    <div class="govuk-width-container">
-      <div class="govuk-grid-row">
-        <div class="govuk-grid-column-full">
-          <%= render "govuk_publishing_components/components/feedback" %>
-        </div>
-      </div>
-    </div>
+    <% if @content_item.use_new_style_feedback_form? %>
+      <%= render '/shared/improve_this_page' %>
+    <% else %>
+      <%= render 'govuk_publishing_components/components/feedback' %>
+    <% end %>
   </div>
 </body>
 </html>
diff --git a/app/views/shared/_change_history.html.erb b/app/views/shared/_change_history.html.erb
index 83fb0754..b3c8957d 100644
--- a/app/views/shared/_change_history.html.erb
+++ b/app/views/shared/_change_history.html.erb
@@ -1,12 +1,5 @@
-<%
-  time = change.public_timestamp
-  compressed |= false
-  time_class = compressed ? 'govuk-heading-s' : 'govuk-heading-m'
-  time_class << ' govuk-!-margin-bottom-1'
-%>
-<time datetime="<%= time.iso8601 %>" class="<%= time_class %>">
-  <%= l time, format: :short_ordinal %>
-</time>
-<p class="govuk-body-s app-c-change-history__change-note govuk-!-width-two-thirds">
+<% time = change.public_timestamp %>
+<time datetime="<%= time.iso8601 %>" class="timestamp"><%= l time, format: :short_ordinal %></time>
+<p class="change-history__summary">
   <%= change.note %>
 </p>
diff --git a/app/views/shared/_custom_phase_message.html.erb b/app/views/shared/_custom_phase_message.html.erb
index 85aeb1e6..839c76f1 100644
--- a/app/views/shared/_custom_phase_message.html.erb
+++ b/app/views/shared/_custom_phase_message.html.erb
@@ -1 +1 @@
-Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer", class: "govuk-link" %>.
+Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer" %>.
diff --git a/app/views/shared/_custom_phase_message_homepage.html.erb b/app/views/shared/_custom_phase_message_homepage.html.erb
index 85aeb1e6..839c76f1 100644
--- a/app/views/shared/_custom_phase_message_homepage.html.erb
+++ b/app/views/shared/_custom_phase_message_homepage.html.erb
@@ -1 +1 @@
-Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer", class: "govuk-link" %>.
+Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer" %>.
diff --git a/app/views/shared/_email_signup.html.erb b/app/views/shared/_email_signup.html.erb
deleted file mode 100644
index 0c782c57..00000000
--- a/app/views/shared/_email_signup.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="related-item govuk-!-padding-top-4">
-  <h2 class="govuk-heading-s govuk-!-margin-bottom-2" id="related-subscriptions">
-    Get notifications
-  </h2>
-  <p class="govuk-body">When any guidance within this topic is updated
-    <%= link_to "email", @content_item.email_alert_signup_link, class: 'govuk-link related-item__email-link' %>
-  </p>
-</div>
diff --git a/app/views/shared/_improve_this_page.html.erb b/app/views/shared/_improve_this_page.html.erb
new file mode 100644
index 00000000..9d7fc1ce
--- /dev/null
+++ b/app/views/shared/_improve_this_page.html.erb
@@ -0,0 +1,60 @@
+<div class="full-page-width-wrapper">
+  <div class="improve-this-page" data-module="improve-this-page">
+    <div class="improve-this-page__prompt js-prompt clearfix" tabindex="-1">
+      <h3 class="improve-this-page__is-useful-question">Is this page useful?</h3>
+      <%= link_to contact_govuk_path, {
+            class: 'improve-this-page__page-is-useful-button js-page-is-useful',
+            data: { 'track-category' => 'manualFeedbackForm', 'track-action' => 'ffYesClick' },
+          } do %>
+        Yes <span class="visually-hidden"> this page is useful</span>
+      <% end %>
+      <%= link_to contact_govuk_path, {
+            class: 'js-page-is-not-useful',
+            data: { 'track-category' => 'manualFeedbackForm', 'track-action' => 'ffNoClick' },
+            'aria-controls': 'improveThisPageForm',
+            'aria-expanded': false
+          } do %>
+        No <span class="visually-hidden"> this page is not useful</span>
+      <% end %>
+      <%= link_to contact_govuk_path, {
+            class: 'js-something-is-wrong improve-this-page__anything-wrong',
+            data: { 'track-category' => 'manualFeedbackForm', 'track-action' => 'ffWrongClick' },
+            'aria-controls': 'improveThisPageForm',
+            'aria-expanded': false
+          } do %>
+        Is there anything wrong with this page?
+      <% end %>
+    </div>
+    <div id="improveThisPageForm" class="improve-this-page__form js-feedback-form js-hidden" data-track-category="manualFeedbackForm" data-track-action="ffFormSubmit">
+      <a href="#" class="improve-this-page__close js-close-feedback-form" aria-controls="improveThisPageForm" aria-expanded="true">Close</a>
+      <div class="grid-row">
+        <div class="column-two-thirds">
+          <div class="js-errors"></div>
+          <form>
+            <input type="hidden" name="url" value="<%= request.original_url -%>">
+            <div class="form-group">
+              <label class="form-label-bold" for="description-field">
+                How should we improve this page?
+              </label>
+              <textarea id="description-field" class="form-control" name="description" rows="5" aria-required="true"></textarea>
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="name-field">
+                Name (optional)
+                <span class="form-hint">Include your name and email address if you'd like us to get back to you.</span>
+              </label>
+              <input id="name-field" class="form-control" type="text" name="name">
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="email-field">Email (optional)</label>
+              <input id="email-field" class="form-control" type="text" name="email">
+            </div>
+            <div>
+              <input class="button" type="submit" value="Send message">
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/spec/javascripts/accordion-with-descriptions-spec.js b/spec/javascripts/accordion-with-descriptions-spec.js
new file mode 100644
index 00000000..57f50d53
--- /dev/null
+++ b/spec/javascripts/accordion-with-descriptions-spec.js
@@ -0,0 +1,360 @@
+describe('An accordion with descriptions module', function () {
+  "use strict";
+
+  var $element;
+  var accordion;
+  var html = '\
+    <div class="subsections js-hidden" data-module="accordion-with-descriptions">\
+      <div class="subsection-wrapper">\
+        <div class="subsection js-subsection">\
+          <div class="subsection__header">\
+            <h2 class="subsection__title" id="topic-section-one">Topic Section One</h2>\
+            <p class="subsection__description">Subsection description in here</p>\
+          </div>\
+          <div class="subsection__content js-subsection-content" id="subsection_content_0">\
+            <ul class="subsection__list">\
+              <li class="subsection__list-item">\
+                <a href="">Subsection list item in here</a>\
+              </li>\
+            </ul>\
+          </div>\
+        </div>\
+        <div class="subsection js-subsection">\
+          <div class="subsection__header">\
+            <h2 class="subsection__title" id="topic-section-two">Topic Section Two</h2>\
+            <p class="subsection__description">Subsection description in here</p>\
+          </div>\
+          <div class="subsection__content js-subsection-content" id="subsection_content_1">\
+            <ul class="subsection__list">\
+              <li class="subsection__list-item">\
+                <a href="">Subsection list item in here</a>\
+              </li>\
+            </ul>\
+          </div>\
+        </div>\
+      </div>\
+    </div>';
+
+  beforeEach(function () {
+    accordion = new GOVUK.Modules.AccordionWithDescriptions();
+    $element = $(html);
+  });
+
+  afterEach(function() {
+    $(document).off();
+    sessionStorage.clear();
+  });
+
+  it("has a class of js-accordion-with-descriptions to indicate the js has loaded", function () {
+    accordion.start($element);
+
+    expect($element).toHaveClass("js-accordion-with-descriptions");
+  });
+
+  it("is not hidden", function () {
+    accordion.start($element);
+
+    expect($element).not.toHaveClass("js-hidden");
+  });
+
+  it("has an open/close all button", function () {
+    accordion.start($element);
+
+    var $openCloseAllButton = $element.find('.js-subsection-controls button');
+
+    expect($openCloseAllButton).toExist();
+    expect($openCloseAllButton).toHaveText("Open all");
+    // It has an aria-expanded false attribute as all subsections are closed
+    expect($openCloseAllButton).toHaveAttr("aria-expanded", "false");
+    // It has an aria-controls attribute that includes all the subsection_content IDs
+    expect($openCloseAllButton).toHaveAttr('aria-controls','subsection_content_0 subsection_content_1 ');
+  });
+
+  it("has no subsections which have an open state", function () {
+    accordion.start($element);
+
+    var openSubsections = $element.find('.subsection--is-open').length;
+
+    expect(openSubsections).toEqual(0);
+  });
+
+  it("inserts a button into each subsection to show/hide content", function () {
+    accordion.start($element);
+
+    var $subsectionButton = $element.find('.subsection__title button');
+
+    expect($subsectionButton).toHaveClass('subsection__button');
+    // It has an aria-expanded false attribute as it is closed
+    expect($subsectionButton).toHaveAttr('aria-expanded','false');
+    // It has an aria-controls attribute to store the subsection_content ID
+    expect($subsectionButton).toHaveAttr('aria-controls','subsection_content_0');
+  });
+
+  it("ensures all subsection content is hidden", function () {
+    accordion.start($element);
+
+    $.each($element.find('.subsection__content'), function(index, content) {
+      expect(content).toHaveClass('js-hidden');
+    });
+  });
+
+  it("adds an open/close icon to each subsection", function () {
+    accordion.start($element);
+
+    var $subsectionHeader = $element.find('.subsection__header');
+
+    expect($subsectionHeader).toContainElement('.subsection__icon');
+  });
+
+  describe('Clicking the "Open all" button', function () {
+
+    it('adds a .subsection--is-open class to each subsection to hide the icon', function () {
+      accordion.start($element);
+      clickOpenCloseAll();
+
+      expect($element.find('.subsection--is-open').length).toEqual(2);
+    });
+
+    it('adds an aria-expanded attribute to each subsection button', function () {
+      accordion.start($element);
+      clickOpenCloseAll();
+
+      expect($element.find('.js-subsection-button[aria-expanded="true"]').length).toEqual(2);
+    });
+
+    it('removes the .js-hidden class from each subsection content to hide the list of links', function () {
+      accordion.start($element);
+      clickOpenCloseAll();
+
+      expect($element.find('.js-subsection-content.js-hidden').length).toEqual(0);
+    });
+
+    it('changes the Open/Close all button text to "Close all"', function () {
+      accordion.start($element);
+      clickOpenCloseAll();
+
+      expect($element.find('.js-subsection-controls button')).toContainText("Close all");
+    });
+
+    it("triggers a google analytics custom event", function () {
+      GOVUK.analytics = {trackEvent: function() {}};
+      spyOn(GOVUK.analytics, 'trackEvent');
+
+      accordion.start($element);
+      clickOpenCloseAll();
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionAllOpened', {
+        label: 'Open All'
+      });
+    });
+
+  });
+
+  describe('Clicking the "Close all" button', function () {
+    it("triggers a google analytics custom event", function () {
+      GOVUK.analytics = {trackEvent: function() {}};
+      spyOn(GOVUK.analytics, 'trackEvent');
+
+      accordion.start($element);
+      clickOpenCloseAll();
+      clickOpenCloseAll();
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionAllClosed', {
+        label: 'Close All'
+      });
+    });
+  });
+
+  describe('Opening a section', function () {
+
+    // When a section is open (testing: toggleSection, openSection)
+    it("does not have a class of js-hidden", function () {
+      accordion.start($element);
+
+      var $subsectionButton = $element.find('.subsection__title button:first');
+      var $subsectionContent = $element.find('.subsection__content:first');
+      $subsectionButton.click();
+      expect($subsectionContent).not.toHaveClass("js-hidden");
+    });
+
+    // When a section is open (testing: toggleState, setExpandedState)
+    it("has a an aria-expanded attribute and the value is true", function () {
+      accordion.start($element);
+
+      var $subsectionButton = $element.find('.subsection__title button:first');
+      $subsectionButton.click();
+      expect($subsectionButton).toHaveAttr('aria-expanded','true');
+    });
+
+    it("has its state saved in session storage", function () {
+      accordion.start($element);
+
+      var GOVUKServiceManualTopic = "GOVUK_service_manual__";
+
+      var $subsectionButton = $element.find('.subsection__title button');
+      $subsectionButton.click();
+
+      var $openSubsections = $element.find('.subsection--is-open');
+      var subsectionOpenContentId = $openSubsections.find('.subsection__content').attr('id');
+
+      var storedItem = sessionStorage.getItem(GOVUKServiceManualTopic+subsectionOpenContentId);
+      expect(storedItem).toEqual('Opened');
+    });
+
+    it("triggers a google analytics custom event when clicking on the title", function () {
+      GOVUK.analytics = {trackEvent: function() {}};
+      spyOn(GOVUK.analytics, 'trackEvent');
+
+      accordion.start($element);
+      var $subsectionButton = $element.find('.subsection__title button:first');
+      $subsectionButton.click();
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionOpened', {
+        label: 'Topic Section One - Heading Click'
+      });
+    });
+
+    it("triggers a google analytics custom event when clicking on the icon", function () {
+      GOVUK.analytics = {trackEvent: function() {}};
+      spyOn(GOVUK.analytics, 'trackEvent');
+
+      accordion.start($element);
+      var $subsectionIcon = $element.find('.subsection__icon');
+      $subsectionIcon.click();
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionOpened', {
+        label: 'Topic Section One - Plus Click'
+      });
+    });
+
+    it("triggers a google analytics custom event when clicking in space in the header", function () {
+      GOVUK.analytics = {trackEvent: function() {}};
+      spyOn(GOVUK.analytics, 'trackEvent');
+
+      accordion.start($element);
+      var $subsectionHeader = $element.find('.subsection__header');
+      $subsectionHeader.click();
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionOpened', {
+        label: 'Topic Section One - Click Elsewhere'
+      });
+    });
+  });
+
+  describe('Closing a section', function () {
+
+    // When a section is closed (testing: toggleSection, closeSection)
+    it("has a class of js-hidden", function () {
+      accordion.start($element);
+
+      var $subsectionButton = $element.find('.subsection__title button:first');
+      var $subsectionContent = $element.find('.subsection__content:first');
+      $subsectionButton.click();
+      expect($subsectionContent).not.toHaveClass("js-hidden");
+      $subsectionButton.click();
+      expect($subsectionContent).toHaveClass("js-hidden");
+    });
+
+    // When a section is closed (testing: toggleState, setExpandedState)
+    it("has a an aria-expanded attribute and the value is false", function () {
+      accordion.start($element);
+
+      var $subsectionButton = $element.find('.subsection__title button:first');
+      var $subsectionContent = $element.find('.subsection__content');
+      $subsectionButton.click();
+      expect($subsectionButton).toHaveAttr('aria-expanded','true');
+      $subsectionButton.click();
+      expect($subsectionButton).toHaveAttr('aria-expanded','false');
+    });
+
+    it("has its state removed in session storage", function () {
+      accordion.start($element);
+
+      var GOVUKServiceManualTopic = "GOVUK_service_manual__";
+
+      var $subsection = $element.find('.subsection');
+      var $subsectionButton = $subsection.find('.subsection__title button');
+
+      // Open and close the subsection
+      $subsectionButton.click();
+      $subsectionButton.click();
+
+      var subsectionContentId = $subsection.find('.subsection__content').attr('id');
+      var storedItem = sessionStorage.getItem(GOVUKServiceManualTopic+subsectionContentId);
+      expect(storedItem).toBeNull();
+    });
+
+    it("triggers a google analytics custom event when clicking on the title", function () {
+      GOVUK.analytics = {trackEvent: function() {}};
+      spyOn(GOVUK.analytics, 'trackEvent');
+
+      accordion.start($element);
+      var $subsectionButton = $element.find('.subsection__title button:first');
+      $subsectionButton.click();
+      $subsectionButton.click();
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionClosed', {
+        label: 'Topic Section One - Heading Click'
+      });
+    });
+
+    it("triggers a google analytics custom event when clicking on the icon", function () {
+      GOVUK.analytics = {trackEvent: function() {}};
+      spyOn(GOVUK.analytics, 'trackEvent');
+
+      accordion.start($element);
+      var $subsectionIcon = $element.find('.subsection__icon');
+      $subsectionIcon.click();
+      $subsectionIcon.click();
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionClosed', {
+        label: 'Topic Section One - Minus Click'
+      });
+    });
+
+    it("triggers a google analytics custom event when clicking in space in the header", function () {
+      GOVUK.analytics = {trackEvent: function() {}};
+      spyOn(GOVUK.analytics, 'trackEvent');
+
+      accordion.start($element);
+      var $subsectionHeader = $element.find('.subsection__header');
+      $subsectionHeader.click();
+      $subsectionHeader.click();
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('pageElementInteraction', 'accordionClosed', {
+        label: 'Topic Section One - Click Elsewhere'
+      });
+    });
+
+  });
+
+  describe('When linking to a topic section', function () {
+    beforeEach(function() {
+      spyOn(GOVUK, 'getCurrentLocation').and.returnValue({
+        hash: '#topic-section-one'
+      });
+    });
+
+    it("opens the linked to topic section", function () {
+      accordion.start($element);
+
+      var $subsectionContent = $element.find('#topic-section-one')
+        .parents('.subsection').find('.subsection__content');
+
+      expect($subsectionContent).not.toHaveClass('js-hidden');
+    });
+
+    it("leaves other sections closed", function () {
+      accordion.start($element);
+
+      var $subsectionContent = $element.find('#topic-section-two')
+        .parents('.subsection').find('.subsection__content');
+
+      expect($subsectionContent).toHaveClass('js-hidden');
+    });
+  });
+
+  function clickOpenCloseAll() {
+    $element.find('.js-subsection-controls button').click();
+  }
+});
diff --git a/test/integration/guide_test.rb b/test/integration/guide_test.rb
index 65b5039d..55c8c985 100644
--- a/test/integration/guide_test.rb
+++ b/test/integration/guide_test.rb
@@ -1,5 +1,4 @@
 require 'test_helper'
-require 'pry'
 
 class GuideTest < ActionDispatch::IntegrationTest
   test "shows the time it was saved if it hasn't been published yet" do
@@ -18,7 +17,7 @@ class GuideTest < ActionDispatch::IntegrationTest
       content_store_has_item(base_path, example)
       visit base_path
 
-      within('.app-c-metadata--heading') do
+      within('.metadata') do
         assert page.has_content?('5 minutes ago')
       end
     end
@@ -28,7 +27,7 @@ class GuideTest < ActionDispatch::IntegrationTest
     travel_to Time.zone.local(2015, 10, 10, 0, 0, 0) do
       setup_and_visit_example('service_manual_guide', 'service_manual_guide')
 
-      within('.app-c-metadata--heading') do
+      within('.metadata') do
         assert page.has_content?('about 16 hours ago')
       end
     end
@@ -37,7 +36,7 @@ class GuideTest < ActionDispatch::IntegrationTest
   test "service manual guide shows content owners" do
     setup_and_visit_example('service_manual_guide', 'service_manual_guide')
 
-    within('.app-c-metadata--heading') do
+    within('.metadata') do
       assert page.has_link?('Agile delivery community')
     end
   end
@@ -54,7 +53,7 @@ class GuideTest < ActionDispatch::IntegrationTest
   test "service manual guide does not show published by" do
     setup_and_visit_example('service_manual_guide', 'service_manual_guide_community')
 
-    within('.gem-c-metadata') do
+    within('.metadata') do
       refute page.has_content?('Published by')
     end
   end
@@ -62,7 +61,7 @@ class GuideTest < ActionDispatch::IntegrationTest
   test "displays the description for a point" do
     setup_and_visit_example('service_manual_guide', 'point_page')
 
-    within('.app-c-page-header__summary') do
+    within('.page-header__summary') do
       assert page.has_content?('Research to develop a deep knowledge of who the service users are')
     end
   end
@@ -70,7 +69,7 @@ class GuideTest < ActionDispatch::IntegrationTest
   test "does not display the description for a normal guide" do
     setup_and_visit_example('service_manual_guide', 'service_manual_guide')
 
-    refute page.has_css?('.app-c-page-header__summary')
+    refute page.has_css?('.page-header__summary')
   end
 
   test "displays a link to give feedback" do
@@ -82,7 +81,7 @@ class GuideTest < ActionDispatch::IntegrationTest
   test 'displays the published date of the most recent change' do
     setup_and_visit_example('service_manual_guide', 'service_manual_guide')
 
-    within('.app-c-change-history') do
+    within('.change-history') do
       assert page.has_content? 'Last update: 9 October 2015'
     end
   end
@@ -90,7 +89,7 @@ class GuideTest < ActionDispatch::IntegrationTest
   test 'displays the most recent change history for a guide' do
     setup_and_visit_example('service_manual_guide', 'service_manual_guide')
 
-    within('.app-c-change-history') do
+    within('.change-history') do
       assert page.has_content? 'This is our latest change'
     end
   end
@@ -98,7 +97,7 @@ class GuideTest < ActionDispatch::IntegrationTest
   test 'displays the change history for a guide' do
     setup_and_visit_example('service_manual_guide', 'service_manual_guide')
 
-    within('.app-c-change-history__past') do
+    within('.change-history__past') do
       assert page.has_content? 'This is another change'
       assert page.has_content? 'Guidance first published'
     end
@@ -116,7 +115,7 @@ class GuideTest < ActionDispatch::IntegrationTest
                             })
 
     refute page.has_content? 'Show all page updates'
-    refute page.has_css? '.app-c-change-history__past'
+    refute page.has_css? '.change-history__past'
   end
 
   test 'omits the latest change and previous change if the guide has no history' do
@@ -127,6 +126,6 @@ class GuideTest < ActionDispatch::IntegrationTest
 
     refute page.has_content? 'Last update:'
     refute page.has_content? 'Show all page updates'
-    refute page.has_css? '.app-c-change-history__past'
+    refute page.has_css? '.change-history__past'
   end
 end
diff --git a/test/integration/improve_this_page_test.rb b/test/integration/improve_this_page_test.rb
new file mode 100644
index 00000000..b7cb0028
--- /dev/null
+++ b/test/integration/improve_this_page_test.rb
@@ -0,0 +1,20 @@
+require 'test_helper'
+
+class ImproveThisPageTest < ActionDispatch::IntegrationTest
+  test "asks the user if the page is useful without javascript enabled" do
+    setup_and_visit_example('service_manual_guide', 'service_manual_guide')
+
+    within('.improve-this-page') do
+      assert page.has_link?('Yes', href: '/contact/govuk')
+      assert page.has_link?('No', href: '/contact/govuk')
+    end
+  end
+
+  test "asks the user if there is anything wrong with the page without javascript enabled" do
+    setup_and_visit_example('service_manual_guide', 'service_manual_guide')
+
+    within('.improve-this-page') do
+      assert page.has_link?('Is there anything wrong with this page?', href: '/contact/govuk')
+    end
+  end
+end
diff --git a/test/integration/service_standard_test.rb b/test/integration/service_standard_test.rb
index f3f75ad4..757044d8 100644
--- a/test/integration/service_standard_test.rb
+++ b/test/integration/service_standard_test.rb
@@ -1,5 +1,4 @@
 require 'test_helper'
-require 'pry'
 
 class ServiceStandardTest < ActionDispatch::IntegrationTest
   test "service standard page has a title, summary and intro" do
@@ -13,9 +12,9 @@ class ServiceStandardTest < ActionDispatch::IntegrationTest
       }
     )
 
-    assert page.has_css?(".gem-c-title__text", text: "Service Standard"), "No title found"
-    assert page.has_css?(".app-c-page-header__summary", text: "The Service Standard is a set of 14 criteria"), "No description found"
-    assert page.has_css?(".app-c-page-header__intro", text: "All public facing transactional services must meet the standard."), "No body found"
+    assert page.has_css?(".page-header__title", text: "Service Standard"), "No title found"
+    assert page.has_css?(".page-header__summary", text: "The Service Standard is a set of 14 criteria"), "No description found"
+    assert page.has_css?(".page-header__intro", text: "All public facing transactional services must meet the standard."), "No body found"
   end
 
   test "service standard page has points" do
@@ -66,6 +65,6 @@ class ServiceStandardTest < ActionDispatch::IntegrationTest
   end
 
   def points
-    find_all('.app-c-service-standard-point')
+    find_all('.service-standard-point')
   end
 end
diff --git a/test/integration/topic_test.rb b/test/integration/topic_test.rb
index 25ec2183..a7babf4b 100644
--- a/test/integration/topic_test.rb
+++ b/test/integration/topic_test.rb
@@ -46,4 +46,36 @@ class TopicTest < ActionDispatch::IntegrationTest
     assert page.has_link?("email",
                           href: "/service-manual/test-expanded-topic/email-signup")
   end
+
+  test "it includes anchors for headings" do
+    using_javascript_driver do
+      setup_and_visit_example('service_manual_topic', 'service_manual_topic_collapsed')
+
+      assert page.has_css?("h2#group-1")
+    end
+  end
+
+  test "it does not insert the accordion buttons if the topic isn't visually collapsed" do
+    using_javascript_driver do
+      setup_and_visit_example('service_manual_topic', 'service_manual_topic')
+
+      refute page.has_css?(".subsection__button")
+    end
+  end
+
+  test "it inserts the accordion buttons if the topic is visually collapsed" do
+    using_javascript_driver do
+      setup_and_visit_example('service_manual_topic', 'service_manual_topic_collapsed')
+
+      assert page.has_css?(".subsection__button")
+    end
+  end
+
+  test "it does not use the accordion or section headings if the topic does not use sections" do
+    # 'not using sections' == having one section with no title or description
+    setup_and_visit_example('service_manual_topic', 'service_manual_topic_without_sections')
+
+    refute page.has_css?(".subsection__button")
+    refute page.has_css?(".subsection__header")
+  end
 end