From 2a8c48a18445588dcfbbdaa02ab2b52cebc2a658 Mon Sep 17 00:00:00 2001
From: Caitlin Roach <caitlin.roach1@nhs.net>
Date: Tue, 16 Jun 2026 16:14:41 +0100
Subject: [PATCH 1/2] Add empty state for no pharmacies

---
 app/routes/prototype-admin.js                 |  14 +++
 .../includes/_preset-scenarios-table.html     |   8 ++
 app/views/pharmacies/index.html               | 116 +++++++++---------
 3 files changed, 81 insertions(+), 57 deletions(-)

diff --git a/app/routes/prototype-admin.js b/app/routes/prototype-admin.js
index b2401748..2bd6777f 100644
--- a/app/routes/prototype-admin.js
+++ b/app/routes/prototype-admin.js
@@ -564,6 +564,20 @@ module.exports = (router) => {
     res.redirect('/home')
   })
 
+  // ----------------------------------------------------------------
+  // Preset: Pharmacy HQ, no data (Amanda White, P15951)
+  // ----------------------------------------------------------------
+
+  router.get('/prototype-setup/preset/pharmacy-hq-no-data', (req, res) => {
+    resetSession(req)
+    const data = req.session.data
+    data.currentUserId = '6424325235325'
+    data.currentOrganisationId = 'P15951'
+    // Remove all pharmacies belonging to P15951 to start with a clean slate
+    data.organisations = data.organisations.filter(org => org.companyId !== 'P15951' || org.type === 'Pharmacy HQ')
+    res.redirect('/home')
+  })
+
   // ----------------------------------------------------------------
   // Preset: Recorder, single organisation (Ocean Merritt, FR4V56)
   // ----------------------------------------------------------------
diff --git a/app/views/includes/_preset-scenarios-table.html b/app/views/includes/_preset-scenarios-table.html
index 3d9bd63b..05a98cf7 100644
--- a/app/views/includes/_preset-scenarios-table.html
+++ b/app/views/includes/_preset-scenarios-table.html
@@ -71,6 +71,14 @@
     role: "Group administrator",
     scenarioDetails: "Group admin for a large pharmacy chain (same-name pharmacies)."
   },
+  {
+    presetLabel: "Group admin, pharmacy HQ (no data)",
+    presetPath: "/prototype-setup/preset/pharmacy-hq-no-data",
+    userName: "Amanda White",
+    userEmail: "amanda.white@nhs.net",
+    role: "Group administrator",
+    scenarioDetails: "Group admin for a pharmacy HQ with no pre-loaded data, pharmacies or users."
+  },
   {
     presetLabel: "Regional lead",
     presetPath: "/prototype-setup/preset/regions",
diff --git a/app/views/pharmacies/index.html b/app/views/pharmacies/index.html
index b033a9bf..ac9ab6ff 100644
--- a/app/views/pharmacies/index.html
+++ b/app/views/pharmacies/index.html
@@ -43,65 +43,67 @@ <h1 class="nhsuk-heading-l">Pharmacies</h1>
         href: "/pharmacies/select"
       }) }}
 
