diff --git a/app/__init__.py b/app/__init__.py
index 4c24d5b28..59b918f81 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -743,6 +743,7 @@ def add_template_filters(application):
         format_phone_number_human_readable,
         format_thousands,
         id_safe,
+        convert_to_boolean,
     ]:
         application.add_template_filter(fn)
 
diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss
index 760d837cc..9ecefd894 100644
--- a/app/assets/stylesheets/govuk-frontend/_all.scss
+++ b/app/assets/stylesheets/govuk-frontend/_all.scss
@@ -17,6 +17,7 @@ $govuk-assets-path: "/static/";
 @import 'components/header/_header';
 @import 'components/footer/_footer';
 @import 'components/back-link/_back-link';
+@import 'components/details/_details';
 
 @import "utilities/all";
 @import "overrides/all";
diff --git a/app/templates/views/get-started.html b/app/templates/views/get-started.html
index 09e165a8d..0d20b17b9 100644
--- a/app/templates/views/get-started.html
+++ b/app/templates/views/get-started.html
@@ -1,6 +1,7 @@
 {% extends "content_template.html" %}
 {% from "components/table.html" import mapping_table, row, text_field, edit_field, field with context %}
 {% from "components/sub-navigation.html" import sub_navigation %}
+{% from "components/details/macro.njk" import govukDetails %}
 
 {% block per_page_title %}
   Get started
@@ -14,21 +15,22 @@
   <li class="get-started-list__item">
     <h2 class="get-started-list__heading">Check if GOV.UK Notify is right for you</h2>
     <p>Read about our <a href="{{ url_for('main.features') }}">features</a>, <a href="{{ url_for('.pricing') }}">pricing</a> and <a href="{{ url_for('main.roadmap') }}">roadmap</a>.</p>
-    <details>
-      <summary>Organisations that can use Notify</summary>
-      <div id="eligible-organisations">
-        <p>Notify is available to:</p>
-        <ul class="list list-bullet">
-          <li>central government departments</li>
-          <li>local authorities</li>
-          <li>state-funded schools</li>
-          <li>housing associations</li>
-          <li>the NHS</li>
-          <li>companies owned by local or central government that deliver services on their behalf</li>
-        </ul>
-        <p>Notify is not currently available to charities.</p>
-      </div>
-    </details>
+    {{ govukDetails({
+      "summaryText": "Organisations that can use Notify",
+      "html": '''
+        <div id="eligible-organisations">
+          <p>Notify is available to:</p>
+          <ul class="list list-bullet">
+            <li>central government departments</li>
+            <li>local authorities</li>
+            <li>state-funded schools</li>
+            <li>housing associations</li>
+            <li>the NHS</li>
+            <li>companies owned by local or central government that deliver services on their behalf</li>
+          </ul>
+          <p>Notify is not currently available to charities.</p>
+        </div>'''
+    }) }}
   </li>
 
   <li class="get-started-list__item">
diff --git a/app/templates/views/platform-admin/index.html b/app/templates/views/platform-admin/index.html
index 6da4e87d2..03fb8a021 100644
--- a/app/templates/views/platform-admin/index.html
+++ b/app/templates/views/platform-admin/index.html
@@ -4,6 +4,7 @@
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/status-box.html" import status_box %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/details/macro.njk" import govukDetails %}
 
 {% block per_page_title %}
   Platform admin
@@ -14,15 +15,21 @@
   <h1 class="heading-large">
     Summary
   </h1>
-  <details {% if form.errors %}open{% endif %}>
-    <summary>Apply filters</summary>
+
+  {% set details_content %}
     {% call form_wrapper(method="get") %}
       {{ textbox(form.start_date, hint="Enter start date in format YYYY-MM-DD") }}
       {{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
       </br>
       <button type="submit" class="button">Filter</button>
     {% endcall %}
-  </details>
+  {% endset %}
+
+  {{ govukDetails({
+    "summaryText": "Help with nationality",
+    "html": details_content,
+    "open": form.errors | convert_to_boolean
+  }) }}
 
   <div class="grid-row bottom-gutter">
     {% for noti_type in global_stats %}
diff --git a/app/templates/views/platform-admin/services.html b/app/templates/views/platform-admin/services.html
index c10abb095..c42a76af7 100644
--- a/app/templates/views/platform-admin/services.html
+++ b/app/templates/views/platform-admin/services.html
@@ -6,6 +6,7 @@
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/table.html" import mapping_table, field, stats_fields, row_group, row, right_aligned_field_heading, hidden_field_heading, text_field %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/details/macro.njk" import govukDetails %}
 
 {% macro stats_fields(channel, data) -%}
 
@@ -101,16 +102,21 @@
     {{ page_title|capitalize }}
   </h1>
 
-    <details>
-      <summary>Apply filters</summary>
-      {% call form_wrapper(method="get") %}
-        {{ textbox(form.start_date, hint="Enter start date in format YYYY-MM-DD") }}
-        {{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
-        {{ checkbox(form.include_from_test_key) }}
-        </br>
-        <button type="submit" class="button">Filter</button>
-      {% endcall %}
-    </details>
+
+  {% set details_content %}
+    {% call form_wrapper(method="get") %}
+      {{ textbox(form.start_date, hint="Enter start date in format YYYY-MM-DD") }}
+      {{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
+      {{ checkbox(form.include_from_test_key) }}
+      </br>
+      <button type="submit" class="button">Filter</button>
+    {% endcall %}
+  {% endset %}
+
+  {{ govukDetails({
+    "summaryText": "Apply filters",
+    "html": details_content
+  }) }}
 
   {% include "views/platform-admin/_global_stats.html" %}
 
diff --git a/gulpfile.js b/gulpfile.js
index ff2903295..257aef277 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -63,7 +63,8 @@ const copy = {
         'skip-link',
         'header',
         'footer',
-        'back-link'
+        'back-link',
+        'details'
       ];
       let done = 0;
 
@@ -143,7 +144,6 @@ const javascripts = () => {
     paths.src + 'javascripts/govuk/cookie-functions.js',
     paths.src + 'javascripts/cookieMessage.js',
     paths.src + 'javascripts/stick-to-window-when-scrolling.js',
-    paths.src + 'javascripts/detailsPolyfill.js',
     paths.src + 'javascripts/apiKey.js',
     paths.src + 'javascripts/autofocus.js',
     paths.src + 'javascripts/enhancedTextbox.js',