diff --git a/docs/components/badge.md b/docs/components/badge.md
index 59b84b2..f19fe99 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -7,8 +7,6 @@ tags:
   - component
 ---
 
-[add example]
-
 ## When to use
 
 Badges can be placed:
@@ -29,7 +27,7 @@ There are different size and colour variations of badges.
 
 ### Large badges
 
-[add example]
+{% example "badges/badge-large.njk" %}
 
 Large badges always include a number count. This tells users how many items need their attention.
 
@@ -37,21 +35,19 @@ Above the count of 9, large badges always display 9+. This allows the width of t
 
 ### Small badges
 
-[add example]
-
 Small badges are simple circles. They can be placed:
 
 - on the edge of icons, such as on the bottom navigation
 - on cards, alongside text, such as “Document attached” on appointment cards
 
-[add example]
+{% example "badges/badge-small.njk" %}
 
 The colour of small badges can be:
 
 - red for important notifications that needs to stand out on a page
 - blue for secondary notifications that can afford to be less prominent
 
-[add example]
+{% example "badges/badge-small-red.njk" %}
 
 For example, users will see a red badge on the bottom navigation to indicate unread messages. When they then navigate to their messages inbox to view those messages, unread message headings are indicated by blue badges.
 
diff --git a/docs/examples/badges/badge-large.njk b/docs/examples/badges/badge-large.njk
new file mode 100644
index 0000000..7ff1fd0
--- /dev/null
+++ b/docs/examples/badges/badge-large.njk
@@ -0,0 +1,13 @@
+---
+layout: layouts/example.njk
+title: Badge Large
+figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-7303&t=UdzCaY5YPtBypveQ-0"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhsbadge-large--docs"
+---
+
+{% from "badge/large/macro.njk" import badgeLarge %}
+
+{{ badgeLarge({
+  count: 3,
+  label: 'Something'
+}) }}
diff --git a/docs/examples/badges/badge-small-red.njk b/docs/examples/badges/badge-small-red.njk
new file mode 100644
index 0000000..9a2837b
--- /dev/null
+++ b/docs/examples/badges/badge-small-red.njk
@@ -0,0 +1,16 @@
+---
+layout: layouts/example.njk
+title: Badge Small
+figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-7303&t=UdzCaY5YPtBypveQ-0"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhsbadge-small--docs"
+---
+
+{% from "badge/small/macro.njk" import badgeSmall %}
+
+<p>
+    {{ badgeSmall({
+    label: 'Documents',
+    color: 'red'
+    }) }}
+    Document attached
+</p>
\ No newline at end of file
diff --git a/docs/examples/badges/badge-small.njk b/docs/examples/badges/badge-small.njk
new file mode 100644
index 0000000..147ace6
--- /dev/null
+++ b/docs/examples/badges/badge-small.njk
@@ -0,0 +1,15 @@
+---
+layout: layouts/example.njk
+title: Badge Small
+figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-7303&t=UdzCaY5YPtBypveQ-0"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhsbadge-small--docs"
+---
+
+{% from "badge/small/macro.njk" import badgeSmall %}
+
+<p>
+    {{ badgeSmall({
+    label: 'Something'
+    }) }}
+    Document attached
+</p>
diff --git a/docs/index.njk b/docs/index.njk
index 00537af..a53d5e7 100644
--- a/docs/index.njk
+++ b/docs/index.njk
@@ -4,6 +4,7 @@
 
 {%- from 'hero/macro.njk' import hero -%}
 {%- from 'card/macro.njk' import card -%}
+{%- from 'badge/large/macro.njk' import badgeLarge -%}
 
 {% block header %}
   {{ super() }}
diff --git a/src/all.scss b/src/all.scss
index 2b8643e..183da6a 100644
--- a/src/all.scss
+++ b/src/all.scss
@@ -1,4 +1,5 @@
 @import "node_modules/nhsuk-frontend/packages/core/tools/all.scss";
 @import "node_modules/nhsuk-frontend/packages/core/settings/all.scss";
 