-      <table class="nhsuk-table" id="pharmacies-table">
-        <caption class="nhsuk-table__caption nhsuk-table__caption--m">Pharmacies added ({{ organisations | length }})</caption>
-      </table>
-      {% if (organisations | length) > 10 %}
-        <div class="nhsuk-form-group nhsuk-u-margin-bottom-4" style="margin-top: -30px;">
-          <label class="nhsuk-label" for="pharmacy-search">Search</label>
-          <input class="nhsuk-input nhsuk-input--width-20" id="pharmacy-search" name="pharmacy-search" type="search" autocomplete="off" placeholder="">
-        </div>
-      {% endif %}
-      <table class="nhsuk-table" id="pharmacies-table-data">
-        <thead role="rowgroup" class="nhsuk-table__head">
-          <tr role="row">
-            <th role="columnheader" class="" scope="col">
-              Name
-            </th>
-            <th role="columnheader" class="" scope="col">
-              Vaccines
-            </th>
-            <th role="columnheader" class="" scope="col">
-              Users
-            </th>
-            <th role="columnheader" class="" scope="col">
-              Status
-            </th>
-            <th role="columnheader" class="" scope="col">
-              <span class="nhsuk-u-visually-hidden">Actions</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody class="nhsuk-table__body">
-          {% for organisation in organisations %}
-            <tr role="row" class="nhsuk-table__row">
-              <td class="nhsuk-table__cell">
-                {{ organisation.name }} ({{ organisation.id}})
-              </td>
-              <td class="nhsuk-table__cell ">
-                {% set vaccinesEnabled = [] %}
-                {% for vaccine in organisation.vaccines %}
-                  {% if vaccine.status == "enabled" %}
-                    {% set vaccinesEnabled = (vaccinesEnabled.push(vaccine.name), vaccinesEnabled) %}
-                  {% endif %}
-                {% endfor %}
-
-                {{ (vaccinesEnabled | sort | join(", ")) | capitaliseFirstLetter }}
-              </td>
-              <td class="nhsuk-table__cell ">
-                {{ organisationUserCounts[organisation.id] }}
-              </td>
-              <td class="nhsuk-table__cell ">
-                {{ organisation.status }}
-              </td>
-              <td class="nhsuk-table__cell ">
-                <a href="/pharmacies/{{ organisation.id }}">Manage</a>
-              </td>
+      {% if (organisations | length) > 0 %}
+        <table class="nhsuk-table" id="pharmacies-table">
+          <caption class="nhsuk-table__caption nhsuk-table__caption--m">Pharmacies added ({{ organisations | length }})</caption>
+        </table>
+        {% if (organisations | length) > 10 %}
+          <div class="nhsuk-form-group nhsuk-u-margin-bottom-4" style="margin-top: -30px;">
+            <label class="nhsuk-label" for="pharmacy-search">Search</label>
+            <input class="nhsuk-input nhsuk-input--width-20" id="pharmacy-search" name="pharmacy-search" type="search" autocomplete="off" placeholder="">
+          </div>
+        {% endif %}
+        <table class="nhsuk-table" id="pharmacies-table-data">
+          <thead role="rowgroup" class="nhsuk-table__head">
+            <tr role="row">
+              <th role="columnheader" class="" scope="col">
+                Name
+              </th>
+              <th role="columnheader" class="" scope="col">
+                Vaccines
+              </th>
+              <th role="columnheader" class="" scope="col">
+                Users
+              </th>
+              <th role="columnheader" class="" scope="col">
+                Status
+              </th>
+              <th role="columnheader" class="" scope="col">
+                <span class="nhsuk-u-visually-hidden">Actions</span>
+              </th>
             </tr>
-          {% endfor %}
+          </thead>
+          <tbody class="nhsuk-table__body">
+            {% for organisation in organisations %}
+              <tr role="row" class="nhsuk-table__row">
+                <td class="nhsuk-table__cell">
+                  {{ organisation.name }} ({{ organisation.id}})
+                </td>
+                <td class="nhsuk-table__cell ">
+                  {% set vaccinesEnabled = [] %}
+                  {% for vaccine in organisation.vaccines %}
+                    {% if vaccine.status == "enabled" %}
+                      {% set vaccinesEnabled = (vaccinesEnabled.push(vaccine.name), vaccinesEnabled) %}
+                    {% endif %}
+                  {% endfor %}
+
+                  {{ (vaccinesEnabled | sort | join(", ")) | capitaliseFirstLetter }}
+                </td>
+                <td class="nhsuk-table__cell ">
+                  {{ organisationUserCounts[organisation.id] }}
+                </td>
+                <td class="nhsuk-table__cell ">
+                  {{ organisation.status }}
+                </td>
+                <td class="nhsuk-table__cell ">
+                  <a href="/pharmacies/{{ organisation.id }}">Manage</a>
+                </td>
+              </tr>
+            {% endfor %}
 
-        </tbody>
-      </table>
+          </tbody>
+        </table>
+      {% endif %}
 
       {% if closedOrganisations.length > 0 %}
         <details class="nhsuk-details">

From e2f67c33f6d1a668f062a933e2ef04ab0a0d2f6d Mon Sep 17 00:00:00 2001
From: Caitlin Roach <caitlin.roach1@nhs.net>
Date: Mon, 24 Aug 2026 15:19:56 +0100
Subject: [PATCH 2/2] caption option

