diff --git a/.gitignore b/.gitignore
index b968ee0fa..bda797693 100644
--- a/.gitignore
+++ b/.gitignore
@@ -93,4 +93,7 @@ lambdas/backend-api/src/email/email-template.json
 # vscode
 .vscode/settings.local.json
 
+# github
+.github/copilot-instructions.md
+
 test-runs
diff --git a/frontend/src/__tests__/app/choose-templates/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/choose-templates/__snapshots__/page.test.tsx.snap
index 0a3996d36..d240745d1 100644
--- a/frontend/src/__tests__/app/choose-templates/__snapshots__/page.test.tsx.snap
+++ b/frontend/src/__tests__/app/choose-templates/__snapshots__/page.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
                   class="nhsuk-u-margin-bottom-2"
                   data-testid="template-name-NHSAPP"
                 >
-                  name
+                  app template name
                 </p>
                 <ul
                   class="channel-template-actions"
@@ -275,7 +275,7 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
                   class="nhsuk-u-margin-bottom-2"
                   data-testid="template-name-SMS"
                 >
-                  name
+                  sms template name
                 </p>
                 <ul
                   class="channel-template-actions"
@@ -586,7 +586,7 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
                   class="nhsuk-u-margin-bottom-2"
                   data-testid="template-name-LETTER"
                 >
-                  name
+                  letter template name
                 </p>
                 <ul
                   class="channel-template-actions"
diff --git a/frontend/src/__tests__/app/message-plans/choose-email-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/message-plans/choose-email-template/__snapshots__/page.test.tsx.snap
new file mode 100644
index 000000000..7a03f573f
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-email-template/__snapshots__/page.test.tsx.snap
@@ -0,0 +1,255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChooseEmailTemplate page renders Email template selection 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose an email template
+        </h1>
+        <form
+          action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                email template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="email-template-id-radio"
+                              id="channelTemplate-email-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="email-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-email-template-id"
+                              id="channelTemplate-email-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          email template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          Email
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="email-template-id-preview-link"
+                              href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/email-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
diff --git a/frontend/src/__tests__/app/message-plans/choose-email-template/page.test.tsx b/frontend/src/__tests__/app/message-plans/choose-email-template/page.test.tsx
new file mode 100644
index 000000000..41d2ed2ac
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-email-template/page.test.tsx
@@ -0,0 +1,80 @@
+import ChooseEmailTemplate, {
+  generateMetadata,
+} from '@app/message-plans/choose-email-template/[routingConfigId]/page';
+import { EMAIL_TEMPLATE, ROUTING_CONFIG } from '@testhelpers/helpers';
+import { render } from '@testing-library/react';
+import { getTemplates } from '@utils/form-actions';
+import { getRoutingConfig } from '@utils/message-plans';
+import { redirect } from 'next/navigation';
+
+jest.mock('@utils/message-plans');
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getRoutingConfigMock = jest.mocked(getRoutingConfig);
+const getTemplatesMock = jest.mocked(getTemplates);
+const redirectMock = jest.mocked(redirect);
+
+describe('ChooseEmailTemplate page', () => {
+  it('should redirect to invalid page with invalid routing config id', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce(undefined);
+
+    await ChooseEmailTemplate({
+      params: Promise.resolve({
+        routingConfigId: 'invalid-id',
+      }),
+    });
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith('invalid-id');
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/invalid',
+      'replace'
+    );
+  });
+
+  it('should redirect to invalid if plan has no email cascade entry', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce({
+      ...ROUTING_CONFIG,
+      cascade: ROUTING_CONFIG.cascade.filter(
+        (item) => item.channel !== 'EMAIL'
+      ),
+    });
+
+    await ChooseEmailTemplate({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+      }),
+    });
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/invalid',
+      'replace'
+    );
+  });
+
+  it('renders Email template selection', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce(ROUTING_CONFIG);
+    getTemplatesMock.mockResolvedValueOnce([EMAIL_TEMPLATE]);
+
+    const page = await ChooseEmailTemplate({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+      }),
+    });
+
+    const container = render(page);
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);
+    expect(getTemplatesMock).toHaveBeenCalledWith({
+      templateType: 'EMAIL',
+    });
+
+    expect(await generateMetadata()).toEqual({
+      title: 'Choose an email template - NHS Notify',
+    });
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/ViewNHSAppTemplate.test.tsx.snap b/frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/__snapshots__/page.test.tsx.snap
similarity index 77%
rename from frontend/src/__tests__/components/molecules/__snapshots__/ViewNHSAppTemplate.test.tsx.snap
rename to frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/__snapshots__/page.test.tsx.snap
index 8f65fe4b6..cbf9da798 100644
--- a/frontend/src/__tests__/components/molecules/__snapshots__/ViewNHSAppTemplate.test.tsx.snap
+++ b/frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/__snapshots__/page.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
+exports[`PreviewEmailTemplateFromMessagePlan page renders Email template preview 1`] = `
 <DocumentFragment>
   <a
     class="nhsuk-back-link"
-    href="/message-templates"
+    href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34"
   >
-    Back to all templates
+    Go back
   </a>
   <main
     class="nhsuk-main-wrapper"
@@ -31,7 +31,7 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
             class="preview__heading"
             data-testid="preview-message__heading"
           >
-            Example template
+            email template name
           </h1>
         </div>
         <div
@@ -51,7 +51,7 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
               <dd
                 class="nhsuk-summary-list__value"
               >
-                template-id
+                email-template-id
               </dd>
             </div>
             <div
@@ -65,32 +65,38 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
               <dd
                 class="nhsuk-summary-list__value"
               >
-                NHS App message
+                Email
               </dd>
             </div>
+          </dl>
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
             <div
               class="nhsuk-summary-list__row"
             >
               <dt
                 class="nhsuk-summary-list__key"
               >
-                Status
+                <div
+                  data-testid="preview__heading-0"
+                  id="preview-heading-subject"
+                >
+                  Subject
+                </div>
               </dt>
               <dd
                 class="nhsuk-summary-list__value"
               >
-                <strong
-                  class="nhsuk-tag nhsuk-tag--grey"
-                  data-test-id="status-tag-submitted"
+                <div
+                  class="preview__content"
+                  data-testid="preview__content-0"
+                  id="preview-content-subject"
                 >
-                  Submitted
-                </strong>
+                  subject
+                </div>
               </dd>
             </div>
-          </dl>
-          <dl
-            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
-          >
             <div
               class="nhsuk-summary-list__row"
             >
@@ -98,7 +104,7 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
                 class="nhsuk-summary-list__key"
               >
                 <div
-                  data-testid="preview__heading-0"
+                  data-testid="preview__heading-1"
                   id="preview-heading-message"
                 >
                   Message
@@ -109,11 +115,11 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
               >
                 <div
                   class="preview__content"
-                  data-testid="preview__content-0"
+                  data-testid="preview__content-1"
                   id="preview-content-message"
                 >
                   <p>
-                    Example message
+                    message
                   </p>
                   
 
@@ -122,17 +128,11 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
             </div>
           </dl>
         </div>
-        <p>
-          This template cannot be edited because it has been submitted.
-        </p>
-        <p>
-          If you want to change a submitted or live template, you must create a new template to replace it.
-        </p>
         <p>
           <a
-            href="/message-templates"
+            href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34"
           >
-            Back to all templates
+            Go back
           </a>
         </p>
       </div>
diff --git a/frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/page.test.tsx b/frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/page.test.tsx
new file mode 100644
index 000000000..ad4007065
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/page.test.tsx
@@ -0,0 +1,53 @@
+import PreviewEmailTemplateFromMessagePlan, {
+  generateMetadata,
+} from '@app/message-plans/choose-email-template/[routingConfigId]/preview-template/[templateId]/page';
+import { EMAIL_TEMPLATE, ROUTING_CONFIG } from '@testhelpers/helpers';
+import { render } from '@testing-library/react';
+import { getTemplate } from '@utils/form-actions';
+import { redirect } from 'next/navigation';
+
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getTemplateMock = jest.mocked(getTemplate);
+const redirectMock = jest.mocked(redirect);
+
+describe('PreviewEmailTemplateFromMessagePlan page', () => {
+  it('should redirect to invalid page with invalid template id', async () => {
+    getTemplateMock.mockResolvedValueOnce(undefined);
+
+    await PreviewEmailTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: 'routing-config-id',
+        templateId: 'invalid-template-id',
+      }),
+    });
+
+    expect(getTemplateMock).toHaveBeenCalledWith('invalid-template-id');
+
+    expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+  });
+
+  it('renders Email template preview', async () => {
+    getTemplateMock.mockResolvedValueOnce({
+      ...EMAIL_TEMPLATE,
+      templateStatus: 'SUBMITTED',
+    });
+
+    const page = await PreviewEmailTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+        templateId: EMAIL_TEMPLATE.id,
+      }),
+    });
+
+    const container = render(page);
+
+    expect(getTemplateMock).toHaveBeenCalledWith(EMAIL_TEMPLATE.id);
+
+    expect(await generateMetadata()).toEqual({
+      title: 'Preview email template - NHS Notify',
+    });
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/__snapshots__/page.test.tsx.snap
new file mode 100644
index 000000000..812550c1b
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/__snapshots__/page.test.tsx.snap
@@ -0,0 +1,255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChooseNHSAppTemplate page renders NHS App template selection 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose an NHS App template
+        </h1>
+        <form
+          action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                app template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="app-template-id-radio"
+                              id="channelTemplate-app-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="app-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-app-template-id"
+                              id="channelTemplate-app-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          app template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          NHS App message
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="app-template-id-preview-link"
+                              href="/message-plans/choose-nhs-app-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/app-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
diff --git a/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/page.test.tsx b/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/page.test.tsx
new file mode 100644
index 000000000..5a7407d29
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/page.test.tsx
@@ -0,0 +1,83 @@
+import ChooseNhsAppTemplate, {
+  generateMetadata,
+} from '@app/message-plans/choose-nhs-app-template/[routingConfigId]/page';
+import { NHS_APP_TEMPLATE, ROUTING_CONFIG } from '@testhelpers/helpers';
+import { render } from '@testing-library/react';
+import { getTemplates } from '@utils/form-actions';
+import { getRoutingConfig } from '@utils/message-plans';
+import { redirect, usePathname } from 'next/navigation';
+
+jest.mock('@utils/message-plans');
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getRoutingConfigMock = jest.mocked(getRoutingConfig);
+const getTemplatesMock = jest.mocked(getTemplates);
+const redirectMock = jest.mocked(redirect);
+jest
+  .mocked(usePathname)
+  .mockReturnValue('message-plans/choose-nhs-app-template/testid');
+
+describe('ChooseNHSAppTemplate page', () => {
+  it('should redirect to invalid page with invalid routing config id', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce(undefined);
+
+    await ChooseNhsAppTemplate({
+      params: Promise.resolve({
+        routingConfigId: 'invalid-id',
+      }),
+    });
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith('invalid-id');
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/invalid',
+      'replace'
+    );
+  });
+
+  it('should redirect to invalid if plan has no nhs app cascade entry', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce({
+      ...ROUTING_CONFIG,
+      cascade: ROUTING_CONFIG.cascade.filter(
+        (item) => item.channel !== 'NHSAPP'
+      ),
+    });
+
+    await ChooseNhsAppTemplate({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+      }),
+    });
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/invalid',
+      'replace'
+    );
+  });
+
+  it('renders NHS App template selection', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce(ROUTING_CONFIG);
+    getTemplatesMock.mockResolvedValueOnce([NHS_APP_TEMPLATE]);
+
+    const page = await ChooseNhsAppTemplate({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+      }),
+    });
+
+    const container = render(page);
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);
+    expect(getTemplatesMock).toHaveBeenCalledWith({
+      templateType: 'NHS_APP',
+    });
+
+    expect(await generateMetadata()).toEqual({
+      title: 'Choose an NHS App template - NHS Notify',
+    });
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/ViewEmailTemplate.test.tsx.snap b/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/preview-template/__snapshots__/page.test.tsx.snap
similarity index 57%
rename from frontend/src/__tests__/components/molecules/__snapshots__/ViewEmailTemplate.test.tsx.snap
rename to frontend/src/__tests__/app/message-plans/choose-nhs-app-template/preview-template/__snapshots__/page.test.tsx.snap
index 6b4a05b26..64bd56b59 100644
--- a/frontend/src/__tests__/components/molecules/__snapshots__/ViewEmailTemplate.test.tsx.snap
+++ b/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/preview-template/__snapshots__/page.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ViewEmailTemplate component matches submitted snapshot 1`] = `
+exports[`PreviewNhsAppTemplateFromMessagePlan page renders NHS App template preview 1`] = `
 <DocumentFragment>
   <a
     class="nhsuk-back-link"
-    href="/message-templates"
+    href="/message-plans/choose-nhs-app-template/fbb81055-79b9-4759-ac07-d191ae57be34"
   >
-    Back to all templates
+    Go back
   </a>
   <main
     class="nhsuk-main-wrapper"
@@ -31,7 +31,7 @@ exports[`ViewEmailTemplate component matches submitted snapshot 1`] = `
             class="preview__heading"
             data-testid="preview-message__heading"
           >
-            Example template
+            app template name
           </h1>
         </div>
         <div
@@ -51,7 +51,7 @@ exports[`ViewEmailTemplate component matches submitted snapshot 1`] = `
               <dd
                 class="nhsuk-summary-list__value"
               >
-                template-id
+                app-template-id
               </dd>
             </div>
             <div
@@ -65,26 +65,7 @@ exports[`ViewEmailTemplate component matches submitted snapshot 1`] = `
               <dd
                 class="nhsuk-summary-list__value"
               >
-                Email
-              </dd>
-            </div>
-            <div
-              class="nhsuk-summary-list__row"
-            >
-              <dt
-                class="nhsuk-summary-list__key"
-              >
-                Status
-              </dt>
-              <dd
-                class="nhsuk-summary-list__value"
-              >
-                <strong
-                  class="nhsuk-tag nhsuk-tag--grey"
-                  data-test-id="status-tag-submitted"
-                >
-                  Submitted
-                </strong>
+                NHS App message
               </dd>
             </div>
           </dl>
@@ -99,31 +80,6 @@ exports[`ViewEmailTemplate component matches submitted snapshot 1`] = `
               >
                 <div
                   data-testid="preview__heading-0"
-                  id="preview-heading-subject"
-                >
-                  Subject
-                </div>
-              </dt>
-              <dd
-                class="nhsuk-summary-list__value"
-              >
-                <div
-                  class="preview__content"
-                  data-testid="preview__content-0"
-                  id="preview-content-subject"
-                >
-                  Example subject
-                </div>
-              </dd>
-            </div>
-            <div
-              class="nhsuk-summary-list__row"
-            >
-              <dt
-                class="nhsuk-summary-list__key"
-              >
-                <div
-                  data-testid="preview__heading-1"
                   id="preview-heading-message"
                 >
                   Message
@@ -134,11 +90,11 @@ exports[`ViewEmailTemplate component matches submitted snapshot 1`] = `
               >
                 <div
                   class="preview__content"
-                  data-testid="preview__content-1"
+                  data-testid="preview__content-0"
                   id="preview-content-message"
                 >
                   <p>
-                    Example message
+                    message
                   </p>
                   
 
@@ -147,17 +103,11 @@ exports[`ViewEmailTemplate component matches submitted snapshot 1`] = `
             </div>
           </dl>
         </div>
-        <p>
-          This template cannot be edited because it has been submitted.
-        </p>
-        <p>
-          If you want to change a submitted or live template, you must create a new template to replace it.
-        </p>
         <p>
           <a
-            href="/message-templates"
+            href="/message-plans/choose-nhs-app-template/fbb81055-79b9-4759-ac07-d191ae57be34"
           >
-            Back to all templates
+            Go back
           </a>
         </p>
       </div>
diff --git a/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/preview-template/page.test.tsx b/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/preview-template/page.test.tsx
new file mode 100644
index 000000000..c88a8b0a8
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-nhs-app-template/preview-template/page.test.tsx
@@ -0,0 +1,53 @@
+import PreviewNhsAppTemplateFromMessagePlan, {
+  generateMetadata,
+} from '@app/message-plans/choose-nhs-app-template/[routingConfigId]/preview-template/[templateId]/page';
+import { NHS_APP_TEMPLATE, ROUTING_CONFIG } from '@testhelpers/helpers';
+import { render } from '@testing-library/react';
+import { getTemplate } from '@utils/form-actions';
+import { redirect } from 'next/navigation';
+
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getTemplateMock = jest.mocked(getTemplate);
+const redirectMock = jest.mocked(redirect);
+
+describe('PreviewNhsAppTemplateFromMessagePlan page', () => {
+  it('should redirect to invalid page with invalid template id', async () => {
+    getTemplateMock.mockResolvedValueOnce(undefined);
+
+    await PreviewNhsAppTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: 'routing-config-id',
+        templateId: 'invalid-template-id',
+      }),
+    });
+
+    expect(getTemplateMock).toHaveBeenCalledWith('invalid-template-id');
+
+    expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+  });
+
+  it('renders NHS App template preview', async () => {
+    getTemplateMock.mockResolvedValueOnce({
+      ...NHS_APP_TEMPLATE,
+      templateStatus: 'SUBMITTED',
+    });
+
+    const page = await PreviewNhsAppTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+        templateId: NHS_APP_TEMPLATE.id,
+      }),
+    });
+
+    const container = render(page);
+
+    expect(getTemplateMock).toHaveBeenCalledWith(NHS_APP_TEMPLATE.id);
+
+    expect(await generateMetadata()).toEqual({
+      title: 'Preview NHS App message template - NHS Notify',
+    });
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/__snapshots__/page.test.tsx.snap
new file mode 100644
index 000000000..7c5f1d509
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/__snapshots__/page.test.tsx.snap
@@ -0,0 +1,255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChooseStandardEnglishLetterTemplate page renders letter template selection 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose a letter template
+        </h1>
+        <form
+          action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                letter template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="letter-template-id-radio"
+                              id="channelTemplate-letter-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="letter-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-letter-template-id"
+                              id="channelTemplate-letter-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          letter template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          Standard letter
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="letter-template-id-preview-link"
+                              href="/message-plans/choose-standard-english-letter-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/letter-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
diff --git a/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/page.test.tsx b/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/page.test.tsx
new file mode 100644
index 000000000..1eb032e54
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/page.test.tsx
@@ -0,0 +1,82 @@
+import ChooseStandardEnglishLetterTemplate, {
+  generateMetadata,
+} from '@app/message-plans/choose-standard-english-letter-template/[routingConfigId]/page';
+import { LETTER_TEMPLATE, ROUTING_CONFIG } from '@testhelpers/helpers';
+import { render } from '@testing-library/react';
+import { getTemplates } from '@utils/form-actions';
+import { getRoutingConfig } from '@utils/message-plans';
+import { redirect } from 'next/navigation';
+
+jest.mock('@utils/message-plans');
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getRoutingConfigMock = jest.mocked(getRoutingConfig);
+const getTemplatesMock = jest.mocked(getTemplates);
+const redirectMock = jest.mocked(redirect);
+
+describe('ChooseStandardEnglishLetterTemplate page', () => {
+  it('should redirect to invalid page with invalid routing config id', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce(undefined);
+
+    await ChooseStandardEnglishLetterTemplate({
+      params: Promise.resolve({
+        routingConfigId: 'invalid-id',
+      }),
+    });
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith('invalid-id');
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/invalid',
+      'replace'
+    );
+  });
+
+  it('should redirect to invalid if plan has no letter cascade entry', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce({
+      ...ROUTING_CONFIG,
+      cascade: ROUTING_CONFIG.cascade.filter(
+        (item) => item.channel !== 'LETTER'
+      ),
+    });
+
+    await ChooseStandardEnglishLetterTemplate({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+      }),
+    });
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/invalid',
+      'replace'
+    );
+  });
+
+  it('renders letter template selection', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce(ROUTING_CONFIG);
+    getTemplatesMock.mockResolvedValueOnce([LETTER_TEMPLATE]);
+
+    const page = await ChooseStandardEnglishLetterTemplate({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+      }),
+    });
+
+    const container = render(page);
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);
+    expect(getTemplatesMock).toHaveBeenCalledWith({
+      templateType: 'LETTER',
+      language: 'en',
+      letterType: 'x0',
+    });
+
+    expect(await generateMetadata()).toEqual({
+      title: 'Choose a letter template - NHS Notify',
+    });
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/preview-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/preview-template/__snapshots__/page.test.tsx.snap
new file mode 100644
index 000000000..6d7075e51
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/preview-template/__snapshots__/page.test.tsx.snap
@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PreviewStandardEnglishLetterTemplateFromMessagePlan page renders letter template preview 1`] = `
+<DocumentFragment>
+  <a
+    class="nhsuk-back-link"
+    href="/message-plans/choose-standard-english-letter-template/fbb81055-79b9-4759-ac07-d191ae57be34"
+  >
+    Go back
+  </a>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <div
+          class="nhsuk-u-reading-width"
+        >
+          <span
+            class="nhsuk-caption-l"
+          >
+            Template
+          </span>
+          <h1
+            class="preview__heading"
+            data-testid="preview-message__heading"
+          >
+            letter template name
+          </h1>
+        </div>
+        <div
+          class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
+        >
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template ID
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                letter-template-id
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Type
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                Standard letter
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template file
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <div
+                  class="container"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon"
+                    fill="none"
+                    height="26"
+                    viewBox="0 0 20 26"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
+                      fill="#4C6272"
+                    />
+                  </svg>
+                  <p
+                    class="text"
+                  >
+                    template.pdf
+                  </p>
+                </div>
+              </dd>
+            </div>
+          </dl>
+        </div>
+        <p>
+          <a
+            href="/message-plans/choose-standard-english-letter-template/fbb81055-79b9-4759-ac07-d191ae57be34"
+          >
+            Go back
+          </a>
+        </p>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
diff --git a/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/preview-template/page.test.tsx b/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/preview-template/page.test.tsx
new file mode 100644
index 000000000..9d89e68f2
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-standard-english-letter-template/preview-template/page.test.tsx
@@ -0,0 +1,53 @@
+import PreviewStandardEnglishLetterTemplateFromMessagePlan, {
+  generateMetadata,
+} from '@app/message-plans/choose-standard-english-letter-template/[routingConfigId]/preview-template/[templateId]/page';
+import { LETTER_TEMPLATE, ROUTING_CONFIG } from '@testhelpers/helpers';
+import { render } from '@testing-library/react';
+import { getTemplate } from '@utils/form-actions';
+import { redirect } from 'next/navigation';
+
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getTemplateMock = jest.mocked(getTemplate);
+const redirectMock = jest.mocked(redirect);
+
+describe('PreviewStandardEnglishLetterTemplateFromMessagePlan page', () => {
+  it('should redirect to invalid page with invalid template id', async () => {
+    getTemplateMock.mockResolvedValueOnce(undefined);
+
+    await PreviewStandardEnglishLetterTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: 'routing-config-id',
+        templateId: 'invalid-template-id',
+      }),
+    });
+
+    expect(getTemplateMock).toHaveBeenCalledWith('invalid-template-id');
+
+    expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+  });
+
+  it('renders letter template preview', async () => {
+    getTemplateMock.mockResolvedValueOnce({
+      ...LETTER_TEMPLATE,
+      templateStatus: 'SUBMITTED',
+    });
+
+    const page = await PreviewStandardEnglishLetterTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+        templateId: LETTER_TEMPLATE.id,
+      }),
+    });
+
+    const container = render(page);
+
+    expect(getTemplateMock).toHaveBeenCalledWith(LETTER_TEMPLATE.id);
+
+    expect(await generateMetadata()).toEqual({
+      title: 'Preview letter template - NHS Notify',
+    });
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/app/message-plans/choose-text-message-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/message-plans/choose-text-message-template/__snapshots__/page.test.tsx.snap
new file mode 100644
index 000000000..9495c2928
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-text-message-template/__snapshots__/page.test.tsx.snap
@@ -0,0 +1,255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChooseTextMessageTemplate page renders sms template selection 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose a text message (SMS) template
+        </h1>
+        <form
+          action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                sms template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="sms-template-id-radio"
+                              id="channelTemplate-sms-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="sms-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-sms-template-id"
+                              id="channelTemplate-sms-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          sms template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          Text message (SMS)
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="sms-template-id-preview-link"
+                              href="/message-plans/choose-text-message-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/sms-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
diff --git a/frontend/src/__tests__/app/message-plans/choose-text-message-template/page.test.tsx b/frontend/src/__tests__/app/message-plans/choose-text-message-template/page.test.tsx
new file mode 100644
index 000000000..601c18c45
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-text-message-template/page.test.tsx
@@ -0,0 +1,81 @@
+import ChooseTextMessageTemplate, {
+  generateMetadata,
+} from '@app/message-plans/choose-text-message-template/[routingConfigId]/page';
+import { ROUTING_CONFIG, SMS_TEMPLATE } from '@testhelpers/helpers';
+import { render } from '@testing-library/react';
+import { getTemplates } from '@utils/form-actions';
+import { getRoutingConfig } from '@utils/message-plans';
+import { redirect, usePathname } from 'next/navigation';
+
+jest.mock('@utils/message-plans');
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getRoutingConfigMock = jest.mocked(getRoutingConfig);
+const getTemplatesMock = jest.mocked(getTemplates);
+const redirectMock = jest.mocked(redirect);
+jest
+  .mocked(usePathname)
+  .mockReturnValue('message-plans/choose-text-message-template/testid');
+
+describe('ChooseTextMessageTemplate page', () => {
+  it('should redirect to invalid page with invalid routing config id', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce(undefined);
+
+    await ChooseTextMessageTemplate({
+      params: Promise.resolve({
+        routingConfigId: 'invalid-id',
+      }),
+    });
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith('invalid-id');
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/invalid',
+      'replace'
+    );
+  });
+
+  it('should redirect to invalid if plan has no sms cascade entry', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce({
+      ...ROUTING_CONFIG,
+      cascade: ROUTING_CONFIG.cascade.filter((item) => item.channel !== 'SMS'),
+    });
+
+    await ChooseTextMessageTemplate({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+      }),
+    });
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/message-plans/invalid',
+      'replace'
+    );
+  });
+
+  it('renders sms template selection', async () => {
+    getRoutingConfigMock.mockResolvedValueOnce(ROUTING_CONFIG);
+    getTemplatesMock.mockResolvedValueOnce([SMS_TEMPLATE]);
+
+    const page = await ChooseTextMessageTemplate({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+      }),
+    });
+
+    const container = render(page);
+
+    expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);
+    expect(getTemplatesMock).toHaveBeenCalledWith({
+      templateType: 'SMS',
+    });
+
+    expect(await generateMetadata()).toEqual({
+      title: 'Choose a text message (SMS) template - NHS Notify',
+    });
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/ViewSMSTemplate.test.tsx.snap b/frontend/src/__tests__/app/message-plans/choose-text-message-template/preview-template/__snapshots__/page.test.tsx.snap
similarity index 70%
rename from frontend/src/__tests__/components/molecules/__snapshots__/ViewSMSTemplate.test.tsx.snap
rename to frontend/src/__tests__/app/message-plans/choose-text-message-template/preview-template/__snapshots__/page.test.tsx.snap
index 86d663f19..ade1415a1 100644
--- a/frontend/src/__tests__/components/molecules/__snapshots__/ViewSMSTemplate.test.tsx.snap
+++ b/frontend/src/__tests__/app/message-plans/choose-text-message-template/preview-template/__snapshots__/page.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
+exports[`PreviewTextMessageTemplateFromMessagePlan page renders SMS template preview 1`] = `
 <DocumentFragment>
   <a
     class="nhsuk-back-link"
-    href="/message-templates"
+    href="/message-plans/choose-text-message-template/fbb81055-79b9-4759-ac07-d191ae57be34"
   >
-    Back to all templates
+    Go back
   </a>
   <main
     class="nhsuk-main-wrapper"
@@ -31,7 +31,7 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
             class="preview__heading"
             data-testid="preview-message__heading"
           >
-            Example template
+            sms template name
           </h1>
         </div>
         <div
@@ -51,7 +51,7 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
               <dd
                 class="nhsuk-summary-list__value"
               >
-                template-id
+                sms-template-id
               </dd>
             </div>
             <div
@@ -68,25 +68,6 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
                 Text message (SMS)
               </dd>
             </div>
-            <div
-              class="nhsuk-summary-list__row"
-            >
-              <dt
-                class="nhsuk-summary-list__key"
-              >
-                Status
-              </dt>
-              <dd
-                class="nhsuk-summary-list__value"
-              >
-                <strong
-                  class="nhsuk-tag nhsuk-tag--grey"
-                  data-test-id="status-tag-submitted"
-                >
-                  Submitted
-                </strong>
-              </dd>
-            </div>
           </dl>
           <dl
             class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
@@ -113,7 +94,7 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
                   id="preview-content-message"
                 >
                   <p>
-                    Example message
+                    message
                   </p>
                   
 
@@ -122,17 +103,11 @@ exports[`ViewNHSAppTemplate component matches submitted snapshot 1`] = `
             </div>
           </dl>
         </div>
-        <p>
-          This template cannot be edited because it has been submitted.
-        </p>
-        <p>
-          If you want to change a submitted or live template, you must create a new template to replace it.
-        </p>
         <p>
           <a
-            href="/message-templates"
+            href="/message-plans/choose-text-message-template/fbb81055-79b9-4759-ac07-d191ae57be34"
           >
-            Back to all templates
+            Go back
           </a>
         </p>
       </div>
diff --git a/frontend/src/__tests__/app/message-plans/choose-text-message-template/preview-template/page.test.tsx b/frontend/src/__tests__/app/message-plans/choose-text-message-template/preview-template/page.test.tsx
new file mode 100644
index 000000000..7cfc2a6a8
--- /dev/null
+++ b/frontend/src/__tests__/app/message-plans/choose-text-message-template/preview-template/page.test.tsx
@@ -0,0 +1,55 @@
+import PreviewTextMessageTemplateFromMessagePlan, {
+  generateMetadata,
+} from '@app/message-plans/choose-text-message-template/[routingConfigId]/preview-template/[templateId]/page';
+import { ROUTING_CONFIG, SMS_TEMPLATE } from '@testhelpers/helpers';
+import { render } from '@testing-library/react';
+import { getTemplate } from '@utils/form-actions';
+import { redirect } from 'next/navigation';
+
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getTemplateMock = jest.mocked(getTemplate);
+const redirectMock = jest.mocked(redirect);
+
+describe('PreviewTextMessageTemplateFromMessagePlan page', () => {
+  beforeEach(jest.resetAllMocks);
+
+  it('should redirect to invalid page with invalid template id', async () => {
+    getTemplateMock.mockResolvedValueOnce(undefined);
+
+    await PreviewTextMessageTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: 'routing-config-id',
+        templateId: 'invalid-template-id',
+      }),
+    });
+
+    expect(getTemplateMock).toHaveBeenCalledWith('invalid-template-id');
+
+    expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+  });
+
+  it('renders SMS template preview', async () => {
+    getTemplateMock.mockResolvedValueOnce({
+      ...SMS_TEMPLATE,
+      templateStatus: 'SUBMITTED',
+    });
+
+    const page = await PreviewTextMessageTemplateFromMessagePlan({
+      params: Promise.resolve({
+        routingConfigId: ROUTING_CONFIG.id,
+        templateId: SMS_TEMPLATE.id,
+      }),
+    });
+
+    const container = render(page);
+
+    expect(getTemplateMock).toHaveBeenCalledWith(SMS_TEMPLATE.id);
+
+    expect(await generateMetadata()).toEqual({
+      title: 'Preview text message template - NHS Notify',
+    });
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/app/preview-submitted-email-template/page.test.tsx b/frontend/src/__tests__/app/preview-submitted-email-template/page.test.tsx
index 66b3e39d2..0f19ae66f 100644
--- a/frontend/src/__tests__/app/preview-submitted-email-template/page.test.tsx
+++ b/frontend/src/__tests__/app/preview-submitted-email-template/page.test.tsx
@@ -4,7 +4,6 @@
 import PreviewSubmittedEmailTemplatePage, {
   generateMetadata,
 } from '@app/preview-submitted-email-template/[templateId]/page';
-import { ViewEmailTemplate } from '@molecules/ViewEmailTemplate/ViewEmailTemplate';
 import { EmailTemplate } from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
 import { redirect } from 'next/navigation';
@@ -15,6 +14,8 @@ import {
   SMS_TEMPLATE,
 } from '@testhelpers/helpers';
 import content from '@content/content';
+import { PreviewSubmittedTemplate } from '@molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate';
+import PreviewTemplateDetailsEmail from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail';
 
 const { pageTitle } = content.components.previewEmailTemplate;
 
@@ -59,7 +60,10 @@ describe('ViewSubmittedEmailTemplatePage', () => {
       title: pageTitle,
     });
     expect(page).toEqual(
-      <ViewEmailTemplate initialState={submittedEmailTemplate} />
+      <PreviewSubmittedTemplate
+        initialState={submittedEmailTemplate}
+        previewComponent={PreviewTemplateDetailsEmail}
+      />
     );
   });
 
diff --git a/frontend/src/__tests__/app/preview-submitted-letter-template/page.test.tsx b/frontend/src/__tests__/app/preview-submitted-letter-template/page.test.tsx
index 80f8a87e5..8816018fc 100644
--- a/frontend/src/__tests__/app/preview-submitted-letter-template/page.test.tsx
+++ b/frontend/src/__tests__/app/preview-submitted-letter-template/page.test.tsx
@@ -4,7 +4,6 @@
 import PreviewSubmittedLetterTemplatePage, {
   generateMetadata,
 } from '@app/preview-submitted-letter-template/[templateId]/page';
-import { ViewLetterTemplate } from '@molecules/ViewLetterTemplate/ViewLetterTemplate';
 import { LetterTemplate } from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
 import { redirect } from 'next/navigation';
@@ -16,6 +15,8 @@ import {
   LETTER_TEMPLATE,
 } from '@testhelpers/helpers';
 import content from '@content/content';
+import PreviewTemplateDetailsLetter from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsLetter';
+import { PreviewSubmittedTemplate } from '@molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate';
 
 const { pageTitle } = content.components.previewLetterTemplate;
 
@@ -65,7 +66,10 @@ describe('PreviewSubmittedLetterTemplatePage', () => {
       title: pageTitle,
     });
     expect(page).toEqual(
-      <ViewLetterTemplate initialState={submittedLetterTemplate} />
+      <PreviewSubmittedTemplate
+        initialState={submittedLetterTemplate}
+        previewComponent={PreviewTemplateDetailsLetter}
+      />
     );
   });
 
diff --git a/frontend/src/__tests__/app/preview-submitted-nhs-app-template/page.test.tsx b/frontend/src/__tests__/app/preview-submitted-nhs-app-template/page.test.tsx
index 4971d9448..5ec7ca7fc 100644
--- a/frontend/src/__tests__/app/preview-submitted-nhs-app-template/page.test.tsx
+++ b/frontend/src/__tests__/app/preview-submitted-nhs-app-template/page.test.tsx
@@ -4,7 +4,6 @@
 import PreviewSubmittedNHSAppTemplatePage, {
   generateMetadata,
 } from '@app/preview-submitted-nhs-app-template/[templateId]/page';
-import { ViewNHSAppTemplate } from '@molecules/ViewNHSAppTemplate/ViewNHSAppTemplate';
 import { NHSAppTemplate } from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
 import { redirect } from 'next/navigation';
@@ -15,6 +14,8 @@ import {
   SMS_TEMPLATE,
 } from '@testhelpers/helpers';
 import content from '@content/content';
+import { PreviewSubmittedTemplate } from '@molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate';
+import PreviewTemplateDetailsNhsApp from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp';
 
 const { pageTitle } = content.components.previewNHSAppTemplate;
 
@@ -57,7 +58,10 @@ describe('PreviewSubmittedNHSAppTemplatePage', () => {
       title: pageTitle,
     });
     expect(page).toEqual(
-      <ViewNHSAppTemplate initialState={submittedNHSAppTemplate} />
+      <PreviewSubmittedTemplate
+        initialState={submittedNHSAppTemplate}
+        previewComponent={PreviewTemplateDetailsNhsApp}
+      />
     );
   });
 
diff --git a/frontend/src/__tests__/app/preview-submitted-text-message-template/page.test.tsx b/frontend/src/__tests__/app/preview-submitted-text-message-template/page.test.tsx
index b207e70ac..c31651a34 100644
--- a/frontend/src/__tests__/app/preview-submitted-text-message-template/page.test.tsx
+++ b/frontend/src/__tests__/app/preview-submitted-text-message-template/page.test.tsx
@@ -4,7 +4,6 @@
 import PreviewSubmittedSMSTemplatePage, {
   generateMetadata,
 } from '@app/preview-submitted-text-message-template/[templateId]/page';
-import { ViewSMSTemplate } from '@molecules/ViewSMSTemplate/ViewSMSTemplate';
 import { SMSTemplate } from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
 import { redirect } from 'next/navigation';
@@ -15,6 +14,8 @@ import {
   SMS_TEMPLATE,
 } from '@testhelpers/helpers';
 import content from '@content/content';
+import { PreviewSubmittedTemplate } from '@molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate';
+import PreviewTemplateDetailsSms from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms';
 
 const { pageTitle } = content.components.previewSMSTemplate;
 
@@ -57,7 +58,10 @@ describe('PreviewSubmittedSMSTemplatePage', () => {
       title: pageTitle,
     });
     expect(page).toEqual(
-      <ViewSMSTemplate initialState={submittedSMSTemplate} />
+      <PreviewSubmittedTemplate
+        initialState={submittedSMSTemplate}
+        previewComponent={PreviewTemplateDetailsSms}
+      />
     );
   });
 
diff --git a/frontend/src/__tests__/components/forms/ChooseChannelTemplate/ChooseChannelTemplate.test.tsx b/frontend/src/__tests__/components/forms/ChooseChannelTemplate/ChooseChannelTemplate.test.tsx
new file mode 100644
index 000000000..f8e9dee16
--- /dev/null
+++ b/frontend/src/__tests__/components/forms/ChooseChannelTemplate/ChooseChannelTemplate.test.tsx
@@ -0,0 +1,196 @@
+import { ChooseChannelTemplate } from '@forms/ChooseChannelTemplate';
+import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  EMAIL_TEMPLATE,
+  LETTER_TEMPLATE,
+  NHS_APP_TEMPLATE,
+  ROUTING_CONFIG,
+  SMS_TEMPLATE,
+} from '@testhelpers/helpers';
+import { useActionState } from 'react';
+import { ChooseChannelTemplateFormState } from '@forms/ChooseChannelTemplate/server-action';
+import { usePathname } from 'next/navigation';
+
+jest.mock('next/navigation');
+
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useActionState: jest
+      .fn()
+      .mockImplementation(
+        (
+          _: (
+            formState: ChooseChannelTemplateFormState,
+            formData: FormData
+          ) => Promise<ChooseChannelTemplateFormState>,
+          initialState: ChooseChannelTemplateFormState
+        ) => [initialState, '/action']
+      ),
+  };
+});
+
+jest
+  .mocked(usePathname)
+  .mockReturnValue('message-plans/choose-email-template/testid');
+
+describe('ChooseChannelTemplate', () => {
+  it('renders nhs app form', () => {
+    const container = render(
+      <ChooseChannelTemplate
+        messagePlan={ROUTING_CONFIG}
+        pageHeading='Choose an NHS App template'
+        templateList={[NHS_APP_TEMPLATE]}
+        cascadeIndex={0}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders email form', () => {
+    const container = render(
+      <ChooseChannelTemplate
+        messagePlan={ROUTING_CONFIG}
+        pageHeading='Choose an email template'
+        templateList={[EMAIL_TEMPLATE]}
+        cascadeIndex={1}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders sms form', () => {
+    const container = render(
+      <ChooseChannelTemplate
+        messagePlan={ROUTING_CONFIG}
+        pageHeading='Choose a text message (SMS) template'
+        templateList={[SMS_TEMPLATE]}
+        cascadeIndex={2}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders letter form', () => {
+    const container = render(
+      <ChooseChannelTemplate
+        messagePlan={ROUTING_CONFIG}
+        pageHeading='Choose a letter template'
+        templateList={[LETTER_TEMPLATE]}
+        cascadeIndex={3}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders multiple options', () => {
+    const container = render(
+      <ChooseChannelTemplate
+        messagePlan={ROUTING_CONFIG}
+        pageHeading='Choose an NHS App template'
+        templateList={[
+          NHS_APP_TEMPLATE,
+          { ...NHS_APP_TEMPLATE, id: 'another-id', name: 'Another template' },
+        ]}
+        cascadeIndex={0}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders correctly when template is unselected', () => {
+    const container = render(
+      <ChooseChannelTemplate
+        messagePlan={{
+          ...ROUTING_CONFIG,
+          cascade: [
+            {
+              cascadeGroups: ['standard'],
+              channel: 'NHSAPP',
+              channelType: 'primary',
+              defaultTemplateId: null,
+            },
+          ],
+        }}
+        pageHeading='Choose an NHS App template'
+        templateList={[NHS_APP_TEMPLATE]}
+        cascadeIndex={0}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders correctly when no templates are available', () => {
+    const container = render(
+      <ChooseChannelTemplate
+        messagePlan={{
+          ...ROUTING_CONFIG,
+          cascade: [
+            {
+              cascadeGroups: ['standard'],
+              channel: 'NHSAPP',
+              channelType: 'primary',
+              defaultTemplateId: null,
+            },
+          ],
+        }}
+        pageHeading='Choose an NHS App template'
+        templateList={[]}
+        cascadeIndex={0}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders error component', () => {
+    const mockUseActionState = jest.fn().mockReturnValue([
+      {
+        errorState: {
+          formErrors: [],
+          fieldErrors: {
+            channelTemplate: ['You must select a template'],
+          },
+        },
+      },
+      '/action',
+    ]);
+
+    jest.mocked(useActionState).mockImplementation(mockUseActionState);
+
+    const container = render(
+      <ChooseChannelTemplate
+        messagePlan={ROUTING_CONFIG}
+        pageHeading='Choose an NHS App template'
+        templateList={[NHS_APP_TEMPLATE]}
+        cascadeIndex={0}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  test('Client-side validation triggers', () => {
+    const container = render(
+      <ChooseChannelTemplate
+        messagePlan={{
+          ...ROUTING_CONFIG,
+          cascade: [
+            {
+              cascadeGroups: ['standard'],
+              channel: 'NHSAPP',
+              channelType: 'primary',
+              defaultTemplateId: null,
+            },
+          ],
+        }}
+        pageHeading='Choose an NHS App template'
+        templateList={[NHS_APP_TEMPLATE]}
+        cascadeIndex={0}
+      />
+    );
+    const submitButton = screen.getByTestId('submit-button');
+    fireEvent.click(submitButton);
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/components/forms/ChooseChannelTemplate/__snapshots__/ChooseChannelTemplate.test.tsx.snap b/frontend/src/__tests__/components/forms/ChooseChannelTemplate/__snapshots__/ChooseChannelTemplate.test.tsx.snap
new file mode 100644
index 000000000..d4494e9b6
--- /dev/null
+++ b/frontend/src/__tests__/components/forms/ChooseChannelTemplate/__snapshots__/ChooseChannelTemplate.test.tsx.snap
@@ -0,0 +1,2239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChooseChannelTemplate Client-side validation triggers 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      aria-labelledby="error-summary-title"
+      class="nhsuk-error-summary"
+      role="alert"
+      tabindex="-1"
+    >
+      <h2
+        class="nhsuk-error-summary__title"
+        data-testid="error-summary"
+        id="error-summary-title"
+      >
+        There is a problem
+      </h2>
+      <div
+        class="nhsuk-hint"
+      >
+        You have not chosen a template
+      </div>
+      <ul
+        class="nhsuk-list nhsuk-error-summary__list"
+      >
+        <li>
+          <a
+            href="#channelTemplate"
+          >
+            Choose an NHS App template
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose an NHS App template
+        </h1>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group nhsuk-form-group--error"
+              >
+                <span
+                  class="nhsuk-error-message"
+                  id="channelTemplate--error-message"
+                >
+                  <span
+                    class="nhsuk-u-visually-hidden"
+                  >
+                    Error: 
+                  </span>
+                  Choose an NHS App template
+                </span>
+                <div
+                  aria-describedby="channelTemplate--error-message"
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              class="nhsuk-radios__input"
+                              data-testid="app-template-id-radio"
+                              id="channelTemplate-app-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="app-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-app-template-id"
+                              id="channelTemplate-app-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          app template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          NHS App message
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="app-template-id-preview-link"
+                              href="/message-plans/choose-nhs-app-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/app-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`ChooseChannelTemplate renders correctly when no templates are available 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose an NHS App template
+        </h1>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <p>
+            You do not have any templates yet.
+          </p>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <p>
+              <a
+                class="nhsuk-u-font-size-19"
+                href="/message-templates"
+              >
+                Go to templates
+              </a>
+            </p>
+            <a
+              class="nhsuk-u-font-size-19"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`ChooseChannelTemplate renders correctly when template is unselected 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose an NHS App template
+        </h1>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              class="nhsuk-radios__input"
+                              data-testid="app-template-id-radio"
+                              id="channelTemplate-app-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="app-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-app-template-id"
+                              id="channelTemplate-app-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          app template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          NHS App message
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="app-template-id-preview-link"
+                              href="/message-plans/choose-nhs-app-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/app-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`ChooseChannelTemplate renders email form 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose an email template
+        </h1>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                email template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="email-template-id-radio"
+                              id="channelTemplate-email-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="email-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-email-template-id"
+                              id="channelTemplate-email-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          email template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          Email
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="email-template-id-preview-link"
+                              href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/email-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`ChooseChannelTemplate renders error component 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      aria-labelledby="error-summary-title"
+      class="nhsuk-error-summary"
+      role="alert"
+      tabindex="-1"
+    >
+      <h2
+        class="nhsuk-error-summary__title"
+        data-testid="error-summary"
+        id="error-summary-title"
+      >
+        There is a problem
+      </h2>
+      <div
+        class="nhsuk-hint"
+      >
+        You have not chosen a template
+      </div>
+      <ul
+        class="nhsuk-list nhsuk-error-summary__list"
+      >
+        <li>
+          <a
+            href="#channelTemplate"
+          >
+            You must select a template
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose an NHS App template
+        </h1>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                app template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group nhsuk-form-group--error"
+              >
+                <span
+                  class="nhsuk-error-message"
+                  id="channelTemplate--error-message"
+                >
+                  <span
+                    class="nhsuk-u-visually-hidden"
+                  >
+                    Error: 
+                  </span>
+                  You must select a template
+                </span>
+                <div
+                  aria-describedby="channelTemplate--error-message"
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="app-template-id-radio"
+                              id="channelTemplate-app-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="app-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-app-template-id"
+                              id="channelTemplate-app-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          app template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          NHS App message
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="app-template-id-preview-link"
+                              href="/message-plans/choose-nhs-app-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/app-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`ChooseChannelTemplate renders letter form 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose a letter template
+        </h1>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                letter template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="letter-template-id-radio"
+                              id="channelTemplate-letter-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="letter-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-letter-template-id"
+                              id="channelTemplate-letter-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          letter template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          Standard letter
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="letter-template-id-preview-link"
+                              href="/message-plans/choose-standard-english-letter-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/letter-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`ChooseChannelTemplate renders multiple options 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose an NHS App template
+        </h1>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                app template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="app-template-id-radio"
+                              id="channelTemplate-app-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="app-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-app-template-id"
+                              id="channelTemplate-app-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          app template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          NHS App message
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="app-template-id-preview-link"
+                              href="/message-plans/choose-nhs-app-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/app-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              class="nhsuk-radios__input"
+                              data-testid="another-id-radio"
+                              id="channelTemplate-another-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="another-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-another-id"
+                              id="channelTemplate-another-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          Another template
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          NHS App message
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="another-id-preview-link"
+                              href="/message-plans/choose-nhs-app-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/another-id"
+                              id="preview-template-link-1"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`ChooseChannelTemplate renders nhs app form 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose an NHS App template
+        </h1>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                app template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="app-template-id-radio"
+                              id="channelTemplate-app-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="app-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-app-template-id"
+                              id="channelTemplate-app-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          app template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          NHS App message
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="app-template-id-preview-link"
+                              href="/message-plans/choose-nhs-app-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/app-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`ChooseChannelTemplate renders sms form 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <span
+          class="nhsuk-caption-l"
+        >
+          Autumn Campaign Plan
+        </span>
+        <h1
+          class="nhsuk-heading-l"
+        >
+          Choose a text message (SMS) template
+        </h1>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="choose-channel-template"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <dl
+            class="nhsuk-summary-list"
+            data-testid="previous-selection-summary"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Previously selected template
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                sms template name
+              </dd>
+            </div>
+          </dl>
+          <div
+            class="nhsuk-grid-row"
+          >
+            <div
+              class="nhsuk-grid-column-full"
+            >
+              <div
+                class="nhsuk-hint"
+              >
+                Choose one option
+              </div>
+              <div
+                class="nhsuk-form-group"
+              >
+                <div
+                  class="nhsuk-radios"
+                  id="channelTemplate"
+                >
+                  <table
+                    class="nhsuk-table-responsive"
+                    data-testid="channel-templates-table"
+                    id="channel-templates-table"
+                  >
+                    <thead
+                      class="nhsuk-table__head"
+                      role="rowgroup"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-select"
+                          scope="col"
+                        >
+                          Select
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-name"
+                          scope="col"
+                        >
+                          Name
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-type"
+                          scope="col"
+                        >
+                          Type
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-last-edited"
+                          scope="col"
+                        >
+                          Last edited
+                        </th>
+                        <th
+                          class="nhsuk-table__header"
+                          data-testid="channel-templates-table-header-template-action"
+                          scope="col"
+                        />
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="nhsuk-table__body"
+                    >
+                      <tr
+                        class="nhsuk-table__row"
+                      >
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Select 
+                          </span>
+                          <div
+                            class="nhsuk-radios__item"
+                          >
+                            <input
+                              checked=""
+                              class="nhsuk-radios__input"
+                              data-testid="sms-template-id-radio"
+                              id="channelTemplate-sms-template-id"
+                              name="channelTemplate"
+                              type="radio"
+                              value="sms-template-id"
+                            />
+                            <label
+                              class="nhsuk-label nhsuk-radios__label"
+                              for="channelTemplate-sms-template-id"
+                              id="channelTemplate-sms-template-id--label"
+                            >
+                               
+                            </label>
+                          </div>
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Name 
+                          </span>
+                          sms template name
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Type 
+                          </span>
+                          Text message (SMS)
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                            Last edited 
+                          </span>
+                          13th Jan 2025
+                          <br />
+                          10:19
+                        </td>
+                        <td
+                          class="nhsuk-table__cell"
+                          role="cell"
+                        >
+                          <span
+                            aria-hidden="true"
+                            class="nhsuk-table-responsive__heading"
+                          >
+                             
+                          </span>
+                          <div
+                            class="actionLinksWrapper"
+                          >
+                            <a
+                              aria-label="Preview"
+                              data-testid="sms-template-id-preview-link"
+                              href="/message-plans/choose-text-message-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/sms-template-id"
+                              id="preview-template-link-0"
+                            >
+                              Preview
+                            </a>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="nhsuk-form-group"
+            data-testid="channel-template-actions"
+          >
+            <button
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="submit-button"
+              id="channel-template-submit-button"
+              type="submit"
+            >
+              Save and continue
+            </button>
+            <a
+              class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
+              href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
+            >
+              Go back
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
diff --git a/frontend/src/__tests__/components/forms/ChooseChannelTemplate/server-action.test.ts b/frontend/src/__tests__/components/forms/ChooseChannelTemplate/server-action.test.ts
new file mode 100644
index 000000000..cedfc3054
--- /dev/null
+++ b/frontend/src/__tests__/components/forms/ChooseChannelTemplate/server-action.test.ts
@@ -0,0 +1,104 @@
+import { chooseChannelTemplateAction } from '@forms/ChooseChannelTemplate/server-action';
+import {
+  EMAIL_TEMPLATE,
+  getMockFormData,
+  NHS_APP_TEMPLATE,
+  ROUTING_CONFIG,
+  SMS_TEMPLATE,
+} from '@testhelpers/helpers';
+import { updateRoutingConfig } from '@utils/message-plans';
+import { redirect, RedirectType } from 'next/navigation';
+
+jest.mock('next/navigation');
+jest.mock('@utils/message-plans');
+
+jest.mock('@utils/amplify-utils');
+
+test('submit form - validation error', async () => {
+  const response = await chooseChannelTemplateAction(
+    {
+      messagePlan: ROUTING_CONFIG,
+      pageHeading: 'Choose an NHS App template',
+      templateList: [NHS_APP_TEMPLATE],
+      cascadeIndex: 0,
+    },
+    getMockFormData({})
+  );
+
+  expect(response).toEqual(
+    expect.objectContaining({
+      errorState: {
+        fieldErrors: { channelTemplate: ['Choose an NHS App template'] },
+        formErrors: [],
+      },
+    })
+  );
+});
+
+test('submit form - success updates config and redirects to choose templates', async () => {
+  const mockRedirect = jest.mocked(redirect);
+  const mockUpdateRoutingConfig = jest.mocked(updateRoutingConfig);
+
+  await chooseChannelTemplateAction(
+    {
+      messagePlan: {
+        ...ROUTING_CONFIG,
+        cascade: [
+          {
+            cascadeGroups: ['standard'],
+            channel: 'NHSAPP',
+            channelType: 'primary',
+            defaultTemplateId: NHS_APP_TEMPLATE.id,
+          },
+          {
+            cascadeGroups: ['standard'],
+            channel: 'EMAIL',
+            channelType: 'primary',
+            defaultTemplateId: null,
+          },
+          {
+            cascadeGroups: ['standard'],
+            channel: 'SMS',
+            channelType: 'primary',
+            defaultTemplateId: SMS_TEMPLATE.id,
+          },
+        ],
+      },
+      pageHeading: 'Choose an email template',
+      templateList: [EMAIL_TEMPLATE],
+      cascadeIndex: 1,
+    },
+    getMockFormData({
+      channelTemplate: EMAIL_TEMPLATE.id,
+    })
+  );
+
+  expect(mockUpdateRoutingConfig).toHaveBeenCalledWith(ROUTING_CONFIG.id, {
+    cascade: [
+      {
+        cascadeGroups: ['standard'],
+        channel: 'NHSAPP',
+        channelType: 'primary',
+        defaultTemplateId: NHS_APP_TEMPLATE.id,
+      },
+      {
+        cascadeGroups: ['standard'],
+        channel: 'EMAIL',
+        channelType: 'primary',
+        defaultTemplateId: EMAIL_TEMPLATE.id,
+      },
+      {
+        cascadeGroups: ['standard'],
+        channel: 'SMS',
+        channelType: 'primary',
+        defaultTemplateId: SMS_TEMPLATE.id,
+      },
+    ],
+    cascadeGroupOverrides: ROUTING_CONFIG.cascadeGroupOverrides,
+  });
+
+  expect(mockRedirect).toHaveBeenCalledWith(
+    `/message-plans/choose-templates/${ROUTING_CONFIG.id}`,
+    RedirectType.push
+  );
+});
diff --git a/frontend/src/__tests__/components/forms/CopyTemplate/CopyTemplate.test.tsx b/frontend/src/__tests__/components/forms/CopyTemplate/CopyTemplate.test.tsx
index 09b41bb21..e436e597e 100644
--- a/frontend/src/__tests__/components/forms/CopyTemplate/CopyTemplate.test.tsx
+++ b/frontend/src/__tests__/components/forms/CopyTemplate/CopyTemplate.test.tsx
@@ -5,7 +5,7 @@ import { mockDeep } from 'jest-mock-extended';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { CopyTemplate, ValidCopyType } from '@forms/CopyTemplate/CopyTemplate';
 import { TemplateFormState } from 'nhs-notify-web-template-management-utils';
-import { ValidatedTemplateDto } from 'nhs-notify-backend-client';
+import { TemplateDto } from 'nhs-notify-backend-client';
 
 jest.mock('@utils/amplify-utils');
 
@@ -32,9 +32,7 @@ describe('Choose template page', () => {
   it('selects one radio button at a time', () => {
     const container = render(
       <CopyTemplate
-        template={mockDeep<
-          ValidatedTemplateDto & { templateType: ValidCopyType }
-        >()}
+        template={mockDeep<TemplateDto & { templateType: ValidCopyType }>()}
       />
     );
     expect(container.asFragment()).toMatchSnapshot();
@@ -84,9 +82,7 @@ describe('Choose template page', () => {
 
     const container = render(
       <CopyTemplate
-        template={mockDeep<
-          ValidatedTemplateDto & { templateType: ValidCopyType }
-        >()}
+        template={mockDeep<TemplateDto & { templateType: ValidCopyType }>()}
       />
     );
     expect(container.asFragment()).toMatchSnapshot();
@@ -95,9 +91,7 @@ describe('Choose template page', () => {
   test('Client-side validation triggers', () => {
     const container = render(
       <CopyTemplate
-        template={mockDeep<
-          ValidatedTemplateDto & { templateType: ValidCopyType }
-        >()}
+        template={mockDeep<TemplateDto & { templateType: ValidCopyType }>()}
       />
     );
     const submitButton = screen.getByTestId('submit-button');
diff --git a/frontend/src/__tests__/components/molecules/ChannelTemplates.test.tsx b/frontend/src/__tests__/components/molecules/ChannelTemplates.test.tsx
new file mode 100644
index 000000000..d4ee1ea73
--- /dev/null
+++ b/frontend/src/__tests__/components/molecules/ChannelTemplates.test.tsx
@@ -0,0 +1,81 @@
+import { ChannelTemplates } from '@molecules/ChannelTemplates/ChannelTemplates';
+import { render } from '@testing-library/react';
+import {
+  EMAIL_TEMPLATE,
+  LETTER_TEMPLATE,
+  NHS_APP_TEMPLATE,
+  SMS_TEMPLATE,
+} from '@testhelpers/helpers';
+import { usePathname } from 'next/navigation';
+
+jest.mock('next/navigation');
+
+jest
+  .mocked(usePathname)
+  .mockReturnValue('message-plans/choose-email-template/testid');
+
+describe('ChannelTemplates', () => {
+  it('renders templates', () => {
+    const container = render(
+      <ChannelTemplates
+        templateList={[
+          NHS_APP_TEMPLATE,
+          EMAIL_TEMPLATE,
+          SMS_TEMPLATE,
+          LETTER_TEMPLATE,
+        ]}
+        errorState={null}
+        selectedTemplate={null}
+        routingConfigId='abc'
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders templates with pre-selected template', () => {
+    const container = render(
+      <ChannelTemplates
+        templateList={[
+          NHS_APP_TEMPLATE,
+          EMAIL_TEMPLATE,
+          SMS_TEMPLATE,
+          LETTER_TEMPLATE,
+        ]}
+        errorState={null}
+        selectedTemplate={EMAIL_TEMPLATE.id}
+        routingConfigId='abc'
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+    expect(container.getByTestId(`${EMAIL_TEMPLATE.id}-radio`)).toHaveAttribute(
+      'checked'
+    );
+  });
+
+  it('renders templates with error state', () => {
+    const container = render(
+      <ChannelTemplates
+        templateList={[
+          NHS_APP_TEMPLATE,
+          EMAIL_TEMPLATE,
+          SMS_TEMPLATE,
+          LETTER_TEMPLATE,
+        ]}
+        errorState={{
+          fieldErrors: {
+            channelTemplate: ['You must select a template'],
+          },
+        }}
+        selectedTemplate={null}
+        routingConfigId='abc'
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+    expect(
+      container.getByText('You must select a template')
+    ).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/__tests__/components/molecules/PreviewSubmittedTemplate.test.tsx b/frontend/src/__tests__/components/molecules/PreviewSubmittedTemplate.test.tsx
new file mode 100644
index 000000000..e8789b3c9
--- /dev/null
+++ b/frontend/src/__tests__/components/molecules/PreviewSubmittedTemplate.test.tsx
@@ -0,0 +1,183 @@
+import { PreviewSubmittedTemplate } from '@molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate';
+import PreviewTemplateDetailsEmail from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail';
+import PreviewTemplateDetailsLetter from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsLetter';
+import PreviewTemplateDetailsNhsApp from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp';
+import PreviewTemplateDetailsSms from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms';
+import { render } from '@testing-library/react';
+import { ReadonlyURLSearchParams, useSearchParams } from 'next/navigation';
+
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  useSearchParams: jest.fn(),
+}));
+
+const useSearchParamsMock = jest.mocked(useSearchParams);
+
+useSearchParamsMock.mockReturnValue(new ReadonlyURLSearchParams());
+
+describe('PreviewSubmittedTemplate component', () => {
+  it('should render app message', () => {
+    const container = render(
+      <PreviewSubmittedTemplate
+        initialState={{
+          id: 'template-id',
+          name: 'Example template',
+          message: 'app content',
+          templateStatus: 'SUBMITTED',
+          templateType: 'NHS_APP',
+          createdAt: '2025-01-13T10:19:25.579Z',
+          updatedAt: '2025-01-13T10:19:25.579Z',
+          lockNumber: 1,
+        }}
+        previewComponent={PreviewTemplateDetailsNhsApp}
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('should render email', () => {
+    const container = render(
+      <PreviewSubmittedTemplate
+        initialState={{
+          id: 'template-id',
+          name: 'Example Email template',
+          message: 'email content',
+          subject: 'email subject',
+          templateStatus: 'SUBMITTED',
+          templateType: 'EMAIL',
+          createdAt: '2025-01-13T10:19:25.579Z',
+          updatedAt: '2025-01-13T10:19:25.579Z',
+          lockNumber: 1,
+        }}
+        previewComponent={PreviewTemplateDetailsEmail}
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('should render sms', () => {
+    const container = render(
+      <PreviewSubmittedTemplate
+        initialState={{
+          id: 'template-id',
+          name: 'SMS template',
+          message: 'SMS content',
+          templateStatus: 'SUBMITTED',
+          templateType: 'SMS',
+          createdAt: '2025-01-13T10:19:25.579Z',
+          updatedAt: '2025-01-13T10:19:25.579Z',
+          lockNumber: 1,
+        }}
+        previewComponent={PreviewTemplateDetailsSms}
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('should render letter', () => {
+    const container = render(
+      <PreviewSubmittedTemplate
+        initialState={{
+          id: 'template-id',
+          clientId: 'client-id',
+          name: 'Example letter',
+          templateStatus: 'SUBMITTED',
+          templateType: 'LETTER',
+          letterType: 'x0',
+          language: 'en',
+          files: {
+            pdfTemplate: {
+              fileName: 'file.pdf',
+              currentVersion: '4C728B7D-A028-4BA2-B180-A63CDD2AE1E9',
+              virusScanStatus: 'PASSED',
+            },
+            testDataCsv: {
+              fileName: 'file.csv',
+              currentVersion: '622AB7FA-29BA-418A-B1B6-1E63FB299269',
+              virusScanStatus: 'PASSED',
+            },
+            proofs: {
+              'a.pdf': {
+                fileName: 'a.pdf',
+                virusScanStatus: 'PASSED',
+                supplier: 'MBA',
+              },
+              'b.pdf': {
+                fileName: 'b.pdf',
+                virusScanStatus: 'PASSED',
+                supplier: 'MBA',
+              },
+              'c.pdf': {
+                fileName: 'c.pdf',
+                virusScanStatus: 'FAILED',
+                supplier: 'MBA',
+              },
+            },
+          },
+          createdAt: '2025-01-13T10:19:25.579Z',
+          updatedAt: '2025-01-13T10:19:25.579Z',
+          lockNumber: 1,
+        }}
+        previewComponent={PreviewTemplateDetailsLetter}
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('should provide back buttons based on source page', () => {
+    useSearchParamsMock.mockReturnValueOnce(
+      new ReadonlyURLSearchParams({
+        sourcePage: '/source',
+      })
+    );
+
+    const container = render(
+      <PreviewSubmittedTemplate
+        initialState={{
+          id: 'template-id',
+          name: 'Example template',
+          message: 'app content',
+          templateStatus: 'NOT_YET_SUBMITTED',
+          templateType: 'NHS_APP',
+          createdAt: '2025-01-13T10:19:25.579Z',
+          updatedAt: '2025-01-13T10:19:25.579Z',
+          lockNumber: 1,
+        }}
+        previewComponent={PreviewTemplateDetailsNhsApp}
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('should omit status when coming from message plans', () => {
+    useSearchParamsMock.mockReturnValueOnce(
+      new ReadonlyURLSearchParams({
+        sourcePage:
+          '/message-plans/choose-nhs-app-template/93b92d43-a8e0-4d90-8e75-924c8a0c8e0d',
+      })
+    );
+
+    const container = render(
+      <PreviewSubmittedTemplate
+        initialState={{
+          id: 'template-id',
+          name: 'Example template',
+          message: 'app content',
+          templateStatus: 'NOT_YET_SUBMITTED',
+          templateType: 'NHS_APP',
+          createdAt: '2025-01-13T10:19:25.579Z',
+          updatedAt: '2025-01-13T10:19:25.579Z',
+          lockNumber: 1,
+        }}
+        previewComponent={PreviewTemplateDetailsNhsApp}
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/__tests__/components/molecules/PreviewTemplateDetails.test.tsx b/frontend/src/__tests__/components/molecules/PreviewTemplateDetails.test.tsx
index 5fae47c9f..380cc4319 100644
--- a/frontend/src/__tests__/components/molecules/PreviewTemplateDetails.test.tsx
+++ b/frontend/src/__tests__/components/molecules/PreviewTemplateDetails.test.tsx
@@ -11,14 +11,13 @@ describe('PreviewTemplateDetailsNhsApp', () => {
         template={{
           id: 'template-id',
           name: 'Example template',
-          message: 'app message message',
+          message: 'app content',
           templateStatus: 'NOT_YET_SUBMITTED',
           templateType: 'NHS_APP',
           createdAt: '2025-01-13T10:19:25.579Z',
           updatedAt: '2025-01-13T10:19:25.579Z',
           lockNumber: 1,
         }}
-        message='app content'
       />
     );
 
@@ -33,16 +32,14 @@ describe('PreviewTemplateDetailsEmail', () => {
         template={{
           id: 'template-id',
           name: 'Example Email template',
-          message: 'email message message',
-          subject: 'subject',
+          message: 'email content',
+          subject: 'email subject',
           templateStatus: 'SUBMITTED',
           templateType: 'EMAIL',
           createdAt: '2025-01-13T10:19:25.579Z',
           updatedAt: '2025-01-13T10:19:25.579Z',
           lockNumber: 1,
         }}
-        message='email content'
-        subject='email subject'
       />
     );
 
@@ -57,14 +54,13 @@ describe('PreviewTemplateDetailsSms', () => {
         template={{
           id: 'template-id',
           name: 'SMS template',
-          message: 'SMS message',
+          message: 'SMS content',
           templateStatus: 'SUBMITTED',
           templateType: 'SMS',
           createdAt: '2025-01-13T10:19:25.579Z',
           updatedAt: '2025-01-13T10:19:25.579Z',
           lockNumber: 1,
         }}
-        message='SMS content'
       />
     );
 
diff --git a/frontend/src/__tests__/components/molecules/ViewEmailTemplate.test.tsx b/frontend/src/__tests__/components/molecules/ViewEmailTemplate.test.tsx
deleted file mode 100644
index f3ef9759c..000000000
--- a/frontend/src/__tests__/components/molecules/ViewEmailTemplate.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { render } from '@testing-library/react';
-import { ViewEmailTemplate } from '@molecules/ViewEmailTemplate/ViewEmailTemplate';
-import { EmailTemplate } from 'nhs-notify-web-template-management-utils';
-
-describe('ViewEmailTemplate component', () => {
-  it('matches submitted snapshot', () => {
-    const container = render(
-      <ViewEmailTemplate
-        initialState={
-          {
-            id: 'template-id',
-            templateType: 'EMAIL',
-            name: 'Example template',
-            templateStatus: 'SUBMITTED',
-            subject: 'Example subject',
-            message: 'Example message',
-            createdAt: '2025-03-28T12:30:54.684Z',
-            updatedAt: '2025-03-28T12:31:54.684Z',
-            lockNumber: 1,
-          } satisfies EmailTemplate
-        }
-      />
-    );
-
-    expect(container.asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/frontend/src/__tests__/components/molecules/ViewLetterTemplate.test.tsx b/frontend/src/__tests__/components/molecules/ViewLetterTemplate.test.tsx
deleted file mode 100644
index 488ca7fc2..000000000
--- a/frontend/src/__tests__/components/molecules/ViewLetterTemplate.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { render } from '@testing-library/react';
-import { LetterTemplate } from 'nhs-notify-web-template-management-utils';
-import { ViewLetterTemplate } from '@molecules/ViewLetterTemplate/ViewLetterTemplate';
-
-describe('ViewLetterTemplate component', () => {
-  it('matches submitted snapshot', () => {
-    const container = render(
-      <ViewLetterTemplate
-        initialState={
-          {
-            templateType: 'LETTER',
-            id: 'template-id',
-            clientId: 'client-id',
-            name: 'Example template',
-            templateStatus: 'SUBMITTED',
-            createdAt: '2025-03-28T12:30:54.684Z',
-            updatedAt: '2025-03-28T12:31:54.684Z',
-            lockNumber: 1,
-            letterType: 'x0',
-            language: 'en',
-            files: {
-              pdfTemplate: {
-                fileName: 'file.pdf',
-                currentVersion: 'a',
-                virusScanStatus: 'PASSED',
-              },
-              proofs: {
-                'supplier-proof.pdf': {
-                  fileName: 'supplier-proof.pdf',
-                  virusScanStatus: 'PASSED',
-                  supplier: 'MBA',
-                },
-              },
-            },
-          } satisfies LetterTemplate
-        }
-      />
-    );
-
-    expect(container.asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/frontend/src/__tests__/components/molecules/ViewNHSAppTemplate.test.tsx b/frontend/src/__tests__/components/molecules/ViewNHSAppTemplate.test.tsx
deleted file mode 100644
index 8f1f1874c..000000000
--- a/frontend/src/__tests__/components/molecules/ViewNHSAppTemplate.test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { render } from '@testing-library/react';
-import { ViewNHSAppTemplate } from '@molecules/ViewNHSAppTemplate/ViewNHSAppTemplate';
-import { NHSAppTemplate } from 'nhs-notify-web-template-management-utils';
-
-describe('ViewNHSAppTemplate component', () => {
-  it('matches submitted snapshot', () => {
-    const container = render(
-      <ViewNHSAppTemplate
-        initialState={
-          {
-            id: 'template-id',
-            name: 'Example template',
-            templateStatus: 'SUBMITTED',
-            message: 'Example message',
-            templateType: 'NHS_APP',
-            createdAt: '2025-03-28T12:30:54.684Z',
-            updatedAt: '2025-03-28T12:31:54.684Z',
-            lockNumber: 1,
-          } satisfies NHSAppTemplate
-        }
-      />
-    );
-
-    expect(container.asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/frontend/src/__tests__/components/molecules/ViewSMSTemplate.test.tsx b/frontend/src/__tests__/components/molecules/ViewSMSTemplate.test.tsx
deleted file mode 100644
index 2caab5248..000000000
--- a/frontend/src/__tests__/components/molecules/ViewSMSTemplate.test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { render } from '@testing-library/react';
-import { ViewSMSTemplate } from '@molecules/ViewSMSTemplate/ViewSMSTemplate';
-import { SMSTemplate } from 'nhs-notify-web-template-management-utils';
-
-describe('ViewNHSAppTemplate component', () => {
-  it('matches submitted snapshot', () => {
-    const container = render(
-      <ViewSMSTemplate
-        initialState={
-          {
-            id: 'template-id',
-            name: 'Example template',
-            templateStatus: 'SUBMITTED',
-            message: 'Example message',
-            templateType: 'SMS',
-            createdAt: '2025-03-28T12:30:54.684Z',
-            updatedAt: '2025-03-28T12:31:54.684Z',
-            lockNumber: 1,
-          } satisfies SMSTemplate
-        }
-      />
-    );
-
-    expect(container.asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/ChannelTemplates.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/ChannelTemplates.test.tsx.snap
new file mode 100644
index 000000000..5922e2e1c
--- /dev/null
+++ b/frontend/src/__tests__/components/molecules/__snapshots__/ChannelTemplates.test.tsx.snap
@@ -0,0 +1,1391 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChannelTemplates renders templates 1`] = `
+<DocumentFragment>
+  <div
+    class="nhsuk-grid-row"
+  >
+    <div
+      class="nhsuk-grid-column-full"
+    >
+      <div
+        class="nhsuk-hint"
+      >
+        Choose one option
+      </div>
+      <div
+        class="nhsuk-form-group"
+      >
+        <div
+          class="nhsuk-radios"
+          id="channelTemplate"
+        >
+          <table
+            class="nhsuk-table-responsive"
+            data-testid="channel-templates-table"
+            id="channel-templates-table"
+          >
+            <thead
+              class="nhsuk-table__head"
+              role="rowgroup"
+            >
+              <tr
+                class="nhsuk-table__row"
+              >
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-select"
+                  scope="col"
+                >
+                  Select
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-name"
+                  scope="col"
+                >
+                  Name
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-type"
+                  scope="col"
+                >
+                  Type
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-last-edited"
+                  scope="col"
+                >
+                  Last edited
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-action"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody
+              class="nhsuk-table__body"
+            >
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="app-template-id-radio"
+                      id="channelTemplate-app-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="app-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-app-template-id"
+                      id="channelTemplate-app-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  app template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  NHS App message
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="app-template-id-preview-link"
+                      href="/message-plans/choose-nhs-app-template/abc/preview-template/app-template-id"
+                      id="preview-template-link-0"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="email-template-id-radio"
+                      id="channelTemplate-email-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="email-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-email-template-id"
+                      id="channelTemplate-email-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  email template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  Email
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="email-template-id-preview-link"
+                      href="/message-plans/choose-email-template/abc/preview-template/email-template-id"
+                      id="preview-template-link-1"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="sms-template-id-radio"
+                      id="channelTemplate-sms-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="sms-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-sms-template-id"
+                      id="channelTemplate-sms-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  sms template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  Text message (SMS)
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="sms-template-id-preview-link"
+                      href="/message-plans/choose-text-message-template/abc/preview-template/sms-template-id"
+                      id="preview-template-link-2"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="letter-template-id-radio"
+                      id="channelTemplate-letter-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="letter-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-letter-template-id"
+                      id="channelTemplate-letter-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  letter template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  Standard letter
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="letter-template-id-preview-link"
+                      href="/message-plans/choose-standard-english-letter-template/abc/preview-template/letter-template-id"
+                      id="preview-template-link-3"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ChannelTemplates renders templates with error state 1`] = `
+<DocumentFragment>
+  <div
+    class="nhsuk-grid-row"
+  >
+    <div
+      class="nhsuk-grid-column-full"
+    >
+      <div
+        class="nhsuk-hint"
+      >
+        Choose one option
+      </div>
+      <div
+        class="nhsuk-form-group nhsuk-form-group--error"
+      >
+        <span
+          class="nhsuk-error-message"
+          id="channelTemplate--error-message"
+        >
+          <span
+            class="nhsuk-u-visually-hidden"
+          >
+            Error: 
+          </span>
+          You must select a template
+        </span>
+        <div
+          aria-describedby="channelTemplate--error-message"
+          class="nhsuk-radios"
+          id="channelTemplate"
+        >
+          <table
+            class="nhsuk-table-responsive"
+            data-testid="channel-templates-table"
+            id="channel-templates-table"
+          >
+            <thead
+              class="nhsuk-table__head"
+              role="rowgroup"
+            >
+              <tr
+                class="nhsuk-table__row"
+              >
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-select"
+                  scope="col"
+                >
+                  Select
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-name"
+                  scope="col"
+                >
+                  Name
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-type"
+                  scope="col"
+                >
+                  Type
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-last-edited"
+                  scope="col"
+                >
+                  Last edited
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-action"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody
+              class="nhsuk-table__body"
+            >
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="app-template-id-radio"
+                      id="channelTemplate-app-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="app-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-app-template-id"
+                      id="channelTemplate-app-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  app template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  NHS App message
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="app-template-id-preview-link"
+                      href="/message-plans/choose-nhs-app-template/abc/preview-template/app-template-id"
+                      id="preview-template-link-0"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="email-template-id-radio"
+                      id="channelTemplate-email-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="email-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-email-template-id"
+                      id="channelTemplate-email-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  email template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  Email
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="email-template-id-preview-link"
+                      href="/message-plans/choose-email-template/abc/preview-template/email-template-id"
+                      id="preview-template-link-1"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="sms-template-id-radio"
+                      id="channelTemplate-sms-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="sms-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-sms-template-id"
+                      id="channelTemplate-sms-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  sms template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  Text message (SMS)
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="sms-template-id-preview-link"
+                      href="/message-plans/choose-text-message-template/abc/preview-template/sms-template-id"
+                      id="preview-template-link-2"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="letter-template-id-radio"
+                      id="channelTemplate-letter-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="letter-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-letter-template-id"
+                      id="channelTemplate-letter-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  letter template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  Standard letter
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="letter-template-id-preview-link"
+                      href="/message-plans/choose-standard-english-letter-template/abc/preview-template/letter-template-id"
+                      id="preview-template-link-3"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ChannelTemplates renders templates with pre-selected template 1`] = `
+<DocumentFragment>
+  <div
+    class="nhsuk-grid-row"
+  >
+    <div
+      class="nhsuk-grid-column-full"
+    >
+      <div
+        class="nhsuk-hint"
+      >
+        Choose one option
+      </div>
+      <div
+        class="nhsuk-form-group"
+      >
+        <div
+          class="nhsuk-radios"
+          id="channelTemplate"
+        >
+          <table
+            class="nhsuk-table-responsive"
+            data-testid="channel-templates-table"
+            id="channel-templates-table"
+          >
+            <thead
+              class="nhsuk-table__head"
+              role="rowgroup"
+            >
+              <tr
+                class="nhsuk-table__row"
+              >
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-select"
+                  scope="col"
+                >
+                  Select
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-name"
+                  scope="col"
+                >
+                  Name
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-type"
+                  scope="col"
+                >
+                  Type
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-last-edited"
+                  scope="col"
+                >
+                  Last edited
+                </th>
+                <th
+                  class="nhsuk-table__header"
+                  data-testid="channel-templates-table-header-template-action"
+                  scope="col"
+                />
+              </tr>
+            </thead>
+            <tbody
+              class="nhsuk-table__body"
+            >
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="app-template-id-radio"
+                      id="channelTemplate-app-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="app-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-app-template-id"
+                      id="channelTemplate-app-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  app template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  NHS App message
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="app-template-id-preview-link"
+                      href="/message-plans/choose-nhs-app-template/abc/preview-template/app-template-id"
+                      id="preview-template-link-0"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      checked=""
+                      class="nhsuk-radios__input"
+                      data-testid="email-template-id-radio"
+                      id="channelTemplate-email-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="email-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-email-template-id"
+                      id="channelTemplate-email-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  email template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  Email
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="email-template-id-preview-link"
+                      href="/message-plans/choose-email-template/abc/preview-template/email-template-id"
+                      id="preview-template-link-1"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="sms-template-id-radio"
+                      id="channelTemplate-sms-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="sms-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-sms-template-id"
+                      id="channelTemplate-sms-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  sms template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  Text message (SMS)
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="sms-template-id-preview-link"
+                      href="/message-plans/choose-text-message-template/abc/preview-template/sms-template-id"
+                      id="preview-template-link-2"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="nhsuk-table__row"
+              >
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Select 
+                  </span>
+                  <div
+                    class="nhsuk-radios__item"
+                  >
+                    <input
+                      class="nhsuk-radios__input"
+                      data-testid="letter-template-id-radio"
+                      id="channelTemplate-letter-template-id"
+                      name="channelTemplate"
+                      type="radio"
+                      value="letter-template-id"
+                    />
+                    <label
+                      class="nhsuk-label nhsuk-radios__label"
+                      for="channelTemplate-letter-template-id"
+                      id="channelTemplate-letter-template-id--label"
+                    >
+                       
+                    </label>
+                  </div>
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Name 
+                  </span>
+                  letter template name
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Type 
+                  </span>
+                  Standard letter
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                    Last edited 
+                  </span>
+                  13th Jan 2025
+                  <br />
+                  10:19
+                </td>
+                <td
+                  class="nhsuk-table__cell"
+                  role="cell"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="nhsuk-table-responsive__heading"
+                  >
+                     
+                  </span>
+                  <div
+                    class="actionLinksWrapper"
+                  >
+                    <a
+                      aria-label="Preview"
+                      data-testid="letter-template-id-preview-link"
+                      href="/message-plans/choose-standard-english-letter-template/abc/preview-template/letter-template-id"
+                      id="preview-template-link-3"
+                    >
+                      Preview
+                    </a>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/PreviewSubmittedTemplate.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewSubmittedTemplate.test.tsx.snap
new file mode 100644
index 000000000..364d3fdd9
--- /dev/null
+++ b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewSubmittedTemplate.test.tsx.snap
@@ -0,0 +1,993 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PreviewSubmittedTemplate component should omit status when coming from message plans 1`] = `
+<DocumentFragment>
+  <a
+    class="nhsuk-back-link"
+    href="/message-templates"
+  >
+    Back to all templates
+  </a>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <div
+          class="nhsuk-u-reading-width"
+        >
+          <span
+            class="nhsuk-caption-l"
+          >
+            Template
+          </span>
+          <h1
+            class="preview__heading"
+            data-testid="preview-message__heading"
+          >
+            Example template
+          </h1>
+        </div>
+        <div
+          class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
+        >
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template ID
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                template-id
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Type
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                NHS App message
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Status
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <strong
+                  class="nhsuk-tag nhsuk-tag--green"
+                  data-test-id="status-tag-not-yet-submitted"
+                >
+                  Draft
+                </strong>
+              </dd>
+            </div>
+          </dl>
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                <div
+                  data-testid="preview__heading-0"
+                  id="preview-heading-message"
+                >
+                  Message
+                </div>
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <div
+                  class="preview__content"
+                  data-testid="preview__content-0"
+                  id="preview-content-message"
+                >
+                  <p>
+                    app content
+                  </p>
+                  
+
+                </div>
+              </dd>
+            </div>
+          </dl>
+        </div>
+        <p>
+          This template cannot be edited because it has been submitted.
+        </p>
+        <p>
+          If you want to change a submitted or live template, you must create a new template to replace it.
+        </p>
+        <p>
+          <a
+            href="/message-templates"
+          >
+            Back to all templates
+          </a>
+        </p>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`PreviewSubmittedTemplate component should provide back buttons based on source page 1`] = `
+<DocumentFragment>
+  <a
+    class="nhsuk-back-link"
+    href="/message-templates"
+  >
+    Back to all templates
+  </a>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <div
+          class="nhsuk-u-reading-width"
+        >
+          <span
+            class="nhsuk-caption-l"
+          >
+            Template
+          </span>
+          <h1
+            class="preview__heading"
+            data-testid="preview-message__heading"
+          >
+            Example template
+          </h1>
+        </div>
+        <div
+          class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
+        >
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template ID
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                template-id
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Type
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                NHS App message
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Status
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <strong
+                  class="nhsuk-tag nhsuk-tag--green"
+                  data-test-id="status-tag-not-yet-submitted"
+                >
+                  Draft
+                </strong>
+              </dd>
+            </div>
+          </dl>
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                <div
+                  data-testid="preview__heading-0"
+                  id="preview-heading-message"
+                >
+                  Message
+                </div>
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <div
+                  class="preview__content"
+                  data-testid="preview__content-0"
+                  id="preview-content-message"
+                >
+                  <p>
+                    app content
+                  </p>
+                  
+
+                </div>
+              </dd>
+            </div>
+          </dl>
+        </div>
+        <p>
+          This template cannot be edited because it has been submitted.
+        </p>
+        <p>
+          If you want to change a submitted or live template, you must create a new template to replace it.
+        </p>
+        <p>
+          <a
+            href="/message-templates"
+          >
+            Back to all templates
+          </a>
+        </p>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`PreviewSubmittedTemplate component should render app message 1`] = `
+<DocumentFragment>
+  <a
+    class="nhsuk-back-link"
+    href="/message-templates"
+  >
+    Back to all templates
+  </a>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <div
+          class="nhsuk-u-reading-width"
+        >
+          <span
+            class="nhsuk-caption-l"
+          >
+            Template
+          </span>
+          <h1
+            class="preview__heading"
+            data-testid="preview-message__heading"
+          >
+            Example template
+          </h1>
+        </div>
+        <div
+          class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
+        >
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template ID
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                template-id
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Type
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                NHS App message
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Status
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <strong
+                  class="nhsuk-tag nhsuk-tag--grey"
+                  data-test-id="status-tag-submitted"
+                >
+                  Submitted
+                </strong>
+              </dd>
+            </div>
+          </dl>
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                <div
+                  data-testid="preview__heading-0"
+                  id="preview-heading-message"
+                >
+                  Message
+                </div>
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <div
+                  class="preview__content"
+                  data-testid="preview__content-0"
+                  id="preview-content-message"
+                >
+                  <p>
+                    app content
+                  </p>
+                  
+
+                </div>
+              </dd>
+            </div>
+          </dl>
+        </div>
+        <p>
+          This template cannot be edited because it has been submitted.
+        </p>
+        <p>
+          If you want to change a submitted or live template, you must create a new template to replace it.
+        </p>
+        <p>
+          <a
+            href="/message-templates"
+          >
+            Back to all templates
+          </a>
+        </p>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`PreviewSubmittedTemplate component should render email 1`] = `
+<DocumentFragment>
+  <a
+    class="nhsuk-back-link"
+    href="/message-templates"
+  >
+    Back to all templates
+  </a>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <div
+          class="nhsuk-u-reading-width"
+        >
+          <span
+            class="nhsuk-caption-l"
+          >
+            Template
+          </span>
+          <h1
+            class="preview__heading"
+            data-testid="preview-message__heading"
+          >
+            Example Email template
+          </h1>
+        </div>
+        <div
+          class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
+        >
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template ID
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                template-id
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Type
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                Email
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Status
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <strong
+                  class="nhsuk-tag nhsuk-tag--grey"
+                  data-test-id="status-tag-submitted"
+                >
+                  Submitted
+                </strong>
+              </dd>
+            </div>
+          </dl>
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                <div
+                  data-testid="preview__heading-0"
+                  id="preview-heading-subject"
+                >
+                  Subject
+                </div>
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <div
+                  class="preview__content"
+                  data-testid="preview__content-0"
+                  id="preview-content-subject"
+                >
+                  email subject
+                </div>
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                <div
+                  data-testid="preview__heading-1"
+                  id="preview-heading-message"
+                >
+                  Message
+                </div>
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <div
+                  class="preview__content"
+                  data-testid="preview__content-1"
+                  id="preview-content-message"
+                >
+                  <p>
+                    email content
+                  </p>
+                  
+
+                </div>
+              </dd>
+            </div>
+          </dl>
+        </div>
+        <p>
+          This template cannot be edited because it has been submitted.
+        </p>
+        <p>
+          If you want to change a submitted or live template, you must create a new template to replace it.
+        </p>
+        <p>
+          <a
+            href="/message-templates"
+          >
+            Back to all templates
+          </a>
+        </p>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`PreviewSubmittedTemplate component should render letter 1`] = `
+<DocumentFragment>
+  <a
+    class="nhsuk-back-link"
+    href="/message-templates"
+  >
+    Back to all templates
+  </a>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <div
+          class="nhsuk-u-reading-width"
+        >
+          <span
+            class="nhsuk-caption-l"
+          >
+            Template
+          </span>
+          <h1
+            class="preview__heading"
+            data-testid="preview-message__heading"
+          >
+            Example letter
+          </h1>
+        </div>
+        <div
+          class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
+        >
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template ID
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                template-id
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Type
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                Standard letter
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Status
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <strong
+                  class="nhsuk-tag nhsuk-tag--grey"
+                  data-test-id="status-tag-submitted"
+                >
+                  Submitted
+                </strong>
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template file
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <div
+                  class="container"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon"
+                    fill="none"
+                    height="26"
+                    viewBox="0 0 20 26"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
+                      fill="#4C6272"
+                    />
+                  </svg>
+                  <p
+                    class="text"
+                  >
+                    file.pdf
+                  </p>
+                </div>
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Example personalisation file
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <div
+                  class="container"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="icon"
+                    fill="none"
+                    height="26"
+                    viewBox="0 0 20 26"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
+                      fill="#4C6272"
+                    />
+                  </svg>
+                  <p
+                    class="text"
+                  >
+                    file.csv
+                  </p>
+                </div>
+              </dd>
+            </div>
+          </dl>
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template proof files
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <ul
+                  class="proofs"
+                >
+                  <li>
+                    <a
+                      data-testid="proof-link_a.pdf"
+                      href="/templates/files/client-id/proofs/template-id/a.pdf"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      <div
+                        class="container"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="icon"
+                          fill="none"
+                          height="26"
+                          viewBox="0 0 20 26"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
+                            fill="#4C6272"
+                          />
+                        </svg>
+                        <p
+                          class="text"
+                        >
+                          a.pdf
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      data-testid="proof-link_b.pdf"
+                      href="/templates/files/client-id/proofs/template-id/b.pdf"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      <div
+                        class="container"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="icon"
+                          fill="none"
+                          height="26"
+                          viewBox="0 0 20 26"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
+                            fill="#4C6272"
+                          />
+                        </svg>
+                        <p
+                          class="text"
+                        >
+                          b.pdf
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </dd>
+            </div>
+          </dl>
+        </div>
+        <p>
+          If you want to change a submitted or live template, you must create a new template to replace it.
+        </p>
+        <p>
+          <a
+            href="/message-templates"
+          >
+            Back to all templates
+          </a>
+        </p>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`PreviewSubmittedTemplate component should render sms 1`] = `
+<DocumentFragment>
+  <a
+    class="nhsuk-back-link"
+    href="/message-templates"
+  >
+    Back to all templates
+  </a>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-full"
+      >
+        <div
+          class="nhsuk-u-reading-width"
+        >
+          <span
+            class="nhsuk-caption-l"
+          >
+            Template
+          </span>
+          <h1
+            class="preview__heading"
+            data-testid="preview-message__heading"
+          >
+            SMS template
+          </h1>
+        </div>
+        <div
+          class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
+        >
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Template ID
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                template-id
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Type
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                Text message (SMS)
+              </dd>
+            </div>
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                Status
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <strong
+                  class="nhsuk-tag nhsuk-tag--grey"
+                  data-test-id="status-tag-submitted"
+                >
+                  Submitted
+                </strong>
+              </dd>
+            </div>
+          </dl>
+          <dl
+            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
+          >
+            <div
+              class="nhsuk-summary-list__row"
+            >
+              <dt
+                class="nhsuk-summary-list__key"
+              >
+                <div
+                  data-testid="preview__heading-0"
+                  id="preview-heading-message"
+                >
+                  Message
+                </div>
+              </dt>
+              <dd
+                class="nhsuk-summary-list__value"
+              >
+                <div
+                  class="preview__content"
+                  data-testid="preview__content-0"
+                  id="preview-content-message"
+                >
+                  <p>
+                    SMS content
+                  </p>
+                  
+
+                </div>
+              </dd>
+            </div>
+          </dl>
+        </div>
+        <p>
+          This template cannot be edited because it has been submitted.
+        </p>
+        <p>
+          If you want to change a submitted or live template, you must create a new template to replace it.
+        </p>
+        <p>
+          <a
+            href="/message-templates"
+          >
+            Back to all templates
+          </a>
+        </p>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateDetails.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateDetails.test.tsx.snap
index d62cb5de1..60fed26e9 100644
--- a/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateDetails.test.tsx.snap
+++ b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateDetails.test.tsx.snap
@@ -120,7 +120,11 @@ exports[`PreviewTemplateDetailsEmail matches snapshot 1`] = `
             data-testid="preview__content-1"
             id="preview-content-message"
           >
-            email content
+            <p>
+              email content
+            </p>
+            
+
           </div>
         </dd>
       </div>
@@ -946,7 +950,11 @@ exports[`PreviewTemplateDetailsNhsApp matches snapshot 1`] = `
             data-testid="preview__content-0"
             id="preview-content-message"
           >
-            app content
+            <p>
+              app content
+            </p>
+            
+
           </div>
         </dd>
       </div>
@@ -1050,7 +1058,11 @@ exports[`PreviewTemplateDetailsSms matches snapshot 1`] = `
             data-testid="preview__content-0"
             id="preview-content-message"
           >
-            SMS content
+            <p>
+              SMS content
+            </p>
+            
+
           </div>
         </dd>
       </div>
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/ViewLetterTemplate.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/ViewLetterTemplate.test.tsx.snap
deleted file mode 100644
index 4cde50502..000000000
--- a/frontend/src/__tests__/components/molecules/__snapshots__/ViewLetterTemplate.test.tsx.snap
+++ /dev/null
@@ -1,197 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ViewLetterTemplate component matches submitted snapshot 1`] = `
-<DocumentFragment>
-  <a
-    class="nhsuk-back-link"
-    data-testid="back-to-templates-link"
-    href="/message-templates"
-  >
-    Back to all templates
-  </a>
-  <main
-    class="nhsuk-main-wrapper"
-    id="maincontent"
-    role="main"
-  >
-    <div
-      class="nhsuk-grid-row"
-    >
-      <div
-        class="nhsuk-grid-column-full"
-      >
-        <div
-          class="nhsuk-u-reading-width"
-        >
-          <span
-            class="nhsuk-caption-l"
-          >
-            Template
-          </span>
-          <h1
-            class="preview__heading"
-            data-testid="preview-message__heading"
-          >
-            Example template
-          </h1>
-        </div>
-        <div
-          class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
-        >
-          <dl
-            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
-          >
-            <div
-              class="nhsuk-summary-list__row"
-            >
-              <dt
-                class="nhsuk-summary-list__key"
-              >
-                Template ID
-              </dt>
-              <dd
-                class="nhsuk-summary-list__value"
-              >
-                template-id
-              </dd>
-            </div>
-            <div
-              class="nhsuk-summary-list__row"
-            >
-              <dt
-                class="nhsuk-summary-list__key"
-              >
-                Type
-              </dt>
-              <dd
-                class="nhsuk-summary-list__value"
-              >
-                Standard letter
-              </dd>
-            </div>
-            <div
-              class="nhsuk-summary-list__row"
-            >
-              <dt
-                class="nhsuk-summary-list__key"
-              >
-                Status
-              </dt>
-              <dd
-                class="nhsuk-summary-list__value"
-              >
-                <strong
-                  class="nhsuk-tag nhsuk-tag--grey"
-                  data-test-id="status-tag-submitted"
-                >
-                  Submitted
-                </strong>
-              </dd>
-            </div>
-            <div
-              class="nhsuk-summary-list__row"
-            >
-              <dt
-                class="nhsuk-summary-list__key"
-              >
-                Template file
-              </dt>
-              <dd
-                class="nhsuk-summary-list__value"
-              >
-                <div
-                  class="container"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="icon"
-                    fill="none"
-                    height="26"
-                    viewBox="0 0 20 26"
-                    width="20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
-                      fill="#4C6272"
-                    />
-                  </svg>
-                  <p
-                    class="text"
-                  >
-                    file.pdf
-                  </p>
-                </div>
-              </dd>
-            </div>
-          </dl>
-          <dl
-            class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
-          >
-            <div
-              class="nhsuk-summary-list__row"
-            >
-              <dt
-                class="nhsuk-summary-list__key"
-              >
-                Template proof files
-              </dt>
-              <dd
-                class="nhsuk-summary-list__value"
-              >
-                <ul
-                  class="proofs"
-                >
-                  <li>
-                    <a
-                      data-testid="proof-link_supplier-proof.pdf"
-                      href="/templates/files/client-id/proofs/template-id/supplier-proof.pdf"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      <div
-                        class="container"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="icon"
-                          fill="none"
-                          height="26"
-                          viewBox="0 0 20 26"
-                          width="20"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
-                            fill="#4C6272"
-                          />
-                        </svg>
-                        <p
-                          class="text"
-                        >
-                          supplier-proof.pdf
-                        </p>
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-              </dd>
-            </div>
-          </dl>
-        </div>
-        <p>
-          If you want to change a submitted or live template, you must create a new template to replace it.
-        </p>
-        <p>
-          <a
-            data-testid="back-to-templates-link-bottom"
-            href="/message-templates"
-          >
-            Back to all templates
-          </a>
-        </p>
-      </div>
-    </div>
-  </main>
-</DocumentFragment>
-`;
diff --git a/frontend/src/__tests__/components/organisms/__snapshots__/CreateEditMessagePlan.test.tsx.snap b/frontend/src/__tests__/components/organisms/__snapshots__/CreateEditMessagePlan.test.tsx.snap
index ad8fbfad9..23e89617a 100644
--- a/frontend/src/__tests__/components/organisms/__snapshots__/CreateEditMessagePlan.test.tsx.snap
+++ b/frontend/src/__tests__/components/organisms/__snapshots__/CreateEditMessagePlan.test.tsx.snap
@@ -665,7 +665,7 @@ exports[`CreateEditMessagePlan should match snapshot for a typical message plan
                   class="nhsuk-u-margin-bottom-2"
                   data-testid="template-name-NHSAPP"
                 >
-                  name
+                  app template name
                 </p>
                 <ul
                   class="channel-template-actions"
@@ -836,7 +836,7 @@ exports[`CreateEditMessagePlan should match snapshot for a typical message plan
                   class="nhsuk-u-margin-bottom-2"
                   data-testid="template-name-EMAIL"
                 >
-                  name
+                  email template name
                 </p>
                 <ul
                   class="channel-template-actions"
@@ -1007,7 +1007,7 @@ exports[`CreateEditMessagePlan should match snapshot for a typical message plan
                   class="nhsuk-u-margin-bottom-2"
                   data-testid="template-name-LETTER"
                 >
-                  name
+                  letter template name
                 </p>
                 <ul
                   class="channel-template-actions"
diff --git a/frontend/src/__tests__/helpers/helpers.ts b/frontend/src/__tests__/helpers/helpers.ts
index 5a587a677..ae9736c2d 100644
--- a/frontend/src/__tests__/helpers/helpers.ts
+++ b/frontend/src/__tests__/helpers/helpers.ts
@@ -1,5 +1,5 @@
 import { mockDeep } from 'jest-mock-extended';
-import { TemplateDto } from 'nhs-notify-backend-client';
+import { RoutingConfig, TemplateDto } from 'nhs-notify-backend-client';
 
 function* iteratorFromList<T>(list: T[]): IterableIterator<T> {
   for (const item of list) {
@@ -18,10 +18,10 @@ export const getMockFormData = (formData: Record<string, string | File>) =>
   });
 
 export const NHS_APP_TEMPLATE: TemplateDto = {
-  id: 'template-id',
+  id: 'app-template-id',
   templateType: 'NHS_APP',
   templateStatus: 'NOT_YET_SUBMITTED',
-  name: 'name',
+  name: 'app template name',
   message: 'message',
   createdAt: '2025-01-13T10:19:25.579Z',
   updatedAt: '2025-01-13T10:19:25.579Z',
@@ -29,10 +29,10 @@ export const NHS_APP_TEMPLATE: TemplateDto = {
 } as const;
 
 export const EMAIL_TEMPLATE: TemplateDto = {
-  id: 'template-id',
+  id: 'email-template-id',
   templateType: 'EMAIL',
   templateStatus: 'NOT_YET_SUBMITTED',
-  name: 'name',
+  name: 'email template name',
   message: 'message',
   subject: 'subject',
   createdAt: '2025-01-13T10:19:25.579Z',
@@ -41,10 +41,10 @@ export const EMAIL_TEMPLATE: TemplateDto = {
 } as const;
 
 export const SMS_TEMPLATE: TemplateDto = {
-  id: 'template-id',
+  id: 'sms-template-id',
   templateType: 'SMS',
   templateStatus: 'NOT_YET_SUBMITTED',
-  name: 'name',
+  name: 'sms template name',
   message: 'message',
   createdAt: '2025-01-13T10:19:25.579Z',
   updatedAt: '2025-01-13T10:19:25.579Z',
@@ -52,7 +52,7 @@ export const SMS_TEMPLATE: TemplateDto = {
 } as const;
 
 export const LETTER_TEMPLATE: TemplateDto = {
-  id: 'template-id',
+  id: 'letter-template-id',
   templateType: 'LETTER',
   templateStatus: 'NOT_YET_SUBMITTED',
   letterType: 'x0',
@@ -64,8 +64,45 @@ export const LETTER_TEMPLATE: TemplateDto = {
       virusScanStatus: 'PASSED',
     },
   },
-  name: 'name',
+  name: 'letter template name',
   createdAt: '2025-01-13T10:19:25.579Z',
   updatedAt: '2025-01-13T10:19:25.579Z',
   lockNumber: 1,
 } as const;
+
+export const ROUTING_CONFIG: RoutingConfig = {
+  id: 'fbb81055-79b9-4759-ac07-d191ae57be34',
+  name: 'Autumn Campaign Plan',
+  status: 'DRAFT' as const,
+  clientId: 'client-1',
+  campaignId: 'campaign-2',
+  createdAt: '2025-01-13T10:19:25.579Z',
+  updatedAt: '2025-01-13T10:19:25.579Z',
+  cascadeGroupOverrides: [],
+  cascade: [
+    {
+      cascadeGroups: ['standard'],
+      channel: 'NHSAPP',
+      channelType: 'primary',
+      defaultTemplateId: NHS_APP_TEMPLATE.id,
+    },
+    {
+      cascadeGroups: ['standard'],
+      channel: 'EMAIL',
+      channelType: 'primary',
+      defaultTemplateId: EMAIL_TEMPLATE.id,
+    },
+    {
+      cascadeGroups: ['standard'],
+      channel: 'SMS',
+      channelType: 'primary',
+      defaultTemplateId: SMS_TEMPLATE.id,
+    },
+    {
+      cascadeGroups: ['standard'],
+      channel: 'LETTER',
+      channelType: 'primary',
+      defaultTemplateId: LETTER_TEMPLATE.id,
+    },
+  ],
+};
diff --git a/frontend/src/__tests__/utils/form-actions.test.ts b/frontend/src/__tests__/utils/form-actions.test.ts
index 60f0ab629..ebbd8c183 100644
--- a/frontend/src/__tests__/utils/form-actions.test.ts
+++ b/frontend/src/__tests__/utils/form-actions.test.ts
@@ -18,7 +18,7 @@ import {
   createRoutingConfig,
 } from '@utils/form-actions';
 import { getSessionServer } from '@utils/amplify-utils';
-import { TemplateDto } from 'nhs-notify-backend-client';
+import { TemplateDto, TemplateStatus } from 'nhs-notify-backend-client';
 import { templateApiClient } from 'nhs-notify-backend-client/src/template-api-client';
 import { routingConfigurationApiClient } from 'nhs-notify-backend-client/src/routing-config-api-client';
 import { randomUUID } from 'node:crypto';
@@ -470,7 +470,10 @@ describe('form-actions', () => {
 
     const response = await getTemplates();
 
-    expect(mockedTemplateClient.listTemplates).toHaveBeenCalledWith('token');
+    expect(mockedTemplateClient.listTemplates).toHaveBeenCalledWith(
+      'token',
+      undefined
+    );
 
     expect(response).toEqual([responseData]);
   });
@@ -539,6 +542,39 @@ describe('form-actions', () => {
     expect(actualOrder).toEqual(expectedOrder);
   });
 
+  test('getTemplates - invalid templates are not listed', async () => {
+    const validTemplate: TemplateDto = {
+      templateType: 'SMS',
+      templateStatus: 'SUBMITTED',
+      name: 'Template',
+      message: 'Message',
+      createdAt: '2020-01-01T00:00:00.000Z',
+      id: '02',
+      updatedAt: '2021-01-01T00:00:00.000Z',
+      lockNumber: 1,
+    };
+
+    mockedTemplateClient.listTemplates.mockResolvedValueOnce({
+      data: [
+        {
+          templateType: 'SMS',
+          templateStatus: undefined as unknown as TemplateStatus,
+          name: 'Template',
+          message: 'Message',
+          createdAt: '2020-01-01T00:00:00.000Z',
+          id: '01',
+          updatedAt: '2021-01-01T00:00:00.000Z',
+          lockNumber: 1,
+        },
+        validTemplate,
+      ],
+    });
+
+    const response = await getTemplates();
+
+    expect(response).toEqual([validTemplate]);
+  });
+
   describe('setTemplateToSubmitted', () => {
     test('submitTemplate successfully', async () => {
       const responseData = {
diff --git a/frontend/src/__tests__/utils/message-plans.test.ts b/frontend/src/__tests__/utils/message-plans.test.ts
index 380e53e55..5fa9089c3 100644
--- a/frontend/src/__tests__/utils/message-plans.test.ts
+++ b/frontend/src/__tests__/utils/message-plans.test.ts
@@ -251,17 +251,13 @@ describe('Message plans actions', () => {
       const completedCount = await countRoutingConfigs('COMPLETED');
 
       expect(draftCount).toEqual(1);
-      expect(routingConfigApiMock.count).toHaveBeenNthCalledWith(
-        1,
-        'token',
-        'DRAFT'
-      );
+      expect(routingConfigApiMock.count).toHaveBeenNthCalledWith(1, 'token', {
+        status: 'DRAFT',
+      });
       expect(completedCount).toEqual(5);
-      expect(routingConfigApiMock.count).toHaveBeenNthCalledWith(
-        2,
-        'token',
-        'COMPLETED'
-      );
+      expect(routingConfigApiMock.count).toHaveBeenNthCalledWith(2, 'token', {
+        status: 'COMPLETED',
+      });
     });
   });
 
@@ -396,19 +392,17 @@ describe('Message plans actions', () => {
         },
       });
 
-      const response = await updateRoutingConfig(
-        validRoutingConfigId,
-        baseConfig
-      );
+      await expect(
+        updateRoutingConfig(validRoutingConfigId, baseConfig)
+      ).rejects.toThrow('Failed to update message plan');
 
       expect(routingConfigApiMock.update).toHaveBeenCalledWith(
         'mock-token',
         validRoutingConfigId,
         baseConfig
       );
-      expect(response).toBeUndefined();
       expect(loggerMock.error).toHaveBeenCalledWith(
-        'Failed to get routing configuration',
+        'Failed to update message plan',
         expect.objectContaining({
           errorMeta: expect.objectContaining({ code: 400 }),
         })
@@ -432,7 +426,7 @@ describe('Message plans actions', () => {
       );
       expect(response).toBeUndefined();
       expect(loggerMock.error).toHaveBeenCalledWith(
-        'Invalid routing configuration object',
+        'Invalid message plan object',
         expect.any(Object)
       );
     });
diff --git a/frontend/src/app/copy-template/[templateId]/page.tsx b/frontend/src/app/copy-template/[templateId]/page.tsx
index 20334e4a4..62889fe79 100644
--- a/frontend/src/app/copy-template/[templateId]/page.tsx
+++ b/frontend/src/app/copy-template/[templateId]/page.tsx
@@ -2,16 +2,18 @@
 
 import { redirect, RedirectType } from 'next/navigation';
 import { CopyTemplate } from '@forms/CopyTemplate/CopyTemplate';
-import { TemplatePageProps } from 'nhs-notify-web-template-management-utils';
+import {
+  TemplatePageProps,
+  validateTemplate,
+} from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
-import { isTemplateDtoValid } from 'nhs-notify-backend-client';
 
 const CopyTemplatePage = async (props: TemplatePageProps) => {
   const { templateId } = await props.params;
 
   const template = await getTemplate(templateId);
 
-  const validatedTemplate = isTemplateDtoValid(template);
+  const validatedTemplate = validateTemplate(template);
 
   if (!validatedTemplate) {
     return redirect('/invalid-template', RedirectType.replace);
diff --git a/frontend/src/app/message-plans/choose-email-template/[routingConfigId]/page.tsx b/frontend/src/app/message-plans/choose-email-template/[routingConfigId]/page.tsx
new file mode 100644
index 000000000..cb041312c
--- /dev/null
+++ b/frontend/src/app/message-plans/choose-email-template/[routingConfigId]/page.tsx
@@ -0,0 +1,48 @@
+'use server';
+
+import { Metadata } from 'next';
+import { MessagePlanPageProps } from 'nhs-notify-web-template-management-utils';
+import { getRoutingConfig } from '@utils/message-plans';
+import { redirect, RedirectType } from 'next/navigation';
+
+import content from '@content/content';
+import { ChooseChannelTemplate } from '@forms/ChooseChannelTemplate';
+import { getTemplates } from '@utils/form-actions';
+const { pageTitle, pageHeading } = content.pages.chooseEmailTemplate;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: pageTitle,
+  };
+}
+
+export default async function ChooseEmailTemplate(props: MessagePlanPageProps) {
+  const { routingConfigId } = await props.params;
+
+  const messagePlan = await getRoutingConfig(routingConfigId);
+
+  if (!messagePlan) {
+    return redirect('/message-plans/invalid', RedirectType.replace);
+  }
+
+  const cascadeIndex = messagePlan.cascade.findIndex(
+    (item) => item.channel === 'EMAIL'
+  );
+
+  if (cascadeIndex === -1) {
+    return redirect('/message-plans/invalid', RedirectType.replace);
+  }
+
+  const availableTemplateList = await getTemplates({
+    templateType: 'EMAIL',
+  });
+
+  return (
+    <ChooseChannelTemplate
+      messagePlan={messagePlan}
+      pageHeading={pageHeading}
+      templateList={availableTemplateList}
+      cascadeIndex={cascadeIndex}
+    />
+  );
+}
diff --git a/frontend/src/app/message-plans/choose-email-template/[routingConfigId]/preview-template/[templateId]/page.tsx b/frontend/src/app/message-plans/choose-email-template/[routingConfigId]/preview-template/[templateId]/page.tsx
new file mode 100644
index 000000000..65ad87211
--- /dev/null
+++ b/frontend/src/app/message-plans/choose-email-template/[routingConfigId]/preview-template/[templateId]/page.tsx
@@ -0,0 +1,44 @@
+'use server';
+
+import {
+  MessagePlanAndTemplatePageProps,
+  validateEmailTemplate,
+} from 'nhs-notify-web-template-management-utils';
+import { getTemplate } from '@utils/form-actions';
+import { redirect, RedirectType } from 'next/navigation';
+import { Metadata } from 'next';
+import content from '@content/content';
+import PreviewTemplateDetailsEmail from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail';
+import { PreviewTemplateFromMessagePlan } from '@molecules/PreviewTemplateFromMessagePlan/PreviewTemplateFromMessagePlan';
+
+const { pageTitle } = content.components.previewEmailTemplate;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: pageTitle,
+  };
+}
+
+const PreviewEmailTemplateFromMessagePlan = async (
+  props: MessagePlanAndTemplatePageProps
+) => {
+  const { templateId, routingConfigId } = await props.params;
+
+  const template = await getTemplate(templateId);
+
+  const validatedTemplate = validateEmailTemplate(template);
+
+  if (!validatedTemplate) {
+    return redirect('/invalid-template', RedirectType.replace);
+  }
+
+  return (
+    <PreviewTemplateFromMessagePlan
+      initialState={validatedTemplate}
+      previewComponent={PreviewTemplateDetailsEmail}
+      routingConfigId={routingConfigId}
+    />
+  );
+};
+
+export default PreviewEmailTemplateFromMessagePlan;
diff --git a/frontend/src/app/message-plans/choose-nhs-app-template/[routingConfigId]/page.tsx b/frontend/src/app/message-plans/choose-nhs-app-template/[routingConfigId]/page.tsx
new file mode 100644
index 000000000..d0156608a
--- /dev/null
+++ b/frontend/src/app/message-plans/choose-nhs-app-template/[routingConfigId]/page.tsx
@@ -0,0 +1,50 @@
+'use server';
+
+import { Metadata } from 'next';
+import { MessagePlanPageProps } from 'nhs-notify-web-template-management-utils';
+import { getRoutingConfig } from '@utils/message-plans';
+import { redirect, RedirectType } from 'next/navigation';
+
+import content from '@content/content';
+import { ChooseChannelTemplate } from '@forms/ChooseChannelTemplate';
+import { getTemplates } from '@utils/form-actions';
+const { pageTitle, pageHeading } = content.pages.chooseNhsAppTemplate;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: pageTitle,
+  };
+}
+
+export default async function ChooseNhsAppTemplate(
+  props: MessagePlanPageProps
+) {
+  const { routingConfigId } = await props.params;
+
+  const messagePlan = await getRoutingConfig(routingConfigId);
+
+  if (!messagePlan) {
+    return redirect('/message-plans/invalid', RedirectType.replace);
+  }
+
+  const cascadeIndex = messagePlan.cascade.findIndex(
+    (item) => item.channel === 'NHSAPP'
+  );
+
+  if (cascadeIndex === -1) {
+    return redirect('/message-plans/invalid', RedirectType.replace);
+  }
+
+  const availableTemplateList = await getTemplates({
+    templateType: 'NHS_APP',
+  });
+
+  return (
+    <ChooseChannelTemplate
+      messagePlan={messagePlan}
+      pageHeading={pageHeading}
+      templateList={availableTemplateList}
+      cascadeIndex={cascadeIndex}
+    />
+  );
+}
diff --git a/frontend/src/app/message-plans/choose-nhs-app-template/[routingConfigId]/preview-template/[templateId]/page.tsx b/frontend/src/app/message-plans/choose-nhs-app-template/[routingConfigId]/preview-template/[templateId]/page.tsx
new file mode 100644
index 000000000..b929efed8
--- /dev/null
+++ b/frontend/src/app/message-plans/choose-nhs-app-template/[routingConfigId]/preview-template/[templateId]/page.tsx
@@ -0,0 +1,44 @@
+'use server';
+
+import {
+  MessagePlanAndTemplatePageProps,
+  validateNHSAppTemplate,
+} from 'nhs-notify-web-template-management-utils';
+import { getTemplate } from '@utils/form-actions';
+import { redirect, RedirectType } from 'next/navigation';
+import { Metadata } from 'next';
+import content from '@content/content';
+import { PreviewTemplateFromMessagePlan } from '@molecules/PreviewTemplateFromMessagePlan/PreviewTemplateFromMessagePlan';
+import PreviewTemplateDetailsNhsApp from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp';
+
+const { pageTitle } = content.components.previewNHSAppTemplate;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: pageTitle,
+  };
+}
+
+const PreviewNhsAppTemplateFromMessagePlan = async (
+  props: MessagePlanAndTemplatePageProps
+) => {
+  const { templateId, routingConfigId } = await props.params;
+
+  const template = await getTemplate(templateId);
+
+  const validatedTemplate = validateNHSAppTemplate(template);
+
+  if (!validatedTemplate) {
+    return redirect('/invalid-template', RedirectType.replace);
+  }
+
+  return (
+    <PreviewTemplateFromMessagePlan
+      initialState={validatedTemplate}
+      previewComponent={PreviewTemplateDetailsNhsApp}
+      routingConfigId={routingConfigId}
+    />
+  );
+};
+
+export default PreviewNhsAppTemplateFromMessagePlan;
diff --git a/frontend/src/app/message-plans/choose-standard-english-letter-template/[routingConfigId]/page.tsx b/frontend/src/app/message-plans/choose-standard-english-letter-template/[routingConfigId]/page.tsx
new file mode 100644
index 000000000..20f655bda
--- /dev/null
+++ b/frontend/src/app/message-plans/choose-standard-english-letter-template/[routingConfigId]/page.tsx
@@ -0,0 +1,53 @@
+'use server';
+
+import { Metadata } from 'next';
+import { MessagePlanPageProps } from 'nhs-notify-web-template-management-utils';
+import { getRoutingConfig } from '@utils/message-plans';
+import { redirect, RedirectType } from 'next/navigation';
+
+import content from '@content/content';
+import { ChooseChannelTemplate } from '@forms/ChooseChannelTemplate';
+import { getTemplates } from '@utils/form-actions';
+const { pageTitle, pageHeading } =
+  content.pages.chooseStandardEnglishLetterTemplate;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: pageTitle,
+  };
+}
+
+export default async function ChooseStandardEnglishLetterTemplate(
+  props: MessagePlanPageProps
+) {
+  const { routingConfigId } = await props.params;
+
+  const messagePlan = await getRoutingConfig(routingConfigId);
+
+  if (!messagePlan) {
+    return redirect('/message-plans/invalid', RedirectType.replace);
+  }
+
+  const cascadeIndex = messagePlan.cascade.findIndex(
+    (item) => item.channel === 'LETTER'
+  );
+
+  if (cascadeIndex === -1) {
+    return redirect('/message-plans/invalid', RedirectType.replace);
+  }
+
+  const availableTemplateList = await getTemplates({
+    templateType: 'LETTER',
+    language: 'en',
+    letterType: 'x0',
+  });
+
+  return (
+    <ChooseChannelTemplate
+      messagePlan={messagePlan}
+      pageHeading={pageHeading}
+      templateList={availableTemplateList}
+      cascadeIndex={cascadeIndex}
+    />
+  );
+}
diff --git a/frontend/src/app/message-plans/choose-standard-english-letter-template/[routingConfigId]/preview-template/[templateId]/page.tsx b/frontend/src/app/message-plans/choose-standard-english-letter-template/[routingConfigId]/preview-template/[templateId]/page.tsx
new file mode 100644
index 000000000..873d2119d
--- /dev/null
+++ b/frontend/src/app/message-plans/choose-standard-english-letter-template/[routingConfigId]/preview-template/[templateId]/page.tsx
@@ -0,0 +1,44 @@
+'use server';
+
+import {
+  MessagePlanAndTemplatePageProps,
+  validateLetterTemplate,
+} from 'nhs-notify-web-template-management-utils';
+import { getTemplate } from '@utils/form-actions';
+import { redirect, RedirectType } from 'next/navigation';
+import { Metadata } from 'next';
+import content from '@content/content';
+import { PreviewTemplateFromMessagePlan } from '@molecules/PreviewTemplateFromMessagePlan/PreviewTemplateFromMessagePlan';
+import PreviewTemplateDetailsLetter from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsLetter';
+
+const { pageTitle } = content.components.previewLetterTemplate;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: pageTitle,
+  };
+}
+
+const PreviewStandardEnglishLetterTemplateFromMessagePlan = async (
+  props: MessagePlanAndTemplatePageProps
+) => {
+  const { templateId, routingConfigId } = await props.params;
+
+  const template = await getTemplate(templateId);
+
+  const validatedTemplate = validateLetterTemplate(template);
+
+  if (!validatedTemplate) {
+    return redirect('/invalid-template', RedirectType.replace);
+  }
+
+  return (
+    <PreviewTemplateFromMessagePlan
+      initialState={validatedTemplate}
+      previewComponent={PreviewTemplateDetailsLetter}
+      routingConfigId={routingConfigId}
+    />
+  );
+};
+
+export default PreviewStandardEnglishLetterTemplateFromMessagePlan;
diff --git a/frontend/src/app/message-plans/choose-text-message-template/[routingConfigId]/page.tsx b/frontend/src/app/message-plans/choose-text-message-template/[routingConfigId]/page.tsx
new file mode 100644
index 000000000..c8cee456c
--- /dev/null
+++ b/frontend/src/app/message-plans/choose-text-message-template/[routingConfigId]/page.tsx
@@ -0,0 +1,50 @@
+'use server';
+
+import { Metadata } from 'next';
+import { MessagePlanPageProps } from 'nhs-notify-web-template-management-utils';
+import { getRoutingConfig } from '@utils/message-plans';
+import { redirect, RedirectType } from 'next/navigation';
+
+import content from '@content/content';
+import { ChooseChannelTemplate } from '@forms/ChooseChannelTemplate';
+import { getTemplates } from '@utils/form-actions';
+const { pageTitle, pageHeading } = content.pages.chooseTextMessageTemplate;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: pageTitle,
+  };
+}
+
+export default async function ChooseTextMessageTemplate(
+  props: MessagePlanPageProps
+) {
+  const { routingConfigId } = await props.params;
+
+  const messagePlan = await getRoutingConfig(routingConfigId);
+
+  if (!messagePlan) {
+    return redirect('/message-plans/invalid', RedirectType.replace);
+  }
+
+  const cascadeIndex = messagePlan.cascade.findIndex(
+    (item) => item.channel === 'SMS'
+  );
+
+  if (cascadeIndex === -1) {
+    return redirect('/message-plans/invalid', RedirectType.replace);
+  }
+
+  const availableTemplateList = await getTemplates({
+    templateType: 'SMS',
+  });
+
+  return (
+    <ChooseChannelTemplate
+      messagePlan={messagePlan}
+      pageHeading={pageHeading}
+      templateList={availableTemplateList}
+      cascadeIndex={cascadeIndex}
+    />
+  );
+}
diff --git a/frontend/src/app/message-plans/choose-text-message-template/[routingConfigId]/preview-template/[templateId]/page.tsx b/frontend/src/app/message-plans/choose-text-message-template/[routingConfigId]/preview-template/[templateId]/page.tsx
new file mode 100644
index 000000000..b9971b6f6
--- /dev/null
+++ b/frontend/src/app/message-plans/choose-text-message-template/[routingConfigId]/preview-template/[templateId]/page.tsx
@@ -0,0 +1,44 @@
+'use server';
+
+import {
+  MessagePlanAndTemplatePageProps,
+  validateSMSTemplate,
+} from 'nhs-notify-web-template-management-utils';
+import { getTemplate } from '@utils/form-actions';
+import { redirect, RedirectType } from 'next/navigation';
+import { Metadata } from 'next';
+import content from '@content/content';
+import { PreviewTemplateFromMessagePlan } from '@molecules/PreviewTemplateFromMessagePlan/PreviewTemplateFromMessagePlan';
+import PreviewTemplateDetailsSms from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms';
+
+const { pageTitle } = content.components.previewSMSTemplate;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: pageTitle,
+  };
+}
+
+const PreviewTextMessageTemplateFromMessagePlan = async (
+  props: MessagePlanAndTemplatePageProps
+) => {
+  const { templateId, routingConfigId } = await props.params;
+
+  const template = await getTemplate(templateId);
+
+  const validatedTemplate = validateSMSTemplate(template);
+
+  if (!validatedTemplate) {
+    return redirect('/invalid-template', RedirectType.replace);
+  }
+
+  return (
+    <PreviewTemplateFromMessagePlan
+      initialState={validatedTemplate}
+      previewComponent={PreviewTemplateDetailsSms}
+      routingConfigId={routingConfigId}
+    />
+  );
+};
+
+export default PreviewTextMessageTemplateFromMessagePlan;
diff --git a/frontend/src/app/preview-submitted-email-template/[templateId]/page.tsx b/frontend/src/app/preview-submitted-email-template/[templateId]/page.tsx
index c928e24e8..e183dc870 100644
--- a/frontend/src/app/preview-submitted-email-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-submitted-email-template/[templateId]/page.tsx
@@ -6,9 +6,10 @@ import {
 } from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
 import { redirect, RedirectType } from 'next/navigation';
-import { ViewEmailTemplate } from '@molecules/ViewEmailTemplate/ViewEmailTemplate';
 import { Metadata } from 'next';
 import content from '@content/content';
+import { PreviewSubmittedTemplate } from '@molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate';
+import PreviewTemplateDetailsEmail from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail';
 
 const { pageTitle } = content.components.previewEmailTemplate;
 
@@ -29,7 +30,12 @@ const PreviewSubmittedEmailTemplatePage = async (props: TemplatePageProps) => {
     redirect('/invalid-template', RedirectType.replace);
   }
 
-  return <ViewEmailTemplate initialState={validatedTemplate} />;
+  return (
+    <PreviewSubmittedTemplate
+      initialState={validatedTemplate}
+      previewComponent={PreviewTemplateDetailsEmail}
+    />
+  );
 };
 
 export default PreviewSubmittedEmailTemplatePage;
diff --git a/frontend/src/app/preview-submitted-letter-template/[templateId]/page.tsx b/frontend/src/app/preview-submitted-letter-template/[templateId]/page.tsx
index 409253b92..a58c615b7 100644
--- a/frontend/src/app/preview-submitted-letter-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-submitted-letter-template/[templateId]/page.tsx
@@ -8,7 +8,8 @@ import { getTemplate } from '@utils/form-actions';
 import { redirect, RedirectType } from 'next/navigation';
 import { Metadata } from 'next';
 import content from '@content/content';
-import { ViewLetterTemplate } from '@molecules/ViewLetterTemplate/ViewLetterTemplate';
+import { PreviewSubmittedTemplate } from '@molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate';
+import PreviewTemplateDetailsLetter from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsLetter';
 
 const { pageTitle } = content.components.previewLetterTemplate;
 
@@ -29,7 +30,12 @@ const PreviewSubmittedLetterTemplatePage = async (props: TemplatePageProps) => {
     redirect('/invalid-template', RedirectType.replace);
   }
 
-  return <ViewLetterTemplate initialState={validatedTemplate} />;
+  return (
+    <PreviewSubmittedTemplate
+      initialState={validatedTemplate}
+      previewComponent={PreviewTemplateDetailsLetter}
+    />
+  );
 };
 
 export default PreviewSubmittedLetterTemplatePage;
diff --git a/frontend/src/app/preview-submitted-nhs-app-template/[templateId]/page.tsx b/frontend/src/app/preview-submitted-nhs-app-template/[templateId]/page.tsx
index 447c7402c..03721e88a 100644
--- a/frontend/src/app/preview-submitted-nhs-app-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-submitted-nhs-app-template/[templateId]/page.tsx
@@ -6,9 +6,10 @@ import {
 } from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
 import { redirect, RedirectType } from 'next/navigation';
-import { ViewNHSAppTemplate } from '@molecules/ViewNHSAppTemplate/ViewNHSAppTemplate';
 import { Metadata } from 'next';
 import content from '@content/content';
+import { PreviewSubmittedTemplate } from '@molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate';
+import PreviewTemplateDetailsNhsApp from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp';
 
 const { pageTitle } = content.components.previewNHSAppTemplate;
 
@@ -29,7 +30,12 @@ const PreviewSubmittedNHSAppTemplatePage = async (props: TemplatePageProps) => {
     redirect('/invalid-template', RedirectType.replace);
   }
 
-  return <ViewNHSAppTemplate initialState={validatedTemplate} />;
+  return (
+    <PreviewSubmittedTemplate
+      initialState={validatedTemplate}
+      previewComponent={PreviewTemplateDetailsNhsApp}
+    />
+  );
 };
 
 export default PreviewSubmittedNHSAppTemplatePage;
diff --git a/frontend/src/app/preview-submitted-text-message-template/[templateId]/page.tsx b/frontend/src/app/preview-submitted-text-message-template/[templateId]/page.tsx
index 9a8c1897d..838ddce38 100644
--- a/frontend/src/app/preview-submitted-text-message-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-submitted-text-message-template/[templateId]/page.tsx
@@ -6,9 +6,10 @@ import {
 } from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
 import { redirect, RedirectType } from 'next/navigation';
-import { ViewSMSTemplate } from '@molecules/ViewSMSTemplate/ViewSMSTemplate';
 import { Metadata } from 'next';
 import content from '@content/content';
+import { PreviewSubmittedTemplate } from '@molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate';
+import PreviewTemplateDetailsSms from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms';
 
 const { pageTitle } = content.components.previewSMSTemplate;
 
@@ -29,7 +30,12 @@ const PreviewSubmittedSMSTemplatePage = async (props: TemplatePageProps) => {
     redirect('/invalid-template', RedirectType.replace);
   }
 
-  return <ViewSMSTemplate initialState={validatedTemplate} />;
+  return (
+    <PreviewSubmittedTemplate
+      initialState={validatedTemplate}
+      previewComponent={PreviewTemplateDetailsSms}
+    />
+  );
 };
 
 export default PreviewSubmittedSMSTemplatePage;
diff --git a/frontend/src/components/forms/ChooseChannelTemplate/ChooseChannelTemplate.tsx b/frontend/src/components/forms/ChooseChannelTemplate/ChooseChannelTemplate.tsx
new file mode 100644
index 000000000..817527461
--- /dev/null
+++ b/frontend/src/components/forms/ChooseChannelTemplate/ChooseChannelTemplate.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
+import { ChooseChannelTemplateProps } from './choose-channel-template.types';
+import { SummaryList } from 'nhsuk-react-components';
+import baseContent from '@content/content';
+import { ChannelTemplates } from '@molecules/ChannelTemplates/ChannelTemplates';
+import Link from 'next/link';
+import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
+import { interpolate } from '@utils/interpolate';
+import { useActionState, useState } from 'react';
+import { ErrorState } from 'nhs-notify-web-template-management-utils';
+import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
+import {
+  $ChooseChannelTemplate,
+  chooseChannelTemplateAction,
+} from './server-action';
+import { validate } from '@utils/client-validate-form';
+import { NHSNotifyFormWrapper } from '@molecules/NHSNotifyFormWrapper/NHSNotifyFormWrapper';
+import classNames from 'classnames';
+
+const content = baseContent.components.chooseChannelTemplate;
+
+export function ChooseChannelTemplate(props: ChooseChannelTemplateProps) {
+  const { messagePlan, pageHeading, templateList, cascadeIndex } = props;
+
+  const [state, action] = useActionState(chooseChannelTemplateAction, {
+    ...props,
+  });
+  const [errorState, setErrorState] = useState<ErrorState | undefined>(
+    state.errorState
+  );
+
+  const formValidate = validate(
+    $ChooseChannelTemplate(pageHeading),
+    setErrorState
+  );
+
+  const selectedTemplateId =
+    messagePlan.cascade[cascadeIndex].defaultTemplateId || null;
+
+  return (
+    <NHSNotifyMain>
+      <NhsNotifyErrorSummary
+        hint={content.errorHintText}
+        errorState={errorState}
+      />
+      <div className='nhsuk-grid-row'>
+        <div className='nhsuk-grid-column-full'>
+          <span className='nhsuk-caption-l'>{messagePlan.name}</span>
+          <h1 className='nhsuk-heading-l'>{pageHeading}</h1>
+          <NHSNotifyFormWrapper
+            action={action}
+            formId={'choose-channel-template'}
+            formAttributes={{ onSubmit: formValidate }}
+          >
+            {selectedTemplateId && (
+              <SummaryList data-testid='previous-selection-summary'>
+                <SummaryList.Row>
+                  <SummaryList.Key>
+                    {content.previousSelectionLabel}
+                  </SummaryList.Key>
+                  <SummaryList.Value>
+                    {
+                      templateList.find(
+                        (template) => template.id === selectedTemplateId
+                      )?.name
+                    }
+                  </SummaryList.Value>
+                </SummaryList.Row>
+              </SummaryList>
+            )}
+
+            {templateList.length > 0 ? (
+              <ChannelTemplates
+                routingConfigId={messagePlan.id}
+                templateList={templateList}
+                errorState={errorState || null}
+                selectedTemplate={selectedTemplateId}
+              />
+            ) : (
+              <p>{content.noTemplatesText}</p>
+            )}
+            <div
+              className='nhsuk-form-group'
+              data-testid='channel-template-actions'
+            >
+              {templateList.length > 0 ? (
+                <NHSNotifyButton
+                  type='submit'
+                  data-testid='submit-button'
+                  id={'channel-template-submit-button'}
+                >
+                  {content.actions.save.text}
+                </NHSNotifyButton>
+              ) : (
+                <p>
+                  <Link
+                    href={content.actions.goToTemplates.href}
+                    className='nhsuk-u-font-size-19'
+                  >
+                    {content.actions.goToTemplates.text}
+                  </Link>
+                </p>
+              )}
+              <Link
+                href={interpolate(content.actions.backLink.href, {
+                  routingConfigId: messagePlan.id,
+                })}
+                className={classNames(
+                  'nhsuk-u-font-size-19',
+                  templateList.length > 0 &&
+                    'inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3'
+                )}
+              >
+                {content.actions.backLink.text}
+              </Link>
+            </div>
+          </NHSNotifyFormWrapper>
+        </div>
+      </div>
+    </NHSNotifyMain>
+  );
+}
diff --git a/frontend/src/components/forms/ChooseChannelTemplate/choose-channel-template.types.ts b/frontend/src/components/forms/ChooseChannelTemplate/choose-channel-template.types.ts
new file mode 100644
index 000000000..5efdcce99
--- /dev/null
+++ b/frontend/src/components/forms/ChooseChannelTemplate/choose-channel-template.types.ts
@@ -0,0 +1,8 @@
+import { RoutingConfig, TemplateDto } from 'nhs-notify-backend-client';
+
+export type ChooseChannelTemplateProps = {
+  messagePlan: RoutingConfig;
+  pageHeading: string;
+  templateList: TemplateDto[];
+  cascadeIndex: number;
+};
diff --git a/frontend/src/components/forms/ChooseChannelTemplate/index.ts b/frontend/src/components/forms/ChooseChannelTemplate/index.ts
new file mode 100644
index 000000000..ef87c63b1
--- /dev/null
+++ b/frontend/src/components/forms/ChooseChannelTemplate/index.ts
@@ -0,0 +1,2 @@
+export * from './ChooseChannelTemplate';
+export * from './choose-channel-template.types';
diff --git a/frontend/src/components/forms/ChooseChannelTemplate/server-action.ts b/frontend/src/components/forms/ChooseChannelTemplate/server-action.ts
new file mode 100644
index 000000000..212b1c209
--- /dev/null
+++ b/frontend/src/components/forms/ChooseChannelTemplate/server-action.ts
@@ -0,0 +1,49 @@
+import { redirect, RedirectType } from 'next/navigation';
+import { FormState } from 'nhs-notify-web-template-management-utils';
+import { z } from 'zod';
+import { updateRoutingConfig } from '@utils/message-plans';
+import { ChooseChannelTemplateProps } from './choose-channel-template.types';
+
+export type ChooseChannelTemplateFormState = FormState &
+  ChooseChannelTemplateProps;
+
+export const $ChooseChannelTemplate = (errorMessage: string) =>
+  z.object({
+    channelTemplate: z.string({
+      message: errorMessage,
+    }),
+  });
+
+export async function chooseChannelTemplateAction(
+  formState: ChooseChannelTemplateFormState,
+  formData: FormData
+): Promise<ChooseChannelTemplateFormState> {
+  const { messagePlan, cascadeIndex, pageHeading } = formState;
+
+  const parsedForm = $ChooseChannelTemplate(pageHeading).safeParse(
+    Object.fromEntries(formData.entries())
+  );
+
+  if (!parsedForm.success) {
+    return {
+      ...formState,
+      errorState: z.flattenError(parsedForm.error),
+    };
+  }
+
+  const newCascade = messagePlan.cascade.map((item, index) =>
+    index === cascadeIndex
+      ? { ...item, defaultTemplateId: parsedForm.data.channelTemplate }
+      : item
+  );
+
+  await updateRoutingConfig(messagePlan.id, {
+    cascade: newCascade,
+    cascadeGroupOverrides: messagePlan.cascadeGroupOverrides,
+  });
+
+  redirect(
+    `/message-plans/choose-templates/${messagePlan.id}`,
+    RedirectType.push
+  );
+}
diff --git a/frontend/src/components/forms/CopyTemplate/CopyTemplate.tsx b/frontend/src/components/forms/CopyTemplate/CopyTemplate.tsx
index 361f5465e..8aabfbf69 100644
--- a/frontend/src/components/forms/CopyTemplate/CopyTemplate.tsx
+++ b/frontend/src/components/forms/CopyTemplate/CopyTemplate.tsx
@@ -10,7 +10,7 @@ import {
 } from 'nhs-notify-web-template-management-utils';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
 import { $CopyTemplate, copyTemplateAction } from './server-action';
-import { TemplateType, ValidatedTemplateDto } from 'nhs-notify-backend-client';
+import { TemplateDto, TemplateType } from 'nhs-notify-backend-client';
 import { validate } from '@utils/client-validate-form';
 import Link from 'next/link';
 import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
@@ -18,7 +18,7 @@ import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
 export type ValidCopyType = Exclude<TemplateType, 'LETTER'>;
 
 type CopyTemplate = {
-  template: ValidatedTemplateDto & { templateType: ValidCopyType };
+  template: TemplateDto & { templateType: ValidCopyType };
 };
 
 export const CopyTemplate = ({ template }: CopyTemplate) => {
diff --git a/frontend/src/components/forms/CopyTemplate/server-action.ts b/frontend/src/components/forms/CopyTemplate/server-action.ts
index a14d6db6c..9a0274ad3 100644
--- a/frontend/src/components/forms/CopyTemplate/server-action.ts
+++ b/frontend/src/components/forms/CopyTemplate/server-action.ts
@@ -5,8 +5,8 @@ import { createTemplate } from '@utils/form-actions';
 import { format } from 'date-fns/format';
 import {
   TEMPLATE_TYPE_LIST,
+  TemplateDto,
   TemplateType,
-  ValidatedTemplateDto,
 } from 'nhs-notify-backend-client';
 import content from '@content/content';
 
@@ -17,7 +17,7 @@ export const $CopyTemplate = z.object({
 });
 
 type CopyTemplateActionState = FormState & {
-  template: ValidatedTemplateDto & {
+  template: TemplateDto & {
     templateType: Exclude<TemplateType, 'LETTER'>;
   };
 };
diff --git a/frontend/src/components/forms/PreviewEmailTemplate/PreviewEmailTemplate.tsx b/frontend/src/components/forms/PreviewEmailTemplate/PreviewEmailTemplate.tsx
index 05c5ba3be..d3b8b800b 100644
--- a/frontend/src/components/forms/PreviewEmailTemplate/PreviewEmailTemplate.tsx
+++ b/frontend/src/components/forms/PreviewEmailTemplate/PreviewEmailTemplate.tsx
@@ -10,7 +10,6 @@ import {
   PageComponentProps,
 } from 'nhs-notify-web-template-management-utils';
 import { useActionState, useState } from 'react';
-import { renderEmailMarkdown } from '@utils/markdownit';
 import { useSearchParams } from 'next/navigation';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
 import { $FormSchema, previewEmailTemplateAction } from './server-actions';
@@ -36,9 +35,6 @@ export function PreviewEmailTemplate({
 
   const formValidate = validate($FormSchema, setErrorState);
 
-  const templateSubjectLine = initialState.subject;
-  const templateMessage = initialState.message;
-  const html = renderEmailMarkdown(templateMessage);
   const isFromEditPage = searchParams.get('from') === 'edit';
 
   return (
@@ -66,11 +62,7 @@ export function PreviewEmailTemplate({
               }}
               editPath={`/edit-email-template/${initialState.id}`}
               previewDetailsComponent={
-                <PreviewTemplateDetailsEmail
-                  template={initialState}
-                  subject={templateSubjectLine}
-                  message={html}
-                />
+                <PreviewTemplateDetailsEmail template={initialState} />
               }
             />
             <p>
diff --git a/frontend/src/components/forms/PreviewNHSAppTemplate/PreviewNHSAppTemplate.tsx b/frontend/src/components/forms/PreviewNHSAppTemplate/PreviewNHSAppTemplate.tsx
index a27f4ea34..810af1b27 100644
--- a/frontend/src/components/forms/PreviewNHSAppTemplate/PreviewNHSAppTemplate.tsx
+++ b/frontend/src/components/forms/PreviewNHSAppTemplate/PreviewNHSAppTemplate.tsx
@@ -9,7 +9,6 @@ import {
   PageComponentProps,
 } from 'nhs-notify-web-template-management-utils';
 import content from '@content/content';
-import { renderNHSAppMarkdown } from '@utils/markdownit';
 import { useSearchParams } from 'next/navigation';
 import { useActionState, useState } from 'react';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
@@ -33,8 +32,6 @@ export function PreviewNHSAppTemplate({
 
   const formValidate = validate(schema, setErrorState);
 
-  const { message } = state;
-  const html = renderNHSAppMarkdown(message);
   const isFromEditPage = searchParams.get('from') === 'edit';
 
   const { sectionHeading, form, backLinkText } =
@@ -64,10 +61,7 @@ export function PreviewNHSAppTemplate({
                 formAttributes: { onSubmit: formValidate },
               }}
               previewDetailsComponent={
-                <PreviewTemplateDetailsNhsApp
-                  template={initialState}
-                  message={html}
-                />
+                <PreviewTemplateDetailsNhsApp template={initialState} />
               }
               editPath={`/edit-nhs-app-template/${initialState.id}`}
             />{' '}
diff --git a/frontend/src/components/forms/PreviewSMSTemplate/PreviewSMSTemplate.tsx b/frontend/src/components/forms/PreviewSMSTemplate/PreviewSMSTemplate.tsx
index 2ea9d65ea..1f01d7ae3 100644
--- a/frontend/src/components/forms/PreviewSMSTemplate/PreviewSMSTemplate.tsx
+++ b/frontend/src/components/forms/PreviewSMSTemplate/PreviewSMSTemplate.tsx
@@ -10,7 +10,6 @@ import {
   SMSTemplate,
 } from 'nhs-notify-web-template-management-utils';
 import { useActionState, useState } from 'react';
-import { renderSMSMarkdown } from '@utils/markdownit';
 import { useSearchParams } from 'next/navigation';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
 import { $FormSchema, previewSmsTemplateAction } from './server-actions';
@@ -36,8 +35,6 @@ export function PreviewSMSTemplate({
 
   const formValidate = validate($FormSchema, setErrorState);
 
-  const templateMessage = initialState.message;
-  const html = renderSMSMarkdown(templateMessage);
   const isFromEditPage = searchParams.get('from') === 'edit';
 
   return (
@@ -64,10 +61,7 @@ export function PreviewSMSTemplate({
                 formAttributes: { onSubmit: formValidate },
               }}
               previewDetailsComponent={
-                <PreviewTemplateDetailsSms
-                  template={initialState}
-                  message={html}
-                />
+                <PreviewTemplateDetailsSms template={initialState} />
               }
               editPath={`/edit-text-message-template/${initialState.id}`}
             />
diff --git a/frontend/src/components/molecules/ChannelTemplates/ChannelTemplates.module.scss b/frontend/src/components/molecules/ChannelTemplates/ChannelTemplates.module.scss
new file mode 100644
index 000000000..b1f400838
--- /dev/null
+++ b/frontend/src/components/molecules/ChannelTemplates/ChannelTemplates.module.scss
@@ -0,0 +1,4 @@
+.actionLinksWrapper {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/frontend/src/components/molecules/ChannelTemplates/ChannelTemplates.tsx b/frontend/src/components/molecules/ChannelTemplates/ChannelTemplates.tsx
new file mode 100644
index 000000000..1339f4c2a
--- /dev/null
+++ b/frontend/src/components/molecules/ChannelTemplates/ChannelTemplates.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import { HintText, Radios, Table } from 'nhsuk-react-components';
+import baseContent from '@content/content';
+import { format } from 'date-fns';
+import Link from 'next/link';
+import {
+  letterTypeDisplayMappings,
+  templateTypeDisplayMappings,
+  ErrorState,
+  cascadeTemplateTypeToUrlTextMappings,
+} from 'nhs-notify-web-template-management-utils';
+import { TemplateDto } from 'nhs-notify-backend-client';
+import style from './ChannelTemplates.module.scss';
+import { interpolate } from '@utils/interpolate';
+
+const { tableHintText, tableContent } =
+  baseContent.components.chooseChannelTemplate;
+
+const typeDisplayMappings = (template: TemplateDto): string =>
+  template.templateType === 'LETTER'
+    ? letterTypeDisplayMappings(template.letterType, template.language)
+    : templateTypeDisplayMappings(template.templateType);
+
+export function ChannelTemplates({
+  routingConfigId,
+  templateList,
+  errorState,
+  selectedTemplate,
+}: {
+  routingConfigId: string;
+  templateList: TemplateDto[];
+  errorState: ErrorState | null;
+  selectedTemplate: string | null;
+}) {
+  return (
+    <div className='nhsuk-grid-row'>
+      <div className='nhsuk-grid-column-full'>
+        <HintText>{tableHintText}</HintText>
+        <Radios
+          id={'channelTemplate'}
+          error={errorState?.fieldErrors?.['channelTemplate']?.join(', ')}
+          errorProps={{ id: 'channelTemplate--error-message' }}
+        >
+          <Table
+            data-testid='channel-templates-table'
+            id='channel-templates-table'
+            responsive
+          >
+            <Table.Head role='rowgroup'>
+              <Table.Row>
+                <Table.Cell data-testid='channel-templates-table-header-template-select'>
+                  {tableContent.selectHeading}
+                </Table.Cell>
+                <Table.Cell data-testid='channel-templates-table-header-template-name'>
+                  {tableContent.nameHeading}
+                </Table.Cell>
+                <Table.Cell data-testid='channel-templates-table-header-template-type'>
+                  {tableContent.typeHeading}
+                </Table.Cell>
+                <Table.Cell data-testid='channel-templates-table-header-template-last-edited'>
+                  {tableContent.lastEditedHeading}
+                </Table.Cell>
+                <Table.Cell data-testid='channel-templates-table-header-template-action'>
+                  {tableContent.action.heading}
+                </Table.Cell>
+              </Table.Row>
+            </Table.Head>
+            <Table.Body>
+              {templateList.map((template, index) => (
+                <Table.Row key={template.id}>
+                  <Table.Cell>
+                    <Radios.Radio
+                      value={template.id}
+                      id={`channelTemplate-${template.id}`}
+                      data-testid={`${template.id}-radio`}
+                      key={`${template.id}-radio`}
+                      defaultChecked={template.id === selectedTemplate}
+                    >
+                      {' '}
+                    </Radios.Radio>
+                  </Table.Cell>
+                  <Table.Cell>{template.name}</Table.Cell>
+                  <Table.Cell>{typeDisplayMappings(template)}</Table.Cell>
+                  <Table.Cell>
+                    {format(`${template.updatedAt}`, 'do MMM yyyy')}
+                    <br />
+                    {format(`${template.updatedAt}`, 'HH:mm')}
+                  </Table.Cell>
+                  <Table.Cell>
+                    <div className={style.actionLinksWrapper}>
+                      <Link
+                        href={interpolate(tableContent.action.preview.href, {
+                          templateType: cascadeTemplateTypeToUrlTextMappings(
+                            template.templateType
+                          ),
+                          routingConfigId,
+                          templateId: template.id,
+                        })}
+                        id={`preview-template-link-${index}`}
+                        aria-label={`${tableContent.action.preview.text}`}
+                        data-testid={`${template.id}-preview-link`}
+                      >
+                        {tableContent.action.preview.text}
+                      </Link>
+                    </div>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </Radios>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary.tsx b/frontend/src/components/molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary.tsx
index 5df2b9aff..2aa62e2bd 100644
--- a/frontend/src/components/molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary.tsx
+++ b/frontend/src/components/molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary.tsx
@@ -1,4 +1,4 @@
-import { ErrorSummary } from 'nhsuk-react-components';
+import { ErrorSummary, HintText } from 'nhsuk-react-components';
 import { ErrorState } from 'nhs-notify-web-template-management-utils';
 import { FC, HTMLProps, useEffect, useRef } from 'react';
 import content from '@content/content';
@@ -10,10 +10,12 @@ const UnlinkedErrorSummaryItem: FC<HTMLProps<HTMLSpanElement>> = (props) => (
 );
 
 export type NhsNotifyErrorSummaryProps = {
+  hint?: string;
   errorState?: ErrorState;
 };
 
 export const NhsNotifyErrorSummary = ({
+  hint,
   errorState,
 }: NhsNotifyErrorSummaryProps) => {
   const errorSummaryRef = useRef<HTMLDivElement>(null);
@@ -36,6 +38,7 @@ export const NhsNotifyErrorSummary = ({
       <ErrorSummary.Title data-testid='error-summary'>
         {content.components.errorSummary.heading}
       </ErrorSummary.Title>
+      {hint && <HintText>{hint}</HintText>}
       <ErrorSummary.List>
         {fieldErrors &&
           Object.entries(fieldErrors).map(([id, errors]) => (
diff --git a/frontend/src/components/molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate.tsx b/frontend/src/components/molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate.tsx
new file mode 100644
index 000000000..b8c030831
--- /dev/null
+++ b/frontend/src/components/molecules/PreviewSubmittedTemplate/PreviewSubmittedTemplate.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { PageComponentProps } from 'nhs-notify-web-template-management-utils';
+import baseContent from '@content/content';
+import Link from 'next/link';
+import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
+import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
+import { TemplateDto } from 'nhs-notify-backend-client';
+import { PreviewTemplateComponent } from '@molecules/PreviewTemplateDetails/common';
+
+export type PreviewSubmittedTemplateProps<T extends TemplateDto> =
+  PageComponentProps<T> & {
+    previewComponent: PreviewTemplateComponent<T>;
+  };
+
+export function PreviewSubmittedTemplate<T extends TemplateDto>({
+  initialState,
+  previewComponent,
+}: Readonly<PreviewSubmittedTemplateProps<T>>) {
+  const content = baseContent.components.viewSubmittedTemplate;
+
+  return (
+    <>
+      <Link href={content.backLink.href} passHref legacyBehavior>
+        <NotifyBackLink>{content.backLink.text}</NotifyBackLink>
+      </Link>
+
+      <NHSNotifyMain>
+        <div className='nhsuk-grid-row'>
+          <div className='nhsuk-grid-column-full'>
+            {previewComponent({
+              template: initialState,
+            })}
+
+            {initialState.templateType !== 'LETTER' && (
+              <p>{content.cannotEdit}</p>
+            )}
+            <p>{content.createNewTemplate}</p>
+
+            <p>
+              <Link href={content.backLink.href}>{content.backLink.text}</Link>
+            </p>
+          </div>
+        </div>
+      </NHSNotifyMain>
+    </>
+  );
+}
diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail.tsx
index ec19fadb3..8acd66849 100644
--- a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail.tsx
+++ b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   type EmailTemplate,
   templateTypeDisplayMappings,
@@ -10,16 +12,18 @@ import {
 } from './common';
 import { Container } from 'nhsuk-react-components';
 import concatClassNames from '@utils/concat-class-names';
+import { renderEmailMarkdown } from '@utils/markdownit';
 
 export default function PreviewTemplateDetailsEmail({
   template,
-  subject,
-  message,
+  hideStatus,
 }: {
   template: EmailTemplate;
-  subject: string;
-  message: string;
+  hideStatus?: boolean;
 }) {
+  const subject = template.subject;
+  const message = renderEmailMarkdown(template.message);
+
   return (
     <>
       <DetailsHeader templateName={template.name} />
@@ -32,6 +36,7 @@ export default function PreviewTemplateDetailsEmail({
             templateTypeText={templateTypeDisplayMappings(
               template.templateType
             )}
+            hideStatus={hideStatus}
           />
         </DetailSection>
         <DetailSection>
diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsLetter.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsLetter.tsx
index 057d9e9a3..236dfe20b 100644
--- a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsLetter.tsx
+++ b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsLetter.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Container, SummaryList } from 'nhsuk-react-components';
 import {
   letterTypeDisplayMappings,
@@ -14,8 +16,10 @@ const { rowHeadings } = content.components.previewTemplateDetails;
 
 export default function PreviewTemplateDetailsLetter({
   template,
+  hideStatus,
 }: {
   template: LetterTemplate;
+  hideStatus?: boolean;
 }) {
   const proofFilenames = Object.values(template.files.proofs ?? {})
     .filter(({ virusScanStatus }) => virusScanStatus === 'PASSED')
@@ -41,6 +45,7 @@ export default function PreviewTemplateDetailsLetter({
               template.language
             )}
             campaignId={template.campaignId}
+            hideStatus={hideStatus}
           />
           <SummaryList.Row>
             <SummaryList.Key>{rowHeadings.templateFile}</SummaryList.Key>
diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp.tsx
index bc6b10322..a2bcef588 100644
--- a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp.tsx
+++ b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   NHSAppTemplate,
   templateTypeDisplayMappings,
@@ -10,14 +12,17 @@ import {
 } from './common';
 import { Container } from 'nhsuk-react-components';
 import concatClassNames from '@utils/concat-class-names';
+import { renderNHSAppMarkdown } from '@utils/markdownit';
 
 export default function PreviewTemplateDetailsNhsApp({
   template,
-  message,
+  hideStatus,
 }: {
   template: NHSAppTemplate;
-  message: string;
+  hideStatus?: boolean;
 }) {
+  const message = renderNHSAppMarkdown(template.message);
+
   return (
     <>
       <DetailsHeader templateName={template.name} />
@@ -30,6 +35,7 @@ export default function PreviewTemplateDetailsNhsApp({
             templateTypeText={templateTypeDisplayMappings(
               template.templateType
             )}
+            hideStatus={hideStatus}
           />
         </DetailSection>
         <DetailSection>
diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms.tsx
index 8e4e705d2..115defb09 100644
--- a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms.tsx
+++ b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   type SMSTemplate,
   templateTypeDisplayMappings,
@@ -10,14 +12,17 @@ import {
 } from './common';
 import { Container } from 'nhsuk-react-components';
 import concatClassNames from '@utils/concat-class-names';
+import { renderSMSMarkdown } from '@utils/markdownit';
 
 export default function PreviewTemplateDetailsSms({
   template,
-  message,
+  hideStatus,
 }: {
   template: SMSTemplate;
-  message: string;
+  hideStatus?: boolean;
 }) {
+  const message = renderSMSMarkdown(template.message);
+
   return (
     <>
       <DetailsHeader templateName={template.name} />
@@ -30,6 +35,7 @@ export default function PreviewTemplateDetailsSms({
             templateTypeText={templateTypeDisplayMappings(
               template.templateType
             )}
+            hideStatus={hideStatus}
           />
         </DetailSection>
         <DetailSection>
diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/common.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/common.tsx
index 1b43630eb..1d8bcad99 100644
--- a/frontend/src/components/molecules/PreviewTemplateDetails/common.tsx
+++ b/frontend/src/components/molecules/PreviewTemplateDetails/common.tsx
@@ -11,6 +11,14 @@ import { TemplateDto } from 'nhs-notify-backend-client';
 import classNames from 'classnames';
 import { toKebabCase } from '@utils/kebab-case';
 
+export type PreviewTemplateComponent<T extends TemplateDto> = ({
+  template,
+  hideStatus,
+}: {
+  template: T;
+  hideStatus?: boolean;
+}) => JSX.Element;
+
 type ContentPreviewField = {
   heading: 'Id' | 'Heading' | 'Body text' | 'Subject' | 'Message';
   id: string;
@@ -60,10 +68,12 @@ export function StandardDetailRows({
   template,
   templateTypeText,
   campaignId,
+  hideStatus,
 }: Readonly<{
   template: TemplateDto;
   templateTypeText: string;
   campaignId?: string;
+  hideStatus?: boolean;
 }>): JSX.Element {
   return (
     <>
@@ -81,29 +91,31 @@ export function StandardDetailRows({
         <SummaryList.Key>{rowHeadings.templateType}</SummaryList.Key>
         <SummaryList.Value>{templateTypeText}</SummaryList.Value>
       </SummaryList.Row>
-      <SummaryList.Row>
-        <SummaryList.Key>{rowHeadings.templateStatus}</SummaryList.Key>
-        <SummaryList.Value>
-          <Tag
-            data-test-id={`status-tag-${toKebabCase(template.templateStatus)}`}
-            color={statusToColourMapping(template)}
-          >
-            {statusToDisplayMapping(template)}
-          </Tag>
-          {previewTemplateStatusFootnote[template.templateStatus] && (
-            <small
-              className={classNames(
-                styles.preview__statusnote,
-                'nhsuk-body-s',
-                'nhsuk-u-margin-top-2',
-                'nhsuk-u-secondary-text-color'
-              )}
+      {!hideStatus && (
+        <SummaryList.Row>
+          <SummaryList.Key>{rowHeadings.templateStatus}</SummaryList.Key>
+          <SummaryList.Value>
+            <Tag
+              data-test-id={`status-tag-${toKebabCase(template.templateStatus)}`}
+              color={statusToColourMapping(template)}
             >
-              {previewTemplateStatusFootnote[template.templateStatus]}
-            </small>
-          )}
-        </SummaryList.Value>
-      </SummaryList.Row>
+              {statusToDisplayMapping(template)}
+            </Tag>
+            {previewTemplateStatusFootnote[template.templateStatus] && (
+              <small
+                className={classNames(
+                  styles.preview__statusnote,
+                  'nhsuk-body-s',
+                  'nhsuk-u-margin-top-2',
+                  'nhsuk-u-secondary-text-color'
+                )}
+              >
+                {previewTemplateStatusFootnote[template.templateStatus]}
+              </small>
+            )}
+          </SummaryList.Value>
+        </SummaryList.Row>
+      )}
     </>
   );
 }
diff --git a/frontend/src/components/molecules/PreviewTemplateFromMessagePlan/PreviewTemplateFromMessagePlan.tsx b/frontend/src/components/molecules/PreviewTemplateFromMessagePlan/PreviewTemplateFromMessagePlan.tsx
new file mode 100644
index 000000000..2dcc58272
--- /dev/null
+++ b/frontend/src/components/molecules/PreviewTemplateFromMessagePlan/PreviewTemplateFromMessagePlan.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import baseContent from '@content/content';
+import Link from 'next/link';
+import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
+import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
+import { TemplateDto } from 'nhs-notify-backend-client';
+import {
+  cascadeTemplateTypeToUrlTextMappings,
+  PageComponentProps,
+} from 'nhs-notify-web-template-management-utils';
+import { PreviewTemplateComponent } from '@molecules/PreviewTemplateDetails/common';
+import { interpolate } from '@utils/interpolate';
+
+export type MessagePlanPreviewTemplateProps<T extends TemplateDto> =
+  PageComponentProps<T> & {
+    previewComponent: PreviewTemplateComponent<T>;
+    routingConfigId: string;
+  };
+
+export function PreviewTemplateFromMessagePlan<T extends TemplateDto>({
+  initialState: template,
+  previewComponent,
+  routingConfigId,
+}: Readonly<MessagePlanPreviewTemplateProps<T>>) {
+  const content = baseContent.components.previewTemplateFromMessagePlan;
+
+  const backLinkHref = interpolate(content.backLink.href, {
+    templateType: cascadeTemplateTypeToUrlTextMappings(template.templateType),
+    routingConfigId,
+  });
+
+  return (
+    <>
+      <Link href={backLinkHref} passHref legacyBehavior>
+        <NotifyBackLink>{content.backLink.text}</NotifyBackLink>
+      </Link>
+
+      <NHSNotifyMain>
+        <div className='nhsuk-grid-row'>
+          <div className='nhsuk-grid-column-full'>
+            {previewComponent({
+              template,
+              hideStatus: true,
+            })}
+
+            <p>
+              <Link href={backLinkHref}>{content.backLink.text}</Link>
+            </p>
+          </div>
+        </div>
+      </NHSNotifyMain>
+    </>
+  );
+}
diff --git a/frontend/src/components/molecules/ViewEmailTemplate/ViewEmailTemplate.tsx b/frontend/src/components/molecules/ViewEmailTemplate/ViewEmailTemplate.tsx
deleted file mode 100644
index 98ef7946c..000000000
--- a/frontend/src/components/molecules/ViewEmailTemplate/ViewEmailTemplate.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import PreviewTemplateDetailsEmail from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail';
-import {
-  EmailTemplate,
-  PageComponentProps,
-} from 'nhs-notify-web-template-management-utils';
-import { renderEmailMarkdown } from '@utils/markdownit';
-import content from '@content/content';
-import Link from 'next/link';
-import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
-import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
-
-export function ViewEmailTemplate({
-  initialState,
-}: Readonly<PageComponentProps<EmailTemplate>>) {
-  const templateSubjectLine = initialState.subject;
-  const templateMessage = initialState.message;
-
-  const html = renderEmailMarkdown(templateMessage);
-
-  const { cannotEdit, createNewTemplate, backLinkText } =
-    content.components.viewSubmittedTemplate;
-
-  return (
-    <>
-      <Link href='/message-templates' passHref legacyBehavior>
-        <NotifyBackLink>{backLinkText}</NotifyBackLink>
-      </Link>
-      <NHSNotifyMain>
-        <div className='nhsuk-grid-row'>
-          <div className='nhsuk-grid-column-full'>
-            <PreviewTemplateDetailsEmail
-              template={initialState}
-              subject={templateSubjectLine}
-              message={html}
-            />
-            <p>{cannotEdit}</p>
-            <p>{createNewTemplate}</p>
-            <p>
-              <Link href='/message-templates'>{backLinkText}</Link>
-            </p>
-          </div>
-        </div>
-      </NHSNotifyMain>
-    </>
-  );
-}
diff --git a/frontend/src/components/molecules/ViewLetterTemplate/ViewLetterTemplate.tsx b/frontend/src/components/molecules/ViewLetterTemplate/ViewLetterTemplate.tsx
deleted file mode 100644
index 9461445ae..000000000
--- a/frontend/src/components/molecules/ViewLetterTemplate/ViewLetterTemplate.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import PreviewTemplateDetailsLetter from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsLetter';
-import {
-  LetterTemplate,
-  PageComponentProps,
-} from 'nhs-notify-web-template-management-utils';
-import content from '@content/content';
-import Link from 'next/link';
-import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
-import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
-
-export function ViewLetterTemplate({
-  initialState,
-}: Readonly<PageComponentProps<LetterTemplate> & { owner?: string }>) {
-  const { createNewTemplate, backLinkText } =
-    content.components.viewSubmittedTemplate;
-
-  return (
-    <>
-      <Link href='/message-templates' passHref legacyBehavior>
-        <NotifyBackLink data-testid='back-to-templates-link'>
-          {backLinkText}
-        </NotifyBackLink>
-      </Link>
-      <NHSNotifyMain>
-        <div className='nhsuk-grid-row'>
-          <div className='nhsuk-grid-column-full'>
-            <PreviewTemplateDetailsLetter template={initialState} />
-            <p>{createNewTemplate}</p>
-            <p>
-              <Link
-                href='/message-templates'
-                data-testid='back-to-templates-link-bottom'
-              >
-                {backLinkText}
-              </Link>
-            </p>
-          </div>
-        </div>
-      </NHSNotifyMain>
-    </>
-  );
-}
diff --git a/frontend/src/components/molecules/ViewNHSAppTemplate/ViewNHSAppTemplate.tsx b/frontend/src/components/molecules/ViewNHSAppTemplate/ViewNHSAppTemplate.tsx
deleted file mode 100644
index 14dee44b9..000000000
--- a/frontend/src/components/molecules/ViewNHSAppTemplate/ViewNHSAppTemplate.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client';
-
-import PreviewTemplateDetailsNhsApp from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp';
-import {
-  NHSAppTemplate,
-  PageComponentProps,
-} from 'nhs-notify-web-template-management-utils';
-import { renderNHSAppMarkdown } from '@utils/markdownit';
-import content from '@content/content';
-import Link from 'next/link';
-import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
-import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
-
-export function ViewNHSAppTemplate({
-  initialState,
-}: Readonly<PageComponentProps<NHSAppTemplate>>) {
-  const templateMessage = initialState.message;
-
-  const html = renderNHSAppMarkdown(templateMessage);
-
-  const { cannotEdit, createNewTemplate, backLinkText } =
-    content.components.viewSubmittedTemplate;
-
-  return (
-    <>
-      <Link href='/message-templates' passHref legacyBehavior>
-        <NotifyBackLink>{backLinkText}</NotifyBackLink>
-      </Link>
-      <NHSNotifyMain>
-        <div className='nhsuk-grid-row'>
-          <div className='nhsuk-grid-column-full'>
-            <PreviewTemplateDetailsNhsApp
-              template={initialState}
-              message={html}
-            />
-            <p>{cannotEdit}</p>
-            <p>{createNewTemplate}</p>
-            <p>
-              <Link href='/message-templates'>{backLinkText}</Link>
-            </p>
-          </div>
-        </div>
-      </NHSNotifyMain>
-    </>
-  );
-}
diff --git a/frontend/src/components/molecules/ViewSMSTemplate/ViewSMSTemplate.tsx b/frontend/src/components/molecules/ViewSMSTemplate/ViewSMSTemplate.tsx
deleted file mode 100644
index 8aff52dbc..000000000
--- a/frontend/src/components/molecules/ViewSMSTemplate/ViewSMSTemplate.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client';
-
-import PreviewTemplateDetailsSms from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms';
-import {
-  PageComponentProps,
-  SMSTemplate,
-} from 'nhs-notify-web-template-management-utils';
-import { renderSMSMarkdown } from '@utils/markdownit';
-import content from '@content/content';
-import Link from 'next/link';
-import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
-import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
-
-export function ViewSMSTemplate({
-  initialState,
-}: Readonly<PageComponentProps<SMSTemplate>>) {
-  const templateMessage = initialState.message;
-
-  const html = renderSMSMarkdown(templateMessage);
-
-  const { cannotEdit, createNewTemplate, backLinkText } =
-    content.components.viewSubmittedTemplate;
-
-  return (
-    <>
-      <Link href='/message-templates' passHref legacyBehavior>
-        <NotifyBackLink>{backLinkText}</NotifyBackLink>
-      </Link>
-      <NHSNotifyMain>
-        <div className='nhsuk-grid-row'>
-          <div className='nhsuk-grid-column-full'>
-            <PreviewTemplateDetailsSms template={initialState} message={html} />
-            <p>{cannotEdit}</p>
-            <p>{createNewTemplate}</p>
-            <p>
-              <Link href='/message-templates'>{backLinkText}</Link>
-            </p>
-          </div>
-        </div>
-      </NHSNotifyMain>
-    </>
-  );
-}
diff --git a/frontend/src/content/content.ts b/frontend/src/content/content.ts
index ab1991200..0127ad848 100644
--- a/frontend/src/content/content.ts
+++ b/frontend/src/content/content.ts
@@ -1001,7 +1001,10 @@ const viewSubmittedTemplate = {
   cannotEdit: 'This template cannot be edited because it has been submitted.',
   createNewTemplate:
     'If you want to change a submitted or live template, you must create a new template to replace it.',
-  backLinkText: backToAllTemplates,
+  backLink: {
+    href: '/message-templates',
+    text: backToAllTemplates,
+  },
 };
 
 const deleteTemplate = {
@@ -1138,6 +1141,59 @@ const createEditMessagePlan = {
   messagePlanFallbackConditions,
 };
 
+const chooseNhsAppTemplate = {
+  pageTitle: generatePageTitle('Choose an NHS App template'),
+  pageHeading: 'Choose an NHS App template',
+};
+
+const chooseEmailTemplate = {
+  pageTitle: generatePageTitle('Choose an email template'),
+  pageHeading: 'Choose an email template',
+};
+
+const chooseTextMessageTemplate = {
+  pageTitle: generatePageTitle('Choose a text message (SMS) template'),
+  pageHeading: 'Choose a text message (SMS) template',
+};
+
+const chooseStandardEnglishLetterTemplate = {
+  pageTitle: generatePageTitle('Choose a letter template'),
+  pageHeading: 'Choose a letter template',
+};
+
+const chooseChannelTemplate = {
+  errorHintText: 'You have not chosen a template',
+  previousSelectionLabel: 'Previously selected template',
+  noTemplatesText: 'You do not have any templates yet.',
+  tableHintText: 'Choose one option',
+  tableContent: {
+    selectHeading: 'Select',
+    nameHeading: 'Name',
+    typeHeading: 'Type',
+    lastEditedHeading: 'Last edited',
+    action: {
+      heading: '',
+      preview: {
+        href: '/message-plans/choose-{{templateType}}-template/{{routingConfigId}}/preview-template/{{templateId}}',
+        text: 'Preview',
+      },
+    },
+  },
+  actions: {
+    save: {
+      text: 'Save and continue',
+    },
+    goToTemplates: {
+      text: 'Go to templates',
+      href: '/message-templates',
+    },
+    backLink: {
+      text: 'Go back',
+      href: '/message-plans/choose-templates/{{routingConfigId}}',
+    },
+  },
+};
+
 const messagePlanDraftAndProdInfo: {
   title: string;
   content: ContentBlock[];
@@ -1244,10 +1300,18 @@ const messagePlanForm = {
   submitButton: 'Save and continue',
 };
 
+const previewTemplateFromMessagePlan = {
+  backLink: {
+    href: '/message-plans/choose-{{templateType}}-template/{{routingConfigId}}',
+    text: 'Go back',
+  },
+};
+
 const content = {
   global: { mainLayout },
   components: {
     channelGuidance,
+    chooseChannelTemplate,
     chooseMessageOrder,
     chooseTemplateType,
     copyTemplate,
@@ -1280,6 +1344,7 @@ const content = {
     templateFormSms,
     templateSubmitted,
     viewSubmittedTemplate,
+    previewTemplateFromMessagePlan,
   },
   pages: {
     createMessagePlan,
@@ -1291,6 +1356,10 @@ const content = {
     messageTemplates,
     chooseTemplatesForMessagePlan,
     messagePlansPage,
+    chooseNhsAppTemplate,
+    chooseEmailTemplate,
+    chooseTextMessageTemplate,
+    chooseStandardEnglishLetterTemplate,
   },
 };
 
diff --git a/frontend/src/middleware.ts b/frontend/src/middleware.ts
index 3814e529c..d9ab7aa89 100644
--- a/frontend/src/middleware.ts
+++ b/frontend/src/middleware.ts
@@ -17,9 +17,17 @@ const protectedPaths = [
   /^\/email-template-submitted\/[^/]+$/,
   /^\/invalid-template$/,
   /^\/letter-template-submitted\/[^/]+$/,
-  /^\/message-plans\/choose-templates\/[^/]+$/,
   /^\/message-plans\/campaign-id-required$/,
+  /^\/message-plans\/choose-email-template\/[^/]+$/,
+  /^\/message-plans\/choose-email-template\/[^/]+\/preview-template\/[^/]+$/,
   /^\/message-plans\/choose-message-order$/,
+  /^\/message-plans\/choose-nhs-app-template\/[^/]+$/,
+  /^\/message-plans\/choose-nhs-app-template\/[^/]+\/preview-template\/[^/]+$/,
+  /^\/message-plans\/choose-standard-english-letter-template\/[^/]+$/,
+  /^\/message-plans\/choose-standard-english-letter-template\/[^/]+\/preview-template\/[^/]+$/,
+  /^\/message-plans\/choose-templates\/[^/]+$/,
+  /^\/message-plans\/choose-text-message-template\/[^/]+$/,
+  /^\/message-plans\/choose-text-message-template\/[^/]+\/preview-template\/[^/]+$/,
   /^\/message-plans\/create-message-plan$/,
   /^\/message-plans\/edit-message-plan-settings\/[^/]+$/,
   /^\/message-plans\/invalid$/,
diff --git a/frontend/src/utils/form-actions.ts b/frontend/src/utils/form-actions.ts
index fd3c57379..243e07032 100644
--- a/frontend/src/utils/form-actions.ts
+++ b/frontend/src/utils/form-actions.ts
@@ -2,16 +2,16 @@
 
 import { getSessionServer } from '@utils/amplify-utils';
 import {
+  $TemplateDto,
   CreateUpdateTemplate,
-  isTemplateDtoValid,
   RoutingConfig,
   TemplateDto,
-  ValidatedTemplateDto,
 } from 'nhs-notify-backend-client';
 import { logger } from 'nhs-notify-web-template-management-utils/logger';
 import { templateApiClient } from 'nhs-notify-backend-client/src/template-api-client';
 import { routingConfigurationApiClient } from 'nhs-notify-backend-client/src/routing-config-api-client';
 import { sortAscByUpdatedAt } from './sort';
+import { TemplateFilter } from 'nhs-notify-backend-client/src/types/filters';
 
 export async function createTemplate(
   template: CreateUpdateTemplate
@@ -177,27 +177,36 @@ export async function getTemplate(
   return data;
 }
 
-export async function getTemplates(): Promise<TemplateDto[]> {
+export async function getTemplates(
+  filters?: TemplateFilter
+): Promise<TemplateDto[]> {
   const { accessToken } = await getSessionServer();
 
   if (!accessToken) {
     throw new Error('Failed to get access token');
   }
 
-  const { data, error } = await templateApiClient.listTemplates(accessToken);
+  const { data, error } = await templateApiClient.listTemplates(
+    accessToken,
+    filters
+  );
 
   if (error) {
     logger.error('Failed to get templates', { error });
     return [];
   }
 
-  const sortedData = data
-    .map((template) => isTemplateDtoValid(template))
-    .filter(
-      (template): template is ValidatedTemplateDto => template !== undefined
-    );
+  const valid = data.filter((d) => {
+    const { error: validationError, success } = $TemplateDto.safeParse(d);
+
+    if (!success) {
+      logger.error('Listed invalid template', validationError);
+    }
+
+    return success;
+  });
 
-  return sortAscByUpdatedAt(sortedData);
+  return sortAscByUpdatedAt(valid);
 }
 
 export async function createRoutingConfig(
diff --git a/frontend/src/utils/message-plans.ts b/frontend/src/utils/message-plans.ts
index 2c6f31675..4bed922d0 100644
--- a/frontend/src/utils/message-plans.ts
+++ b/frontend/src/utils/message-plans.ts
@@ -53,7 +53,7 @@ export async function countRoutingConfigs(
 
   const { data, error } = await routingConfigurationApiClient.count(
     accessToken,
-    status
+    { status }
   );
 
   if (error) {
@@ -133,8 +133,8 @@ export async function updateRoutingConfig(
   );
 
   if (error) {
-    logger.error('Failed to get routing configuration', error);
-    return;
+    logger.error('Failed to update message plan', error);
+    throw new Error('Failed to update message plan');
   }
 
   if (!data) return undefined;
@@ -142,7 +142,7 @@ export async function updateRoutingConfig(
   const result = $RoutingConfig.safeParse(data);
 
   if (!result.success) {
-    logger.error('Invalid routing configuration object', result.error);
+    logger.error('Invalid message plan object', result.error);
     return undefined;
   }
 
diff --git a/infrastructure/terraform/modules/backend-api/spec.tmpl.json b/infrastructure/terraform/modules/backend-api/spec.tmpl.json
index f61fe4033..cf458027a 100644
--- a/infrastructure/terraform/modules/backend-api/spec.tmpl.json
+++ b/infrastructure/terraform/modules/backend-api/spec.tmpl.json
@@ -766,9 +766,8 @@
         ],
         "type": "object"
       },
-      "TemplateStatus": {
+      "TemplateStatusActive": {
         "enum": [
-          "DELETED",
           "NOT_YET_SUBMITTED",
           "PENDING_PROOF_REQUEST",
           "PENDING_UPLOAD",
@@ -781,6 +780,19 @@
         ],
         "type": "string"
       },
+      "TemplateStatus": {
+        "anyOf": [
+          {
+            "$ref": "#/components/schemas/TemplateStatusActive"
+          },
+          {
+            "enum": [
+              "DELETED"
+            ],
+            "type": "string"
+          }
+        ]
+      },
       "TemplateSuccess": {
         "properties": {
           "data": {
@@ -1942,6 +1954,40 @@
     "/v1/templates": {
       "get": {
         "description": "List all templates",
+        "parameters": [
+          {
+            "description": "Filter by a single active status",
+            "in": "query",
+            "name": "templateStatus",
+            "schema": {
+              "$ref": "#/components/schemas/TemplateStatusActive"
+            }
+          },
+          {
+            "description": "Filter by a single template type",
+            "in": "query",
+            "name": "templateType",
+            "schema": {
+              "$ref": "#/components/schemas/TemplateType"
+            }
+          },
+          {
+            "description": "Filter by a single language",
+            "in": "query",
+            "name": "language",
+            "schema": {
+              "$ref": "#/components/schemas/Language"
+            }
+          },
+          {
+            "description": "Filter by a single accessible letter type",
+            "in": "query",
+            "name": "letterType",
+            "schema": {
+              "$ref": "#/components/schemas/LetterType"
+            }
+          }
+        ],
         "responses": {
           "200": {
             "content": {
diff --git a/lambdas/backend-api/src/__tests__/api/list.test.ts b/lambdas/backend-api/src/__tests__/api/list.test.ts
index c7d083dca..78301a255 100644
--- a/lambdas/backend-api/src/__tests__/api/list.test.ts
+++ b/lambdas/backend-api/src/__tests__/api/list.test.ts
@@ -76,12 +76,13 @@ describe('Template API - List', () => {
       },
     });
 
-    const event = mock<APIGatewayProxyEvent>({
-      requestContext: {
-        authorizer: { user: 'sub', clientId: 'nhs-notify-client-id' },
-      },
-      pathParameters: { templateId: '1' },
-    });
+    const event = mock<APIGatewayProxyEvent>();
+    event.requestContext.authorizer = {
+      user: 'sub',
+      clientId: 'nhs-notify-client-id',
+    };
+    event.pathParameters = { templateId: '1' };
+    event.queryStringParameters = null;
 
     const result = await handler(event, mock<Context>(), jest.fn());
 
@@ -93,13 +94,16 @@ describe('Template API - List', () => {
       }),
     });
 
-    expect(mocks.templateClient.listTemplates).toHaveBeenCalledWith({
-      userId: 'sub',
-      clientId: 'nhs-notify-client-id',
-    });
+    expect(mocks.templateClient.listTemplates).toHaveBeenCalledWith(
+      {
+        userId: 'sub',
+        clientId: 'nhs-notify-client-id',
+      },
+      null
+    );
   });
 
-  test('should return template', async () => {
+  test('should return template with no filters', async () => {
     const { handler, mocks } = setup();
 
     const template: TemplateDto = {
@@ -118,11 +122,13 @@ describe('Template API - List', () => {
       data: [template],
     });
 
-    const event = mock<APIGatewayProxyEvent>({
-      requestContext: {
-        authorizer: { user: 'sub', clientId: 'nhs-notify-client-id' },
-      },
-    });
+    const event = mock<APIGatewayProxyEvent>();
+    event.requestContext.authorizer = {
+      user: 'sub',
+      clientId: 'nhs-notify-client-id',
+    };
+
+    event.queryStringParameters = null;
 
     const result = await handler(event, mock<Context>(), jest.fn());
 
@@ -131,9 +137,63 @@ describe('Template API - List', () => {
       body: JSON.stringify({ statusCode: 200, data: [template] }),
     });
 
-    expect(mocks.templateClient.listTemplates).toHaveBeenCalledWith({
-      userId: 'sub',
+    expect(mocks.templateClient.listTemplates).toHaveBeenCalledWith(
+      {
+        userId: 'sub',
+        clientId: 'nhs-notify-client-id',
+      },
+      null
+    );
+  });
+
+  test('should return template with filters', async () => {
+    const { handler, mocks } = setup();
+
+    const template: TemplateDto = {
+      id: 'id',
+      templateType: 'EMAIL',
+      name: 'name',
+      message: 'message',
+      subject: 'subject',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      templateStatus: 'NOT_YET_SUBMITTED',
+      lockNumber: 1,
+    };
+
+    mocks.templateClient.listTemplates.mockResolvedValueOnce({
+      data: [template],
+    });
+
+    const event = mock<APIGatewayProxyEvent>();
+    event.requestContext.authorizer = {
+      user: 'sub',
       clientId: 'nhs-notify-client-id',
+    };
+
+    event.queryStringParameters = {
+      templateType: 'LETTER',
+      language: 'en',
+      letterType: 'x0',
+    };
+
+    const result = await handler(event, mock<Context>(), jest.fn());
+
+    expect(result).toEqual({
+      statusCode: 200,
+      body: JSON.stringify({ statusCode: 200, data: [template] }),
     });
+
+    expect(mocks.templateClient.listTemplates).toHaveBeenCalledWith(
+      {
+        userId: 'sub',
+        clientId: 'nhs-notify-client-id',
+      },
+      {
+        templateType: 'LETTER',
+        language: 'en',
+        letterType: 'x0',
+      }
+    );
   });
 });
diff --git a/lambdas/backend-api/src/__tests__/app/template-client.test.ts b/lambdas/backend-api/src/__tests__/app/template-client.test.ts
index c6207416c..904ef0c7d 100644
--- a/lambdas/backend-api/src/__tests__/app/template-client.test.ts
+++ b/lambdas/backend-api/src/__tests__/app/template-client.test.ts
@@ -16,6 +16,8 @@ import { createMockLogger } from 'nhs-notify-web-template-management-test-helper
 import { isoDateRegExp } from 'nhs-notify-web-template-management-test-helper-utils';
 import { ClientConfigRepository } from '../../infra/client-config-repository';
 import { isRightToLeft } from 'nhs-notify-web-template-management-utils/enum';
+import { TemplateQuery } from '../../infra/template-repository/query';
+import { TemplateFilter } from 'nhs-notify-backend-client/src/types/filters';
 
 jest.mock('node:crypto');
 jest.mock('nhs-notify-web-template-management-utils/enum');
@@ -50,6 +52,14 @@ const setup = () => {
 
   isRightToLeftMock.mockReturnValueOnce(false);
 
+  const queryMock = mock<TemplateQuery>({
+    templateStatus: jest.fn().mockReturnThis(),
+    excludeTemplateStatus: jest.fn().mockReturnThis(),
+    templateType: jest.fn().mockReturnThis(),
+    language: jest.fn().mockReturnThis(),
+    letterType: jest.fn().mockReturnThis(),
+  });
+
   return {
     templateClient,
     mocks: {
@@ -59,6 +69,7 @@ const setup = () => {
       logger,
       clientConfigRepository,
       isRightToLeftMock,
+      queryMock,
     },
     logMessages,
   };
@@ -1570,9 +1581,13 @@ describe('templateClient', () => {
 
   describe('listTemplates', () => {
     test('listTemplates should return a failure result, when fetching from the database unexpectedly fails', async () => {
-      const { templateClient, mocks } = setup();
+      const {
+        templateClient,
+        mocks: { templateRepository, queryMock },
+      } = setup();
 
-      mocks.templateRepository.list.mockResolvedValueOnce({
+      templateRepository.query.mockReturnValueOnce(queryMock);
+      queryMock.list.mockResolvedValueOnce({
         error: {
           errorMeta: {
             code: 500,
@@ -1583,7 +1598,7 @@ describe('templateClient', () => {
 
       const result = await templateClient.listTemplates(user);
 
-      expect(mocks.templateRepository.list).toHaveBeenCalledWith(user.clientId);
+      expect(templateRepository.query).toHaveBeenCalledWith(user.clientId);
 
       expect(result).toEqual({
         error: {
@@ -1595,8 +1610,11 @@ describe('templateClient', () => {
       });
     });
 
-    test('should filter out invalid templates', async () => {
-      const { templateClient, mocks } = setup();
+    test('should return templates', async () => {
+      const {
+        templateClient,
+        mocks: { templateRepository, queryMock },
+      } = setup();
 
       const template: TemplateDto = {
         id: templateId,
@@ -1609,37 +1627,63 @@ describe('templateClient', () => {
         templateStatus: 'NOT_YET_SUBMITTED',
         lockNumber: 1,
       };
-      const template2: TemplateDto = {
-        id: undefined as unknown as string,
-        templateType: 'EMAIL',
-        name: undefined as unknown as string,
-        message: 'message',
-        subject: 'subject',
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-        templateStatus: 'NOT_YET_SUBMITTED',
-        lockNumber: 1,
-      };
 
-      mocks.templateRepository.list.mockResolvedValueOnce({
-        data: [
-          { ...template, owner: user.userId, version: 1 },
-          { ...template2, owner: user.userId, version: 1 },
-        ],
+      templateRepository.query.mockReturnValueOnce(queryMock);
+
+      queryMock.list.mockResolvedValueOnce({
+        data: [template],
       });
 
-      const result = await templateClient.listTemplates(user);
+      const result = await templateClient.listTemplates(user, null);
 
-      expect(mocks.templateRepository.list).toHaveBeenCalledWith(user.clientId);
+      expect(templateRepository.query).toHaveBeenCalledWith(user.clientId);
+      expect(queryMock.excludeTemplateStatus).toHaveBeenCalledWith('DELETED');
+      expect(queryMock.templateStatus).not.toHaveBeenCalled();
+      expect(queryMock.templateType).not.toHaveBeenCalled();
+      expect(queryMock.language).not.toHaveBeenCalled();
+      expect(queryMock.letterType).not.toHaveBeenCalled();
 
       expect(result).toEqual({
         data: [template],
       });
     });
 
-    test('should return templates', async () => {
+    it('validates status filter parameter', async () => {
       const { templateClient, mocks } = setup();
 
+      const result = await templateClient.listTemplates(user, {
+        templateType: 'INVALID',
+      });
+
+      expect(result).toEqual({
+        error: expect.objectContaining({
+          errorMeta: {
+            code: 400,
+            description: 'Request failed validation',
+            details: {
+              templateType:
+                'Invalid option: expected one of "NHS_APP"|"EMAIL"|"SMS"|"LETTER"',
+            },
+          },
+        }),
+      });
+
+      expect(mocks.templateRepository.query).not.toHaveBeenCalled();
+    });
+
+    test('uses filters', async () => {
+      const {
+        templateClient,
+        mocks: { templateRepository, queryMock },
+      } = setup();
+
+      const filter: TemplateFilter = {
+        templateStatus: 'SUBMITTED',
+        templateType: 'NHS_APP',
+        language: 'en',
+        letterType: 'x0',
+      };
+
       const template: TemplateDto = {
         id: templateId,
         templateType: 'EMAIL',
@@ -1652,13 +1696,20 @@ describe('templateClient', () => {
         lockNumber: 1,
       };
 
-      mocks.templateRepository.list.mockResolvedValueOnce({
-        data: [{ ...template, owner: user.userId, version: 1 }],
+      templateRepository.query.mockReturnValueOnce(queryMock);
+
+      queryMock.list.mockResolvedValueOnce({
+        data: [template],
       });
 
-      const result = await templateClient.listTemplates(user);
+      const result = await templateClient.listTemplates(user, filter);
 
-      expect(mocks.templateRepository.list).toHaveBeenCalledWith(user.clientId);
+      expect(templateRepository.query).toHaveBeenCalledWith(user.clientId);
+      expect(queryMock.excludeTemplateStatus).toHaveBeenCalledWith('DELETED');
+      expect(queryMock.templateStatus).toHaveBeenCalledWith('SUBMITTED');
+      expect(queryMock.templateType).toHaveBeenCalledWith('NHS_APP');
+      expect(queryMock.language).toHaveBeenCalledWith('en');
+      expect(queryMock.letterType).toHaveBeenCalledWith('x0');
 
       expect(result).toEqual({
         data: [template],
diff --git a/lambdas/backend-api/src/__tests__/fixtures/template.ts b/lambdas/backend-api/src/__tests__/fixtures/template.ts
new file mode 100644
index 000000000..0d05e27b4
--- /dev/null
+++ b/lambdas/backend-api/src/__tests__/fixtures/template.ts
@@ -0,0 +1,154 @@
+import type {
+  CreateUpdateTemplate,
+  EmailProperties,
+  NhsAppProperties,
+  SmsProperties,
+  TemplateDto,
+  UploadLetterProperties,
+} from 'nhs-notify-backend-client';
+import { WithAttachments } from '../../infra/template-repository';
+import { DatabaseTemplate } from 'nhs-notify-web-template-management-utils';
+
+export const userId = 'user-id';
+export const clientId = 'client-id';
+export const ownerWithClientPrefix = `CLIENT#${clientId}`;
+export const user = { userId, clientId };
+
+const emailProperties: EmailProperties = {
+  message: 'message',
+  subject: 'pickles',
+  templateType: 'EMAIL',
+};
+
+const smsProperties: SmsProperties = {
+  message: 'message',
+  templateType: 'SMS',
+};
+
+const nhsAppProperties: NhsAppProperties = {
+  message: 'message',
+  templateType: 'NHS_APP',
+};
+
+const letterProperties: WithAttachments<UploadLetterProperties> = {
+  templateType: 'LETTER',
+  letterType: 'x0',
+  language: 'en',
+  files: {
+    pdfTemplate: {
+      fileName: 'template.pdf',
+      currentVersion: 'a',
+      virusScanStatus: 'PENDING',
+    },
+    testDataCsv: {
+      fileName: 'test.csv',
+      currentVersion: 'a',
+      virusScanStatus: 'PENDING',
+    },
+  },
+  campaignId: 'campaign-id',
+};
+
+const createTemplateProperties = { name: 'name' };
+
+const dtoProperties = {
+  templateStatus: 'NOT_YET_SUBMITTED' as const,
+  id: 'abc-def-ghi-jkl-123',
+  createdAt: '2024-12-27T00:00:00.000Z',
+  updatedAt: '2024-12-27T00:00:00.000Z',
+  updatedBy: userId,
+  clientId,
+  createdBy: userId,
+  lockNumber: 0,
+};
+
+const databaseTemplateProperties = {
+  owner: ownerWithClientPrefix,
+  version: 1,
+};
+
+export type TemplateFixture<T> = {
+  createUpdateTemplate: WithAttachments<CreateUpdateTemplate> & T;
+  dtoTemplate: TemplateDto & T;
+  databaseTemplate: DatabaseTemplate & T;
+};
+
+export const makeAppTemplate = (
+  overrides: Partial<DatabaseTemplate & NhsAppProperties> = {}
+): TemplateFixture<NhsAppProperties> => {
+  const createUpdateTemplate = {
+    ...createTemplateProperties,
+    ...nhsAppProperties,
+    ...overrides,
+  };
+  const dtoTemplate = {
+    ...createUpdateTemplate,
+    ...dtoProperties,
+  };
+  const databaseTemplate = {
+    ...dtoTemplate,
+    ...databaseTemplateProperties,
+  };
+
+  return { createUpdateTemplate, dtoTemplate, databaseTemplate };
+};
+
+export const makeEmailTemplate = (
+  overrides: Partial<TemplateDto & EmailProperties> = {}
+): TemplateFixture<EmailProperties> => {
+  const createUpdateTemplate = {
+    ...createTemplateProperties,
+    ...emailProperties,
+    ...overrides,
+  };
+  const dtoTemplate = {
+    ...createUpdateTemplate,
+    ...dtoProperties,
+  };
+  const databaseTemplate = {
+    ...dtoTemplate,
+    ...databaseTemplateProperties,
+  };
+
+  return { createUpdateTemplate, dtoTemplate, databaseTemplate };
+};
+
+export const makeSmsTemplate = (
+  overrides: Partial<TemplateDto & SmsProperties> = {}
+): TemplateFixture<SmsProperties> => {
+  const createUpdateTemplate = {
+    ...createTemplateProperties,
+    ...smsProperties,
+    ...overrides,
+  };
+  const dtoTemplate = {
+    ...createUpdateTemplate,
+    ...dtoProperties,
+  };
+  const databaseTemplate = {
+    ...dtoTemplate,
+    ...databaseTemplateProperties,
+  };
+
+  return { createUpdateTemplate, dtoTemplate, databaseTemplate };
+};
+
+export const makeLetterTemplate = (
+  overrides: Partial<TemplateDto & WithAttachments<UploadLetterProperties>> = {}
+): TemplateFixture<UploadLetterProperties> => {
+  const createUpdateTemplate = {
+    ...createTemplateProperties,
+    ...letterProperties,
+    ...overrides,
+  };
+  const dtoTemplate = {
+    ...createUpdateTemplate,
+    ...dtoProperties,
+  };
+  const databaseTemplate = {
+    ...dtoTemplate,
+    ...databaseTemplateProperties,
+  };
+
+  return { createUpdateTemplate, dtoTemplate, databaseTemplate };
+};
diff --git a/lambdas/backend-api/src/__tests__/infra/routing-config-repository/query.test.ts b/lambdas/backend-api/src/__tests__/infra/routing-config-repository/query.test.ts
index 21c36fdd8..0624cf08c 100644
--- a/lambdas/backend-api/src/__tests__/infra/routing-config-repository/query.test.ts
+++ b/lambdas/backend-api/src/__tests__/infra/routing-config-repository/query.test.ts
@@ -127,16 +127,16 @@ describe('RoutingConfigRepo#query', () => {
         TableName: TABLE_NAME,
         KeyConditionExpression: '#owner = :owner',
         FilterExpression:
-          '(#status <> :notStatus0 AND #status <> :notStatus1 AND #status <> :notStatus2)',
+          'NOT(#status IN (:notstatus0, :notstatus1, :notstatus2))',
         ExpressionAttributeNames: {
           '#owner': 'owner',
           '#status': 'status',
         },
         ExpressionAttributeValues: {
           ':owner': clientOwnerKey,
-          ':notStatus0': 'COMPLETED',
-          ':notStatus1': 'DELETED',
-          ':notStatus2': 'DRAFT',
+          ':notstatus0': 'COMPLETED',
+          ':notstatus1': 'DELETED',
+          ':notstatus2': 'DRAFT',
         },
       });
     });
@@ -159,14 +159,14 @@ describe('RoutingConfigRepo#query', () => {
         TableName: TABLE_NAME,
         KeyConditionExpression: '#owner = :owner',
         FilterExpression:
-          '(#status IN (:status0)) AND (#status <> :notStatus0)',
+          '(#status IN (:status0)) AND NOT(#status IN (:notstatus0))',
         ExpressionAttributeNames: {
           '#owner': 'owner',
           '#status': 'status',
         },
         ExpressionAttributeValues: {
           ':owner': clientOwnerKey,
-          ':notStatus0': 'DELETED',
+          ':notstatus0': 'DELETED',
           ':status0': 'DRAFT',
         },
       });
@@ -192,14 +192,14 @@ describe('RoutingConfigRepo#query', () => {
         TableName: TABLE_NAME,
         KeyConditionExpression: '#owner = :owner',
         FilterExpression:
-          '(#status IN (:status0)) AND (#status <> :notStatus0)',
+          '(#status IN (:status0)) AND NOT(#status IN (:notstatus0))',
         ExpressionAttributeNames: {
           '#owner': 'owner',
           '#status': 'status',
         },
         ExpressionAttributeValues: {
           ':owner': clientOwnerKey,
-          ':notStatus0': 'DELETED',
+          ':notstatus0': 'DELETED',
           ':status0': 'DRAFT',
         },
       });
diff --git a/lambdas/backend-api/src/__tests__/infra/template-repository/query.test.ts b/lambdas/backend-api/src/__tests__/infra/template-repository/query.test.ts
new file mode 100644
index 000000000..5ba3c9727
--- /dev/null
+++ b/lambdas/backend-api/src/__tests__/infra/template-repository/query.test.ts
@@ -0,0 +1,462 @@
+import { DynamoDBClient } from '@aws-sdk/client-dynamodb';
+import { DynamoDBDocumentClient, QueryCommand } from '@aws-sdk/lib-dynamodb';
+import 'aws-sdk-client-mock-jest';
+import { mockClient } from 'aws-sdk-client-mock';
+import { TemplateRepository } from '../../../infra';
+import {
+  makeAppTemplate,
+  makeEmailTemplate,
+  makeLetterTemplate,
+  makeSmsTemplate,
+} from '../../fixtures/template';
+import { DatabaseTemplate } from 'nhs-notify-web-template-management-utils';
+
+jest.mock('nhs-notify-web-template-management-utils/logger');
+
+const TABLE_NAME = 'template-table-name';
+
+const clientId = '89077697-ca6d-47fc-b233-3281fbd15579';
+const clientOwnerKey = `CLIENT#${clientId}`;
+
+const appTemplates = makeAppTemplate();
+const emailTemplates = makeEmailTemplate();
+const smsTemplates = makeSmsTemplate();
+const letterTemplates = makeLetterTemplate();
+
+function setup() {
+  const dynamo = mockClient(DynamoDBDocumentClient);
+
+  const repo = new TemplateRepository(
+    // pass an actual doc client - it gets intercepted up by mockClient,
+    // but paginateQuery needs the real deal
+    DynamoDBDocumentClient.from(new DynamoDBClient({})),
+    TABLE_NAME
+  );
+
+  const mocks = { dynamo };
+
+  return { mocks, repo };
+}
+
+describe('TemplateRepo#query', () => {
+  describe('list', () => {
+    test('queries by owner, paginates across pages, returns all items', async () => {
+      const { repo, mocks } = setup();
+
+      const page1: DatabaseTemplate[] = [
+        appTemplates.databaseTemplate,
+        emailTemplates.databaseTemplate,
+      ];
+      const page2: DatabaseTemplate[] = [
+        smsTemplates.databaseTemplate,
+        letterTemplates.databaseTemplate,
+      ];
+
+      mocks.dynamo
+        .on(QueryCommand)
+        .resolvesOnce({
+          Items: page1,
+          LastEvaluatedKey: {
+            owner: clientOwnerKey,
+            id: emailTemplates.databaseTemplate.id,
+          },
+        })
+        .resolvesOnce({
+          Items: page2,
+        });
+
+      const result = await repo.query(clientId).list();
+
+      expect(mocks.dynamo).toHaveReceivedCommandTimes(QueryCommand, 2);
+      expect(mocks.dynamo).toHaveReceivedNthCommandWith(1, QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+        },
+        ExclusiveStartKey: {
+          owner: clientOwnerKey,
+          id: emailTemplates.databaseTemplate.id,
+        },
+      });
+      expect(mocks.dynamo).toHaveReceivedNthCommandWith(2, QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+        },
+      });
+
+      expect(result.data).toEqual([
+        appTemplates.dtoTemplate,
+        emailTemplates.dtoTemplate,
+        smsTemplates.dtoTemplate,
+        letterTemplates.dtoTemplate,
+      ]);
+    });
+
+    test('supports filtering by status (chainable)', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({
+        Items: [],
+      });
+
+      await repo
+        .query(clientId)
+        .templateStatus('SUBMITTED', 'DELETED')
+        .templateStatus('NOT_YET_SUBMITTED')
+        .list();
+
+      expect(mocks.dynamo).toHaveReceivedCommandTimes(QueryCommand, 1);
+      expect(mocks.dynamo).toHaveReceivedCommandWith(QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        FilterExpression:
+          '(#templateStatus IN (:templateStatus0, :templateStatus1, :templateStatus2))',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+          '#templateStatus': 'templateStatus',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+          ':templateStatus0': 'SUBMITTED',
+          ':templateStatus1': 'DELETED',
+          ':templateStatus2': 'NOT_YET_SUBMITTED',
+        },
+      });
+    });
+
+    test('supports excluding statuses (chainable)', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({
+        Items: [],
+      });
+
+      await repo
+        .query(clientId)
+        .excludeTemplateStatus('SUBMITTED', 'DELETED')
+        .excludeTemplateStatus('NOT_YET_SUBMITTED')
+        .list();
+
+      expect(mocks.dynamo).toHaveReceivedCommandTimes(QueryCommand, 1);
+      expect(mocks.dynamo).toHaveReceivedCommandWith(QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        FilterExpression:
+          'NOT(#templateStatus IN (:nottemplateStatus0, :nottemplateStatus1, :nottemplateStatus2))',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+          '#templateStatus': 'templateStatus',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+          ':nottemplateStatus0': 'SUBMITTED',
+          ':nottemplateStatus1': 'DELETED',
+          ':nottemplateStatus2': 'NOT_YET_SUBMITTED',
+        },
+      });
+    });
+
+    test('supports filtering by template type (chainable)', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({
+        Items: [],
+      });
+
+      await repo
+        .query(clientId)
+        .templateType('SMS', 'NHS_APP')
+        .templateType('EMAIL')
+        .list();
+
+      expect(mocks.dynamo).toHaveReceivedCommandTimes(QueryCommand, 1);
+      expect(mocks.dynamo).toHaveReceivedCommandWith(QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        FilterExpression:
+          '(#templateType IN (:templateType0, :templateType1, :templateType2))',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+          '#templateType': 'templateType',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+          ':templateType0': 'SMS',
+          ':templateType1': 'NHS_APP',
+          ':templateType2': 'EMAIL',
+        },
+      });
+    });
+
+    test('supports filtering by language(chainable)', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({
+        Items: [],
+      });
+
+      await repo.query(clientId).language('en', 'fr').language('es').list();
+
+      expect(mocks.dynamo).toHaveReceivedCommandTimes(QueryCommand, 1);
+      expect(mocks.dynamo).toHaveReceivedCommandWith(QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        FilterExpression: '(#language IN (:language0, :language1, :language2))',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+          '#language': 'language',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+          ':language0': 'en',
+          ':language1': 'fr',
+          ':language2': 'es',
+        },
+      });
+    });
+
+    test('supports filtering by letter type (chainable)', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({
+        Items: [],
+      });
+
+      await repo.query(clientId).letterType('x0', 'x1').letterType('q4').list();
+
+      expect(mocks.dynamo).toHaveReceivedCommandTimes(QueryCommand, 1);
+      expect(mocks.dynamo).toHaveReceivedCommandWith(QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        FilterExpression:
+          '(#letterType IN (:letterType0, :letterType1, :letterType2))',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+          '#letterType': 'letterType',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+          ':letterType0': 'x0',
+          ':letterType1': 'x1',
+          ':letterType2': 'q4',
+        },
+      });
+    });
+
+    test('supports mixed filters', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({
+        Items: [],
+      });
+
+      await repo
+        .query(clientId)
+        .templateStatus('SUBMITTED')
+        .excludeTemplateStatus('DELETED')
+        .templateType('LETTER')
+        .language('en')
+        .letterType('x0')
+        .list();
+
+      expect(mocks.dynamo).toHaveReceivedCommandTimes(QueryCommand, 1);
+      expect(mocks.dynamo).toHaveReceivedCommandWith(QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        FilterExpression:
+          '(#templateStatus IN (:templateStatus0)) AND NOT(#templateStatus IN (:nottemplateStatus0)) AND (#templateType IN (:templateType0)) AND (#language IN (:language0)) AND (#letterType IN (:letterType0))',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+          '#templateStatus': 'templateStatus',
+          '#templateType': 'templateType',
+          '#language': 'language',
+          '#letterType': 'letterType',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+          ':nottemplateStatus0': 'DELETED',
+          ':templateStatus0': 'SUBMITTED',
+          ':templateType0': 'LETTER',
+          ':language0': 'en',
+          ':letterType0': 'x0',
+        },
+      });
+    });
+
+    test('dedupes filters', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({
+        Items: [],
+      });
+
+      await repo
+        .query(clientId)
+        .templateStatus('SUBMITTED')
+        .templateStatus('SUBMITTED')
+        .excludeTemplateStatus('DELETED')
+        .excludeTemplateStatus('DELETED')
+        .templateType('LETTER')
+        .templateType('LETTER')
+        .language('en')
+        .language('en')
+        .letterType('x0')
+        .letterType('x0')
+        .list();
+
+      expect(mocks.dynamo).toHaveReceivedCommandTimes(QueryCommand, 1);
+      expect(mocks.dynamo).toHaveReceivedCommandWith(QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        FilterExpression:
+          '(#templateStatus IN (:templateStatus0)) AND NOT(#templateStatus IN (:nottemplateStatus0)) AND (#templateType IN (:templateType0)) AND (#language IN (:language0)) AND (#letterType IN (:letterType0))',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+          '#templateStatus': 'templateStatus',
+          '#templateType': 'templateType',
+          '#language': 'language',
+          '#letterType': 'letterType',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+          ':nottemplateStatus0': 'DELETED',
+          ':templateStatus0': 'SUBMITTED',
+          ':templateType0': 'LETTER',
+          ':language0': 'en',
+          ':letterType0': 'x0',
+        },
+      });
+    });
+
+    test('filters out invalid template items', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({
+        Items: [
+          appTemplates.databaseTemplate,
+          { owner: clientOwnerKey, id: '2eb0b8f5-63f0-4512-8a95-5b82e7c4b07b' },
+          emailTemplates.databaseTemplate,
+        ],
+      });
+
+      const result = await repo.query(clientId).list();
+
+      expect(result.data).toEqual([
+        appTemplates.dtoTemplate,
+        emailTemplates.dtoTemplate,
+      ]);
+    });
+
+    test('handles no items from dynamo', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({});
+
+      const result = await repo.query(clientId).list();
+
+      expect(result.data).toEqual([]);
+    });
+
+    test('handles exceptions from dynamodb', async () => {
+      const { repo, mocks } = setup();
+
+      const e = new Error('oh no');
+
+      mocks.dynamo.on(QueryCommand).rejectsOnce(e);
+
+      const result = await repo.query(clientId).list();
+
+      expect(result.error).toMatchObject({
+        actualError: e,
+        errorMeta: expect.objectContaining({ code: 500 }),
+      });
+      expect(result.data).toBeUndefined();
+    });
+  });
+
+  describe('count', () => {
+    test('queries by owner, paginates across pages, returns count of items', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo
+        .on(QueryCommand)
+        .resolvesOnce({
+          Count: 2,
+          LastEvaluatedKey: {
+            owner: clientOwnerKey,
+            id: emailTemplates.databaseTemplate.id,
+          },
+        })
+        .resolvesOnce({
+          Count: 1,
+        });
+
+      const result = await repo.query(clientId).count();
+
+      expect(mocks.dynamo).toHaveReceivedCommandTimes(QueryCommand, 2);
+      expect(mocks.dynamo).toHaveReceivedNthCommandWith(1, QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+        },
+        Select: 'COUNT',
+        ExclusiveStartKey: {
+          owner: clientOwnerKey,
+          id: emailTemplates.databaseTemplate.id,
+        },
+      });
+      expect(mocks.dynamo).toHaveReceivedNthCommandWith(2, QueryCommand, {
+        TableName: TABLE_NAME,
+        KeyConditionExpression: '#owner = :owner',
+        ExpressionAttributeNames: {
+          '#owner': 'owner',
+        },
+        ExpressionAttributeValues: {
+          ':owner': clientOwnerKey,
+        },
+        Select: 'COUNT',
+      });
+
+      expect(result.data).toEqual({ count: 3 });
+    });
+
+    test('handles no items from dynamo', async () => {
+      const { repo, mocks } = setup();
+
+      mocks.dynamo.on(QueryCommand).resolvesOnce({});
+
+      const result = await repo.query(clientId).count();
+
+      expect(result.data).toEqual({ count: 0 });
+    });
+
+    test('handles exceptions from dynamodb', async () => {
+      const { repo, mocks } = setup();
+
+      const e = new Error('oh no');
+
+      mocks.dynamo.on(QueryCommand).rejectsOnce(e);
+
+      const result = await repo.query(clientId).count();
+
+      expect(result.error).toMatchObject({
+        actualError: e,
+        errorMeta: expect.objectContaining({ code: 500 }),
+      });
+      expect(result.data).toBeUndefined();
+    });
+  });
+});
diff --git a/lambdas/backend-api/src/__tests__/infra/template-repository.test.ts b/lambdas/backend-api/src/__tests__/infra/template-repository/repository.test.ts
similarity index 92%
rename from lambdas/backend-api/src/__tests__/infra/template-repository.test.ts
rename to lambdas/backend-api/src/__tests__/infra/template-repository/repository.test.ts
index 3bee7e17e..ec1525d69 100644
--- a/lambdas/backend-api/src/__tests__/infra/template-repository.test.ts
+++ b/lambdas/backend-api/src/__tests__/infra/template-repository/repository.test.ts
@@ -9,18 +9,22 @@ import {
 } from '@aws-sdk/lib-dynamodb';
 import { ConditionalCheckFailedException } from '@aws-sdk/client-dynamodb';
 import { mockClient } from 'aws-sdk-client-mock';
-import {
-  EmailProperties,
-  NhsAppProperties,
-  SmsProperties,
-  UploadLetterProperties,
-  ValidatedCreateUpdateTemplateNonLetter,
-} from 'nhs-notify-backend-client';
 import { logger } from 'nhs-notify-web-template-management-utils/logger';
-import { TemplateRepository, WithAttachments } from '../../infra';
+import { TemplateRepository } from '../../../infra';
 import { marshall } from '@aws-sdk/util-dynamodb';
-import { DatabaseTemplate } from 'nhs-notify-web-template-management-utils';
+import {
+  CreateUpdateEmailTemplate,
+  CreateUpdateNHSAppTemplate,
+  CreateUpdateSMSTemplate,
+  DatabaseTemplate,
+} from 'nhs-notify-web-template-management-utils';
 import { calculateTTL } from '@backend-api/utils/calculate-ttl';
+import {
+  makeAppTemplate,
+  makeEmailTemplate,
+  makeLetterTemplate,
+  makeSmsTemplate,
+} from '@backend-api/__tests__/fixtures/template';
 
 jest.mock('nhs-notify-web-template-management-utils/logger');
 jest.mock('node:crypto');
@@ -29,6 +33,11 @@ jest.mock('@backend-api/utils/calculate-ttl');
 const templateId = 'abc-def-ghi-jkl-123';
 const templatesTableName = 'templates';
 
+const appTemplates = makeAppTemplate();
+const emailTemplates = makeEmailTemplate();
+const smsTemplates = makeSmsTemplate();
+const letterTemplates = makeLetterTemplate();
+
 const setup = () => {
   const ddbDocClient = mockClient(DynamoDBDocumentClient);
 
@@ -45,80 +54,6 @@ const clientId = 'client-id';
 const ownerWithClientPrefix = `CLIENT#${clientId}`;
 const user = { userId, clientId };
 
-const emailProperties: EmailProperties = {
-  message: 'message',
-  subject: 'pickles',
-  templateType: 'EMAIL',
-};
-
-const smsProperties: SmsProperties = {
-  message: 'message',
-  templateType: 'SMS',
-};
-
-const nhsAppProperties: NhsAppProperties = {
-  message: 'message',
-  templateType: 'NHS_APP',
-};
-
-const letterProperties: WithAttachments<UploadLetterProperties> = {
-  templateType: 'LETTER',
-  letterType: 'x0',
-  language: 'en',
-  files: {
-    pdfTemplate: {
-      fileName: 'template.pdf',
-      currentVersion: 'a',
-      virusScanStatus: 'PENDING',
-    },
-    testDataCsv: {
-      fileName: 'test.csv',
-      currentVersion: 'a',
-      virusScanStatus: 'PENDING',
-    },
-  },
-  campaignId: 'campaign-id',
-};
-
-const createTemplateProperties = { name: 'name' };
-
-const updateTemplateProperties = {
-  ...createTemplateProperties,
-  templateStatus: 'NOT_YET_SUBMITTED' as const,
-};
-
-const databaseTemplateProperties = {
-  ...updateTemplateProperties,
-  id: 'abc-def-ghi-jkl-123',
-  owner: `CLIENT#${clientId}`,
-  version: 1,
-  createdAt: '2024-12-27T00:00:00.000Z',
-  updatedAt: '2024-12-27T00:00:00.000Z',
-  updatedBy: userId,
-  clientId,
-  createdBy: userId,
-};
-
-const emailTemplate: DatabaseTemplate = {
-  ...emailProperties,
-  ...databaseTemplateProperties,
-};
-
-const smsTemplate: DatabaseTemplate = {
-  ...smsProperties,
-  ...databaseTemplateProperties,
-};
-
-const nhsAppTemplate: DatabaseTemplate = {
-  ...nhsAppProperties,
-  ...databaseTemplateProperties,
-};
-
-const letterTemplate: DatabaseTemplate = {
-  ...letterProperties,
-  ...databaseTemplateProperties,
-};
-
 describe('templateRepository', () => {
   beforeAll(() => {
     jest.useFakeTimers();
@@ -218,63 +153,11 @@ describe('templateRepository', () => {
           TableName: templatesTableName,
           Key: { id: templateId, owner: ownerWithClientPrefix },
         })
-        .resolves({ Item: emailTemplate });
+        .resolves({ Item: emailTemplates.databaseTemplate });
 
       const response = await templateRepository.get(templateId, clientId);
 
-      expect(response).toEqual({ data: emailTemplate });
-    });
-  });
-
-  describe('list', () => {
-    test('should return an empty array when no items', async () => {
-      const { templateRepository, mocks } = setup();
-
-      mocks.ddbDocClient.on(QueryCommand).resolves({ Items: undefined });
-
-      const response = await templateRepository.list(clientId);
-
-      expect(response).toEqual({ data: [] });
-    });
-
-    test('should error when unexpected error occurs', async () => {
-      const { templateRepository, mocks } = setup();
-
-      mocks.ddbDocClient
-        .on(QueryCommand)
-        .rejects(new Error('InternalServerError'));
-      const response = await templateRepository.list(clientId);
-
-      expect(response).toEqual({
-        error: {
-          errorMeta: {
-            code: 500,
-            description: 'Failed to list templates',
-          },
-          actualError: new Error('InternalServerError'),
-        },
-      });
-    });
-
-    test('should return templates', async () => {
-      const { templateRepository, mocks } = setup();
-
-      mocks.ddbDocClient
-        .on(QueryCommand, {
-          TableName: templatesTableName,
-          KeyConditionExpression: '#owner = :owner',
-          ExpressionAttributeNames: { '#owner': 'owner' },
-          ExpressionAttributeValues: { ':owner': ownerWithClientPrefix },
-        })
-        .resolves({
-          Items: [emailTemplate, smsTemplate, nhsAppTemplate, letterTemplate],
-        });
-
-      const response = await templateRepository.list(clientId);
-
-      expect(response).toEqual({
-        data: [emailTemplate, smsTemplate, nhsAppTemplate, letterTemplate],
-      });
+      expect(response).toEqual({ data: emailTemplates.databaseTemplate });
     });
   });
 
@@ -307,43 +190,32 @@ describe('templateRepository', () => {
       });
     });
 
-    test.each([
-      emailProperties,
-      smsProperties,
-      nhsAppProperties,
-      letterProperties,
-    ])(
+    test.each([emailTemplates, smsTemplates, appTemplates, letterTemplates])(
       'should create template of type $templateType',
-      async (channelProperties) => {
+      async ({ createUpdateTemplate, databaseTemplate }) => {
         const { templateRepository, mocks } = setup();
 
-        const template = {
-          ...channelProperties,
-          ...databaseTemplateProperties,
-          lockNumber: 0,
-        };
-
         mocks.ddbDocClient
           .on(PutCommand, {
             TableName: templatesTableName,
-            Item: template,
+            Item: databaseTemplate,
           })
           .resolves({});
 
         const response = await templateRepository.create(
-          { ...channelProperties, ...createTemplateProperties },
+          createUpdateTemplate,
           user,
           'NOT_YET_SUBMITTED',
           'campaign-id'
         );
 
         expect(response).toEqual({
-          data: template,
+          data: databaseTemplate,
         });
 
         expect(mocks.ddbDocClient).toHaveReceivedCommandWith(PutCommand, {
           ConditionExpression: 'attribute_not_exists(id)',
-          Item: template,
+          Item: databaseTemplate,
           TableName: templatesTableName,
         });
       }
@@ -354,15 +226,13 @@ describe('templateRepository', () => {
     test('should correctly update email template and return updated value', async () => {
       const { templateRepository, mocks } = setup();
 
-      const requestedUpdate: ValidatedCreateUpdateTemplateNonLetter = {
-        ...emailProperties,
-        ...updateTemplateProperties,
+      const requestedUpdate: CreateUpdateEmailTemplate = {
+        ...emailTemplates.createUpdateTemplate,
         name: 'updated-name',
       };
 
       const updated: DatabaseTemplate = {
-        ...emailProperties,
-        ...databaseTemplateProperties,
+        ...emailTemplates.databaseTemplate,
         ...requestedUpdate,
         lockNumber: 2,
       };
@@ -427,15 +297,13 @@ describe('templateRepository', () => {
     test('should correctly update sms template and return updated value', async () => {
       const { templateRepository, mocks } = setup();
 
-      const requestedUpdate: ValidatedCreateUpdateTemplateNonLetter = {
-        ...smsProperties,
-        ...updateTemplateProperties,
+      const requestedUpdate: CreateUpdateSMSTemplate = {
+        ...smsTemplates.createUpdateTemplate,
         name: 'updated-name',
       };
 
       const updated: DatabaseTemplate = {
-        ...smsProperties,
-        ...databaseTemplateProperties,
+        ...smsTemplates.databaseTemplate,
         ...requestedUpdate,
         lockNumber: 2,
       };
@@ -498,15 +366,13 @@ describe('templateRepository', () => {
     test('should correctly update nhsapp template and return updated value', async () => {
       const { templateRepository, mocks } = setup();
 
-      const requestedUpdate: ValidatedCreateUpdateTemplateNonLetter = {
-        ...nhsAppProperties,
-        ...updateTemplateProperties,
+      const requestedUpdate: CreateUpdateNHSAppTemplate = {
+        ...appTemplates.createUpdateTemplate,
         name: 'updated-name',
       };
 
       const updated: DatabaseTemplate = {
-        ...nhsAppProperties,
-        ...databaseTemplateProperties,
+        ...appTemplates.databaseTemplate,
         ...requestedUpdate,
         lockNumber: 2,
       };
diff --git a/lambdas/backend-api/src/api/list.ts b/lambdas/backend-api/src/api/list.ts
index b6f285edf..34177b64e 100644
--- a/lambdas/backend-api/src/api/list.ts
+++ b/lambdas/backend-api/src/api/list.ts
@@ -14,10 +14,13 @@ export function createHandler({
       return apiFailure(400, 'Invalid request');
     }
 
-    const { data, error } = await templateClient.listTemplates({
-      userId,
-      clientId,
-    });
+    const { data, error } = await templateClient.listTemplates(
+      {
+        userId,
+        clientId,
+      },
+      event.queryStringParameters
+    );
 
     if (error) {
       return apiFailure(
diff --git a/lambdas/backend-api/src/app/template-client.ts b/lambdas/backend-api/src/app/template-client.ts
index 5c9388818..b1fd904e8 100644
--- a/lambdas/backend-api/src/app/template-client.ts
+++ b/lambdas/backend-api/src/app/template-client.ts
@@ -6,14 +6,14 @@ import {
   TemplateDto,
   CreateUpdateTemplate,
   ErrorCase,
-  isTemplateDtoValid,
   LetterFiles,
   TemplateStatus,
   $CreateUpdateNonLetter,
   ClientConfiguration,
   $LockNumber,
+  $TemplateDto,
+  $TemplateFilter,
 } from 'nhs-notify-backend-client';
-import { TemplateRepository } from '../infra';
 import { LETTER_MULTIPART } from 'nhs-notify-backend-client/src/schemas/constants';
 import {
   $UploadLetterTemplate,
@@ -27,6 +27,8 @@ import { z } from 'zod/v4';
 import { LetterUploadRepository } from '../infra/letter-upload-repository';
 import { ProofingQueue } from '../infra/proofing-queue';
 import { ClientConfigRepository } from '../infra/client-config-repository';
+import { TemplateRepository } from '../infra';
+import { TemplateFilter } from 'nhs-notify-backend-client/src/types/filters';
 
 export class TemplateClient {
   private $LetterForProofing = z.intersection(
@@ -415,22 +417,32 @@ export class TemplateClient {
     return success(templateDTO);
   }
 
-  async listTemplates(user: User): Promise<Result<TemplateDto[]>> {
-    const listResult = await this.templateRepository.list(user.clientId);
+  async listTemplates(
+    user: User,
+    filters?: unknown
+  ): Promise<Result<TemplateDto[]>> {
+    let parsedFilters: TemplateFilter = {};
+
+    if (filters) {
+      const validation = await validate($TemplateFilter, filters);
 
-    if (listResult.error) {
-      this.logger
-        .child({ ...listResult.error.errorMeta, user })
-        .error('Failed to list templates', listResult.error.actualError);
+      if (validation.error) {
+        return validation;
+      }
 
-      return listResult;
+      parsedFilters = validation.data;
     }
 
-    const templateDTOs = listResult.data
-      .map((template) => this.mapDatabaseObjectToDTO(template))
-      .flatMap((t) => t ?? []);
+    const { templateStatus, templateType, language, letterType } =
+      parsedFilters;
+    const query = this.templateRepository.query(user.clientId);
+    query.excludeTemplateStatus('DELETED');
+    if (templateStatus) query.templateStatus(templateStatus);
+    if (templateType) query.templateType(templateType);
+    if (language) query.language(language);
+    if (letterType) query.letterType(letterType);
 
-    return success(templateDTOs);
+    return query.list();
   }
 
   async requestProof(
@@ -627,6 +639,10 @@ export class TemplateClient {
   private mapDatabaseObjectToDTO(
     databaseTemplate: DatabaseTemplate
   ): TemplateDto | undefined {
-    return isTemplateDtoValid(databaseTemplate);
+    const parseResult = $TemplateDto.safeParse(databaseTemplate);
+    if (!parseResult.success) {
+      this.logger.child(databaseTemplate).error('Failed to parse template');
+    }
+    return parseResult.data;
   }
 }
diff --git a/lambdas/backend-api/src/infra/abstract-query.ts b/lambdas/backend-api/src/infra/abstract-query.ts
new file mode 100644
index 000000000..22b48bfb1
--- /dev/null
+++ b/lambdas/backend-api/src/infra/abstract-query.ts
@@ -0,0 +1,143 @@
+import { z } from 'zod/v4';
+import {
+  paginateQuery,
+  type DynamoDBDocumentClient,
+  type NativeAttributeValue,
+  type QueryCommandInput,
+} from '@aws-sdk/lib-dynamodb';
+import { ApplicationResult, failure, success } from '@backend-api/utils/result';
+import { ErrorCase } from 'nhs-notify-backend-client';
+import { logger } from 'nhs-notify-web-template-management-utils/logger';
+
+export type FilterAction = 'INCLUDE' | 'EXCLUDE';
+
+export abstract class AbstractQuery<T> {
+  private returnCount = false;
+
+  private ExpressionAttributeNames: Record<string, string> = {};
+  private ExpressionAttributeValues: Record<string, NativeAttributeValue> = {};
+  private filters: string[] = [];
+
+  constructor(
+    private readonly docClient: DynamoDBDocumentClient,
+    private readonly objectName: string,
+    private readonly objectSchema: z.ZodType<T>,
+    private readonly tableName: string,
+    private readonly owner: string
+  ) {}
+
+  /** Execute the query and return a list of all matching items */
+  async list(): Promise<ApplicationResult<T[]>> {
+    try {
+      this.returnCount = false;
+
+      const query = this.build();
+
+      const collected: T[] = [];
+
+      const paginator = paginateQuery({ client: this.docClient }, query);
+
+      for await (const page of paginator) {
+        for (const item of page.Items ?? []) {
+          const parsed = this.objectSchema.safeParse(item);
+          if (parsed.success) {
+            collected.push(parsed.data);
+          } else {
+            logger.warn(`Filtered out invalid ${this.objectName} item`, {
+              owner: this.owner,
+              id: item.id,
+              issues: parsed.error.issues,
+            });
+          }
+        }
+      }
+
+      return success(collected);
+    } catch (error) {
+      return failure(
+        ErrorCase.INTERNAL,
+        `Error listing ${this.objectName}s`,
+        error
+      );
+    }
+  }
+
+  /** Execute the query and return a count of all matching items */
+  async count(): Promise<ApplicationResult<{ count: number }>> {
+    try {
+      this.returnCount = true;
+
+      const query = this.build();
+
+      let count = 0;
+
+      const paginator = paginateQuery({ client: this.docClient }, query);
+
+      for await (const page of paginator) {
+        if (page.Count) {
+          count += page.Count;
+        }
+      }
+
+      return success({ count });
+    } catch (error) {
+      return failure(
+        ErrorCase.INTERNAL,
+        `Error counting ${this.objectName}s`,
+        error
+      );
+    }
+  }
+
+  private build() {
+    this.ExpressionAttributeNames['#owner'] = 'owner';
+    this.ExpressionAttributeValues[':owner'] = this.owner;
+
+    this.addFilters();
+
+    const query: QueryCommandInput = {
+      TableName: this.tableName,
+      KeyConditionExpression: '#owner = :owner',
+      ExpressionAttributeNames: this.ExpressionAttributeNames,
+      ExpressionAttributeValues: this.ExpressionAttributeValues,
+    };
+
+    if (this.filters.length > 0) {
+      query.FilterExpression = this.filters.join(' AND ');
+    }
+
+    if (this.returnCount) {
+      query.Select = 'COUNT';
+    }
+
+    return query;
+  }
+
+  protected abstract addFilters(): void;
+
+  protected addFilterToQuery(
+    fieldName: string,
+    action: FilterAction,
+    fieldValues: string[]
+  ) {
+    if (fieldValues.length > 0) {
+      const attributeName = `#${fieldName}`;
+      if (!this.ExpressionAttributeNames[attributeName]) {
+        this.ExpressionAttributeNames[attributeName] = fieldName;
+      }
+
+      const uniqueValues = [...new Set(fieldValues)];
+      const attributeValues: string[] = [];
+
+      for (const [i, value] of uniqueValues.entries()) {
+        const attributeValue = `:${action === 'EXCLUDE' ? 'not' : ''}${fieldName}${i}`;
+        this.ExpressionAttributeValues[attributeValue] = value;
+        attributeValues.push(attributeValue);
+      }
+
+      this.filters.push(
+        `${action === 'EXCLUDE' ? 'NOT' : ''}(${attributeName} IN (${attributeValues.join(', ')}))`
+      );
+    }
+  }
+}
diff --git a/lambdas/backend-api/src/infra/routing-config-repository/query.ts b/lambdas/backend-api/src/infra/routing-config-repository/query.ts
index 7f56e430a..127db786a 100644
--- a/lambdas/backend-api/src/infra/routing-config-repository/query.ts
+++ b/lambdas/backend-api/src/infra/routing-config-repository/query.ts
@@ -1,28 +1,22 @@
-import {
-  paginateQuery,
-  type DynamoDBDocumentClient,
-  type NativeAttributeValue,
-  type QueryCommandInput,
-} from '@aws-sdk/lib-dynamodb';
-import { ApplicationResult, failure, success } from '@backend-api/utils/result';
+import { type DynamoDBDocumentClient } from '@aws-sdk/lib-dynamodb';
 import {
   $RoutingConfig,
-  ErrorCase,
   type RoutingConfig,
   type RoutingConfigStatus,
 } from 'nhs-notify-backend-client';
-import { logger } from 'nhs-notify-web-template-management-utils/logger';
+import { AbstractQuery } from '../abstract-query';
 
-export class RoutingConfigQuery {
+export class RoutingConfigQuery extends AbstractQuery<RoutingConfig> {
   private includeStatuses: RoutingConfigStatus[] = [];
   private excludeStatuses: RoutingConfigStatus[] = [];
-  private returnCount = false;
 
   constructor(
-    private readonly docClient: DynamoDBDocumentClient,
-    private readonly tableName: string,
-    private readonly owner: string
-  ) {}
+    docClient: DynamoDBDocumentClient,
+    tableName: string,
+    owner: string
+  ) {
+    super(docClient, 'Routing Config', $RoutingConfig, tableName, owner);
+  }
 
   /** Include items with any of the given statuses. */
   status(...statuses: RoutingConfigStatus[]) {
@@ -36,123 +30,8 @@ export class RoutingConfigQuery {
     return this;
   }
 
-  /** Execute the query and return a list of all matching RoutingConfigs */
-  async list(): Promise<ApplicationResult<RoutingConfig[]>> {
-    try {
-      this.returnCount = false;
-
-      const query = this.build();
-
-      const collected: RoutingConfig[] = [];
-
-      const paginator = paginateQuery({ client: this.docClient }, query);
-
-      for await (const page of paginator) {
-        for (const item of page.Items ?? []) {
-          const parsed = $RoutingConfig.safeParse(item);
-          if (parsed.success) {
-            collected.push(parsed.data);
-          } else {
-            logger.warn('Filtered out invalid RoutingConfig item', {
-              owner: this.owner,
-              id: item.id,
-              issues: parsed.error.issues,
-            });
-          }
-        }
-      }
-
-      return success(collected);
-    } catch (error) {
-      return failure(
-        ErrorCase.INTERNAL,
-        'Error listing Routing Configs',
-        error
-      );
-    }
-  }
-
-  /** Execute the query and return a count of all matching RoutingConfigs */
-  async count(): Promise<ApplicationResult<{ count: number }>> {
-    try {
-      this.returnCount = true;
-
-      const query = this.build();
-
-      let count = 0;
-
-      const paginator = paginateQuery({ client: this.docClient }, query);
-
-      for await (const page of paginator) {
-        if (page.Count) {
-          count += page.Count;
-        }
-      }
-
-      return success({ count });
-    } catch (error) {
-      return failure(
-        ErrorCase.INTERNAL,
-        'Error counting Routing Configs',
-        error
-      );
-    }
-  }
-
-  private build() {
-    const query: QueryCommandInput = {
-      TableName: this.tableName,
-      KeyConditionExpression: '#owner = :owner',
-    };
-
-    const ExpressionAttributeNames: Record<string, string> = {
-      '#owner': 'owner',
-    };
-
-    const ExpressionAttributeValues: Record<string, NativeAttributeValue> = {
-      ':owner': this.owner,
-    };
-
-    query.ExpressionAttributeNames = ExpressionAttributeNames;
-    query.ExpressionAttributeValues = ExpressionAttributeValues;
-
-    const filters: string[] = [];
-
-    if (this.includeStatuses.length + this.excludeStatuses.length > 0) {
-      ExpressionAttributeNames['#status'] = 'status';
-    }
-
-    if (this.includeStatuses.length > 0) {
-      const uniq = [...new Set(this.includeStatuses)];
-      const placeholders: string[] = [];
-
-      for (const [i, s] of uniq.entries()) {
-        const ph = `:status${i}`;
-        ExpressionAttributeValues[ph] = s;
-        placeholders.push(ph);
-      }
-      filters.push(`(#status IN (${placeholders.join(', ')}))`);
-    }
-
-    if (this.excludeStatuses.length > 0) {
-      const uniq = [...new Set(this.excludeStatuses)];
-      const parts: string[] = [];
-      for (const [i, s] of uniq.entries()) {
-        const ph = `:notStatus${i}`;
-        ExpressionAttributeValues[ph] = s;
-        parts.push(`#status <> ${ph}`);
-      }
-      filters.push(`(${parts.join(' AND ')})`);
-    }
-
-    if (filters.length > 0) {
-      query.FilterExpression = filters.join(' AND ');
-    }
-
-    if (this.returnCount) {
-      query.Select = 'COUNT';
-    }
-
-    return query;
+  protected addFilters(): void {
+    this.addFilterToQuery('status', 'INCLUDE', this.includeStatuses);
+    this.addFilterToQuery('status', 'EXCLUDE', this.excludeStatuses);
   }
 }
diff --git a/lambdas/backend-api/src/infra/template-repository/index.ts b/lambdas/backend-api/src/infra/template-repository/index.ts
new file mode 100644
index 000000000..6dcbad91f
--- /dev/null
+++ b/lambdas/backend-api/src/infra/template-repository/index.ts
@@ -0,0 +1 @@
+export * from './repository';
diff --git a/lambdas/backend-api/src/infra/template-repository/query.ts b/lambdas/backend-api/src/infra/template-repository/query.ts
new file mode 100644
index 000000000..9c22c4882
--- /dev/null
+++ b/lambdas/backend-api/src/infra/template-repository/query.ts
@@ -0,0 +1,63 @@
+import { type DynamoDBDocumentClient } from '@aws-sdk/lib-dynamodb';
+import {
+  $TemplateDto,
+  Language,
+  LetterType,
+  TemplateDto,
+  TemplateStatus,
+  TemplateType,
+} from 'nhs-notify-backend-client';
+import { AbstractQuery } from '../abstract-query';
+
+export class TemplateQuery extends AbstractQuery<TemplateDto> {
+  private includeStatuses: TemplateStatus[] = [];
+  private excludeStatuses: TemplateStatus[] = [];
+  private includeTemplateTypes: TemplateType[] = [];
+  private includeLanguages: Language[] = [];
+  private includeLetterTypes: LetterType[] = [];
+
+  constructor(
+    docClient: DynamoDBDocumentClient,
+    tableName: string,
+    owner: string
+  ) {
+    super(docClient, 'Template', $TemplateDto, tableName, owner);
+  }
+
+  /** Include items with any of the given template statuses. */
+  templateStatus(...statuses: TemplateStatus[]) {
+    this.includeStatuses.push(...statuses);
+    return this;
+  }
+
+  /** Exclude items with any of the given template statuses. */
+  excludeTemplateStatus(...statuses: TemplateStatus[]) {
+    this.excludeStatuses.push(...statuses);
+    return this;
+  }
+
+  /** Include items with any of the given template types. */
+  templateType(...templateTypes: TemplateType[]) {
+    this.includeTemplateTypes.push(...templateTypes);
+    return this;
+  }
+
+  /** Include items with any of the given languages. */
+  language(...languages: Language[]) {
+    this.includeLanguages.push(...languages);
+    return this;
+  }
+
+  letterType(...letterTypes: LetterType[]) {
+    this.includeLetterTypes.push(...letterTypes);
+    return this;
+  }
+
+  protected addFilters(): void {
+    this.addFilterToQuery('templateStatus', 'INCLUDE', this.includeStatuses);
+    this.addFilterToQuery('templateStatus', 'EXCLUDE', this.excludeStatuses);
+    this.addFilterToQuery('templateType', 'INCLUDE', this.includeTemplateTypes);
+    this.addFilterToQuery('language', 'INCLUDE', this.includeLanguages);
+    this.addFilterToQuery('letterType', 'INCLUDE', this.includeLetterTypes);
+  }
+}
diff --git a/lambdas/backend-api/src/infra/template-repository.ts b/lambdas/backend-api/src/infra/template-repository/repository.ts
similarity index 94%
rename from lambdas/backend-api/src/infra/template-repository.ts
rename to lambdas/backend-api/src/infra/template-repository/repository.ts
index 2a2ea1f3a..a738f75dd 100644
--- a/lambdas/backend-api/src/infra/template-repository.ts
+++ b/lambdas/backend-api/src/infra/template-repository/repository.ts
@@ -5,7 +5,6 @@ import {
   GetCommand,
   PutCommand,
   QueryCommand,
-  QueryCommandInput,
   UpdateCommand,
   UpdateCommandInput,
 } from '@aws-sdk/lib-dynamodb';
@@ -14,10 +13,9 @@ import {
   ErrorCase,
   LetterFiles,
   TemplateStatus,
-  ValidatedCreateUpdateTemplate,
   VirusScanStatus,
   ProofFileDetails,
-  ValidatedCreateUpdateTemplateNonLetter,
+  CreateUpdateTemplate,
 } from 'nhs-notify-backend-client';
 import { TemplateUpdateBuilder } from 'nhs-notify-entity-update-command-builder';
 import type {
@@ -28,7 +26,8 @@ import type {
 } from 'nhs-notify-web-template-management-utils';
 import { logger } from 'nhs-notify-web-template-management-utils/logger';
 import { calculateTTL } from '@backend-api/utils/calculate-ttl';
-import { ApplicationResult, failure, success } from '../utils';
+import { ApplicationResult, failure, success } from '../../utils';
+import { TemplateQuery } from './query';
 
 export type WithAttachments<T> = T extends { templateType: 'LETTER' }
   ? T & { files: LetterFiles }
@@ -71,7 +70,7 @@ export class TemplateRepository {
   }
 
   async create(
-    template: WithAttachments<ValidatedCreateUpdateTemplate>,
+    template: WithAttachments<CreateUpdateTemplate>,
     user: User,
     initialStatus: TemplateStatus = 'NOT_YET_SUBMITTED',
     campaignId?: string
@@ -111,7 +110,7 @@ export class TemplateRepository {
 
   async update(
     templateId: string,
-    template: ValidatedCreateUpdateTemplateNonLetter,
+    template: Exclude<CreateUpdateTemplate, { templateType: 'LETTER' }>,
     user: User,
     expectedStatus: TemplateStatus,
     lockNumber: number
@@ -282,37 +281,12 @@ export class TemplateRepository {
     }
   }
 
-  async list(clientId: string): Promise<ApplicationResult<DatabaseTemplate[]>> {
-    try {
-      const input: QueryCommandInput = {
-        TableName: this.templatesTableName,
-        KeyConditionExpression: '#owner = :owner',
-        ExpressionAttributeNames: {
-          '#owner': 'owner',
-          '#status': 'templateStatus',
-        },
-        ExpressionAttributeValues: {
-          ':owner': this.clientOwnerKey(clientId),
-          ':deletedStatus': 'DELETED',
-        },
-        FilterExpression: '#status <> :deletedStatus',
-      };
-
-      const items: DatabaseTemplate[] = [];
-
-      do {
-        // eslint-disable-next-line no-await-in-loop
-        const { Items = [], LastEvaluatedKey } = await this.client.send(
-          new QueryCommand(input)
-        );
-
-        input.ExclusiveStartKey = LastEvaluatedKey;
-        items.push(...(Items as DatabaseTemplate[]));
-      } while (input.ExclusiveStartKey);
-      return success(items);
-    } catch (error) {
-      return failure(ErrorCase.INTERNAL, 'Failed to list templates', error);
-    }
+  query(clientId: string): TemplateQuery {
+    return new TemplateQuery(
+      this.client,
+      this.templatesTableName,
+      this.clientOwnerKey(clientId)
+    );
   }
 
   async setLetterValidationResult(
@@ -727,7 +701,7 @@ export class TemplateRepository {
 
   private _handleUpdateError(
     error: unknown,
-    template: ValidatedCreateUpdateTemplateNonLetter,
+    template: Exclude<CreateUpdateTemplate, { templateType: 'LETTER' }>,
     lockNumber: number
   ) {
     if (error instanceof ConditionalCheckFailedException) {
diff --git a/lambdas/backend-client/src/__tests__/routing-config-api-client.test.ts b/lambdas/backend-client/src/__tests__/routing-config-api-client.test.ts
index 7e55e5861..edab46a1f 100644
--- a/lambdas/backend-client/src/__tests__/routing-config-api-client.test.ts
+++ b/lambdas/backend-client/src/__tests__/routing-config-api-client.test.ts
@@ -85,7 +85,7 @@ describe('RoutingConfigurationApiClient', () => {
           },
         });
 
-      const response = await client.count('token', 'DRAFT');
+      const response = await client.count('token', { status: 'DRAFT' });
 
       expect(response.error).toEqual({
         errorMeta: {
@@ -108,7 +108,7 @@ describe('RoutingConfigurationApiClient', () => {
         })
         .reply(200, { data: { count: 10 } });
 
-      const response = await client.count('token', 'COMPLETED');
+      const response = await client.count('token', { status: 'COMPLETED' });
 
       expect(response.data).toEqual({ count: 10 });
 
diff --git a/lambdas/backend-client/src/__tests__/schemas/template-schema.test.ts b/lambdas/backend-client/src/__tests__/schemas/template.test.ts
similarity index 80%
rename from lambdas/backend-client/src/__tests__/schemas/template-schema.test.ts
rename to lambdas/backend-client/src/__tests__/schemas/template.test.ts
index e0403abf0..c15dea3c4 100644
--- a/lambdas/backend-client/src/__tests__/schemas/template-schema.test.ts
+++ b/lambdas/backend-client/src/__tests__/schemas/template.test.ts
@@ -2,10 +2,9 @@ import {
   $UploadLetterProperties,
   $CreateUpdateNonLetter,
   $CreateUpdateTemplate,
-  isCreateUpdateTemplateValid,
-  isTemplateDtoValid,
+  $TemplateFilter,
 } from '../../schemas';
-import type { CreateUpdateTemplate, TemplateDto } from '../../types/generated';
+import type { CreateUpdateTemplate } from '../../types/generated';
 
 describe('Template schemas', () => {
   test.each([
@@ -252,54 +251,51 @@ describe('Template schemas', () => {
     });
   });
 
-  describe('isCreateUpdateTemplateValid', () => {
-    const template: CreateUpdateTemplate = {
-      name: 'Test Template',
-      message: 'This is a test template',
-      templateType: 'NHS_APP',
-    };
-
-    test('Should return template on pass', async () => {
-      const result = isCreateUpdateTemplateValid(template);
-
-      expect(result).toEqual(template);
-    });
-
-    test('Should return undefined on fail', async () => {
-      const result = isCreateUpdateTemplateValid({
-        ...template,
-        name: undefined,
-      });
-
-      expect(result).toEqual(undefined);
-    });
-  });
-
-  describe('isTemplateDtoValid', () => {
-    const template: TemplateDto = {
-      name: 'Test Template',
-      message: 'This is a test template',
-      templateType: 'NHS_APP',
-      templateStatus: 'NOT_YET_SUBMITTED',
-      id: 'id',
-      createdAt: '2025-01-13T10:19:25.579Z',
-      updatedAt: '2025-01-13T10:19:25.579Z',
-      lockNumber: 1,
-    };
+  describe('$TemplateFilter', () => {
+    test.each(['templateStatus', 'templateType', 'language', 'letterType'])(
+      '$TemplateFilter should fail when unknown $filter field is provided',
+      (filterField) => {
+        const filter = {
+          [filterField]: 'UNKNOWN',
+        };
 
-    test('Should return template on pass', async () => {
-      const result = isTemplateDtoValid(template);
+        const result = $TemplateFilter.safeParse(filter);
 
-      expect(result).toEqual(template);
-    });
+        expect(result.error?.flatten()).toEqual(
+          expect.objectContaining({
+            fieldErrors: {
+              [filterField]: [
+                expect.stringContaining('Invalid option: expected one of'),
+              ],
+            },
+          })
+        );
+      }
+    );
 
-    test('Should return undefined on fail', async () => {
-      const result = isTemplateDtoValid({
-        ...template,
-        name: undefined,
-      });
+    test.each([
+      {
+        templateStatus: 'SUBMITTED',
+      },
+      {
+        templateType: 'LETTER',
+      },
+      {
+        language: 'en',
+      },
+      {
+        letterType: 'x0',
+      },
+      {
+        templateStatus: 'SUBMITTED',
+        templateType: 'LETTER',
+        language: 'en',
+        letterType: 'x0',
+      },
+    ])('should pass template filter validation %p', async (filter) => {
+      const result = $TemplateFilter.safeParse(filter);
 
-      expect(result).toEqual(undefined);
+      expect(result.data).toEqual(filter);
     });
   });
 });
diff --git a/lambdas/backend-client/src/index.ts b/lambdas/backend-client/src/index.ts
index 788a6c137..867416128 100644
--- a/lambdas/backend-client/src/index.ts
+++ b/lambdas/backend-client/src/index.ts
@@ -1,7 +1,7 @@
 export * from './schemas/client';
 export * from './schemas/routing-config';
 export * from './schemas/schema-for';
-export * from './schemas/template-schema';
+export * from './schemas/template';
 export * from './schemas/union-lists';
 export * from './types/error-cases';
 export * from './types/generated';
diff --git a/lambdas/backend-client/src/routing-config-api-client.ts b/lambdas/backend-client/src/routing-config-api-client.ts
index 922a4043b..e8f5158a1 100644
--- a/lambdas/backend-client/src/routing-config-api-client.ts
+++ b/lambdas/backend-client/src/routing-config-api-client.ts
@@ -6,7 +6,6 @@ import type {
   GetV1RoutingConfigurationByRoutingConfigIdData,
   RoutingConfig,
   RoutingConfigSuccess,
-  RoutingConfigStatusActive,
   RoutingConfigSuccessList,
   PostV1RoutingConfigurationData,
   PutV1RoutingConfigurationByRoutingConfigIdData,
@@ -17,6 +16,7 @@ import { catchAxiosError, createAxiosClient } from './axios-client';
 import { Result } from './types/result';
 import { OpenApiToTemplate } from './types/open-api-helper';
 import { z } from 'zod';
+import { RoutingConfigFilter } from './types/filters';
 
 const uuidSchema = z.uuidv4();
 
@@ -52,7 +52,7 @@ export const routingConfigurationApiClient = {
 
   async count(
     token: string,
-    status: RoutingConfigStatusActive
+    filters?: RoutingConfigFilter
   ): Promise<Result<{ count: number }>> {
     const url =
       '/v1/routing-configurations/count' satisfies GetV1RoutingConfigurationsCountData['url'];
@@ -60,7 +60,7 @@ export const routingConfigurationApiClient = {
     const { data, error } = await catchAxiosError(
       httpClient.get<CountSuccess>(url, {
         headers: { Authorization: token },
-        params: { status },
+        params: filters,
       })
     );
 
@@ -105,13 +105,17 @@ export const routingConfigurationApiClient = {
     return { ...data };
   },
 
-  async list(token: string): Promise<Result<RoutingConfig[]>> {
+  async list(
+    token: string,
+    filters?: RoutingConfigFilter
+  ): Promise<Result<RoutingConfig[]>> {
     const url =
       '/v1/routing-configurations' satisfies GetV1RoutingConfigurationsData['url'];
 
     const { data, error } = await catchAxiosError(
       httpClient.get<RoutingConfigSuccessList>(url, {
         headers: { Authorization: token },
+        params: filters,
       })
     );
 
diff --git a/lambdas/backend-client/src/schemas/index.ts b/lambdas/backend-client/src/schemas/index.ts
index fc52936ba..1b4a22a41 100644
--- a/lambdas/backend-client/src/schemas/index.ts
+++ b/lambdas/backend-client/src/schemas/index.ts
@@ -1 +1 @@
-export * from './template-schema';
+export * from './template';
diff --git a/lambdas/backend-client/src/schemas/routing-config.ts b/lambdas/backend-client/src/schemas/routing-config.ts
index 70cc8f144..e6a78ff54 100644
--- a/lambdas/backend-client/src/schemas/routing-config.ts
+++ b/lambdas/backend-client/src/schemas/routing-config.ts
@@ -18,7 +18,7 @@ import type {
   UpdateRoutingConfig,
 } from '../types/generated';
 import { schemaFor } from './schema-for';
-import { $Language, $LetterType } from './template-schema';
+import { $Language, $LetterType } from './template';
 import {
   CASCADE_GROUP_NAME_LIST,
   CHANNEL_LIST,
diff --git a/lambdas/backend-client/src/schemas/template-schema.ts b/lambdas/backend-client/src/schemas/template.ts
similarity index 65%
rename from lambdas/backend-client/src/schemas/template-schema.ts
rename to lambdas/backend-client/src/schemas/template.ts
index 89fbbdffe..2f6cd1241 100644
--- a/lambdas/backend-client/src/schemas/template-schema.ts
+++ b/lambdas/backend-client/src/schemas/template.ts
@@ -13,6 +13,10 @@ import {
   TemplateDto,
   LetterType,
   Language,
+  BaseCreatedTemplate,
+  TemplateStatus,
+  TemplateStatusActive,
+  TemplateType,
 } from '../types/generated';
 import {
   MAX_EMAIL_CHARACTER_LENGTH,
@@ -27,17 +31,7 @@ import {
   TEMPLATE_TYPE_LIST,
   VIRUS_SCAN_STATUS_LIST,
 } from './union-lists';
-
-export type ValidatedCreateUpdateTemplate = CreateUpdateTemplate &
-  (EmailProperties | NhsAppProperties | SmsProperties | UploadLetterProperties);
-
-export type ValidatedCreateUpdateTemplateNonLetter = Exclude<
-  ValidatedCreateUpdateTemplate,
-  { templateType: 'LETTER' }
->;
-
-export type ValidatedTemplateDto = TemplateDto &
-  (EmailProperties | NhsAppProperties | SmsProperties | LetterProperties);
+import { TemplateFilter } from '../types/filters';
 
 export const $LetterType = schemaFor<LetterType>()(z.enum(LETTER_TYPE_LIST));
 
@@ -96,13 +90,15 @@ export const $BaseLetterTemplateProperties = z.object({
 });
 
 export const $UploadLetterProperties = schemaFor<UploadLetterProperties>()(
-  $BaseLetterTemplateProperties.extend({
+  z.object({
+    ...$BaseLetterTemplateProperties.shape,
     campaignId: z.string(),
   })
 );
 
 export const $LetterProperties = schemaFor<LetterProperties>()(
-  $BaseLetterTemplateProperties.extend({
+  z.object({
+    ...$BaseLetterTemplateProperties.shape,
     files: $LetterFiles,
     personalisationParameters: z.array(z.string()).optional(),
     proofingEnabled: z.boolean().optional(),
@@ -117,25 +113,21 @@ export const $BaseTemplateSchema = schemaFor<BaseTemplate>()(
 );
 
 export const $CreateUpdateNonLetter = schemaFor<
-  ValidatedCreateUpdateTemplateNonLetter,
   Exclude<CreateUpdateTemplate, { templateType: 'LETTER' }>
 >()(
   z.discriminatedUnion('templateType', [
-    $BaseTemplateSchema.merge($NhsAppProperties),
-    $BaseTemplateSchema.merge($EmailProperties),
-    $BaseTemplateSchema.merge($SmsProperties),
+    $BaseTemplateSchema.extend($NhsAppProperties.shape),
+    $BaseTemplateSchema.extend($EmailProperties.shape),
+    $BaseTemplateSchema.extend($SmsProperties.shape),
   ])
 );
 
-export const $CreateUpdateTemplate = schemaFor<
-  ValidatedCreateUpdateTemplate,
-  CreateUpdateTemplate
->()(
+export const $CreateUpdateTemplate = schemaFor<CreateUpdateTemplate>()(
   z.discriminatedUnion('templateType', [
-    $BaseTemplateSchema.merge($NhsAppProperties),
-    $BaseTemplateSchema.merge($EmailProperties),
-    $BaseTemplateSchema.merge($SmsProperties),
-    $BaseTemplateSchema.merge($UploadLetterProperties),
+    $BaseTemplateSchema.extend($NhsAppProperties.shape),
+    $BaseTemplateSchema.extend($EmailProperties.shape),
+    $BaseTemplateSchema.extend($SmsProperties.shape),
+    $BaseTemplateSchema.extend($UploadLetterProperties.shape),
   ])
 );
 
@@ -146,35 +138,53 @@ export const $LockNumber = z.coerce
   .transform(Number)
   .pipe(z.number().int().min(0));
 
-const $TemplateDtoFields = z
-  .object({
+const $TemplateStatus = schemaFor<TemplateStatus>()(
+  z.enum(TEMPLATE_STATUS_LIST)
+);
+
+const $TemplateStatusActive = schemaFor<TemplateStatusActive>()(
+  $TemplateStatus.exclude(['DELETED'])
+);
+
+const $TemplateType = schemaFor<TemplateType>()(z.enum(TEMPLATE_TYPE_LIST));
+
+const $BaseTemplateDto = schemaFor<
+  BaseCreatedTemplate,
+  Omit<BaseCreatedTemplate, 'lockNumber'>
+>()(
+  z.object({
+    ...$BaseTemplateSchema.shape,
     campaignId: z.string().optional(),
     clientId: z.string().optional(),
     createdAt: z.string(),
     lockNumber: $LockNumber.default(0),
     id: z.string().trim().min(1),
-    templateStatus: z.enum(TEMPLATE_STATUS_LIST),
+    templateStatus: $TemplateStatus,
     updatedAt: z.string(),
+    createdBy: z.string().optional(),
+    updatedBy: z.string().optional(),
   })
-  .merge($BaseTemplateSchema);
+);
 
-export const $TemplateDtoSchema = schemaFor<
+export const $TemplateDto = schemaFor<
   TemplateDto,
-  Omit<ValidatedTemplateDto, 'lockNumber'>
+  Omit<TemplateDto, 'lockNumber'>
 >()(
   z.discriminatedUnion('templateType', [
-    $TemplateDtoFields.merge($NhsAppProperties),
-    $TemplateDtoFields.merge($EmailProperties),
-    $TemplateDtoFields.merge($SmsProperties),
-    $TemplateDtoFields.merge($LetterProperties),
+    $BaseTemplateDto.extend($NhsAppProperties.shape),
+    $BaseTemplateDto.extend($EmailProperties.shape),
+    $BaseTemplateDto.extend($SmsProperties.shape),
+    $BaseTemplateDto.extend($LetterProperties.shape),
   ])
 );
 
-export const isCreateUpdateTemplateValid = (
-  input: unknown
-): ValidatedCreateUpdateTemplate | undefined =>
-  $CreateUpdateTemplate.safeParse(input).data;
-
-export const isTemplateDtoValid = (
-  input: unknown
-): ValidatedTemplateDto | undefined => $TemplateDtoSchema.safeParse(input).data;
+export const $TemplateFilter = schemaFor<TemplateFilter>()(
+  z
+    .object({
+      templateStatus: $TemplateStatusActive,
+      templateType: $TemplateType,
+      language: $Language,
+      letterType: $LetterType,
+    })
+    .partial()
+);
diff --git a/lambdas/backend-client/src/template-api-client.ts b/lambdas/backend-client/src/template-api-client.ts
index fc293bbd5..a50dd1383 100644
--- a/lambdas/backend-client/src/template-api-client.ts
+++ b/lambdas/backend-client/src/template-api-client.ts
@@ -7,6 +7,7 @@ import {
 import { Result } from './types/result';
 import { catchAxiosError, createAxiosClient } from './axios-client';
 import { LETTER_MULTIPART } from './schemas/constants';
+import { TemplateFilter } from './types/filters';
 
 export const httpClient = createAxiosClient();
 
@@ -120,10 +121,14 @@ export const templateApiClient = {
     };
   },
 
-  async listTemplates(token: string): Promise<Result<TemplateDto[]>> {
+  async listTemplates(
+    token: string,
+    filters?: TemplateFilter
+  ): Promise<Result<TemplateDto[]>> {
     const response = await catchAxiosError(
       httpClient.get<TemplateSuccessList>('/v1/templates', {
         headers: { Authorization: token },
+        params: filters,
       })
     );
 
diff --git a/lambdas/backend-client/src/types/filters.ts b/lambdas/backend-client/src/types/filters.ts
new file mode 100644
index 000000000..83667c2d9
--- /dev/null
+++ b/lambdas/backend-client/src/types/filters.ts
@@ -0,0 +1,7 @@
+import {
+  GetV1RoutingConfigurationsData,
+  GetV1TemplatesData,
+} from './generated';
+
+export type TemplateFilter = GetV1TemplatesData['query'];
+export type RoutingConfigFilter = GetV1RoutingConfigurationsData['query'];
diff --git a/lambdas/backend-client/src/types/generated/types.gen.ts b/lambdas/backend-client/src/types/generated/types.gen.ts
index cdc91463c..e45bf3a3e 100644
--- a/lambdas/backend-client/src/types/generated/types.gen.ts
+++ b/lambdas/backend-client/src/types/generated/types.gen.ts
@@ -223,8 +223,7 @@ export type SmsProperties = {
 export type TemplateDto = BaseCreatedTemplate &
   (SmsProperties | EmailProperties | NhsAppProperties | LetterProperties);
 
-export type TemplateStatus =
-  | 'DELETED'
+export type TemplateStatusActive =
   | 'NOT_YET_SUBMITTED'
   | 'PENDING_PROOF_REQUEST'
   | 'PENDING_UPLOAD'
@@ -235,6 +234,8 @@ export type TemplateStatus =
   | 'WAITING_FOR_PROOF'
   | 'PROOF_AVAILABLE';
 
+export type TemplateStatus = TemplateStatusActive | 'DELETED';
+
 export type TemplateSuccess = {
   data: TemplateDto;
   statusCode: number;
@@ -774,7 +775,24 @@ export type PatchV1TemplateByTemplateIdSubmitResponse =
 export type GetV1TemplatesData = {
   body?: never;
   path?: never;
-  query?: never;
+  query?: {
+    /**
+     * Filter by a single active status
+     */
+    templateStatus?: TemplateStatusActive;
+    /**
+     * Filter by a single template type
+     */
+    templateType?: TemplateType;
+    /**
+     * Filter by a single language
+     */
+    language?: Language;
+    /**
+     * Filter by a single accessible letter type
+     */
+    letterType?: LetterType;
+  };
   url: '/v1/templates';
 };
 
diff --git a/tests/test-team/fixtures/accessibility-analyze.ts b/tests/test-team/fixtures/accessibility-analyze.ts
index cde5ae3f8..8050924aa 100644
--- a/tests/test-team/fixtures/accessibility-analyze.ts
+++ b/tests/test-team/fixtures/accessibility-analyze.ts
@@ -6,7 +6,7 @@ import { expect } from '@playwright/test';
 type Analyze = <T extends TemplateMgmtBasePage>(
   page: T,
   opts?: {
-    id?: string;
+    ids?: string[];
     beforeAnalyze?: (page: T) => Promise<void>;
   }
 ) => Promise<void>;
@@ -30,20 +30,23 @@ const makeAxeBuilder = (page: Page) =>
 export const test = base.extend<AccessibilityFixture>({
   analyze: async ({ baseURL, page }, use) => {
     const analyze: Analyze = async (pageUnderTest, opts) => {
-      const { id, beforeAnalyze } = opts ?? {};
+      const { ids, beforeAnalyze } = opts ?? {};
 
-      await pageUnderTest.loadPage(id);
+      await pageUnderTest.loadPage(...(ids ?? []));
 
       if (beforeAnalyze) {
         await beforeAnalyze(pageUnderTest);
       }
 
-      const pageUrlSegment = (
+      const pageUrlSegments = (
         pageUnderTest.constructor as typeof TemplateMgmtBasePage
-      ).pageUrlSegment;
+      ).pageUrlSegments;
 
       await expect(page).toHaveURL(
-        new RegExp(`${baseURL}/templates/${pageUrlSegment}(.*)`) // eslint-disable-line security/detect-non-literal-regexp
+        // eslint-disable-next-line security/detect-non-literal-regexp
+        new RegExp(
+          `${baseURL}/templates/${pageUrlSegments.join('/[^/]+/')}(.*)`
+        )
       );
 
       const results = await makeAxeBuilder(page).analyze();
diff --git a/tests/test-team/helpers/factories/template-factory.ts b/tests/test-team/helpers/factories/template-factory.ts
index f135c1fc2..56397490c 100644
--- a/tests/test-team/helpers/factories/template-factory.ts
+++ b/tests/test-team/helpers/factories/template-factory.ts
@@ -6,7 +6,8 @@ export const TemplateFactory = {
   createEmailTemplate: (
     id: string,
     user: TestUser,
-    name: string = 'test'
+    name: string = 'test',
+    templateStatus: string = 'NOT_YET_SUBMITTED'
   ): Template => {
     return TemplateFactory.create({
       campaignId: user.campaignId,
@@ -17,6 +18,7 @@ export const TemplateFactory = {
       owner: `CLIENT#${user.clientId}`,
       subject: 'test-subject',
       templateType: 'EMAIL',
+      templateStatus,
     });
   },
 
diff --git a/tests/test-team/helpers/template-mgmt-common.steps.ts b/tests/test-team/helpers/template-mgmt-common.steps.ts
index c0c12abdc..f420422ec 100644
--- a/tests/test-team/helpers/template-mgmt-common.steps.ts
+++ b/tests/test-team/helpers/template-mgmt-common.steps.ts
@@ -4,6 +4,7 @@ import { TemplateMgmtBasePage } from '../pages/template-mgmt-base-page';
 type CommonStepsProps = {
   page: TemplateMgmtBasePage;
   id?: string;
+  additionalIds?: string[];
   baseURL?: string;
 };
 
@@ -35,9 +36,24 @@ const expectedFooterLinks: Record<string, FooterLinkSpec> = {
   },
 };
 
-export function assertSkipToMainContent({ page, id }: CommonStepsProps) {
+const loadPageFromIds = async (
+  page: TemplateMgmtBasePage,
+  id?: string,
+  additionalIds?: string[]
+) => {
+  if (id) {
+    return await page.loadPage(id, ...(additionalIds ?? []));
+  }
+  return await page.loadPage();
+};
+
+export function assertSkipToMainContent({
+  page,
+  id,
+  additionalIds,
+}: CommonStepsProps) {
   return test.step('when user clicks "skip to main content", then page heading is focused', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     await page.page.keyboard.press('Tab');
 
@@ -55,9 +71,13 @@ export function assertSkipToMainContent({ page, id }: CommonStepsProps) {
   });
 }
 
-export function assertHeaderWhenSignedOut({ page, id }: CommonStepsProps) {
+export function assertHeaderWhenSignedOut({
+  page,
+  id,
+  additionalIds,
+}: CommonStepsProps) {
   return test.step('when user is signed out, then header displays sign in link only', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     await expect(page.signInLink).toBeVisible();
     await expect(page.signOutLink).toBeHidden();
@@ -70,6 +90,7 @@ export function assertHeaderWhenSignedOut({ page, id }: CommonStepsProps) {
 export function assertHeaderWhenSignedIn({
   page,
   id,
+  additionalIds,
   expectedDisplayName,
   expectedClientName,
 }: CommonStepsProps & {
@@ -77,7 +98,7 @@ export function assertHeaderWhenSignedIn({
   expectedClientName: string;
 }) {
   return test.step('when user is signed in, then header shows display name and client name', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     await expect(page.signOutLink).toBeVisible();
     await expect(page.signInLink).toBeHidden();
@@ -96,9 +117,13 @@ export function assertHeaderWhenSignedIn({
   });
 }
 
-export function assertHeaderLogoLink({ page, id }: CommonStepsProps) {
+export function assertHeaderLogoLink({
+  page,
+  id,
+  additionalIds,
+}: CommonStepsProps & { additionalIds?: string[] }) {
   return test.step('header logo is visible, correctly labelled and structured', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     const logoLink = page.headerLogoLink;
 
@@ -134,9 +159,13 @@ export function assertClickHeaderLogoRedirectsToStartPage({
   });
 }
 
-export function assertSignInLink({ page, id }: CommonStepsProps) {
+export function assertSignInLink({
+  page,
+  id,
+  additionalIds,
+}: CommonStepsProps & { additionalIds?: string[] }) {
   return test.step('when user clicks "Sign in", then user is redirected to "sign in page"', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     const link = page.signInLink;
 
@@ -147,9 +176,13 @@ export function assertSignInLink({ page, id }: CommonStepsProps) {
   });
 }
 
-export function assertSignOutLink({ page, id }: CommonStepsProps) {
+export function assertSignOutLink({
+  page,
+  id,
+  additionalIds,
+}: CommonStepsProps & { additionalIds?: string[] }) {
   return test.step('"Sign out", should direct user to signout', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     const link = page.signOutLink;
 
@@ -160,6 +193,7 @@ export function assertSignOutLink({ page, id }: CommonStepsProps) {
 export function assertHeaderNavigationLinksWhenSignedIn({
   page,
   id,
+  additionalIds,
   routingEnabled,
 }: CommonStepsProps & { routingEnabled: boolean }) {
   const description = routingEnabled
@@ -167,7 +201,7 @@ export function assertHeaderNavigationLinksWhenSignedIn({
     : 'Templates link only';
 
   return test.step(`header shows ${description} when routing is ${routingEnabled ? 'enabled' : 'disabled'}`, async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     const nav = page.headerNavigationLinks;
 
@@ -184,9 +218,10 @@ export function assertHeaderNavigationLinksWhenSignedIn({
 export function assertHeaderNavigationLinksWhenSignedOut({
   page,
   id,
+  additionalIds,
 }: CommonStepsProps) {
   return test.step('header does not display navigation links when signed out', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     await expect(page.headerNavigationLinks).toHaveCount(0);
   });
@@ -197,9 +232,10 @@ export function assertGoBackLink({
   id,
   baseURL,
   expectedUrl,
+  additionalIds,
 }: CommonStepsProps & { expectedUrl: string }) {
   return test.step('when user clicks "Go back", then user is redirected to previous page', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     await page.goBackLink.click();
 
@@ -209,17 +245,25 @@ export function assertGoBackLink({
   });
 }
 
-export function assertGoBackLinkNotPresent({ page, id }: CommonStepsProps) {
+export function assertGoBackLinkNotPresent({
+  page,
+  id,
+  additionalIds,
+}: CommonStepsProps) {
   return test.step('should not display "Go Back" link on page', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     await expect(page.goBackLink).toBeHidden();
   });
 }
 
-export function assertFooterLinks({ page, id }: CommonStepsProps) {
+export function assertFooterLinks({
+  page,
+  id,
+  additionalIds,
+}: CommonStepsProps) {
   return test.step('when page loads, then Page Footer should have the correct links', async () => {
-    await page.loadPage(id);
+    await loadPageFromIds(page, id, additionalIds);
 
     const promises = Object.values(expectedFooterLinks).map((linkSpec) =>
       expect(
diff --git a/tests/test-team/pages/email/template-mgmt-create-email-page.ts b/tests/test-team/pages/email/template-mgmt-create-email-page.ts
index 442b34d97..a12300cc4 100644
--- a/tests/test-team/pages/email/template-mgmt-create-email-page.ts
+++ b/tests/test-team/pages/email/template-mgmt-create-email-page.ts
@@ -3,7 +3,7 @@ import { TemplateMgmtMessageFormatting } from '../template-mgmt-message-formatti
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtCreateEmailPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'create-email-template';
+  static readonly pageUrlSegments = ['create-email-template'];
 
   public readonly nameInput: Locator;
 
diff --git a/tests/test-team/pages/email/template-mgmt-edit-email-page.ts b/tests/test-team/pages/email/template-mgmt-edit-email-page.ts
index 12c540d94..075db611f 100644
--- a/tests/test-team/pages/email/template-mgmt-edit-email-page.ts
+++ b/tests/test-team/pages/email/template-mgmt-edit-email-page.ts
@@ -3,7 +3,7 @@ import { TemplateMgmtMessageFormatting } from '../template-mgmt-message-formatti
 import { TemplateMgmtBasePageDynamic } from '../template-mgmt-base-page-dynamic';
 
 export class TemplateMgmtEditEmailPage extends TemplateMgmtBasePageDynamic {
-  static readonly pageUrlSegment = 'edit-email-template';
+  static readonly pageUrlSegments = ['edit-email-template'];
 
   public readonly nameInput: Locator;
 
diff --git a/tests/test-team/pages/email/template-mgmt-preview-email-page.ts b/tests/test-team/pages/email/template-mgmt-preview-email-page.ts
index 2e6bbd42c..d3b146b4a 100644
--- a/tests/test-team/pages/email/template-mgmt-preview-email-page.ts
+++ b/tests/test-team/pages/email/template-mgmt-preview-email-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtPreviewBasePage } from '../template-mgmt-preview-base-page';
 
 export class TemplateMgmtPreviewEmailPage extends TemplateMgmtPreviewBasePage {
-  static readonly pageUrlSegment = 'preview-email-template';
+  static readonly pageUrlSegments = ['preview-email-template'];
 
   public readonly editRadioOption: Locator;
 
diff --git a/tests/test-team/pages/email/template-mgmt-preview-submitted-email-page.ts b/tests/test-team/pages/email/template-mgmt-preview-submitted-email-page.ts
index db8bc9130..6bacccc23 100644
--- a/tests/test-team/pages/email/template-mgmt-preview-submitted-email-page.ts
+++ b/tests/test-team/pages/email/template-mgmt-preview-submitted-email-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtPreviewSubmitedBasePage } from '../template-mgmt-preview-submitted-base-page';
 
 export class TemplateMgmtPreviewSubmittedEmailPage extends TemplateMgmtPreviewSubmitedBasePage {
-  static readonly pageUrlSegment = 'preview-submitted-email-template';
+  static readonly pageUrlSegments = ['preview-submitted-email-template'];
 
   public readonly subjectLineText: Locator;
 
diff --git a/tests/test-team/pages/email/template-mgmt-submit-email-page.ts b/tests/test-team/pages/email/template-mgmt-submit-email-page.ts
index 50b0daa19..618d03e2d 100644
--- a/tests/test-team/pages/email/template-mgmt-submit-email-page.ts
+++ b/tests/test-team/pages/email/template-mgmt-submit-email-page.ts
@@ -1,5 +1,5 @@
 import { TemplateMgmtSubmitBasePage } from '../template-mgmt-submit-base-page';
 
 export class TemplateMgmtSubmitEmailPage extends TemplateMgmtSubmitBasePage {
-  static readonly pageUrlSegment = 'submit-email-template';
+  static readonly pageUrlSegments = ['submit-email-template'];
 }
diff --git a/tests/test-team/pages/email/template-mgmt-template-submitted-email-page.ts b/tests/test-team/pages/email/template-mgmt-template-submitted-email-page.ts
index 1b7ddd406..a9cfc69d2 100644
--- a/tests/test-team/pages/email/template-mgmt-template-submitted-email-page.ts
+++ b/tests/test-team/pages/email/template-mgmt-template-submitted-email-page.ts
@@ -1,5 +1,5 @@
 import { TemplateMgmtTemplateSubmittedBasePage } from '../template-mgmt-template-submitted-base-page';
 
 export class TemplateMgmtTemplateSubmittedEmailPage extends TemplateMgmtTemplateSubmittedBasePage {
-  static readonly pageUrlSegment = 'email-template-submitted';
+  static readonly pageUrlSegments = ['email-template-submitted'];
 }
diff --git a/tests/test-team/pages/letter/template-mgmt-preview-letter-page.ts b/tests/test-team/pages/letter/template-mgmt-preview-letter-page.ts
index f4143fe78..3fd33ca4c 100644
--- a/tests/test-team/pages/letter/template-mgmt-preview-letter-page.ts
+++ b/tests/test-team/pages/letter/template-mgmt-preview-letter-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtPreviewBasePage } from '../template-mgmt-preview-base-page';
 
 export class TemplateMgmtPreviewLetterPage extends TemplateMgmtPreviewBasePage {
-  static readonly pageUrlSegment = 'preview-letter-template';
+  static readonly pageUrlSegments = ['preview-letter-template'];
 
   public static readonly urlRegexp = new RegExp(
     /\/templates\/preview-letter-template\/([\dA-Fa-f-]+)(?:\?from=edit)?$/
diff --git a/tests/test-team/pages/letter/template-mgmt-preview-submitted-letter-page.ts b/tests/test-team/pages/letter/template-mgmt-preview-submitted-letter-page.ts
index 96d65af39..592895903 100644
--- a/tests/test-team/pages/letter/template-mgmt-preview-submitted-letter-page.ts
+++ b/tests/test-team/pages/letter/template-mgmt-preview-submitted-letter-page.ts
@@ -1,5 +1,5 @@
 import { TemplateMgmtPreviewSubmitedBasePage } from '../template-mgmt-preview-submitted-base-page';
 
 export class TemplateMgmtPreviewSubmittedLetterPage extends TemplateMgmtPreviewSubmitedBasePage {
-  static readonly pageUrlSegment = 'preview-submitted-letter-template';
+  static readonly pageUrlSegments = ['preview-submitted-letter-template'];
 }
diff --git a/tests/test-team/pages/letter/template-mgmt-submit-letter-page.ts b/tests/test-team/pages/letter/template-mgmt-submit-letter-page.ts
index e7fa0d7f5..858b7b474 100644
--- a/tests/test-team/pages/letter/template-mgmt-submit-letter-page.ts
+++ b/tests/test-team/pages/letter/template-mgmt-submit-letter-page.ts
@@ -1,7 +1,7 @@
 import { TemplateMgmtSubmitBasePage } from '../template-mgmt-submit-base-page';
 
 export class TemplateMgmtSubmitLetterPage extends TemplateMgmtSubmitBasePage {
-  static readonly pageUrlSegment = 'submit-letter-template';
+  static readonly pageUrlSegments = ['submit-letter-template'];
 
   public static readonly urlRegexp = new RegExp(
     /\/templates\/submit-letter-template\/([\dA-Fa-f-]+)$/
diff --git a/tests/test-team/pages/letter/template-mgmt-template-submitted-letter-page.ts b/tests/test-team/pages/letter/template-mgmt-template-submitted-letter-page.ts
index f57d00eb8..85e8b6173 100644
--- a/tests/test-team/pages/letter/template-mgmt-template-submitted-letter-page.ts
+++ b/tests/test-team/pages/letter/template-mgmt-template-submitted-letter-page.ts
@@ -1,7 +1,7 @@
 import { TemplateMgmtTemplateSubmittedBasePage } from '../template-mgmt-template-submitted-base-page';
 
 export class TemplateMgmtTemplateSubmittedLetterPage extends TemplateMgmtTemplateSubmittedBasePage {
-  static readonly pageUrlSegment = 'letter-template-submitted';
+  static readonly pageUrlSegments = ['letter-template-submitted'];
 
   public static readonly urlRegexp = new RegExp(
     /\/templates\/letter-template-submitted\/([\dA-Fa-f-]+)$/
diff --git a/tests/test-team/pages/letter/template-mgmt-upload-letter-missing-campaign-client-id-page.ts b/tests/test-team/pages/letter/template-mgmt-upload-letter-missing-campaign-client-id-page.ts
index 1a7245148..8458bc8c1 100644
--- a/tests/test-team/pages/letter/template-mgmt-upload-letter-missing-campaign-client-id-page.ts
+++ b/tests/test-team/pages/letter/template-mgmt-upload-letter-missing-campaign-client-id-page.ts
@@ -2,8 +2,9 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtUploadLetterMissingCampaignClientIdPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment =
-    'upload-letter-template/client-id-and-campaign-id-required';
+  static readonly pageUrlSegments = [
+    'upload-letter-template/client-id-and-campaign-id-required',
+  ];
 
   public readonly errorDetailsInsetText: Locator;
   public readonly goBackLink: Locator;
diff --git a/tests/test-team/pages/letter/template-mgmt-upload-letter-page.ts b/tests/test-team/pages/letter/template-mgmt-upload-letter-page.ts
index 14c462d74..59eb507db 100644
--- a/tests/test-team/pages/letter/template-mgmt-upload-letter-page.ts
+++ b/tests/test-team/pages/letter/template-mgmt-upload-letter-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtUploadLetterPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'upload-letter-template';
+  static readonly pageUrlSegments = ['upload-letter-template'];
 
   public readonly nameInput: Locator;
 
diff --git a/tests/test-team/pages/nhs-app/template-mgmt-create-nhs-app-page.ts b/tests/test-team/pages/nhs-app/template-mgmt-create-nhs-app-page.ts
index 483d2ef02..9e9200766 100644
--- a/tests/test-team/pages/nhs-app/template-mgmt-create-nhs-app-page.ts
+++ b/tests/test-team/pages/nhs-app/template-mgmt-create-nhs-app-page.ts
@@ -3,7 +3,7 @@ import { TemplateMgmtMessageFormatting } from '../template-mgmt-message-formatti
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtCreateNhsAppPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'create-nhs-app-template';
+  static readonly pageUrlSegments = ['create-nhs-app-template'];
 
   public readonly nameInput: Locator;
 
diff --git a/tests/test-team/pages/nhs-app/template-mgmt-edit-nhs-app-page.ts b/tests/test-team/pages/nhs-app/template-mgmt-edit-nhs-app-page.ts
index 78453712f..97fa5a8f3 100644
--- a/tests/test-team/pages/nhs-app/template-mgmt-edit-nhs-app-page.ts
+++ b/tests/test-team/pages/nhs-app/template-mgmt-edit-nhs-app-page.ts
@@ -3,7 +3,7 @@ import { TemplateMgmtMessageFormatting } from '../template-mgmt-message-formatti
 import { TemplateMgmtBasePageDynamic } from '../template-mgmt-base-page-dynamic';
 
 export class TemplateMgmtEditNhsAppPage extends TemplateMgmtBasePageDynamic {
-  static readonly pageUrlSegment = 'edit-nhs-app-template';
+  static readonly pageUrlSegments = ['edit-nhs-app-template'];
 
   public readonly nameInput: Locator;
 
diff --git a/tests/test-team/pages/nhs-app/template-mgmt-preview-nhs-app-page.ts b/tests/test-team/pages/nhs-app/template-mgmt-preview-nhs-app-page.ts
index 7097efcf5..75f1de0c8 100644
--- a/tests/test-team/pages/nhs-app/template-mgmt-preview-nhs-app-page.ts
+++ b/tests/test-team/pages/nhs-app/template-mgmt-preview-nhs-app-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtPreviewBasePage } from '../template-mgmt-preview-base-page';
 
 export class TemplateMgmtPreviewNhsAppPage extends TemplateMgmtPreviewBasePage {
-  static readonly pageUrlSegment = 'preview-nhs-app-template';
+  static readonly pageUrlSegments = ['preview-nhs-app-template'];
 
   public readonly editRadioOption: Locator;
 
diff --git a/tests/test-team/pages/nhs-app/template-mgmt-preview-submitted-nhs-app-page.ts b/tests/test-team/pages/nhs-app/template-mgmt-preview-submitted-nhs-app-page.ts
index 059a8289d..594ecf3f6 100644
--- a/tests/test-team/pages/nhs-app/template-mgmt-preview-submitted-nhs-app-page.ts
+++ b/tests/test-team/pages/nhs-app/template-mgmt-preview-submitted-nhs-app-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtPreviewSubmitedBasePage } from '../template-mgmt-preview-submitted-base-page';
 
 export class TemplateMgmtPreviewSubmittedNhsAppPage extends TemplateMgmtPreviewSubmitedBasePage {
-  static readonly pageUrlSegment = 'preview-submitted-nhs-app-template';
+  static readonly pageUrlSegments = ['preview-submitted-nhs-app-template'];
 
   public readonly messageText: Locator;
 
diff --git a/tests/test-team/pages/nhs-app/template-mgmt-submit-nhs-app-page.ts b/tests/test-team/pages/nhs-app/template-mgmt-submit-nhs-app-page.ts
index d45b688e3..db2572db5 100644
--- a/tests/test-team/pages/nhs-app/template-mgmt-submit-nhs-app-page.ts
+++ b/tests/test-team/pages/nhs-app/template-mgmt-submit-nhs-app-page.ts
@@ -1,5 +1,5 @@
 import { TemplateMgmtSubmitBasePage } from '../template-mgmt-submit-base-page';
 
 export class TemplateMgmtSubmitNhsAppPage extends TemplateMgmtSubmitBasePage {
-  static readonly pageUrlSegment = 'submit-nhs-app-template';
+  static readonly pageUrlSegments = ['submit-nhs-app-template'];
 }
diff --git a/tests/test-team/pages/nhs-app/template-mgmt-template-submitted-nhs-app-page.ts b/tests/test-team/pages/nhs-app/template-mgmt-template-submitted-nhs-app-page.ts
index aea086ca2..9c1429ae5 100644
--- a/tests/test-team/pages/nhs-app/template-mgmt-template-submitted-nhs-app-page.ts
+++ b/tests/test-team/pages/nhs-app/template-mgmt-template-submitted-nhs-app-page.ts
@@ -1,5 +1,5 @@
 import { TemplateMgmtTemplateSubmittedBasePage } from '../template-mgmt-template-submitted-base-page';
 
 export class TemplateMgmtTemplateSubmittedNhsAppPage extends TemplateMgmtTemplateSubmittedBasePage {
-  static readonly pageUrlSegment = 'nhs-app-template-submitted';
+  static readonly pageUrlSegments = ['nhs-app-template-submitted'];
 }
diff --git a/tests/test-team/pages/routing/campaign-id-required-page.ts b/tests/test-team/pages/routing/campaign-id-required-page.ts
index c24fc180f..2e0a09aac 100644
--- a/tests/test-team/pages/routing/campaign-id-required-page.ts
+++ b/tests/test-team/pages/routing/campaign-id-required-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class RoutingMessagePlanCampaignIdRequiredPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'message-plans/campaign-id-required';
+  static readonly pageUrlSegments = ['message-plans/campaign-id-required'];
 
   public readonly errorDetailsInsetText: Locator;
   public readonly goBackLink: Locator;
diff --git a/tests/test-team/pages/routing/choose-message-order-page.ts b/tests/test-team/pages/routing/choose-message-order-page.ts
index ad003755a..5a6a4beee 100644
--- a/tests/test-team/pages/routing/choose-message-order-page.ts
+++ b/tests/test-team/pages/routing/choose-message-order-page.ts
@@ -2,7 +2,7 @@ import { Locator, type Page } from '@playwright/test';
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class RoutingChooseMessageOrderPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'message-plans/choose-message-order';
+  static readonly pageUrlSegments = ['message-plans/choose-message-order'];
 
   readonly radioButtons: Locator;
 
diff --git a/tests/test-team/pages/routing/choose-templates-page.ts b/tests/test-team/pages/routing/choose-templates-page.ts
index 923bc07e0..9c7903416 100644
--- a/tests/test-team/pages/routing/choose-templates-page.ts
+++ b/tests/test-team/pages/routing/choose-templates-page.ts
@@ -2,7 +2,7 @@ import { Locator, type Page } from '@playwright/test';
 import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
 
 export class RoutingChooseTemplatesPage extends TemplateMgmtBasePageDynamic {
-  static readonly pageUrlSegment = 'message-plans/choose-templates';
+  static readonly pageUrlSegments = ['message-plans/choose-templates'];
 
   public readonly errorSummary: Locator;
 
diff --git a/tests/test-team/pages/routing/create-message-plan-page.ts b/tests/test-team/pages/routing/create-message-plan-page.ts
index c3a0c46b2..f5e5a4ad4 100644
--- a/tests/test-team/pages/routing/create-message-plan-page.ts
+++ b/tests/test-team/pages/routing/create-message-plan-page.ts
@@ -2,7 +2,7 @@ import { Locator, type Page } from '@playwright/test';
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class RoutingCreateMessagePlanPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'message-plans/create-message-plan';
+  static readonly pageUrlSegments = ['message-plans/create-message-plan'];
 
   readonly submitButton: Locator;
 
diff --git a/tests/test-team/pages/routing/edit-message-plan-settings-page.ts b/tests/test-team/pages/routing/edit-message-plan-settings-page.ts
index e1fb108dc..b10c54fc6 100644
--- a/tests/test-team/pages/routing/edit-message-plan-settings-page.ts
+++ b/tests/test-team/pages/routing/edit-message-plan-settings-page.ts
@@ -2,7 +2,9 @@ import { Locator, type Page } from '@playwright/test';
 import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
 
 export class RoutingEditMessagePlanSettingsPage extends TemplateMgmtBasePageDynamic {
-  static readonly pageUrlSegment = 'message-plans/edit-message-plan-settings';
+  static readonly pageUrlSegments = [
+    'message-plans/edit-message-plan-settings',
+  ];
 
   readonly submitButton: Locator;
 
diff --git a/tests/test-team/pages/routing/email/choose-email-template-page.ts b/tests/test-team/pages/routing/email/choose-email-template-page.ts
new file mode 100644
index 000000000..bae8e0457
--- /dev/null
+++ b/tests/test-team/pages/routing/email/choose-email-template-page.ts
@@ -0,0 +1,10 @@
+import { type Page } from '@playwright/test';
+import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
+
+export class RoutingChooseEmailTemplatePage extends TemplateMgmtBasePageDynamic {
+  static readonly pageUrlSegments = ['message-plans/choose-email-template'];
+
+  constructor(page: Page) {
+    super(page);
+  }
+}
diff --git a/tests/test-team/pages/routing/email/preview-email-page.ts b/tests/test-team/pages/routing/email/preview-email-page.ts
new file mode 100644
index 000000000..e6a17b162
--- /dev/null
+++ b/tests/test-team/pages/routing/email/preview-email-page.ts
@@ -0,0 +1,13 @@
+import { type Page } from '@playwright/test';
+import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
+
+export class RoutingPreviewEmailTemplatePage extends TemplateMgmtBasePageDynamic {
+  static readonly pageUrlSegments = [
+    'message-plans/choose-email-template',
+    'preview-template',
+  ];
+
+  constructor(page: Page) {
+    super(page);
+  }
+}
diff --git a/tests/test-team/pages/routing/invalid-message-plan-page.ts b/tests/test-team/pages/routing/invalid-message-plan-page.ts
index 72376e9da..992a31aa9 100644
--- a/tests/test-team/pages/routing/invalid-message-plan-page.ts
+++ b/tests/test-team/pages/routing/invalid-message-plan-page.ts
@@ -1,5 +1,5 @@
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class RoutingInvalidMessagePlanPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'message-plans/invalid';
+  static readonly pageUrlSegments = ['message-plans/invalid'];
 }
diff --git a/tests/test-team/pages/routing/letter/choose-standard-letter-template-page.ts b/tests/test-team/pages/routing/letter/choose-standard-letter-template-page.ts
new file mode 100644
index 000000000..fd532b337
--- /dev/null
+++ b/tests/test-team/pages/routing/letter/choose-standard-letter-template-page.ts
@@ -0,0 +1,12 @@
+import { type Page } from '@playwright/test';
+import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
+
+export class RoutingChooseStandardLetterTemplatePage extends TemplateMgmtBasePageDynamic {
+  static readonly pageUrlSegments = [
+    'message-plans/choose-standard-english-letter-template',
+  ];
+
+  constructor(page: Page) {
+    super(page);
+  }
+}
diff --git a/tests/test-team/pages/routing/letter/preview-standard-letter-page.ts b/tests/test-team/pages/routing/letter/preview-standard-letter-page.ts
new file mode 100644
index 000000000..11c35db1d
--- /dev/null
+++ b/tests/test-team/pages/routing/letter/preview-standard-letter-page.ts
@@ -0,0 +1,13 @@
+import { type Page } from '@playwright/test';
+import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
+
+export class RoutingPreviewStandardLetterTemplatePage extends TemplateMgmtBasePageDynamic {
+  static readonly pageUrlSegments = [
+    'message-plans/choose-standard-english-letter-template',
+    'preview-template',
+  ];
+
+  constructor(page: Page) {
+    super(page);
+  }
+}
diff --git a/tests/test-team/pages/routing/message-plans-page.ts b/tests/test-team/pages/routing/message-plans-page.ts
index c71417ce4..3d53051e1 100644
--- a/tests/test-team/pages/routing/message-plans-page.ts
+++ b/tests/test-team/pages/routing/message-plans-page.ts
@@ -2,7 +2,7 @@ import { Locator, type Page } from '@playwright/test';
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class RoutingMessagePlansPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'message-plans';
+  static readonly pageUrlSegments = ['message-plans'];
 
   readonly messagePlanStatusInfo: Locator;
 
diff --git a/tests/test-team/pages/routing/nhs-app/choose-nhs-app-template-page.ts b/tests/test-team/pages/routing/nhs-app/choose-nhs-app-template-page.ts
new file mode 100644
index 000000000..72b45d973
--- /dev/null
+++ b/tests/test-team/pages/routing/nhs-app/choose-nhs-app-template-page.ts
@@ -0,0 +1,10 @@
+import { type Page } from '@playwright/test';
+import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
+
+export class RoutingChooseNhsAppTemplatePage extends TemplateMgmtBasePageDynamic {
+  static readonly pageUrlSegments = ['message-plans/choose-nhs-app-template'];
+
+  constructor(page: Page) {
+    super(page);
+  }
+}
diff --git a/tests/test-team/pages/routing/nhs-app/preview-nhs-app-page.ts b/tests/test-team/pages/routing/nhs-app/preview-nhs-app-page.ts
new file mode 100644
index 000000000..e0aa97923
--- /dev/null
+++ b/tests/test-team/pages/routing/nhs-app/preview-nhs-app-page.ts
@@ -0,0 +1,13 @@
+import { type Page } from '@playwright/test';
+import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
+
+export class RoutingPreviewNhsAppTemplatePage extends TemplateMgmtBasePageDynamic {
+  static readonly pageUrlSegments = [
+    'message-plans/choose-nhs-app-template',
+    'preview-template',
+  ];
+
+  constructor(page: Page) {
+    super(page);
+  }
+}
diff --git a/tests/test-team/pages/routing/sms/choose-sms-template-page.ts b/tests/test-team/pages/routing/sms/choose-sms-template-page.ts
new file mode 100644
index 000000000..b49fd9c92
--- /dev/null
+++ b/tests/test-team/pages/routing/sms/choose-sms-template-page.ts
@@ -0,0 +1,12 @@
+import { type Page } from '@playwright/test';
+import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
+
+export class RoutingChooseTextMessageTemplatePage extends TemplateMgmtBasePageDynamic {
+  static readonly pageUrlSegments = [
+    'message-plans/choose-text-message-template',
+  ];
+
+  constructor(page: Page) {
+    super(page);
+  }
+}
diff --git a/tests/test-team/pages/routing/sms/preview-sms-template-page.ts b/tests/test-team/pages/routing/sms/preview-sms-template-page.ts
new file mode 100644
index 000000000..3c44ce303
--- /dev/null
+++ b/tests/test-team/pages/routing/sms/preview-sms-template-page.ts
@@ -0,0 +1,13 @@
+import { type Page } from '@playwright/test';
+import { TemplateMgmtBasePageDynamic } from 'pages/template-mgmt-base-page-dynamic';
+
+export class RoutingPreviewSmsTemplatePage extends TemplateMgmtBasePageDynamic {
+  static readonly pageUrlSegments = [
+    'message-plans/choose-text-message-template',
+    'preview-template',
+  ];
+
+  constructor(page: Page) {
+    super(page);
+  }
+}
diff --git a/tests/test-team/pages/sms/template-mgmt-create-sms-page.ts b/tests/test-team/pages/sms/template-mgmt-create-sms-page.ts
index e6e22020e..fc0698ca9 100644
--- a/tests/test-team/pages/sms/template-mgmt-create-sms-page.ts
+++ b/tests/test-team/pages/sms/template-mgmt-create-sms-page.ts
@@ -3,7 +3,7 @@ import { TemplateMgmtMessageFormatting } from '../template-mgmt-message-formatti
 import { TemplateMgmtBasePageNonDynamic } from '../template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtCreateSmsPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'create-text-message-template';
+  static readonly pageUrlSegments = ['create-text-message-template'];
 
   public readonly nameInput: Locator;
 
@@ -58,10 +58,6 @@ export class TemplateMgmtCreateSmsPage extends TemplateMgmtBasePageNonDynamic {
     await this.waitForPageToLoad();
   }
 
-  async attemptToLoadPageExpectFailure() {
-    await super.loadPage();
-  }
-
   async waitForPageToLoad() {
     const characterCountLocator = this.page.locator(
       '[data-testid="character-message-count-0"]'
@@ -72,4 +68,8 @@ export class TemplateMgmtCreateSmsPage extends TemplateMgmtBasePageNonDynamic {
   async clickSaveAndPreviewButton() {
     await this.saveAndPreviewButton.click();
   }
+
+  async attemptToLoadPageExpectFailure() {
+    await super.loadPage();
+  }
 }
diff --git a/tests/test-team/pages/sms/template-mgmt-edit-sms-page.ts b/tests/test-team/pages/sms/template-mgmt-edit-sms-page.ts
index 624cc389d..537f7d25a 100644
--- a/tests/test-team/pages/sms/template-mgmt-edit-sms-page.ts
+++ b/tests/test-team/pages/sms/template-mgmt-edit-sms-page.ts
@@ -3,7 +3,7 @@ import { TemplateMgmtMessageFormatting } from '../template-mgmt-message-formatti
 import { TemplateMgmtBasePageDynamic } from '../template-mgmt-base-page-dynamic';
 
 export class TemplateMgmtEditSmsPage extends TemplateMgmtBasePageDynamic {
-  static readonly pageUrlSegment = 'edit-text-message-template';
+  static readonly pageUrlSegments = ['edit-text-message-template'];
 
   public readonly nameInput: Locator;
 
@@ -53,10 +53,6 @@ export class TemplateMgmtEditSmsPage extends TemplateMgmtBasePageDynamic {
     await this.waitForPageToLoad();
   }
 
-  async attemptToLoadPageExpectFailure(templateId: string) {
-    await super.loadPage(templateId);
-  }
-
   async waitForPageToLoad() {
     const characterCountLocator = this.page.locator(
       '[data-testid="character-message-count-0"]'
@@ -67,4 +63,8 @@ export class TemplateMgmtEditSmsPage extends TemplateMgmtBasePageDynamic {
   async clickSaveAndPreviewButton() {
     await this.saveAndPreviewButton.click();
   }
+
+  async attemptToLoadPageExpectFailure(templateId: string) {
+    await super.loadPage(templateId);
+  }
 }
diff --git a/tests/test-team/pages/sms/template-mgmt-preview-sms-page.ts b/tests/test-team/pages/sms/template-mgmt-preview-sms-page.ts
index 56c13d0c4..9d1a092dc 100644
--- a/tests/test-team/pages/sms/template-mgmt-preview-sms-page.ts
+++ b/tests/test-team/pages/sms/template-mgmt-preview-sms-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtPreviewBasePage } from '../template-mgmt-preview-base-page';
 
 export class TemplateMgmtPreviewSmsPage extends TemplateMgmtPreviewBasePage {
-  static readonly pageUrlSegment = 'preview-text-message-template';
+  static readonly pageUrlSegments = ['preview-text-message-template'];
 
   public readonly editRadioOption: Locator;
 
diff --git a/tests/test-team/pages/sms/template-mgmt-preview-submitted-sms-page.ts b/tests/test-team/pages/sms/template-mgmt-preview-submitted-sms-page.ts
index 42332dcef..8e7159e61 100644
--- a/tests/test-team/pages/sms/template-mgmt-preview-submitted-sms-page.ts
+++ b/tests/test-team/pages/sms/template-mgmt-preview-submitted-sms-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtPreviewSubmitedBasePage } from '../template-mgmt-preview-submitted-base-page';
 
 export class TemplateMgmtPreviewSubmittedSmsPage extends TemplateMgmtPreviewSubmitedBasePage {
-  static readonly pageUrlSegment = 'preview-submitted-text-message-template';
+  static readonly pageUrlSegments = ['preview-submitted-text-message-template'];
 
   public readonly messageText: Locator;
 
diff --git a/tests/test-team/pages/sms/template-mgmt-submit-sms-page.ts b/tests/test-team/pages/sms/template-mgmt-submit-sms-page.ts
index e1f3568a0..07a0674a0 100644
--- a/tests/test-team/pages/sms/template-mgmt-submit-sms-page.ts
+++ b/tests/test-team/pages/sms/template-mgmt-submit-sms-page.ts
@@ -1,5 +1,5 @@
 import { TemplateMgmtSubmitBasePage } from '../template-mgmt-submit-base-page';
 
 export class TemplateMgmtSubmitSmsPage extends TemplateMgmtSubmitBasePage {
-  static readonly pageUrlSegment = 'submit-text-message-template';
+  static readonly pageUrlSegments = ['submit-text-message-template'];
 }
diff --git a/tests/test-team/pages/sms/template-mgmt-template-submitted-sms-page.ts b/tests/test-team/pages/sms/template-mgmt-template-submitted-sms-page.ts
index 6dcecb59c..8c76b28f3 100644
--- a/tests/test-team/pages/sms/template-mgmt-template-submitted-sms-page.ts
+++ b/tests/test-team/pages/sms/template-mgmt-template-submitted-sms-page.ts
@@ -1,5 +1,5 @@
 import { TemplateMgmtTemplateSubmittedBasePage } from '../template-mgmt-template-submitted-base-page';
 
 export class TemplateMgmtTemplateSubmittedSmsPage extends TemplateMgmtTemplateSubmittedBasePage {
-  static readonly pageUrlSegment = 'text-message-template-submitted';
+  static readonly pageUrlSegments = ['text-message-template-submitted'];
 }
diff --git a/tests/test-team/pages/template-mgmt-base-page-dynamic.ts b/tests/test-team/pages/template-mgmt-base-page-dynamic.ts
index d4bff1ceb..9226a1ba9 100644
--- a/tests/test-team/pages/template-mgmt-base-page-dynamic.ts
+++ b/tests/test-team/pages/template-mgmt-base-page-dynamic.ts
@@ -8,25 +8,33 @@ export abstract class TemplateMgmtBasePageDynamic extends TemplateMgmtBasePage {
     super(page);
   }
 
-  async loadPage(idParameter: string) {
-    const { appUrlSegment, pageUrlSegment } = this
+  async loadPage(...idParameters: string[]) {
+    const { appUrlSegment, pageUrlSegments } = this
       .constructor as typeof TemplateMgmtBasePageDynamic;
 
-    if (!pageUrlSegment) {
-      throw new Error('pageUrlSegment is not defined');
+    if (!pageUrlSegments || pageUrlSegments.length === 0) {
+      throw new Error('Invalid pageUrlSegments');
     }
 
-    await this.navigateTo(`/${appUrlSegment}/${pageUrlSegment}/${idParameter}`);
+    if (idParameters.length !== pageUrlSegments.length) {
+      throw new Error('ID parameters and URL segments mismatch');
+    }
+
+    await this.navigateTo(
+      `/${appUrlSegment}/${pageUrlSegments
+        .map((segment, index) => `${segment}/${idParameters[index]}`)
+        .join('/')}`
+    );
   }
 
-  getIdFromUrl(): string | undefined {
-    const { pageUrlSegment } = this
+  getIdFromUrl(segmentIndex: number = 0): string | undefined {
+    const { pageUrlSegments } = this
       .constructor as typeof TemplateMgmtBasePageDynamic;
 
     const match = this.page
       .url()
       // eslint-disable-next-line security/detect-non-literal-regexp
-      .match(new RegExp(`${pageUrlSegment}/([^#/?]+)`));
+      .match(new RegExp(`${pageUrlSegments[segmentIndex]}/([^#/?]+)`));
     const id = match ? match[1] : undefined;
     return id;
   }
diff --git a/tests/test-team/pages/template-mgmt-base-page-non-dynamic.ts b/tests/test-team/pages/template-mgmt-base-page-non-dynamic.ts
index 431f75d02..2e3786b95 100644
--- a/tests/test-team/pages/template-mgmt-base-page-non-dynamic.ts
+++ b/tests/test-team/pages/template-mgmt-base-page-non-dynamic.ts
@@ -9,14 +9,14 @@ export abstract class TemplateMgmtBasePageNonDynamic extends TemplateMgmtBasePag
   }
 
   async loadPage() {
-    const { appUrlSegment, pageUrlSegment } = this
+    const { appUrlSegment, pageUrlSegments } = this
       .constructor as typeof TemplateMgmtBasePageNonDynamic;
 
-    if (!pageUrlSegment) {
-      throw new Error('pageUrlSegment is not defined');
+    if (!pageUrlSegments || pageUrlSegments.length !== 1) {
+      throw new Error('Invalid pageUrlSegments');
     }
 
-    let url = `/${appUrlSegment}/${pageUrlSegment}`;
+    let url = `/${appUrlSegment}/${pageUrlSegments[0]}`;
 
     if (this.queryParameters) {
       url += `?${this.queryParameters.toString()}`;
diff --git a/tests/test-team/pages/template-mgmt-base-page.ts b/tests/test-team/pages/template-mgmt-base-page.ts
index 91ada3623..5993a9eba 100644
--- a/tests/test-team/pages/template-mgmt-base-page.ts
+++ b/tests/test-team/pages/template-mgmt-base-page.ts
@@ -5,7 +5,7 @@ export abstract class TemplateMgmtBasePage {
 
   static readonly appUrlSegment = 'templates';
 
-  static readonly pageUrlSegment: string;
+  static readonly pageUrlSegments: string[];
 
   queryParameters?: URLSearchParams;
 
@@ -69,10 +69,10 @@ export abstract class TemplateMgmtBasePage {
       .and(page.getByText('Skip to main content'));
   }
 
-  abstract loadPage(idParameter?: string): Promise<void>;
+  abstract loadPage(...idParameters: string[]): Promise<void>;
 
-  async attemptToLoadPageExpectFailure(idParameter?: string) {
-    await this.loadPage(idParameter);
+  async attemptToLoadPageExpectFailure(...idParameters: string[]) {
+    await this.loadPage(...idParameters);
   }
 
   async navigateTo(url: string) {
diff --git a/tests/test-team/pages/template-mgmt-choose-page.ts b/tests/test-team/pages/template-mgmt-choose-page.ts
index d095fac55..d36eb35a4 100644
--- a/tests/test-team/pages/template-mgmt-choose-page.ts
+++ b/tests/test-team/pages/template-mgmt-choose-page.ts
@@ -2,7 +2,7 @@ import { Locator, type Page } from '@playwright/test';
 import { TemplateMgmtBasePageNonDynamic } from './template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtChoosePage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'choose-a-template-type';
+  static readonly pageUrlSegments = ['choose-a-template-type'];
 
   readonly radioButtons: Locator;
 
diff --git a/tests/test-team/pages/template-mgmt-copy-page.ts b/tests/test-team/pages/template-mgmt-copy-page.ts
index c25d129f1..a47f8b740 100644
--- a/tests/test-team/pages/template-mgmt-copy-page.ts
+++ b/tests/test-team/pages/template-mgmt-copy-page.ts
@@ -2,7 +2,7 @@ import { Locator, type Page } from '@playwright/test';
 import { TemplateMgmtBasePageDynamic } from './template-mgmt-base-page-dynamic';
 
 export class TemplateMgmtCopyPage extends TemplateMgmtBasePageDynamic {
-  static readonly pageUrlSegment = 'copy-template';
+  static readonly pageUrlSegments = ['copy-template'];
 
   readonly radioButtons: Locator;
 
diff --git a/tests/test-team/pages/template-mgmt-delete-page.ts b/tests/test-team/pages/template-mgmt-delete-page.ts
index 3c160c9f2..d31a0e750 100644
--- a/tests/test-team/pages/template-mgmt-delete-page.ts
+++ b/tests/test-team/pages/template-mgmt-delete-page.ts
@@ -2,7 +2,7 @@ import { Locator, type Page } from '@playwright/test';
 import { TemplateMgmtBasePageDynamic } from './template-mgmt-base-page-dynamic';
 
 export class TemplateMgmtDeletePage extends TemplateMgmtBasePageDynamic {
-  static readonly pageUrlSegment = 'delete-template';
+  static readonly pageUrlSegments = ['delete-template'];
 
   readonly goBackButton: Locator;
 
diff --git a/tests/test-team/pages/template-mgmt-invalid-tempate-page.ts b/tests/test-team/pages/template-mgmt-invalid-tempate-page.ts
index 56333cfdd..e13b2fe4b 100644
--- a/tests/test-team/pages/template-mgmt-invalid-tempate-page.ts
+++ b/tests/test-team/pages/template-mgmt-invalid-tempate-page.ts
@@ -1,5 +1,5 @@
 import { TemplateMgmtBasePageNonDynamic } from './template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtInvalidTemplatePage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'invalid-template';
+  static readonly pageUrlSegments = ['invalid-template'];
 }
diff --git a/tests/test-team/pages/template-mgmt-message-templates-page.ts b/tests/test-team/pages/template-mgmt-message-templates-page.ts
index 21c5aba48..922bd4594 100644
--- a/tests/test-team/pages/template-mgmt-message-templates-page.ts
+++ b/tests/test-team/pages/template-mgmt-message-templates-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtBasePageNonDynamic } from './template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtMessageTemplatesPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'message-templates';
+  static readonly pageUrlSegments = ['message-templates'];
 
   readonly createTemplateButton: Locator;
 
diff --git a/tests/test-team/pages/template-mgmt-request-proof-page.ts b/tests/test-team/pages/template-mgmt-request-proof-page.ts
index 10d871c2b..7b23571a8 100644
--- a/tests/test-team/pages/template-mgmt-request-proof-page.ts
+++ b/tests/test-team/pages/template-mgmt-request-proof-page.ts
@@ -2,7 +2,7 @@ import { Locator, Page } from '@playwright/test';
 import { TemplateMgmtBasePageDynamic } from './template-mgmt-base-page-dynamic';
 
 export class TemplateMgmtRequestProofPage extends TemplateMgmtBasePageDynamic {
-  static readonly pageUrlSegment = 'request-proof-of-template';
+  static readonly pageUrlSegments = ['request-proof-of-template'];
 
   public static readonly urlRegexp = new RegExp(
     /\/templates\/request-proof-of-template\/([\dA-Fa-f-]+)$/
diff --git a/tests/test-team/pages/template-mgmt-start-page.ts b/tests/test-team/pages/template-mgmt-start-page.ts
index 093e15fc6..2902ad623 100644
--- a/tests/test-team/pages/template-mgmt-start-page.ts
+++ b/tests/test-team/pages/template-mgmt-start-page.ts
@@ -2,7 +2,7 @@ import { Locator, type Page } from '@playwright/test';
 import { TemplateMgmtBasePageNonDynamic } from './template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtStartPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'create-and-submit-templates';
+  static readonly pageUrlSegments = ['create-and-submit-templates'];
 
   readonly startButton: Locator;
 
diff --git a/tests/test-team/pages/templates-mgmt-login-page.ts b/tests/test-team/pages/templates-mgmt-login-page.ts
index 6b2f4ff86..ef49a98af 100644
--- a/tests/test-team/pages/templates-mgmt-login-page.ts
+++ b/tests/test-team/pages/templates-mgmt-login-page.ts
@@ -6,7 +6,7 @@ import {
 import { TemplateMgmtBasePageNonDynamic } from './template-mgmt-base-page-non-dynamic';
 
 export class TemplateMgmtSignInPage extends TemplateMgmtBasePageNonDynamic {
-  static readonly pageUrlSegment = 'create-and-submit-templates';
+  static readonly pageUrlSegments = ['create-and-submit-templates'];
 
   public readonly emailInput: Locator;
 
diff --git a/tests/test-team/template-mgmt-accessibility/routing.accessibility.spec.ts b/tests/test-team/template-mgmt-accessibility/routing.accessibility.spec.ts
index 82283e05f..ab1c9240c 100644
--- a/tests/test-team/template-mgmt-accessibility/routing.accessibility.spec.ts
+++ b/tests/test-team/template-mgmt-accessibility/routing.accessibility.spec.ts
@@ -94,7 +94,7 @@ test.describe('Routing - Accessibility', () => {
 
   test('Choose template', async ({ page, analyze }) =>
     analyze(new RoutingChooseTemplatesPage(page), {
-      id: validRoutingConfigId,
+      ids: [validRoutingConfigId],
     }));
 
   test('Choose message order - error', async ({ page, analyze }) =>
diff --git a/tests/test-team/template-mgmt-api-tests/create-template.api.spec.ts b/tests/test-team/template-mgmt-api-tests/create-template.api.spec.ts
index 0e2415565..b68f969ee 100644
--- a/tests/test-team/template-mgmt-api-tests/create-template.api.spec.ts
+++ b/tests/test-team/template-mgmt-api-tests/create-template.api.spec.ts
@@ -146,6 +146,8 @@ test.describe('POST /v1/template', () => {
           templateType: template.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: 0,
+          createdBy: user1.userId,
+          updatedBy: user1.userId,
         },
       });
 
@@ -355,6 +357,8 @@ test.describe('POST /v1/template', () => {
           templateType: template.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: 0,
+          createdBy: user1.userId,
+          updatedBy: user1.userId,
         },
       });
 
@@ -565,6 +569,8 @@ test.describe('POST /v1/template', () => {
           templateType: template.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: 0,
+          createdBy: user1.userId,
+          updatedBy: user1.userId,
         },
       });
 
diff --git a/tests/test-team/template-mgmt-api-tests/submit-template.api.spec.ts b/tests/test-team/template-mgmt-api-tests/submit-template.api.spec.ts
index 1a9bca349..fd92293ea 100644
--- a/tests/test-team/template-mgmt-api-tests/submit-template.api.spec.ts
+++ b/tests/test-team/template-mgmt-api-tests/submit-template.api.spec.ts
@@ -542,6 +542,8 @@ test.describe('POST /v1/template/:templateId/submit', () => {
           templateType: created.data.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: created.data.lockNumber + 1,
+          createdBy: user1.userId,
+          updatedBy: user1.userId,
         },
       });
 
@@ -712,6 +714,8 @@ test.describe('POST /v1/template/:templateId/submit', () => {
           templateType: created.data.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: created.data.lockNumber + 1,
+          createdBy: user1.userId,
+          updatedBy: user1.userId,
         },
       });
 
@@ -883,6 +887,8 @@ test.describe('POST /v1/template/:templateId/submit', () => {
           templateType: created.data.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: created.data.lockNumber + 1,
+          createdBy: user1.userId,
+          updatedBy: user1.userId,
         },
       });
 
@@ -1056,6 +1062,8 @@ test.describe('POST /v1/template/:templateId/submit', () => {
           templateType: created.data.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: created.data.lockNumber + 1,
+          createdBy: user1.userId,
+          updatedBy: userSharedClient.userId,
         },
       });
     });
diff --git a/tests/test-team/template-mgmt-api-tests/update-template.api.spec.ts b/tests/test-team/template-mgmt-api-tests/update-template.api.spec.ts
index e851ec279..8bf693395 100644
--- a/tests/test-team/template-mgmt-api-tests/update-template.api.spec.ts
+++ b/tests/test-team/template-mgmt-api-tests/update-template.api.spec.ts
@@ -313,6 +313,8 @@ test.describe('PUT /v1/template/:templateId', () => {
           templateType: updateData.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: created.data.lockNumber + 1,
+          createdBy: user1.userId,
+          updatedBy: user1.userId,
         },
       });
 
@@ -856,6 +858,8 @@ test.describe('PUT /v1/template/:templateId', () => {
           templateType: updateData.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: created.data.lockNumber + 1,
+          createdBy: user1.userId,
+          updatedBy: user1.userId,
         },
       });
 
@@ -1403,6 +1407,8 @@ test.describe('PUT /v1/template/:templateId', () => {
           templateType: updateData.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: created.data.lockNumber + 1,
+          createdBy: user1.userId,
+          updatedBy: user1.userId,
         },
       });
 
@@ -2049,6 +2055,8 @@ test.describe('PUT /v1/template/:templateId', () => {
           templateType: updateData.templateType,
           updatedAt: expect.stringMatching(isoDateRegExp),
           lockNumber: created.data.lockNumber + 1,
+          createdBy: user1.userId,
+          updatedBy: userSharedClient.userId,
         },
       });
 
diff --git a/tests/test-team/template-mgmt-api-tests/upload-letter-template.api.spec.ts b/tests/test-team/template-mgmt-api-tests/upload-letter-template.api.spec.ts
index 265918d79..fcb400424 100644
--- a/tests/test-team/template-mgmt-api-tests/upload-letter-template.api.spec.ts
+++ b/tests/test-team/template-mgmt-api-tests/upload-letter-template.api.spec.ts
@@ -105,6 +105,8 @@ test.describe('POST /v1/letter-template', () => {
         updatedAt: expect.stringMatching(isoDateRegExp),
         clientId: user1.clientId,
         lockNumber: 1, // the api endpoint does a create and then an update so this gets incremented to 1 rather than initial 0
+        createdBy: user1.userId,
+        updatedBy: user1.userId,
       },
     });
 
@@ -186,6 +188,8 @@ test.describe('POST /v1/letter-template', () => {
         updatedAt: expect.stringMatching(isoDateRegExp),
         clientId: user1.clientId,
         lockNumber: 1,
+        createdBy: user1.userId,
+        updatedBy: user1.userId,
       },
     });
 
diff --git a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-create-letter-template-page.component.spec.ts b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-create-letter-template-page.component.spec.ts
index 6ee091484..ef099d0e6 100644
--- a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-create-letter-template-page.component.spec.ts
+++ b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-create-letter-template-page.component.spec.ts
@@ -256,7 +256,7 @@ test.describe('Upload letter Template Page', () => {
       await createTemplatePage.loadPage();
 
       await expect(page).toHaveURL(
-        `${baseURL}/templates/${TemplateMgmtUploadLetterMissingCampaignClientIdPage.pageUrlSegment}`
+        `${baseURL}/templates/${TemplateMgmtUploadLetterMissingCampaignClientIdPage.pageUrlSegments[0]}`
       );
 
       await assertMissingClientOrCampaignIdErrorPage(
diff --git a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
index 48428f22e..cfba5d431 100644
--- a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
+++ b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
@@ -125,7 +125,7 @@ test.describe('Preview Letter template Page', () => {
     await previewLetterTemplatePage.loadPage(templates.notYetSubmitted.id);
 
     await expect(page).toHaveURL(
-      `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegment}/${templates.notYetSubmitted.id}`
+      `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegments[0]}/${templates.notYetSubmitted.id}`
     );
 
     await expect(previewLetterTemplatePage.pageHeading).toContainText(
@@ -154,7 +154,7 @@ test.describe('Preview Letter template Page', () => {
     await previewLetterTemplatePage.loadPage(templates.proofingDisabled.id);
 
     await expect(page).toHaveURL(
-      `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegment}/${templates.proofingDisabled.id}`
+      `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegments[0]}/${templates.proofingDisabled.id}`
     );
 
     await expect(previewLetterTemplatePage.pageHeading).toContainText(
@@ -175,7 +175,7 @@ test.describe('Preview Letter template Page', () => {
     await previewLetterTemplatePage.loadPage(templates.pendingProofRequest.id);
 
     await expect(page).toHaveURL(
-      `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegment}/${templates.pendingProofRequest.id}`
+      `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegments[0]}/${templates.pendingProofRequest.id}`
     );
 
     await expect(previewLetterTemplatePage.pageHeading).toContainText(
@@ -196,7 +196,7 @@ test.describe('Preview Letter template Page', () => {
     await previewLetterTemplatePage.loadPage(templates.pendingUpload.id);
 
     await expect(page).toHaveURL(
-      `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegment}/${templates.pendingUpload.id}`
+      `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegments[0]}/${templates.pendingUpload.id}`
     );
 
     await expect(previewLetterTemplatePage.pageHeading).toContainText(
@@ -239,7 +239,7 @@ test.describe('Preview Letter template Page', () => {
       await previewLetterTemplatePage.loadPage(templates.pending.id);
 
       await expect(page).toHaveURL(
-        `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegment}/${templates.pending.id}`
+        `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegments[0]}/${templates.pending.id}`
       );
 
       await expect(previewLetterTemplatePage.pageHeading).toContainText(
@@ -261,7 +261,7 @@ test.describe('Preview Letter template Page', () => {
       await previewLetterTemplatePage.loadPage(templates.virus.id);
 
       await expect(page).toHaveURL(
-        `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegment}/${templates.virus.id}`
+        `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegments[0]}/${templates.virus.id}`
       );
 
       await expect(previewLetterTemplatePage.pageHeading).toContainText(
@@ -287,7 +287,7 @@ test.describe('Preview Letter template Page', () => {
       await previewLetterTemplatePage.loadPage(templates.invalid.id);
 
       await expect(page).toHaveURL(
-        `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegment}/${templates.invalid.id}`
+        `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegments[0]}/${templates.invalid.id}`
       );
 
       await expect(previewLetterTemplatePage.pageHeading).toContainText(
@@ -310,7 +310,7 @@ test.describe('Preview Letter template Page', () => {
       await previewLetterTemplatePage.loadPage(templates.withProofs.id);
 
       await expect(page).toHaveURL(
-        `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegment}/${templates.withProofs.id}`
+        `${baseURL}/templates/${TemplateMgmtPreviewLetterPage.pageUrlSegments[0]}/${templates.withProofs.id}`
       );
 
       await expect(previewLetterTemplatePage.pageHeading).toContainText(
diff --git a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-request-proof-page.component.spec.ts b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-request-proof-page.component.spec.ts
index 664034e54..688ce89a4 100644
--- a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-request-proof-page.component.spec.ts
+++ b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-request-proof-page.component.spec.ts
@@ -41,7 +41,7 @@ test.describe('Request Proof Page', () => {
     await requestProofPage.loadPage(templates.valid.id);
 
     await expect(page).toHaveURL(
-      `${baseURL}/templates/${TemplateMgmtRequestProofPage.pageUrlSegment}/${templates.valid.id}`
+      `${baseURL}/templates/${TemplateMgmtRequestProofPage.pageUrlSegments[0]}/${templates.valid.id}`
     );
 
     await expect(requestProofPage.pageHeading).toContainText(
diff --git a/tests/test-team/template-mgmt-component-tests/template-protected-routes.component.spec.ts b/tests/test-team/template-mgmt-component-tests/template-protected-routes.component.spec.ts
index 94ef0cd43..cde560b86 100644
--- a/tests/test-team/template-mgmt-component-tests/template-protected-routes.component.spec.ts
+++ b/tests/test-team/template-mgmt-component-tests/template-protected-routes.component.spec.ts
@@ -40,6 +40,14 @@ import { RoutingMessagePlansPage } from '../pages/routing/message-plans-page';
 import { RoutingChooseTemplatesPage } from 'pages/routing/choose-templates-page';
 import { RoutingEditMessagePlanSettingsPage } from 'pages/routing/edit-message-plan-settings-page';
 import { RoutingInvalidMessagePlanPage } from 'pages/routing/invalid-message-plan-page';
+import { RoutingChooseEmailTemplatePage } from 'pages/routing/email/choose-email-template-page';
+import { RoutingChooseNhsAppTemplatePage } from 'pages/routing/nhs-app/choose-nhs-app-template-page';
+import { RoutingChooseStandardLetterTemplatePage } from 'pages/routing/letter/choose-standard-letter-template-page';
+import { RoutingChooseTextMessageTemplatePage } from 'pages/routing/sms/choose-sms-template-page';
+import { RoutingPreviewNhsAppTemplatePage } from 'pages/routing/nhs-app/preview-nhs-app-page';
+import { RoutingPreviewEmailTemplatePage } from 'pages/routing/email/preview-email-page';
+import { RoutingPreviewStandardLetterTemplatePage } from 'pages/routing/letter/preview-standard-letter-page';
+import { RoutingPreviewSmsTemplatePage } from 'pages/routing/sms/preview-sms-template-page';
 
 // Reset storage state for this file to avoid being authenticated
 test.use({ storageState: { cookies: [], origins: [] } });
@@ -52,6 +60,14 @@ const protectedPages = [
   RoutingInvalidMessagePlanPage,
   RoutingMessagePlanCampaignIdRequiredPage,
   RoutingMessagePlansPage,
+  RoutingChooseEmailTemplatePage,
+  RoutingChooseNhsAppTemplatePage,
+  RoutingChooseStandardLetterTemplatePage,
+  RoutingChooseTextMessageTemplatePage,
+  RoutingPreviewNhsAppTemplatePage,
+  RoutingPreviewEmailTemplatePage,
+  RoutingPreviewStandardLetterTemplatePage,
+  RoutingPreviewSmsTemplatePage,
   TemplateMgmtChoosePage,
   TemplateMgmtCopyPage,
   TemplateMgmtCreateEmailPage,
@@ -111,13 +127,19 @@ test.describe('Protected Routes Tests', () => {
     });
 
     const nonPublic = routes.filter(
-      (r) => !publicPages.some(({ pageUrlSegment }) => pageUrlSegment === r)
+      (r) =>
+        !publicPages.some(
+          ({ pageUrlSegments }) => `${pageUrlSegments.join('/')}` === r
+        )
     );
 
     expect(nonPublic.length).toBeGreaterThan(0);
 
     const uncovered = nonPublic.filter(
-      (r) => !protectedPages.some(({ pageUrlSegment }) => pageUrlSegment === r)
+      (r) =>
+        !protectedPages.some(
+          ({ pageUrlSegments }) => `${pageUrlSegments.join('/')}` === r
+        )
     );
 
     expect(uncovered).toHaveLength(0);
@@ -126,23 +148,32 @@ test.describe('Protected Routes Tests', () => {
   });
 
   for (const PageModel of protectedPages)
-    test(`should not be able to access ${PageModel.pageUrlSegment} page without auth`, async ({
+    test(`should not be able to access ${PageModel.pageUrlSegments.join('/')} page without auth`, async ({
       page,
       baseURL,
     }) => {
       const appPage = new PageModel(page);
       const isDynamic = appPage instanceof TemplateMgmtBasePageDynamic;
 
-      await (isDynamic
-        ? appPage.attemptToLoadPageExpectFailure('template-id')
-        : appPage.attemptToLoadPageExpectFailure());
+      const ids: string[] = isDynamic
+        ? Array.from(
+            { length: PageModel.pageUrlSegments.length },
+            (_, index) => `id${index}`
+          )
+        : [];
+
+      await appPage.attemptToLoadPageExpectFailure(...ids);
+
+      let redirectPath = `/${PageModel.appUrlSegment}`;
+      for (let i = 0; i < PageModel.pageUrlSegments.length; i++) {
+        redirectPath += `/${PageModel.pageUrlSegments[i]}`;
+        if (isDynamic) {
+          redirectPath += `/${ids[i]}`;
+        }
+      }
 
-      const redirectPath = encodeURIComponent(
-        isDynamic
-          ? `/${PageModel.appUrlSegment}/${PageModel.pageUrlSegment}/template-id`
-          : `/${PageModel.appUrlSegment}/${PageModel.pageUrlSegment}`
+      await expect(page).toHaveURL(
+        `${baseURL}/auth?redirect=${encodeURIComponent(redirectPath)}`
       );
-
-      await expect(page).toHaveURL(`${baseURL}/auth?redirect=${redirectPath}`);
     });
 });
diff --git a/tests/test-team/template-mgmt-routing-component-tests/email/choose-email-template.routing-component.spec.ts b/tests/test-team/template-mgmt-routing-component-tests/email/choose-email-template.routing-component.spec.ts
new file mode 100644
index 000000000..47fd62cf3
--- /dev/null
+++ b/tests/test-team/template-mgmt-routing-component-tests/email/choose-email-template.routing-component.spec.ts
@@ -0,0 +1,241 @@
+import { test, expect } from '@playwright/test';
+import { RoutingConfigStorageHelper } from 'helpers/db/routing-config-storage-helper';
+import {
+  assertFooterLinks,
+  assertSignOutLink,
+  assertHeaderLogoLink,
+  assertSkipToMainContent,
+  assertGoBackLinkNotPresent,
+} from '../../helpers/template-mgmt-common.steps';
+import { RoutingConfigFactory } from 'helpers/factories/routing-config-factory';
+import {
+  createAuthHelper,
+  TestUser,
+  testUsers,
+} from 'helpers/auth/cognito-auth-helper';
+import { TemplateStorageHelper } from 'helpers/db/template-storage-helper';
+import { randomUUID } from 'node:crypto';
+import { TemplateFactory } from 'helpers/factories/template-factory';
+import { RoutingChooseEmailTemplatePage } from 'pages/routing/email/choose-email-template-page';
+
+const routingConfigStorageHelper = new RoutingConfigStorageHelper();
+const templateStorageHelper = new TemplateStorageHelper();
+
+const invalidMessagePlanId = 'invalid-id';
+const notFoundMessagePlanId = '48f86a39-b43c-4859-ae0b-4be4826f3a0f';
+
+function createMessagePlans(user: TestUser) {
+  return {
+    EMAIL_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'NHSAPP,EMAIL'
+    ).dbEntry,
+    NON_EMAIL_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'NHSAPP'
+    ).dbEntry,
+  };
+}
+
+function createTemplates(user: TestUser) {
+  return {
+    EMAIL1: TemplateFactory.createEmailTemplate(
+      randomUUID(),
+      user,
+      'Email template 1'
+    ),
+    EMAIL2: TemplateFactory.createEmailTemplate(
+      randomUUID(),
+      user,
+      'Email template 2'
+    ),
+    EMAIL3: TemplateFactory.createEmailTemplate(
+      randomUUID(),
+      user,
+      'Email template 3'
+    ),
+    APP: TemplateFactory.createNhsAppTemplate(
+      randomUUID(),
+      user,
+      'App template'
+    ),
+  };
+}
+
+test.describe('Routing - Choose email template page', () => {
+  let messagePlans: ReturnType<typeof createMessagePlans>;
+  let templates: ReturnType<typeof createTemplates>;
+
+  test.beforeAll(async () => {
+    const user = await createAuthHelper().getTestUser(testUsers.User1.userId);
+
+    messagePlans = createMessagePlans(user);
+    templates = createTemplates(user);
+
+    await routingConfigStorageHelper.seed(Object.values(messagePlans));
+    await templateStorageHelper.seedTemplateData(Object.values(templates));
+  });
+
+  test.afterAll(async () => {
+    await routingConfigStorageHelper.deleteSeeded();
+    await templateStorageHelper.deleteSeededTemplates();
+  });
+
+  test('common page tests', async ({ page, baseURL }) => {
+    const props = {
+      page: new RoutingChooseEmailTemplatePage(page),
+      id: messagePlans.EMAIL_ROUTING_CONFIG.id,
+      baseURL,
+    };
+    await assertSkipToMainContent(props);
+    await assertHeaderLogoLink(props);
+    await assertFooterLinks(props);
+    await assertSignOutLink(props);
+    await assertGoBackLinkNotPresent(props);
+  });
+
+  test('loads the choose email template page for a message plan with an email channel', async ({
+    page,
+    baseURL,
+  }) => {
+    const chooseEmailTemplatePage = new RoutingChooseEmailTemplatePage(page);
+    await chooseEmailTemplatePage.loadPage(
+      messagePlans.EMAIL_ROUTING_CONFIG.id
+    );
+    await expect(page).toHaveURL(
+      `${baseURL}/templates/message-plans/choose-email-template/${messagePlans.EMAIL_ROUTING_CONFIG.id}`
+    );
+
+    await test.step('displays list of email templates to choose from', async () => {
+      const table = page.getByTestId('channel-templates-table');
+      await expect(table).toBeVisible();
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-select')
+      ).toHaveText('Select');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-name')
+      ).toHaveText('Name');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-type')
+      ).toHaveText('Type');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-last-edited')
+      ).toHaveText('Last edited');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-action')
+      ).toHaveText('');
+
+      for (const template of [
+        templates.EMAIL1,
+        templates.EMAIL2,
+        templates.EMAIL3,
+      ]) {
+        await expect(table.getByText(template.name)).toBeVisible();
+
+        const radioButton = table.getByTestId(`${template.id}-radio`);
+        await expect(radioButton).toBeVisible();
+        await expect(radioButton).toHaveAttribute('value', template.id);
+        await expect(radioButton).not.toBeChecked();
+
+        const previewLink = table.getByTestId(`${template.id}-preview-link`);
+        await expect(previewLink).toBeVisible();
+        await expect(previewLink).toHaveText('Preview');
+        await expect(previewLink).toHaveAttribute(
+          'href',
+          `/templates/message-plans/choose-email-template/${messagePlans.EMAIL_ROUTING_CONFIG.id}/preview-template/${template.id}`
+        );
+      }
+
+      await expect(table.getByText(templates.APP.name)).toBeHidden();
+
+      const submitButton = page.getByTestId('submit-button');
+      await expect(submitButton).toBeVisible();
+      await expect(submitButton).toHaveText('Save and continue');
+
+      const goBackLink = page.getByRole('link', { name: 'Go back' });
+      await expect(goBackLink).toBeVisible();
+      await expect(goBackLink).toHaveAttribute(
+        'href',
+        `/templates/message-plans/choose-templates/${messagePlans.EMAIL_ROUTING_CONFIG.id}`
+      );
+    });
+
+    await test.step('errors on no selection', async () => {
+      await page.getByTestId('submit-button').click();
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/choose-email-template/${messagePlans.EMAIL_ROUTING_CONFIG.id}`
+      );
+
+      await expect(chooseEmailTemplatePage.errorSummary).toBeVisible();
+      await expect(chooseEmailTemplatePage.errorSummaryList).toHaveText([
+        'Choose an email template',
+      ]);
+    });
+
+    await test.step('submits selected template and navigates to choose templates page', async () => {
+      await chooseEmailTemplatePage.loadPage(
+        messagePlans.EMAIL_ROUTING_CONFIG.id
+      );
+
+      await page.getByTestId(`${templates.EMAIL2.id}-radio`).check();
+      await page.getByTestId('submit-button').click();
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/choose-templates/${messagePlans.EMAIL_ROUTING_CONFIG.id}`
+      );
+    });
+
+    await test.step('pre-selects previously selected template', async () => {
+      await chooseEmailTemplatePage.loadPage(
+        messagePlans.EMAIL_ROUTING_CONFIG.id
+      );
+
+      // Check summary list is present and displays the name of the previously selected template
+      const summaryList = page.getByTestId('previous-selection-summary');
+      await expect(summaryList).toBeVisible();
+      await expect(summaryList).toContainText('Previously selected template');
+      await expect(summaryList).toContainText(templates.EMAIL2.name);
+
+      const selectedRadio = page.getByTestId(`${templates.EMAIL2.id}-radio`);
+      await expect(selectedRadio).toBeChecked();
+    });
+  });
+
+  test.describe('redirects to invalid message plan page', () => {
+    test('when message plan cannot be found', async ({ page, baseURL }) => {
+      const chooseEmailTemplatePage = new RoutingChooseEmailTemplatePage(page);
+
+      await chooseEmailTemplatePage.loadPage(notFoundMessagePlanId);
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+
+    test('when routing config ID is invalid', async ({ page, baseURL }) => {
+      const chooseEmailTemplatePage = new RoutingChooseEmailTemplatePage(page);
+
+      await chooseEmailTemplatePage.loadPage(invalidMessagePlanId);
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+
+    test('when routing config does not have an email channel', async ({
+      page,
+      baseURL,
+    }) => {
+      const chooseEmailTemplatePage = new RoutingChooseEmailTemplatePage(page);
+
+      await chooseEmailTemplatePage.loadPage(
+        messagePlans.NON_EMAIL_ROUTING_CONFIG.id
+      );
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+  });
+});
diff --git a/tests/test-team/template-mgmt-routing-component-tests/email/preview-email-template.routing-component.spec.ts b/tests/test-team/template-mgmt-routing-component-tests/email/preview-email-template.routing-component.spec.ts
new file mode 100644
index 000000000..ac2a2cad2
--- /dev/null
+++ b/tests/test-team/template-mgmt-routing-component-tests/email/preview-email-template.routing-component.spec.ts
@@ -0,0 +1,150 @@
+import { test, expect } from '@playwright/test';
+import {
+  assertFooterLinks,
+  assertSignOutLink,
+  assertHeaderLogoLink,
+  assertSkipToMainContent,
+  assertGoBackLink,
+} from '../../helpers/template-mgmt-common.steps';
+import {
+  createAuthHelper,
+  TestUser,
+  testUsers,
+} from 'helpers/auth/cognito-auth-helper';
+import { TemplateStorageHelper } from 'helpers/db/template-storage-helper';
+import { randomUUID } from 'node:crypto';
+import { TemplateFactory } from 'helpers/factories/template-factory';
+import { RoutingPreviewEmailTemplatePage } from 'pages/routing/email/preview-email-page';
+import { RoutingConfigFactory } from 'helpers/factories/routing-config-factory';
+import { RoutingConfigStorageHelper } from 'helpers/db/routing-config-storage-helper';
+
+const routingConfigStorageHelper = new RoutingConfigStorageHelper();
+const templateStorageHelper = new TemplateStorageHelper();
+
+const invalidTemplateId = 'invalid-id';
+const notFoundTemplateId = '7842c202-a31a-49d8-bdaf-276d64aec4a4';
+
+function createMessagePlans(user: TestUser) {
+  return {
+    EMAIL_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'NHSAPP,EMAIL'
+    ).dbEntry,
+  };
+}
+
+function createTemplates(user: TestUser) {
+  return {
+    EMAIL: TemplateFactory.createEmailTemplate(
+      randomUUID(),
+      user,
+      'Email template name'
+    ),
+    APP: TemplateFactory.createNhsAppTemplate(
+      randomUUID(),
+      user,
+      'App template name'
+    ),
+  };
+}
+
+test.describe('Routing - Preview email template page', () => {
+  let messagePlans: ReturnType<typeof createMessagePlans>;
+  let templates: ReturnType<typeof createTemplates>;
+
+  test.beforeAll(async () => {
+    const user = await createAuthHelper().getTestUser(testUsers.User1.userId);
+
+    messagePlans = createMessagePlans(user);
+    templates = createTemplates(user);
+
+    await routingConfigStorageHelper.seed(Object.values(messagePlans));
+    await templateStorageHelper.seedTemplateData(Object.values(templates));
+  });
+
+  test.afterAll(async () => {
+    await routingConfigStorageHelper.deleteSeeded();
+    await templateStorageHelper.deleteSeededTemplates();
+  });
+
+  test('common page tests', async ({ page, baseURL }) => {
+    const props = {
+      page: new RoutingPreviewEmailTemplatePage(page),
+      id: messagePlans.EMAIL_ROUTING_CONFIG.id,
+      additionalIds: [templates.EMAIL.id],
+      baseURL,
+      expectedUrl: `templates/message-plans/choose-email-template/${messagePlans.EMAIL_ROUTING_CONFIG.id}`,
+    };
+    await assertSkipToMainContent(props);
+    await assertHeaderLogoLink(props);
+    await assertFooterLinks(props);
+    await assertSignOutLink(props);
+    await assertGoBackLink(props);
+  });
+
+  test('loads the email template', async ({ page, baseURL }) => {
+    const previewEmailTemplatePage = new RoutingPreviewEmailTemplatePage(page);
+    await previewEmailTemplatePage.loadPage(
+      messagePlans.EMAIL_ROUTING_CONFIG.id,
+      templates.EMAIL.id
+    );
+    await expect(page).toHaveURL(
+      `${baseURL}/templates/message-plans/choose-email-template/${messagePlans.EMAIL_ROUTING_CONFIG.id}/preview-template/${templates.EMAIL.id}`
+    );
+
+    await expect(previewEmailTemplatePage.pageHeading).toContainText(
+      templates.EMAIL.name
+    );
+
+    await expect(page.getByText(templates.EMAIL.id)).toBeVisible();
+
+    await expect(page.locator('[id="preview-content-subject"]')).toHaveText(
+      templates.EMAIL.subject || ''
+    );
+
+    await expect(page.locator('[id="preview-content-message"]')).toHaveText(
+      templates.EMAIL.message || ''
+    );
+  });
+
+  test.describe('redirects to invalid template page', () => {
+    test('when template cannot be found', async ({ page, baseURL }) => {
+      const previewEmailTemplatePage = new RoutingPreviewEmailTemplatePage(
+        page
+      );
+
+      await previewEmailTemplatePage.loadPage(
+        messagePlans.EMAIL_ROUTING_CONFIG.id,
+        notFoundTemplateId
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+
+    test('when template ID is invalid', async ({ page, baseURL }) => {
+      const previewEmailTemplatePage = new RoutingPreviewEmailTemplatePage(
+        page
+      );
+
+      await previewEmailTemplatePage.loadPage(
+        messagePlans.EMAIL_ROUTING_CONFIG.id,
+        invalidTemplateId
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+
+    test('when template is not email', async ({ page, baseURL }) => {
+      const previewEmailTemplatePage = new RoutingPreviewEmailTemplatePage(
+        page
+      );
+
+      await previewEmailTemplatePage.loadPage(
+        messagePlans.EMAIL_ROUTING_CONFIG.id,
+        templates.APP.id
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+  });
+});
diff --git a/tests/test-team/template-mgmt-routing-component-tests/letter/choose-standard-letter-template.routing-component.spec.ts b/tests/test-team/template-mgmt-routing-component-tests/letter/choose-standard-letter-template.routing-component.spec.ts
new file mode 100644
index 000000000..d5860ddb7
--- /dev/null
+++ b/tests/test-team/template-mgmt-routing-component-tests/letter/choose-standard-letter-template.routing-component.spec.ts
@@ -0,0 +1,271 @@
+import { test, expect } from '@playwright/test';
+import { RoutingConfigStorageHelper } from 'helpers/db/routing-config-storage-helper';
+import {
+  assertFooterLinks,
+  assertSignOutLink,
+  assertHeaderLogoLink,
+  assertSkipToMainContent,
+  assertGoBackLinkNotPresent,
+} from '../../helpers/template-mgmt-common.steps';
+import { RoutingConfigFactory } from 'helpers/factories/routing-config-factory';
+import {
+  createAuthHelper,
+  TestUser,
+  testUsers,
+} from 'helpers/auth/cognito-auth-helper';
+import { TemplateStorageHelper } from 'helpers/db/template-storage-helper';
+import { randomUUID } from 'node:crypto';
+import { TemplateFactory } from 'helpers/factories/template-factory';
+import { RoutingChooseStandardLetterTemplatePage } from 'pages/routing/letter/choose-standard-letter-template-page';
+
+const routingConfigStorageHelper = new RoutingConfigStorageHelper();
+const templateStorageHelper = new TemplateStorageHelper();
+
+const invalidMessagePlanId = 'invalid-id';
+const notFoundMessagePlanId = '54c87d10-8189-48ad-a30d-42c0c1a6b9dc';
+
+function createMessagePlans(user: TestUser) {
+  return {
+    LETTER_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'LETTER'
+    ).dbEntry,
+    NON_LETTER_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'NHSAPP'
+    ).dbEntry,
+  };
+}
+
+function createTemplates(user: TestUser) {
+  return {
+    LETTER1: TemplateFactory.uploadLetterTemplate(
+      randomUUID(),
+      user,
+      'Submitted letter template 1',
+      'SUBMITTED'
+    ),
+    LETTER2: TemplateFactory.uploadLetterTemplate(
+      randomUUID(),
+      user,
+      'Submitted letter template 2',
+      'SUBMITTED'
+    ),
+    LETTER3: TemplateFactory.uploadLetterTemplate(
+      randomUUID(),
+      user,
+      'Submitted letter template 3',
+      'SUBMITTED'
+    ),
+    FRENCH_LETTER: {
+      ...TemplateFactory.uploadLetterTemplate(
+        randomUUID(),
+        user,
+        'French letter template',
+        'SUBMITTED'
+      ),
+      language: 'fr',
+    },
+    ACCESSIBLE_LETTER: {
+      ...TemplateFactory.uploadLetterTemplate(
+        randomUUID(),
+        user,
+        'Accessible letter template',
+        'SUBMITTED'
+      ),
+      letterType: 'x1',
+    },
+    APP: TemplateFactory.createNhsAppTemplate(
+      randomUUID(),
+      user,
+      'App template'
+    ),
+  };
+}
+
+test.describe('Routing - Choose letter template page', () => {
+  let messagePlans: ReturnType<typeof createMessagePlans>;
+  let templates: ReturnType<typeof createTemplates>;
+
+  test.beforeAll(async () => {
+    const user = await createAuthHelper().getTestUser(testUsers.User1.userId);
+
+    messagePlans = createMessagePlans(user);
+    templates = createTemplates(user);
+
+    await routingConfigStorageHelper.seed(Object.values(messagePlans));
+    await templateStorageHelper.seedTemplateData(Object.values(templates));
+  });
+
+  test.afterAll(async () => {
+    await routingConfigStorageHelper.deleteSeeded();
+    await templateStorageHelper.deleteSeededTemplates();
+  });
+
+  test('common page tests', async ({ page, baseURL }) => {
+    const props = {
+      page: new RoutingChooseStandardLetterTemplatePage(page),
+      id: messagePlans.LETTER_ROUTING_CONFIG.id,
+      baseURL,
+    };
+    await assertSkipToMainContent(props);
+    await assertHeaderLogoLink(props);
+    await assertFooterLinks(props);
+    await assertSignOutLink(props);
+    await assertGoBackLinkNotPresent(props);
+  });
+
+  test('loads the choose letter template page for a message plan with a letter channel', async ({
+    page,
+    baseURL,
+  }) => {
+    const chooseLetterTemplatePage =
+      new RoutingChooseStandardLetterTemplatePage(page);
+    await chooseLetterTemplatePage.loadPage(
+      messagePlans.LETTER_ROUTING_CONFIG.id
+    );
+    await expect(page).toHaveURL(
+      `${baseURL}/templates/message-plans/choose-standard-english-letter-template/${messagePlans.LETTER_ROUTING_CONFIG.id}`
+    );
+
+    await test.step('displays list of letter templates to choose from', async () => {
+      const table = page.getByTestId('channel-templates-table');
+      await expect(table).toBeVisible();
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-select')
+      ).toHaveText('Select');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-name')
+      ).toHaveText('Name');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-type')
+      ).toHaveText('Type');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-last-edited')
+      ).toHaveText('Last edited');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-action')
+      ).toHaveText('');
+
+      for (const template of [
+        templates.LETTER1,
+        templates.LETTER2,
+        templates.LETTER3,
+      ]) {
+        await expect(table.getByText(template.name)).toBeVisible();
+
+        const radioButton = table.getByTestId(`${template.id}-radio`);
+        await expect(radioButton).toBeVisible();
+        await expect(radioButton).toHaveAttribute('value', template.id);
+        await expect(radioButton).not.toBeChecked();
+
+        const previewLink = table.getByTestId(`${template.id}-preview-link`);
+        await expect(previewLink).toBeVisible();
+        await expect(previewLink).toHaveText('Preview');
+        await expect(previewLink).toHaveAttribute(
+          'href',
+          `/templates/message-plans/choose-standard-english-letter-template/${messagePlans.LETTER_ROUTING_CONFIG.id}/preview-template/${template.id}`
+        );
+      }
+
+      // template filtering checks
+      await expect(table.getByText(templates.FRENCH_LETTER.name)).toBeHidden();
+      await expect(
+        table.getByText(templates.ACCESSIBLE_LETTER.name)
+      ).toBeHidden();
+      await expect(table.getByText(templates.APP.name)).toBeHidden();
+
+      const submitButton = page.getByTestId('submit-button');
+      await expect(submitButton).toBeVisible();
+      await expect(submitButton).toHaveText('Save and continue');
+
+      const goBackLink = page.getByRole('link', { name: 'Go back' });
+      await expect(goBackLink).toBeVisible();
+      await expect(goBackLink).toHaveAttribute(
+        'href',
+        `/templates/message-plans/choose-templates/${messagePlans.LETTER_ROUTING_CONFIG.id}`
+      );
+    });
+
+    await test.step('errors on no selection', async () => {
+      await page.getByTestId('submit-button').click();
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/choose-standard-english-letter-template/${messagePlans.LETTER_ROUTING_CONFIG.id}`
+      );
+
+      await expect(chooseLetterTemplatePage.errorSummary).toBeVisible();
+      await expect(chooseLetterTemplatePage.errorSummaryList).toHaveText([
+        'Choose a letter template',
+      ]);
+    });
+
+    await test.step('submits selected template and navigates to choose templates page', async () => {
+      await chooseLetterTemplatePage.loadPage(
+        messagePlans.LETTER_ROUTING_CONFIG.id
+      );
+
+      await page.getByTestId(`${templates.LETTER2.id}-radio`).check();
+      await page.getByTestId('submit-button').click();
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/choose-templates/${messagePlans.LETTER_ROUTING_CONFIG.id}`
+      );
+    });
+
+    await test.step('pre-selects previously selected template', async () => {
+      await chooseLetterTemplatePage.loadPage(
+        messagePlans.LETTER_ROUTING_CONFIG.id
+      );
+
+      // Check summary list is present and displays the name of the previously selected template
+      const summaryList = page.getByTestId('previous-selection-summary');
+      await expect(summaryList).toBeVisible();
+      await expect(summaryList).toContainText('Previously selected template');
+      await expect(summaryList).toContainText(templates.LETTER2.name);
+
+      const selectedRadio = page.getByTestId(`${templates.LETTER2.id}-radio`);
+      await expect(selectedRadio).toBeChecked();
+    });
+  });
+
+  test.describe('redirects to invalid message plan page', () => {
+    test('when message plan cannot be found', async ({ page, baseURL }) => {
+      const chooseLetterTemplatePage =
+        new RoutingChooseStandardLetterTemplatePage(page);
+
+      await chooseLetterTemplatePage.loadPage(notFoundMessagePlanId);
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+
+    test('when routing config ID is invalid', async ({ page, baseURL }) => {
+      const chooseLetterTemplatePage =
+        new RoutingChooseStandardLetterTemplatePage(page);
+
+      await chooseLetterTemplatePage.loadPage(invalidMessagePlanId);
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+
+    test('when routing config does not have an letter channel', async ({
+      page,
+      baseURL,
+    }) => {
+      const chooseLetterTemplatePage =
+        new RoutingChooseStandardLetterTemplatePage(page);
+
+      await chooseLetterTemplatePage.loadPage(
+        messagePlans.NON_LETTER_ROUTING_CONFIG.id
+      );
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+  });
+});
diff --git a/tests/test-team/template-mgmt-routing-component-tests/letter/preview-standard-letter-template.routing-component.spec.ts b/tests/test-team/template-mgmt-routing-component-tests/letter/preview-standard-letter-template.routing-component.spec.ts
new file mode 100644
index 000000000..8effc2572
--- /dev/null
+++ b/tests/test-team/template-mgmt-routing-component-tests/letter/preview-standard-letter-template.routing-component.spec.ts
@@ -0,0 +1,158 @@
+import { test, expect } from '@playwright/test';
+import {
+  assertFooterLinks,
+  assertSignOutLink,
+  assertHeaderLogoLink,
+  assertSkipToMainContent,
+  assertGoBackLink,
+} from '../../helpers/template-mgmt-common.steps';
+import {
+  createAuthHelper,
+  TestUser,
+  testUsers,
+} from 'helpers/auth/cognito-auth-helper';
+import { TemplateStorageHelper } from 'helpers/db/template-storage-helper';
+import { randomUUID } from 'node:crypto';
+import { TemplateFactory } from 'helpers/factories/template-factory';
+import { RoutingPreviewStandardLetterTemplatePage } from 'pages/routing/letter/preview-standard-letter-page';
+import { RoutingConfigFactory } from 'helpers/factories/routing-config-factory';
+import { RoutingConfigStorageHelper } from 'helpers/db/routing-config-storage-helper';
+
+const routingConfigStorageHelper = new RoutingConfigStorageHelper();
+const templateStorageHelper = new TemplateStorageHelper();
+
+const invalidTemplateId = 'invalid-id';
+const notFoundTemplateId = 'dc67b576-af7d-47b3-97d7-48fa204e7525';
+
+function createMessagePlans(user: TestUser) {
+  return {
+    LETTER_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'LETTER'
+    ).dbEntry,
+  };
+}
+
+function createTemplates(user: TestUser) {
+  return {
+    EMAIL: TemplateFactory.createEmailTemplate(
+      randomUUID(),
+      user,
+      'Email template name'
+    ),
+    LETTER: TemplateFactory.uploadLetterTemplate(
+      randomUUID(),
+      user,
+      'Letter template name'
+    ),
+  };
+}
+
+test.describe('Routing - Preview Letter template page', () => {
+  let messagePlans: ReturnType<typeof createMessagePlans>;
+  let templates: ReturnType<typeof createTemplates>;
+
+  test.beforeAll(async () => {
+    const user = await createAuthHelper().getTestUser(testUsers.User1.userId);
+
+    messagePlans = createMessagePlans(user);
+    templates = createTemplates(user);
+
+    await routingConfigStorageHelper.seed(Object.values(messagePlans));
+    await templateStorageHelper.seedTemplateData(Object.values(templates));
+  });
+
+  test.afterAll(async () => {
+    await routingConfigStorageHelper.deleteSeeded();
+    await templateStorageHelper.deleteSeededTemplates();
+  });
+
+  test('common page tests', async ({ page, baseURL }) => {
+    const props = {
+      page: new RoutingPreviewStandardLetterTemplatePage(page),
+      id: messagePlans.LETTER_ROUTING_CONFIG.id,
+      additionalIds: [templates.LETTER.id],
+      baseURL,
+      expectedUrl: `templates/message-plans/choose-standard-english-letter-template/${messagePlans.LETTER_ROUTING_CONFIG.id}`,
+    };
+    await assertSkipToMainContent(props);
+    await assertHeaderLogoLink(props);
+    await assertFooterLinks(props);
+    await assertSignOutLink(props);
+    await assertGoBackLink(props);
+  });
+
+  test('loads the Letter template', async ({ page, baseURL }) => {
+    const previewLetterTemplatePage =
+      new RoutingPreviewStandardLetterTemplatePage(page);
+    await previewLetterTemplatePage.loadPage(
+      messagePlans.LETTER_ROUTING_CONFIG.id,
+      templates.LETTER.id
+    );
+    await expect(page).toHaveURL(
+      `${baseURL}/templates/message-plans/choose-standard-english-letter-template/${messagePlans.LETTER_ROUTING_CONFIG.id}/preview-template/${templates.LETTER.id}`
+    );
+
+    await expect(previewLetterTemplatePage.pageHeading).toContainText(
+      templates.LETTER.name
+    );
+
+    if (
+      !templates.LETTER.campaignId ||
+      !templates.LETTER.files?.pdfTemplate?.fileName ||
+      !templates.LETTER.files?.testDataCsv?.fileName
+    ) {
+      throw new Error('Test data misconfiguration');
+    }
+
+    await expect(page.locator('[id="campaign-id"]')).toContainText(
+      templates.LETTER.campaignId
+    );
+
+    await expect(
+      page.getByText(templates.LETTER.files!.pdfTemplate!.fileName)
+    ).toBeVisible();
+
+    await expect(
+      page.getByText(templates.LETTER.files!.testDataCsv!.fileName)
+    ).toBeVisible();
+  });
+
+  test.describe('redirects to invalid template page', () => {
+    test('when template cannot be found', async ({ page, baseURL }) => {
+      const previewLetterTemplatePage =
+        new RoutingPreviewStandardLetterTemplatePage(page);
+
+      await previewLetterTemplatePage.loadPage(
+        messagePlans.LETTER_ROUTING_CONFIG.id,
+        notFoundTemplateId
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+
+    test('when template ID is invalid', async ({ page, baseURL }) => {
+      const previewLetterTemplatePage =
+        new RoutingPreviewStandardLetterTemplatePage(page);
+
+      await previewLetterTemplatePage.loadPage(
+        messagePlans.LETTER_ROUTING_CONFIG.id,
+        invalidTemplateId
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+
+    test('when template is not letter', async ({ page, baseURL }) => {
+      const previewLetterTemplatePage =
+        new RoutingPreviewStandardLetterTemplatePage(page);
+
+      await previewLetterTemplatePage.loadPage(
+        messagePlans.LETTER_ROUTING_CONFIG.id,
+        templates.EMAIL.id
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+  });
+});
diff --git a/tests/test-team/template-mgmt-routing-component-tests/nhs-app/choose-nhs-app-template.routing-component.spec.ts b/tests/test-team/template-mgmt-routing-component-tests/nhs-app/choose-nhs-app-template.routing-component.spec.ts
new file mode 100644
index 000000000..bd7ff6390
--- /dev/null
+++ b/tests/test-team/template-mgmt-routing-component-tests/nhs-app/choose-nhs-app-template.routing-component.spec.ts
@@ -0,0 +1,242 @@
+/* eslint-disable sonarjs/no-commented-code */
+import { test, expect } from '@playwright/test';
+import { RoutingConfigStorageHelper } from 'helpers/db/routing-config-storage-helper';
+import {
+  assertFooterLinks,
+  assertSignOutLink,
+  assertHeaderLogoLink,
+  assertSkipToMainContent,
+  assertGoBackLinkNotPresent,
+} from '../../helpers/template-mgmt-common.steps';
+import { RoutingConfigFactory } from 'helpers/factories/routing-config-factory';
+import {
+  createAuthHelper,
+  TestUser,
+  testUsers,
+} from 'helpers/auth/cognito-auth-helper';
+import { TemplateStorageHelper } from 'helpers/db/template-storage-helper';
+import { randomUUID } from 'node:crypto';
+import { TemplateFactory } from 'helpers/factories/template-factory';
+import { RoutingChooseNhsAppTemplatePage } from 'pages/routing/nhs-app/choose-nhs-app-template-page';
+
+const routingConfigStorageHelper = new RoutingConfigStorageHelper();
+const templateStorageHelper = new TemplateStorageHelper();
+
+const invalidMessagePlanId = 'invalid-id';
+const notFoundMessagePlanId = '67027ba8-00e4-49e7-8e3c-6501a0ee6884';
+
+function createMessagePlans(user: TestUser) {
+  return {
+    APP_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'NHSAPP'
+    ).dbEntry,
+    NON_APP_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'LETTER'
+    ).dbEntry,
+  };
+}
+
+function createTemplates(user: TestUser) {
+  return {
+    APP1: TemplateFactory.createNhsAppTemplate(
+      randomUUID(),
+      user,
+      'NHS App template 1'
+    ),
+    APP2: TemplateFactory.createNhsAppTemplate(
+      randomUUID(),
+      user,
+      'NHS App template 2'
+    ),
+    APP3: TemplateFactory.createNhsAppTemplate(
+      randomUUID(),
+      user,
+      'NHS App template 3'
+    ),
+    EMAIL: TemplateFactory.createEmailTemplate(
+      randomUUID(),
+      user,
+      'Email template'
+    ),
+  };
+}
+
+test.describe('Routing - Choose NHS app template page', () => {
+  let messagePlans: ReturnType<typeof createMessagePlans>;
+  let templates: ReturnType<typeof createTemplates>;
+
+  test.beforeAll(async () => {
+    const user = await createAuthHelper().getTestUser(testUsers.User1.userId);
+
+    messagePlans = createMessagePlans(user);
+    templates = createTemplates(user);
+
+    await routingConfigStorageHelper.seed(Object.values(messagePlans));
+    await templateStorageHelper.seedTemplateData(Object.values(templates));
+  });
+
+  test.afterAll(async () => {
+    await routingConfigStorageHelper.deleteSeeded();
+    await templateStorageHelper.deleteSeededTemplates();
+  });
+
+  test('common page tests', async ({ page, baseURL }) => {
+    const props = {
+      page: new RoutingChooseNhsAppTemplatePage(page),
+      id: messagePlans.APP_ROUTING_CONFIG.id,
+      baseURL,
+    };
+    await assertSkipToMainContent(props);
+    await assertHeaderLogoLink(props);
+    await assertFooterLinks(props);
+    await assertSignOutLink(props);
+    await assertGoBackLinkNotPresent(props);
+  });
+
+  test('loads the choose NHS app template page for a message plan with an NHS app channel', async ({
+    page,
+    baseURL,
+  }) => {
+    const chooseNhsAppTemplatePage = new RoutingChooseNhsAppTemplatePage(page);
+    await chooseNhsAppTemplatePage.loadPage(messagePlans.APP_ROUTING_CONFIG.id);
+    await expect(page).toHaveURL(
+      `${baseURL}/templates/message-plans/choose-nhs-app-template/${messagePlans.APP_ROUTING_CONFIG.id}`
+    );
+
+    await test.step('displays list of NHS app templates to choose from', async () => {
+      const table = page.getByTestId('channel-templates-table');
+      await expect(table).toBeVisible();
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-select')
+      ).toHaveText('Select');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-name')
+      ).toHaveText('Name');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-type')
+      ).toHaveText('Type');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-last-edited')
+      ).toHaveText('Last edited');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-action')
+      ).toHaveText('');
+
+      for (const template of [templates.APP1, templates.APP2, templates.APP3]) {
+        await expect(table.getByText(template.name)).toBeVisible();
+
+        const radioButton = table.getByTestId(`${template.id}-radio`);
+        await expect(radioButton).toBeVisible();
+        await expect(radioButton).toHaveAttribute('value', template.id);
+        await expect(radioButton).not.toBeChecked();
+
+        const previewLink = table.getByTestId(`${template.id}-preview-link`);
+        await expect(previewLink).toBeVisible();
+        await expect(previewLink).toHaveText('Preview');
+        await expect(previewLink).toHaveAttribute(
+          'href',
+          `/templates/message-plans/choose-nhs-app-template/${messagePlans.APP_ROUTING_CONFIG.id}/preview-template/${template.id}`
+        );
+      }
+
+      const submitButton = page.getByTestId('submit-button');
+      await expect(submitButton).toBeVisible();
+      await expect(submitButton).toHaveText('Save and continue');
+
+      await expect(table.getByText(templates.EMAIL.name)).toBeHidden();
+
+      const goBackLink = page.getByRole('link', { name: 'Go back' });
+      await expect(goBackLink).toBeVisible();
+      await expect(goBackLink).toHaveAttribute(
+        'href',
+        `/templates/message-plans/choose-templates/${messagePlans.APP_ROUTING_CONFIG.id}`
+      );
+    });
+
+    await test.step('errors on no selection', async () => {
+      await page.getByTestId('submit-button').click();
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/choose-nhs-app-template/${messagePlans.APP_ROUTING_CONFIG.id}`
+      );
+
+      await expect(chooseNhsAppTemplatePage.errorSummary).toBeVisible();
+      await expect(chooseNhsAppTemplatePage.errorSummaryList).toHaveText([
+        'Choose an NHS App template',
+      ]);
+    });
+
+    await test.step('submits selected template and navigates to choose templates page', async () => {
+      await chooseNhsAppTemplatePage.loadPage(
+        messagePlans.APP_ROUTING_CONFIG.id
+      );
+
+      await page.getByTestId(`${templates.APP2.id}-radio`).check();
+      await page.getByTestId('submit-button').click();
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/choose-templates/${messagePlans.APP_ROUTING_CONFIG.id}`
+      );
+    });
+
+    await test.step('pre-selects previously selected template', async () => {
+      await chooseNhsAppTemplatePage.loadPage(
+        messagePlans.APP_ROUTING_CONFIG.id
+      );
+
+      // Check summary list is present and displays the name of the previously selected template
+      const summaryList = page.getByTestId('previous-selection-summary');
+      await expect(summaryList).toBeVisible();
+      await expect(summaryList).toContainText('Previously selected template');
+      await expect(summaryList).toContainText(templates.APP2.name);
+
+      const selectedRadio = page.getByTestId(`${templates.APP2.id}-radio`);
+      await expect(selectedRadio).toBeChecked();
+    });
+  });
+
+  test.describe('redirects to invalid message plan page', () => {
+    test('when message plan cannot be found', async ({ page, baseURL }) => {
+      const chooseNhsAppTemplatePage = new RoutingChooseNhsAppTemplatePage(
+        page
+      );
+
+      await chooseNhsAppTemplatePage.loadPage(notFoundMessagePlanId);
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+
+    test('when routing config ID is invalid', async ({ page, baseURL }) => {
+      const chooseNhsAppTemplatePage = new RoutingChooseNhsAppTemplatePage(
+        page
+      );
+
+      await chooseNhsAppTemplatePage.loadPage(invalidMessagePlanId);
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+
+    test('when routing config does not have an NHS app channel', async ({
+      page,
+      baseURL,
+    }) => {
+      const chooseNhsAppTemplatePage = new RoutingChooseNhsAppTemplatePage(
+        page
+      );
+
+      await chooseNhsAppTemplatePage.loadPage(
+        messagePlans.NON_APP_ROUTING_CONFIG.id
+      );
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+  });
+});
diff --git a/tests/test-team/template-mgmt-routing-component-tests/nhs-app/preview-nhs-app-template.routing-component.spec.ts b/tests/test-team/template-mgmt-routing-component-tests/nhs-app/preview-nhs-app-template.routing-component.spec.ts
new file mode 100644
index 000000000..a30d0291d
--- /dev/null
+++ b/tests/test-team/template-mgmt-routing-component-tests/nhs-app/preview-nhs-app-template.routing-component.spec.ts
@@ -0,0 +1,148 @@
+import { test, expect } from '@playwright/test';
+import {
+  assertFooterLinks,
+  assertSignOutLink,
+  assertHeaderLogoLink,
+  assertSkipToMainContent,
+  assertGoBackLink,
+} from '../../helpers/template-mgmt-common.steps';
+import {
+  createAuthHelper,
+  TestUser,
+  testUsers,
+} from 'helpers/auth/cognito-auth-helper';
+import { TemplateStorageHelper } from 'helpers/db/template-storage-helper';
+import { randomUUID } from 'node:crypto';
+import { TemplateFactory } from 'helpers/factories/template-factory';
+import { RoutingPreviewNhsAppTemplatePage } from 'pages/routing/nhs-app/preview-nhs-app-page';
+import { RoutingConfigFactory } from 'helpers/factories/routing-config-factory';
+import { RoutingConfigStorageHelper } from 'helpers/db/routing-config-storage-helper';
+
+const routingConfigStorageHelper = new RoutingConfigStorageHelper();
+const templateStorageHelper = new TemplateStorageHelper();
+
+const invalidTemplateId = 'invalid-id';
+const notFoundTemplateId = '581c4a83-8846-4737-bb11-963225295750';
+
+function createMessagePlans(user: TestUser) {
+  return {
+    APP_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'NHSAPP'
+    ).dbEntry,
+  };
+}
+
+function createTemplates(user: TestUser) {
+  return {
+    EMAIL: TemplateFactory.createEmailTemplate(
+      randomUUID(),
+      user,
+      'Email template name'
+    ),
+    APP: TemplateFactory.createNhsAppTemplate(
+      randomUUID(),
+      user,
+      'App template name'
+    ),
+  };
+}
+
+test.describe('Routing - Preview app template page', () => {
+  let messagePlans: ReturnType<typeof createMessagePlans>;
+  let templates: ReturnType<typeof createTemplates>;
+
+  test.beforeAll(async () => {
+    const user = await createAuthHelper().getTestUser(testUsers.User1.userId);
+
+    messagePlans = createMessagePlans(user);
+    templates = createTemplates(user);
+
+    await routingConfigStorageHelper.seed(Object.values(messagePlans));
+    await templateStorageHelper.seedTemplateData(Object.values(templates));
+  });
+
+  test.afterAll(async () => {
+    await routingConfigStorageHelper.deleteSeeded();
+    await templateStorageHelper.deleteSeededTemplates();
+  });
+
+  test('common page tests', async ({ page, baseURL }) => {
+    const props = {
+      page: new RoutingPreviewNhsAppTemplatePage(page),
+      id: messagePlans.APP_ROUTING_CONFIG.id,
+      additionalIds: [templates.APP.id],
+      baseURL,
+      expectedUrl: `templates/message-plans/choose-nhs-app-template/${messagePlans.APP_ROUTING_CONFIG.id}`,
+    };
+    await assertSkipToMainContent(props);
+    await assertHeaderLogoLink(props);
+    await assertFooterLinks(props);
+    await assertSignOutLink(props);
+    await assertGoBackLink(props);
+  });
+
+  test('loads the NHS app template', async ({ page, baseURL }) => {
+    const previewNhsAppTemplatePage = new RoutingPreviewNhsAppTemplatePage(
+      page
+    );
+    await previewNhsAppTemplatePage.loadPage(
+      messagePlans.APP_ROUTING_CONFIG.id,
+      templates.APP.id
+    );
+    await expect(page).toHaveURL(
+      `${baseURL}/templates/message-plans/choose-nhs-app-template/${messagePlans.APP_ROUTING_CONFIG.id}/preview-template/${templates.APP.id}`
+    );
+
+    await expect(previewNhsAppTemplatePage.pageHeading).toContainText(
+      templates.APP.name
+    );
+
+    await expect(page.getByText(templates.APP.id)).toBeVisible();
+
+    await expect(page.locator('[id="preview-content-message"]')).toHaveText(
+      templates.APP.message || ''
+    );
+  });
+
+  test.describe('redirects to invalid template page', () => {
+    test('when template cannot be found', async ({ page, baseURL }) => {
+      const previewNhsAppTemplatePage = new RoutingPreviewNhsAppTemplatePage(
+        page
+      );
+
+      await previewNhsAppTemplatePage.loadPage(
+        messagePlans.APP_ROUTING_CONFIG.id,
+        notFoundTemplateId
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+
+    test('when template ID is invalid', async ({ page, baseURL }) => {
+      const previewNhsAppTemplatePage = new RoutingPreviewNhsAppTemplatePage(
+        page
+      );
+
+      await previewNhsAppTemplatePage.loadPage(
+        messagePlans.APP_ROUTING_CONFIG.id,
+        invalidTemplateId
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+
+    test('when template is not NHS app', async ({ page, baseURL }) => {
+      const previewNhsAppTemplatePage = new RoutingPreviewNhsAppTemplatePage(
+        page
+      );
+
+      await previewNhsAppTemplatePage.loadPage(
+        messagePlans.APP_ROUTING_CONFIG.id,
+        templates.EMAIL.id
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+  });
+});
diff --git a/tests/test-team/template-mgmt-routing-component-tests/sms/choose-sms-template.routing-component.spec.ts b/tests/test-team/template-mgmt-routing-component-tests/sms/choose-sms-template.routing-component.spec.ts
new file mode 100644
index 000000000..6b732f8d2
--- /dev/null
+++ b/tests/test-team/template-mgmt-routing-component-tests/sms/choose-sms-template.routing-component.spec.ts
@@ -0,0 +1,240 @@
+/* eslint-disable sonarjs/no-commented-code */
+import { test, expect } from '@playwright/test';
+import { RoutingConfigStorageHelper } from 'helpers/db/routing-config-storage-helper';
+import {
+  assertFooterLinks,
+  assertSignOutLink,
+  assertHeaderLogoLink,
+  assertSkipToMainContent,
+  assertGoBackLinkNotPresent,
+} from '../../helpers/template-mgmt-common.steps';
+import { RoutingConfigFactory } from 'helpers/factories/routing-config-factory';
+import {
+  createAuthHelper,
+  TestUser,
+  testUsers,
+} from 'helpers/auth/cognito-auth-helper';
+import { TemplateStorageHelper } from 'helpers/db/template-storage-helper';
+import { randomUUID } from 'node:crypto';
+import { TemplateFactory } from 'helpers/factories/template-factory';
+import { RoutingChooseTextMessageTemplatePage } from 'pages/routing/sms/choose-sms-template-page';
+
+const routingConfigStorageHelper = new RoutingConfigStorageHelper();
+const templateStorageHelper = new TemplateStorageHelper();
+
+const invalidMessagePlanId = 'invalid-id';
+const notFoundMessagePlanId = '906372fd-971c-484e-8d32-0225bd561762';
+
+function createMessagePlans(user: TestUser) {
+  return {
+    SMS_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'NHSAPP,SMS'
+    ).dbEntry,
+    NON_SMS_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'NHSAPP'
+    ).dbEntry,
+  };
+}
+
+function createTemplates(user: TestUser) {
+  return {
+    SMS1: TemplateFactory.createSmsTemplate(
+      randomUUID(),
+      user,
+      'Submitted sms template 1'
+    ),
+    SMS2: TemplateFactory.createSmsTemplate(
+      randomUUID(),
+      user,
+      'Submitted sms template 2'
+    ),
+    SMS3: TemplateFactory.createSmsTemplate(
+      randomUUID(),
+      user,
+      'Submitted sms template 3'
+    ),
+    APP: TemplateFactory.createNhsAppTemplate(
+      randomUUID(),
+      user,
+      'App template'
+    ),
+  };
+}
+
+test.describe('Routing - Choose sms template page', () => {
+  let messagePlans: ReturnType<typeof createMessagePlans>;
+  let templates: ReturnType<typeof createTemplates>;
+
+  test.beforeAll(async () => {
+    const user = await createAuthHelper().getTestUser(testUsers.User1.userId);
+
+    messagePlans = createMessagePlans(user);
+    templates = createTemplates(user);
+
+    await routingConfigStorageHelper.seed(Object.values(messagePlans));
+    await templateStorageHelper.seedTemplateData(Object.values(templates));
+  });
+
+  test.afterAll(async () => {
+    await routingConfigStorageHelper.deleteSeeded();
+    await templateStorageHelper.deleteSeededTemplates();
+  });
+
+  test('common page tests', async ({ page, baseURL }) => {
+    const props = {
+      page: new RoutingChooseTextMessageTemplatePage(page),
+      id: messagePlans.SMS_ROUTING_CONFIG.id,
+      baseURL,
+    };
+    await assertSkipToMainContent(props);
+    await assertHeaderLogoLink(props);
+    await assertFooterLinks(props);
+    await assertSignOutLink(props);
+    await assertGoBackLinkNotPresent(props);
+  });
+
+  test('loads the choose sms template page for a message plan with an sms channel', async ({
+    page,
+    baseURL,
+  }) => {
+    const chooseSmsTemplatePage = new RoutingChooseTextMessageTemplatePage(
+      page
+    );
+    await chooseSmsTemplatePage.loadPage(messagePlans.SMS_ROUTING_CONFIG.id);
+    await expect(page).toHaveURL(
+      `${baseURL}/templates/message-plans/choose-text-message-template/${messagePlans.SMS_ROUTING_CONFIG.id}`
+    );
+
+    await test.step('displays list of sms templates to choose from', async () => {
+      const table = page.getByTestId('channel-templates-table');
+      await expect(table).toBeVisible();
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-select')
+      ).toHaveText('Select');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-name')
+      ).toHaveText('Name');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-type')
+      ).toHaveText('Type');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-last-edited')
+      ).toHaveText('Last edited');
+      await expect(
+        table.getByTestId('channel-templates-table-header-template-action')
+      ).toHaveText('');
+
+      for (const template of [templates.SMS1, templates.SMS2, templates.SMS3]) {
+        await expect(table.getByText(template.name)).toBeVisible();
+
+        const radioButton = table.getByTestId(`${template.id}-radio`);
+        await expect(radioButton).toBeVisible();
+        await expect(radioButton).toHaveAttribute('value', template.id);
+        await expect(radioButton).not.toBeChecked();
+
+        const previewLink = table.getByTestId(`${template.id}-preview-link`);
+        await expect(previewLink).toBeVisible();
+        await expect(previewLink).toHaveText('Preview');
+        await expect(previewLink).toHaveAttribute(
+          'href',
+          `/templates/message-plans/choose-text-message-template/${messagePlans.SMS_ROUTING_CONFIG.id}/preview-template/${template.id}`
+        );
+      }
+
+      await expect(table.getByText(templates.APP.name)).toBeHidden();
+
+      const submitButton = page.getByTestId('submit-button');
+      await expect(submitButton).toBeVisible();
+      await expect(submitButton).toHaveText('Save and continue');
+
+      const goBackLink = page.getByRole('link', { name: 'Go back' });
+      await expect(goBackLink).toBeVisible();
+      await expect(goBackLink).toHaveAttribute(
+        'href',
+        `/templates/message-plans/choose-templates/${messagePlans.SMS_ROUTING_CONFIG.id}`
+      );
+    });
+
+    await test.step('errors on no selection', async () => {
+      await page.getByTestId('submit-button').click();
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/choose-text-message-template/${messagePlans.SMS_ROUTING_CONFIG.id}`
+      );
+
+      await expect(chooseSmsTemplatePage.errorSummary).toBeVisible();
+      await expect(chooseSmsTemplatePage.errorSummaryList).toHaveText([
+        'Choose a text message (SMS) template',
+      ]);
+    });
+
+    await test.step('submits selected template and navigates to choose templates page', async () => {
+      await chooseSmsTemplatePage.loadPage(messagePlans.SMS_ROUTING_CONFIG.id);
+
+      await page.getByTestId(`${templates.SMS2.id}-radio`).check();
+      await page.getByTestId('submit-button').click();
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/choose-templates/${messagePlans.SMS_ROUTING_CONFIG.id}`
+      );
+    });
+
+    await test.step('pre-selects previously selected template', async () => {
+      await chooseSmsTemplatePage.loadPage(messagePlans.SMS_ROUTING_CONFIG.id);
+
+      // Check summary list is present and displays the name of the previously selected template
+      const summaryList = page.getByTestId('previous-selection-summary');
+      await expect(summaryList).toBeVisible();
+      await expect(summaryList).toContainText('Previously selected template');
+      await expect(summaryList).toContainText(templates.SMS2.name);
+
+      const selectedRadio = page.getByTestId(`${templates.SMS2.id}-radio`);
+      await expect(selectedRadio).toBeChecked();
+    });
+  });
+
+  test.describe('redirects to invalid message plan page', () => {
+    test('when message plan cannot be found', async ({ page, baseURL }) => {
+      const chooseSmsTemplatePage = new RoutingChooseTextMessageTemplatePage(
+        page
+      );
+
+      await chooseSmsTemplatePage.loadPage(notFoundMessagePlanId);
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+
+    test('when routing config ID is invalid', async ({ page, baseURL }) => {
+      const chooseSmsTemplatePage = new RoutingChooseTextMessageTemplatePage(
+        page
+      );
+
+      await chooseSmsTemplatePage.loadPage(invalidMessagePlanId);
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+
+    test('when routing config does not have an sms channel', async ({
+      page,
+      baseURL,
+    }) => {
+      const chooseSmsTemplatePage = new RoutingChooseTextMessageTemplatePage(
+        page
+      );
+
+      await chooseSmsTemplatePage.loadPage(
+        messagePlans.NON_SMS_ROUTING_CONFIG.id
+      );
+
+      await expect(page).toHaveURL(
+        `${baseURL}/templates/message-plans/invalid`
+      );
+    });
+  });
+});
diff --git a/tests/test-team/template-mgmt-routing-component-tests/sms/preview-sms-template.routing-component.spec.ts b/tests/test-team/template-mgmt-routing-component-tests/sms/preview-sms-template.routing-component.spec.ts
new file mode 100644
index 000000000..383f3fd43
--- /dev/null
+++ b/tests/test-team/template-mgmt-routing-component-tests/sms/preview-sms-template.routing-component.spec.ts
@@ -0,0 +1,140 @@
+import { test, expect } from '@playwright/test';
+import {
+  assertFooterLinks,
+  assertSignOutLink,
+  assertHeaderLogoLink,
+  assertSkipToMainContent,
+  assertGoBackLink,
+} from '../../helpers/template-mgmt-common.steps';
+import {
+  createAuthHelper,
+  TestUser,
+  testUsers,
+} from 'helpers/auth/cognito-auth-helper';
+import { TemplateStorageHelper } from 'helpers/db/template-storage-helper';
+import { randomUUID } from 'node:crypto';
+import { TemplateFactory } from 'helpers/factories/template-factory';
+import { RoutingPreviewSmsTemplatePage } from 'pages/routing/sms/preview-sms-template-page';
+import { RoutingConfigFactory } from 'helpers/factories/routing-config-factory';
+import { RoutingConfigStorageHelper } from 'helpers/db/routing-config-storage-helper';
+
+const routingConfigStorageHelper = new RoutingConfigStorageHelper();
+const templateStorageHelper = new TemplateStorageHelper();
+
+const invalidTemplateId = 'invalid-id';
+const notFoundTemplateId = 'cbb6fa2b-2019-493c-b4b9-edad6cfa2196';
+
+function createMessagePlans(user: TestUser) {
+  return {
+    SMS_ROUTING_CONFIG: RoutingConfigFactory.createForMessageOrder(
+      user,
+      'NHSAPP,SMS'
+    ).dbEntry,
+  };
+}
+
+function createTemplates(user: TestUser) {
+  return {
+    EMAIL: TemplateFactory.createEmailTemplate(
+      randomUUID(),
+      user,
+      'Email template name'
+    ),
+    SMS: TemplateFactory.createSmsTemplate(
+      randomUUID(),
+      user,
+      'SMS template name'
+    ),
+  };
+}
+
+test.describe('Routing - Preview SMS template page', () => {
+  let messagePlans: ReturnType<typeof createMessagePlans>;
+  let templates: ReturnType<typeof createTemplates>;
+
+  test.beforeAll(async () => {
+    const user = await createAuthHelper().getTestUser(testUsers.User1.userId);
+
+    messagePlans = createMessagePlans(user);
+    templates = createTemplates(user);
+
+    await routingConfigStorageHelper.seed(Object.values(messagePlans));
+    await templateStorageHelper.seedTemplateData(Object.values(templates));
+  });
+
+  test.afterAll(async () => {
+    await routingConfigStorageHelper.deleteSeeded();
+    await templateStorageHelper.deleteSeededTemplates();
+  });
+
+  test('common page tests', async ({ page, baseURL }) => {
+    const props = {
+      page: new RoutingPreviewSmsTemplatePage(page),
+      id: messagePlans.SMS_ROUTING_CONFIG.id,
+      additionalIds: [templates.SMS.id],
+      baseURL,
+      expectedUrl: `templates/message-plans/choose-text-message-template/${messagePlans.SMS_ROUTING_CONFIG.id}`,
+    };
+    await assertSkipToMainContent(props);
+    await assertHeaderLogoLink(props);
+    await assertFooterLinks(props);
+    await assertSignOutLink(props);
+    await assertGoBackLink(props);
+  });
+
+  test('loads the SMS template', async ({ page, baseURL }) => {
+    const previewSmsTemplatePage = new RoutingPreviewSmsTemplatePage(page);
+    await previewSmsTemplatePage.loadPage(
+      messagePlans.SMS_ROUTING_CONFIG.id,
+      templates.SMS.id
+    );
+    await expect(page).toHaveURL(
+      `${baseURL}/templates/message-plans/choose-text-message-template/${messagePlans.SMS_ROUTING_CONFIG.id}/preview-template/${templates.SMS.id}`
+    );
+
+    await expect(previewSmsTemplatePage.pageHeading).toContainText(
+      templates.SMS.name
+    );
+
+    await expect(page.getByText(templates.SMS.id)).toBeVisible();
+
+    await expect(page.locator('[id="preview-content-message"]')).toHaveText(
+      templates.SMS.message || ''
+    );
+  });
+
+  test.describe('redirects to invalid template page', () => {
+    test('when template cannot be found', async ({ page, baseURL }) => {
+      const previewSmsTemplatePage = new RoutingPreviewSmsTemplatePage(page);
+
+      await previewSmsTemplatePage.loadPage(
+        messagePlans.SMS_ROUTING_CONFIG.id,
+        notFoundTemplateId
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+
+    test('when template ID is invalid', async ({ page, baseURL }) => {
+      const previewSmsTemplatePage = new RoutingPreviewSmsTemplatePage(page);
+
+      await previewSmsTemplatePage.loadPage(
+        messagePlans.SMS_ROUTING_CONFIG.id,
+        invalidTemplateId
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+
+    test('when template is not SMS', async ({ page, baseURL }) => {
+      const previewSmsTemplatePage = new RoutingPreviewSmsTemplatePage(page);
+
+      await previewSmsTemplatePage.loadPage(
+        messagePlans.SMS_ROUTING_CONFIG.id,
+        templates.EMAIL.id
+      );
+
+      await expect(page).toHaveURL(`${baseURL}/templates/invalid-template`);
+    });
+  });
+});
diff --git a/utils/utils/src/__tests__/enum.test.ts b/utils/utils/src/__tests__/enum.test.ts
index 1a96b0b6e..36c4f92d9 100644
--- a/utils/utils/src/__tests__/enum.test.ts
+++ b/utils/utils/src/__tests__/enum.test.ts
@@ -27,6 +27,7 @@ import {
   templateDisplayDeleteAction,
   templateTypeDisplayMappings,
   templateTypeToUrlTextMappings,
+  cascadeTemplateTypeToUrlTextMappings,
 } from '../enum';
 import { TEMPLATE_STATUS_LIST } from 'nhs-notify-backend-client';
 
@@ -199,16 +200,24 @@ describe('statusToColourMapping', () => {
 });
 
 describe('templateTypeToUrlTextMappings', () => {
-  test('NHS_APP', () => {
-    expect(templateTypeToUrlTextMappings('NHS_APP')).toEqual('nhs-app');
-  });
-
-  test('SMS', () => {
-    expect(templateTypeToUrlTextMappings('SMS')).toEqual('text-message');
+  test.each([
+    ['NHS_APP', 'nhs-app'],
+    ['SMS', 'text-message'],
+    ['EMAIL', 'email'],
+    ['LETTER', 'letter'],
+  ] as const)('$type maps to url fragment $expected', (type, expected) => {
+    expect(templateTypeToUrlTextMappings(type)).toEqual(expected);
   });
+});
 
-  test('EMAIL', () => {
-    expect(templateTypeToUrlTextMappings('EMAIL')).toEqual('email');
+describe('cascadeTemplateTypeToUrlTextMappings', () => {
+  test.each([
+    ['NHS_APP', 'nhs-app'],
+    ['SMS', 'text-message'],
+    ['EMAIL', 'email'],
+    ['LETTER', 'standard-english-letter'],
+  ] as const)('$type maps to url fragment $expected', (type, expected) => {
+    expect(cascadeTemplateTypeToUrlTextMappings(type)).toEqual(expected);
   });
 });
 
diff --git a/utils/utils/src/enum.ts b/utils/utils/src/enum.ts
index 5fe50847e..b182c6e96 100644
--- a/utils/utils/src/enum.ts
+++ b/utils/utils/src/enum.ts
@@ -176,6 +176,14 @@ export const templateTypeToUrlTextMappings = (type: TemplateType) =>
     LETTER: 'letter',
   })[type];
 
+export const cascadeTemplateTypeToUrlTextMappings = (type: TemplateType) =>
+  ({
+    NHS_APP: 'nhs-app',
+    SMS: 'text-message',
+    EMAIL: 'email',
+    LETTER: 'standard-english-letter',
+  })[type];
+
 const creationAction = (type: TemplateType) =>
   ({
     NHS_APP: 'create',
diff --git a/utils/utils/src/types.ts b/utils/utils/src/types.ts
index b0a0a081d..8052378b0 100644
--- a/utils/utils/src/types.ts
+++ b/utils/utils/src/types.ts
@@ -70,6 +70,13 @@ export type MessagePlanPageProps = {
   }>;
 };
 
+export type MessagePlanAndTemplatePageProps = {
+  params: Promise<{
+    routingConfigId: string;
+    templateId: string;
+  }>;
+};
+
 export type TemplateSubmittedPageProps = {
   params: Promise<{
     templateId: string;
diff --git a/utils/utils/src/zod-validators.ts b/utils/utils/src/zod-validators.ts
index 3399b0d03..11ee265f0 100644
--- a/utils/utils/src/zod-validators.ts
+++ b/utils/utils/src/zod-validators.ts
@@ -7,7 +7,7 @@ import {
   $LetterProperties,
   $NhsAppProperties,
   $SmsProperties,
-  $TemplateDtoSchema,
+  $TemplateDto,
   TEMPLATE_STATUS_LIST,
   TemplateDto,
 } from 'nhs-notify-backend-client';
@@ -24,14 +24,14 @@ export const zodValidate = <T extends z.Schema>(
 };
 
 export const $SubmittedTemplate = z.intersection(
-  $TemplateDtoSchema,
+  $TemplateDto,
   z.object({
     templateStatus: z.literal('SUBMITTED'),
   })
 );
 
 export const $NonSubmittedTemplate = z.intersection(
-  $TemplateDtoSchema,
+  $TemplateDto,
   z.object({
     templateStatus: z.enum(TEMPLATE_STATUS_LIST).exclude(['SUBMITTED']),
   })
@@ -41,10 +41,7 @@ export const $CreateNHSAppTemplate = z.intersection(
   $CreateUpdateTemplate,
   $NhsAppProperties
 );
-export const $NHSAppTemplate = z.intersection(
-  $TemplateDtoSchema,
-  $NhsAppProperties
-);
+export const $NHSAppTemplate = z.intersection($TemplateDto, $NhsAppProperties);
 export const $SubmittedNHSAppTemplate = z.intersection(
   $SubmittedTemplate,
   $NHSAppTemplate
@@ -55,10 +52,7 @@ export const $CreateEmailTemplate = z.intersection(
   $EmailProperties
 );
 
-export const $EmailTemplate = z.intersection(
-  $TemplateDtoSchema,
-  $EmailProperties
-);
+export const $EmailTemplate = z.intersection($TemplateDto, $EmailProperties);
 
 export const $SubmittedEmailTemplate = z.intersection(
   $SubmittedTemplate,
@@ -69,7 +63,7 @@ export const $CreateSMSTemplate = z.intersection(
   $CreateUpdateTemplate,
   $SmsProperties
 );
-export const $SMSTemplate = z.intersection($TemplateDtoSchema, $SmsProperties);
+export const $SMSTemplate = z.intersection($TemplateDto, $SmsProperties);
 
 export const $SubmittedSMSTemplate = z.intersection(
   $SubmittedTemplate,
@@ -81,7 +75,7 @@ export const $UploadLetterTemplate = z.intersection(
   $UploadLetterProperties
 );
 export const $LetterTemplate = z.intersection(
-  $TemplateDtoSchema,
+  $TemplateDto,
   $LetterProperties.extend({ files: $LetterFiles })
 );
 export const $SubmittedLetterTemplate = z.intersection(
@@ -111,7 +105,7 @@ export const validateSubmittedNHSAppTemplate = (template?: TemplateDto) =>
   zodValidate($SubmittedNHSAppTemplate, template);
 
 export const validateTemplate = (template?: TemplateDto) =>
-  zodValidate($TemplateDtoSchema, template);
+  zodValidate($TemplateDto, template);
 
 export const validateSubmittedLetterTemplate = (template?: TemplateDto) =>
   zodValidate($SubmittedLetterTemplate, template);