diff --git a/runner/src/server/plugins/engine/components/types.ts b/runner/src/server/plugins/engine/components/types.ts
index 913f8c7d..5ee2b830 100644
--- a/runner/src/server/plugins/engine/components/types.ts
+++ b/runner/src/server/plugins/engine/components/types.ts
@@ -22,4 +22,7 @@ export type ClientSideFileUploadFieldViewModel = {
 
 export type AdapterDataType = DataType | "multiInput" | "freeText";
 
-
+export type ChangeRequest = {
+  title: string;
+  messages: string[];
+}
diff --git a/runner/src/server/plugins/engine/page-controllers/PageControllerBase.ts b/runner/src/server/plugins/engine/page-controllers/PageControllerBase.ts
index c0edc466..59307e5f 100644
--- a/runner/src/server/plugins/engine/page-controllers/PageControllerBase.ts
+++ b/runner/src/server/plugins/engine/page-controllers/PageControllerBase.ts
@@ -15,6 +15,7 @@ import {
     HapiResponseToolkit,
 } from "../../../types";
 import {
+    ChangeRequest,
     FormData,
     FormPayload,
     FormSubmissionErrors,
@@ -153,6 +154,7 @@ export class PageControllerBase {
         backLinkText?: string;
         continueButtonText?: string;
         phaseTag?: string | undefined;
+        changeRequests?: ChangeRequest[] | undefined;
     } {
         let showTitle = true;
         let pageTitle = this.title;
@@ -650,6 +652,24 @@ export class PageControllerBase {
                 return evaluatedComponent;
             });
 
+            viewModel.changeRequests = [];
+            if (state["metadata"] && state["metadata"]["change_requests"]) {
+                for (let componentName in state["metadata"]["change_requests"]) {
+                    const messages = state["metadata"]["change_requests"][componentName];
+
+                    // Find the component with the matching name
+                    const component = this.pageDef.components.find(component => component.name === componentName);
+
+                    if (component) {
+                        // Add an object to viewModel.changeRequests
+                        viewModel.changeRequests.push({
+                            title: component.title,
+                            messages: messages
+                        });
+                    }
+                }
+            }
+
             /**
              * used for when a user clicks the "back" link. Progress is stored in the state. This is a safer alternative to running javascript that pops the history `onclick`.
              */
diff --git a/runner/src/server/views/layout.html b/runner/src/server/views/layout.html
index 3388fc7c..fda77de7 100644
--- a/runner/src/server/views/layout.html
+++ b/runner/src/server/views/layout.html
@@ -191,6 +191,32 @@
             text: backLinkText
         }) }}
     {% endif %}
+
+    {% if changeRequests.length > 0 %}
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <div class="govuk-!-margin-top-4">
+                <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+                    <div class="govuk-notification-banner__header">
+                        <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
+                            Change request
+                        </h2>
+                    </div>
+                    <div class="govuk-notification-banner__content">
+                        {% for question in changeRequests %}
+                            <h3 class="govuk-heading-s govuk-!-margin-bottom-2">
+                                {{ question.title }}
+                            </h3>
+                            {% for message in question.messages %}
+                                <p class="govuk-body govuk-!-margin-bottom-1">{{ message }}</p>
+                            {% endfor %}
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
 {% endblock %}