diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html
index 1919cbed..1f5503dd 100644
--- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html
+++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html
@@ -1,22 +1,24 @@
 {% load wagtailcore_tags wagtailimages_tags %}
-<div>
-    {# Section heading #}
-    <h2>{{ value.title }}</h2>
+<div class="grid__keypoints keypoints">
+    {% if value.title %}
+        <h2 class="heading heading--two">{{ value.title }}</h2>
+    {% endif %}
+    {% if value.intro %}
+        <div class="text text--five">{{ value.intro|richtext }}</div>
+    {% endif %}
 
-    {# Section intro #}
-    <div>{{ value.intro|richtext }}</div>
-
-    {# Key points #}
-    <ul>
+    <ul class="keypoints__list">
         {% for key_point in value.key_points %}
-            <li>
-                {% include "patterns/atoms/icons/icon.html" with name=key_point.icon classname=key_point.icon %}
-                <p>
-                    <b>Icon:</b> {{ key_point.icon }}<br>
-                    <b>Icon Label:</b> {{ key_point.icon_label }}<br>
-                    <b>Heading:</b> {{ key_point.heading }}
-                </p>
-                <div>{{ key_point.description|richtext }}</div>
+            <li class="keypoints__item">
+                <div class="keypoints__wrapper">
+                    <p class="keypoints__label">{{ key_point.icon_label }}</p>
+                    {% include "patterns/atoms/icons/icon.html" with name=key_point.icon classname="keypoints__icon" %}
+                </div>
+                    {# header title is optional, so heading here may be h2 #}
+                <{% if value.title %}h3{% else %}h2{% endif %} class="keypoints__heading">
+                {{ key_point.heading }}
+                {% if value.title %}</h3>{% else %}</h2>{% endif %}
+                <div class="keypoints__description">{{ key_point.description|richtext }}</div>
             </li>
         {% endfor %}
     </ul>
diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html
index 3473469d..7c5b9451 100644
--- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html
+++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html
@@ -139,6 +139,11 @@ <h2 class="underline mt-8 mb-2">Homepage Showcase</h2>
             {% include "patterns/molecules/streamfield/blocks/showcase_block.html" with is_homepage_showcase=True %}
         </div>
 
+        <div>
+            <h2 class="underline mt-8 mb-2">Icon keypoints</h2>
+            {% include "patterns/molecules/streamfield/blocks/icon_keypoints_block.html" %}
+        </div>
+
         <div>
             <h2 class="underline mt-8 mb-2">Featured Case Study</h2>
             {% include "patterns/molecules/streamfield/blocks/featured_case_study.html" %}
diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss
index 14da784e..ec09f88d 100644
--- a/tbx/static_src/sass/components/_grid.scss
+++ b/tbx/static_src/sass/components/_grid.scss
@@ -111,7 +111,8 @@
     }
 
     &__division-signpost,
-    &__featured-services {
+    &__featured-services,
+    &__keypoints {
         grid-column: 2 / span 4;
         margin-bottom: $spacer;
 
diff --git a/tbx/static_src/sass/components/_keypoints.scss b/tbx/static_src/sass/components/_keypoints.scss
new file mode 100644
index 00000000..3397d3c1
--- /dev/null
+++ b/tbx/static_src/sass/components/_keypoints.scss
@@ -0,0 +1,68 @@
+@use 'config' as *;
+
+.keypoints {
+    &__list {
+        display: flex;
+        flex-direction: column;
+        gap: $spacer-medium;
+
+        @include media-query(medium) {
+            gap: $spacer;
+        }
+    }
+
+    &__item {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+    }
+
+    &__icon {
+        width: 115px;
+        height: 105px;
+    }
+
+    &__wrapper {
+        border-top: 1px solid var(--color--border);
+        padding-top: $spacer-mini-plus;
+        grid-column: 1 / span 9;
+        grid-row: 1;
+
+        @include media-query(medium) {
+            margin-right: $spacer-medium;
+            grid-column: 1 / span 3;
+            grid-row: span 2;
+        }
+    }
+
+    &__label {
+        @include font-size(size-four);
+        font-weight: $weight--semibold;
+        color: var(--color--theme-primary);
+    }
+
+    &__heading {
+        @include font-size(size-two);
+        font-weight: $weight--semibold;
+        color: var(--color--heading);
+        padding: $spacer-mini-plus 0 $spacer-mini;
+        align-self: flex-start;
+        grid-column: 1 / span 12;
+
+        @include media-query(medium) {
+            padding: 0 0 $spacer-mini-plus;
+            grid-column: 4 / span 6;
+            grid-row: 1;
+        }
+    }
+
+    &__description {
+        @include font-size(size-four);
+        font-weight: $weight--light;
+        color: var(--color--heading);
+        grid-column: 1 / span 12;
+
+        @include media-query(medium) {
+            grid-column: 4 / span 8;
+        }
+    }
+}
diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss
index fc56c53e..816a71fb 100755
--- a/tbx/static_src/sass/main.scss
+++ b/tbx/static_src/sass/main.scss
@@ -34,6 +34,7 @@
 @use 'components/image';
 @use 'components/instagram-gallery';
 @use 'components/intro-with-images';
+@use 'components/keypoints';
 @use 'components/link';
 @use 'components/listing';
 @use 'components/listing-avatar';