---
 app/views/record-vaccinations/add-batch.html               | 2 +-
 app/views/record-vaccinations/batch.html                   | 7 +++++--
 app/views/record-vaccinations/consent.html                 | 5 ++++-
 app/views/record-vaccinations/delivery-team.html           | 5 ++++-
 app/views/record-vaccinations/dose-amount.html             | 5 ++++-
 app/views/record-vaccinations/dose.html                    | 6 ++++--
 app/views/record-vaccinations/eligibility.html             | 5 ++++-
 app/views/record-vaccinations/healthcare-worker.html       | 5 ++++-
 app/views/record-vaccinations/injection-site.html          | 5 ++++-
 app/views/record-vaccinations/location.html                | 5 ++++-
 .../record-vaccinations/patient-estimated-due-date.html    | 5 ++++-
 app/views/record-vaccinations/review-previous.html         | 4 +++-
 app/views/record-vaccinations/vaccination-date.html        | 5 ++++-
 app/views/record-vaccinations/vaccinator.html              | 5 ++++-
 app/views/record-vaccinations/vaccine.html                 | 5 ++++-
 15 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/app/views/record-vaccinations/add-batch.html b/app/views/record-vaccinations/add-batch.html
index a2c351e3..1be2957a 100644
--- a/app/views/record-vaccinations/add-batch.html
+++ b/app/views/record-vaccinations/add-batch.html
@@ -45,7 +45,7 @@
       }) }}
     {% endif %}
 
-      <h1 class="nhsuks-heading-l">{{ pageName }}</h1>
+      <h1 class="nhsuks-heading-l"><span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age }} old, {{ data.vaccine }}</span>{{ pageName }}</h1>
 
       <form action="/record-vaccinations/answer-add-batch" method="post" novalidate>
 
