diff --git a/app/assets/images/nhsuk-icon-arrow-down.svg b/app/assets/images/nhsuk-icon-arrow-down.svg
new file mode 100644
index 00000000..619714f5
--- /dev/null
+++ b/app/assets/images/nhsuk-icon-arrow-down.svg
@@ -0,0 +1,3 @@
+<svg class="nhsuk-icon nhsuk-icon--arrow-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true" fill="#212b32">
+  <path d="M17.7 14.7l-5 5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-5-5a1 1 0 0 1 1.4-1.4l3.3 3.3L11 5a1 1 0 0 1 2 0L13 16.6l3.3-3.3a1 1 0 1 1 1.4 1.4Z"/>
+</svg>
diff --git a/app/assets/images/nhsuk-icon-arrow-up-down.svg b/app/assets/images/nhsuk-icon-arrow-up-down.svg
new file mode 100644
index 00000000..ab69b3c7
--- /dev/null
+++ b/app/assets/images/nhsuk-icon-arrow-up-down.svg
@@ -0,0 +1,5 @@
+<svg class="nhsuk-icon nhsuk-icon--arrow-up-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true" fill="#212b32">
+
+  <path d="M1.5 9.3l5-5c.2-.2.4-.3.7-.3.3 0 .5.1.7.3l5 5a1 1 0 0 1-1.4 1.4l-3.3-3.3L8.2 19a1 1 0 0 1-2 0L6.2 7.4l-3.3 3.3a1 1 0 1 1-1.4-1.4Z"/>
+  <path d="M22.5 14.7l-5 5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-5-5a1 1 0 0 1 1.4-1.4l3.3 3.3L15.8 5a1 1 0 0 1 2 0L17.8 16.6l3.3-3.3a1 1 0 1 1 1.4 1.4Z"/>
+</svg>
diff --git a/app/assets/images/nhsuk-icon-arrow-up.svg b/app/assets/images/nhsuk-icon-arrow-up.svg
new file mode 100644
index 00000000..ed28b96a
--- /dev/null
+++ b/app/assets/images/nhsuk-icon-arrow-up.svg
@@ -0,0 +1,3 @@
+<svg class="nhsuk-icon nhsuk-icon--arrow-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true" fill="#212b32">
+  <path d="M6.3 9.3l5-5c.2-.2.4-.3.7-.3.3 0 .5.1.7.3l5 5a1 1 0 0 1-1.4 1.4l-3.3-3.3L13 19a1 1 0 0 1-2 0L11 7.4l-3.3 3.3a1 1 0 1 1-1.4-1.4Z"/>
+</svg>
diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss
index 5b6e65b4..edeba8dc 100755
--- a/app/assets/sass/main.scss
+++ b/app/assets/sass/main.scss
@@ -192,6 +192,10 @@ a {
   }
 }
 
