diff --git a/lib/assets/javascripts/_modules/collapsible-navigation.js b/lib/assets/javascripts/_modules/collapsible-navigation.js
index d15b3fde..a27ac966 100644
--- a/lib/assets/javascripts/_modules/collapsible-navigation.js
+++ b/lib/assets/javascripts/_modules/collapsible-navigation.js
@@ -31,15 +31,17 @@
         var $topLevelItem = $($topLevelItems[i]);
         var $heading = $topLevelItem.find('> a');
         var $listing = $topLevelItem.find('> ul');
+        var id = 'toc-' + $heading.text().toLowerCase().replace(' ', '-')
         // Only add collapsible functionality if there are children.
         if ($listing.length == 0) {
           continue;
         }
         $topLevelItem.addClass('collapsible');
         $listing.addClass('collapsible__body')
+        .attr('id', id)
         .attr('aria-expanded', 'false');
         $heading.addClass('collapsible__heading')
-        .after('<button class="collapsible__toggle"><span class="collapsible__toggle-label">Expand ' + $heading.text() + '</span><span class="collapsible__toggle-icon" aria-hidden="true"></button>')
+        .after('<button class="collapsible__toggle" aria-controls="' + id +'"><span class="collapsible__toggle-label">Expand ' + $heading.text() + '</span><span class="collapsible__toggle-icon" aria-hidden="true"></button>')
         $topLevelItem.on('click', '.collapsible__toggle', function(e) {
           e.preventDefault();
           var $parent = $(this).parent();
@@ -51,11 +53,11 @@
     function toggleHeading($topLevelItem) {
       var isOpen = $topLevelItem.hasClass('is-open');
       var $heading = $topLevelItem.find('> a');
-      var $body = $topLevelItem.find('collapsible__body');
+      var $body = $topLevelItem.find('.collapsible__body');
       var $toggleLabel = $topLevelItem.find('.collapsible__toggle-label');
 
       $topLevelItem.toggleClass('is-open', !isOpen);
-      $body.attr('aria-expanded', isOpen ? 'true' : 'false');
+      $body.attr('aria-expanded', isOpen ? 'false' : 'true');
       $toggleLabel.text(isOpen ? 'Expand ' + $heading.text() : 'Collapse ' + $heading.text());
     }
 
diff --git a/lib/assets/stylesheets/modules/_collapsible.scss b/lib/assets/stylesheets/modules/_collapsible.scss
index 64b89a54..6e47cef0 100644
--- a/lib/assets/stylesheets/modules/_collapsible.scss
+++ b/lib/assets/stylesheets/modules/_collapsible.scss
@@ -11,6 +11,10 @@
     display: block
   }
 }
+.collapsible__heading,
+.toc__list > ul > li > a:link.collapsible__heading {
+  margin-right: 30px;
+}
 .collapsible__toggle {
   position: absolute;
   top: 0;
@@ -34,12 +38,15 @@
   &::after {
     content: '';
     display: block;
-    background: no-repeat file-url('arrow-down.svg') center center;
-    background-size: 18px auto;
-    width: 20px;
-    height: 40px;
+    border: 2px solid $black;
+    border-width: 2px 2px 0 0;
+    transform: rotate(135deg);
+    width: 10px;
+    height: 10px;
+    margin-top: 10px;
   }
   .collapsible.is-open &::after {
-    background-image: file-url('arrow-up.svg');
+    transform: rotate(315deg);
+    margin-top: 18px;
   }
 }
diff --git a/lib/assets/stylesheets/modules/_toc.scss b/lib/assets/stylesheets/modules/_toc.scss
index ad1de4da..61a7287e 100644
--- a/lib/assets/stylesheets/modules/_toc.scss
+++ b/lib/assets/stylesheets/modules/_toc.scss
@@ -27,7 +27,7 @@
 
       a:link, a:visited {
         display: block;
-        padding: 8px 40px 8px $gutter-half;
+        padding: 8px $gutter 8px $gutter-half;
         margin: 0 $gutter-half * -1;
         border-left: 5px solid transparent;
 
diff --git a/lib/source/images/arrow-down.svg b/lib/source/images/arrow-down.svg
deleted file mode 100644
index 1f9e98f7..00000000
--- a/lib/source/images/arrow-down.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#0B0C0C;}
-</style>
-<polygon class="st0" points="17,25.7 1.6,11.5 4.4,8.5 17,20.3 29.6,8.5 32.4,11.5 "/>
-</svg>
diff --git a/lib/source/images/arrow-up.svg b/lib/source/images/arrow-up.svg
deleted file mode 100644
index dbf56a6a..00000000
--- a/lib/source/images/arrow-up.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#0B0C0C;}
-</style>
-<polygon class="st0" points="29.6,25.5 17,13.7 4.4,25.5 1.6,22.5 17,8.3 32.4,22.5 "/>
-</svg>
diff --git a/lib/source/layouts/_header.erb b/lib/source/layouts/_header.erb
index f20d8548..0d968217 100644
--- a/lib/source/layouts/_header.erb
+++ b/lib/source/layouts/_header.erb
@@ -8,7 +8,7 @@
       <% end %>
         <% if config[:tech_docs][:show_govuk_logo] %>
           <span class="govuk-logo">
-            <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36">
+            <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36" alt="">
             GOV.UK
           </span>
         <% end %>