diff --git a/docs/_components/example/_example.scss b/docs/_components/example/_example.scss
index cebf0dd..35f16c4 100644
--- a/docs/_components/example/_example.scss
+++ b/docs/_components/example/_example.scss
@@ -28,4 +28,5 @@
   background: $govuk-body-background-colour;
   border-top: 1px solid $govuk-border-colour;
   padding: govuk-spacing(2);
+  max-width: initial !important;
 }
diff --git a/docs/assets/sass/settings.scss b/docs/assets/sass/settings.scss
deleted file mode 100644
index 9729adc..0000000
--- a/docs/assets/sass/settings.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$govuk-brand-colour: #2288aa;
-$govuk-font-family: system-ui, sans-serif;
diff --git a/docs/index.md b/docs/index.md
index 9a5f5e7..9f9a23e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,13 +13,13 @@ startButton:
 
 <div class="govuk-grid-row">
 {% for item in collections.homepage %}
-  <section class="govuk-grid-column-one-third-from-desktop govuk-!-margin-bottom-8">
+  <section class="govuk-grid-column-one-quarter-from-desktop govuk-!-margin-bottom-8">
     <h2 class="govuk-heading-m govuk-!-margin-bottom-2">
       <a class="govuk-link--no-visited-state" href="{{ item.url }}">{{ item.data.title | smart }}</a>
     </h2>
     <p class="govuk-body">{{ item.data.description | markdown("inline") }}</p>
   </section>
-{% if loop.index == 3 or loop.index == 6 %}
+{% if loop.index == 4 or loop.index == 8 %}
 </div>
 <div class="govuk-grid-row">
 {% endif %}
diff --git a/docs/sass/_settings.scss b/docs/sass/_settings.scss
new file mode 100644
index 0000000..2568491
--- /dev/null
+++ b/docs/sass/_settings.scss
@@ -0,0 +1,6 @@
+$govuk-font-family: system-ui, sans-serif;
+$govuk-brand-colour: #2288aa;
+$govuk-link-colour: #006688;
+$govuk-hover-colour: #004466;
+$govuk-visited-colour: #333366;
+$govuk-page-width: 1100px;