+.app-search-criteria dd {
+  margin-inline-start: 0;
+}
+
 @include nhsuk-media-query($from: tablet) {
   .app-participants-sort-form {
     flex-shrink: 0;
diff --git a/app/data/participants.js b/app/data/participants.js
index 32d46d07..55721619 100644
--- a/app/data/participants.js
+++ b/app/data/participants.js
@@ -180,7 +180,8 @@ const createParticipant = (index, today) => {
 
   return {
     participantId: `p${pad(index + 1)}`,
-    full_name: `${surname.toUpperCase()}, ${firstName}${middleName}`,
+    full_name: `${firstName} ${middleName} ${surname}`,
+    display_name: `${surname.toUpperCase()}, ${firstName}`,
     surname_sort_value: surname.toUpperCase(),
     nhs_number: `999 ${pad((index * 37) % 1000, 3)} ${pad((index * 97 + 1) % 10000, 4)}`,
     date_of_birth: formatDate(dateOfBirth),
diff --git a/app/routes.js b/app/routes.js
index 2a98cbc1..c6b389bb 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -27,6 +27,7 @@ const participantDateFromToday = (today, days) => {
 }
 
 const formatParticipantDate = (date) => `${String(date.getDate()).padStart(2, '0')} ${participantMonths[date.getMonth()]} ${date.getFullYear()}`
+const formatParticipantIsoDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
 const formatParticipantFullDate = (date) => `${String(date.getDate()).padStart(2, '0')} ${participantFullMonths[date.getMonth()]} ${date.getFullYear()}`
 
 const formatParticipantRelativeDate = (date, today, daysThreshold = 7) => {
@@ -59,9 +60,11 @@ const refreshParticipantDates = (participant, today, dateFormatter = formatParti
     last_screened_date: lastScreenedDate ? dateFormatter(lastScreenedDate) : 'Never screened',
     next_test_due_date: dateFormatter(nextTestDueDate),
     next_test_due_date_value: nextTestDueDate.getTime(),
+    next_test_due_date_iso: formatParticipantIsoDate(nextTestDueDate),
     next_test_due_date_relative: formatParticipantRelativeDate(nextTestDueDate, today, 28),
     next_appointment_date: nextAppointmentDate ? dateFormatter(nextAppointmentDate) : 'Not known',
     next_appointment_date_value: nextAppointmentDate ? nextAppointmentDate.getTime() : null,
+    next_appointment_date_iso: nextAppointmentDate ? formatParticipantIsoDate(nextAppointmentDate) : '9999-12-31',
     next_appointment_date_relative: nextAppointmentDate ? formatParticipantRelativeDate(nextAppointmentDate, today) : 'Not known'
   }
 }
@@ -914,7 +917,65 @@ router.get(['/participants', '/batches/participants'], function (req, res) {
   })
 })
 
-router.get(['/participants/:participantId', '/batches/participants/:participantId'], function (req, res) {
+const participantSearchFields = ['firstName', 'lastName', 'nhsNumber', 'sxNumber', 'dobDay', 'dobMonth', 'dobYear', 'postcode', 'emailAddress']
+
+const participantSearchCriteria = query => Object.fromEntries(participantSearchFields
+  .map(field => [field, String(query[field] || '').trim()]))
+
+const normaliseSearchValue = value => String(value || '').toLowerCase().replace(/\s+/g, '')
+
+const matchesParticipantSearch = (participant, criteria) => {
+  const includes = (value, term) => !term || normaliseSearchValue(value).includes(normaliseSearchValue(term))
+  const [dobDay, dobMonthName, dobYear] = participant.date_of_birth.split(' ')
+  const dobMonth = participantFullMonths.indexOf(dobMonthName) + 1
+  const matchesDatePart = (actual, term) => !term || parseInt(term, 10) === parseInt(actual, 10)
+  const matchesYear = !criteria.dobYear || (criteria.dobYear.length === 2
+    ? dobYear.endsWith(criteria.dobYear)
+    : parseInt(criteria.dobYear, 10) === parseInt(dobYear, 10))
+
+  return includes(participant.full_name.split(', ')[1], criteria.firstName) &&
+    includes(participant.surname_sort_value, criteria.lastName) &&
+    includes(participant.nhs_number, criteria.nhsNumber) &&
+    includes(participant.sx_number, criteria.sxNumber) &&
+    includes(participant.address.postcode, criteria.postcode) &&
+    includes(participant.email, criteria.emailAddress) &&
+    matchesDatePart(dobDay, criteria.dobDay) &&
+    matchesDatePart(dobMonth, criteria.dobMonth) &&
+    matchesYear
+}
+
+router.get('/participants/search', function (req, res) {
+  res.render('participants/search', {
+    participantsPath: '/participants',
+    criteria: participantSearchCriteria(req.query)
+  })
+})
+
+router.get('/participants/search-results', function (req, res) {
+  const criteria = participantSearchCriteria(req.query)
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  const participants = ((req.session.data.participants && req.session.data.participants.default) || [])
+    .filter(participant => matchesParticipantSearch(participant, criteria))
+    .map(participant => refreshParticipantDates(participant, today))
+    .sort((a, b) => a.full_name.localeCompare(b.full_name))
+  const searchQuery = new URLSearchParams(Object.entries(criteria).filter(([, value]) => value)).toString()
+
+  res.render('participants/search-results', {
+    participants,
+    participantsPath: '/participants',
+    criteria,
+    hasCriteria: Boolean(searchQuery),
+    searchQuery
+  })
+})
+
+router.get(['/participants/:participantId', '/batches/participants/:participantId'], function (req, res, next) {
+  // Let static pages such as /participants/search fall through to auto-routing
+  if (!/^p\d+$/.test(req.params.participantId)) {
+    return next()
+  }
+
   const participantsPath = req.path.startsWith('/batches/') ? '/batches/participants' : '/participants'
   const participants = (req.session.data.participants && req.session.data.participants.default) || []
   const today = new Date()
diff --git a/app/views/batches/participants/detail.html b/app/views/batches/participants/detail.html
index 5af807a9..56403b7b 100644
--- a/app/views/batches/participants/detail.html
+++ b/app/views/batches/participants/detail.html
@@ -20,7 +20,7 @@
 <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-full">
         <span class="nhsuk-caption-l">Participant details</span>
-        <h1 class="nhsuk-heading-l">{{ participant.full_name }}</h1>
+        <h1 class="nhsuk-heading-l">{{ participant.display_name }}</h1>
     </div>
 </div>
 
diff --git a/app/views/batches/participants/index.html b/app/views/batches/participants/index.html
index 1ee942bd..94db53c9 100644
--- a/app/views/batches/participants/index.html
+++ b/app/views/batches/participants/index.html
@@ -99,45 +99,47 @@ <h2 class="nhsuk-card__heading nhsuk-heading-s">Search and filter</h2>
     </form>
   </div>
   <div class="nhsuk-grid-column-three-quarters">
-    <div class="app-participants-toolbar">
+    <div class="app-participants-toolbar nhsuk-u-margin-bottom-0">
       <p class="nhsuk-hint">Showing <strong>{{ firstRecord }}</strong> to <strong>{{ lastRecord }}</strong> of <strong>{{ totalParticipants }}</strong> participants</p>
-      <form method="get" action="/batches/participants" class="app-participants-sort-form">
-        <input type="hidden" name="search" value="{{ search }}">
-        {% for filter in selectedNextTestDue %}<input type="hidden" name="nextTestDue" value="{{ filter }}">{% endfor %}
-        {% for filter in selectedNextScreening %}<input type="hidden" name="nextScreening" value="{{ filter }}">{% endfor %}
-        {% for filter in selectedLastScreened %}<input type="hidden" name="lastScreened" value="{{ filter }}">{% endfor %}
-        {% for filter in selectedBreachRisk %}<input type="hidden" name="breachRisk" value="{{ filter }}">{% endfor %}
-        <label class="nhsuk-label" for="participant-sort">Sort by</label>
-        <select class="nhsuk-select" id="participant-sort" name="sort" onchange="this.form.submit()">
-          <option value="name-asc"{% if selectedSort == 'name-asc' %} selected{% endif %}>Name (A to Z)</option>
-          <option value="name-desc"{% if selectedSort == 'name-desc' %} selected{% endif %}>Name (Z to A)</option>
-          <option value="due-soonest"{% if selectedSort == 'due-soonest' %} selected{% endif %}>Next test due date (soonest)</option>
-          <option value="due-latest"{% if selectedSort == 'due-latest' %} selected{% endif %}>Next test due date (latest)</option>
-          <option value="screening-soonest"{% if selectedSort == 'screening-soonest' %} selected{% endif %}>Next screening (soonest)</option>
-          <option value="screening-latest"{% if selectedSort == 'screening-latest' %} selected{% endif %}>Next screening (latest)</option>
-          <option value="age-oldest"{% if selectedSort == 'age-oldest' %} selected{% endif %}>Age (oldest)</option>
-          <option value="age-youngest"{% if selectedSort == 'age-youngest' %} selected{% endif %}>Age (youngest)</option>
-        </select>
-      </form>
     </div>
-    <table class="nhsuk-table nhsuk-table-responsive">
+    <table class="nhsuk-table nhsuk-table-responsive nhsuk-table--striped nhsuk-table--sortable" data-module="nhsuk-table">
       <thead class="nhsuk-table__head">
         <tr class="nhsuk-table__row">
-          <th scope="col" class="nhsuk-table__header">Name</th>
-          <th scope="col" class="nhsuk-table__header">Postcode</th>
-          <th scope="col" class="nhsuk-table__header">NHS number</th>
-          <th scope="col" class="nhsuk-table__header">Next test due date</th>
-          <th scope="col" class="nhsuk-table__header">Next screening</th>
+          <th scope="col" class="nhsuk-table__header" scope="col" data-sort>
+            Name
+          </th>
+          <th scope="col" class="nhsuk-table__header" scope="col" data-sort>
+            Postcode
+          </th>
+          <th scope="col" class="nhsuk-table__header nhsuk-u-nowrap" scope="col" data-sort>
+            NHS number
+          </th>
+          <th scope="col" class="nhsuk-table__header nhsuk-u-nowrap" aria-sort="ascending" scope="col" data-sort>
+            Next test due date
+          </th>
+          <th scope="col" class="nhsuk-table__header nhsuk-u-nowrap" scope="col" data-sort>
+            Next screening
+          </th>
         </tr>
       </thead>
       <tbody class="nhsuk-table__body">
         {% for participant in participants %}
         <tr class="nhsuk-table__row">
-          <td class="nhsuk-table__cell"><a href="/batches/participants/{{ participant.participantId }}">{{ participant.full_name }}</a><br><span class="nhsuk-hint">{{ participant.age }} years old</span></td>
+          <td class="nhsuk-table__cell">
+            <p class="nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold"><a href="{{ participantsPath }}/{{ participant.participantId }}">{{ participant.display_name }}</a></p>
+            <p class="nhsuk-hint nhsuk-u-margin-bottom-0">{{ participant.age }} years old</p>
+          </td>
           <td class="nhsuk-table__cell">{{ participant.address.postcode }}</td>
           <td class="nhsuk-table__cell">{{ participant.nhs_number }}</td>
-          <td class="nhsuk-table__cell">{{ participant.next_test_due_date }}<br><span class="nhsuk-hint">{{ participant.next_test_due_date_relative }}</span></td>
-          <td class="nhsuk-table__cell">{% if participant.next_appointment_date != 'Not known' %}{{ participant.next_appointment_date }}<br>{% endif %}<span class="nhsuk-hint">{{ participant.next_appointment_date_relative }}</span></td>
+          <td class="nhsuk-table__cell" data-sort-value="{{ participant.next_test_due_date_iso }}">
+            {{ participant.next_test_due_date }}<br>
+            <span class="nhsuk-hint">{{ participant.next_test_due_date_relative }}</span>
+          </td>
+          <td class="nhsuk-table__cell" data-sort-value="{{ participant.next_appointment_date_iso }}">
+            {% if participant.next_appointment_date != 'Not known' %}{{ participant.next_appointment_date }}<br>{% endif
+            %}
+            <span class="nhsuk-hint">{{ participant.next_appointment_date_relative }}</span>
+          </td>
         </tr>
         {% endfor %}
       </tbody>
@@ -145,7 +147,12 @@ <h2 class="nhsuk-card__heading nhsuk-heading-s">Search and filter</h2>
     {% if totalPages > 1 %}
     <nav class="nhsuk-pagination nhsuk-pagination--numbered" role="navigation" aria-label="Pagination">
       {% if currentPage > 1 %}
-      <a href="/batches/participants?page={{ currentPage - 1 }}&sort={{ selectedSort }}{% if participantFilterQuery %}&{{ participantFilterQuery }}{% endif %}" class="nhsuk-pagination__previous" rel="prev">Previous</a>
+      <a href="/batches/participants?page={{ currentPage - 1 }}&sort={{ selectedSort }}{% if participantFilterQuery %}&{{ participantFilterQuery }}{% endif %}" class="nhsuk-pagination__previous" rel="prev">
+        <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+          <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z" />
+        </svg>
+        <span class="nhsuk-pagination__title">Previous<span class="nhsuk-u-visually-hidden"> page</span></span>
+      </a>
       {% endif %}
       <ul class="nhsuk-pagination__list">
         {% for pageNumber in paginationPages %}
@@ -156,7 +163,12 @@ <h2 class="nhsuk-card__heading nhsuk-heading-s">Search and filter</h2>
         {% endfor %}
       </ul>
       {% if currentPage < totalPages %}
-      <a href="/batches/participants?page={{ currentPage + 1 }}&sort={{ selectedSort }}{% if participantFilterQuery %}&{{ participantFilterQuery }}{% endif %}" class="nhsuk-pagination__next" rel="next" aria-label="Next page">Next</a>
+      <a href="/batches/participants?page={{ currentPage + 1 }}&sort={{ selectedSort }}{% if participantFilterQuery %}&{{ participantFilterQuery }}{% endif %}" class="nhsuk-pagination__next" rel="next" aria-label="Next page">
+        <span class="nhsuk-pagination__title">Next<span class="nhsuk-u-visually-hidden"> page</span></span>
+        <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+          <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z" />
+        </svg>
+      </a>
       {% endif %}
     </nav>
     {% endif %}
diff --git a/app/views/index.html b/app/views/index.html
index 1bea3ea5..362da9a4 100755
--- a/app/views/index.html
+++ b/app/views/index.html
@@ -54,6 +54,9 @@ <h2 class="nhsuk-heading-m">September 2026</h2>
         <li>
           <a href="/batches/participant-breakdown/standard">View participant details within a batch</a>
         </li>
+        <li>
+          <a href="/participants/search">Search for a participant</a>
+        </li>
       </ol>
 
       <h2 class="nhsuk-heading-m">August &ndash; September 2026</h2>
diff --git a/app/views/participants/detail.html b/app/views/participants/detail.html
index 0d053758..d81b7dcc 100644
--- a/app/views/participants/detail.html
+++ b/app/views/participants/detail.html
@@ -4,7 +4,7 @@
 
 {% from "_includes/primary-navigation.html" import primaryNavigation %}
 {% block header %}
-{{ primaryNavigation("Batches" if participantsPath == "/batches/participants" else "Participants", serviceName) }}
+{{ primaryNavigation("Batches" if participantsPath == "/batches/participants" else "Participants", serviceName, bsoName) }}
 {% endblock %}
 
 {% block content %}
@@ -24,7 +24,7 @@
     <div class="nhsuk-grid-column-full">
 
         <span class="nhsuk-caption-l">Participant details</span>
-        <h1 class="nhsuk-heading-l">{{ participant.full_name }}</h1>
+        <h1 class="nhsuk-heading-l">{{ participant.display_name }}</h1>
     </div>
 
 </div>
diff --git a/app/views/participants/index.html b/app/views/participants/index.html
index d840ef11..3535f7d9 100644
--- a/app/views/participants/index.html
+++ b/app/views/participants/index.html
@@ -4,7 +4,7 @@
 
 {% from "_includes/primary-navigation.html" import primaryNavigation %}
 {% block header %}
-{{ primaryNavigation("Batches" if participantsPath == "/batches/participants" else "Participants", serviceName) }}
+{{ primaryNavigation("Participants", serviceName, bsoName) }}
 {% endblock %}
 
 {% block beforeContent %}{% endblock %}
@@ -195,50 +195,30 @@ <h2 class="nhsuk-card__heading nhsuk-heading-s">
   </div>
   <div class="nhsuk-grid-column-three-quarters">
 
-    <div class="app-participants-toolbar">
+    <div class="app-participants-toolbar nhsuk-u-margin-bottom-0">
       <p class="nhsuk-hint">Showing <strong>{{ firstRecord }}</strong> to <strong>{{ lastRecord }}</strong> of
         <strong>{{ totalParticipants }}</strong> participants
       </p>
-      <form method="get" action="{{ participantsPath }}" class="app-participants-sort-form">
-        <input type="hidden" name="search" value="{{ search }}">
-        {% for filter in selectedNextTestDue %}<input type="hidden" name="nextTestDue" value="{{ filter }}">{% endfor %}
-        {% for filter in selectedNextScreening %}<input type="hidden" name="nextScreening" value="{{ filter }}">{% endfor %}
-        {% for filter in selectedLastScreened %}<input type="hidden" name="lastScreened" value="{{ filter }}">{% endfor %}
-        {% for filter in selectedBreachRisk %}<input type="hidden" name="breachRisk" value="{{ filter }}">{% endfor %}
-        <label class="nhsuk-label" for="participant-sort">Sort by</label>
-        <select class="nhsuk-select" id="participant-sort" name="sort" onchange="this.form.submit()">
-          <option value="name-asc" {% if selectedSort=='name-asc' %} selected{% endif %}>Name (A to Z)</option>
-          <option value="name-desc" {% if selectedSort=='name-desc' %} selected{% endif %}>Name (Z to A)</option>
-          <option value="due-soonest" {% if selectedSort=='due-soonest' %} selected{% endif %}>Next test due date
-            (soonest)</option>
-          <option value="due-latest" {% if selectedSort=='due-latest' %} selected{% endif %}>Next test due date (latest)
-          </option>
-          <option value="screening-soonest" {% if selectedSort=='screening-soonest' %} selected{% endif %}>Next
-            screening (soonest)</option>
-          <option value="screening-latest" {% if selectedSort=='screening-latest' %} selected{% endif %}>Next screening
-            (latest)</option>
-          <option value="age-oldest" {% if selectedSort=='age-oldest' %} selected{% endif %}>Age (oldest)</option>
-          <option value="age-youngest" {% if selectedSort=='age-youngest' %} selected{% endif %}>Age (youngest)</option>
-        </select>
-      </form>
     </div>
 
-    <table class="nhsuk-table nhsuk-table-responsive">
+    
+
+    <table class="nhsuk-table nhsuk-table-responsive nhsuk-table--striped nhsuk-table--sortable" data-module="nhsuk-table">
       <thead class="nhsuk-table__head">
         <tr class="nhsuk-table__row">
-          <th scope="col" class="nhsuk-table__header">
+          <th scope="col" class="nhsuk-table__header" scope="col" data-sort>
             Name
           </th>
-          <th scope="col" class="nhsuk-table__header">
+          <th scope="col" class="nhsuk-table__header" scope="col" data-sort>
             Postcode
           </th>
-          <th scope="col" class="nhsuk-table__header">
+          <th scope="col" class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-nowrap" scope="col" data-sort>
             NHS number
           </th>
-          <th scope="col" class="nhsuk-table__header">
+          <th scope="col" class="nhsuk-table__header nhsuk-u-nowrap" aria-sort="ascending" scope="col" data-sort>
             Next test due date
           </th>
-          <th scope="col" class="nhsuk-table__header">
+          <th scope="col" class="nhsuk-table__header nhsuk-u-nowrap" scope="col" data-sort>
             Next screening
           </th>
         </tr>
@@ -247,16 +227,16 @@ <h2 class="nhsuk-card__heading nhsuk-heading-s">
         {% for participant in participants %}
         <tr class="nhsuk-table__row">
           <td class="nhsuk-table__cell">
-            <a href="{{ participantsPath }}/{{ participant.participantId }}">{{ participant.full_name }}</a><br>
-            <span class="nhsuk-hint">{{ participant.age }} years old</span>
+            <p class="nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold"><a href="{{ participantsPath }}/{{ participant.participantId }}">{{ participant.display_name }}</a></p>
+            <p class="nhsuk-hint nhsuk-u-margin-bottom-0">{{ participant.age }} years old</p>
           </td>
           <td class="nhsuk-table__cell">{{ participant.address.postcode }}</td>
           <td class="nhsuk-table__cell">{{ participant.nhs_number }}</td>
-          <td class="nhsuk-table__cell">
+          <td class="nhsuk-table__cell" data-sort-value="{{ participant.next_test_due_date_iso }}">
             {{ participant.next_test_due_date }}<br>
             <span class="nhsuk-hint">{{ participant.next_test_due_date_relative }}</span>
           </td>
-          <td class="nhsuk-table__cell">
+          <td class="nhsuk-table__cell" data-sort-value="{{ participant.next_appointment_date_iso }}">
             {% if participant.next_appointment_date != 'Not known' %}{{ participant.next_appointment_date }}<br>{% endif
             %}
             <span class="nhsuk-hint">{{ participant.next_appointment_date_relative }}</span>
diff --git a/app/views/participants/search-results.html b/app/views/participants/search-results.html
new file mode 100644
index 00000000..b2294c79
--- /dev/null
+++ b/app/views/participants/search-results.html
@@ -0,0 +1,108 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Search results" %}
+
+{% from "_includes/primary-navigation.html" import primaryNavigation %}
+{% block header %}
+{{ primaryNavigation("Participants", serviceName, bsoName) }}
+{% endblock %}
+
+{% block beforeContent %}{% endblock %}
+
+{% block content %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-full">
+    <div class="app-card-editable">
+      <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
+    </div>
+  </div>
+</div>
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-one-quarter">
+    <div class="nhsuk-card nhsuk-card--feature app-card--feature-grey app-filter-panel__card">
+      <div class="nhsuk-card__content">
+        <h2 class="nhsuk-card__heading nhsuk-heading-s">
+          You searched for
+        </h2>
+        {% if hasCriteria %}
+        <dl class="nhsuk-body-s app-search-criteria">
+          {% if criteria.firstName %}<dt><strong>First name</strong></dt><dd>{{ criteria.firstName }}</dd>{% endif %}
+          {% if criteria.lastName %}<dt><strong>Last name</strong></dt><dd>{{ criteria.lastName }}</dd>{% endif %}
+          {% if criteria.nhsNumber %}<dt><strong>NHS number</strong></dt><dd>{{ criteria.nhsNumber }}</dd>{% endif %}
+          {% if criteria.sxNumber %}<dt><strong>SX number</strong></dt><dd>{{ criteria.sxNumber }}</dd>{% endif %}
+          {% if criteria.dobDay or criteria.dobMonth or criteria.dobYear %}
+          <dt><strong>Date of birth</strong></dt>
+          <dd>{{ criteria.dobDay or "–" }} / {{ criteria.dobMonth or "–" }} / {{ criteria.dobYear or "–" }}</dd>
+          {% endif %}
+          {% if criteria.postcode %}<dt><strong>Postcode</strong></dt><dd>{{ criteria.postcode }}</dd>{% endif %}
+          {% if criteria.emailAddress %}<dt><strong>Email address</strong></dt><dd>{{ criteria.emailAddress }}</dd>{% endif %}
+        </dl>
+        {% else %}
+        <p class="nhsuk-body-s">No search terms entered</p>
+        {% endif %}
+        <p class="nhsuk-body-s"><a href="/participants/search{% if searchQuery %}?{{ searchQuery }}{% endif %}">Change search</a></p>
+        <p class="nhsuk-body-s"><a href="/participants/search">New search</a></p>
+      </div>
+    </div>
+  </div>
+  <div class="nhsuk-grid-column-three-quarters">
+
+    <div class="app-participants-toolbar nhsuk-u-margin-bottom-0">
+      <p class="nhsuk-hint">
+        <strong>{{ participants | length }}</strong> participant{% if participants | length != 1 %}s{% endif %} found
+      </p>
+    </div>
+
+    {% if participants | length %}
+    <table class="nhsuk-table nhsuk-table-responsive nhsuk-table--striped nhsuk-table--sortable" data-module="nhsuk-table">
+      <thead class="nhsuk-table__head">
+        <tr class="nhsuk-table__row">
+          <th scope="col" class="nhsuk-table__header" scope="col" aria-sort="ascending" data-sort>
+            Name
+          </th>
+          <th scope="col" class="nhsuk-table__header" scope="col" data-sort>
+            Postcode
+          </th>
+          <th scope="col" class="nhsuk-table__header nhsuk-u-nowrap" scope="col" data-sort>
+            NHS number
+          </th>
+          <th scope="col" class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-nowrap" scope="col" data-sort>
+            Next test due date
+          </th>
+          <th scope="col" class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-nowrap" scope="col" data-sort>
+            Next screening
+          </th>
+        </tr>
+      </thead>
+      <tbody class="nhsuk-table__body">
+        {% for participant in participants %}
+        <tr class="nhsuk-table__row">
+          <td class="nhsuk-table__cell">
+            <p class="nhsuk-u-margin-bottom-1 nhsuk-u-font-weight-bold"><a href="{{ participantsPath }}/{{ participant.participantId }}">{{ participant.display_name }}</a></p>
+            <p class="nhsuk-hint nhsuk-u-margin-bottom-0">{{ participant.age }} years old</p>
+          </td>
+          <td class="nhsuk-table__cell">{{ participant.address.postcode }}</td>
+          <td class="nhsuk-table__cell">{{ participant.nhs_number }}</td>
+          <td class="nhsuk-table__cell nhsuk-table__cell--numeric" data-sort-value="{{ participant.next_test_due_date_iso }}">
+            {{ participant.next_test_due_date }}<br>
+            <span class="nhsuk-hint">{{ participant.next_test_due_date_relative }}</span>
+          </td>
+          <td class="nhsuk-table__cell nhsuk-table__cell--numeric" data-sort-value="{{ participant.next_appointment_date_iso }}">
+            {% if participant.next_appointment_date != 'Not known' %}{{ participant.next_appointment_date }}<br>{% endif
+            %}
+            <span class="nhsuk-hint">{{ participant.next_appointment_date_relative }}</span>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {% else %}
+    <p>No participants match your search. Check the details you entered or <a href="/participants/search{% if searchQuery %}?{{ searchQuery }}{% endif %}">change your search</a>.</p>
+    {% endif %}
+
+  </div>
+</div>
+
+{% endblock %}
diff --git a/app/views/participants/search.html b/app/views/participants/search.html
new file mode 100644
index 00000000..da0cc415
--- /dev/null
+++ b/app/views/participants/search.html
@@ -0,0 +1,121 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Participants" %}
+
+{% from "_includes/primary-navigation.html" import primaryNavigation %}
+{% block header %}
+{{ primaryNavigation("Participants", serviceName, bsoName) }}
+{% endblock %}
+
+{% block beforeContent %}{% endblock %}
+
+{% block content %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-full">
+    <div class="app-card-editable">
+      <h1 class="nhsuk-heading-l">Search for a participant</h1>
+    </div>
+  </div>
+</div>
+
+<div class="nhsuk-grid-row">
+
+  <div class="nhsuk-grid-column-three-quarters">
+
+    <form method="get" action="/participants/search-results" novalidate autocomplete="off">
+
+    <div class="nhsuk-form-group">
+      <label class="nhsuk-label nhsuk-label--s" for="first-name">
+        First name
+      </label>
+      <input class="nhsuk-input nhsuk-input--width-20" id="first-name" name="firstName" type="text" autocomplete="off" value="{{ criteria.firstName }}">
+    </div>
+
+    <div class="nhsuk-form-group">
+      <label class="nhsuk-label nhsuk-label--s" for="last-name">
+        Last name
+      </label>
+      <input class="nhsuk-input nhsuk-input--width-20" id="last-name" name="lastName" type="text" autocomplete="off" value="{{ criteria.lastName }}">
+    </div>
+
+    <div class="nhsuk-form-group">
+      <label class="nhsuk-label nhsuk-label--s" for="nhs-number">
+        NHS number
+      </label>
+      <input class="nhsuk-input nhsuk-input--width-10" id="nhs-number" name="nhsNumber" type="text" autocomplete="off" value="{{ criteria.nhsNumber }}">
+    </div>
+
+    <div class="nhsuk-form-group">
+      <label class="nhsuk-label nhsuk-label--s" for="sx-number">
+        SX number
+      </label>
+      <input class="nhsuk-input nhsuk-input--width-10" id="sx-number" name="sxNumber" type="text" autocomplete="off" value="{{ criteria.sxNumber }}">
+    </div>
+
+    <div class="nhsuk-form-group">
+      <fieldset class="nhsuk-fieldset" role="group" aria-describedby="dob-hint">
+        <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
+          <label class="nhsuk-fieldset__heading nhsuk-label--s">
+            Date of birth
+          </label>
+        </legend>
+        <div class="nhsuk-hint" id="dob-hint">
+          For example, 18 9 1960
+        </div>
+        <div class="nhsuk-date-input" id="dob-date">
+          <div class="nhsuk-date-input__item">
+            <div class="nhsuk-form-group">
+              <label class="nhsuk-label nhsuk-date-input__label" for="dob-date-day">
+                Day
+              </label>
+              <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="dob-date-day"
+                name="dobDay" type="text" inputmode="numeric" autocomplete="off" value="{{ criteria.dobDay }}">
+            </div>
+          </div>
+          <div class="nhsuk-date-input__item">
+            <div class="nhsuk-form-group">
+              <label class="nhsuk-label nhsuk-date-input__label" for="dob-date-month">
+                Month
+              </label>
+              <input class="nhsuk-input nhsuk-input--width-2 nhsuk-date-input__input" id="dob-date-month"
+                name="dobMonth" type="text" inputmode="numeric" autocomplete="off" value="{{ criteria.dobMonth }}">
+            </div>
+          </div>
+          <div class="nhsuk-date-input__item">
+            <div class="nhsuk-form-group">
+              <label class="nhsuk-label nhsuk-date-input__label" for="dob-date-year">
+                Year
+              </label>
+              <input class="nhsuk-input nhsuk-input--width-4 nhsuk-date-input__input" id="dob-date-year"
+                name="dobYear" type="text" inputmode="numeric" autocomplete="off" value="{{ criteria.dobYear }}">
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+
+    <div class="nhsuk-form-group">
+      <label class="nhsuk-label nhsuk-label--s" for="postcode">
+        Postcode
+      </label>
+      <input class="nhsuk-input nhsuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="off" value="{{ criteria.postcode }}">
+    </div>
+
+    <div class="nhsuk-form-group">
+      <label class="nhsuk-label nhsuk-label--s" for="email-address">
+        Email address
+      </label>
+      <input class="nhsuk-input nhsuk-input--width-20" id="email-address" name="emailAddress" type="text" autocomplete="off" value="{{ criteria.emailAddress }}">
+    </div>
+
+    <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
+      Search
+    </button>
+
+    </form>
+
+  </div>
+</div>
+
+{% endblock %}
\ No newline at end of file