diff --git a/application/static/stylesheets/application.css b/application/static/stylesheets/application.css
index 87c4fcb..94475c9 100644
--- a/application/static/stylesheets/application.css
+++ b/application/static/stylesheets/application.css
@@ -8349,6 +8349,64 @@ p + .govuk-heading-s,
       font-size: 14pt;
       line-height: 1.15; } }
 
+.app-stats {
+  display: flex;
+  justify-content: flex-start;
+  gap: 5px;
+  flex-wrap: wrap; }
+  .app-stats:not(:last-of-type) {
+    margin-bottom: 30px; }
+    @media (min-width: 40.0625em) {
+      .app-stats:not(:last-of-type) {
+        margin-bottom: 50px; } }
+  .app-stats * {
+    box-sizing: border-box; }
+  .app-stats__card {
+    background: #1d70b8;
+    padding: 1em;
+    color: white;
+    margin: 0;
+    font-family: "GDS Transport", arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    flex-grow: 1; }
+    @media print {
+      .app-stats__card {
+        font-family: sans-serif; } }
+    @media (min-width: 40.0625em) {
+      .app-stats__card {
+        font-size: 19px;
+        font-size: 1.1875rem;
+        line-height: 1.31579; } }
+    @media print {
+      .app-stats__card {
+        font-size: 14pt;
+        line-height: 1.15; } }
+  .app-stats__key {
+    font-family: "GDS Transport", arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 700;
+    font-size: 24px;
+    font-size: 1.5rem;
+    line-height: 1.04167; }
+    @media print {
+      .app-stats__key {
+        font-family: sans-serif; } }
+    @media (min-width: 40.0625em) {
+      .app-stats__key {
+        font-size: 36px;
+        font-size: 2.25rem;
+        line-height: 1.11111; } }
+    @media print {
+      .app-stats__key {
+        font-size: 24pt;
+        line-height: 1.05; } }
+
 .app-icon {
   font-style: normal; }
   .govuk-button .app-icon {
diff --git a/application/templates/progress.html b/application/templates/progress.html
index e24b473..69a94d3 100644
--- a/application/templates/progress.html
+++ b/application/templates/progress.html
@@ -1,57 +1,53 @@
 {% extends 'layouts/base.html' %}
 
-
 {% block beforeContent %}
 <a href="{{ url_for('main.index') }}" class="govuk-back-link">Back</a>
 {% endblock beforeContent %}
 
-{% block content %}
-<div class='govuk-grid-row'>
-  <div class='govuk-grid-column-two-thirds'>
+{% block content_primary %}
+
     <h1 class="govuk-heading-l">Statistics</h1>
 
-    <h2 class="govuk-heading-m">Completeness</h2>
-
-    <ul class="govuk-list">
-      <li class="dl-data-item">
-        <div class="dl-data-item__number">{{ data.total }}</div>
-        <div class="dl-data-item__label">Total planning considerations</div>
-      </li>
-      <li class="dl-data-item dl-data-item--inline">
-        <span class="dl-data-item__number">{{ data.with.legislation }}</span>
-        <span class="dl-data-item__label">with legislation</span>
-      </li>
-      <li class="dl-data-item dl-data-item--inline">
-        <span class="dl-data-item__number">{{ data.with.specification }}</span>
-        <span class="dl-data-item__label">with a specification</span>
-      </li>
-      <li class="dl-data-item dl-data-item--inline">
-        <span class="dl-data-item__number">{{ data.with.schemas }}</span>
-        <span class="dl-data-item__label">with associated schemas</span>
-      </li>
-      <li class="dl-data-item dl-data-item--inline">
-        <span class="dl-data-item__number">{{ data.with.github_discussion }}</span>
-        <span class="dl-data-item__label">with an active github discussion</span>
-      </li>
-      <li class="dl-data-item dl-data-item--inline">
-        <span class="dl-data-item__number">{{ data.with.useful_links }}</span>
-        <span class="dl-data-item__label">with useful links</span>
-      </li>
-    </ul>
-
-    <h2 class="govuk-heading-m">Progress</h2>
-
-    <ul class="govuk-list">
-      <li class="dl-data-item">
-        <div class="dl-data-item__number">{{ data.edits.total }}</div>
-        <div class="dl-data-item__label">Total updates to planning considerations</div>
-      </li>
-      <li class="dl-data-item dl-data-item--inline">
-        <span class="dl-data-item__number">{{ data.edits.recent }}</span>
-        <span class="dl-data-item__label">since {{ since.strftime('%Y-%m-%d') }}</span>
-      </li>
-    </ul>
-  </div>
-</div>
-
-{% endblock content %}
+    <h2 class="govuk-heading-m">Completeness 📊</h2>
+
+    <div class="app-stats">
+      <div class="app-stats__card">
+        <div class="app-stats__key">{{ data.total }}</div>
+        <div class="app-stats__value">Total planning considerations</div>
+      </div>
+      <div class="app-stats__card">
+        <div class="app-stats__key">{{ data.with.legislation }}</div>
+        <div class="app-stats__value">with legislation</div>
+      </div>
+      <div class="app-stats__card">
+        <div class="app-stats__key">{{ data.with.specification }}</div>
+        <div class="app-stats__value">with a specification</div>
+      </div>
+      <div class="app-stats__card">
+        <div class="app-stats__key">{{ data.with.schemas }}</div>
+        <div class="app-stats__value">with associated schemas</div>
+      </div>
+      <div class="app-stats__card">
+        <div class="app-stats__key">{{ data.with.github_discussion }}</div>
+        <div class="app-stats__value">with an active github discussion</div>
+      </div>
+      <div class="app-stats__card">
+        <div class="app-stats__key">{{ data.with.useful_links }}</div>
+        <div class="app-stats__value">with useful links</div>
+      </div>
+    </div>
+
+    <h2 class="govuk-heading-m">Progress 📈</h2>
+
+    <div class="app-stats">
+      <div class="app-stats__card">
+        <div class="app-stats__key">{{ data.edits.total }}</div>
+        <div class="app-stats__value">Total updates to planning considerations</div>
+      </div>
+      <div class="app-stats__card">
+        <div class="app-stats__key">{{ data.edits.recent }}</div>
+        <div class="app-stats__value">since {{ since.strftime('%Y-%m-%d') }}</div>
+      </div>
+    </div>
+
+{% endblock content_primary %}
diff --git a/src/scss/application.scss b/src/scss/application.scss
index 93ad5bf..0fc1e66 100644
--- a/src/scss/application.scss
+++ b/src/scss/application.scss
@@ -15,6 +15,7 @@ $govuk-new-link-styles: true;
 @import "components/question-set";
 @import "components/report-bar";
 @import "components/subnavigation";
+@import "components/stats";
 
 
 // used in buttons like "add new planning consideration"
diff --git a/src/scss/components/_stats.scss b/src/scss/components/_stats.scss
new file mode 100644
index 0000000..e139e17
--- /dev/null
+++ b/src/scss/components/_stats.scss
@@ -0,0 +1,23 @@
+.app-stats {
+  display: flex;
+  justify-content: flex-start;
+  gap: 5px;
+  &:not(:last-of-type) {
+    @include govuk-responsive-margin(8, "bottom");
+  }
+  flex-wrap: wrap;
+  * {
+    box-sizing: border-box;;
+  }
+  &__card {
+    background: $govuk-brand-colour;
+    padding: 1em;
+    color: white;
+    margin: 0;
+    @include govuk-font(19);
+    flex-grow: 1;
+  }
+  &__key {
+    @include govuk-font(36, 'bold');
+  }
+}