diff --git a/app/data/session-data-defaults.js b/app/data/session-data-defaults.js
index 5056067..3e1d9fb 100644
--- a/app/data/session-data-defaults.js
+++ b/app/data/session-data-defaults.js
@@ -1,4 +1,15 @@
 // Use this file to set any default data
 
 module.exports = {
+  messages: [
+    {
+      id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+      sentTime: "2025-10-21",
+      sender: "Portland Street Great Westood Surgery",
+      content: "Reminder of your telephone appointment with your GP on Friday 23 October at 1:30pm.",
+      read: false,
+      flagged: false,
+      removed: false
+    }
+  ]
 }
diff --git a/app/routes.js b/app/routes.js
index 4da409a..04b0203 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -3,6 +3,19 @@ const express = require('express')
 
 const router = express.Router()
 
+
+// Show an individual message and mark it as read
+router.get('/messages/:id', (req, res) => {
+  const messageId = req.params.id
+  const data = req.session.data
+  const messages = data.messages || []
+  const message = messages.find(message => message.id === messageId)
+
+  message.read = true
+
+  res.render('message', { message })
+})
+
 // Add your routes here - above the module.exports line
 
 module.exports = router
diff --git a/app/views/layout.html b/app/views/layout.html
index f990eef..8f5dae7 100755
--- a/app/views/layout.html
+++ b/app/views/layout.html
@@ -40,6 +40,11 @@
           text: "Home",
           current: (section == "Home")
         },
+        {
+          href: "/messages",
+          text: "Messages",
+          current: (section == "Messages")
+        },
         {
           href: "/profile",
           text: "Profile",
diff --git a/app/views/message.html b/app/views/message.html
new file mode 100644
index 0000000..416ec89
--- /dev/null
+++ b/app/views/message.html
@@ -0,0 +1,22 @@
+{% extends "layout.html" %}
+
+{% set section = "Messages" %}
+{% set pageName = message.sender %}
+
+{% block beforeContent %}   
+  {{ backLink({
+    href: "/messages",
+    text: "Back"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-3">{{ pageName }}</h1>
+  <p class="nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-5">Sent {{ message.sentTime | formatDate }} at 7:12pm</p>
+
+  <p>{{ message.content }}</p>
+
+  <hr>
+  <p><a href="#">Flag message</a></p>
+  <p><a href="#">Remove message</a></p>
+{% endblock %}
diff --git a/app/views/messages.html b/app/views/messages.html
new file mode 100644
index 0000000..df90a02
--- /dev/null
+++ b/app/views/messages.html
@@ -0,0 +1,49 @@
+{% extends "layout.html" %}
+
+{% set section = "Messages" %}
+{% set pageName = "Your messages" %}
+
+{% block content %}
+
+  <h1 class="nhsuk-heading-xl">
+    {{ pageName }}
+  </h1>
+
+  {% set cards = [] %}
+
+  {# This loops through all the messages in the session data - to add or edit a message, edit session-data-defaults.js #}
+
+  {% for message in data.messages  | sort(true, false, "sentTime") %}
+    {% set dateHtml %}
+        <span class="nhsuk-heading-xs nhsuk-u-margin-bottom-0 nhsuk-u-secondary-text-colour nhsuk-u-body">{{ message.sentTime | formatDate }}</span>
+    {% endset %}
+
+    {% set titleHtml %}
+      {% if message.read == false %}
+      {{ nhsappBadgeSmall({
+        label: 'Unread message',
+        classes: 'nhsapp-badge-small--absolute'
+      }) }}
+      {%- endif -%}
+      {{ message.sender }}
+    {% endset %}
+
+    {% set cards = (cards.push({
+      aboveContent: {
+        html: dateHtml
+      },
+      titleHtml: titleHtml,
+      description: message.content,
+      descriptionClasses: "nhsapp-u-truncate-two-lines",
+      href: "/messages/" + message.id,
+      classes: "nhsuk-u-padding-left-6",
+      containerClasses: "nhsuk-u-padding-left-0"
+    }), cards) %}
+  {% endfor %}
+
+  {{ nhsappCardGroup({
+    stacked: true,
+    cards: cards
+  }) }}  
+
+{% endblock %}