-@import "./components/card/card.scss";
+@import "./components/card/card";
+@import "./components/badge/badge";
diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss
new file mode 100644
index 0000000..debc2fc
--- /dev/null
+++ b/src/components/badge/_badge.scss
@@ -0,0 +1,73 @@
+// ==========================================================================
+// COMPONENTS / #BADGE
+// ==========================================================================
+
+@use "sass:math";
+
+.nhsapp-badge {
+  @include nhsuk-typography-responsive(19);
+
+  display: inline-block;
+
+  background-color: $nhsuk-error-color;
+  border-radius: nhsuk-spacing(1);
+  color: $color_nhsuk-white;
+  font-weight: bold;
+  padding: 0 nhsuk-spacing(2);
+
+  @include mq($from: tablet) {
+    padding: 0 12px;
+  }
+}
+
+.nhsapp-badge-small {
+  position: relative;
+
+  display: inline-flex;
+  align-items: baseline;
+}
+
+/**
+  * Mixin to position the small badge
+  * @param {number} $size - The size of the badge
+  */
+@mixin small-badge-position($size: 8px) {
+  position: relative;
+  width: $size;
+  height: $size;
+  margin-right: $size;
+  border-radius: math.div($size, 2);
+
+  $font-height: 0.7em; // The height of a capital letter in the specific font we use (Frutiger)
+  bottom: calc(0.5 * ($font-height - $size));
+}
+
+$nhsapp-badge-size-mobile: 8px;
+$nhsapp-badge-size-tablet: 12px;
+
+.nhsapp-badge-small__indicator {
+  @include small-badge-position($nhsapp-badge-size-mobile);
+
+  @include mq($from: tablet) {
+    @include small-badge-position($nhsapp-badge-size-tablet);
+  }
+
+  background-color: $color_nhsuk-blue;
+}
+
+.nhsapp-badge-small--red {
+  .nhsapp-badge-small__indicator {
+    background-color: $nhsuk-error-color;
+  }
+}
+
+.nhsapp-badge-small--absolute {
+  .nhsapp-badge-small__indicator {
+    position: absolute;
+
+    left: -2 * $nhsapp-badge-size-mobile;
+    @include mq($from: tablet) {
+      left: -2 * $nhsapp-badge-size-tablet;
+    }
+  }
+}
diff --git a/src/components/badge/large/badge-large.njk b/src/components/badge/large/badge-large.njk
new file mode 100644
index 0000000..ef0799c
--- /dev/null
+++ b/src/components/badge/large/badge-large.njk
@@ -0,0 +1,11 @@
+{%- if params.count -%}
+<span class="nhsapp-badge">
+    <span class="nhsuk-u-visually-hidden">You have</span>
+    {% if params.count > 9 %}
+        +9
+    {% else %}
+        {{ params.count }}
+    {% endif %}
+    <span class="nhsuk-u-visually-hidden">{{ params.label }}</span>
+</span>
+{%- endif -%}
\ No newline at end of file
diff --git a/src/components/badge/large/macro.njk b/src/components/badge/large/macro.njk
new file mode 100644
index 0000000..db66e95
--- /dev/null
+++ b/src/components/badge/large/macro.njk
@@ -0,0 +1,3 @@
+{% macro badgeLarge(params) %}
+  {%- include "./badge-large.njk" -%}
+{% endmacro %}
diff --git a/src/components/badge/small/badge-small.njk b/src/components/badge/small/badge-small.njk
new file mode 100644
index 0000000..a86ad66
--- /dev/null
+++ b/src/components/badge/small/badge-small.njk
@@ -0,0 +1,7 @@
+<span class="
+    nhsapp-badge-small 
+    {{ 'nhsapp-badge-small--red' if params.color === 'red' }}
+    {{ 'nhsapp-badge-small--absolute' if params.positionAbsolute }}">
+    <span class="nhsapp-badge-small__indicator" aria-hidden="true"></span>
+    <span class="nhsuk-u-visually-hidden">{{ params.label }}</span>
+</span>
\ No newline at end of file
diff --git a/src/components/badge/small/macro.njk b/src/components/badge/small/macro.njk
new file mode 100644
index 0000000..d3afe9a
--- /dev/null
+++ b/src/components/badge/small/macro.njk
@@ -0,0 +1,3 @@
+{% macro badgeSmall(params) %}
+  {%- include "./badge-small.njk" -%}
+{% endmacro %}