diff --git a/app/views/record-vaccinations/batch.html b/app/views/record-vaccinations/batch.html
index b42feb36..75bb97c5 100644
--- a/app/views/record-vaccinations/batch.html
+++ b/app/views/record-vaccinations/batch.html
@@ -59,12 +59,15 @@
         {% endif %}
 
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{% endset %}
+
         {{ radios({
           "idPrefix": "vaccineBatch",
           "name": "vaccineBatch",
           "fieldset": {
             "legend": {
-              "text": ("Which batch are you using?" if data.vaccinationToday == 'yes' else "Which batch was it?"),
+              "html": captionHtml + ("Which batch are you using?" if data.vaccinationToday == 'yes' else "Which batch was it?"),
               "size": "l",
               "isPageHeading": true
             }
@@ -82,7 +85,7 @@
 
       {% else %}
 
-        <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
+        <h1 class="nhsuk-heading-l"><span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old</span>{{ pageName }}</h1>
 
         {% if organisationSetting.permissionLevel == "Recorder" %}
           <p>An admin user needs to add a vaccine before you can record a vaccination.</p>
diff --git a/app/views/record-vaccinations/consent.html b/app/views/record-vaccinations/consent.html
index e38e2344..99e51be7 100644
--- a/app/views/record-vaccinations/consent.html
+++ b/app/views/record-vaccinations/consent.html
@@ -163,12 +163,15 @@
           }) }}
         {% endset %}
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{% endset %}
+
         {{ radios({
           idPrefix: "consent",
           name: "consent",
           fieldset: {
             legend: {
-              text: ("Who is giving consent?" if data.vaccinationToday == 'yes' else "Who gave consent?"),
+              html: captionHtml + ("Who is giving consent?" if data.vaccinationToday == 'yes' else "Who gave consent?"),
               size: "l",
               isPageHeading: "true"
             }
diff --git a/app/views/record-vaccinations/delivery-team.html b/app/views/record-vaccinations/delivery-team.html
index 77431849..5efa8638 100644
--- a/app/views/record-vaccinations/delivery-team.html
+++ b/app/views/record-vaccinations/delivery-team.html
@@ -42,12 +42,15 @@
           {% endif %}
         {% endfor %}
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old</span>{% endset %}
+
         {{ radios({
           idPrefix: "site-id",
           name: "siteId",
           fieldset: {
             legend: {
-              text: ("Which site is it?" if data.vaccinationToday == 'yes' else "Which site was it?"),
+              html: captionHtml + ("Which site is it?" if data.vaccinationToday == 'yes' else "Which site was it?"),
               size: "l",
               isPageHeading: true
             }
diff --git a/app/views/record-vaccinations/dose-amount.html b/app/views/record-vaccinations/dose-amount.html
index 083da4c4..a2498c66 100644
--- a/app/views/record-vaccinations/dose-amount.html
+++ b/app/views/record-vaccinations/dose-amount.html
@@ -35,12 +35,15 @@
 
       <form action="/record-vaccinations/answer-dose-amount" method="post" novalidate>
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{% endset %}
+
         {{ radios({
           idPrefix: "dose-amount",
           name: "doseAmount",
           fieldset: {
             legend: {
-              text: ("Did you give a full dose of the vaccine?" if data.vaccinationToday == 'yes' else "Was a full dose of the vaccine given?"),
+              html: captionHtml + ("Did you give a full dose of the vaccine?" if data.vaccinationToday == 'yes' else "Was a full dose of the vaccine given?"),
               classes: "nhsuk-fieldset__legend--l",
               isPageHeading: true
             }
diff --git a/app/views/record-vaccinations/dose.html b/app/views/record-vaccinations/dose.html
index a222fe84..ab30a8fb 100644
--- a/app/views/record-vaccinations/dose.html
+++ b/app/views/record-vaccinations/dose.html
@@ -126,6 +126,8 @@
         {% endif %}
 
         {% if radiosHint %}
+          {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+          {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{% endset %}
           {{ radios({
             idPrefix: "vaccineDose",
             name: "vaccineDose",
@@ -134,7 +136,7 @@
             } if (errors | length) > 0,
             fieldset: {
               legend: {
-                text: ("Which dose of the " + data.vaccine + " vaccine are you giving?" if data.vaccinationToday == 'yes' else "Which dose of the " + data.vaccine + " vaccine was it?"),
+                html: captionHtml + ("Which dose of the " + data.vaccine + " vaccine are you giving?" if data.vaccinationToday == 'yes' else "Which dose of the " + data.vaccine + " vaccine was it?"),
                 classes: "nhsuk-fieldset__legend--l",
                 isPageHeading: true
               }
@@ -153,7 +155,7 @@
             } if (errors | length) > 0,
             fieldset: {
               legend: {
-                text: ("Which dose of the " + data.vaccine + " vaccine are you giving?" if data.vaccinationToday == 'yes' else "Which dose of the " + data.vaccine + " vaccine was it?"),
+                html: captionHtml + ("Which dose of the " + data.vaccine + " vaccine are you giving?" if data.vaccinationToday == 'yes' else "Which dose of the " + data.vaccine + " vaccine was it?"),
                 classes: "nhsuk-fieldset__legend--l",
                 isPageHeading: true
               }
diff --git a/app/views/record-vaccinations/eligibility.html b/app/views/record-vaccinations/eligibility.html
index fb3a6765..4332e0d7 100644
--- a/app/views/record-vaccinations/eligibility.html
+++ b/app/views/record-vaccinations/eligibility.html
@@ -158,9 +158,12 @@
             }), items) %}
         {% endfor %}
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{% endset %}
+
         {% call fieldset({
           legend: {
-            text: ("Why are you giving them the " + data.vaccine + " vaccine?" if data.vaccinationToday == 'yes' else "Why was the patient eligible for the " + data.vaccine + " vaccine?"),
+            html: captionHtml + ("Why are you giving them the " + data.vaccine + " vaccine?" if data.vaccinationToday == 'yes' else "Why was the patient eligible for the " + data.vaccine + " vaccine?"),
             size: "l",
             isPageHeading: true
           }
diff --git a/app/views/record-vaccinations/healthcare-worker.html b/app/views/record-vaccinations/healthcare-worker.html
index ab115043..b4327f1c 100644
--- a/app/views/record-vaccinations/healthcare-worker.html
+++ b/app/views/record-vaccinations/healthcare-worker.html
@@ -36,12 +36,15 @@
       <form action="/record-vaccinations/answer-healthcare-worker" method="post" novalidate>
 
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{% endset %}
+
         {{ radios({
           idPrefix: "healthcare-worker",
           name: "healthcareWorker",
           fieldset: {
             legend: {
-              text: pageName,
+              html: captionHtml + pageName,
               size: "l",
               isPageHeading: true
             }
diff --git a/app/views/record-vaccinations/injection-site.html b/app/views/record-vaccinations/injection-site.html
index 95ce0d86..cc994ccc 100644
--- a/app/views/record-vaccinations/injection-site.html
+++ b/app/views/record-vaccinations/injection-site.html
@@ -81,12 +81,15 @@
         {% endset %}
 
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{% endset %}
+
         {{ radios({
           idPrefix: "injection-site",
           name: "injectionSite",
           fieldset: {
             legend: {
-              text: ("Where did you give the injection?" if data.vaccinationToday == 'yes' else "Where was the injection given?"),
+              html: captionHtml + ("Where did you give the injection?" if data.vaccinationToday == 'yes' else "Where was the injection given?"),
               size: "l",
               isPageHeading: true
             }
diff --git a/app/views/record-vaccinations/location.html b/app/views/record-vaccinations/location.html
index 8f3aa8fa..fc9e7475 100644
--- a/app/views/record-vaccinations/location.html
+++ b/app/views/record-vaccinations/location.html
@@ -60,12 +60,15 @@
         </div>
       {% endset -%}
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{% endset %}
+
         {{ radios({
           idPrefix: "location-type",
           name: "locationType",
           fieldset: {
             legend: {
-              text: ("Where is the vaccination taking place?" if data.vaccinationToday == 'yes' else "Where did the vaccination take place?"),
+              html: captionHtml + ("Where is the vaccination taking place?" if data.vaccinationToday == 'yes' else "Where did the vaccination take place?"),
               size: "l",
               isPageHeading: true
             }
diff --git a/app/views/record-vaccinations/patient-estimated-due-date.html b/app/views/record-vaccinations/patient-estimated-due-date.html
index 04c094be..8f757728 100644
--- a/app/views/record-vaccinations/patient-estimated-due-date.html
+++ b/app/views/record-vaccinations/patient-estimated-due-date.html
@@ -35,12 +35,15 @@
         <!-- reset showError to false -->
         <input type="hidden" name="showError" value="">
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{% endset %}
+
         {{ dateInput({
           id: "pregnancyDueDate",
           namePrefix: "pregnancyDueDate",
           fieldset: {
             legend: {
-              text: "What is " + data.firstName + " " + data.lastName + "’s estimated due date?",
+              html: captionHtml + "What is " + data.firstName + " " + data.lastName + "'s estimated due date?",
               size: "l",
               isPageHeading: true
             }
diff --git a/app/views/record-vaccinations/review-previous.html b/app/views/record-vaccinations/review-previous.html
index 64935ccd..862a9e3a 100644
--- a/app/views/record-vaccinations/review-previous.html
+++ b/app/views/record-vaccinations/review-previous.html
@@ -12,7 +12,9 @@
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-two-thirds">
 
-      <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
+      {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+
+      <h1 class="nhsuk-heading-l"><span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old, {{ data.vaccine }}</span>{{ pageName }}</h1>
 
       {{ summaryList({
           rows: [
diff --git a/app/views/record-vaccinations/vaccination-date.html b/app/views/record-vaccinations/vaccination-date.html
index f7085bc0..cbcec9c0 100644
--- a/app/views/record-vaccinations/vaccination-date.html
+++ b/app/views/record-vaccinations/vaccination-date.html
@@ -61,12 +61,15 @@
           }) }}
         {% endset -%}
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set legendHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old</span>Is the vaccination today?{% endset %}
+
         {{ radios({
           idPrefix: "vaccinationToday",
           name: "vaccinationToday",
           fieldset: {
             legend: {
-              text: "Is the vaccination today?",
+              html: legendHtml,
               classes: "nhsuk-fieldset__legend--l",
               isPageHeading: "true"
             }
diff --git a/app/views/record-vaccinations/vaccinator.html b/app/views/record-vaccinations/vaccinator.html
index 5637a542..80809176 100644
--- a/app/views/record-vaccinations/vaccinator.html
+++ b/app/views/record-vaccinations/vaccinator.html
@@ -47,12 +47,15 @@
           }), items) %}
         {% endfor %}
 
+        {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+        {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old</span>{% endset %}
+
         {{ radios({
           idPrefix: "vaccinator",
           name: "vaccinatorId",
           fieldset: {
             legend: {
-              text: ("Who is the vaccinator?" if data.vaccinationToday == 'yes' else "Who was the vaccinator?"),
+              html: captionHtml + ("Who is the vaccinator?" if data.vaccinationToday == 'yes' else "Who was the vaccinator?"),
               size: "l",
               isPageHeading: "true"
             }
diff --git a/app/views/record-vaccinations/vaccine.html b/app/views/record-vaccinations/vaccine.html
index df7366bb..dba06692 100644
--- a/app/views/record-vaccinations/vaccine.html
+++ b/app/views/record-vaccinations/vaccine.html
@@ -99,12 +99,15 @@
         }), items) %}
       {% endfor %}
 
+      {% set patientAge = data.dateOfBirth | isoDateFromDateInput | age if data.dateOfBirth.day else data.dateOfBirth | age %}
+      {% set captionHtml %}<span class="nhsuk-caption-l">{{ data.firstName }} {{ data.lastName }}, {{ patientAge }} old</span>{% endset %}
+
       {{ radios({
         "idPrefix": "vaccine",
         "name": "vaccine",
         "fieldset": {
           "legend": {
-            "text": question,
+            "html": captionHtml + question,
             "size": "l",
             "isPageHeading": true
           }